jiangchengfeiyi-xiaochengxu/pages/workshop/productmain/productmain.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>