From 935ed9481f50c8aefb432d82d4551fcf94baf94d Mon Sep 17 00:00:00 2001
From: chen-xin-zhi <3588068430@qq.com>
Date: Wed, 26 Feb 2025 23:54:49 +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

---
 pages/book/component/bookingSelected.vue      | 341 ++++++++++++
 pages/book/component/bookingTips.vue          |  68 +++
 pages/book/component/feeTips.vue              | 154 ++++++
 .../photoProductsOrder/photoProductsOrder.vue | 493 ++++++++++++++++++
 4 files changed, 1056 insertions(+)
 create mode 100644 pages/book/component/bookingSelected.vue
 create mode 100644 pages/book/component/bookingTips.vue
 create mode 100644 pages/book/component/feeTips.vue
 create mode 100644 pages/book/photoProductsOrder/photoProductsOrder.vue

diff --git a/pages/book/component/bookingSelected.vue b/pages/book/component/bookingSelected.vue
new file mode 100644
index 0000000..08b8e51
--- /dev/null
+++ b/pages/book/component/bookingSelected.vue
@@ -0,0 +1,341 @@
+<template>
+	<view class="flex-col page">
+	  <view class="flex-col group">
+	    <view class="flex-row justify-between self-stretch">
+	      <text class="font text">请选择拍摄人数和场地</text>
+	      <image
+	        class="image"
+	        src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=72844e3602883267485f6c9dfe89862b.png"
+			@click="closePopup"
+	      />
+	    </view>
+	    <image
+	      class="self-start image_2"
+	      src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=eb8ebca982e7a2e39bcab657cf891791.png"
+	    />
+	    <text class="self-start font text_2">拍摄人数</text>
+	  </view>
+	  <view class="flex-col justify-start relative group_2">
+	    <view class="flex-row items-center relative section">
+	      <image
+	        class="image_5"
+	        src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=c0ebdfc7cf144c161a3ad237d317f463.png"
+			@click="sub"
+	      />
+	      <view class="flex-col justify-start items-center text-wrapper"><text class="text_4">{{ number }}</text></view>
+	      <image
+	        class="image_6"
+	        src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=d8e6dd5d8dea22188afc18c9b7822b49.png"
+			@click="add"
+	      />
+	      <text class="text_3">人</text>
+	    </view>
+	    <image
+	      class="image_3 pos"
+	      src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=025aa63cb7deb0cf1fa7cf4aeda1bef1.png"
+	    />
+	    <image
+	      class="image_4 pos_2"
+	      src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=455931695b5f0c7008d1859ccaae1cb8.png"
+	    />
+	  </view>
+	  <view class="flex-col group_3">
+	    <text class="self-start font text_5">拍摄场地</text>
+		
+	    <radio-group class="flex-row equal-division mt-17" @change="handlerRadioChange">
+		 
+	      <view class="flex-col section_2 equal-division-item">
+	        <view class="flex-row justify-between items-end self-stretch">
+	          <image
+	            class="image_7"
+	            src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=1ad61435fde7f073544e2d6f400f1ac9.png"
+	          />
+	          <radio class="section_3" color="#FFB6B9" :checked="true" value="室内"></radio>
+	        </view>
+	        <text class="self-start font_2 text_6 mt-5">室内</text>
+	      </view>
+		  
+	      <view class="flex-col section_2 equal-division-item ml-19">
+	        <view class="flex-row justify-between items-end self-stretch">
+	          <image
+	            class="image_8"
+	            src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=556966367522af83972375c476406b0b.png"
+	          />
+	          <radio class="section_3" color="#FFB6B9" value="室外"></radio>
+	        </view>
+	        <text class="self-start font_2 text_6 mt-5">室外</text>
+	      </view>
+		
+	    </radio-group>
+	  </view>
+	  <view class="flex-row justify-between items-center group_4">
+	    <view class="flex-row items-center">
+	      <view class="flex-col items-center shrink-0 section_4" @click="openFeeTips">
+	        <text class="font_3">费用</text>
+	        <text class="font_3">说明</text>
+	      </view>
+	      <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">
+			<text class="text_9">确定</text></view>
+	  </view>
+	</view>
+	
+	<uni-popup ref="feeTips" :maskClick="false" :animation="false">
+		<view class="fee-tips">
+			<feeTipsVue></feeTipsVue>
+		</view>
+	</uni-popup>
+</template>
+
+<script setup lang="ts">
+	import {nextTick, onMounted, ref} from 'vue'
+	import emitter from '../../../utils/emitter';
+	import feeTipsVue from './feeTips.vue';
+	const number = ref(1)
+	const field = ref('室内')
+	const feeTips = ref(null)
+	
+	onMounted(() => {
+		emitter.on('closeFeeTips', () => {
+			nextTick(() => {
+				if (feeTips.value) {
+					feeTips.value.close()
+				}
+			})
+		})
+	})
+	
+	const sub = () => {
+		if (number.value > 1) {
+			number.value --
+		}
+	}
+	const add = () => {
+		number.value ++ 
+	}
+	
+	const handlerRadioChange = (e:any) => {
+		field.value = e.detail.value
+	}
+	
+	const closePopup = () => {
+		emitter.emit('closeBookingPopup')
+	}
+	
+	const openFeeTips = () => {
+		feeTips.value.open('center')
+	}
+	
+</script>
+
+<style scoped lang="scss">
+	
+	.fee-tips {
+		justify-content: center;
+		background-color: #fff;
+		border-radius: 20rpx;
+		margin-top: -400rpx;
+		width: 650rpx;
+		height: 900rpx;
+		overflow-y: auto;
+	}
+	
+	.mt-17 {
+	  margin-top: 31.88rpx;
+	}
+	.mt-5 {
+	  margin-top: 9.38rpx;
+	}
+	.ml-19 {
+	  margin-left: 35.63rpx;
+	}
+	.page {
+	  padding-top: 43.13rpx;
+	  background-color: #fffcf9;
+	  width: 100%;
+	  overflow-y: auto;
+	  overflow-x: hidden;
+	  height: 100%;
+	  position: fixed;
+	  bottom: 0;
+	}
+	.group {
+	  padding: 0 37.5rpx;
+	}
+	.font {
+	  font-size: 37.5rpx;
+	  font-family: FZSongKeBenXiuKaiS-R-GB;
+	  line-height: 33.99rpx;
+	  color: #000000;
+	}
+	.text {
+	  margin: 3.75rpx 0;
+	  line-height: 36.34rpx;
+	}
+	.image {
+	  width: 52.5rpx;
+	  height: 41.25rpx;
+	}
+	.image_2 {
+	  margin-top: 28.13rpx;
+	  width: 172.5rpx;
+	  height: 174.38rpx;
+	}
+	.text_2 {
+	  margin-top: 41.25rpx;
+	}
+	.group_2 {
+	  margin-top: 18.75rpx;
+	  padding-bottom: 31.88rpx;
+	}
+	.section {
+	  margin: 0 37.5rpx;
+	  padding: 125.63rpx 0 86.25rpx;
+	  background-image: linear-gradient(180deg, #fdefef 0%, #fffcfa 100%);
+	  border-radius: 18.75rpx;
+	  box-shadow: 0rpx 7.5rpx 7.5rpx #00000040;
+	}
+	.image_5 {
+	  margin-left: 249.38rpx;
+	  border-radius: 9.38rpx 0rpx 0rpx 9.38rpx;
+	  width: 68.06rpx;
+	  height: 71.04rpx;
+	}
+	.text-wrapper {
+	  margin-left: 3.75rpx;
+	  padding: 18.75rpx 0;
+	  background-color: #fbdedf80;
+	  width: 82.06rpx;
+	  height: 71.04rpx;
+	}
+	.text_4 {
+	  color: #323232b3;
+	  font-family: Open Sans;
+	  line-height: 35.04rpx;
+	}
+	.image_6 {
+	  margin-left: 3.75rpx;
+	  border-radius: 0rpx 9.38rpx 9.38rpx 0rpx;
+	  width: 68.06rpx;
+	  height: 71.04rpx;
+	}
+	.text_3 {
+	  margin-left: 22.5rpx;
+	  color: #000000;
+	  font-size: 30rpx;
+	  font-family: Open Sans;
+	  line-height: 26.4rpx;
+	}
+	.image_3 {
+	  width: 238.13rpx;
+	  height: 271.88rpx;
+	}
+	.pos {
+	  position: absolute;
+	  left: 7.5rpx;
+	  bottom: 0;
+	}
+	.image_4 {
+	  width: 125.63rpx;
+	  height: 200.63rpx;
+	}
+	.pos_2 {
+	  position: absolute;
+	  right: 65.63rpx;
+	  bottom: 0;
+	}
+	.group_3 {
+	  margin-top: 45rpx;
+	  padding: 0 35.63rpx;
+	}
+	.text_5 {
+	  margin-left: 3.75rpx;
+	}
+	.equal-division {
+	  align-self: stretch;
+	}
+	.section_2 {
+	  position: relative;
+	  flex: 1 1 320.63rpx;
+	}
+	.equal-division-item {
+	  padding: 18.75rpx 26.25rpx;
+	  background-color: #ffffff;
+	  border-radius: 18.75rpx;
+	  box-shadow: 0rpx 7.5rpx 7.5rpx #00000040;
+	  height: 157.5rpx;
+	}
+	.image_7 {
+	  opacity: 0.85;
+	  border-radius: 18.75rpx;
+	  width: 138.75rpx;
+	  height: 84.38rpx;
+	}
+	.section_3 {
+	  margin-right: 11.25rpx;
+	  background-color: #ffffff;
+	  border-radius: 50%;
+	  width: 45rpx;
+	  height: 45rpx;
+	}
+	.font_2 {
+	  font-size: 26.25rpx;
+	  font-family: FZSongKeBenXiuKaiS-R-GB;
+	  line-height: 24.21rpx;
+	  color: #000000;
+	}
+	.text_6 {
+	  margin-left: 45rpx;
+	}
+	.image_8 {
+	  border-radius: 15rpx;
+	  width: 138.75rpx;
+	  height: 84.38rpx;
+	}
+	.group_4 {
+	  margin-top: 37.5rpx;
+	  padding: 30rpx 35.63rpx;
+	  border-top: solid 1.88rpx #0000001f;
+	  position: fixed;
+	  bottom: 0;
+	  left: 0;
+	  right: 0;
+	  margin: 0 auto;
+	}
+	.section_4 {
+	  padding: 7.5rpx 0;
+	  background-color: #ffb6b9;
+	  border-radius: 9.38rpx;
+	  width: 78.75rpx;
+	  height: 67.5rpx;
+	}
+	.font_3 {
+	  font-size: 22.5rpx;
+	  font-family: FZSongKeBenXiuKaiS-R-GB;
+	  line-height: 26.25rpx;
+	  color: #ffffff;
+	}
+	.text_7 {
+	  margin-left: 22.5rpx;
+	  line-height: 34.42rpx;
+	}
+	.text_8 {
+	  line-height: 25.05rpx;
+	}
+	.text-wrapper_2 {
+	  padding: 22.5rpx 0;
+	  background-color: #ffb6b9;
+	  border-radius: 187.5rpx;
+	  width: 241.88rpx;
+	  height: 76.88rpx;
+	}
+	.text_9 {
+	  color: #ffffff;
+	  font-size: 30rpx;
+	  font-family: FZSongKeBenXiuKaiS-R-GB;
+	  line-height: 28.01rpx;
+	}
+	@import url(../../../common/css/global.css);
+</style>
\ No newline at end of file
diff --git a/pages/book/component/bookingTips.vue b/pages/book/component/bookingTips.vue
new file mode 100644
index 0000000..934218f
--- /dev/null
+++ b/pages/book/component/bookingTips.vue
@@ -0,0 +1,68 @@
+<template>
+	<view class="flex-col page">
+	  <text class="self-center text">预约须知</text>
+	  <view class="flex-col self-stretch group">
+	    <text class="font">
+	      1.成功预约的顾客需按照预定时间前往店内挑选相应级别的服装。为确保衣物在体验过程中的完好无损，顾客需根据所选服装的级别补缴尾款以及相应的押金。拍摄结束后，店铺将依据衣物的实际状况评估是否扣除押金。
+	    </text>
+	    <text class="mt-14 font">
+	      2.其中部分物品商家可提供，属于增值服务（如一次性隐形眼镜、
+	      一次性粉扑等属于服务费以外的赠送服务，买家可选择自带用品，不影响服务价格），需要买家自己准备的，客服需要提前告诉买家（如胸贴等贴身物品）
+	    </text>
+	    <text class="mt-14 font">
+	      3.用户可以在预约的试穿时间内到店试穿预定的服装。试穿时请小心爱护服装，避免弄脏或损坏。如果试穿后发现尺码不合适或者对服装不满意，可在符合规定的时间内联系客服进行更换或者取消订单。
+	    </text>
+	  </view>
+	  <view @click="closeBookingTips" class="flex-col justify-start items-center self-stretch text-wrapper">
+	    <text class="text_2">我知道了</text>
+	  </view>
+	</view>
+</template>
+
+<script setup lang="ts">
+import emitter from '../../../utils/emitter';
+	const closeBookingTips = () => {
+		emitter.emit('closeBookingTips')
+	}
+</script>
+
+<style scoped lang="scss">
+	.page {
+	  padding: 41.67rpx 62.5rpx;
+	  background-color: #ffffff;
+	  border-radius: 41.1rpx;
+	  box-shadow: 0rpx 8.33rpx 8.33rpx #00000061;
+	  width: 100%;
+	  overflow-y: auto;
+	  overflow-x: hidden;
+	  height: 100%;
+	}
+	.text {
+	  color: #000000;
+	  font-size: 37.5rpx;
+	  font-family: FZSongKeBenXiuKaiS-R-GB;
+	  line-height: 34.42rpx;
+	}
+	.group {
+	  margin-top: 33.33rpx;
+	}
+	.font {
+	  font-size: 29.17rpx;
+	  font-family: FZSongKeBenXiuKaiS-R-GB;
+	  line-height: 35.42rpx;
+	  color: #323232;
+	}
+	.text-wrapper {
+	  margin: 50rpx 20.83rpx 0 4.17rpx;
+	  padding: 25rpx 0;
+	  background-color: #e79ea1;
+	  border-radius: 83.33rpx;
+	}
+	.text_2 {
+	  color: #ffffff;
+	  font-size: 33.33rpx;
+	  font-family: FZSongKeBenXiuKaiS-R-GB;
+	  line-height: 32.17rpx;
+	}
+	@import url(../../../common/css/global.css);
+</style>
\ No newline at end of file
diff --git a/pages/book/component/feeTips.vue b/pages/book/component/feeTips.vue
new file mode 100644
index 0000000..63833e9
--- /dev/null
+++ b/pages/book/component/feeTips.vue
@@ -0,0 +1,154 @@
+<template>
+	<view class="flex-col page">
+	  <view class="flex-col self-stretch">
+	    <text class="self-center text">费用说明</text>
+	    <view class="flex-col self-stretch group mt-13">
+	      <text class="self-start font">一、费用支付流程</text>
+	      <text class="self-stretch font_2 text_2 mt-3">
+	        确定等级：您将根据个人需求选择合适的服装价位区间，并完成预约操作。
+	        <br />
+	        预约成功：预约成功后，您需前往店铺挑选对应等级的服装。
+	        <br />
+	        补缴尾款及押金：在挑选服装时，您需要补缴尾款（扣除已支付定金后的剩余服务或商品费用）以及押金（用于保障服装归还时的完好）。
+	      </text>
+	    </view>
+	  </view>
+	  <view class="flex-col self-stretch group_2">
+	    <text class="self-start font">二、尾款具体事项</text>
+	    <text class="self-stretch font_2 text_3 mt-5">
+	      租赁服装：若您选择租赁我们店铺没有的服装，租赁费用将在您支付尾款时一并结算。无论拍摄是否进行，租赁费用均不予退还。
+	      <br />
+	      购买服装：如您希望购买我们店铺的服装，且我们同意购买，将按照服装的稀有程度分等级定价。您需按照所选等级支付尾款。
+	      <br />
+	      定制服务：若您自带衣服，我们提供妆发及摄影服务。若需我们额外购买服装，将按照上述等级定价，您需支付相应的尾款。
+	    </text>
+	  </view>
+	  <view class="flex-col self-stretch group_3">
+	    <text class="self-start font_3 text_4">三、定金与押金说明</text>
+	    <text class="self-stretch font_2 text_5 mt-9">
+	      定金：预约时支付的定金用于确认您的预约意向，定金不予退还。
+	      <br />
+	      押金：拍摄完成后，我们将根据服装的归还情况决定是否扣除押金。若服装无损坏，押金将全额退还。
+	    </text>
+	  </view>
+	  <view class="flex-col self-stretch group_4">
+	    <text class="self-start font_3 text_6">四、特殊情况处理</text>
+	    <view class="mt-14 self-stretch text-wrapper">
+	      <text class="font_2 text_7">
+	        若因特殊情况您需要取消预约，请及时与我们联系。未拍摄情况下，定金不予退还，已支付的租赁费用亦不退还。
+	        <br />
+	      </text>
+	    </view>
+	  </view>
+	</view>
+	<view @click="closeFeeTips" class="flex-col justify-start items-center self-center text-wrapper_2">
+	    <text class="font_3 text_8">我知道了</text>
+	  </view>
+</template>
+
+<script setup lang="ts">
+import emitter from '../../../utils/emitter';
+	const closeFeeTips = () => {
+		emitter.emit('closeFeeTips')
+	}
+	
+</script>
+
+<style scoped lang="scss">
+	.mt-13 {
+	  margin-top: 26.71rpx;
+	}
+	.mt-3 {
+	  margin-top: 6.16rpx;
+	}
+	.mt-5 {
+	  margin-top: 10.27rpx;
+	}
+	.mt-9 {
+	  margin-top: 18.49rpx;
+	}
+	.page {
+	  padding: 36.99rpx 24.66rpx 45.21rpx 28.77rpx;
+	  background-color: #ffffff;
+	  border-radius: 41.1rpx;
+	  width: 100%;
+	  overflow-y: auto;
+	  overflow-x: hidden;
+	  height: 750rpx;
+	}
+	.text {
+	  color: #000000;
+	  font-size: 36.99rpx;
+	  font-family: FZSongKeBenXiuKaiS-R-GB;
+	  line-height: 36.12rpx;
+	}
+	.group {
+	  margin-right: 8.22rpx;
+	}
+	.font {
+	  font-size: 32.88rpx;
+	  font-family: FZSongKeBenXiuKaiS-R-GB;
+	  line-height: 39.04rpx;
+	  color: #323232;
+	}
+	.font_2 {
+	  font-size: 28.77rpx;
+	  font-family: FZSongKeBenXiuKaiS-R-GB;
+	  line-height: 34.93rpx;
+	  color: #323232;
+	}
+	.text_2 {
+	  margin-left: 24.66rpx;
+	}
+	.group_2 {
+	  margin-top: 45.21rpx;
+	}
+	.text_3 {
+	  margin-left: 20.55rpx;
+	}
+	.group_3 {
+	  margin-top: 45.21rpx;
+	}
+	.font_3 {
+	  font-size: 32.88rpx;
+	  font-family: FZSongKeBenXiuKaiS-R-GB;
+	  line-height: 31.73rpx;
+	  color: #323232;
+	}
+	.text_4 {
+	  line-height: 30.82rpx;
+	}
+	.text_5 {
+	  margin-left: 20.55rpx;
+	}
+	.group_4 {
+	  margin: 57.53rpx 24.66rpx 0 4.11rpx;
+	}
+	.text_6 {
+	  line-height: 32.12rpx;
+	}
+	.text-wrapper {
+	  margin-left: 4.11rpx;
+	  line-height: 34.93rpx;
+	}
+	.text_7 {
+	  margin-left: 8.22rpx;
+	}
+	.text-wrapper_2 {
+	  margin-top: 49.32rpx;
+	  padding: 24.66rpx 0;
+	  background-color: #e79ea1;
+	  border-radius: 82.19rpx;
+	  width: 450.07rpx;
+	  position: absolute;
+	  bottom: 30rpx;
+	  left: 0;
+	  right: 0;
+	  margin: 0 auto;
+	}
+	.text_8 {
+	  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
new file mode 100644
index 0000000..77f74e6
--- /dev/null
+++ b/pages/book/photoProductsOrder/photoProductsOrder.vue
@@ -0,0 +1,493 @@
+<template>
+	<view class="flex-col justify-start relative page">
+	  <view class="section"></view>
+	  <text class="font text pos_2">选择联系人</text>
+	  <image
+		class="image pos"
+		src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=255ef950c2652260141b1b6866847d29.png"
+		@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 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>
+	    </view>
+	    <view class="flex-row items-center group">
+	      <image
+	        class="image_3"
+	        src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=3e51d655e35c3c3fd7fbdfab51592143.png"
+	      />
+	      <text class="font_3 text_4">更换联系人</text>
+	    </view>
+	  </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_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>
+	      </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"
+	          :key="index" @click="selectTpTime(index)"
+	        >
+	          <text class="font_5" :style="tpFontStyle[index]">14:00</text>
+	        </view>
+	      </view>
+	    </view>
+	  </view>
+	  <text class="font pos_7">预约信息</text>
+	  <view class="flex-row justify-between items-center section_5 pos_8">
+	    <view class="flex-row items-center">
+	      <image
+	        class="image_4"
+	        :src="photoProduct.introImg"
+	      />
+	      <view class="flex-col items-start ml-11">
+	        <text class="font_2 text_8">汉服—曲裾系列</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>
+	      </view>
+	    </view>
+	    <view class="flex-col items-center group_3" @click="nav">
+	      <image
+	        class="image"
+	        src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=d52c7b6dae8656c06b3be0bbcd17f959.png"
+	      />
+	      <text class="text_11 mt-3">导航</text>
+	    </view>
+	  </view>
+	  <view class="flex-row justify-between items-center section_6 pos_9">
+	    <view class="flex-row items-baseline">
+	      <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>
+	</view>
+	
+	<uni-popup ref="bookingTips" :maskClick="false" :animation="false">
+		<view class="booking-tips">
+			<bookingTipsVue></bookingTipsVue>
+		</view>
+	</uni-popup>
+	
+</template>
+
+<script setup lang="ts">
+	import {nextTick, onMounted, ref} from 'vue'
+	import emitter from '../../../utils/emitter';
+	import bookingTipsVue from '../component/bookingTips.vue';
+	import { baseUrl } from '../../../api/request';
+	const cookie = wx.getStorageSync("cookie")  //请求头
+	const photoProduct = ref({})
+	
+	
+	const timeSelectedStyle = ref(new Array(11).fill(null).map(() => ({
+		backgroundColor: '#F3F3F3',
+	})))
+	
+	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 bookingDate = ref('请选择')
+	const bookingTime = ref('请选择')
+	const bookingTips = ref(null)
+	const openTipsPopup = () => {
+		bookingTips.value.open('center')
+	}
+	
+	
+	
+	
+	onMounted(() => {
+		
+		getPhotoProductsById()
+		emitter.on('closeBookingTips', () => {
+			nextTick(() => {
+				if (bookingTips.value) {
+					bookingTips.value.close()
+				}
+			})
+		})
+	})
+	
+	
+	const getPhotoProductsById = async () => {
+		const res = await uni.request({
+			url: baseUrl + '/photoProducts/list/detail',
+			method: 'POST',
+			header: {
+				cookie
+			},
+			data: {
+				id: 70
+			}
+		})
+		console.log(res.data.data)
+		photoProduct.value = res.data.data
+	}
+	
+	const selectTime = (index:any) => {
+		for (var i = 0; i < timeSelectedStyle.value.length; i ++ ) {
+			if (i == index) {
+				timeSelectedStyle.value[i].backgroundColor = '#FFB6B9'
+				timeFontStyle.value[i].color = '#C35C5D'
+			} else {
+				timeSelectedStyle.value[i].backgroundColor = '#F3F3F3'
+				timeFontStyle.value[i].color = '#8B8B8B'
+			}
+		}
+	}
+	
+	const selectTpTime = (index:any) => {
+		for (var i = 0; i < tpSelectedStyle.value.length; i ++ ) {
+			if (i == index) {
+				tpSelectedStyle.value[i].borderColor = '#C35C5D'
+				tpFontStyle.value[i].color = '#C35C5D'
+			} else {
+				tpSelectedStyle.value[i].borderColor = '#8B8B8B'
+				tpFontStyle.value[i].color = '#323232'
+			}
+		}
+	}
+	
+	
+	//方法
+	const nav = () => {
+		wx.openLocation({
+			latitude: 45.867741,
+			longitude: 126.560037,
+			name: '哈尔滨师范大学(松北校区)',
+			address: '黑龙江省哈尔滨市呼兰区利民经济开发区师大路1号',
+			success: (res) => {
+			console.log(res)
+			}
+		})
+	}
+		
+	
+
+	
+</script>
+
+<style scoped lang="scss">
+	
+.booking-tips {
+	justify-content: center;
+	background-color: #fff;
+	border-radius: 41.1rpx;
+	margin-top: -100rpx;
+	width: 650rpx;
+	overflow-y: auto;
+}
+
+.my-box {
+	width: 100%;
+	overflow-x: auto;
+}
+
+/* 隐藏滚动条 */
+::-webkit-scrollbar {
+  display: none;
+}
+
+	
+.mt-11 {
+  margin-top: 20.63rpx;
+}
+.ml-11 {
+  margin-left: 20.63rpx;
+}
+.mt-3 {
+  margin-top: 5.63rpx;
+}
+.page {
+  background-color: #ffffff;
+  background-image: url('https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=c07af569900e34d63f1e91cbbae55df7.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=67be7f674ae84d0012275313&name=c07af569900e34d63f1e91cbbae55df7.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  width: 750rpx;
+  height: 100vh;
+}
+.font {
+  font-size: 37.5rpx;
+  font-family: FZSongKeBenXiuKaiS-R-GB;
+  line-height: 35.01rpx;
+  color: #000000;
+}
+.text {
+  line-height: 36.47rpx;
+}
+.pos_2 {
+  position: absolute;
+  left: 16.46rpx;
+  top: 45.38rpx;
+}
+.image {
+  width: 45rpx;
+  height: 45rpx;
+}
+.pos {
+  position: absolute;
+  right: 138.13rpx;
+  top: 40.25rpx;
+}
+.font_2 {
+  font-size: 30rpx;
+  font-family: FZSongKeBenXiuKaiS-R-GB;
+  line-height: 28.01rpx;
+  color: #000000;
+}
+.text_2 {
+  line-height: 27.54rpx;
+}
+.pos_3 {
+  position: absolute;
+  right: 19.33rpx;
+  top: 48.51rpx;
+}
+.section_2 {
+  padding: 20.63rpx 30.58rpx 24.98rpx 35.04rpx;
+  background-color: #ffffff;
+  border-radius: 18.75rpx;
+}
+.pos_4 {
+  position: absolute;
+  left: 15rpx;
+  right: 16.88rpx;
+  top: 110.63rpx;
+}
+.image_2 {
+  width: 65.63rpx;
+  height: 67.5rpx;
+}
+.text_3 {
+  color: #818181;
+  line-height: 32.38rpx;
+  font-size: 30rpx;
+}
+.group {
+  width: 167.03rpx;
+}
+.image_3 {
+  margin-left: 129.53rpx;
+  width: 37.5rpx;
+  height: 37.5rpx;
+}
+.font_3 {
+  font-size: 26.25rpx;
+  font-family: FZSongKeBenXiuKaiS-R-GB;
+  line-height: 24.3rpx;
+  color: #8b8b8b;
+}
+.text_4 {
+  margin-left: -167.03rpx;
+  color: #ffaaa5;
+  line-height: 25.54rpx;
+}
+.text_5 {
+  line-height: 36.34rpx;
+}
+.pos_5 {
+  position: absolute;
+  left: 16.18rpx;
+  top: 255.53rpx;
+}
+.section_3 {
+  padding: 41.36rpx 26.25rpx 32.81rpx 28.13rpx;
+  background-color: #ffffff;
+  border-radius: 18.75rpx;
+  box-shadow: 0rpx 7.5rpx 7.5rpx #00000040;
+}
+.pos_6 {
+  position: absolute;
+  left: 15rpx;
+  right: 16.88rpx;
+  top: 316.88rpx;
+}
+.text_6 {
+  margin-left: 3.17rpx;
+  line-height: 27.77rpx;
+}
+.text_7 {
+  margin-left: 3.17rpx;
+  margin-top: 33.88rpx;
+}
+.divider {
+  margin-top: 38.66rpx;
+  background-color: #a5a5a5;
+  height: 1.88rpx;
+}
+.equal-division {
+  align-self: stretch;
+  margin-top: 27.19rpx;
+}
+.section_4 {
+  width: 150rpx;
+  margin: 0 15rpx;
+}
+.equal-division-item {
+  padding: 14.4rpx 0 19.22rpx;
+  background-color: #f3f3f3;
+  border-radius: 9.38rpx;
+  height: 99.38rpx;
+}
+.font_4 {
+  font-size: 30rpx;
+  font-family: FZSongKeBenXiuKaiS-R-GB;
+  line-height: 20.04rpx;
+  color: #8b8b8b;
+}
+.group_2 {
+  margin-top: 29.06rpx;
+  padding: 34.69rpx 0 30.94rpx;
+  border-top: solid 1.88rpx #a5a5a5;
+}
+.group_1 {
+  margin-right: 3.77rpx;
+  // height: 373.13rpx;
+}
+
+.my_grid {
+	margin: 0 auto; 
+	display: grid;
+	grid-template-columns: repeat(5, 1fr);
+	grid-template-rows: repeat(2, 1fr);
+	row-gap: 36rpx; 
+	column-gap: 36rpx;
+	overflow-y: auto;
+	height: 250rpx;
+}
+
+.text-wrapper_1 {
+  padding: 39.38rpx 0 39.96rpx;
+  background-color: #ffffff;
+  border-radius: 9.38rpx;
+  width: 105rpx;
+  border: solid 1.88rpx #c35c5d;
+}
+.pos_1 {
+  // position: absolute;
+  // left: 0;
+  // top: 0;
+}
+.font_5 {
+  font-size: 30rpx;
+  font-family: FZSongKeBenXiuKaiS-R-GB;
+  line-height: 20.04rpx;
+  color: #323232;
+}
+.pos_7 {
+  position: absolute;
+  left: 24.11rpx;
+  top: 1020rpx;
+}
+.section_5 {
+  padding: 25.43rpx 35.63rpx 34.01rpx;
+  background-color: #ffffff;
+  border-radius: 37.5rpx;
+  box-shadow: 0rpx 7.5rpx 7.5rpx #00000040;
+}
+.pos_8 {
+  position: absolute;
+  left: 22.5rpx;
+  right: 22.5rpx;
+  top: 1080.75rpx;
+}
+.image_4 {
+  width: 120rpx;
+  height: 133.13rpx;
+}
+.text_8 {
+  line-height: 29.18rpx;
+}
+.font_6 {
+  font-size: 26.25rpx;
+  font-family: FZSongKeBenXiuKaiS-R-GB;
+  line-height: 24.3rpx;
+  color: #000000;
+}
+.text_9 {
+  line-height: 23.79rpx;
+}
+.text_10 {
+  line-height: 24.21rpx;
+}
+.text_12 {
+  line-height: 25.33rpx;
+}
+.group_3 {
+  margin-right: 3.02rpx;
+}
+.text_11 {
+  color: #000000;
+  font-size: 22.5rpx;
+  font-family: FZSongKeBenXiuKaiS-R-GB;
+  line-height: 21.09rpx;
+}
+.section_6 {
+  padding: 26.25rpx 27.15rpx;
+  background-color: #ffffff;
+}
+.pos_9 {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+}
+.text_13 {
+  line-height: 34.42rpx;
+}
+.text_14 {
+  margin-left: -10.14rpx;
+  line-height: 25.05rpx;
+}
+.text-wrapper_2 {
+  margin-right: 4.72rpx;
+  padding: 24.38rpx 0 24.49rpx;
+  background-color: #ffb6b9;
+  border-radius: 187.5rpx;
+  width: 241.88rpx;
+  height: 76.88rpx;
+}
+.text_15 {
+  color: #ffffff;
+}
+@import url(../../../common/css/global.css);
+</style>