400 lines
9.3 KiB
Vue
400 lines
9.3 KiB
Vue
<template>
|
||
<view class="flex-col page" :style="{ backgroundImage: 'url(' + bkgPubilcPath + ')' }">
|
||
<view class="flex-col self-stretch section">
|
||
<image
|
||
class="image_3" mode="aspectFill"
|
||
:src="publicPath + productObject.goodImg"
|
||
/>
|
||
<view class="flex-col list">
|
||
<view class="flex-col section_3">
|
||
<view class="self-start group">
|
||
<text class="font_2 text_3">￥</text>
|
||
<text class="text_2">{{ productObject.price }}</text>
|
||
</view>
|
||
<view class="flex-col self-stretch mt-15">
|
||
<text class="font text_4">{{ productObject.name }}</text>
|
||
<text class="font_2 text_5 mt-11">
|
||
{{ productObject.intro }}
|
||
</text>
|
||
</view>
|
||
<!-- <view class="flex-row items-baseline self-stretch group_2 mt-15">
|
||
<text class="font_3" style="margin-left: 0;">最近可预约时间：{{ specificDate }}</text>
|
||
<text class="font_3 ml-1" style="margin-left: 20rpx;">{{ specificTime }}</text>
|
||
</view> -->
|
||
</view>
|
||
|
||
|
||
<view class="flex-col section_4 mt-6">
|
||
<rich-text class="richText" :nodes="productObject.richText"></rich-text>
|
||
<!-- <text class="self-start font text_6">用户须知</text>
|
||
<text class="self-start font_2 text_7 text_1 mt-16">
|
||
1.请根据预约时间，提前10-15分钟到达活动地点，以便顺利参与体验。
|
||
</text>
|
||
<text class="self-start font_2 text_8 mt-16">2.穿着轻便、易清洗的衣物，以防止材料染色。</text>
|
||
<text class="self-stretch font_2 text_9 mt-16">
|
||
3.如您在购买服务后，因个人原因需要取消服务或者变更服务的预约时间，请您务必联系我们的客服。
|
||
</text>
|
||
<text class="self-start font_2 text_7 mt-16">
|
||
4.只要您在体验活动开始前取消购买，我们将为您提供全额退款服务。
|
||
</text>
|
||
<text class="self-stretch font_2 text_10 mt-16">
|
||
5.如遇特殊情况，如突发疾病或其他不可抗力因素，请及时与客服沟通，我们将根据实际情况处理退款事宜。
|
||
</text> -->
|
||
</view>
|
||
|
||
|
||
|
||
</view>
|
||
<view class="flex-row section_5">
|
||
<view class="flex-col items-center shrink-0 self-start">
|
||
<button style="background-color: #ffffff;" class="flex-col" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">
|
||
<image
|
||
class="image_4"
|
||
:src="workshopUrl + '/productmain/lxkf.png'"
|
||
/>
|
||
<text class="text_13 mt-3">客服</text>
|
||
</button>
|
||
</view>
|
||
<view class="flex-row flex-1 self-center ml-26">
|
||
<view class="flex-col justify-start items-center text-wrapper" @click="loadPopCart">
|
||
<text class="font_3 text_11">加入购物车</text>
|
||
</view>
|
||
<view class="flex-col justify-start items-center text-wrapper_2 ml-31" @click="loadPopBook">
|
||
<text class="font text_12">立即预约</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <text class="self-start text_14">服务详情</text> -->
|
||
<!-- <image
|
||
class="self-stretch image_5"
|
||
:src="productObject.detailImg"
|
||
mode="aspectFill"
|
||
/> -->
|
||
</view>
|
||
<uni-popup ref="popup" background-color="#fff">
|
||
<view class="popup-content">
|
||
<timeSelectVue></timeSelectVue>
|
||
</view>
|
||
</uni-popup>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref,onMounted, nextTick, onUnmounted } from 'vue'
|
||
import { onLoad } from "@dcloudio/uni-app";
|
||
import { getFonts } from '../../../common/globalFont';
|
||
import { baseUrl } from '../../../api/request';
|
||
import { workshopUrl } from '../../../common/globalImagesUrl';
|
||
import timeSelectVue from '../component/timeSelect.vue';
|
||
import emitter from '../../../utils/emitter' //导入emitter传值组件
|
||
import { publicPath,bkgPubilcPath } from '../../../common/globalImagesUrl';
|
||
const pid = ref(0) //商品id
|
||
const cookie = wx.getStorageSync("cookie") //请求头
|
||
const productObject = ref({})
|
||
const popup = ref(null) //弹窗对象
|
||
const pObj = {}
|
||
const appointmentDateVOList = ref([])
|
||
|
||
const closeTimeDialogHandler = () => {
|
||
close()
|
||
}
|
||
|
||
onMounted(()=>{
|
||
emitter.on('closeTimeDialog', closeTimeDialogHandler)
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
emitter.off('closeTimeDialog', closeTimeDialogHandler)
|
||
})
|
||
|
||
onLoad((options)=>{
|
||
getFonts()
|
||
pid.value = JSON.parse(options.info)
|
||
getProduct()
|
||
getBookingNumberMap()
|
||
})
|
||
const getProduct = async () =>{
|
||
const res = await uni.request({
|
||
url: baseUrl + '/goods/service/list/id',
|
||
method: 'POST',
|
||
data: {
|
||
id: pid.value
|
||
},
|
||
header: {
|
||
cookie
|
||
}
|
||
})
|
||
console.log('单个服务类商品信息---->',res.data.data);
|
||
if(res.data.code === 1) {
|
||
productObject.value = res.data.data
|
||
appointmentDateVOList.value = res.data.data.appointmentDateVOList
|
||
} else {
|
||
uni.showToast({
|
||
icon: 'error',
|
||
title: "请求错误"
|
||
})
|
||
return;
|
||
}
|
||
}
|
||
|
||
let countMap = new Map()
|
||
|
||
const getBookingNumberMap = async () => {
|
||
const res = await uni.request({
|
||
url: baseUrl + '/pending/list/advance/count',
|
||
method: 'POST',
|
||
data: {
|
||
id: pid.value
|
||
},
|
||
header: {
|
||
cookie
|
||
}
|
||
})
|
||
countMap = res.data.data
|
||
console.log(countMap)
|
||
}
|
||
|
||
const close =()=> { //关闭弹窗
|
||
nextTick(()=>{
|
||
popup.value.close()
|
||
})
|
||
}
|
||
|
||
const check = () => {
|
||
if (appointmentDateVOList.value.length === 0) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '当前服务类商品的所有时段已约满',
|
||
showCancel: false
|
||
})
|
||
return true;
|
||
}
|
||
return false
|
||
}
|
||
|
||
const loadPopCart =()=> {
|
||
if(check()) {
|
||
return ;
|
||
}
|
||
emitter.emit('getGoodData', productObject.value)
|
||
emitter.emit('getBookingNumberMap', countMap)
|
||
popup.value.open('bottom') //从底部弹
|
||
emitter.emit('count',1) //区别于加入购物车弹窗和立即预约弹窗
|
||
}
|
||
const loadPopBook = ()=> {
|
||
if (check()) {
|
||
return ;
|
||
}
|
||
emitter.emit('getGoodData', productObject.value)
|
||
emitter.emit('getBookingNumberMap', countMap)
|
||
popup.value.open('bottom') //从底部弹
|
||
emitter.emit('count',2) //区别于加入购物车弹窗和立即预约弹窗
|
||
}
|
||
|
||
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.richText {
|
||
word-break:break-all;
|
||
word-wrap:break-word;
|
||
}
|
||
button::after {
|
||
border: none;
|
||
}
|
||
.popup-content {
|
||
height: 85vh;
|
||
}
|
||
.ml-13 {
|
||
margin-left: 24.38rpx;
|
||
}
|
||
.mt-11 {
|
||
margin-top: 20.63rpx;
|
||
}
|
||
.mt-15 {
|
||
margin-top: 28.13rpx;
|
||
}
|
||
.ml-1 {
|
||
margin-left: 1.88rpx;
|
||
}
|
||
.mt-3 {
|
||
margin-top: 5.63rpx;
|
||
}
|
||
.ml-31 {
|
||
margin-left: 58.13rpx;
|
||
}
|
||
.page {
|
||
background-color: #ffffff;
|
||
width: 100%;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
height: 100vh;
|
||
}
|
||
.section {
|
||
padding-bottom: 41.25rpx;
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
}
|
||
.section_2 {
|
||
padding: 22.5rpx 22.5rpx 20.63rpx;
|
||
background-color: #ffffff;
|
||
}
|
||
.image_2 {
|
||
width: 33.75rpx;
|
||
height: 35.63rpx;
|
||
}
|
||
.font {
|
||
font-size: 30rpx;
|
||
font-family: FangZhengFonts;
|
||
line-height: 29.7rpx;
|
||
}
|
||
.text {
|
||
color: #323232;
|
||
line-height: 28.37rpx;
|
||
}
|
||
.image {
|
||
border-radius: 50%;
|
||
width: 46.88rpx;
|
||
height: 46.88rpx;
|
||
}
|
||
.image_3 {
|
||
margin-top: 15rpx;
|
||
width: 100vw;
|
||
height: 70vw;
|
||
}
|
||
.list {
|
||
// margin-top: 18.75rpx;
|
||
}
|
||
.section_3 {
|
||
padding: 36.73rpx 17.1rpx 39.64rpx 17.12rpx;
|
||
width: 726rpx;
|
||
margin: 0 auto;
|
||
background-color: #fff;
|
||
border-radius: 18.75rpx;
|
||
}
|
||
.group {
|
||
margin-left: 12.04rpx;
|
||
line-height: 29.7rpx;
|
||
}
|
||
.font_2 {
|
||
font-size: 26.25rpx;
|
||
font-family: FangZhengFonts;
|
||
line-height: 31.88rpx;
|
||
color: #323232;
|
||
}
|
||
.text_3 {
|
||
color: #ff0000;
|
||
line-height: 16.91rpx;
|
||
}
|
||
.text_2 {
|
||
color: #ff0000;
|
||
font-size: 45rpx;
|
||
font-family: FangZhengFonts;
|
||
line-height: 29.7rpx;
|
||
}
|
||
.text_4 {
|
||
margin-left: 14rpx;
|
||
color: #323233;
|
||
line-height: 35.63rpx;
|
||
}
|
||
.text_5 {
|
||
margin-left: 5.79rpx;
|
||
margin-right: 3.58rpx;
|
||
}
|
||
.group_2 {
|
||
padding: 0 14.94rpx;
|
||
}
|
||
.font_3 {
|
||
font-size: 26.25rpx;
|
||
font-family: FangZhengFonts;
|
||
line-height: 24.92rpx;
|
||
color: #323232;
|
||
}
|
||
.section_4 {
|
||
background-color: #ffffff;
|
||
border-radius: 18.75rpx;
|
||
width: 726rpx;
|
||
padding: 20rpx;
|
||
margin: 20rpx auto 160rpx;
|
||
}
|
||
.text_6 {
|
||
margin-left: 3.71rpx;
|
||
color: #323232;
|
||
line-height: 28.01rpx;
|
||
text-decoration: underline;
|
||
}
|
||
.text_7 {
|
||
width: 648.75rpx;
|
||
}
|
||
.text_1 {
|
||
margin-left: 3.66rpx;
|
||
}
|
||
.text_8 {
|
||
margin-left: 3.86rpx;
|
||
line-height: 25.63rpx;
|
||
}
|
||
.text_9 {
|
||
margin-left: 3.96rpx;
|
||
}
|
||
.text_10 {
|
||
margin-left: 3.96rpx;
|
||
margin-right: 3.77rpx;
|
||
}
|
||
.section_5 {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
margin-top: 31.88rpx;
|
||
padding: 22.5rpx 33.75rpx 30.13rpx 39.38rpx;
|
||
background-color: #ffffff;
|
||
}
|
||
.image_4 {
|
||
width: 46.88rpx;
|
||
height: 46.88rpx;
|
||
}
|
||
.text_13 {
|
||
color: #9d2624;
|
||
font-size: 22.5rpx;
|
||
font-family: Open Sans;
|
||
line-height: 20.72rpx;
|
||
}
|
||
.text-wrapper {
|
||
padding: 29.1rpx 0 28.69rpx;
|
||
flex: 1 1 260.63rpx;
|
||
background-color: #e79ea1;
|
||
border-radius: 93.75rpx;
|
||
height: 82.5rpx;
|
||
}
|
||
.text_11 {
|
||
color: #ffffff;
|
||
line-height: 24.71rpx;
|
||
}
|
||
.text-wrapper_2 {
|
||
padding: 26.49rpx 0 28.57rpx;
|
||
flex: 1 1 260.63rpx;
|
||
background-color: #c35c5d;
|
||
border-radius: 93.75rpx;
|
||
height: 82.5rpx;
|
||
}
|
||
.text_12 {
|
||
color: #ffffff;
|
||
line-height: 27.43rpx;
|
||
}
|
||
.text_14 {
|
||
margin-left: 4.74rpx;
|
||
margin-top: 32.87rpx;
|
||
color: #323232;
|
||
font-size: 30rpx;
|
||
font-family: Open Sans;
|
||
line-height: 27.71rpx;
|
||
}
|
||
.image_5 {
|
||
margin: 18.17rpx 0 140.17rpx 0;
|
||
width: 100vw;
|
||
// height: 531.5vw;
|
||
}
|
||
@import url(../../../common/css/global.css);
|
||
</style>
|