<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.shopName" @confirm="goSearch"
						confirm-type="search" />
				</view>
			</view>
			<view class="order-hero">
				<view style="margin-bottom: 10rpx;;">
					<view class="hero-eyebrow">ORDER CENTER</view>
				</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('tuangou')"
					:style="{'color':tab1Checked == 'tuangou'?'#000':'#777','font-size':tab1Checked== 'tuangou'?'36rpx':'30rpx'}">
					团购
					<img v-if="tab1Checked == 'tuangou'"
						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 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" v-if="tab1Checked !='quanbu'">
				<view class="status-current">
					<text class="status-current-label">当前状态</text>
					<text class="status-current-value">{{statusFilterText}}</text>
				</view>
				<view class="status-filter-btn" @tap="openStatusPopup">
					<text>筛选状态</text>
					<uni-icons type="bottom" size="14" color="#0d4d42"></uni-icons>
				</view>
			</view>
		</view>
		<uni-popup ref="statusPopup" background-color="#fff">
			<view class="status-popup">
				<view class="status-popup-title">选择订单状态</view>
				<view class="status-popup-sub">选择后立即刷新订单列表</view>
				<view class="status-popup-list">
					<view class="status-popup-item" v-for="item in statusFilterOptions" :key="item.value"
						:class="{'status-popup-item-active': tab2Checked == item.value}" @tap="selectStatus(item.value)">
						{{item.label}}
					</view>
				</view>
			</view>
		</uni-popup>
		<view class="content" :style="{top:tab1Checked =='quanbu'?'415rpx':'500rpx'}">
			<view class="empty-order" v-if="orderList.length <= 0 && loadStatus != 'loading'">
				<view class="empty-icon">单</view>
				<view class="empty-title">暂时没有相关订单</view>
				<view class="empty-sub">换个分类看看，或搜索你记得的商家名称</view>
			</view>
			<view class="box1" v-for="(item,index) in orderList" :key="index">
				<view class="ziqu-xuanfu" v-if="item.status == 0" style="background:red;color:#fff;">
					待支付
				</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);color:#fff;">
					待送达
				</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 class="ziqu-xuanfu" v-if="item.status == 11" style="background:rgba(227, 255, 150, 1);color:#777;">
					售后中
				</view>
				<view class="ziqu-xuanfu" v-if="item.status == 12">
					已售后
				</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.otherOrder == 1 ? '快递/跑腿' : item.otherOrder == 2 ? '团购' : item.otherOrder == 3 ? '鱼塘' :"饭团"}}
					</view>
					{{item.otherOrder == 1 ? '快递/跑腿' :  item.otherOrder == 3 ? '鱼塘订单' : item.shopName}}
				</view>
				<view v-if="item.otherOrder == 1"  class="errand-goods-card" @tap.stop="orderDetail(item.id)" style="display: flex;padding: 20rpx;background: rgba(247, 248, 248, 0.6);border-radius: 20rpx;">
					<view class="goods-img">
						<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4130b6a412584c71949b3a03e5834453.png" alt="">
						<!-- <view class="jiaobiao">
							快递
						</view> -->
					</view>
					<view class="goods-content errand-goods-content">
						<view class="goods-name errand-address-row" style="font-size: 24rpx;line-height: 50rpx;display: flex;">
							<img class="errand-address-icon" src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/1f77398a73454a6595c12a3c18731599.png" alt="" style="width: 50rpx;height: 50rpx;" />
							<text class="errand-address-text">{{item.shopAddress}}</text>
						</view>
						<view class="goods-name errand-address-row" style="font-size: 24rpx;line-height: 50rpx;display: flex;margin-top: 14rpx;">
							<img class="errand-address-icon" src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/d0764fb4138747769538cf1cafa3b017.png" alt="" style="width: 50rpx;height: 50rpx;" />
							<text class="errand-address-text">{{item.receiverAddress}}</text>
						</view>
						<view class="goods-content-bottom">
							下单时间：{{item.createTime | formatTime}}
						</view>
					</view>
				</view>
				<view v-if="item.otherOrder != 1" class="goods-card" @tap.stop="orderDetail(item.id)">
					<scroll-view v-if="item.goodsList != null && item.goodsList.length > 0" class="goods-scroll" scroll-x enable-flex :show-scrollbar="false">
						<view class="goods-scroll-inner">
							<view class="goods-img goods-scroll-img" v-for="(item1,index1) in item.goodsList" :key="index1">
								<image :src="item1.productPicture" mode="aspectFill"></image>
							</view>
						</view>
					</scroll-view>
					<view class="goods-content goods-price">
						<view class="goods-name">
							<view>￥<text style="font-size: 32rpx;">{{item.totalAmount}}</text></view>
							<view style="color:#777;">共{{item.num}}件</view>
						</view>
					</view>
				</view>
				<view v-if="item.status != 6" style="height: 80rpx;border-bottom: 1px solid rgba(247, 248, 248, 0.6);display: flex;line-height: 80rpx;">
					<view v-if="item.otherOrder == null || item.otherOrder == 2" style="flex: 1;font-weight: 700;">
						<text v-if="tab1Checked != 'fantuan'">创建时间:</text>{{item.createTime | formatTime}}
					</view>
					<view style="font-weight: 700;">
						<text style="font-size:28rpx;">{{item.status == 0 ? '待支付' : '实付'}}</text><text v-if="tab1Checked == 'fantuan'" style="font-size: 20rpx;color: #777;">（含包装/配送费）</text> <text
							style="color: red;">￥{{item.totalAmount}}</text>
					</view>
				</view>
				<view class="bottom-btn">
					<!-- <view class="btn1" v-if="orderStatus(item)" @tap="returnPopupProp(item)">
						取消订单
					</view> -->
					
					<!-- <view class="btn1" v-if="item.status == 0"  @tap="payAgain(item)"
						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;" @tap.stop="orderDetail(item.id)">
						查看订单
					</view>
					<view @tap.stop="goEvaluate(item)" v-if="item.status == 5" class="btn1" style="background: rgba(166, 255, 234, 0.3);color: #000;">
						去评价
					</view>
					<!-- <view class="btn1">
						删除订单
					</view> -->
				</view>
			</view>
			<!-- 支付弹出层 -->
			<uni-popup ref="payPopup" background-color="#fff">
				<view class="pay-popup" style="height: 250px;background: #fff;border-radius: 40rpx 40rpx 0 0;padding-top: 40rpx;">
					<view class="content" style="height: 100%;margin-top:0;top:0">
						<view class="box1">
							<view
								style="height: 90rpx;line-height: 90rpx;text-align: center;font-weight: 700;font-size: 30rpx;">
								￥<text
									style="font-size: 60rpx;">{{payData.totalAmount ? payData.totalAmount.toFixed(2) : '0.00'}}</text>
							</view>
							<view  style="height: 40rpx;text-align: center;color: #777;">
								
								<text v-if="payData.groupInfo && payData.orderType == 3 && payData.deliveryType == 1">配送费(均摊){{payData.deliveryFee}} 元 </text>
								<text v-if="(payData.deliveryFee != null && payData.deliveryFee > 0) && payData.orderType != 3 && payData.deliveryType == 1">配送费 {{payData.deliveryFee}} 元 </text>
								
								<text v-if="payData.packageFee > 0"> 打包费 {{payData.packageFee}} 元</text>
							</view>
							<view style="height: 40rpx;text-align: center;color: red;" v-if="payData.groupInfo">
								若拼团失败，将会为您自动退款
							</view>
						</view>
						<view class="box1" style="display: flex;padding: 40rpx;">
							<view style="flex: 1;">
								<view style="height: 42rpx;line-height: 42rpx;display: flex;">
									<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4c8e0cc311db4d38ab43e019673c4b8c.png"
										alt="" style="width: 42rpx;height: 42rpx;margin-right: 20rpx;" />
									<text style="font-size: 30rpx;font-weight: 700;">微信支付</text>
								</view>
								<view style="text-align: right;margin-left: 60rpx;color: #777;width: 146rpx;">
									使用微信支付
								</view>
							</view>
							<view style="width: 36rpx;padding-top: 20rpx;">
								<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/02bff7edc4e04caaa1868955ff684f1f.png"
									alt="" style="width: 36rpx;height: 36rpx;" />
							</view>
						</view>
						<view class="btn" style="background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));width: 90%;height: 100rpx;border-radius: 100rpx;text-align: center;font-size: 28rpx;font-weight: 700;line-height: 100rpx;margin: 40rpx auto;" @tap="wxPayment">
							确认付款
						</view>
					</view>
				</view>
			</uni-popup>
			
			<uni-popup ref="returnPopup" background-color="#fff" style="height: 1600rpx !important;">
				<view class="car-content">
					<view class="car-close">
						<uni-icons type="close" size="30" color="#fff"></uni-icons>
					</view>
					<view class="car-title">
						选择退款原因 
					</view>
					<view class="">
						<view class="">
							全额退款（商家原因）
							<radio :checked="sellTime==2" name="sellTime" @click="checkSellTime(2)" />
						</view>
						<view class="">
							全额退款（配送员原因）
							<radio :checked="sellTime==3" name="sellTime" @click="checkSellTime(3)" />
						</view>
						<view class="">
							全额退款（商家+配送员原因）
							<radio :checked="sellTime==4" name="sellTime" @click="checkSellTime(4)" />
						</view>
					</view>
				</view>
				<view class="guize-list">
					<view style="height: 80rpx;line-height: 80rpx;font-size: 36rpx;font-weight: 700;text-align: center;">
						确定要取消订单吗
						<text v-if="((payData.orderType == 2 || payData.orderType == 3) && payData.status == 2) || payData.status == 3 || payData.status == 4">取消订单需要商家同意</text>
						<view v-if="(payData.status == 3 && payData.deliveryType ==1) || payData.status == 4">
							<text v-if="payData.shopMakeTime == null">商家还未出餐</text>
							<text v-else>本单商家备餐时长共计{{shopTime}} 配送员配送时长共计{{peisongTime}}</text>
						</view>
					</view>
					<view class="btn" @tap="returnOrder()">
						确认取消
					</view>
				</view>
			</uni-popup>
			
			<uni-load-more :status="loadStatus"  @change="onChange" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadStatus: 'more',
				tab1Checked: 'quanbu',
				tab2Checked: 10,
				totalPages: 1,
				pageNum:1,
				shopTime:'',
				peisongTime:'',
				sellTime:2,
				refundType:2,
				refundTypeStatus:1,
				payData:{},
				orderList:[],
				searchForm:{
					pageNum:1,
					pageSize:10,
					shopName:'',
					searchType:0,
					userId:uni.getStorageSync('id'),
					regionId:JSON.parse(uni.getStorageSync('area')).id
				},
				menuButtonInfo: {}
			}
		},
		computed: {
			statusFilterOptions() {
				const allOptions = [
					{ label: '全部', value: 10 },
					{ label: '待支付', value: 0 },
					{ label: '待成团', value: 1 },
					{ label: '待消费', value: 2 },
					{ label: '待接单', value: 3 },
					{ label: '待取货', value: 4 },
					{ label: '待送达', value: 5 },
					{ label: '已完成', value: 6 },
					{ label: '待退款', value: 7 },
					{ label: '已退款', value: 8 },
					{ label: '已取消', value: 9 },
					{ label: '售后中', value: 11 },
					{ label: '已售后', value: 12 }
				];
				if (this.tab1Checked == 'fantuan') return allOptions;
				if (this.tab1Checked == 'ershou') {
					return allOptions.filter(item => [10, 0, 6, 7, 8, 9, 11, 12].includes(item.value));
				}
				if (this.tab1Checked == 'tuangou') {
					return allOptions.filter(item => [10, 0, 1, 2, 6, 7, 8, 9, 11, 12].includes(item.value));
				}
				return allOptions.filter(item => ![1, 2].includes(item.value));
			},
			statusFilterText() {
				const selected = this.statusFilterOptions.find(item => item.value == this.tab2Checked);
				return selected ? selected.label : '全部';
			}
		},
		onReachBottom() {
			if (this.searchForm.pageNum >= this.totalPages) return;
			// this.status = 'loading';
			this.searchForm.pageNum++;
			this.getOrderList();
		},
		onPullDownRefresh() {
			this.resetOrderList()
			this.getOrderList()
		},
		filters: {
		  formatHourMinute(value) {
		    if (!value) return '';
		        
		        const date = new Date(value);
		        
		        // 获取日 (getDate)，并补齐0
		        const day = String(date.getDate()).padStart(2, '0');
		        
		        // 获取小时 (getHours)，并补齐0
		        const hour = String(date.getHours()).padStart(2, '0');
		        
		        // 获取分钟 (getMinutes)，并补齐0
		        const minute = String(date.getMinutes()).padStart(2, '0');
		        
		        // 拼接格式：日-日-时:分
		        return `${day}-${hour}:${minute}`;
		  },
		  formatTime(value) {
		    if (!value) return '';
		    if(value == '尽快送达')  return '尽快送达';
		    const date = new Date(value);
		    
		    // 获取年份
		    const year = date.getFullYear();
		    
		    // 获取月份 (getMonth 返回 0-11，所以需要 +1)，并补齐0
		    const month = String(date.getMonth() + 1).padStart(2, '0');
		    
		    // 获取日 (getDate)，并补齐0
		    const day = String(date.getDate()).padStart(2, '0');
		    
		    // 获取小时 (getHours)，并补齐0
		    const hour = String(date.getHours()).padStart(2, '0');
		    
		    // 获取分钟 (getMinutes)，并补齐0
		    const minute = String(date.getMinutes()).padStart(2, '0');
		    
		    // 获取秒 (getSeconds)，并补齐0
		    const second = String(date.getSeconds()).padStart(2, '0');
		    
		    // 拼接格式：年-月-日 时:分:秒
		    return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
		  }
		},
		onLoad(option) {
			
		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.searchForm.userId = uni.getStorageSync('id')
			this.searchForm.regionId = JSON.parse(uni.getStorageSync('area')).id
			this.resetOrderList()
			this.getOrderList()
		},
		methods: {
			resetOrderList() {
				this.orderList = []
				this.pageNum = 1
				this.searchForm.pageNum = 1
				this.loadStatus = 'more'
			},
			checkTab1(type) {
				this.tab1Checked = type
				if(type == 'quanbu'){
					this.searchForm.searchType = 0
					delete this.searchForm.searchStatus
				}else if(type == 'fantuan'){
					this.searchForm.searchType = 1
				}else if(type == 'paotui'){
					this.searchForm.searchType = 2
				}else if(type == 'tuangou'){
					this.searchForm.searchType = 3
				}else if(type == 'ershou'){
					this.searchForm.searchType = 4
				}
				this.tab2Checked = 10
				if(type != 'quanbu') {
					this.searchForm.searchStatus = this.tab2Checked
				}
				this.searchForm.pageNum = 1
				this.getOrderList()
			},
			checkSellTime(type){
				this.sellTime = type;
				if(this.sellTime == 2){
					//this.returnData.refundAmount = this.orderDetail.totalAmount
					this.refundType = 3
					this.refundTypeStatus = 1
				}else if(this.sellTime == 3){
					//this.returnData.refundAmount = this.orderDetail.totalAmount
					this.refundType = 3
					this.refundTypeStatus = 2
				}else{
					//this.returnData.refundAmount = this.orderDetail.totalAmount
					this.refundType = 3
					this.refundTypeStatus = 3
				}
			},
			goSearch(){
				this.searchForm.pageNum = 1
				this.getOrderList()
			},
			wxPayment() {
				let that = this;
				if (!this.payData.id || !this.payData.totalAmount) return;
			
				let amountInCents = Math.round(Number(this.payData.totalAmount) * 100);
			
				this.tui.request("/api/wechat/pay/unified-order", "POST", {
					openid: uni.getStorageSync('miniProgramOpenid') || 'test-openid',
					amount: amountInCents,
					description: '商城订单',
					outTradeNo: this.payData.id
				}, false, false).then((res) => {
					if (res.code == 200) {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.timeStamp,
							nonceStr: res.nonceStr,
							package: res.package,
							signType: res.signType,
							paySign: res.paySign,
							success: function(res2) {
							/* uni.showToast({ title: '支付成功', icon: 'success' });
								that.tui.request("/api/wechat/pay/paySuccess", "POST", {
									outTradeNo: that.payData.id
								}, false, false).then((res3) => {
									if(res3.code == 200){
										uni.redirectTo({
											url: '/package1/order/orderDetail?id=' + that.payData.id
										});
									}else{
										that.tui.toast("订单创建失败，请联系客服处理");
									}
								}) */
								uni.navigateTo({
									url: '/package1/order/orderDetail?id=' + that.payData.id
								});
							},
							fail: function(err) {
								that.tui.toast("支付失败或取消");
							}
						});
					}
				})
			},
			orderStatus(item){
				if(item.status == 0 || item.status == 10 || item.status == 2 || (item.status == 3 && item.deliveryType == 1) || (item.status == 3 && item.deliveryType == 2) || item.status == 4){
					return true;
				}
				return false;
			},
			orderDetail(id){
				uni.navigateTo({
					url: '/package1/order/orderDetail?id=' + id
				});
			},
			goEvaluate(item){
				let that = this;
				that.tui.request("/app/comment/getByOrderId?orderId=" + item.id, "POST", {}, false, true).then((res) => {
					uni.hideLoading();
					if (res.code == 200) {
						if (res.result != null && res.result.length > 0) {
							that.tui.toast("该订单已经评价过了");
							return;
						}
						uni.navigateTo({
							url: '/package1/order/orderEvaluate?item=' + JSON.stringify(item)
						});
					} else {
						that.tui.toast(res.message);
					}
				}).catch((res) => {
					uni.hideLoading();
				});
			},
			checkTabs2(type) {
				this.tab2Checked = type;
				this.searchForm.searchStatus = type;
				this.searchForm.pageNum = 1
				this.getOrderList();
			},
			openStatusPopup() {
				this.$refs.statusPopup.open('bottom');
			},
			selectStatus(type) {
				this.checkTabs2(type);
				this.$refs.statusPopup.close();
			},
			payAgain(item){
				this.payData = item;
				this.$refs.payPopup.open('bottom');
			},
			getOrderList(){
				this.loadStatus = 'loading'
				let that = this
				return 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]
						}
						for(let i=0;i<that.orderList.length;i++){
							that.orderList[i].num = 0
							for(let m=0;m<that.orderList[i].goodsList.length;m++){
								that.orderList[i].num += 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) => {}).finally(() => {
					uni.stopPullDownRefresh();
				});
			},
			returnPopupProp(item){
			  this.payData = item;
			  if(this.payData.shopMakeTime != null){
					const date1 = new Date(this.payData.deliveryInfo.acceptTime);
					const date2 = new Date(this.payData.shopMakeTime);
													
					// 2. 计算毫秒差值 (取绝对值，防止结果为负数)
					let diffMs = Math.abs(date2 - date1);
													
					// 3. 数学换算
					// 1秒 = 1000毫秒
					// 1分 = 60秒
					// 1时 = 60分
					const seconds = Math.floor((diffMs / 1000) % 60);
					const minutes = Math.floor((diffMs / (1000 * 60)) % 60);
					const hours = Math.floor(diffMs / (1000 * 60 * 60));
													
					// 4. 格式化输出 (可选：补零操作，例如 9秒 -> 09秒)
					const fmt = (num) => num.toString().padStart(2, '0');
													
					this.shopTime = `${fmt(hours)}时${fmt(minutes)}分${fmt(seconds)}秒`; 
					
					const date3 = new Date();
							  
					// 2. 计算毫秒差值 (取绝对值，防止结果为负数)
					let diffMs1 = Math.abs(date3 - date2);
							  
					// 3. 数学换算
					// 1秒 = 1000毫秒
					// 1分 = 60秒
					// 1时 = 60分
					const seconds1 = Math.floor((diffMs1 / 1000) % 60);
					const minutes1 = Math.floor((diffMs1 / (1000 * 60)) % 60);
					const hours1 = Math.floor(diffMs1 / (1000 * 60 * 60));
							  
					this.peisongTime =  `${fmt(hours1)}时${fmt(minutes1)}分${fmt(seconds1)}秒`;
			  }
			  this.$refs.returnPopup.open('bottom');
			},
			returnOrder(){
				this.$refs.returnPopup.close();
				let item = this.payData
				let that = this
				that.tui.request("/mall/order/cancel", "POST", {refundType:this.refundType,refundTypeStatus:this.refundTypeStatus,orderId:item.id,userId:uni.getStorageSync('id')}, false, true).then((res) => {
					if (res.code == 200) {
						that.tui.toast("取消订单成功");
						that.searchForm.pageNum = 1
						that.getOrderList()
						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: linear-gradient(180deg, #ecfff7 0%, #f7fbf6 42%, #fbfaf5 100%);
		color: #00231C;
	}

	.page1 {
		width: 100%;
		min-height: 100vh;
		font-size: 24rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		background:
			radial-gradient(circle at 12% 8%, rgba(166, 255, 234, 0.48) 0, rgba(166, 255, 234, 0) 260rpx),
			radial-gradient(circle at 92% 20%, rgba(255, 221, 176, 0.28) 0, rgba(255, 221, 176, 0) 320rpx);
	}

	.title {
		flex-shrink: 0;
		background:
			linear-gradient(135deg, rgba(166, 255, 234, 0.9) 0%, rgba(245, 255, 249, 0.96) 52%, rgba(255, 246, 225, 0.94) 100%);
		width: 100%;
		height: 400rpx;
		padding-bottom: 20rpx;
		border-bottom-left-radius: 48rpx;
		border-bottom-right-radius: 48rpx;
		box-shadow: 0 18rpx 44rpx rgba(0, 35, 28, 0.06);
		position: fixed;
		top: 0;
		left: 0;
		overflow: hidden;
		z-index: 10;
	}

	.title::after {
		content: '';
		width: 360rpx;
		height: 360rpx;
		border-radius: 50%;
		background: rgba(255, 221, 176, 0.26);
		position: absolute;
		right: -150rpx;
		top: -120rpx;
	}

	.title-sreach {
		width: 75%;
		display: flex;
		height: 200rpx;
		position: relative;
		z-index: 1;
	}

	.back-btn {
		padding-top: 110rpx;
		width: 72rpx;
		text-align: center;
	}

	.title-search {
		margin-top: 110rpx;
		display: flex;
		background: rgba(255, 255, 255, 0.78);
		height: 64rpx;
		margin-left: 20rpx;
		border-radius: 999rpx;
		width: 380rpx;
		flex: 1;
		box-shadow: 0 12rpx 28rpx rgba(0, 35, 28, 0.08);
		border: 1px solid rgba(255, 255, 255, 0.88);

		input {
			height: 64rpx;
			line-height: 64rpx;
			font-size: 26rpx;
		}
	}

	.order-hero {
		width: 90%;
		margin: -6rpx auto 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		z-index: 1;
	}

	.hero-eyebrow {
		color: #0d8d76;
		font-size: 20rpx;
		font-weight: 900;
		letter-spacing: 2rpx;
	}

	.hero-title {
		margin-top: 8rpx;
		color: #173f36;
		font-size: 44rpx;
		font-weight: 900;
	}

	.hero-sub {
		margin-top: 8rpx;
		color: #60706c;
		font-size: 23rpx;
	}

	.hero-badge {
		width: 132rpx;
		height: 132rpx;
		border-radius: 42rpx;
		background: rgba(255, 255, 255, 0.82);
		box-shadow: 0 18rpx 34rpx rgba(0, 35, 28, 0.08);
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.hero-num {
		color: #0d4d42;
		font-size: 42rpx;
		font-weight: 900;
	}

	.hero-label {
		color: #7b8883;
		font-size: 20rpx;
		font-weight: 800;
	}

	.nav-tab {
		flex-shrink: 0;
		position: fixed;
		top: 250rpx;
		left: 2.5%;
		background: rgba(255, 255, 255, 0.92);
		width: 95%;
		border-radius: 34rpx;
		padding: 18rpx;
		box-shadow: 0 18rpx 42rpx rgba(0, 35, 28, 0.07);
		box-sizing: border-box;
		border: 1px solid rgba(255, 255, 255, 0.86);
		z-index: 11;
	}

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

	.tab1 {
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		overflow-x: scroll;
		white-space: nowrap;
	}

	.tabs1 {
		position: relative;
		font-size: 30rpx;
		font-weight: 900;
		color: #777;
		padding: 0 24rpx;
		flex-shrink: 0;
	}

	.tab2 {
		height: 78rpx;
		width: 100%;
		margin-top: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.status-current {
		flex: 1;
		height: 72rpx;
		line-height: 72rpx;
		background: rgba(248, 255, 250, 0.88);
		border: 1px solid rgba(166, 255, 234, 0.36);
		border-radius: 999rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		box-shadow: 0 8rpx 18rpx rgba(0, 35, 28, 0.04);
	}

	.status-current-label {
		color: #7b8883;
		font-weight: 800;
		margin-right: 18rpx;
	}

	.status-current-value {
		color: #0d4d42;
		font-weight: 900;
	}

	.status-filter-btn {
		width: 190rpx;
		height: 72rpx;
		line-height: 72rpx;
		margin-left: 18rpx;
		border-radius: 999rpx;
		background: rgba(166, 255, 234, 0.88);
		color: #0d4d42;
		font-weight: 900;
		text-align: center;
		box-shadow: 0 8rpx 18rpx rgba(0, 35, 28, 0.04);
	}

	.status-popup {
		background: linear-gradient(180deg, #ffffff 0%, #f7fffb 100%);
		border-radius: 40rpx 40rpx 0 0;
		padding: 36rpx 30rpx 46rpx;
		box-sizing: border-box;
		box-shadow: 0 -18rpx 44rpx rgba(0, 35, 28, 0.12);
	}

	.status-popup-title {
		color: #173f36;
		font-size: 34rpx;
		font-weight: 900;
		text-align: center;
	}

	.status-popup-sub {
		margin-top: 10rpx;
		color: #74817d;
		font-size: 24rpx;
		text-align: center;
	}

	.status-popup-list {
		display: flex;
		flex-wrap: wrap;
		margin-top: 30rpx;
	}

	.status-popup-item {
		width: 31.3%;
		height: 74rpx;
		line-height: 74rpx;
		margin: 0 1% 18rpx;
		border-radius: 999rpx;
		background: rgba(248, 255, 250, 0.9);
		border: 1px solid rgba(166, 255, 234, 0.42);
		box-sizing: border-box;
		color: #60706c;
		font-weight: 900;
		text-align: center;
	}

	.status-popup-item-active {
		background: rgba(166, 255, 234, 1);
		color: #0d4d42;
		box-shadow: 0 10rpx 22rpx rgba(0, 35, 28, 0.08);
	}

	.ziqu-xuanfu {
		position: absolute;
		top: 0;
		right: 0;
		background: linear-gradient(135deg, #fff7d7, #a6ffea) !important;
		border-top-right-radius: 28rpx;
		border-bottom-left-radius: 28rpx;
		font-weight: 900;
		height: 56rpx;
		width: 142rpx;
		text-align: center;
		line-height: 56rpx;
		color: #0d4d42 !important;
		box-shadow: 0 8rpx 18rpx rgba(0, 35, 28, 0.06);
	}

	.box1 {
		width: 100%;
		margin: 0 auto 24rpx;
		background: rgba(255, 255, 255, 0.94);
		border: 1px solid rgba(255, 255, 255, 0.88);
		border-radius: 34rpx;
		padding: 24rpx;
		position: relative;
		box-sizing: border-box;
		box-shadow: 0 18rpx 42rpx rgba(0, 35, 28, 0.07);
		overflow: hidden;
	}

	.box1::before {
		content: '';
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		background: rgba(166, 255, 234, 0.08);
		position: absolute;
		right: -120rpx;
		top: -130rpx;
	}

	.goods-img {
		width: 160rpx;
		height: 160rpx;
		flex-shrink: 0;
		position: relative;
		background: #fff;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 12rpx 24rpx rgba(0, 35, 28, 0.08);

		img,
		image {
			width: 100%;
			height: 100%;
			border-radius: 24rpx;
			display: block;
			object-fit: cover;
		}
	}

	.errand-goods-card {
		align-items: flex-start;
		box-sizing: border-box;
	}

	.errand-goods-content {
		flex: 1;
		min-width: 0;
		text-align: left;
	}

	.errand-address-row {
		align-items: flex-start;
	}

	.errand-address-icon {
		flex: 0 0 50rpx;
	}

	.errand-address-text {
		flex: 1;
		min-width: 0;
		word-break: break-all;
		white-space: normal;
	}

	.goods-card {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background: rgba(247, 248, 248, 0.6);
		border-radius: 20rpx;
		box-sizing: border-box;
	}

	.goods-scroll {
		flex: 1;
		width: 0;
		min-width: 0;
		white-space: nowrap;
	}

	.goods-scroll-inner {
		display: inline-flex;
		align-items: center;
	}

	.goods-scroll-img {
		flex: 0 0 160rpx;
		margin-right: 20rpx;
	}

	.goods-scroll-img:last-child {
		margin-right: 0;
	}

	.goods-content {
		padding: 0 20rpx;
		text-align: center;
	}

	.goods-price {
		flex: 0 0 128rpx;
		padding: 0 0 0 20rpx;
	}

	.goods-name {
		font-weight: 900;
		color: #243f38;
	}

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

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

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

	.btn1 {
		width: 140rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		margin-top: 20rpx;
		background: rgba(248, 255, 250, 0.9) !important;
		border: 1px solid rgba(166, 255, 234, 0.42);
		border-radius: 999rpx;
		color: #0d4d42 !important;
		font-weight: 900;
		float: right;
		margin-left: 20rpx;
		box-shadow: 0 8rpx 18rpx rgba(0, 35, 28, 0.05);
	}

	.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;
	}
	.vue-ref{
		border-radius: 20rpx !important;
	}
	.guize-list {
		width: 600rpx;
		padding: 20rpx;
		overflow: scroll;
		background: linear-gradient(180deg, #ffffff 0%, #f7fffb 100%);
		border-radius: 36rpx 36rpx 0 0;
		max-height: 1000rpx;
		box-shadow: 0 -18rpx 44rpx rgba(0, 35, 28, 0.12);
	}

	.empty-order {
		width: 100%;
		min-height: 360rpx;
		padding: 58rpx 36rpx;
		box-sizing: border-box;
		border-radius: 36rpx;
		background:
			radial-gradient(circle at 78% 8%, rgba(255, 221, 176, 0.28) 0, rgba(255, 221, 176, 0) 150rpx),
			linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 255, 251, 0.96) 100%);
		box-shadow: 0 16rpx 38rpx rgba(0, 35, 28, 0.06);
		text-align: center;
	}

	.empty-icon {
		width: 104rpx;
		height: 104rpx;
		margin: 0 auto 22rpx;
		border-radius: 36rpx;
		background: linear-gradient(135deg, #fff7d7 0%, #a6ffea 100%);
		color: #125e50;
		font-size: 34rpx;
		font-weight: 900;
		line-height: 104rpx;
		box-shadow: 0 14rpx 26rpx rgba(0, 35, 28, 0.08);
	}

	.empty-title {
		color: #243f38;
		font-size: 30rpx;
		font-weight: 900;
	}

	.empty-sub {
		margin-top: 14rpx;
		color: #74817d;
		font-size: 24rpx;
		line-height: 38rpx;
	}
</style>