From 5abc4dce430cc2b3e21d0062d6bd974127af99ca Mon Sep 17 00:00:00 2001
From: fanfan <franceesfan@163.com>
Date: Fri, 8 Mar 2024 15:15:40 +0800
Subject: [PATCH] =?UTF-8?q?=E7=B4=B0=E7=AF=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/news3/shopDealerOrder.vue | 1084 +++++++++++++++++--------------
 1 file changed, 587 insertions(+), 497 deletions(-)

diff --git a/pages/news3/shopDealerOrder.vue b/pages/news3/shopDealerOrder.vue
index eb3bcff..d23195a 100644
--- a/pages/news3/shopDealerOrder.vue
+++ b/pages/news3/shopDealerOrder.vue
@@ -3,7 +3,8 @@
 		<view class="head-info">
 			<!-- 搜索 -->
 			<view class="searchContent">
-				<u-search height="50" @search="getListAfter" @custom="getListAfter" placeholder="输入订单编号/收件人名字/电话商品名称" v-model="keyword"></u-search>
+				<u-search height="50" @search="getListAfter" @custom="getListAfter" placeholder="输入订单编号"
+					v-model="keyword"></u-search>
 				<!-- <u-input v-model="keyword" placeholder="输入订单编号/收件人名字/电话商品名称"/> -->
 				<!-- <u-icon name="search" class="search"></u-icon> -->
 				<!-- <view class="filter" @click="getFilterHandle">
@@ -15,17 +16,15 @@
 		<!-- 分类列表 -->
 		<view class="container">
 			<view class="classify-list">
-				<view class="list" v-for="(item,index) in classList"
-				:class="{'action':classifyShow==item.id}"
-				@click="onClassify(item,index)"
-				:key="index">
+				<view class="list" v-for="(item,index) in classList" :class="{'action':classifyShow==item.id}"
+					@click="onClassify(item,index)" :key="index">
 					<text>{{item.name}}</text>
 					<text class="line" v-show="classifyShow==item.id"></text>
 				</view>
 			</view>
 		</view>
 		<view class="shopContent">
-			<view class="shopItem" v-for="(item,index) in goodsList" :key="index">
+			<view class="shopItem" v-for="(item,index) in goodsList" :key="index" v-if="goodsList.length>0">
 				<view class="orderInfo">
 					<text>订单号：{{item.order_no}}</text>
 					<text class="statusText">{{item.state_text}}</text>
@@ -55,15 +54,18 @@
 				</view>
 				<view class="btnGroup">
 					<view class="btn info" v-show="item.state_text=='待发货'||item.state_text=='待付款'">修改地址</view>
-					<view class="btn primary" v-show="item.state_text=='待发货'||item.state_text=='待付款'" @click="goJump('/pages/news3/updatePrice',item)">修改价格</view>
-					<view class="btn primary" v-show="item.state_text=='待发货'" @click="goJump('/pages/news3/sendOutGoods',item)">发货</view>
+					<view class="btn primary" v-show="item.state_text=='待发货'||item.state_text=='待付款'"
+						@click="goJump('/pages/news3/updatePrice',item)">修改价格</view>
+					<view class="btn primary" v-show="item.state_text=='待发货'"
+						@click="goJump('/pages/news3/sendOutGoods',item)">发货</view>
 					<view class="btn info" v-show="item.state_text=='refund'">拒绝</view>
 					<view class="btn primary" v-show="item.state_text=='refund'">同意</view>
 					<view class="btn info" v-show="item.state_text=='cancel'||item.state_text=='complete'">删除订单</view>
 					<view class="btn info" @click="afterSale=true" v-show="item.state_text=='receipt'">转至售后</view>
-					<view class="btn primary"  v-show="item.state_text=='receipt'">修改物流</view>
+					<view class="btn primary" v-show="item.state_text=='receipt'">修改物流</view>
 				</view>
 			</view>
+			<u-empty text="暂无数据显示哦～" v-else mode="list"></u-empty>
 		</view>
 		<u-popup v-model="show" mode="bottom" border-radius="10" :closeable="true">
 			<view class="filterContent">
@@ -76,9 +78,11 @@
 							下单时间
 						</view>
 						<view class="timeContainer">
-							<u-input v-model="startTime" type="select" @click="getTime('start')"  disabled placeholder="起始时间"/>
+							<u-input v-model="startTime" type="select" @click="getTime('start')" disabled
+								placeholder="起始时间" />
 							<text>-</text>
-							<u-input v-model="endTime" type="select" @click="getTime('end')" disabled placeholder="终止时间"/>
+							<u-input v-model="endTime" type="select" @click="getTime('end')" disabled
+								placeholder="终止时间" />
 						</view>
 					</view>
 					<view class="filterItemContent">
@@ -86,7 +90,9 @@
 							来源
 						</view>
 						<view class="selectContainer">
-							<view @click="setResourceIndex(index)" :class="sourceIndex==index?'selectItem active':'selectItem'" v-for="(item,index) in selectList" :key="item.id">
+							<view @click="setResourceIndex(index)"
+								:class="sourceIndex==index?'selectItem active':'selectItem'"
+								v-for="(item,index) in selectList" :key="item.id">
 								{{item.name}}
 							</view>
 						</view>
@@ -96,7 +102,8 @@
 							支付方式
 						</view>
 						<view class="selectContainer">
-							<view @click="setpayIndex(index)" :class="payIndex==index?'selectItem active':'selectItem'" v-for="(item,index) in payList" :key="item.id">
+							<view @click="setpayIndex(index)" :class="payIndex==index?'selectItem active':'selectItem'"
+								v-for="(item,index) in payList" :key="item.id">
 								{{item.name}}
 							</view>
 						</view>
@@ -123,24 +130,17 @@
 						<view class="itemTitle">
 							上传照片 <text style="color:#FF5042">*</text><text>最多可传5张图片</text>
 						</view>
-						<u-upload
-							:fileList="finishImageList"
-							:previewFullImage="true" 
-							@afterRead="afterRead"
-							:maxCount="8" width="180" height="180"
-							upload-text="上传照片"
-							@delete="deletePic"
-							name="1"
-							multiple
-						></u-upload>
+						<u-upload :fileList="finishImageList" :previewFullImage="true" @afterRead="afterRead"
+							:maxCount="8" width="180" height="180" upload-text="上传照片" @delete="deletePic" name="1"
+							multiple></u-upload>
 					</view>
 					<view class="filterItemContent">
 						<view class="itemTitle">
 							备注
 						</view>
-						<u-input v-model="remark" placeholder="请输入您的留言" type="textarea"  :auto-height="true" />
+						<u-input v-model="remark" placeholder="请输入您的留言" type="textarea" :auto-height="true" />
 					</view>
-					
+
 				</view>
 				<view class="submit">
 					确定
@@ -152,528 +152,618 @@
 </template>
 
 <script>
-import afterSale from './components/afterSales.vue'
+	import afterSale from './components/afterSales.vue'
 	import * as newFunApi from '@/api/newFun'
 	import * as Api from '@/api/dealer/order'
-export default {
-    components:{afterSale},
-	data(){
-		return{
-			classifyShow: 'all',
-			classList: [
-				{
-					id: 'all',
-					name: '全部',
-				},{
-					id: 'delivery',
-					name: '待发货',
-				},{
-					id: 'receipt',
-					name: '待验收',
-				},{
-					id: 'pay',
-					name: '待付款',
-				},{
-					id: 'complete',
-					name: '已完成',
-				},{
-					id: 'refund',
-					name: '售后订单',
-				},{
-					id: 'apply_cancel',
-					name: '待取消',
-				},{
-					id: 'cancel',
-					name: '已取消',
-				},
-				
-			],
-			goodsList:[
-				
-			],
-			show:false,
-			timeShow:false,
-			selectList:[
-				{id:1,name:'预售'},
-				{id:2,name:'秒杀'},
-				{id:3,name:'拼团'},
-				{id:4,name:'砍价'},
-			],
-			payList:[
-				{id:1,name:'微信支付'},
-				{id:2,name:'好友代付'},
-				{id:3,name:'线下支付'},
-			],
-			sourceIndex:0,
-			payIndex:0,
-			startTime:null,
-			endTime:null,
-			pageNum:1,
-			keyword: "",
-			total: 1,
-			pageNum: 1,
-			// classList: [
-			// 	{
-			// 		id: 0,
-			// 		name: '全部',
-			// 	},{
-			// 		id: 1,
-			// 		name: '待付款',
-			// 	},{
-			// 		id: 2,
-			// 		name: '待发货',
-			// 	},{
-			// 		id: 3,
-			// 		name: '售后订单',
-			// 	},{
-			// 		id: 4,
-			// 		name: '已退款',
-			// 	},{
-			// 		id: 5,
-			// 		name: '已完成',
-			// 	},{
-			// 		id: 6,
-			// 		name: '已删除',
-			// 	},
-			// 	{
-			// 		id: 7,
-			// 		name: '待收货',
-			// 	}
-			// ],
-			
-		}
-	},
-	onReady(options) {
-		// this.getList()
-		
-	},
-	onLoad(options) {console.log('--------');
-		// console.log(options);
-		this.classifyShow=options.type;
-		this.getList();
-		console.log("会员管理带来的user_id",options.user_id)
-	},
-	onPageScroll(e){
-		
-	},
-	
-	methods:{
-		// 获取当前标签项的值
-		// getTabValue() {
-		//   const app = this
-		//   if (app.classList.length) {
-		//     return app.classList[app.curTab].id
-		//   }
-		//   return -1
-		// },
-		// 获取提现列表
-		async getList() {
-			uni.showLoading({
-				title:"加载中"
-			})
-		  const app = this
-		  return new Promise((resolve, reject) => {
-		    Api.list({ dataType: app.classifyShow, page: app.pageNum })
-		      .then(result => {console.log(result);
-		        // 合并新数据
-		        // const newList = result.data.list
-		        // app.list.data = getMoreListData(newList, app.list, pageNo)
-				uni.hideLoading();
-				app.goodsList = app.goodsList.concat(result.data.list.data)
-				app.total = result.data.list.total
-		        resolve(app.goodsList)
-		      })
-		  })
-		},
-		// async getList() {
-		// 	uni.showLoading({
-		// 		title:"加载中"
-		// 	})
-		// 	let {status, message, data} = await newFunApi.shopOrderList({
-		// 		dataType: this.classifyShow, 
-		// 		page: this.pageNum,
-		// 		searchValue: this.keyword
-		// 	});
-		// 	if(status == 200){
-		// 		uni.hideLoading();
-		// 		this.goodsList = this.goodsList.concat(data.list.data)
-		// 		this.total = data.list.total
-		// 	}
-		// },
-		
-		goJump(path,value){
-			uni.navigateTo({
-				url: path+'?item='+JSON.stringify(value),
-			})
+	export default {
+		components: {
+			afterSale
 		},
-		getListAfter(){
-			this.goodsList = [];
-			this.getList()
-		},
-		getLable(val){
-			// let arr = this.classList.filter(item=>{
-			// 	return val==item.id
-			// })
-			// return arr[0].name
+		data() {
+			return {
+				classifyShow: 'all',
+				classList: [{
+						id: 'all',
+						name: '全部',
+					}, {
+						id: 'delivery',
+						name: '待发货',
+					}, {
+						id: 'receipt',
+						name: '待验收',
+					}, {
+						id: 'pay',
+						name: '待付款',
+					}, {
+						id: 'complete',
+						name: '已完成',
+					}, {
+						id: 'refund',
+						name: '售后订单',
+					}, {
+						id: 'apply_cancel',
+						name: '待取消',
+					}, {
+						id: 'cancel',
+						name: '已取消',
+					},
+
+				],
+				goodsList: [
+
+				],
+				show: false,
+				timeShow: false,
+				selectList: [{
+						id: 1,
+						name: '预售'
+					},
+					{
+						id: 2,
+						name: '秒杀'
+					},
+					{
+						id: 3,
+						name: '拼团'
+					},
+					{
+						id: 4,
+						name: '砍价'
+					},
+				],
+				payList: [{
+						id: 1,
+						name: '微信支付'
+					},
+					{
+						id: 2,
+						name: '好友代付'
+					},
+					{
+						id: 3,
+						name: '线下支付'
+					},
+				],
+				sourceIndex: 0,
+				payIndex: 0,
+				startTime: null,
+				endTime: null,
+				pageNum: 1,
+				keyword: "",
+				total: 1,
+				pageNum: 1,
+				// classList: [
+				// 	{
+				// 		id: 0,
+				// 		name: '全部',
+				// 	},{
+				// 		id: 1,
+				// 		name: '待付款',
+				// 	},{
+				// 		id: 2,
+				// 		name: '待发货',
+				// 	},{
+				// 		id: 3,
+				// 		name: '售后订单',
+				// 	},{
+				// 		id: 4,
+				// 		name: '已退款',
+				// 	},{
+				// 		id: 5,
+				// 		name: '已完成',
+				// 	},{
+				// 		id: 6,
+				// 		name: '已删除',
+				// 	},
+				// 	{
+				// 		id: 7,
+				// 		name: '待收货',
+				// 	}
+				// ],
+
+			}
 		},
-		onSearch(){
-			uni.navigateTo({url:''})
+		onReady(options) {
+			// this.getList()
+
 		},
-		onClassify(item,index){
-			this.classifyShow = item.id;
-			this.getListAfter()
+		onLoad(options) {
+			console.log('--------');
+			// console.log(options);
+			this.classifyShow = options.type;
+			this.getList();
+			console.log("会员管理带来的user_id", options.user_id)
 		},
-		setResourceIndex(index){
-			this.sourceIndex = index;
+		onPageScroll(e) {
+
 		},
-		setpayIndex(index){
-			this.payIndex = index;
+
+		methods: {
+			// 获取当前标签项的值
+			// getTabValue() {
+			//   const app = this
+			//   if (app.classList.length) {
+			//     return app.classList[app.curTab].id
+			//   }
+			//   return -1
+			// },
+			// 获取提现列表
+			async getList() {
+				uni.showLoading({
+					title: "加载中"
+				})
+				const app = this
+				return new Promise((resolve, reject) => {
+					Api.list({
+							dataType: app.classifyShow,
+							page: app.pageNum
+						})
+						.then(result => {
+							console.log(result);
+							// 合并新数据
+							// const newList = result.data.list
+							// app.list.data = getMoreListData(newList, app.list, pageNo)
+							uni.hideLoading();
+							app.goodsList = app.goodsList.concat(result.data.list.data)
+							app.total = result.data.list.total
+							resolve(app.goodsList)
+						})
+				})
+			},
+			// async getList() {
+			// 	uni.showLoading({
+			// 		title:"加载中"
+			// 	})
+			// 	let {status, message, data} = await newFunApi.shopOrderList({
+			// 		dataType: this.classifyShow, 
+			// 		page: this.pageNum,
+			// 		searchValue: this.keyword
+			// 	});
+			// 	if(status == 200){
+			// 		uni.hideLoading();
+			// 		this.goodsList = this.goodsList.concat(data.list.data)
+			// 		this.total = data.list.total
+			// 	}
+			// },
+
+			goJump(path, value) {
+				uni.navigateTo({
+					url: path + '?item=' + JSON.stringify(value),
+				})
+			},
+			getListAfter() {
+				this.goodsList = [];
+				this.getList()
+			},
+			getLable(val) {
+				// let arr = this.classList.filter(item=>{
+				// 	return val==item.id
+				// })
+				// return arr[0].name
+			},
+			onSearch() {
+				uni.navigateTo({
+					url: ''
+				})
+			},
+			onClassify(item, index) {
+				this.classifyShow = item.id;
+				this.getListAfter()
+			},
+			setResourceIndex(index) {
+				this.sourceIndex = index;
+			},
+			setpayIndex(index) {
+				this.payIndex = index;
+			},
+			getTime(val) {
+				console.log("ooo")
+				this.timeShow = true;
+			},
+			getFilterHandle() {
+				console.log("uu")
+				this.$refs.afterSales.afterSale = true;
+			}
+
 		},
-		getTime(val){
-			console.log("ooo")
-			this.timeShow = true;
+		onReachBottom() {
+			if (this.goodsList.length <= this.total) {
+				this.pageNum++;
+				this.getList();
+			}
 		},
-		getFilterHandle(){
-			console.log("uu")
-			this.$refs.afterSales.afterSale = true;
-		}
-		
-	},
-	onReachBottom() {
-		if(this.goodsList.length <= this.total){
-			this.pageNum ++;
-			this.getList();
-		}
-	},
-};
+	};
 </script>
 
 <style scoped lang="scss">
-page{
-	background-color: #F7F8FA;
-	min-height:100%;
-}
-.head-info{
-	padding:22upx 20upx;
-	.searchContent{
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		position: relative;
-		::v-deep .uni-input-placeholder{
-			margin-left:90upx;
-			z-index:10;
-		}
-		.search{
-			position: absolute;
-			top:20upx;
-			left:26upx;
-			z-index:9;
-		}
-		::v-deep .u-input{
-			flex:1;
-			margin-right:28upx;
-		}
-		::v-deep .uni-input-input{
-			
-			background: #FFFFFF;
-			border-radius: 30px 30px 30px 30px;
-			opacity: 1;
-			padding-left:80upx;
-			width:calc(100% - 80upx);
-			
-		}
-		.filter{
-			display: flex;
-			width: 100upx;
-			flex-direction: column;
-			align-items: center;
-			justify-content: center;
-			image{
-				width:34upx;
-				height:auto;
-			}
-			text{
-				font-size: 24upx;
-				font-family: PingFang SC, PingFang SC;
-				font-weight: 400;
-				color: #616161;
-				
-			}
-		}
+	page {
+		background-color: #F7F8FA;
+		min-height: 100%;
 	}
-}
-.container{
-	background-color: #fff;
-}
-.classify-list{
-	white-space:nowrap;
-	width: 100%;
-	height: 100rpx;
-	overflow-x: auto;
-	overflow-y: hidden;
-	.list{
-		position: relative;
-		display:inline-block;
-		width: 18%;
-		height: 100%;
-		line-height: 100rpx;
-		text-align: center;
-		text{
-			font-size: 28rpx;
-			color: #3B3B3B;
-			
-		}
-		.line{
-			position: absolute;
-			left: 50%;
-			bottom: 10rpx;
-			// width: 60%;
-			// height: 8rpx;
-			background: linear-gradient(to right,#f8f893,#fe9d00);
-			// border-radius: 10rpx;
-			transform: translate(-50%,0);
-			
-			width: 60upx;
-			height: 8upx;
-			background: #FF6257;
-			border-radius: 29px 29px 29px 29px;
-			opacity: 1;
-		}
+
+::v-deep .u-empty {
+		padding: 100rpx 0;
 	}
-	.action{
-		text{
-			font-size: 32rpx;
-			opacity: 1;
-		}
+
+	::v-deep .u-content {
+		height: 62rpx !important;
+		line-height: 62rpx !important;
+		background-color: #fff !important;
+		width: 608rpx !important;
 	}
-}
-.shopContent{
-	
-	
-	.shopItem{
-		margin-bottom:14upx;
-		padding:36upx;
-		background-color: #fff;
-		.orderInfo{
+
+	.head-info {
+		padding: 22upx 20upx;
+
+		.searchContent {
 			display: flex;
 			align-items: center;
-			justify-content:space-between;
-			text{
-				font-size: 28upx;
-				color: #707070;
-				
+			justify-content: space-between;
+			position: relative;
+			background-color: #fff !important;
+
+			::v-deep .uni-input-placeholder {
+				margin-left: 10upx;
+				z-index: 10;
+				background-color: #fff !important;
 			}
-		}
-		.shopItemInfo{
-			display: flex;
-			margin-top:40upx;
-			image{
-				width:180upx;
-				height:180upx;
-				flex-shrink: 0;
+
+			.search {
+				position: absolute;
+				top: 20upx;
+				left: 26upx;
+				z-index: 9;
+			}
+
+			::v-deep .u-input {
+				flex: 1;
+				margin-right: 28upx;
+				background-color: #fff !important;
+			}
+
+			::v-deep .uni-input-input {
+
+				background: #FFFFFF;
+				border-radius: 30px 30px 30px 30px;
+				opacity: 1;
+				padding-left: 80upx;
+				width: calc(100% - 80upx);
+
 			}
-			.priceCon{
-				flex:1;
+
+			.filter {
 				display: flex;
-				align-items: flex-end;
-				justify-content: space-between;
-				margin-left:40upx;
-				.num{
-					font-size: 28upx;
-					font-family: PingFang SC, PingFang SC;
-					font-weight: 500;
-					color: #1E1E1E;
-					
+				width: 100upx;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+
+				image {
+					width: 34upx;
+					height: auto;
 				}
-				.priceText{
-					display: flex;
-					align-items: center;
-					text{
-						font-size: 32upx;
-						font-family: PingFang SC, PingFang SC;
-						font-weight: 500;
-						color: #F21A1C;
-						font-weight: bold;
-					}
-					
+
+				text {
+					font-size: 24upx;
+					font-family: PingFang SC, PingFang SC;
+					font-weight: 400;
+					color: #616161;
+
 				}
 			}
 		}
-		.totalNum{
-			text-align: right;
-			margin-top:70upx;
-			text:first-child{
-				font-size: 24upx;
-				font-family: PingFang SC, PingFang SC;
-				font-weight: 500;
-				color: #B7B7B7;
-				
-			}
-			text:nth-child(2){
-				font-size: 32upx;
-				font-family: PingFang SC, PingFang SC;
-				font-weight: 500;
-				color: #3B3B3B;
-				margin:0 10upx;
-				
-			}
-			text:nth-child(3){
-				font-size: 32upx;
-				font-family: PingFang SC, PingFang SC;
-				font-weight: 600;
-				color: #F21A1C;
-			
-			}
-		}
-		.remark{
-			background: #F8F8F8;
-			border-radius: 0px 0px 0px 0px;
-			opacity: 1;
-			padding:20upx;
-			margin-top:20upx;
-			.remarkTitle{
-				font-size: 28upx;
-				font-family: PingFang SC, PingFang SC;
-				font-weight: 500;
+	}
+
+	.container {
+		background-color: #fff;
+	}
+
+	.classify-list {
+		white-space: nowrap;
+		width: 100%;
+		height: 100rpx;
+		overflow-x: auto;
+		overflow-y: hidden;
+
+		.list {
+			position: relative;
+			display: inline-block;
+			width: 18%;
+			height: 100%;
+			line-height: 100rpx;
+			text-align: center;
+
+			text {
+				font-size: 28rpx;
 				color: #3B3B3B;
-				
+
 			}
-			.remarkContent{
-				font-size: 28upx;
-				font-family: PingFang SC, PingFang SC;
-				font-weight: 500;
-				color: #939393;
-				margin-top:8upx;
+
+			.line {
+				position: absolute;
+				left: 50%;
+				bottom: 10rpx;
+				// width: 60%;
+				// height: 8rpx;
+				background: linear-gradient(to right, #f8f893, #fe9d00);
+				// border-radius: 10rpx;
+				transform: translate(-50%, 0);
+
+				width: 60upx;
+				height: 8upx;
+				background: #FF6257;
+				border-radius: 29px 29px 29px 29px;
+				opacity: 1;
 			}
 		}
-		.btnGroup{
-			display: flex;
-			margin-top:28upx;
-			flex-wrap: wrap;
-			justify-content: flex-end;
-			.btn{
-				width: 180upx;
-				height: 56upx;
-				background: #FFFFFF;
-				border-radius: 50px 50px 50px 50px;
+
+		.action {
+			text {
+				font-size: 32rpx;
 				opacity: 1;
-				font-size: 14px;
-				line-height: 56upx;
-				text-align: center;
-				margin-left:12upx;
-			}
-			.info{
-				border: 1px solid #9F9F9F;
-				color: #8B8B8B;
-				
-			}
-			.primary{
-				border: 1px solid #F63116;
-				color: #F83F11;
-				
 			}
 		}
 	}
-}
-.filterContent{
-	padding:32upx;
-	.filterTitle{
-		font-size: 32upx;
-		font-family: PingFang SC, PingFang SC;
-		font-weight: 500;
-		color: #303030;
-		text-align: center;
-	}
-	.filterItem{
-		.filterItemContent{
-			margin-top:40upx;
-			.itemTitle{
-				
-				font-size: 28upx;
-				font-family: PingFang SC, PingFang SC;
-				font-weight: 500;
-				color: #303030;
-				margin-bottom:20upx;
-				
-			}
-			.timeContainer{
+
+	.shopContent {
+
+
+		.shopItem {
+			margin-bottom: 14upx;
+			padding: 36upx;
+			background-color: #fff;
+
+			.orderInfo {
 				display: flex;
 				align-items: center;
-				::v-deep .uni-input-wrapper{
-					background: #F3F3F3;
-					border-radius: 22px 22px 22px 22px;
-					opacity: 1;
-					text-align: center;
+				justify-content: space-between;
+
+				text {
+					font-size: 28upx;
+					color: #707070;
+
 				}
-				::v-deep .u-input__right-icon{
-					display: none;
+			}
+
+			.shopItemInfo {
+				display: flex;
+				margin-top: 40upx;
+
+				image {
+					width: 180upx;
+					height: 180upx;
+					flex-shrink: 0;
 				}
-				text{
-					margin:16upx;
+
+				.priceCon {
+					flex: 1;
+					display: flex;
+					align-items: flex-end;
+					justify-content: space-between;
+					margin-left: 40upx;
+
+					.num {
+						font-size: 28upx;
+						font-family: PingFang SC, PingFang SC;
+						font-weight: 500;
+						color: #1E1E1E;
+
+					}
+
+					.priceText {
+						display: flex;
+						align-items: center;
+
+						text {
+							font-size: 32upx;
+							font-family: PingFang SC, PingFang SC;
+							font-weight: 500;
+							color: #F21A1C;
+							font-weight: bold;
+						}
+
+					}
 				}
 			}
-			.selectContainer{
-				display: flex;
-				.selectItem{
-					flex:1;
-					margin:0 10upx;
-					height: 70upx;
-					line-height: 66upx;
-					text-align: center;
-					background: #F3F3F3;
-					border-radius: 22px 22px 22px 22px;
-					opacity: 1;
-				
+
+			.totalNum {
+				text-align: right;
+				margin-top: 70upx;
+
+				text:first-child {
+					font-size: 24upx;
+					font-family: PingFang SC, PingFang SC;
+					font-weight: 500;
+					color: #B7B7B7;
+
+				}
+
+				text:nth-child(2) {
+					font-size: 32upx;
+					font-family: PingFang SC, PingFang SC;
+					font-weight: 500;
+					color: #3B3B3B;
+					margin: 0 10upx;
+
+				}
+
+				text:nth-child(3) {
+					font-size: 32upx;
+					font-family: PingFang SC, PingFang SC;
+					font-weight: 600;
+					color: #F21A1C;
+
+				}
+			}
+
+			.remark {
+				background: #F8F8F8;
+				border-radius: 0px 0px 0px 0px;
+				opacity: 1;
+				padding: 20upx;
+				margin-top: 20upx;
+
+				.remarkTitle {
 					font-size: 28upx;
 					font-family: PingFang SC, PingFang SC;
 					font-weight: 500;
-					color: #A1A1A1;
-				
+					color: #3B3B3B;
+
 				}
-				.active{
-					border: 1px solid #F83F11;
-					color:#F21A1C;
-					background-color: #fff;
+
+				.remarkContent {
+					font-size: 28upx;
+					font-family: PingFang SC, PingFang SC;
+					font-weight: 500;
+					color: #939393;
+					margin-top: 8upx;
+				}
+			}
+
+			.btnGroup {
+				display: flex;
+				margin-top: 28upx;
+				flex-wrap: wrap;
+				justify-content: flex-end;
+
+				.btn {
+					width: 180upx;
+					height: 56upx;
+					background: #FFFFFF;
+					border-radius: 50px 50px 50px 50px;
+					opacity: 1;
+					font-size: 14px;
+					line-height: 56upx;
+					text-align: center;
+					margin-left: 12upx;
+				}
+
+				.info {
+					border: 1px solid #9F9F9F;
+					color: #8B8B8B;
+
+				}
+
+				.primary {
+					border: 1px solid #F63116;
+					color: #F83F11;
+
 				}
 			}
 		}
 	}
-	.btnGroup{
-		display: flex;
-		justify-content: center;
-		margin-top:100upx;
-		padding-bottom:60upx;
-		.resetBtn{
-			width: 216upx;
-			height: 70upx;
-			line-height: 66upx;
-			background: #DBDBDB;
-			border-radius: 22px 22px 22px 22px;
-			opacity: 1;
-		
-			font-size: 28upx;
+
+	.filterContent {
+		padding: 32upx;
+
+		.filterTitle {
+			font-size: 32upx;
 			font-family: PingFang SC, PingFang SC;
 			font-weight: 500;
-			color: #585858;
+			color: #303030;
 			text-align: center;
-			
 		}
-		.confrim{
-			width: 216upx;
-			height: 70upx;
-			text-align: center;
-			background: linear-gradient(180deg, #FD5D06 0%, #F3211A 100%);
-			border-radius: 50px 50px 50px 50px;
-			opacity: 1;
-			line-height: 66upx;
-			font-size: 28upx;
-			font-family: PingFang SC, PingFang SC;
-			font-weight: 500;
-			color: #FFFFFF;
-			margin-left:24upx;
-			
+
+		.filterItem {
+			.filterItemContent {
+				margin-top: 40upx;
+
+				.itemTitle {
+
+					font-size: 28upx;
+					font-family: PingFang SC, PingFang SC;
+					font-weight: 500;
+					color: #303030;
+					margin-bottom: 20upx;
+
+				}
+
+				.timeContainer {
+					display: flex;
+					align-items: center;
+
+					::v-deep .uni-input-wrapper {
+						background: #F3F3F3;
+						border-radius: 22px 22px 22px 22px;
+						opacity: 1;
+						text-align: center;
+					}
+
+					::v-deep .u-input__right-icon {
+						display: none;
+					}
+
+					text {
+						margin: 16upx;
+					}
+				}
+
+				.selectContainer {
+					display: flex;
+
+					.selectItem {
+						flex: 1;
+						margin: 0 10upx;
+						height: 70upx;
+						line-height: 66upx;
+						text-align: center;
+						background: #F3F3F3;
+						border-radius: 22px 22px 22px 22px;
+						opacity: 1;
+
+						font-size: 28upx;
+						font-family: PingFang SC, PingFang SC;
+						font-weight: 500;
+						color: #A1A1A1;
+
+					}
+
+					.active {
+						border: 1px solid #F83F11;
+						color: #F21A1C;
+						background-color: #fff;
+					}
+				}
+			}
+		}
+
+		.btnGroup {
+			display: flex;
+			justify-content: center;
+			margin-top: 100upx;
+			padding-bottom: 60upx;
+
+			.resetBtn {
+				width: 216upx;
+				height: 70upx;
+				line-height: 66upx;
+				background: #DBDBDB;
+				border-radius: 22px 22px 22px 22px;
+				opacity: 1;
+
+				font-size: 28upx;
+				font-family: PingFang SC, PingFang SC;
+				font-weight: 500;
+				color: #585858;
+				text-align: center;
+
+			}
+
+			.confrim {
+				width: 216upx;
+				height: 70upx;
+				text-align: center;
+				background: linear-gradient(180deg, #FD5D06 0%, #F3211A 100%);
+				border-radius: 50px 50px 50px 50px;
+				opacity: 1;
+				line-height: 66upx;
+				font-size: 28upx;
+				font-family: PingFang SC, PingFang SC;
+				font-weight: 500;
+				color: #FFFFFF;
+				margin-left: 24upx;
+
+			}
 		}
 	}
-}
 </style>