写真产品已完成
This commit is contained in:
parent
0d54aa847c
commit
935ed9481f
341
pages/book/component/bookingSelected.vue
Normal file
341
pages/book/component/bookingSelected.vue
Normal file
|
|
@ -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>
|
||||
68
pages/book/component/bookingTips.vue
Normal file
68
pages/book/component/bookingTips.vue
Normal file
|
|
@ -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>
|
||||
154
pages/book/component/feeTips.vue
Normal file
154
pages/book/component/feeTips.vue
Normal file
|
|
@ -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>
|
||||
493
pages/book/photoProductsOrder/photoProductsOrder.vue
Normal file
493
pages/book/photoProductsOrder/photoProductsOrder.vue
Normal file
|
|
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user