jiangchengfeiyi-xiaochengxu/pages/book/myPhotoProductDetail/myPhotoProductDetail.vue

<template>
	<view class="flex-col justify-start relative page" :style="{ backgroundImage: 'url(' + bkgPubilcPath + ')'}">
	  <image
	    class="image pos" mode="aspectFill"
	    :src="publicPath + (isShow ? obj.introImg : obj.image)"
	  />
	  <view class="flex-col items-start section_2 pos_2">
	    <text class="font text">{{ obj.name }}</text>
	    <text class="mt-20 font text_2">￥{{ obj.price.toFixed(2) }}{{ isShow ? '起' : '/天' }}</text>
		<button class="customer" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">
			<customerServiceVue></customerServiceVue>
		</button>
	  </view>
	  <view class="section_3 pos_3">
		  <rich-text :nodes="obj.richText"></rich-text>
	  </view>
	  <view class="flex-col justify-start items-center section_4 pos_4">
	    <view class="flex-col justify-start items-center text-wrapper" @click="openPopup"><text class="text_3">立即预约</text></view>
	  </view>
	</view>
	
	<uni-popup ref="rent" :safe-area="false">
		<view class="rent">
			<clothesAttributeVue></clothesAttributeVue>
		</view>
	</uni-popup>
	
	
	<uni-popup ref="book" :safe-area="false">
		<view class="book">
			<clothesAttributePlusVue></clothesAttributePlusVue>
		</view>
	</uni-popup>
	
</template>

<script setup>
	import {nextTick, onMounted, onUnmounted, ref} from 'vue'
	import { baseUrl } from '../../../api/request';
	import { bookUrl,bkgPubilcPath } from '../../../common/globalImagesUrl';
	import { publicPath } from '../../../common/globalImagesUrl';
	import { onLoad } from "@dcloudio/uni-app";
	import clothesAttributeVue from '../../clothesRent/component/clothesAttribute.vue';
	import clothesAttributePlusVue from '../../clothesRent/component/clothesAttributePlus.vue';
	import emitter from '../../../utils/emitter';
	import { getFonts } from '../../../common/globalFont';
	import customerServiceVue from '../component/customerService.vue';

	const book = ref(null)
	const rent = ref(null)
	const cookie = wx.getStorageSync("cookie")  //请求头
	const bkgUrl = ref(bookUrl + '/myPhotoProductDetail/bkg.png')
	const isShow = ref(true)
	const id = ref(0)
	const obj = ref({})
	const bookingDateVOList = ref([])
	
	
	const closeClothesAttributePopupHandler = () => {
		nextTick(() => {
			if (rent.value) {
				rent.value.close()
			}
		})
	}
	
	const closeClothesAttributePlusPopupHandler = () => {
		nextTick(() => {
			if (book.value) {
				book.value.close()
			}
		})
	}
	
	
	onLoad((options) => {
		getFonts()
		id.value = JSON.parse(options.id)
		isShow.value = JSON.parse(options.isShow)
	})
	
	onMounted(() => {
		if (isShow.value) {
			getPhotoProductsById(id.value)
		} else {
			getClothesById(id.value)
		}
		emitter.on('closeClothesAttributePopup', closeClothesAttributePopupHandler)
		
		emitter.on('closeClothesAttributePlusPopup', closeClothesAttributePlusPopupHandler)
	})
	
	onUnmounted(() => {
		emitter.off('closeClothesAttributePopup', closeClothesAttributePopupHandler)
		
		emitter.off('closeClothesAttributePlusPopup', closeClothesAttributePlusPopupHandler)
	})
	
	const getPhotoProductsById = async (val) => {
		const res = await uni.request({
			url: baseUrl + '/photoProducts/list/detail',
			method: 'POST',
			header: {
				cookie
			},
			data: {
				id: val
			}
		})
		obj.value = res.data.data
		bookingDateVOList.value = res.data.data.bookingDateVOList
		console.log(obj.value)
	}
	
	const getClothesById = async (val) => {
		const res = await uni.request({
			url: baseUrl + '/clothes/get/id',
			method: 'POST',
			header: {
				cookie
			},
			data: {
				id: val
			}
		})
		obj.value = res.data.data
		console.log(obj.value)
	}
	
	const openPopup = () => {
		if (isShow.value) {
			if (bookingDateVOList.value.length === 0) {
				uni.showModal({
					title: '提示',
					content: '当前写真产品的所有时段已约满',
					showCancel: false
				})
				return ;
			}
			emitter.emit('getPhotoProductsInfo', obj.value)
			book.value.open('bottom')
		} else {
			emitter.emit('getClothesInfo', obj.value)
			rent.value.open('bottom')
		}
	}
	
</script>

<style scoped lang="scss">
	
button {
	padding: 0;
	margin: 0;
	background-color: #fff;
}
button::after{
	border: none; 
}
.customer {
	position: absolute;
	right: 52.5rpx;
	bottom: 45rpx;
	display: flex;
	align-items: center;
	height: 60rpx;
}
.rent {
	justify-content: center;
	background-color: #fff;
	border-radius: 20rpx 20rpx 0 0;	
}
.book {
	justify-content: center;
	background-color: #fff;
	border-radius: 20rpx 20rpx 0 0;	
}
.page {
  background-color: #ffffff;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
}
.image {
  width: 100vw;
  height: 106vw;
}
.pos {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
.section_2 {
  padding: 37.5rpx 52.5rpx 45rpx;
  background-color: #ffffff;
  border-radius: 18.75rpx;
  box-shadow: 11.25rpx 11.25rpx 11.25rpx #00000026;
}
.pos_2 {
  position: absolute;
  left: 18.75rpx;
  right: 18.77rpx;
  top: 750rpx;
}
.font {
  font-size: 45rpx;
  font-family: FangZhengFonts;
  color: #323232;
}
.text {
  line-height: 43.76rpx;
}
.text_2 {
  line-height: 33.22rpx;
}
.section_3 {
  background-color: #ffffff;
  border-radius: 18.75rpx;
  width: 712.5rpx;
  height: auto;
}
.pos_3 {
  padding: 40rpx;
  margin: 984.38rpx 18.75rpx 200rpx;
}
.section_4 {
  padding: 24.38rpx 0 16.88rpx;
  background-color: #ffffff;
}
.pos_4 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
.text-wrapper {
  padding: 26.25rpx 0;
  background-color: #e79ea1;
  border-radius: 187.5rpx;
  width: 573.75rpx;
}
.text_3 {
  color: #ffffff;
  font-size: 30rpx;
  font-family: FangZhengFonts;
  line-height: 28.84rpx;
}
@import url(../../../common/css/global.css);
</style>