494 lines
11 KiB
Vue
494 lines
11 KiB
Vue
|
<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>
|