293 lines
6.3 KiB
Vue
293 lines
6.3 KiB
Vue
<template>
|
|
<view class="flex-col justify-start relative page" :style="{ backgroundImage: 'url(' + bkgUrl + ')'}">
|
|
<view class="section" :style="{ backgroundImage: 'url(' + bkgUrl + ')'}"></view>
|
|
<image
|
|
class="image pos"
|
|
:src="obj.introImg"
|
|
/>
|
|
<view class="flex-col items-start section_2 pos_2">
|
|
<text class="font text">{{ obj.name }}</text>
|
|
<text class="mt-18 font text_2">￥{{ obj.totalAmountPrice.toFixed(2) }}起</text>
|
|
</view>
|
|
<text class="font_2 pos_3">服务&交付标准</text>
|
|
<view class="flex-row equal-division">
|
|
<view class="flex-col items-center group equal-division-item">
|
|
<image
|
|
class="image_2"
|
|
:src="bookUrl + '/photoProductDetail/zx.png'"
|
|
/>
|
|
<text class="font_3 mt-11">1组造型</text>
|
|
</view>
|
|
<view class="ml-38 flex-col items-center group equal-division-item">
|
|
<image
|
|
class="image_2"
|
|
:src="bookUrl + '/photoProductDetail/fz.png'"
|
|
/>
|
|
<text class="font_3 mt-11">1套服装</text>
|
|
</view>
|
|
<view class="ml-38 flex-col items-center group equal-division-item">
|
|
<image
|
|
class="image_2"
|
|
:src="bookUrl + '/photoProductDetail/bj.png'"
|
|
/>
|
|
<text class="font_3 mt-11">1种背景</text>
|
|
</view>
|
|
</view>
|
|
<image
|
|
class="image_3 pos_4"
|
|
src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=6697ed477f5159bddd4ba87ba7ccd849.png"
|
|
/>
|
|
<text class="font_2 text_3 pos_5">产品详情</text>
|
|
<text class="font_2 text_4 pos_6">服务说明</text>
|
|
<image
|
|
class="image_4 pos_7"
|
|
:src="obj.detailImg"
|
|
/>
|
|
<view class="flex-col justify-start items-end section_3 pos_8">
|
|
<view class="flex-col justify-start items-center text-wrapper" @click="openBookingPopup">
|
|
<text class="font_3 text_5">立即预约</text></view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<uni-popup ref="bookingSelected" :maskClick="false">
|
|
<view class="book-selected">
|
|
<bookingSelectedVue></bookingSelectedVue>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onLoad } from "@dcloudio/uni-app";
|
|
import {nextTick, onMounted, onUnmounted, ref} from 'vue'
|
|
import emitter from "../../../utils/emitter";
|
|
import bookingSelectedVue from "../component/bookingSelected.vue";
|
|
import { baseUrl } from "../../../api/request";
|
|
import { bookUrl } from "../../../common/globalImagesUrl";
|
|
import { getFonts } from '../../../common/globalFont';
|
|
const cookie = wx.getStorageSync("cookie") //请求头
|
|
const id = ref({})
|
|
const bookingSelected = ref(null)
|
|
const obj = ref({})
|
|
const type = ref('')
|
|
const bookingDateVOList =ref([])
|
|
const bkgUrl = ref(bookUrl + '/photoProductDetail/bkg.png')
|
|
|
|
onLoad((options) => {
|
|
getFonts()
|
|
console.log(options)
|
|
id.value = options.id
|
|
if (options.type) {
|
|
type.value = options.type
|
|
}
|
|
getPhotoProductsById()
|
|
})
|
|
|
|
|
|
const closeBookingPopupHandler = () => {
|
|
nextTick(() => {
|
|
if (bookingSelected.value) {
|
|
bookingSelected.value.close()
|
|
}
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
emitter.on('closeBookingPopup', closeBookingPopupHandler)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
emitter.off('closeBookingPopup', closeBookingPopupHandler)
|
|
})
|
|
|
|
|
|
const getPhotoProductsById = async () => {
|
|
const res = await uni.request({
|
|
url: baseUrl + '/photoProducts/list/detail',
|
|
method: 'POST',
|
|
header: {
|
|
cookie
|
|
},
|
|
data: {
|
|
id: id.value
|
|
}
|
|
})
|
|
console.log(res.data.data)
|
|
obj.value = res.data.data
|
|
obj.value.totalAmountPrice = obj.value.minNumber * obj.value.price
|
|
bookingDateVOList.value = res.data.data.bookingDateVOList
|
|
}
|
|
|
|
|
|
const openBookingPopup = () => {
|
|
if (bookingDateVOList.value.length === 0) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '当前写真产品的所有时段已约满',
|
|
showCancel: false
|
|
})
|
|
return ;
|
|
}
|
|
emitter.emit('getProductObj', obj.value)
|
|
emitter.emit('getProductsType', type.value)
|
|
bookingSelected.value.open('bottom')
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.book-selected {
|
|
height: 1100rpx;
|
|
justify-content: center;
|
|
background-color: #fff;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
}
|
|
.mt-11 {
|
|
margin-top: 20.63rpx;
|
|
}
|
|
.page {
|
|
background-color: #ffffff;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
height: 100%;
|
|
}
|
|
.section {
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
width: 750rpx;
|
|
height: 2726.25rpx;
|
|
}
|
|
.image {
|
|
width: 100vw;
|
|
height: 106vw;
|
|
}
|
|
.pos {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
.section_2 {
|
|
padding: 37.5rpx 56.25rpx 41.25rpx;
|
|
background-color: #ebe6e3;
|
|
border-radius: 18.75rpx;
|
|
box-shadow: 0rpx 7.5rpx 7.5rpx #04040440;
|
|
}
|
|
.pos_2 {
|
|
position: absolute;
|
|
left: 22.5rpx;
|
|
right: 22.5rpx;
|
|
top: 750rpx;
|
|
}
|
|
.font {
|
|
font-size: 45rpx;
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|
color: #000000;
|
|
}
|
|
.text {
|
|
line-height: 43.76rpx;
|
|
}
|
|
.text_2 {
|
|
margin-left: 7.5rpx;
|
|
line-height: 40.26rpx;
|
|
}
|
|
.font_2 {
|
|
font-size: 37.5rpx;
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|
line-height: 36.34rpx;
|
|
color: #000000;
|
|
}
|
|
.pos_3 {
|
|
position: absolute;
|
|
left: 29.74rpx;
|
|
top: 1003.65rpx;
|
|
}
|
|
.equal-division {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 1077.51rpx;
|
|
}
|
|
.image_2 {
|
|
width: 128.01rpx;
|
|
height: 128.01rpx;
|
|
}
|
|
.font_3 {
|
|
font-size: 30rpx;
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|
line-height: 27.3rpx;
|
|
color: #000000;
|
|
}
|
|
.group {
|
|
flex: 1 1 202.5rpx;
|
|
}
|
|
.equal-division-item {
|
|
padding: 11.25rpx 0;
|
|
}
|
|
.image_3 {
|
|
width: 256.88rpx;
|
|
height: 76.88rpx;
|
|
}
|
|
.pos_4 {
|
|
position: absolute;
|
|
left: 116.25rpx;
|
|
top: 1280.63rpx;
|
|
}
|
|
.text_3 {
|
|
line-height: 36.62rpx;
|
|
}
|
|
.pos_5 {
|
|
position: absolute;
|
|
left: 106.61rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.text_4 {
|
|
line-height: 35.89rpx;
|
|
}
|
|
.pos_6 {
|
|
position: absolute;
|
|
right: 103.39rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.image_4 {
|
|
width: 100vw;
|
|
height: 150vw;
|
|
}
|
|
.pos_7 {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 183.75rpx;
|
|
}
|
|
.section_3 {
|
|
padding: 18.75rpx 0;
|
|
background-color: #ffffff;
|
|
}
|
|
.pos_8 {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: 0 auto;
|
|
}
|
|
.text-wrapper {
|
|
margin-right: 11.25rpx;
|
|
padding: 26.25rpx 0;
|
|
background-color: #ffb6b9;
|
|
border-radius: 187.5rpx;
|
|
width: 241.88rpx;
|
|
}
|
|
.text_5 {
|
|
color: #ffffff;
|
|
line-height: 27.43rpx;
|
|
}
|
|
@import url(../../../common/css/global.css);
|
|
</style>
|