jiangchengfeiyi-xiaochengxu/pages/clothesRent/clotherRentOrderList/clotherRentOrderList.vue

<template>
	<view class="flex-col justify-start relative page" :style="{ backgroundImage: 'url(' + bkgPubilcPath + ')'}">
		<view class="flex-row justify-between section_2 pos">

			<view @click="isSelectedState(0)">
				<text class="font" :style="{ color: color[0] }">&ensp;全部&ensp;</text>
				<view class="flex-col justify-start items-center" v-if="isShowUnderLine[0]"
					style="border: 1.88rpx solid #e79ea1; width: 90rpx; margin-top: 10rpx;"></view>
			</view>

			<view @click="isSelectedState(1)">
				<text class="font" :style="{ color: color[1] }">待支付</text>
				<view class="flex-col justify-start items-center" v-if="isShowUnderLine[1]"
					style="border: 1.88rpx solid #e79ea1; width: 90rpx; margin-top: 10rpx;"></view>
			</view>

			<view @click="isSelectedState(2)">
				<text class="font" :style="{ color: color[2] }">待提货</text>
				<view class="flex-col justify-start items-center" v-if="isShowUnderLine[2]"
					style="border: 1.88rpx solid #e79ea1; width: 90rpx; margin-top: 10rpx;"></view>
			</view>

			<view @click="isSelectedState(3)">
				<text class="font" :style="{ color: color[3] }">租赁中</text>
				<view class="flex-col justify-start items-center" v-if="isShowUnderLine[3]"
					style="border: 1.88rpx solid #e79ea1; width: 90rpx; margin-top: 10rpx;"></view>
			</view>

			<view @click="isSelectedState(4)">
				<text class="font" :style="{ color: color[4] }">已完成</text>
				<view class="flex-col justify-start items-center" v-if="isShowUnderLine[4]"
					style="border: 1.88rpx solid #e79ea1; width: 90rpx; margin-top: 10rpx;"></view>
			</view>

		</view>


		<view class="flex-col pos_2">
			<view class="flex-col list-item mt-15" v-for="(item, index) in orderList" :key="index" @click="gotoDetailPage(item.id)">
				<view class="flex-row justify-between group">
					<text class="font_3">泠珑水月阁</text>
					<view class="flex-row items-center">
						<text class="font_4 text_2"  v-if="item.orderStatus === '待支付'">{{ item.countdown }}</text>
						<text class="font_4 text_2"  v-if="item.orderStatus === '待收货'">{{ item.countdown }}</text>
						<text class="ml-4 font_5 text_3" v-if="item.orderStatus !== '待发货' && item.orderStatus !== '待收货'">{{ item.orderStatus }}</text>
						<text class="ml-4 font_5 text_3" v-if="item.orderStatus === '待发货'">待取货</text>
						<text class="ml-4 font_5 text_3" v-if="item.orderStatus === '待收货'">租赁中</text>
					</view>
				</view>
				<view class="flex-row items-center group view">
					<text class="font_6">订单编号：</text>
					<text class="font_7 text_4">{{ item.orderNumber }}</text>
				</view>
				<view class="divider"></view>
				<view class="flex-row justify-between items-end group_2">
					<view class="flex-row">
						<image class="image" mode="aspectFill"
						 :src="publicPath + item.clothesSnapshot.image"/>
						<view class="flex-col items-start group_3 ml-13">
							<text class="font_8">{{ item.clothesSnapshot.name }}</text>
							<text class="font_10 text_6 mt-59">￥{{ item.clothesSnapshot.price.toFixed(2) }}</text>
						</view>
					</view>
					<view class="flex-col items-center group_4" @click.stop="nav">
						<image class="image_2" :src="clothesRentUrl + '/clothesRentOrderList/nav.png'" />
						<text class="font_9 text_5 mt-11">提货地址</text>
					</view>
				</view>
				<view class="flex-row justify-between items-baseline group view_2">
					<text class="font_6 text_7">租赁天数</text>
					<text class="font_11 text_8">X{{ item.rentDays }}</text>
				</view>
				<view class="flex-row justify-end items-baseline group_5">
					<text class="font_9 text_9">实付款：</text>
					<text class="font_12">￥{{ item.totalAmount.toFixed(2) }}</text>
				</view>
				
				
				<view class="flex-row justify-center group_6">
					
					
					<view  v-if="item.operationList[0]" style="background-color: #fff;" class="ml-10 flex-col justify-start items-center text-wrapper_2">
						<text class="font_14 text_11"></text>
					</view>
					
					<view  v-if="item.operationList[1]" style="background-color: #fff;" class="ml-10 flex-col justify-start items-center text-wrapper_2">
						<text class="font_14 text_11"></text>
					</view>
					
					<view @click.stop>						
						<button  v-if="item.operationList[2]" class="flex-col justify-start items-center text-wrapper" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">
							<text class="font_13 text_10">联系客服</text>
						</button>
					</view>
					
					<view  v-if="item.operationList[3]" class="ml-10 flex-col justify-start items-center text-wrapper" @click.stop="gotoCancelOrder(item.id)">
						<text class="font_13">取消订单</text>
					</view>
					
					<view  v-if="item.operationList[4]" class="ml-10 flex-col justify-start items-center text-wrapper_2" @click.stop="wxPay(item.id)">
						<text class="font_14 text_11">去付款</text>
					</view>
					
					<view  v-if="item.operationList[5]" class="ml-10 flex-col justify-start items-center text-wrapper" @click.stop="gotoDeleteOrder(item.id)">
						<text class="font_13">删除订单</text>
					</view>
					
				</view>
			</view>
		</view>
	</view>
	
	<!-- 遮罩层 -->
	    <view v-if="isShow" class="overlay"></view>
</template>

<script setup>
	import { onMounted, onUnmounted, ref, onBeforeUnmount } from 'vue'
	import { clothesRentUrl } from '../../../common/globalImagesUrl';
	import { baseUrl } from '../../../api/request';
	import { publicPath,bkgPubilcPath } from '../../../common/globalImagesUrl';
	import emitter from '../../../utils/emitter';
	import { onPullDownRefresh } from '@dcloudio/uni-app';
	import { getFonts } from '../../../common/globalFont';
	import { onLoad } from "@dcloudio/uni-app";
	const items = ref([null, null, null, null])
	const isShowUnderLine = ref([true, false, false, false, false])
	let orderStatusList = ['全部', '待支付', '待发货', '待收货', '交易成功']
	const color = ref(new Array(5).fill('#323232'))
	const point = ref(0)
	const cookie = wx.getStorageSync("cookie") //请求头
	const orderList = ref([])
	const tempOrderList = ref([])
	
	let wxPayTimer = null;
	let loading = false;
	let isLoading = ref(false)
	let isShow = ref(false)
	

	const flushClothesOrderListHandler = () => {
		getRentOrderList()
	}
	
	onLoad(()=>{
		getFonts()
	})
	
	onMounted(() => {
		color.value[0] = '#e79ea1'
		getRentOrderList()
		emitter.on('flushClothesOrderList', flushClothesOrderListHandler)
	})
	
	
	onUnmounted(() => {
		emitter.off('flushClothesOrderList', flushClothesOrderListHandler)
	})
	
	onPullDownRefresh( async ()=>{  //下拉刷新
		color.value[0] = '#e79ea1'
		getRentOrderList()
		emitter.on('flushOrderList', flushOrderListHandler)
		setTimeout(()=>{
			uni.stopPullDownRefresh()   //停止下拉刷新
		},1000)
	}) 
	
	

	const getRentOrderList = async () => {
		orderList.value.forEach(order => {
		   if (order.countdownInterval) {
			  clearInterval(order.countdownInterval); // 清除定时器
			}
		})
		const res = await uni.request({
			url: baseUrl + '/clothesRent/list/my',
			method: 'POST',
			header: {
				'cookie': cookie
			}
		})
		orderList.value = res.data.data 
		tempOrderList.value = res.data.data
		dealTimeout()
		orderList.value.forEach(order => {
			startCountdown(order)
		});
	}

	const isSelectedState = async (val) => {
		if (point.value === val) return
		point.value = val
		for (var i = 0; i < 5; i++) {
			if (i === val) {
				isShowUnderLine.value[i] = true
				color.value[i] = '#e79ea1'
			} else {
				isShowUnderLine.value[i] = false
				color.value[i] = '#323232'
			}
		}
		if (point.value !== 0) {
			orderList.value = tempOrderList.value.filter(item => item.orderStatus === orderStatusList[point.value])
		} else {
			orderList.value = tempOrderList.value
		}
	}
	
	
	
	
	const gotoCancelOrder = (val) => {
		uni.showModal({
			title: '提示',
			content: '您确定要取消订单吗？',
			success: async (res) => {
				if (res.confirm) {
					await cancelRentOrder(val)
					await getRentOrderList()
				}
			}
		})
	}
	
	
	const cancelRentOrder = async (val) => {
		const res = await uni.request({
			url: baseUrl + '/clothesRent/cancel/id',
			method: 'POST',
			header: {
				cookie
			},
			data: {
				id: val
			}
		})
		console.log(res.data.data)
	}
	
	
	
	const gotoDeleteOrder = (val) => {
		uni.showModal({
			title: '提示',
			content: '您确定要删除订单吗？',
			success: async (res) => {
				if (res.confirm) {
					await deleteOrder(val)
					await getRentOrderList() 
				}
			}
		})
	}
	
	
	const deleteOrder = async (val) => {
		const res = await uni.request({
			url: baseUrl + '/clothesRent/delete',
			method: 'POST',
			header: {
				cookie
			},
			data: {
				id: val
			}
		})
		console.log('=================================>', res.data.data)
	}
	



	const dealTimeout = () => {
		for (var i = 0; i < orderList.value.length; i ++ ) {
			let order = orderList.value[i]
			if (order.orderStatus === '待支付') {
				orderList.value[i].operationList = [false, false, true, true, true, false]
			} else if (order.orderStatus === '待发货') {
				orderList.value[i].operationList = [true, true, true, false, false, false]
			} else if (order.orderStatus === '待收货') {
				orderList.value[i].operationList = [true, true, true, false, false, false]
			} else if (order.orderStatus === '已退款') {
				orderList.value[i].operationList = [true, true, true, false, false, false]
			} else if (order.orderStatus === '交易关闭') {
				orderList.value[i].operationList = [true, true, false, false, false, true]
			} else if (order.orderStatus === '交易成功') {
				orderList.value[i].operationList = [true, false, false, false, false, false]
			}
		}
	}
	
	
	// 启动每个订单的倒计时（仅对待支付订单有效）
	    const startCountdown = (order) => {
		  
	      if (order.orderStatus === '待支付') {
	        order.endTime = add30Minutes(order.createTime); // 设置最终取消时间
			
	        order.countdownInterval = setInterval(() => {
	          const now = Math.floor(Date.now() / 1000); // 获取当前时间的时间戳（秒）
	          const remainingTime = order.endTime - now;		  
	          if (remainingTime <= 0) {
	            order.countdown = '00:00';
	            clearInterval(order.countdownInterval); // 清除定时器
				order.orderStatus = '交易关闭'
				dealTimeout()
				uni.showModal({
					title: '提示',
					content: '订单超时未支付，已取消',
					showCancel: false
				})
	          } else {
	            const minutes = Math.floor(remainingTime / 60); // 计算剩余分钟
	            const seconds = remainingTime % 60; // 计算剩余秒数
	            order.countdown = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
	          }
	        }, 1000);
	      }
		  
		  
		  
		  
		  
		   // 如果是租赁中订单
		    if (order.orderStatus === '待收货') {
		      order.endTime = addRentalTime(order.pickupTime); // 设置租赁结束时间
		      
		      order.countdownInterval = setInterval(() => {
		        const now = Math.floor(Date.now() / 1000); // 获取当前时间的时间戳（秒）
		        const remainingTime = order.endTime - now;
		  
		        if (remainingTime <= 0) {
		          order.countdown = '00天00:00:00';
		          clearInterval(order.countdownInterval); // 清除定时器
		          order.orderStatus = '交易成功'; // 修改为交易成功
		          uni.showModal({
		            title: '提示',
		            content: '租赁时间已结束，订单完成',
		            showCancel: false
		          });
		        } else {
		          const days = Math.floor(remainingTime / (24 * 3600)); // 计算剩余天数
		          const hours = Math.floor((remainingTime % (24 * 3600)) / 3600); // 剩余小时
		          const minutes = Math.floor((remainingTime % 3600) / 60); // 剩余分钟
		          const seconds = remainingTime % 60; // 剩余秒数
		  
		          // 如果天数小于10，补零；大于等于10则不补零
		          const daysFormatted = days < 10 ? `0${days}` : `${days}`;
		  
		          order.countdown = `${daysFormatted}天${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
		        }
		      }, 1000);
		    }
		  
		  
		  
	    };
	
	
	// 时间格式化函数，处理后端返回的时间
	    const parseDate = (dateString) => {
	      const [date, time] = dateString.split(' ');
	      const [year, month, day] = date.split('-').map(Number);
	      const [hour, minute, second] = time.split(':').map(Number);
	      return new Date(year, month - 1, day, hour, minute, second); // JavaScript Date的月份是从0开始的
	    };
	
	    // 给订单创建时间加上30分钟
	    const add30Minutes = (createdTime) => {
	      const date = parseDate(createdTime);
	      date.setMinutes(date.getMinutes() + 1); // 加上30分钟
	      return Math.floor(date.getTime() / 1000); // 返回时间戳（秒）
	    };
		
		// 给订单创建时间加上租赁时长
		const addRentalTime = (createdTime) => {
		  const date = parseDate(createdTime);
		  date.setHours(date.getHours() + 24); // 假设租赁时间为24小时，可以根据需求修改
		  return Math.floor(date.getTime() / 1000); // 返回时间戳（秒）
		};
		
	    // 在组件卸载时清除所有定时器，避免内存泄漏
	    onBeforeUnmount(() => {
			orderList.value.forEach(order => {
			   if (order.countdownInterval) {
				  clearInterval(order.countdownInterval); // 清除定时器
				}
			})
	    });
	
	


	const wxPayFd = (oid) => {  //微信支付按钮防抖
		clearTimeout(wxPayTimer)
		showLoading()  
		isShow.value = true  //打开遮罩
		wxPayTimer = setTimeout(async () => {
			await wxPay(oid)
		}, 1000)
		setTimeout(()=>{
			hideLoading()
			isShow.value = false  //关闭遮罩
		},2000)
	}
	
	function showLoading() {  //加载弹窗
	  if (!loading) {
	    wx.showLoading({
	      title: '加载中...',
	    });
	    loading = true;
		isLoading.value = true
	  }
	}
	
	function hideLoading() {  //关闭弹窗
	  if (loading) {
	    wx.hideLoading();
	    loading = false;
		isLoading.value = false
	  }
	}
	
	
	const wxPay = async( oid )=> {  //传入订单id
		showLoading()
		isShow.value = true
		try {
			const res = await uni.request({
				url: baseUrl + '/wechat/payment/clothesRent/create',
				method: 'POST',
				header: {
					'cookie': wx.getStorageSync("cookie")
				},
				data: { id: oid }
			})
			const paymentData = res.data.data
			wx.requestPayment({
				appid: paymentData.appId,
				nonceStr: paymentData.nonceStr,
				package: paymentData.packageVal,
				paySign: paymentData.paySign,
				timeStamp: paymentData.timeStamp,
				signType: paymentData.signType,
				success(res) {
					uni.showModal({
						content: '支付成功',
						showCancel: false
					})
				},
				fail(e) {
					
				},
				complete() {
					uni.redirectTo({
						url: '/pages/clothesRent/clothesRentOrderDetail/clothesRentOrderDetail?id=' + oid
					})
				}
			})
		}catch(error) {
			console.error('支付请求失败');
			uni.showModal({
				content: '支付请求失败,请重试。',
				showCancel: false
			})
		}
	}
	
	
	const gotoDetailPage = (val) => {
		uni.navigateTo({
			url: '/pages/clothesRent/clothesRentOrderDetail/clothesRentOrderDetail?id=' + val
		})
	}


	const nav = () => { //导航
		wx.openLocation({
			latitude: 45.867741,
			longitude: 126.560037,
			name: '哈尔滨师范大学(松北校区)',
			address: '黑龙江省哈尔滨市呼兰区利民经济开发区师大路1号',
			success: (res) => {
				console.log(res)
			}
		})
	}
</script>

<style scoped lang="scss">
	.overlay {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(0, 0, 0, 0.4);  /* 半透明黑色背景 */
	  z-index: 999;
	}
	button{padding: 0;margin: 0;}
	button::after{ border: none; }
	.mt-15 {
		margin-top: 28.13rpx;
	}

	.ml-13 {
		margin-left: 24.38rpx;
	}

	.mt-59 {
		margin-top: 110.63rpx;
	}

	.mt-11 {
		margin-top: 20.63rpx;
	}

	.page {
		background-color: #ffffff;
		overflow: hidden;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
	}

	.section_2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 41.25rpx 0;
		background-color: #ebe7e4;
	}

	.pos {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9;
	}

	.font {
		font-size: 30rpx;
		font-family: FangZhengFonts;
		line-height: 28.24rpx;
		color: #323232;
	}

	.font_2 {
		font-size: 30rpx;
		font-family: FangZhengFonts;
		line-height: 28.84rpx;
		color: #323232;
	}

	.text {
		line-height: 27.43rpx;
	}

	.pos_2 {
		position: absolute;
		left: 22.5rpx;
		right: 24.38rpx;
		top: 108.75rpx;
		padding-bottom: 40rpx;
	}

	.list-item {
		padding: 22.5rpx 22.5rpx 0;
		background-color: #ffffff;
		border-radius: 18.75rpx;
	}

	.list-item:first-child {
		margin-top: 0;
	}

	.group {
		padding: 0 11.25rpx;
	}

	.font_3 {
		font-size: 30rpx;
		font-family: FangZhengFonts;
		line-height: 28.01rpx;
		color: #323232;
	}

	.font_4 {
		font-size: 26.25rpx;
		font-family: FangZhengFonts;
		line-height: 18.79rpx;
		color: #ffaaa5;
	}

	.text_2 {
		font-size: 28.13rpx;
	}

	.font_5 {
		font-size: 26.25rpx;
		font-family: FangZhengFonts;
		line-height: 25.84rpx;
		color: #ffaaa5;
	}

	.text_3 {
		line-height: 25.74rpx;
	}

	.view {
		margin-top: 18.75rpx;
	}

	.font_6 {
		font-size: 26.25rpx;
		font-family: FangZhengFonts;
		line-height: 25.84rpx;
		color: #818181;
	}

	.font_7 {
		font-size: 26.25rpx;
		font-family: FangZhengFonts;
		line-height: 18.79rpx;
		color: #818181;
	}

	.text_4 {
		line-height: 17.53rpx;
	}

	.divider {
		margin-top: 18.75rpx;
		background-color: #dbdbdb;
		height: 1.88rpx;
	}

	.group_2 {
		margin-top: 26.25rpx;
		padding: 0 9.38rpx;
		position: relative;
	}

	.image {
		border-radius: 9.38rpx;
		width: 148.13rpx;
		height: 165rpx;
	}

	.group_3 {
		margin-bottom: 3.75rpx;
	}

	.font_8 {
		font-size: 30rpx;
		font-family: FangZhengFonts;
		line-height: 29.18rpx;
		color: #323232;
	}

	.font_10 {
		font-size: 30rpx;
		font-family: FangZhengFonts;
		line-height: 18.79rpx;
		color: #323232;
	}

	.text_6 {
		margin-left: 7.5rpx;
		line-height: 20.04rpx;
	}

	.group_4 {
		position: absolute;
		top: 0;
		right: 0rpx;
	}

	.image_2 {
		width: 46.88rpx;
		height: 46.88rpx;
	}

	.font_9 {
		font-size: 26.25rpx;
		font-family: FangZhengFonts;
		line-height: 25.84rpx;
		color: #323232;
	}

	.text_5 {
		line-height: 25.22rpx;
	}

	.view_2 {
		margin-top: 22.5rpx;
	}

	.text_7 {
		font-size: 28.13rpx;
		line-height: 27.02rpx;
	}

	.font_11 {
		font-size: 26.25rpx;
		font-family: FangZhengFonts;
		line-height: 18.79rpx;
		color: #323232;
	}

	.text_8 {
		font-size: 28.13rpx;
	}

	.group_5 {
		margin-top: 30rpx;
	}

	.text_9 {
		font-size: 28.13rpx;
		line-height: 26.7rpx;
	}

	.font_12 {
		font-size: 33.75rpx;
		font-family: FangZhengFonts;
		line-height: 22.54rpx;
		color: #c35c5d;
	}

	.group_6 {
		margin-top: 30rpx;
		padding: 26.25rpx 0rpx 26.25rpx 160rpx;
		border-top: solid 1.88rpx #dbdbdb;
	}

	.font_13 {
		font-size: 26.25rpx;
		font-family: FangZhengFonts;
		line-height: 25.84rpx;
		color: #e79ea1;
	}

	.text_10 {
		line-height: 25.54rpx;
	}

	.text-wrapper {
		padding: 15rpx 0;
		background-color: #ffffff;
		border-radius: 75rpx;
		width: 153.75rpx;
		height: 56.25rpx;
		border-left: solid 1.88rpx #e79ea1;
		border-right: solid 1.88rpx #e79ea1;
		border-top: solid 1.88rpx #e79ea1;
		border-bottom: solid 1.88rpx #e79ea1;
	}

	.text-wrapper_2 {
		padding: 15rpx 0;
		background-color: #e79ea1;
		border-radius: 75rpx;
		width: 153.75rpx;
		height: 56.25rpx;
	}

	.font_14 {
		font-size: 26.25rpx;
		font-family: FangZhengFonts;
		line-height: 25.84rpx;
		color: #ffffff;
	}

	.text_11 {
		line-height: 24rpx;
	}

	@import url(../../../common/css/global.css);
</style>