school_uni/package1/order/orderList.vue

<template>
	<!-- 订单列表 -->
	<view class="page1">
		<view class="title">
			<view class="title-sreach">
				<view class="back-btn" @tap="back" :style="{'padding-top': menuButtonInfo.top +'px'}">
					<uni-icons type="left" size="28"></uni-icons>
				</view>
				<view class="title-search" :style="{'margin-top': menuButtonInfo.top +'px'}">
					<uni-icons type="search" size="18" style="margin: 9rpx;"></uni-icons>
					<input type="text" placeholder="搜索" v-model="searchForm.keyWord" @confirm="goSearch"
						confirm-type="search" />
				</view>
			</view>
		</view>
		<view class="nav-tab">
			<view class="tab1">
				<view class="tabs1" @tap="checkTab1('quanbu')"
					:style="{'color':tab1Checked == 'quanbu'?'#000':'#777','font-size':tab1Checked== 'quanbu'?'36rpx':'30rpx'}">
					全部订单
					<img v-if="tab1Checked == 'quanbu'"
						src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4bb5fc7725cb4a7a84d1d3a15f05b39c.png" alt=""
						style="width: 120rpx;height: 12rpx;position: absolute;bottom: 16rpx;left: 30rpx;" />
				</view>
				<view class="tabs1" @tap="checkTab1('fantuan')"
					:style="{'color':tab1Checked == 'fantuan'?'#000':'#777','font-size':tab1Checked== 'fantuan'?'36rpx':'30rpx'}">
					饭团
					<img v-if="tab1Checked == 'fantuan'"
						src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4bb5fc7725cb4a7a84d1d3a15f05b39c.png" alt=""
						style="width: 80rpx;height: 14rpx;position: absolute;bottom: 12rpx;left: 32rpx;" />
				</view>
				<view class="tabs1" @tap="checkTab1('paotui')"
					:style="{'color':tab1Checked == 'paotui'?'#000':'#777','font-size':tab1Checked== 'paotui'?'36rpx':'30rpx'}">
					快递/跑腿
					<img v-if="tab1Checked == 'paotui'"
						src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4bb5fc7725cb4a7a84d1d3a15f05b39c.png" alt=""
						style="width: 180rpx;height: 14rpx;position: absolute;bottom: 12rpx;left: 32rpx;" />
				</view>
				<view class="tabs1" @tap="checkTab1('ershou')"
					:style="{'color':tab1Checked == 'ershou'?'#000':'#777','font-size':tab1Checked== 'ershou'?'36rpx':'30rpx'}">
					二手
					<img v-if="tab1Checked == 'ershou'"
						src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4bb5fc7725cb4a7a84d1d3a15f05b39c.png" alt=""
						style="width: 80rpx;height: 14rpx;position: absolute;bottom: 8rpx;left: 32rpx;" />
				</view>
			</view>
			<view class="tab2">
				<view class="tabs2" @tap="checkTabs2('quanbu')"
					:style="{'background':tab2Checked=='quanbu'?'rgba(166, 255, 234, 1)':'#F5F5F5','color':tab2Checked=='quanbu'?'#000':'#777'}">
					全部</view>
				<view class="tabs2" @tap="checkTabs2('daifu')"
					:style="{'background':tab2Checked=='daifu'?'rgba(166, 255, 234, 1)':'#F5F5F5','color':tab2Checked=='daifu'?'#000':'#777'}">
					待支付</view>
				<view class="tabs2" @tap="checkTabs2('daifu')"
					:style="{'background':tab2Checked=='daifu'?'rgba(166, 255, 234, 1)':'#F5F5F5','color':tab2Checked=='daifu'?'#000':'#777'}">
					待成团</view>
				<view class="tabs2" @tap="checkTabs2('daishou')"
					:style="{'background':tab2Checked=='daishou'?'rgba(166, 255, 234, 1)':'#F5F5F5','color':tab2Checked=='daishou'?'#000':'#777'}">
					待消费</view>
				<view class="tabs2" @tap="checkTabs2('daifu')"
					:style="{'background':tab2Checked=='daifu'?'rgba(166, 255, 234, 1)':'#F5F5F5','color':tab2Checked=='daifu'?'#000':'#777'}">
					待接单</view>
				<view class="tabs2" @tap="checkTabs2('daifa')"
					:style="{'background':tab2Checked=='daifa'?'rgba(166, 255, 234, 1)':'#F5F5F5','color':tab2Checked=='daifa'?'#000':'#777'}">
					待取货</view>
				<view class="tabs2" @tap="checkTabs2('daishou')"
					:style="{'background':tab2Checked=='daishou'?'rgba(166, 255, 234, 1)':'#F5F5F5','color':tab2Checked=='daishou'?'#000':'#777'}">
					待送达</view>
				<view class="tabs2" @tap="checkTabs2('daishou')"
					:style="{'background':tab2Checked=='daishou'?'rgba(166, 255, 234, 1)':'#F5F5F5','color':tab2Checked=='daishou'?'#000':'#777'}">
					已完成</view>
				<view class="tabs2" @tap="checkTabs2('daishou')"
					:style="{'background':tab2Checked=='daishou'?'rgba(166, 255, 234, 1)':'#F5F5F5','color':tab2Checked=='daishou'?'#000':'#777'}">
					待商家同意退款</view>
				<view class="tabs2" @tap="checkTabs2('daishou')"
					:style="{'background':tab2Checked=='daishou'?'rgba(166, 255, 234, 1)':'#F5F5F5','color':tab2Checked=='daishou'?'#000':'#777'}">
					已退款</view>
				<view class="tabs2" @tap="checkTabs2('guanbi')"
					:style="{'background':tab2Checked=='guanbi'?'rgba(166, 255, 234, 1)':'#F5F5F5','color':tab2Checked=='guanbi'?'#000':'#777'}">
					已取消</view>
			</view>
		</view>
		<view class="content">
			<view class="box1" v-for="(item,index) in orderList" :key="index">
				<view class="ziqu-xuanfu" v-if="item.status == 0" style="background:red">
					待支付
				</view>
				<view class="ziqu-xuanfu" v-if="item.status == 10"  style="background:rgba(166, 255, 234, 1)">
					待成团
				</view>
				<view class="ziqu-xuanfu"  v-if="item.status == 2"  style="background:rgba(166, 255, 234, 1)">
					待骑手接单
				</view>
				<view class="ziqu-xuanfu"  v-if="item.status == 3 && item.deliveryType == 1" style="background:rgba(166, 255, 234, 1)">
					待取货
				</view>
				<view class="ziqu-xuanfu"  v-if="item.status == 3 && item.deliveryType == 2" style="background:rgba(166, 255, 234, 1)">
					待消费
				</view>
				<view class="ziqu-xuanfu" v-if="item.status == 4" style="background:rgba(255, 193, 236, 1)">
					待送达
				</view>
				<view class="ziqu-xuanfu" v-if="item.status == 5">
					已完成
				</view>
				<view class="ziqu-xuanfu" v-if="item.status == 6">
					已取消
				</view>
				<view class="ziqu-xuanfu" v-if="item.status == 7">
					待商家同意退款
				</view>
				<view class="ziqu-xuanfu" v-if="item.status == 8">
					已退款
				</view>
				<view style="width: 100%;line-height: 70rpx;font-size: 28rpx;font-weight: 700;display: flex;">
					<view style="height: 40rpx;line-height: 40rpx;background: linear-gradient(90deg, rgba(255, 77, 0, 1), rgba(255, 184, 84, 1));padding: 0 16rpx;border-radius: 40rpx;color: #fff;margin: 14rpx 20rpx 0 0;">
						{{item.orderType == 4 ? '快递' : item.orderType == 5 ? '跑腿' : item.orderType == 6 ? '二手':"饭团"}}
					</view>
					{{item.orderType == 4 ? '快递代取' : item.orderType == 5 ? '跑腿帮送' : item.orderType == 6 ? '二手物品': item.shopName}}
				</view>
				<view v-if="item.orderType == 4 || item.orderType == 5" style="display: flex;padding: 20rpx;background: #F5F5F5;border-radius: 20rpx;">
					<view class="goods-img">
						<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4130b6a412584c71949b3a03e5834453.png" alt="">
						<view class="jiaobiao">
							3个
						</view>
						<!-- <view class="jiaobiao">
							快递
						</view> -->
					</view>
					<view class="goods-content">
						<view class="goods-name" style="font-size: 24rpx;line-height: 50rpx;display: flex;">
							<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/1f77398a73454a6595c12a3c18731599.png" alt="" style="width: 50rpx;height: 50rpx;" />
							沁园春第三食堂A20窗口
						</view>
						<view class="goods-name" style="font-size: 24rpx;line-height: 50rpx;display: flex;margin-top: 14rpx;">
							<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/d0764fb4138747769538cf1cafa3b017.png" alt="" style="width: 50rpx;height: 50rpx;" />
							11号宿舍楼610
						</view>
						<view class="goods-content-bottom">
							下单时间：2026-02-25 16:34
						</view>
					</view>
				</view>
				<view v-else style="display: flex;padding: 20rpx;background: #F5F5F5;border-radius: 20rpx;" v-for="(item1,index1) in item.goodsList" :key="index1"   v-if="item.goodsList != null && item.goodsList.length > 0">
					<view class="goods-img">
						<img :src="item1.productPicture" alt="">
					</view>
					<view class="goods-content">
						<view class="goods-name">
							{{item1.productName}}
						</view>
						<view class="goods-content-center">
							<view>
								{{item1.specs == null ? '' : item1.specs}}
							</view>
						</view>
						<view class="goods-content-bottom">
							<view style="width: 45%;">
								X{{item1.quantity}}
							</view>
							<view class="pintuan-left-price">
								￥{{item1.price}}
							</view>
						</view>
					</view>
				</view>
				<view style="height: 100rpx;border-bottom: 1px solid #F5F5F5;display: flex;line-height: 100rpx;">
					<view style="flex: 1;color: #777;" v-if="item.status == 0">
						待支付 <text style="font-size: 32rpx;color: red;font-weight: 700;">{{ formatTime(item.timeLeft) }}</text>
					</view>
					<view style="font-size: 24rpx;font-weight: 700;">
						实付<text v-if="tab1Checked == 'fantuan'" style="font-size: 20rpx;color: #777;">（含包装/配送费）</text> <text
							style="color: red;">￥24</text>
					</view>
				</view>
				<view class="bottom-btn">
					<view class="btn1">
						取消订单
					</view>
					<view class="btn1" v-
						style="background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));color: #000;">
						去支付
					</view>
					<view class="btn1" style="background: rgba(166, 255, 234, 0.3);color: #000;">
						查看订单
					</view>
					<!-- <view class="btn1" style="background: rgba(166, 255, 234, 0.3);color: #000;">
						去评价
					</view>
					<view class="btn1">
						删除订单
					</view> -->
				</view>
			</view>
			<uni-load-more :status="loadStatus"  @change="onChange" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadStatus: 'more',
				tab1Checked: 'quanbu',
				tab2Checked: 'quanbu',
				totalPages: 1,
				pageNum:1,
				timer: null,
				orderList:[],
				searchForm:{
					pageNum:1,
					pageSize:10,
					searchType:0,
					userId:uni.getStorageSync('id'),
					regionId:JSON.parse(uni.getStorageSync('area')).id
				},
				menuButtonInfo: {}
			}
		},
		onReachBottom() {
			if (this.searchForm.pageNum >= this.totalPages) return;
			// this.status = 'loading';
			this.searchForm.pageNum++;
			this.getOrderList();
		},
		onLoad(option) {
			this.getOrderList()
			this.startGlobalTimer()
		},
		onUnload() {
		    // 页面卸载清除定时器
		    if (this.timer) clearInterval(this.timer)
		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		},
		methods: {
			// 1. 开启全局定时器
			startGlobalTimer() {
			  // 立即执行一次，避免等待1秒才显示
			  this.updateCountdown()
			  
			  this.timer = setInterval(() => {
				this.updateCountdown()
			  }, 1000)
			},
		
			// 2. 核心逻辑：计算每条数据的剩余时间
			updateCountdown() {
			  const now = new Date().getTime()
			  
			  this.orderList.forEach(item => {
				const reg = /(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})/
				const match = item.createTime.match(reg)
				
				if (match) {
				  // 2. 手动构造时间 (注意：月份要减 1，因为 JS 月份是 0-11)
				  // 这种写法在 iOS 上绝对不会报错
				  let targetTime = new Date(
				    parseInt(match[1]), // 年
				    parseInt(match[2]) - 1, // 月 (记得减1)
				    parseInt(match[3]), // 日
				    parseInt(match[4]), // 时
				    parseInt(match[5]), // 分
				    parseInt(match[6])  // 秒
				  ).getTime()
				
				  // 3. 加上 1 小时
				  targetTime = targetTime + (60 * 60 * 1000)
				  
				  // 4. 计算差值
				  const diff = targetTime - new Date().getTime()
				
				// 如果时间已过期，设为0
				item.timeLeft = diff > 0 ? diff : 0
				}
			  })
			},
		
			// 3. 格式化时间 (毫秒 -> 天时分秒)
			formatTime(ms) {
			  const second = Math.floor(ms / 1000)
			  const day = Math.floor(second / 86400)
			  const hour = Math.floor((second % 86400) / 3600)
			  const minute = Math.floor((second % 3600) / 60)
			  const sec = second % 60
			  
			  // 补零操作
			  const pad = (n) => n < 10 ? '0' + n : n
			  
			  // 根据需要返回格式，例如：1天 02时 05分 10秒
			  return `${day > 0 ? day + '天' : ''}${pad(hour)}时${pad(minute)}分${pad(sec)}秒`
			},
			checkTab1(type) {
				this.tab1Checked = type
				if(type == 'quanbu'){
					this.searchForm.searchType = 0
				}else if(type == 'fantuan'){
					this.searchForm.searchType = 1
				}else if(type == 'paotui'){
					this.searchForm.searchType = 2
				}else if(type == 'ershou'){
					this.searchForm.searchType = 3
				}
				this.searchForm.pageNum = 1
				this.getOrderList()
			},
			checkTabs2(type) {
				this.tab2Checked = type
			},
			getOrderList(){
				this.loadStatus = 'loading'
				let that = this
				that.tui.request("/mall/order/page", "POST", this.searchForm, false, false).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]
						}
						console.log(that.orderList)
						that.totalPages = res.result.pages; // pages = 总页数
						that.$forceUpdate();
					} else {
						that.tui.toast(res.message);
						return;
					}
					uni.hideLoading();
				}).catch((res) => {});
			},
			back() {
				uni.navigateBack()
			}
		}

	}
</script>

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

	.page1 {
		width: 100%;
		min-height: 100vh;
		font-size: 24rpx;
		position: relative;
		display: flex;
		flex-direction: column;
	}

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

	.title-sreach {
		width: 75%;
		display: flex;
		height: 200rpx;
	}

	.back-btn {
		padding-top: 110rpx;
	}

	.title-search {
		margin-top: 110rpx;
		display: flex;
		background: #fff;
		height: 54rpx;
		margin-left: 20rpx;
		border-radius: 54rpx;
		width: 380rpx;
		flex: 1;

		input {
			height: 54rpx;
			line-height: 54rpx;
		}
	}

	.nav-tab {
		flex-shrink: 0;
		position: absolute;
		top: 200rpx;
		left: 2.5%;
		background: #fff;
		width: 95%;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.content {
		flex: 1;
		width: 95%;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		    position: absolute;
		    top: 450rpx;
		    left: 2.5%;
	}

	.tab1 {
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
	}

	.tabs1 {
		position: relative;
		font-size: 30rpx;
		font-weight: 700;
		color: #777;
		padding: 0 30rpx;
	}

	.tab2 {
		height: 70rpx;
		width: 100%;
		overflow-x: scroll;
		overflow-y: hidden;
		margin-top: 20rpx;
		white-space: nowrap;
	}

	.tabs2 {
		width: 156rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background: #F5F5F5;
		border-radius: 20rpx;
		font-weight: 700;
		margin-right: 20rpx;
		display: inline-block;
		-webkit-overflow-scrolling: touch;
	}

	.ziqu-xuanfu {
		position: absolute;
		top: 0;
		right: 0;
		background: #F5F5F5;
		border-top-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		font-weight: 700;
		height: 56rpx;
		width: 120rpx;
		text-align: center;
		line-height: 56rpx;
		color: #fff;
	}

	.box1 {
		width: 100%;
		margin: 0 auto 20rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		position: relative;
	}

	.goods-img {
		width: 160rpx;
		height: 160rpx;
		position: relative;
		background: #fff;
		border-radius: 20rpx;

		img {
			width: 100%;
			background-size: 100%;
			height: 100%;
		}
	}

	.goods-content {
		flex: 1;
		padding-left: 20rpx;
	}

	.goods-name {
		font-size: 32rpx;
		font-weight: 900;
	}

	.goods-content-center {
		display: flex;
		margin: 16rpx 0;
		color: #777;
	}

	.pintuan-left-price {
		width: 55%;
		text-align: right;
		font-weight: 700;
		color: #000;
	}

	.goods-content-bottom {
		display: flex;
		line-height: 56rpx;
		color: #777;
	}

	.btn1 {
		width: 140rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		margin-top: 20rpx;
		background: #F5F5F5;
		border-radius: 60rpx;
		color: #777;
		font-weight: 700;
		float: right;
		margin-left: 20rpx;
	}

	.bottom-btn {
		height: 80rpx;
	}
	.jiaobiao{
		width:76rpx;
		height:40rpx;
		background:rgba(227, 255, 150, 1);
		font-weight:700;
		position: absolute;
		top: 0;
		left: 0;
		border-top-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		text-align: center;
		line-height: 40rpx;
	}
</style>