school-peisong/components/tab-bar/delivery.vue

<template>
	<!-- 商家订单列表 -->
	<view class="page1">
		<view class="title">
			<view class="title-sreach">
				<view class="title-name" >
					商家订单
				</view>
			</view>
		</view>
		<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)">
						<text class="status-text">{{ item.name }}</text>
					</view>
				</view>
			</scroll-view>
		</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 style="display: flex;height: 50rpx;border-bottom: 1px solid #eee;">
					<view>
						{{'#' + item.numberCode}}
					</view>
					<view style="flex: 1;display: flex;padding-left: 20rpx;">
						{{item.createTime | formatISOTime}} 
						<!-- <text>已退款</text> -->
					</view>
					<view>
						{{item.status == 0?'待支付':item.status == 2?'待配送员接单':(item.status == 3 && item.deliveryType == 1 && item.shopMakeTime == null) || (item.status == 3 && item.deliveryType == 2 && item.userRequireMake == 1)?'待出餐':(item.status == 3 && item.deliveryType == 1 && item.shopMakeTime != null)?'待取货':(item.status == 3 && item.deliveryType == 2)?'待消费':item.status == 4?'待送达':item.status == 5?'已完成':item.status == 7?'待同意退款':item.status == 8?'已退款':item.status == 6?'已取消':item.status == 11?'售后中':item.status == 12?'已售后':""}}
					</view>
				</view>
				<view style="height: 120rpx;padding-top: 20rpx;">
					<view v-if="item.status == 3" style="height: 50rpx;line-height: 50rpx;font-size: 28rpx;font-weight: 700;">
						商品 <text>共<text>{{item.goodsNum}}</text>件</text>
					</view>
					<view style="display: flex;" v-for="(item1,index1) in item.goodsList" :key="index">
						<view style="flex: 1;">
							{{item1.productName}}
						</view>
						<view style="width: 100rpx;">
							{{'X' + item1.quantity}}
						</view>
						<view>
							{{'￥'+ item1.price}}
						</view>
					</view>
				</view>
				<view @tap.stop="mealServing(item)" style="height: 80rpx;border-top: 1px solid #eee;display: flex;">
					<view class="pinzi" @tap.stop="tanchuang(item.deliveryType)" style="width:80rpx;font-weight:700;margin-right: 20rpx;color:#00231C;background:linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1))">
						{{item.deliveryType == 1?'配送':'自取'}}
					</view>
					<view v-if="item.orderType != 1" @tap.stop="getGroupOrders(item.id)" class="pinzi">
						拼
					</view>
					<view style="flex: 1;"></view>
					<view v-if="currentIndex == 13" style="background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));width: 100rpx;height: 60rpx;border-radius: 14rpx;line-height: 60rpx;text-align: center;font-weight: 700;margin-top: 20rpx;">
						已出餐
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 拼团详情弹窗 -->
		<uni-popup ref="pintuanPopup" background-color="#fff">
			<view class="guize-list">
				<view v-for="(item,index) in tuanzhangOrder" :key="index">
					<view style="height: 80rpx;line-height: 80rpx;font-size: 36rpx;font-weight: 700;">
						订单{{index + 1}}
					</view>
					<view class="">
						<view class="dingdan">
							<view class="pt-title">
								配送信息
							</view>
							<view style="display:flex">
								<view style="width:300rpx;">
									配送编号：
								</view>
								<view class="pituan-text">
									{{item.numberCode}}
								</view>
							</view>
							<view style="display:flex">
								<view style="width:300rpx;">
									订单号：
								</view>
								<view class="pituan-text">
									{{item.id}}
								</view>
								
							</view>
							<view style="display:flex">
								<view style="width:300rpx;">
									订单时间：
								</view>
								<view class="pituan-text">
									{{item.createTime | formatISOTime}}
								</view>
							</view>
						</view>
						<view class="dingdan" v-for="(item1,index1) in item.goodsList" :key="index1">
							<view class="pt-title">
								商品信息
							</view>
							<view style="display: flex;font-weight: 700;">
								<view style="flex:1">
									商品名：{{item1.productName}}
								</view>
								<view style="width:100rpx;">
									X{{item1.quantity}}
								</view>
								<view style="width:220rpx;text-align: right;padding-right:20rpx;">
									￥{{item1.price}}
								</view>
							</view>
						</view>
						<view class="dingdan">
							<view style="text-align: right;padding-right: 20rpx;color: #777;">
								餐盒费：￥{{item.packageFee}} 配送费：￥{{item.deliveryFee}}
							</view>
							<view style="text-align: right;padding-right: 20rpx;font-size: 28rpx;font-weight: 700;color: red;">
								总计：￥{{item.totalAmount}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tuanzhangOrder:[],
				searchForm:{
					pageNum:1,
					pageSize:10,
					shopName:'',
					searchStatus:10,
					shopId:uni.getStorageSync('shopId'),
					regionId:JSON.parse(uni.getStorageSync('area')).regionId
				},
				totalPages: 1,
				orderList:[],
				currentIndex: 10,
				statusList: [{
						name: '全部',
						value: 10,
						checked: true
					},
					{
						name: '待消费',
						value: 2,
						checked: false
					},
					{
						name: '待出餐',
						value: 13,
						checked: false
					},
					{
						name: '待取货',
						value: 4,
						checked: false
					},
					{
						name: '待送达',
						value: 5,
						checked: false
					},
					{
						name: '已完成',
						value: 6,
						checked: false
					},
					{
						name: '待退款',
						value: 7,
						checked: false
					},
					{
						name: '已退款',
						value: 8,
						checked: false
					},
					{
						name: '已取消',
						value: 9,
						checked: false
					}
				]
			}
		},
		filters:{
			formatISOTime(isoString) {
			  const date = new Date(isoString);
			  const year = date.getFullYear();
			  const month = (date.getMonth() + 1).toString().padStart(2, '0');
			  const day = date.getDate().toString().padStart(2, '0');
			  const hours = date.getHours().toString().padStart(2, '0');
			  const minutes = date.getMinutes().toString().padStart(2, '0');
			  const seconds = date.getSeconds().toString().padStart(2, '0');
			  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			}
		},
		methods: {
			init(index){
				if(index){
					this.searchForm.searchStatus = index
					this.currentIndex = index
				}
				this.getList()
			},
			onReachPage(){
				console.log("11111")
				if (this.searchForm.pageNum >= this.totalPages) return;
				this.searchForm.pageNum++;
				this.getList();
			},
			mealServing(item){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定要出餐吗？',
					success: function (res) {
						if (res.confirm) {
							let data = {}
							let url = ''
							if(item.deliveryType == 2){ //自取单
								url = '/mall/order/complete'
							}else if(item.deliveryType == 1){ //外卖单
								url = '/mall/order/shopMakeTime'
							}
							that.NB.sendRequest(url, {
								orderId:item.id
							}, true, 'post', 'application/json').then((res) => {
								if (res.code == 200) {
									that.getList()
								} else {
									that.tui.toast(res.message);
									return;
								}
								uni.hideLoading();
							}).catch((res) => {});
						}
					}
				});
			},
			getGroupOrders(id){
				this.NB.sendRequest("/mall/order/selectAllOrderByOrderId/"+id, {}, true, 'GET', 'application/json').then((res) => {
					if (res.code == 200) {
						this.tuanzhangOrder = res.result;
						this.$refs.pintuanPopup.open()
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
						return
					}
					uni.hideLoading()
				}).catch((res) => {});
			},
			tanchuang(v){
				uni.showToast({
					title: '该订单为'+(v==1?'配送':'自取')+'单',
					icon: 'none'
				});
			},
			getList(){
				let that = this
				let url = ''
				let data = {
					linkId: uni.getStorageSync('shopId'),
					pageNum: this.searchForm.pageNum,
					pageSize: 10,
					statusList: [0, 3],
					regionId:JSON.parse(uni.getStorageSync('area')).regionId
				}
				if(this.currentIndex == 11){
					url = "/mall/refund/page"
				}else{
					url = "/mall/order/page"
				}
				that.NB.sendRequest(url, this.currentIndex == 11?data : this.searchForm, true, 'POST', 'application/json').then((res) => {
					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++){
							that.orderList[i].goodsNum = 0
							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 {
						that.tui.toast(res.message);
						return;
					}
					uni.hideLoading();
				}).catch((res) => {});
			},
			goDetail(id){
				uni.navigateTo({
					url:'/pages/shop/orderDetail?id=' + id
				})
			},
			handleStatusClick(index,value) {
				if (this.currentIndex === index) return;
				this.currentIndex = index;
				this.searchForm.pageNum = 1
				this.searchForm.searchStatus = value
				this.getList()
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}

	.page1 {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		position: relative;
	}

	.title {
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
		width: 100%;
		height: 400rpx;
	}

	.title-sreach {
		width: 100%;
		display: flex;
		height: 200rpx;
		position: relative;
	}

	.title-name {
		padding-top: 110rpx;
		font-size: 36rpx;
		font-weight: 700;
		flex: 1;
		text-align: center;
	}

	.title-tab {
		display: flex;
		margin: -200rpx auto 0;
	}

	.status-scroll-view {
		width: 100%;
		white-space: nowrap;
		/* 辅助滚动，与 flex 配合确保不换行 */
		height: auto;
	}

	.status-list {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		padding: 0 0;
		/* 可根据设计添加左右留白，但会影响“一排5个”精准计算，故留白为0 */
		min-height: 88rpx;
		/* 保证内部项撑开高度 */
	}

	/* 每个状态项：宽度为屏幕宽度的1/5，保证一行正好显示5个，超出滚动 */
	.status-item {
		flex-shrink: 0;
		width: 20vw;
		/* 关键：屏幕宽度的1/5，正好一排5个 */
		text-align: center;
		padding: 20rpx 0;
		position: relative;
		box-sizing: border-box;
		transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		/* 点击反馈 */
		-webkit-tap-highlight-color: transparent;
	}

	.status-text {
		font-size: 28rpx;
		color: #666666;
		font-weight: normal;
		line-height: 1.4;
		transition: color 0.2s, font-weight 0.2s;
	}

	/* 激活状态样式 */
	.status-item.active .status-text {
		color: #ff6b35;
		font-weight: 500;
	}

	/* 激活指示条（下划线） */
	.status-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 4rpx;
		background-color: #ff6b35;
		border-radius: 2rpx;
		transition: width 0.2s ease;
	}

	.box1 {
		width: 95%;
		margin: 20rpx auto;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx 20rpx 0;
	}
	.pinzi{
		margin: 20rpx 0;
		background: linear-gradient(90deg, #FF4500, #FFA07A);
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #fff;
	}
	.guize-list {
		width: 100%;
		padding: 20rpx;
		overflow: scroll;
		background: #fff;
		max-height: 1000rpx;
		line-height: 50rpx;
	}
	.pt-title{
		font-size: 28rpx;
		    font-weight: 700;
		    color: #777;
	}
	.dingdan{
		    border-top: 1px solid #eee;
	}
	.uni-popup__wrapper{
		border-radius: 20rpx !important;
	}
	.pituan-text{
		flex:1;
		text-align:right;
		padding-right:20rpx;
		font-weight: 700;
	}
</style>