<template>
	<!-- 兑换页面 -->
	<view class="conversionorder">
		<!-- 标头 -->
		<view class="conversionorderTitle">
			<image class="conversionorderLogo" :src="require('@/static/exchange.png')" mode=""></image>
		</view>
		<!-- 选项卡 -->
		<u-tabs-swiper height="100" gutter="40" bar-width="70" bar-height="8" inactive-color="gray"
			class="conversionorderTabControl" font-size="35" active-color="black" @change="tabsChange" :current="swiperCurrent"
			ref="tabs" :list="list" :is-scroll="false"></u-tabs-swiper>
		<!-- 滚动提示字体 -->
		<u-notice-bar type="warning" :list="listScroll"></u-notice-bar>
		<!-- 订单列表-->
		<view class="orderList">
			<view class="orderBox" v-if="true">
				<!--每个商品-->
				<view class="orderSingle">
					<!-- 信息 -->
					<view class="orderDetail">
						<!-- 商品图片 -->
						<view class="orderPicture">
				
						</view>
						<!-- 商品标题 -->
						<view class="orderTitle">
							<p>限时活动【40元抽手机】苹果现货 iPhone12 256g</p>
							<span>2022/07/28 15:19:23</span>
						</view>
						<!-- 待提货 -->
						<view class="awaitBox">
							<view class="await">待提货</view>
						</view>
					</view>
					
					<!-- 订单货物 -->
					<view class="orderCommodity" v-if="false">
						<ul class="orderCommodityList">
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
						</ul>
					</view>
					<!-- 发货 -->
					<view class="orderDeliver">
						<!-- 价格 -->
						<view class="orderPrice">
							<image class="magicImg" :src="require('@/static/Bitmap.png')" mode=""></image>
							<span>40.00</span>
						</view>
						<!-- 按钮发货 -->
						<view class="btnDeliver">
							立即发货
						</view>
					</view>
				</view>
				<!--每个商品-->
				<view class="orderSingle">
					<!-- 信息 -->
					<view class="orderDetail">
						<!-- 商品图片 -->
						<view class="orderPicture">
				
						</view>
						<!-- 商品标题 -->
						<view class="orderTitle">
							<p>限时活动【40元抽手机】苹果现货 iPhone12 256g</p>
							<span>2022/07/28 15:19:23</span>
						</view>
						<!-- 待提货 -->
						<view class="awaitBox">
							<view class="await">待提货</view>
						</view>
					</view>
					
					<!-- 订单货物 -->
					<view class="orderCommodity">
						<ul class="orderCommodityList">
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
						</ul>
					</view>
					<!-- 发货 -->
					<view class="orderDeliver">
						<!-- 价格 -->
						<view class="orderPrice">
							<image class="magicImg" :src="require('@/static/Bitmap.png')" mode=""></image>
							<span>40.00</span>
						</view>
						<!-- 按钮发货 -->
						<view class="btnDeliver" @click="navSubmit">
							立即发货
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"Conversionorder",
		data(){
			return{
				// 选项卡
				list: [{
					name: '部落'
				}, {
					name: '待提货'
				}, {
					name: '已完成'
				}],
				// 选项卡下标
				swiperCurrent: 0,
				
				listScroll: [
					'滚动信息条',
					'产品送达时间请参考个人中心物流时间'
				]
			}
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			//跳转提交订单页
			navSubmit(){
				this.$Router.push("/pages/cabinet/submit/submit")
			},
		},
		created(){
			console.log(1);
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F7F7F7;
	}
*{
		margin: 0;
		padding: 0;
	}
	// 兑换页面
	.conversionorder{
		width: 100vw;
		height: 100vh;
		background-color: #F7F7F7;
		// 标头
		.conversionorderTitle {
			width: 750rpx;
			height: 210rpx;
			background-color: white;
			border-bottom: 1px solid rgba(211,211,211,0.2);
			.conversionorderLogo {
				width: 400rpx;
				height: 130rpx;
				margin: 40rpx 0 0 46rpx;
			}
		
			.conversionorderFont {
				width: 644rpx;
				height: 55rpx;
				display: flex;
				align-items: center;
				margin: auto;
				margin-left: 46rpx;
				p {
					font-weight: 600;
					font-size: 20px;
				}
		
		
			}
		}
		// 选项卡
		.conversionorderTabControl {
		
			// background-color: sandybrown!important;
			// 选项条设置
			::v-deep.u-tabs-scroll-box {
				justify-content: flex-start !important;
		
				// 部落
				.UEl_0 {
					width: 140rpx !important;
					flex: 0 !important;
					margin-left: 20rpx !important;
				}
		
				//待提现
				.UEl_1 {
					width: 140rpx !important;
					flex: 0 !important;
					margin-left: 10rpx !important;
				}
		
				//已完成
				.UEl_2 {
					width: 140rpx !important;
					flex: 0 !important;
					margin-left: 10rpx !important;
				}
		
				//已回收
				.UEl_3 {
					width: 140rpx !important;
					flex: 0 !important;
					margin-left: 10rpx !important;
				}
		
				.u-scroll-bar {
					margin-left: 20rpx !important;
				}
			}
		
		}
		
		
		//订单
		.orderList {
			width: 750rpx;
			display: flex;
			justify-content: center;
			padding-bottom: 100rpx;
		
			.orderBox {
				display: flex;
				flex-direction: column;
				margin-top: 30rpx;
				background-color: white;
				width: 680rpx;
				background-color: #F7F7F7;
		
				// 每一个订单
				.orderSingle {
					background-color: white;
					border-radius: 15rpx;
					width: 680rpx;
					display: flex;
					margin-bottom: 25rpx;
		
					align-items: center;
					flex-direction: column;
		
					// 信息
					.orderDetail {
						width: 640rpx;
						height: 240rpx;
						display: flex;
						// background-color: red;
						justify-content: space-between;
						align-items: center;
		
						//商品图片
						.orderPicture {
							width: 200rpx;
							height: 200rpx;
							border: 1px solid yellow;
						}
		
						// 商品标题
						.orderTitle {
							width: 300rpx;
							height: 200rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
		
							p {
								font-size: 14px;
								overflow: hidden;
								/* 设置元素为弹性伸缩盒 */
								display: -webkit-box;
								/* 设置弹性盒纵向排列 */
								-webkit-box-orient: vertical;
								/* 你要显示多少行 而且设置这个属性后，不需要单独设置ellipsis就可以显示为省略号*/
								-webkit-line-clamp: 2;
							}
		
							span {
								font-size: 13px;
								color: darkgray;
							}
						}
		
						//待提货
						.awaitBox {
							width: 110rpx;
							height: 200rpx;
							display: flex;
							align-items: flex-start;
		
							.await {
								text-align: center;
								font-size: 15px;
								color: #D34431;
							}
						}
		
					}
		
					// 订单货物
					.orderCommodity{
						width: 680rpx;
						height: 150rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						.orderCommodityList{
							width: 640rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							li{
								width: 120rpx;
								height: 120rpx;
								list-style: none;
								background-color: red;
							}
						}
					}
					
					// 发货
					.orderDeliver {
						width: 640rpx;
						height: 120rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
		
						// 价格
						.orderPrice {
							display: flex;
							align-items: center;
							.magicImg{
								width: 25rpx;
								height: 50rpx;
								margin: 0 15rpx 0 10rpx;
							}
							span{
								font-size: 24px;
								font-weight: 700;
							}		
						}
		
						// 发货按钮
						.btnDeliver {
							width: 170rpx;
							height: 75rpx;
							line-height: 75rpx;
							font-size: 15px;
							color: white;
							text-align: center;
							border-radius: 5px;
							background-image: linear-gradient(to bottom right, #FFCB93, #F72934);
						}
						
					}
					
					
				}
			}
		}
	
	}
</style>