From 06035ae3803619a48532f86c50d5523b3cb5e1c6 Mon Sep 17 00:00:00 2001
From: chen-xin-zhi <3588068430@qq.com>
Date: Sun, 23 Mar 2025 18:31:11 +0800
Subject: [PATCH] this is lastest update

---
 pages/book/component/customerService.vue      |  40 ++
 .../myPhotoProductDetail.vue                  |  20 +
 .../photoProductsOrder/photoProductsOrder.vue |   7 +-
 .../clotherRentOrderList.vue                  | 392 ++++++++++++++++--
 .../clothesRentSubmitOrder.vue                | 295 ++++++++++++-
 .../component/clothesAttribute.vue            |  12 +-
 pages/my-order/myOrderList/myOrderList.vue    |   3 +-
 pages/testPage/testPage.vue                   |   7 +-
 8 files changed, 727 insertions(+), 49 deletions(-)
 create mode 100644 pages/book/component/customerService.vue

diff --git a/pages/book/component/customerService.vue b/pages/book/component/customerService.vue
new file mode 100644
index 0000000..765b768
--- /dev/null
+++ b/pages/book/component/customerService.vue
@@ -0,0 +1,40 @@
+<template>
+	<view class="flex-row items-center">
+	  <image
+	    class="shrink-0 image_2"
+	    :src="bookUrl + '/component/lxkf.png'"
+	  />
+	  <text class="font_2 text_3">在线咨询</text>
+	  <image
+	    class="shrink-0 image_3"
+	    :src="bookUrl + '/component/yjt.png'"
+	  />
+	</view>
+</template>
+
+<script setup>
+	import { bookUrl } from '../../../common/globalImagesUrl';
+	
+</script>
+
+<style scoped lang="scss">
+	.image_2 {
+	  width: 45rpx;
+	  height: 45rpx;
+	}
+	.font_2 {
+	  font-size: 30rpx;
+	  font-family: FZSongKeBenXiuKaiS-R-GB;
+	  line-height: 28.84rpx;
+	}
+	.text_3 {
+	  color: #323232;
+	  line-height: 28.13rpx;
+	}
+	.image_3 {
+	  margin-left: 3.75rpx;
+	  width: 31.88rpx;
+	  height: 31.88rpx;
+	}
+	@import url(../../../common/css/global.css);
+</style>
\ No newline at end of file
diff --git a/pages/book/myPhotoProductDetail/myPhotoProductDetail.vue b/pages/book/myPhotoProductDetail/myPhotoProductDetail.vue
index 5ee0c72..995e695 100644
--- a/pages/book/myPhotoProductDetail/myPhotoProductDetail.vue
+++ b/pages/book/myPhotoProductDetail/myPhotoProductDetail.vue
@@ -7,6 +7,9 @@
 	  <view class="flex-col items-start section_2 pos_2">
 	    <text class="font text">{{ obj.name }}</text>
 	    <text class="mt-20 font text_2">￥{{ obj.price.toFixed(2) }}{{ isShow ? '起' : '/天' }}</text>
+		<button class="customer" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">
+			<customerServiceVue></customerServiceVue>
+		</button>
 	  </view>
 	  <view class="section_3 pos_3">
 		  <rich-text :nodes="obj.richText"></rich-text>
@@ -41,6 +44,7 @@
 	import clothesAttributePlusVue from '../../clothesRent/component/clothesAttributePlus.vue';
 	import emitter from '../../../utils/emitter';
 	import { getFonts } from '../../../common/globalFont';
+	import customerServiceVue from '../component/customerService.vue';
 
 	const book = ref(null)
 	const rent = ref(null)
@@ -145,6 +149,22 @@
 
 <style scoped lang="scss">
 	
+button {
+	padding: 0;
+	margin: 0;
+	background-color: #fff;
+}
+button::after{
+	border: none; 
+}
+.customer {
+	position: absolute;
+	right: 52.5rpx;
+	bottom: 45rpx;
+	display: flex;
+	align-items: center;
+	height: 60rpx;
+}
 .rent {
 	justify-content: center;
 	background-color: #fff;
diff --git a/pages/book/photoProductsOrder/photoProductsOrder.vue b/pages/book/photoProductsOrder/photoProductsOrder.vue
index 6bc733f..c21358a 100644
--- a/pages/book/photoProductsOrder/photoProductsOrder.vue
+++ b/pages/book/photoProductsOrder/photoProductsOrder.vue
@@ -116,8 +116,8 @@
 	import { bookUrl } from '../../../common/globalImagesUrl';
 	import { getFonts } from '../../../common/globalFont';
 	import { publicPath } from '../../../common/globalImagesUrl';
-import { JudgeIsNullity } from '../../../common/globalFunction';
-import { columnTransformDependencies } from 'mathjs';
+	import { JudgeIsNullity } from '../../../common/globalFunction';
+	import { columnTransformDependencies } from 'mathjs';
 	
 	
 	const cookie = wx.getStorageSync("cookie")  //请求头
@@ -189,7 +189,7 @@ import { columnTransformDependencies } from 'mathjs';
 		}	
 		if (JudgeIsNullity(bookingTime.value) || bookingTime.value === '请选择' || JudgeIsNullity(bookingTimeId) || bookingTimeId.value === 0) {
 			uni.showToast({
-				title: '请填写预约时间',
+				title: '请选择预约时间',
 				icon: 'error'
 			})
 			return ;
@@ -274,6 +274,7 @@ import { columnTransformDependencies } from 'mathjs';
 	onMounted(() => {
 		getDefaultContact()
 		getPhotoProductsById()
+		
 		emitter.on('closeBookingTips', closeBookingTipsHandler)
 		
 		emitter.on('close', closeHandler)
diff --git a/pages/clothesRent/clotherRentOrderList/clotherRentOrderList.vue b/pages/clothesRent/clotherRentOrderList/clotherRentOrderList.vue
index 0d11008..22abb14 100644
--- a/pages/clothesRent/clotherRentOrderList/clotherRentOrderList.vue
+++ b/pages/clothesRent/clotherRentOrderList/clotherRentOrderList.vue
@@ -36,73 +36,138 @@
 
 
 		<view class="flex-col pos_2">
-			<view class="flex-col list-item mt-15" v-for="(item, index) in items" :key="index">
+			<view class="flex-col list-item mt-15" v-for="(item, index) in orderList" :key="index">
 				<view class="flex-row justify-between group">
 					<text class="font_3">泠珑水月阁</text>
 					<view class="flex-row items-center">
-						<text class="font_4 text_2">00:45</text>
-						<text class="ml-4 font_5 text_3">等待买家付款</text>
+						<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">E20241005095840091406189</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"
-							src="https://ide.code.fun/api/image?token=67dd57af4ae84d00122a84d1&name=4e1283e4d0bf9a8e9fe23602be4fa0f7.png" />
+						<image class="image" mode="aspectFill"
+						 :src="publicPath + item.clothesSnapshot.image"/>
 						<view class="flex-col items-start group_3 ml-13">
-							<text class="font_8">汉服—曲裾系列</text>
-							<text class="font_10 text_6 mt-59">￥138.00</text>
+							<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">
-						<image class="image_2" :src="clothesRentUrl + '/clothesRentOrderList/bkg.png'" />
+					<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">X3</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">￥138.00</text>
+					<text class="font_12">￥{{ item.totalAmount.toFixed(2) }}</text>
 				</view>
+				
+				
 				<view class="flex-row justify-center group_6">
-					<view class="flex-col justify-start items-center text-wrapper">
-						<text class="font_13 text_10">联系客服</text>
+					
+					
+					<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 class="ml-10 flex-col justify-start items-center text-wrapper">
+					
+					<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 class="ml-10 flex-col justify-start items-center text-wrapper_2">
+					
+					<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, ref } from 'vue'
+	import { onMounted, onUnmounted, ref, onBeforeUnmount } from 'vue'
 	import { clothesRentUrl } from '../../../common/globalImagesUrl';
 	import { baseUrl } from '../../../api/request';
+	import { publicPath } from '../../../common/globalImagesUrl';
+	import emitter from '../../../utils/emitter';
+	import { onPullDownRefresh } 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 bkgUrl = ref(clothesRentUrl + '/clothesRentOrderList/bkg.png')
+	const orderList = ref([])
+	
+	let wxPayTimer = null;
+	let loading = false;
+	let isLoading = ref(false)
+	let isShow = ref(false)
+
+
+	const flushClothesOrderListHandler = () => {
+		getRentOrderList()
+	}
 
 	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',
@@ -110,11 +175,14 @@
 				'cookie': cookie
 			}
 		})
-		console.log('订单列表--->', res.data);
+		orderList.value = res.data.data 
+		dealTimeout()
+		orderList.value.forEach(order => {
+			startCountdown(order)
+		});
 	}
 
 	const isSelectedState = async (val) => {
-		console.log('val--->',val);
 		if (point.value === val) return
 		point.value = val
 		for (var i = 0; i < 5; i++) {
@@ -126,12 +194,273 @@
 				color.value[i] = '#323232'
 			}
 		}
-		// if()
-		// await getMyOrder()
-		// if (point.value !== 0) {
-		// 	orderList.value = orderList.value.filter(item => item.orderStatus === orderStatusList[point.value])
-		// } 
+		await getRentOrderList()
+		if (point.value !== 0) {
+			orderList.value = orderList.value.filter(item => item.orderStatus === orderStatusList[point.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 nav = () => { //导航
@@ -148,6 +477,17 @@
 </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;
 	}
@@ -218,7 +558,7 @@
 	}
 
 	.list-item {
-		padding: 18.75rpx 15rpx 0;
+		padding: 22.5rpx 22.5rpx 0;
 		background-color: #ffffff;
 		border-radius: 18.75rpx;
 	}
@@ -383,7 +723,7 @@
 
 	.group_6 {
 		margin-top: 30rpx;
-		padding: 26.25rpx 0rpx 26.25rpx 180rpx;
+		padding: 26.25rpx 0rpx 26.25rpx 160rpx;
 		border-top: solid 1.88rpx #dbdbdb;
 	}
 
diff --git a/pages/clothesRent/clothesRentSubmitOrder/clothesRentSubmitOrder.vue b/pages/clothesRent/clothesRentSubmitOrder/clothesRentSubmitOrder.vue
index d8fd77c..7dcc7a3 100644
--- a/pages/clothesRent/clothesRentSubmitOrder/clothesRentSubmitOrder.vue
+++ b/pages/clothesRent/clothesRentSubmitOrder/clothesRentSubmitOrder.vue
@@ -1,18 +1,18 @@
 <template>
 	<view class="flex-col justify-start relative page" :style="{ backgroundImage: 'url(' + bkgUrl + ')'}">
-	  <view class="flex-row justify-between items-center section_2 pos">
+	  <view class="flex-row justify-between items-center section_2 pos" @click="openPopup">
 	    <view class="flex-row items-center">
 	      <image
 	        class="shrink-0 image"
-	        :src="clothesRentUrl + '/clotesRentSubmitOrder/dzf.png'"
+	        :src="clothesRentUrl + '/clothesRentSubmitOrder/lxr.png'"
 	      />
-	      <text class="ml-10 font text">张三 15888610253</text>
+	      <text class="ml-10 font text">{{ contactInfo.name }} {{ contactInfo.phone }}</text>
 	    </view>
 	    <view class="flex-row">
 	      <text class="font_2 text_2">更换联系人</text>
 	      <image
 	        class="ml-2 shrink-0 image_2"
-	        :src="clothesRentUrl + '/clotesRentSubmitOrder/yjt.png'"
+	        :src="clothesRentUrl + '/clothesRentSubmitOrder/yjt.png'"
 	      />
 	    </view>
 	  </view>
@@ -21,47 +21,312 @@
 	      <view class="flex-row">
 	        <image
 	          class="image_3"
-	          src="https://ide.code.fun/api/image?token=67dd57af4ae84d00122a84d1&name=9e6e4f59936d62d5d7cfd08e1612a1d7.png"
+	          :src="publicPath + clothesInfo.image"
 	        />
 	        <view class="flex-col items-start group_2 ml-15">
-	          <text class="font text_3">汉服—曲裾系列</text>
-	          <text class="mt-64 font_3">￥129.00</text>
+	          <text class="font text_3">{{ clothesInfo.name }}</text>
+	          <text class="mt-64 font_3">￥{{ clothesInfo.price.toFixed(2) }}</text>
 	        </view>
 	      </view>
-	      <view class="flex-col items-center self-start group">
+	      <view class="flex-col items-center self-start group" @click="nav">
 	        <image
 	          class="image_4"
-	          :src="clothesRentUrl + '/clotesRentSubmitOrder/nav.png'"
+	          :src="clothesRentUrl + '/clothesRentSubmitOrder/nav.png'"
 	        />
 	        <text class="font_2 text_4 mt-11">提货地址</text>
 	      </view>
 	    </view>
 	    <view class="flex-row justify-between items-baseline group_3">
 	      <text class="font">租赁天数</text>
-	      <text class="font_3 text_5">X3</text>
+	      <text class="font_3 text_5">X{{ period }}</text>
 	    </view>
 	    <view class="flex-row justify-between items-baseline group_4">
 	      <text class="font text_6">总计</text>
-	      <text class="text_7">￥129.00</text>
+	      <text class="text_7">￥{{ totalAmount.toFixed(2) }}</text>
 	    </view>
 	  </view>
 	  <view class="flex-row justify-between items-center section_4 pos_3">
 	    <view class="flex-row items-baseline">
 	      <text class="font_4 text_8">定金：</text>
-	      <text class="font_4 text_9">￥129.00</text>
+	      <text class="font_4 text_9">￥{{ totalAmount.toFixed(2) }}</text>
 	    </view>
-	    <view class="flex-col justify-start items-center text-wrapper"><text class="font text_10">确定</text></view>
+	    <view class="flex-col justify-start items-center text-wrapper" @click="wxPayFd">
+			<text class="font text_10">确定</text>
+		</view>
 	  </view>
 	</view>
+	
+	<uni-popup ref="popup" background-color="#fff">
+		<view class="popup-content">
+			<contactsComponentVue></contactsComponentVue>
+		</view>
+	</uni-popup>
+	
+	<!-- 遮罩层 -->
+	    <view v-if="isShow" class="overlay"></view>
+	
 </template>
 
 <script setup>
-	import {ref} from 'vue'
+	import {nextTick, onMounted, onUnmounted, ref} from 'vue'
 	import { clothesRentUrl } from '../../../common/globalImagesUrl';
+	import { onLoad } from "@dcloudio/uni-app";
+	import { baseUrl } from '../../../api/request';
+	import { publicPath } from '../../../common/globalImagesUrl';
+	import emitter from '../../../utils/emitter';
+	import { JudgeIsNullity, dealResult } from '../../../common/globalFunction';
+	import contactsComponentVue from '../../order/component/contactsComponent.vue';
 	const bkgUrl = ref(clothesRentUrl + '/clothesRentSubmitOrder/bkg.png')
+	const period = ref(0)
+	let id = 0
+	const clothesInfo = ref({})
+	const contactInfo = ref({})
+	const totalAmount = ref(0)
+	const cookie = wx.getStorageSync('cookie')
+	const popup = ref(null)
+	
+	//防抖相关变量
+	let wxPayTimer = null;
+	let loading = false;
+	let isLoading = ref(false)
+	let isShow = ref(false)
+	
+	
+	const openPopup = () => {
+		popup.value.open('bottom')
+	}
+	
+	const closeHandler = () => {
+		nextTick(() => {
+			if (popup.value) {
+				popup.value.close()
+			}
+		})
+	}
+	
+	const contactsNowInfoHandler = (val) => {
+		contactInfo.value = val
+	}
+	
+	const delContactByIdHandler = (val) => {
+		if (contactInfo.value.id === val) {
+			contactInfo.value = {}
+			contactInfo.value.name = '请选择联系人'
+		}
+	}
+	
+	const updateContactObjHandler = (val) => {
+		if (contactInfo.value.id === val.id) {
+			contactInfo.value = val
+		}
+	}
+	
+	
+	onLoad((options) => {
+		id = JSON.parse(options.id)
+		period.value = JSON.parse(options.period)
+	})
+	
+	onMounted(() => {
+		getClothesInfoById()
+		getDefaultContact()
+		
+		emitter.on('close', closeHandler)
+		
+		emitter.on('contactsNowInfo', contactsNowInfoHandler)
+		
+		emitter.on('delContactById', delContactByIdHandler)
+		
+		emitter.on('updateContactObj', updateContactObjHandler)
+	})
+	
+	onUnmounted(() => {
+		
+		emitter.off('close', closeHandler)
+		
+		emitter.off('contactsNowInfo', contactsNowInfoHandler)
+		
+		emitter.off('delContactById', delContactByIdHandler)
+		
+		emitter.off('updateContactObj', updateContactObjHandler)
+	})
+	
+	const getClothesInfoById = async () => {
+		const res = await uni.request({
+			url: baseUrl + '/clothes/get/label/id',
+			method: 'POST',
+			header: {
+				cookie
+			},
+			data: {
+				id
+			}
+		})
+		clothesInfo.value = res.data.data
+		let singlePrice = clothesInfo.value.price
+		totalAmount.value = singlePrice * period.value
+	}
+	
+	
+	const nav = () => {
+		wx.openLocation({
+			latitude: 45.867741,
+			longitude: 126.560037,
+			name: '哈尔滨师范大学(松北校区)',
+			address: '黑龙江省哈尔滨市呼兰区利民经济开发区师大路1号',
+			success: (res) => {
+			console.log(res)
+			}
+		})
+	}
+	
+	
+	
+	//获取用户默认联系人
+	const getDefaultContact = async () =>{
+		const res = await uni.request({
+			url: baseUrl + '/contacts/list',
+			method: 'POST',
+			header: {
+				cookie: wx.getStorageSync('cookie')
+			}
+		})
+		if(res.data.code === 1) {
+			console.log('联系人数组---->',res.data.data);
+		}
+		let contactArr = res.data.data
+		for(let key in contactArr) {
+			if(contactArr[key].isDefault === 1) {
+				contactInfo.value = contactArr[key]
+			}
+		}
+		if (JudgeIsNullity(contactInfo.value.name)) {
+			contactInfo.value.name = '请选择联系人'
+		}
+	}
+	
+	
+	const wxPayFd = () => {  //微信支付按钮防抖
+		if (JudgeIsNullity(contactInfo.value.phone) || JudgeIsNullity(contactInfo.value.id)) {
+			uni.showToast({
+				title: '请选择联系人',
+				icon: 'error'
+			})
+			return ;
+		}
+		clearTimeout(wxPayTimer)
+		showLoading()
+		isShow.value = true
+		wxPayTimer = setTimeout(async () => {
+			await createOrder()
+		}, 1000)
+	}
+	function showLoading() {  //加载弹窗
+	  if (!loading) {
+	    wx.showLoading({
+	      title: '加载中...',
+	    });
+	    loading = true;
+		isLoading.value = true
+	  }
+	}
+	function hideLoading() {  //关闭弹窗
+	  if (loading) {
+	    wx.hideLoading();
+	    loading = false;
+		isLoading.value = false
+	  }
+	}
+	
+	
+	
+	const createOrder = async () => {  
+		const res = await uni.request({   
+			url: baseUrl + '/clothesRent/add',
+			method: 'POST',
+			header: {
+				cookie: wx.getStorageSync('cookie')
+			},
+			data: {
+				clothesId: id,
+				contactsId: contactInfo.value.id,
+				rentDays: period.value
+			}
+		})
+		if (!dealResult(res)) {
+			hideLoading()
+			isShow.value = false
+			return 
+		} 
+		wxPay(res.data.data)
+	}
+	
+	
+	const wxPay = async ( oid )=> {  //传入订单id
+		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
+					})
+					console.log('支付成功res--->',res);
+				},
+				fail(e) {
+					uni.showModal({
+						content: '支付失败，原因为:' + e.errMsg,
+						showCancel: false
+					})
+					console.log('e.errMsg--->',e.errMsg);
+				},
+				complete() {
+					uni.redirectTo({
+						url: '/pages/clothesRent/clotherRentOrderList/clotherRentOrderList'
+					})
+				}
+			})
+			
+		}catch(error) {
+			console.error('支付请求失败',error);
+			uni.showModal({
+				content: '支付请求失败,请重试',
+				showCancel: false
+			})
+		}
+	}
+	
+	
+	
 </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;
+}
+.popup-content {
+	height: 800rpx;
+}
 .ml-15 {
   margin-left: 28.13rpx;
 }
@@ -116,7 +381,7 @@
   height: 30rpx;
 }
 .section_3 {
-  padding: 18.75rpx 18.75rpx 41.25rpx 18.75rpx;
+  padding: 25.75rpx 18.75rpx;
   background-color: #ffffff;
   border-radius: 18.75rpx;
 }
diff --git a/pages/clothesRent/component/clothesAttribute.vue b/pages/clothesRent/component/clothesAttribute.vue
index 38255d9..0dbc6eb 100644
--- a/pages/clothesRent/component/clothesAttribute.vue
+++ b/pages/clothesRent/component/clothesAttribute.vue
@@ -43,7 +43,9 @@
 	      <text class="font text_5 pos">定金：</text>
 	      <text class="font text_6 pos_2">￥{{ totalAmount.toFixed(2) }}</text>
 	    </view>
-	    <view class="flex-col justify-start items-center text-wrapper_2"><text class="text_7">确定</text></view>
+	    <view class="flex-col justify-start items-center text-wrapper_2" @click="gotoSubmitOrder">
+			<text class="text_7">确定</text>
+		</view>
 	  </view>
 	</view>
 </template>
@@ -54,6 +56,7 @@
 	import emitter from '../../../utils/emitter';
 	import { publicPath } from '../../../common/globalImagesUrl';
 	import { getFonts } from '../../../common/globalFont';
+	import { baseUrl } from '../../../api/request';
 	const clothesInfo = ref({})
 	const cnt = ref(1)
 	let singleAmount = 0
@@ -81,6 +84,13 @@
 		totalAmount.value = singleAmount * cnt.value
 	}
 	
+	const gotoSubmitOrder = () => {
+		uni.navigateTo({
+			url: '/pages/clothesRent/clothesRentSubmitOrder/clothesRentSubmitOrder?id=' + clothesInfo.value.id + '&period=' + cnt.value
+		})
+	}
+	
+	
 	onMounted(() => {
 		getFonts()
 		emitter.on('getClothesInfo', getClothesInfoHandler)
diff --git a/pages/my-order/myOrderList/myOrderList.vue b/pages/my-order/myOrderList/myOrderList.vue
index 0019309..823e5ba 100644
--- a/pages/my-order/myOrderList/myOrderList.vue
+++ b/pages/my-order/myOrderList/myOrderList.vue
@@ -33,7 +33,7 @@
 			</view>
 			<view @click="isSelectedState(4)">
 				<text class="font_2 text_6" :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><strong></strong>
+				<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>
@@ -138,7 +138,6 @@
 	const point = ref(0)
 	const isShowUnderLine = ref([true, false, false, false, false])
 	let orderStatusList = ['全部', '待支付', '待发货', '待收货', '已退款']
-	const operationList = ref(new Array(5))
 	const cookie = wx.getStorageSync('cookie')
 	const orderList = ref([])
 	const orderNumber = ref('')
diff --git a/pages/testPage/testPage.vue b/pages/testPage/testPage.vue
index f16ade9..9986766 100644
--- a/pages/testPage/testPage.vue
+++ b/pages/testPage/testPage.vue
@@ -1,10 +1,13 @@
 <template>
-	<clothesAttributeVue></clothesAttributeVue>
+	
+	<!-- <clothesAttributeVue></clothesAttributeVue> -->
+	<customerServiceVue></customerServiceVue>
 </template>
 
 <script setup>
 import { onMounted } from 'vue';
-	import clothesAttributeVue from '../clothesRent/component/clothesAttribute.vue';
+	// import clothesAttributeVue from '../clothesRent/component/clothesAttribute.vue';
+	import customerServiceVue from '../book/component/customerService.vue';
 	onMounted(() => {
 		getUrl()
 	})