314 lines
7.4 KiB
Vue
314 lines
7.4 KiB
Vue
<template>
|
||
<view class="flex-col page">
|
||
<view class="flex-col self-stretch section">
|
||
<image
|
||
class="image_3"
|
||
:src="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.introDetail }}
|
||
</text>
|
||
</view>
|
||
<view class="flex-row items-baseline self-stretch group_2 mt-15">
|
||
<text class="font_3">最近可预约时间：2024.11.11</text>
|
||
<text class="font_3 ml-1">9：30 - 10：30</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-col section_4 mt-6">
|
||
<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">
|
||
<image
|
||
class="image_4"
|
||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FeWZifLdN-kefu.png"
|
||
/>
|
||
<text class="text_13 mt-3">客服</text>
|
||
</view>
|
||
<view class="flex-row flex-1 self-center ml-26">
|
||
<view class="flex-col justify-start items-center text-wrapper" @click="loadPop">
|
||
<text class="font_3 text_11">加入购物车</text>
|
||
</view>
|
||
<view class="flex-col justify-start items-center text-wrapper_2 ml-31">
|
||
<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">
|
||
<timePopUpVue :pid="pid"></timePopUpVue>
|
||
</view>
|
||
</uni-popup>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref,onMounted } from 'vue'
|
||
import { onLoad } from "@dcloudio/uni-app";
|
||
import { baseUrl } from '../../../api/request';
|
||
import timePopUpVue from '../component/timePopUp.vue';
|
||
import emitter from '../../../utils/emitter' //导入emitter传值组件
|
||
const pid = ref(0) //商品id
|
||
const cookie = wx.getStorageSync("cookie") //请求头
|
||
const productObject = ref({})
|
||
const popup = ref(null) //弹窗对象
|
||
onMounted(()=>{
|
||
emitter.on('close',()=>{
|
||
close()
|
||
})
|
||
})
|
||
onLoad((options)=>{
|
||
pid.value = JSON.parse(options.info)
|
||
getProduct()
|
||
})
|
||
const getProduct = async() =>{
|
||
const res = await uni.request({
|
||
url: baseUrl + '/goods/service/list/id',
|
||
method: 'POST',
|
||
data: {
|
||
id: pid.value
|
||
},
|
||
header: {
|
||
cookie
|
||
}
|
||
})
|
||
if(res.data.code === 1) {
|
||
productObject.value = res.data.data
|
||
} else {
|
||
uni.showToast({
|
||
icon: 'error',
|
||
title: "请求错误"
|
||
})
|
||
return;
|
||
}
|
||
}
|
||
const close =()=> { //关闭弹窗
|
||
popup.value.close()
|
||
}
|
||
const loadPop =()=> {
|
||
popup.value.open('bottom') //从底部弹
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.popup-content {
|
||
height: 70vh;
|
||
}
|
||
.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: 100%;
|
||
}
|
||
.section {
|
||
padding-bottom: 41.25rpx;
|
||
background-image: url('https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FJULGLADX-feiyigongfang.png');
|
||
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: FZSongKeBenXiuKaiS-R-GB;
|
||
line-height: 29.7rpx;
|
||
}
|
||
.text {
|
||
color: #000000;
|
||
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;
|
||
background-color: #ffffffcc;
|
||
border-radius: 37.5rpx;
|
||
}
|
||
.group {
|
||
margin-left: 12.04rpx;
|
||
line-height: 29.7rpx;
|
||
}
|
||
.font_2 {
|
||
font-size: 26.25rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
line-height: 31.88rpx;
|
||
color: #323232;
|
||
}
|
||
.text_3 {
|
||
color: #ff0000;
|
||
line-height: 16.91rpx;
|
||
}
|
||
.text_2 {
|
||
color: #ff0000;
|
||
font-size: 45rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
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: FZSongKeBenXiuKaiS-R-GB;
|
||
line-height: 24.92rpx;
|
||
color: #000000;
|
||
}
|
||
.section_4 {
|
||
padding: 31.63rpx 18.04rpx 56.83rpx 26.76rpx;
|
||
background-color: #ffffffcc;
|
||
border-radius: 37.5rpx;
|
||
}
|
||
.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: #e79ea14d;
|
||
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: #e79ea1;
|
||
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: #000000;
|
||
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>
|