1

components/tab-bar/delivery.vue

@@ -1,24 +1,39 @@
 <template>
 	<!-- 商家订单列表 -->
 	<view class="page1">
-		<view class="title">
+		<view class="shop-order-fixed">
-			<view class="title-sreach">
+			<view class="title">
-				<view class="title-name" >
+				<view class="title-sreach">
-					商家订单
+					<view class="title-name" >
+						商家订单
+					</view>
 				</view>
 			</view>
-		</view>
+			<view class="title-tab">
-		<view class="title-tab">
-			<scroll-view class="status-scroll-view" scroll-x enable-flex :show-scrollbar="false"
-				:scroll-with-animation="true">
 				<view class="status-list">
 					<view v-for="(item, index) in statusList" :key="index" class="status-item"
-						:class="{ 'active': currentIndex == item.value }" @click="handleStatusClick(item.value,item.value)">
+						:class="{ 'active': currentIndex == item.value }"
+						@click="handleStatusClick(item.value)">
 						<text class="status-text">{{ item.name }}</text>
 					</view>
 				</view>
-			</scroll-view>
+			</view>
+			<view class="date-filter">
+				<picker class="date-picker" mode="date" :value="searchForm.startDate" @change="handleStartDateChange">
+					<view class="date-picker-text" :class="{ 'placeholder': !searchForm.startDate }">
+						{{searchForm.startDate || '开始日期'}}
+					</view>
+				</picker>
+				<text class="date-separator">至</text>
+				<picker class="date-picker" mode="date" :value="searchForm.endDate" @change="handleEndDateChange">
+					<view class="date-picker-text" :class="{ 'placeholder': !searchForm.endDate }">
+						{{searchForm.endDate || '结束日期'}}
+					</view>
+				</picker>
+				<view class="date-clear" v-if="searchForm.startDate || searchForm.endDate" @tap="clearDateFilter">重置</view>
+			</view>
 		</view>
+		<view class="shop-order-fixed-holder"></view>
 		<scroll-view @scrolltolower="onReachPage" scroll-y style="width:100%;height: 1240rpx;overflow: scroll;">
 			<view class="box1" @tap="goDetail(item.id)" v-for="(item,index) in orderList" :key="index">
 				<view class="order-head">
@@ -137,11 +152,13 @@
 				groupOrderCheck:{},
 				tuanzhangOrder:[],
 				searchForm:{
-					pageNum:1,
+					pageNum: 1,
-					pageSize:10,
+					pageSize: 10,
-					shopName:'',
+					shopName: '',
-					searchStatus:10,
+					searchStatus: 10,
-					shopId:uni.getStorageSync('shopId'),
+					startDate: '',
+					endDate: '',
+					shopId: uni.getStorageSync('shopId'),
 					regionId:JSON.parse(uni.getStorageSync('area')).regionId
 				},
 				totalPages: 1,
@@ -157,11 +174,6 @@
 						value: 3,
 						checked: false
 					},
-					{
-						name: '待消费',
-						value: 2,
-						checked: false
-					},
 					{
 						name: '待出餐',
 						value: 13,
@@ -183,8 +195,8 @@
 						checked: false
 					},
 					{
-						name: '待退款',
+						name: '待消费',
-						value: 7,
+						value: 2,
 						checked: false
 					},
 					{
@@ -192,6 +204,11 @@
 						value: 8,
 						checked: false
 					},
+					{
+						name: '已售后',
+						value: 12,
+						checked: false
+					},
 					{
 						name: '已取消',
 						value: 9,
@@ -272,6 +289,30 @@
 			isFaceDeliveryOrder(item) {
 				return !!item && item.deliveryType == 1 && item.orderType == 3
 			},
+			handleStartDateChange(e) {
+				const value = e.detail.value
+				if (this.searchForm.endDate && value > this.searchForm.endDate) {
+					this.tui.toast('开始日期不能晚于结束日期')
+					return
+				}
+				this.searchForm.startDate = value
+				this.searchByDateRange()
+			},
+			handleEndDateChange(e) {
+				const value = e.detail.value
+				if (this.searchForm.startDate && value < this.searchForm.startDate) {
+					this.tui.toast('结束日期不能早于开始日期')
+					return
+				}
+				this.searchForm.endDate = value
+				this.searchByDateRange()
+			},
+			clearDateFilter() {
+				this.searchForm.startDate = ''
+				this.searchForm.endDate = ''
+				this.searchForm.pageNum = 1
+				this.getList()
+			},
 			getOrderTotalAmount(order) {
 				if (!order) return this.formatMoney(0)
 				const goodsList = Array.isArray(order.goodsList) ? order.goodsList : []
@@ -320,6 +361,11 @@
 					}
 				});
 			},
+			searchByDateRange() {
+				if (!this.searchForm.startDate || !this.searchForm.endDate) return
+				this.searchForm.pageNum = 1
+				this.getList()
+			},
 			getGroupOrders(id){
 				this.groupOrderCheck = id
 				this.NB.sendRequest("/mall/order/selectAllOrderByOrderId/"+id.id, {}, false, 'GET', 'application/json').then((res) => {
@@ -343,6 +389,7 @@
 				});
 			},
 			getList(){
+				this.loadStatus = 'loading'
 				let that = this
 				let url = ''
 				let data = {
@@ -350,33 +397,35 @@
 					pageNum: this.searchForm.pageNum,
 					pageSize: 10,
 					statusList: [0, 3],
-					regionId:JSON.parse(uni.getStorageSync('area')).regionId
+					regionId: JSON.parse(uni.getStorageSync('area')).id
 				}
-				if(this.currentIndex == 7){
+				if (this.currentIndex == 7) {
 					url = "/mall/refund/page"
-				}else{
+				} else {
 					url = "/mall/order/page"
 				}
 				that.NB.sendRequest(url, this.currentIndex == 7?data : this.searchForm, false, 'POST', 'application/json').then((res) => {
+					that.loadStatus = 'nomore';
 					if (res.code == 200) {
 						if (that.searchForm.pageNum == 1) {
 							that.orderList = res.result.records;
 						} else {
 							that.orderList = [...that.orderList, ...res.result.records]
 						}
-						for(let i=0;i<that.orderList.length;i++){
+						
+						for (let i = 0; i < that.orderList.length; i++) {
+							if (that.currentIndex == 7) {
+								that.orderList[i].goodsList = that.orderList[i].items
+							}
 							that.orderList[i].goodsNum = 0
-							for(let m=0;m<that.orderList[i].goodsList.length;m++){
+							for (let m = 0; m < that.orderList[i].goodsList.length; m++) {
 								that.orderList[i].goodsNum += that.orderList[i].goodsList[m].quantity
 							}
 						}
 						that.totalPages = res.result.pages; // pages = 总页数
 						that.$forceUpdate();
 					} else {
-						uni.showToast({
+						that.tui.toast(res.message);
-							title: res.message,
-							icon: 'none'
-						})
 						return;
 					}
 					uni.hideLoading();
@@ -422,10 +471,10 @@
 				})
 			},
 			handleStatusClick(index,value) {
+				this.searchForm.pageNum = 1
 				if (this.currentIndex === index) return;
 				this.currentIndex = index;
-				this.searchForm.pageNum = 1
+				this.searchForm.searchStatus = index
-				this.searchForm.searchStatus = value
 				this.getList()
 			}
 		}
@@ -451,13 +500,13 @@
 	.title {
 		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
 		width: 100%;
-		height: 400rpx;
+		height: 176rpx;
 	}
 
 	.title-sreach {
 		width: 100%;
 		display: flex;
-		height: 200rpx;
+		height: 176rpx;
 		position: relative;
 	}
 
@@ -471,7 +520,8 @@
 
 	.title-tab {
 		display: flex;
-		margin: -200rpx auto 0;
+		margin: 15 auto;
+		background: #F5F8F5;
 	}
 
 	.status-scroll-view {
@@ -484,21 +534,18 @@
 	.status-list {
 		display: flex;
 		flex-direction: row;
-		flex-wrap: nowrap;
+		flex-wrap: wrap;
 		align-items: center;
 		padding: 0 0;
-		/* 可根据设计添加左右留白，但会影响“一排5个”精准计算，故留白为0 */
+		width: 100%;
-		min-height: 88rpx;
+		min-height: 112rpx;
-		/* 保证内部项撑开高度 */
 	}
 
 	/* 每个状态项：宽度为屏幕宽度的1/5，保证一行正好显示5个，超出滚动 */
 	.status-item {
-		flex-shrink: 0;
+		flex: 0 0 20%;
-		width: 20vw;
-		/* 关键：屏幕宽度的1/5，正好一排5个 */
 		text-align: center;
-		padding: 20rpx 0;
+		padding: 10rpx 0;
 		position: relative;
 		box-sizing: border-box;
 		transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
@@ -507,10 +554,10 @@
 	}
 
 	.status-text {
-		font-size: 28rpx;
+		font-size: 26rpx;
 		color: #666666;
 		font-weight: normal;
-		line-height: 1.4;
+		line-height: 1.3;
 		transition: color 0.2s, font-weight 0.2s;
 	}
 
@@ -533,13 +580,17 @@
 		border-radius: 2rpx;
 		transition: width 0.2s ease;
 	}
-
+	.shop-order-fixed-holder {
+		height: 356rpx;
+	}
 	.box1 {
-		width: 95%;
+		width: 92%;
 		margin: 20rpx auto;
 		background: #fff;
-		border-radius: 20rpx;
+		border-radius: 24rpx;
-		padding: 20rpx 20rpx 0;
+		padding: 24rpx 24rpx 0;
+		box-shadow: 0 12rpx 32rpx rgba(0, 35, 28, 0.08);
+		overflow: hidden;
 	}
 	.order-head {
 		display: flex;
@@ -954,4 +1005,61 @@
 		padding-right:20rpx;
 		font-weight: 700;
 	}
+	.date-filter {
+		display: flex;
+		align-items: center;
+		width: 92%;
+		height: 68rpx;
+		margin: 0 auto;
+		padding: 0 16rpx;
+		box-sizing: border-box;
+		border-radius: 18rpx;
+		background: #fff;
+		box-shadow: 0 8rpx 20rpx rgba(0, 35, 28, 0.06);
+	}
+	.date-picker {
+		flex: 1;
+		min-width: 0;
+	}
+	
+	.date-picker-text {
+		width: 100%;
+		height: 48rpx;
+		line-height: 48rpx;
+		border-radius: 14rpx;
+		background: #F5F8F5;
+		color: #00231C;
+		font-size: 24rpx;
+		text-align: center;
+	}
+	
+	.date-picker-text.placeholder {
+		color: #7a8582;
+	}
+	
+	.date-separator {
+		margin: 0 16rpx;
+		color: #7a8582;
+		font-size: 24rpx;
+	}
+	
+	.date-clear {
+		margin-left: auto;
+		padding: 0 14rpx;
+		height: 48rpx;
+		line-height: 48rpx;
+		border-radius: 14rpx;
+		background: rgba(255, 107, 53, 0.1);
+		color: #ff6b35;
+		font-size: 24rpx;
+		font-weight: 700;
+	}
+	.shop-order-fixed {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 1000;
+		background: #F5F8F5;
+	}
 </style>