From 5868e94f4be2b4b17d4be307bae67fe4b23c3ba6 Mon Sep 17 00:00:00 2001
From: chen-xin-zhi <3588068430@qq.com>
Date: Thu, 27 Feb 2025 14:24:27 +0800
Subject: [PATCH] =?UTF-8?q?=E5=86=99=E7=9C=9F=E4=BA=A7=E5=93=81=E5=B7=B2?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/request.ts                                |   2 +-
 pages.json                                    |   7 +
 pages/book/component/bookingSelected.vue      |  10 +-
 pages/book/component/cancelOrder.vue          |  67 +++
 pages/book/component/confirmBookingInfo.vue   |  78 +++
 .../photoProductsOrder/photoProductsOrder.vue | 184 +++++--
 .../photoProductsOrderDetail.vue              | 452 ++++++++++++++++++
 pages/testPage/testPage.vue                   |  10 +-
 8 files changed, 770 insertions(+), 40 deletions(-)
 create mode 100644 pages/book/component/cancelOrder.vue
 create mode 100644 pages/book/component/confirmBookingInfo.vue
 create mode 100644 pages/book/photoProductsOrderDetail/photoProductsOrderDetail.vue

diff --git a/api/request.ts b/api/request.ts
index 7230ec5..800524d 100644
--- a/api/request.ts
+++ b/api/request.ts
@@ -4,4 +4,4 @@ export const suiUrl = 'http://154.8.193.216:9092/api'  //隋宇霏的接口地
 export const domain = 'https://www.carboner.cn/api'
 export  const myIp = 'http://8.130.119.119:9092/api'
 
-export const baseUrl = testUrl
+export const baseUrl = Url
diff --git a/pages.json b/pages.json
index 079a61d..4cf5dca 100644
--- a/pages.json
+++ b/pages.json
@@ -7,6 +7,13 @@
 			"navigationBarTitleText" : ""
 		}
 	},
+	{
+		"path" : "pages/book/photoProductsOrderDetail/photoProductsOrderDetail",
+		"style" : 
+		{
+			"navigationBarTitleText" : ""
+		}
+	},
 	{
 		"path" : "pages/book/photoProductsOrder/photoProductsOrder",
 		"style" : 
diff --git a/pages/book/component/bookingSelected.vue b/pages/book/component/bookingSelected.vue
index 08b8e51..1aa00ea 100644
--- a/pages/book/component/bookingSelected.vue
+++ b/pages/book/component/bookingSelected.vue
@@ -77,7 +77,7 @@
 	      <text class="font text_7">定金：</text>
 	      <text class="font text_8">￥129.00</text>
 	    </view>
-	    <view class="flex-col justify-start items-center text-wrapper_2">
+	    <view @click="jumpToOrder" class="flex-col justify-start items-center text-wrapper_2">
 			<text class="text_9">确定</text></view>
 	  </view>
 	</view>
@@ -128,6 +128,12 @@
 		feeTips.value.open('center')
 	}
 	
+	const jumpToOrder = () => {
+		uni.navigateTo({
+			url: '/pages/book/photoProductsOrder/photoProductsOrder'
+		})
+	}
+	
 </script>
 
 <style scoped lang="scss">
@@ -135,7 +141,7 @@
 	.fee-tips {
 		justify-content: center;
 		background-color: #fff;
-		border-radius: 20rpx;
+		border-radius: 41.1rpx;
 		margin-top: -400rpx;
 		width: 650rpx;
 		height: 900rpx;
diff --git a/pages/book/component/cancelOrder.vue b/pages/book/component/cancelOrder.vue
new file mode 100644
index 0000000..8912d9d
--- /dev/null
+++ b/pages/book/component/cancelOrder.vue
@@ -0,0 +1,67 @@
+<template>
+	<view class="flex-col page">
+	  <text class="self-center text">确认取消该订单？</text>
+	  <view class="flex-row justify-between self-stretch mt-33">
+	    <view class="flex-col justify-start items-center text-wrapper" @click="cancel"><text class="font text_2">取消</text></view>
+	    <view class="flex-col justify-start items-center text-wrapper_2" @click="cancel"><text class="font text_3">确定</text></view>
+	  </view>
+	</view>
+</template>
+
+<script setup lang="ts">
+import emitter from '../../../utils/emitter';
+	const cancel = () => {
+		emitter.emit('closeCancelOrderPopup')
+	}
+</script>
+
+<style scoped lang="scss">
+	.mt-33 {
+	  margin-top: 77.59rpx;
+	}
+	.page {
+	  padding: 65.83rpx 73.45rpx 58.78rpx;
+	  background-color: #ffffff;
+	  border-radius: 25.02rpx;
+	  width: 100%;
+	  overflow-y: auto;
+	  overflow-x: hidden;
+	  height: 100%;
+	}
+	.text {
+	  color: #000000;
+	  font-size: 37.32rpx;
+	  font-family: FZSongKeBenXiuKaiS-R-GB;
+	  line-height: 41.66rpx;
+	}
+	.text-wrapper {
+	  padding: 23.51rpx 0;
+	  background-color: #d9d9d9;
+	  border-radius: 47.02rpx;
+	  width: 216.3rpx;
+	  height: 84.64rpx;
+	  margin-right: 20rpx;
+	}
+	.font {
+	  font-size: 37.62rpx;
+	  font-family: FZSongKeBenXiuKaiS-R-GB;
+	  line-height: 35.41rpx;
+	}
+	.text_2 {
+	  color: #000000;
+	  font-size: 30rpx;
+	}
+	.text-wrapper_2 {
+	  padding: 23.51rpx 0;
+	  background-color: #ffb6b9;
+	  border-radius: 47.02rpx;
+	  width: 216.3rpx;
+	  height: 84.64rpx;
+	  margin-left: 20rpx;
+	}
+	.text_3 {
+	  color: #ffffff;
+	  font-size: 30rpx;
+	}
+	@import url(../../../common/css/global.css);
+</style>
\ No newline at end of file
diff --git a/pages/book/component/confirmBookingInfo.vue b/pages/book/component/confirmBookingInfo.vue
new file mode 100644
index 0000000..5469034
--- /dev/null
+++ b/pages/book/component/confirmBookingInfo.vue
@@ -0,0 +1,78 @@
+<template>
+	<view class="flex-col page">
+	  <text class="self-center text">请确认您的预约信息</text>
+	  <text class="self-start font text_2">写真产品：汉服—曲裾系列</text>
+	  <text class="self-start font text_3">拍摄时间：2025-05-01 16:00</text>
+	  <text class="self-start font text_4">拍摄人数：3人</text>
+	  <text class="self-start font text_5">拍摄场地：室外</text>
+	  <view @click="closeConfirmBookingPopup" class="flex-col justify-start items-center self-stretch text-wrapper">
+	    <text class="font text_6">确定</text>
+	  </view>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import emitter from '../../../utils/emitter';
+	
+
+	
+	onMounted(() => {
+		
+	})
+
+	const closeConfirmBookingPopup = () => {
+		emitter.emit('closeConfirmBookingInfo')
+	}
+</script>
+
+<style scoped lang="scss">
+	
+	.page {
+	  padding: 56.46rpx 59.18rpx;
+	  background-color: #ffffff;
+	  border-radius: 41.2rpx;
+	  box-shadow: 0rpx 9.49rpx 9.49rpx #00000061;
+	  width: 100%;
+	  overflow-y: auto;
+	  overflow-x: hidden;
+	  height: 100%;
+	}
+	.text {
+	  color: #000000;
+	  font-size: 37.72rpx;
+	  font-family: FZSongKeBenXiuKaiS-R-GB;
+	  line-height: 41.72rpx;
+	}
+	.font {
+	  font-size: 30.97rpx;
+	  font-family: FZSongKeBenXiuKaiS-R-GB;
+	  line-height: 35.46rpx;
+	  color: #000000;
+	}
+	.text_2 {
+	  margin-top: 61.71rpx;
+	  line-height: 36.93rpx;
+	}
+	.text_3 {
+	  margin-top: 37.97rpx;
+	}
+	.text_4 {
+	  margin-top: 37.97rpx;
+	  line-height: 34.41rpx;
+	}
+	.text_5 {
+	  margin-top: 37.97rpx;
+	  line-height: 35.01rpx;
+	}
+	.text-wrapper {
+	  margin: 66.46rpx 37.97rpx 0;
+	  padding: 28.48rpx 0;
+	  background-color: #e79ea1;
+	  border-radius: 94.94rpx;
+	}
+	.text_6 {
+	  color: #ffffff;
+	}
+	@import url(../../../common/css/global.css);
+</style>
\ No newline at end of file
diff --git a/pages/book/photoProductsOrder/photoProductsOrder.vue b/pages/book/photoProductsOrder/photoProductsOrder.vue
index 77f74e6..bc5c5f2 100644
--- a/pages/book/photoProductsOrder/photoProductsOrder.vue
+++ b/pages/book/photoProductsOrder/photoProductsOrder.vue
@@ -8,13 +8,13 @@
 		@click="openTipsPopup"
 	  />
 	  <text class="font_2 text_2 pos_3" @click="openTipsPopup">预约须知</text>
-	  <view class="flex-row justify-between items-center section_2 pos_4">
+	  <view class="flex-row justify-between items-center section_2 pos_4" @click="openContactsPopup">
 	    <view class="flex-row items-center">
 	      <image
 	        class="shrink-0 image_2"
 	        src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=d756fec34c69604dfbd42c6d155690f0.png"
 	      />
-	      <text class="font text_3 ml-10">张三 15888610253</text>
+	      <text class="font text_3 ml-10">{{ contactInfo.name }} {{ contactInfo.phone }}</text>
 	    </view>
 	    <view class="flex-row items-center group">
 	      <image
@@ -26,26 +26,26 @@
 	  </view>
 	  <text class="font text_5 pos_5">请选择拍摄时间</text>
 	  <view class="flex-col section_3 pos_6">
-	    <text class="self-start font_2 text_6">预约日期：2025-{{ bookingDate }}</text>
+	    <text class="self-start font_2 text_6">预约日期：{{ bookingDate }}</text>
 	    <text class="self-start font_2 text_7">预约时间：{{ bookingTime }}</text>
 	    <view class="self-stretch divider"></view>
 	    <view class="flex-row equal-division my-box">
 	      <view class="flex-col items-center section_4 equal-division-item" 
 		  @click="selectTime(index)" :style="timeSelectedStyle[index]"
-		  v-for="(item, index) in 6" :key="index">
-	        <text class="font_3" :style="timeFontStyle[index]">星期一</text>
-	        <text class="font_4 mt-11" :style="timeFontStyle[index]">12-09</text>
+		  v-for="(item, index) in bookingDateVOList" :key="index">
+	        <text class="font_3" :style="timeFontStyle[index]">{{ getWeekday(item.specificDate) }}</text>
+	        <text class="font_4 mt-11" :style="timeFontStyle[index]">{{ item.specificDate.substr(5) }}</text>
 	      </view>
 	    </view>
 	    <view class="flex-col justify-start self-stretch group_2">
 	      <view class="flex-row relative group_1 my_grid">
 	        <view
 	          class="flex-col justify-start items-center text-wrapper_1 pos_1"
-			  :style="tpSelectedStyle[index]"
-	          v-for="(item, index) in 15"
+			  :style="tpSelectedStyle[bid][index]"
+	          v-for="(item, index) in bookingDateVOList[bid].bookingTimeVOList"
 	          :key="index" @click="selectTpTime(index)"
 	        >
-	          <text class="font_5" :style="tpFontStyle[index]">14:00</text>
+	          <text class="font_5" :style="tpFontStyle[bid][index]"> {{ item.timePoint }}</text>
 	        </view>
 	      </view>
 	    </view>
@@ -58,7 +58,7 @@
 	        :src="photoProduct.introImg"
 	      />
 	      <view class="flex-col items-start ml-11">
-	        <text class="font_2 text_8">汉服—曲裾系列</text>
+	        <text class="font_2 text_8">{{ photoProduct.name }}</text>
 	        <text class="font_6 text_9 mt-10">拍摄人数：1人</text>
 	        <text class="font_6 text_10 mt-10">拍摄场地：室外</text>
 	        <text class="font_6 text_12 mt-10">预约门店：哈尔滨师范大学</text>
@@ -77,7 +77,7 @@
 	      <text class="font text_13">定金：</text>
 	      <text class="font text_14">￥{{ photoProduct.price.toFixed(2) }}</text>
 	    </view>
-	    <view class="flex-col justify-start items-center text-wrapper_2"><text class="font_2 text_15">确定</text></view>
+	    <view class="flex-col justify-start items-center text-wrapper_2" @click="confirm"><text class="font_2 text_15">确定</text></view>
 	  </view>
 	</view>
 	
@@ -87,6 +87,18 @@
 		</view>
 	</uni-popup>
 	
+	<uni-popup ref="contactsPopup" >
+		<view class="contacts-popup">
+			<contactsComponentVue></contactsComponentVue>
+		</view>
+	</uni-popup>
+	
+	<uni-popup ref="confirmBookingInfo" :maskClick="true" :animation="false">
+		<view class="confirm-book-info">
+			<confirmBookingInfoVue></confirmBookingInfoVue>
+		</view>
+	</uni-popup>
+	
 </template>
 
 <script setup lang="ts">
@@ -94,39 +106,44 @@
 	import emitter from '../../../utils/emitter';
 	import bookingTipsVue from '../component/bookingTips.vue';
 	import { baseUrl } from '../../../api/request';
+	import contactsComponentVue from '../../order/component/contactsComponent.vue';
+	import confirmBookingInfoVue from '../component/confirmBookingInfo.vue';
 	const cookie = wx.getStorageSync("cookie")  //请求头
 	const photoProduct = ref({})
+	const bookingDateVOList = ref([])
 	
+	const timeSelectedStyle = ref([])
+	const timeFontStyle = ref([])
 	
-	const timeSelectedStyle = ref(new Array(11).fill(null).map(() => ({
-		backgroundColor: '#F3F3F3',
-	})))
+	const tpSelectedStyle = ref([])
+	const tpFontStyle = ref([])
 	
-	const timeFontStyle = ref(new Array(11).fill(null).map(() => ({
-		color: '#8B8B8B',
-	})))
-	
-	const tpSelectedStyle = ref(new Array(15).fill(null).map(() => ({
-		borderColor: '#8B8B8B'
-	})))
-	
-	const tpFontStyle = ref(new Array(15).fill(null).map(() => ({
-		color: '#323232',
-	})))
+	const bid = ref(0)
 	
 	
 	const bookingDate = ref('请选择')
 	const bookingTime = ref('请选择')
 	const bookingTips = ref(null)
+	const contactsPopup = ref(null)
+	const confirmBookingInfo = ref(null)
+	
+	const contactInfo = ref({})
+	
 	const openTipsPopup = () => {
 		bookingTips.value.open('center')
 	}
 	
+	const openContactsPopup = () => {
+		contactsPopup.value.open('bottom')
+	}
 	
+	const confirm = () => {
+		confirmBookingInfo.value.open('center')
+	}
 	
 	
 	onMounted(() => {
-		
+		getDefaultAddress()
 		getPhotoProductsById()
 		emitter.on('closeBookingTips', () => {
 			nextTick(() => {
@@ -135,6 +152,29 @@
 				}
 			})
 		})
+		
+		emitter.on('close', () => {
+			nextTick(() => {
+				if (contactsPopup.value) {
+					contactsPopup.value.close()
+				}
+			})
+		})
+		
+		emitter.on('contactsNowInfo', (val) =>{
+			contactInfo.value = val
+			console.log(val)
+		})
+		
+		emitter.on('closeConfirmBookingInfo', () => {
+			nextTick(() => {
+				if (confirmBookingInfo.value) {
+					confirmBookingInfo.value.close()
+				}
+			})
+		})
+		
+		
 	})
 	
 	
@@ -151,10 +191,40 @@
 		})
 		console.log(res.data.data)
 		photoProduct.value = res.data.data
+		bookingDateVOList.value = res.data.data.bookingDateVOList
+		timeSelectedStyle.value = new Array(bookingDateVOList.value.length).fill(null).map(() => ({
+			backgroundColor: '#F3F3F3',
+		}))
+		timeFontStyle.value = new Array(bookingDateVOList.value.length).fill(null).map(() => ({
+			color: '#8B8B8B',
+		}))
+		timeSelectedStyle.value[0].backgroundColor = '#FFB6B9'
+		timeFontStyle.value[0].color = '#C35C5D'
+		bookingDate.value = bookingDateVOList.value[0].specificDate
+		
+		for (var i = 0; i < bookingDateVOList.value.length; i ++ ) {
+			let len = bookingDateVOList.value[i].bookingTimeVOList.length
+			tpSelectedStyle.value[i] = new Array(len).fill(null).map(() => ({
+				borderColor: '#8B8B8B'
+			}))
+		}
+		for (var i = 0; i < bookingDateVOList.value.length; i ++ ) {
+			let len = bookingDateVOList.value[i].bookingTimeVOList.length
+			tpFontStyle.value[i] = new Array(len).fill(null).map(() => ({
+				color: '#323232',
+			}))
+		}
+		
 	}
 	
+	
+	
+	
 	const selectTime = (index:any) => {
-		for (var i = 0; i < timeSelectedStyle.value.length; i ++ ) {
+		bookingTime.value = '请选择'
+		bid.value = index
+		bookingDate.value = bookingDateVOList.value[index].specificDate
+		for (var i = 0; i < bookingDateVOList.value.length; i ++ ) {
 			if (i == index) {
 				timeSelectedStyle.value[i].backgroundColor = '#FFB6B9'
 				timeFontStyle.value[i].color = '#C35C5D'
@@ -163,22 +233,30 @@
 				timeFontStyle.value[i].color = '#8B8B8B'
 			}
 		}
+		
+		let col = bookingDateVOList.value[index].bookingTimeVOList.length
+		for (var i = 0; i < col ; i ++ ) {
+			tpSelectedStyle.value[bid.value][i].borderColor = '#8B8B8B'
+			tpFontStyle.value[bid.value][i].color = '#323232'
+		}
 	}
 	
 	const selectTpTime = (index:any) => {
-		for (var i = 0; i < tpSelectedStyle.value.length; i ++ ) {
+		bookingTime.value = bookingDateVOList.value[bid.value].bookingTimeVOList[index].timePoint
+		let len = bookingDateVOList.value[bid.value].bookingTimeVOList.length
+		for (var i = 0; i < len; i ++ ) {
 			if (i == index) {
-				tpSelectedStyle.value[i].borderColor = '#C35C5D'
-				tpFontStyle.value[i].color = '#C35C5D'
+				tpSelectedStyle.value[bid.value][i].borderColor = '#C35C5D'
+				tpFontStyle.value[bid.value][i].color = '#C35C5D'
 			} else {
-				tpSelectedStyle.value[i].borderColor = '#8B8B8B'
-				tpFontStyle.value[i].color = '#323232'
+				tpSelectedStyle.value[bid.value][i].borderColor = '#8B8B8B'
+				tpFontStyle.value[bid.value][i].color = '#323232'
 			}
 		}
 	}
 	
 	
-	//方法
+	
 	const nav = () => {
 		wx.openLocation({
 			latitude: 45.867741,
@@ -191,6 +269,34 @@
 		})
 	}
 		
+		
+	function getWeekday(dateStr:any) {
+	    const date = new Date(dateStr);
+	    const weekdays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
+	    return weekdays[date.getDay()];
+	}
+	
+
+	//获取用户默认联系人
+	const getDefaultAddress = 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);
+		}
+		//根据for循环遍历默认地址
+		for(let key in res.data.data) {
+			if(res.data.data[key].isDefault === 1) {
+				contactInfo.value = res.data.data[key]
+			}
+		}
+	}
+
 	
 
 	
@@ -198,13 +304,23 @@
 
 <style scoped lang="scss">
 	
+.confirm-book-info {
+	justify-content: center;
+	background-color: #fff;
+	border-radius: 41.1rpx;
+	margin-top: -150rpx;
+	width: 600rpx;
+}
+.contacts-popup {
+	height: 800rpx;
+}
+	
 .booking-tips {
 	justify-content: center;
 	background-color: #fff;
 	border-radius: 41.1rpx;
 	margin-top: -100rpx;
 	width: 650rpx;
-	overflow-y: auto;
 }
 
 .my-box {
diff --git a/pages/book/photoProductsOrderDetail/photoProductsOrderDetail.vue b/pages/book/photoProductsOrderDetail/photoProductsOrderDetail.vue
new file mode 100644
index 0000000..a295181
--- /dev/null
+++ b/pages/book/photoProductsOrderDetail/photoProductsOrderDetail.vue
@@ -0,0 +1,452 @@
+<template>
+	<view class="flex-col justify-start relative page">
+	  <view class="shrink-0 section"></view>
+	  <view class="flex-col section_2 pos">
+	    <view class="flex-row justify-between group">
+	      <view class="flex-col justify-start items-center text-wrapper" @click="changeState(0)">
+			<text class="font text">全部</text>
+			<view class="flex-col justify-start items-center" v-if="isShow[0]" style="border: 1.88rpx solid #E79EA1; width: 90rpx; margin-top: 5rpx;"></view>
+			</view> 
+	      <view class="flex-col justify-start" @click="changeState(1)">
+			  <text class="font text_2">待拍摄</text> 
+			  <view class="flex-col justify-start items-center" v-if="isShow[1]" style="border: 1.88rpx solid #E79EA1; width: 90rpx; margin-top: 5rpx;"></view>
+		  </view>
+	      <view class="flex-col justify-start" @click="changeState(2)">
+			  <text class="font text_3">已付款</text>
+			  <view class="flex-col justify-start items-center" v-if="isShow[2]" style="border: 1.88rpx solid #E79EA1; width: 90rpx; margin-top: 5rpx;"></view>
+		  </view>
+	    </view>
+	    <!-- <view class="flex-col justify-start items-center group_2"><view class="section_3"></view></view> -->
+	  </view>
+	  <view class="flex-col pos_2">
+	    <view class="flex-col mt-20 list-item" v-for="(item, index) in items" :key="index">
+	      <view class="flex-col">
+	        <view class="flex-row items-center group_3" style="display: flex; justify-content: space-between; align-items: center;">
+				
+			<view style="display: flex; align-items: center; height: 30rpx;">
+	          <view class="group_4">
+	            <text class="font_2">订单号</text>
+	            <text class="font_3 text_4">：</text>
+	          </view>
+	          <view><text class="font_4 text_5">E20241005095840091406189</text></view>
+			</view>
+			
+			<view>
+	          <text class="font_5 text_6">{{ formattedTime }}</text>
+	          <text class="font_6 text_7">待拍摄</text>
+			</view>
+			
+	        </view>
+	        <view class="flex-row group_5">
+	          <image
+	            class="image"
+	            src="https://ide.code.fun/api/image?token=67bfb6134ae84d0012276837&name=1c1a8926b9cbd08850c51818af39ae2b.png"
+	          />
+	          <view class="flex-col items-start flex-1 group_6 ml-19">
+	            <text class="font_7 text_8">汉服—曲裾系列</text>
+	            <text class="font_8 mt-43">￥138.00</text>
+	          </view>
+	        </view>
+	      </view>
+	      <view class="flex-col mt-17">
+	        <view class="flex-col section_4">
+	          <text class="self-start font_7 text_9">预约信息</text>
+	          <view class="mt-8 flex-col self-stretch">
+	            <text class="self-start font_7 text_10">预约门店：哈尔滨师范大学</text>
+	            <view class="flex-row justify-between items-center self-stretch group_7">
+	              <text class="font_7 text_11">到店时间：2025-03-10 16:00</text>
+	              <image
+	                class="image_2"
+	                src="https://ide.code.fun/api/image?token=67bfb6134ae84d0012276837&name=d52c7b6dae8656c06b3be0bbcd17f959.png"
+					@click="nav"
+	              />
+	            </view>
+	            <view class="flex-row justify-between items-baseline self-stretch">
+	              <text class="font_9">拍摄人数：1人</text>
+	              <text class="font_10 text_12" @click="nav">导航</text>
+	            </view>
+	          </view>
+	          <text class="mt-8 self-start font_7 text_13">拍摄场地：室外</text>
+	        </view>
+	        <view class="flex-row justify-end items-center group_8">
+	          <text class="font_2 text_14">实付款：</text>
+	          <text class="font_8">￥138.00</text>
+	        </view>
+	        <view class="flex-row justify-center group_9">
+	          <view class="flex-col justify-start items-center text-wrapper_2">
+	            <text class="font_6 text_15">联系客服</text>
+	          </view>
+	          <view class="ml-10 flex-col justify-start items-center text-wrapper_2" @click="openCancelBookingOrderPopup">
+	            <text class="font_6">取消订单</text>
+	          </view>
+	          <view class="ml-10 flex-col justify-start items-center text-wrapper_3">
+	            <text class="font_11 text_16">去付款</text>
+	          </view>
+	        </view>
+	      </view>
+	    </view>
+	  </view>
+	</view>
+	
+	<uni-popup ref="cancelBookingOrder" :maskClick="true" :animation="false">
+		<view class="cancel-booking-order">
+			<cancelOrderVue></cancelOrderVue>
+		</view>
+	</uni-popup>
+</template>
+
+<script setup lang="ts">
+	import {computed, nextTick, onMounted, onUnmounted, ref} from 'vue'
+    import emitter from '../../../utils/emitter';
+	import cancelOrderVue from '../component/cancelOrder.vue';
+	const items = ref([null, null, null])
+	const isShow = ref([true, false, false])
+	const cancelBookingOrder = ref(null)
+	
+	
+	
+	
+	
+	onMounted(() => {
+		startCountdown()
+		emitter.on('closeCancelOrderPopup', () => {
+			nextTick(() => {
+				if (cancelBookingOrder.value) {
+					cancelBookingOrder.value.close()
+				}
+			})
+		})
+	})
+	
+	
+	onUnmounted(() => {
+		if (timer) {
+			clearInterval(timer)
+		}
+	})
+	
+	let timer = null;
+	   // 尝试从 localStorage 获取上次保存的倒计时时间
+	    const savedTime = wx.getStorageSync('remainingTime');
+	    const remainingTime = ref(savedTime ? parseInt(savedTime) : 1800); // 30分钟 (1800秒)
+	
+	 // 计算分钟和秒
+	    const formattedTime = computed(() => {
+	      const minutes = Math.floor(remainingTime.value / 60);
+	      const seconds = remainingTime.value % 60;
+	      return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+	    });
+	
+	   const startCountdown = () => {
+	      // 每秒更新一次倒计时
+	      timer = setInterval(() => {
+	        if (remainingTime.value > 0) {
+	          remainingTime.value--;
+			   wx.setStorageSync('remainingTime', remainingTime.value.toString());
+	        } else {
+	          cancelOrder(); // 倒计时结束，取消订单
+	        }
+	      }, 1000);
+	    };
+	
+	    const cancelOrder = () => {
+	      // 这里调用取消订单的接口
+	      // 假设 cancelOrderApi 是一个取消订单的请求
+	      console.log('订单已取消'); // 实际取消订单的代码
+		  wx.removeStorageSync('remainingTime');
+	      clearInterval(timer); // 清除定时器
+	    };
+	
+	
+	
+	const openCancelBookingOrderPopup = () => {
+		cancelBookingOrder.value.open('center')
+	}
+	
+	
+	
+	
+	const changeState = (index:any) => {
+		if (!isShow.value[index]) {
+			for (var i = 0; i < 3; i ++ ) {
+				if (i == index) {
+					isShow.value[i] = true
+				} else {
+					isShow.value[i] = false
+				}
+			}
+		}
+	}
+	
+	const nav = () => {
+		wx.openLocation({
+			latitude: 45.867741,
+			longitude: 126.560037,
+			name: '哈尔滨师范大学(松北校区)',
+			address: '黑龙江省哈尔滨市呼兰区利民经济开发区师大路1号',
+			success: (res) => {
+			console.log(res)
+			}
+		})
+	}
+	
+</script>
+
+<style scoped lang="scss">
+.cancel-booking-order {
+	// height: 800rpx;
+	margin-top: -150rpx;
+}
+.ml-19 {
+  margin-left: 35.63rpx;
+}
+.mt-43 {
+  margin-top: 80.63rpx;
+}
+.mt-17 {
+  margin-top: 31.88rpx;
+}
+.page {
+  background-color: #ffffff;
+  overflow: hidden;
+  background-image: url('https://ide.code.fun/api/image?token=67bfb6134ae84d0012276837&name=629e4a3490be730bb94900bbb4f3ab0a.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%;
+}
+.section {
+  background-image: url('https://ide.code.fun/api/image?token=67bfb6134ae84d0012276837&name=629e4a3490be730bb94900bbb4f3ab0a.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  width: 750rpx;
+  height: 100vh;
+}
+.section_2 {
+  padding-left: 80.63rpx;
+  padding-right: 71.25rpx;
+  background-color: #EBE7E4;
+}
+.pos {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  z-index: 99;
+}
+.group {
+  padding: 13.75rpx 0 0rpx;
+}
+.text-wrapper {
+  width: 91.88rpx;
+}
+.font {
+  font-size: 30rpx;
+  font-family: FZSongKeBenXiuKaiS-R-GB;
+  color: #000000;
+}
+.text {
+  line-height: 48.48rpx;
+}
+.text_2 {
+  line-height: 48.24rpx;
+}
+.text_3 {
+  line-height: 47.43rpx;
+}
+.group_2 {
+  // border-left: solid 99.38rpx #e79ea1;
+  // border-right: solid 99.38rpx #e79ea1;
+}
+.section_3 {
+  background-color: #e79ea1;
+  width: 99.38rpx;
+  height: 5.63rpx;
+}
+.pos_2 {
+  position: absolute;
+  left: 37.5rpx;
+  right: 37.5rpx;
+  top: 112.5rpx;
+}
+.list-item {
+  padding: 22.5rpx 0 22.5rpx;
+  background-color: #fffcfa;
+  border-radius: 18.75rpx;
+}
+.list-item:first-child {
+  margin-top: 0;
+}
+.list-item:last-child {
+  margin-bottom: 50rpx;
+}
+.group_3 {
+  padding: 0 15rpx 18.75rpx;
+  border-bottom: solid 1.88rpx #dbdbdb;
+}
+.group_4 {
+  line-height: 25.84rpx;
+  height: 25.84rpx;
+}
+.font_2 {
+  font-size: 26.25rpx;
+  font-family: FZSongKeBenXiuKaiS-R-GB;
+  line-height: 25.84rpx;
+  color: #323232;
+}
+.font_3 {
+  font-size: 26.25rpx;
+  font-family: Open Sans;
+  line-height: 17.53rpx;
+  color: #323232;
+}
+.text_4 {
+  line-height: 16.8rpx;
+}
+.font_4 {
+  font-size: 26.25rpx;
+  font-family: FZSongKeBenXiuKaiS-R-GB;
+  line-height: 17.53rpx;
+  color: #323232;
+}
+.text_5 {
+  font-size: 28.13rpx;
+  line-height: 25.84rpx;
+}
+.font_5 {
+  font-size: 26.25rpx;
+  font-family: FZSongKeBenXiuKaiS-R-GB;
+  line-height: 17.53rpx;
+  color: #e79ea1;
+}
+.text_6 {
+  // margin-left: 45rpx;
+}
+.font_6 {
+  font-size: 26.25rpx;
+  font-family: FZSongKeBenXiuKaiS-R-GB;
+  line-height: 25.84rpx;
+  color: #e79ea1;
+}
+.text_7 {
+  margin-left: 3.75rpx;
+  line-height: 24.71rpx;
+}
+.group_5 {
+  padding: 15rpx 15rpx 0;
+}
+.image {
+  width: 120rpx;
+  height: 133.13rpx;
+}
+.group_6 {
+  margin-bottom: 3.75rpx;
+}
+.font_8 {
+  font-size: 33.75rpx;
+  font-family: FZSongKeBenXiuKaiS-R-GB;
+  line-height: 22.54rpx;
+  color: #e79ea1;
+}
+.section_4 {
+  margin: 0 22.5rpx;
+  padding: 22.5rpx 18.75rpx;
+  background-color: #f4f4f4;
+  border-radius: 9.38rpx;
+}
+.font_7 {
+  font-size: 26.25rpx;
+  font-family: FZSongKeBenXiuKaiS-R-GB;
+  line-height: 25.84rpx;
+  color: #000000;
+}
+.text_9 {
+  font-size: 28.13rpx;
+  line-height: 26.25rpx;
+}
+.text_8 {
+  font-size: 28.13rpx;
+  line-height: 27.36rpx;
+}
+.text_10 {
+  line-height: 25.33rpx;
+}
+.group_7 {
+  margin-top: 3.75rpx;
+}
+.text_11 {
+  line-height: 24.51rpx;
+}
+.image_2 {
+  // margin-right: 7.5rpx;
+  width: 45rpx;
+  height: 45rpx;
+}
+.font_9 {
+  font-size: 26.25rpx;
+  font-family: FZSongKeBenXiuKaiS-R-GB;
+  line-height: 23.79rpx;
+  color: #000000;
+}
+.font_10 {
+  font-size: 22.5rpx;
+  font-family: FZSongKeBenXiuKaiS-R-GB;
+  line-height: 21.09rpx;
+  color: #000000;
+}
+.text_12 {
+  margin-right: 3.75rpx;
+}
+.text_13 {
+  line-height: 24.21rpx;
+}
+.group_8 {
+  padding: 30rpx 22.5rpx 22.5rpx;
+  border-bottom: solid 1.88rpx #dbdbdb;
+}
+.text_14 {
+  font-size: 28.13rpx;
+  line-height: 26.7rpx;
+}
+.group_9 {
+  padding: 20.63rpx 22.5rpx 0 150rpx;
+}
+.text_15 {
+  line-height: 25.54rpx;
+}
+.text-wrapper_2 {
+  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_3 {
+  padding: 15rpx 0;
+  background-color: #e79ea1;
+  border-radius: 75rpx;
+  width: 153.75rpx;
+  height: 56.25rpx;
+}
+.font_11 {
+  font-size: 26.25rpx;
+  font-family: FZSongKeBenXiuKaiS-R-GB;
+  line-height: 25.84rpx;
+  color: #ffffff;
+}
+.text_16 {
+  line-height: 24rpx;
+}
+
+/* 去掉滚动条样式 */
+::-webkit-scrollbar {
+  display: none;
+}
+@import url(../../../common/css/global.css);
+</style>
diff --git a/pages/testPage/testPage.vue b/pages/testPage/testPage.vue
index be0dc62..61b720a 100644
--- a/pages/testPage/testPage.vue
+++ b/pages/testPage/testPage.vue
@@ -1,6 +1,8 @@
 <template>
 	<!-- <feeTipsVue></feeTipsVue> -->
-	<bookingTipsVue></bookingTipsVue>
+	<!-- <bookingTipsVue></bookingTipsVue> -->
+	<!-- <confirmBookingInfoVue></confirmBookingInfoVue> -->
+	<cancelOrderVue></cancelOrderVue>
 </template>
 
 <script setup lang="ts">
@@ -9,8 +11,10 @@
 	// import couponPopupVue from '../coupon/component/couponPopup.vue';
 	// import confirmPopupVue from '../coupon/component/confirmPopup.vue';
 	// import bookingSelectedVue from '../book/component/bookingSelected.vue';
-	import feeTipsVue from '../book/component/feeTips.vue';
-	import bookingTipsVue from '../book/component/bookingTips.vue';
+	// import feeTipsVue from '../book/component/feeTips.vue';
+	// import bookingTipsVue from '../book/component/bookingTips.vue';
+	// import confirmBookingInfoVue from '../book/component/confirmBookingInfo.vue';
+	import cancelOrderVue from '../book/component/cancelOrder.vue';
 </script>
 
 <style scoped lang="scss">