jiangchengfeiyi-xiaochengxu/pages/clothesRent/component/clothesAttributePlus.vue

<template>
	<view class="flex-col page">
	  <view class="flex-col group">
	    <view class="flex-row justify-between self-stretch">
	      <text class="font text">请选择产品规格</text>
	      <image
		    @click="closePopup"
	        class="image"
	        :src="clothesRentUrl + '/component/cha.png'"
	      />
	    </view>
	    <view class="flex-row self-stretch group_2">
	      <image
	        class="shrink-0 image_2" mode="aspectFill"
	        :src="publicPath + photoProductsInfo.introImg"
	      />
	      <view class="flex-col shrink-0 group_3 ml-13">
	        <text class="self-stretch font_2 text_2">{{ photoProductsInfo.name }}</text>
	        <text class="mt-48 self-start font_2 text_3">￥{{ photoProductsInfo.price.toFixed(2) }}</text>
	      </view>
	    </view>
	    <view class="flex-col self-stretch">
	      <view class="flex-col justify-start items-start relative">
	        <view class="group_4"></view>
	        <text class="font_2 text_4 pos">妆造服务</text>
	      </view>
	      <view class="flex-row">
	        <view :style="styleObj1" class="flex-col justify-start items-center text-wrapper" @click="selectStatus(true)">
	          <text :style="fontObj1" class="font_3 text_5">本店上妆</text>
	        </view>
	        <view :style="styleObj2" class="flex-col justify-start items-center text-wrapper ml-17" @click="selectStatus(false)">
	          <text :style="fontObj2" class="font_3 text_6">无需妆造</text>
	        </view>
	      </view>
	    </view>
		
	    <text class="self-start font_2 text_7">拍摄场地</text>
		
	    <radio-group class="flex-row equal-division my-radio" @change="changeRadioStatus">
			
	      <view class="flex-col section equal-division-item" v-if="isShow1">
	        <view class="flex-row justify-between items-end self-stretch">
	          <image
	            class="image_3"
	            :src="clothesRentUrl + '/component/indoor.png'"
	          />
	          <!-- <view class="section_2"></view> -->
			  <radio class="section_2" color="#FFB6B9" value="室内" :checked="checked1"></radio>
	        </view>
	        <text class="self-start font_3 text_8 mt-5">室内</text>
	      </view>
		  
	      <view class="flex-col section equal-division-item" v-if="isShow2">
	        <view class="flex-row justify-between items-end self-stretch">
	          <image
	            class="image_4"
	            :src="clothesRentUrl + '/component/outdoor.png'"
	          />
	          <!-- <view class="section_2"></view> -->
			  <radio class="section_2" color="#FFB6B9" value="室外" :checked="checked2"></radio>
	        </view>
	        <text class="self-start font_3 text_8 mt-5">室外</text>
	      </view>
		  
	    </radio-group>
		
		
	  </view>
	  <view class="flex-row justify-between items-center group_5">
	    <view class="flex-row items-baseline">
	      <text class="font text_9">定金：</text>
	      <text class="font text_10">￥{{ photoProductsInfo.price.toFixed(2) }}</text>
	    </view>
	    <view @click="gotoSubmitOrderPage" class="flex-col justify-start items-center text-wrapper_2"><text class="text_11">确定</text></view>
	  </view>
	</view>
</template>

<script setup>
	import {onMounted, onUnmounted, ref} from 'vue'
	import { clothesRentUrl } from '../../../common/globalImagesUrl';
	import emitter from '../../../utils/emitter';
	import { publicPath } from '../../../common/globalImagesUrl';
	import { dealResult } from '../../../common/globalFunction';
	import { baseUrl } from '../../../api/request';
	import { getFonts } from '../../../common/globalFont';
	let style1 = { borderColor: '#FFB6B9', backgroundColor: '#FBDEDF'}
	let style2 = { borderColor: '#C3C3C3', backgroundColor: '#fff' }
	
	let fontStyle1 = { color: '#E79EA1' }
	let fontStyle2 = { color: '#323232' }
	
	const cookie = wx.getStorageSync('cookie')
	const isShow1 = ref(true)
	const isShow2 = ref(true)
	const checked1 = ref(true)
	const checked2 = ref(false)
	
	const photoProductsInfo = ref({})
	const styleObj1 = ref(style1)
	const styleObj2 = ref(style2)
	const fontObj1 = ref(fontStyle1)
	const fontObj2 = ref(fontStyle2)
	let point = true
	let scene = '室内'
	
	const closePopup = () => {
		emitter.emit('closeClothesAttributePlusPopup')
	}
	const getPhotoProductsInfoHandler = (val) => {
		console.log(val)
		photoProductsInfo.value = val
		if (val.shotScene === '室内') {
			isShow2.value = false
			checked1.value = true
			scene = '室内'
		} else if (val.shotScene === '室外') {
			isShow1.value = false
			checked2.value = true
			scene = '室外'
		}
	}
	
	const changeRadioStatus = (e) => {
		scene = e.detail.value
	}
	
	const selectStatus = (val) => {
		if (point && !val ) {
			 styleObj1.value = style2
			 styleObj2.value = style1
			 fontObj1.value = fontStyle2
			 fontObj2.value = fontStyle1
			 
			 point = !point
		}
		
		if (!point && val) {
			styleObj1.value = style1
			styleObj2.value = style2
			fontObj1.value = fontStyle1
			fontObj2.value = fontStyle2
			
			point = !point
		}
	}
	
	onMounted(() => {
		getFonts()
		emitter.on('getPhotoProductsInfo', getPhotoProductsInfoHandler)
	})
	
	onUnmounted(() => {
		emitter.off('getPhotoProductsInfo', getPhotoProductsInfoHandler)
	})
	
	
	const gotoSubmitOrderPage = async () => {
		let res = await checkPhotoProducts()
		if (!dealResult(res)) return ;
		
		uni.navigateTo({
			url: '/pages/book/photoProductsOrder/photoProductsOrder?isMakeup=' + point + '&scene=' + scene + '&id=' + photoProductsInfo.value.id
		})
	}
	
	const checkPhotoProducts = async () => {
		const res = await uni.request({
			url: baseUrl + '/advanceOrder/check/photoProducts',
			method: 'POST',
			header: {
				cookie
			},
			data: {
				id: photoProductsInfo.value.id
			}
		})
		return res
	}
	
</script>

<style scoped lang="scss">
	.my-radio {
		display: flex;
		justify-content: space-between;
	}
	.ml-13 {
	  margin-left: 24.38rpx;
	}
	.ml-17 {
	  margin-left: 31.88rpx;
	}
	.mt-5 {
	  margin-top: 9.38rpx;
	}
	.ml-19 {
	  margin-left: 35.63rpx;
	}
	.page {
	  background-color: #ffffff;
	  width: 100%;
	  overflow-y: auto;
	  overflow-x: hidden;
	  height: 100%;
	  border-radius: 20rpx 20rpx 0 0;	
	}
	.group {
	  padding: 37.5rpx 22.5rpx;
	  border-bottom: solid 1.88rpx #0000001f;
	}
	.font {
	  font-size: 37.5rpx;
	  font-family: FangZhengFonts;
	  color: #323232;
	}
	.text {
	  margin: 3.75rpx 0;
	  line-height: 36.34rpx;
	}
	.image {
	  margin-right: 3.75rpx;
	  width: 52.5rpx;
	  height: 41.25rpx;
	}
	.group_2 {
	  margin-top: 35.63rpx;
	}
	.image_2 {
	  border-radius: 18.75rpx;
	  width: 198.75rpx;
	  height: 200.63rpx;
	}
	.group_3 {
	  position: relative;
	  margin-right: 112.5rpx;
	  margin-bottom: 7.5rpx;
	  width: 369.38rpx;
	}
	.font_2 {
	  font-size: 33.75rpx;
	  font-family: FangZhengFonts;
	  line-height: 30.58rpx;
	  color: #323232;
	}
	.text_2 {
	  line-height: 41.25rpx;
	}
	.text_3 {
	  margin-left: 7.5rpx;
	  line-height: 22.54rpx;
	  position: absolute;
	  bottom: 0;
	}
	.group_4 {
	  margin-left: 26.25rpx;
	  border-radius: 9.38rpx;
	  width: 123.75rpx;
	  height: 97.95rpx;
	}
	.text_4 {
	  line-height: 32.31rpx;
	}
	.pos {
	  position: absolute;
	  left: 0;
	  top: 50%;
	  transform: translateY(-50%);
	}
	.text-wrapper {
	  padding: 15rpx 0;
	  background-color: #ffffff;
	  border-radius: 37.5rpx;
	  width: 159.38rpx;
	  height: 54.38rpx;
	  border: solid 1.88rpx #c3c3c3;
	}
	.font_3 {
	  font-size: 26.25rpx;
	  font-family: FangZhengFonts;
	  line-height: 24.21rpx;
	  color: #323232;
	}
	.text_5 {
	  line-height: 24.41rpx;
	}
	.text_6 {
	  line-height: 23.89rpx;
	}
	.text_7 {
	  margin-top: 33.75rpx;
	}
	.equal-division {
	  align-self: stretch;
	  margin: 41.25rpx 15rpx 0;
	}
	.section {
	  position: relative;
	  width: 320.63rpx;
	}
	.equal-division-item {
	  padding: 18.75rpx 22.5rpx;
	  background-color: #ffffff;
	  border-radius: 18.75rpx;
	  height: 157.5rpx;
	  border: solid 1.88rpx #c3c3c3;
	}
	.image_3 {
	  opacity: 0.85;
	  border-radius: 18.75rpx;
	  width: 138.75rpx;
	  height: 84.38rpx;
	}
	.section_2 {
	  margin-right: 15rpx;
	  background-color: #ffffff;
	  border-radius: 50%;
	  width: 45rpx;
	  height: 45rpx;
	}
	.text_8 {
	  margin-left: 45rpx;
	}
	.image_4 {
	  border-radius: 15rpx;
	  width: 138.75rpx;
	  height: 84.38rpx;
	}
	.group_5 {
	  padding: 37.5rpx 22.5rpx 31.88rpx;
	}
	.text_9 {
	  line-height: 34.42rpx;
	}
	.text_10 {
	  color: #e79ea1;
	  line-height: 25.05rpx;
	}
	.text-wrapper_2 {
	  padding: 22.5rpx 0;
	  background-color: #e79ea1;
	  border-radius: 187.5rpx;
	  width: 241.88rpx;
	  height: 76.88rpx;
	}
	.text_11 {
	  color: #ffffff;
	  font-size: 30rpx;
	  font-family: FangZhengFonts;
	  line-height: 28.01rpx;
	}
	@import url(../../../common/css/global.css);
</style>