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

<template>
	<view class="flex-col page">
	  <view class="flex-row justify-between group">
	    <text class="font text">请选择租赁天数</text>
	    <image
		  @click="closePopup"
	      class="image"
	      :src="clothesRentUrl + '/component/cha.png'"
	    />
	  </view>
	  <view class="flex-row items-center group view">
	    <image
	      class="image_2" mode="aspectFill"
	      :src="publicPath + clothesInfo.image"
	    />
	    <view class="flex-col items-start flex-1 ml-13">
	      <text class="font_2 text_2">{{ clothesInfo.name }}</text>
	      <text class="mt-48 font_2 text_3">￥{{ clothesInfo.price.toFixed(2) }}</text>
	    </view>
	  </view>
	  <view class="flex-row justify-between items-center group_2 view_2">
	    <text class="font">租赁天数</text>
	    <view class="flex-row">
	      <view class="flex-col justify-start items-center image-wrapper" @click="sub">
	        <image
	          class="image_3"
	          :src="clothesRentUrl + '/component/sub.png'"
	        />
	      </view>
	      <view class="ml-2 flex-col justify-start items-center text-wrapper"><text class="text_4">{{ cnt }}</text></view>
	      <view class="ml-2 flex-col justify-start items-center image-wrapper_2" @click="add">
	        <image
	          class="image_3"
	          :src="clothesRentUrl + '/component/add.png'"
	        />
	      </view>
	    </view>
	  </view>
	  <view class="divider"></view>
	  <view class="flex-row justify-between items-start group_2 view_3">
	    <view class="flex-col justify-start items-start relative group_3">
	      <view class="group_4"></view>
	      <text class="font text_5 pos">定金：</text>
	      <text class="font text_6 pos_2">￥{{ totalAmount.toFixed(2) }}</text>
	    </view>
	    <view class="flex-col justify-start items-center text-wrapper_2"><text class="text_7">确定</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';
	const clothesInfo = ref({})
	const cnt = ref(1)
	let singleAmount = 0
	const totalAmount = ref(0)
	const sub = () => {
		if (cnt.value > 1) {
			cnt.value --
			totalAmount.value = singleAmount * cnt.value
		} 
	}
	const add = () => {
		if (cnt.value < clothesInfo.value.period) {
			cnt.value ++
			totalAmount.value = singleAmount * cnt.value
		}
	}
	
	const closePopup = () => {
		emitter.emit('closeClothesAttributePopup')
	}
	
	const getClothesInfoHandler = (val) => {
		clothesInfo.value = val
		singleAmount = val.price
		totalAmount.value = singleAmount * cnt.value
	}
	
	onMounted(() => {
		emitter.on('getClothesInfo', getClothesInfoHandler)
	})
	
	onUnmounted(() => {
		emitter.off('getClothesInfo', getClothesInfoHandler)
	})
	
</script>

<style scoped lang="scss">
	
	.ml-13 {
	  margin-left: 24.38rpx;
	}
	.page {
	  padding-top: 31.88rpx;
	  background-color: #ffffff;
	  width: 100%;
	  overflow-y: auto;
	  overflow-x: hidden;
	  height: 100%;
	  border-radius: 20rpx 20rpx 0 0;	
	}
	.group {
	  padding: 0 22.5rpx;
	  position: relative;
	}
	.font {
	  font-size: 37.5rpx;
	  font-family: FZSongKeBenXiuKaiS-R-GB;
	  line-height: 36.04rpx;
	  color: #323232;
	}
	.text {
	  margin: 3.75rpx 0;
	  line-height: 36.34rpx;
	}
	.image {
	  width: 52.5rpx;
	  height: 41.25rpx;
	}
	.view {
	  margin-top: 35.63rpx;
	}
	.image_2 {
	  border-radius: 18.75rpx;
	  width: 198.75rpx;
	  height: 200.63rpx;
	}
	.font_2 {
	  font-size: 33.75rpx;
	  font-family: FZSongKeBenXiuKaiS-R-GB;
	  color: #323232;
	}
	.text_2 {
	  position: absolute;
	  top: 0;
	  line-height: 41.25rpx;
	  width: 369.38rpx;
	}
	.text_3 {
	  position: absolute;
	  bottom: 0;
	  margin-left: 7.5rpx;
	  line-height: 22.54rpx;
	}
	.group_2 {
	  padding: 0 26.25rpx;
	}
	.view_2 {
	  margin-top: 60rpx;
	}
	.image-wrapper {
	  padding: 11.25rpx 0;
	  background-color: #fbdedf;
	  border-radius: 9.38rpx 0rpx 0rpx 9.38rpx;
	  width: 48.06rpx;
	  height: 51.04rpx;
	}
	.image_3 {
	  width: 28.13rpx;
	  height: 30rpx;
	}
	.text-wrapper {
	  padding: 18.25rpx 0 18.75rpx;
	  background-color: #fbdedf;
	  width: 62.06rpx;
	  height: 51.04rpx;
	}
	.text_4 {
	  color: #323232b3;
	  font-size: 26.25rpx;
	  font-family: Open Sans;
	  line-height: 19.01rpx;
	}
	.image-wrapper_2 {
	  padding: 11.25rpx 0;
	  background-color: #fbdedf;
	  border-radius: 0rpx 9.38rpx 9.38rpx 0rpx;
	  width: 48.06rpx;
	  height: 51.04rpx;
	}
	.divider {
	  margin-top: 30rpx;
	  background-color: #0000001f;
	  height: 1.88rpx;
	}
	.view_3 {
	  margin-top: 37.5rpx;
	}
	.group_3 {
	  margin-top: 18.75rpx;
	}
	.group_4 {
	  margin-left: 22.5rpx;
	  border-radius: 9.38rpx 9.38rpx 0 0;
	  width: 60vw;
	  height: 89.06rpx;
	}
	.text_5 {
	  line-height: 34.42rpx;
	}
	.pos {
	  position: absolute;
	  left: 0;
	  top: 2.46rpx;
	}
	.text_6 {
	  color: #c35c5d;
	  line-height: 25.05rpx;
	}
	.pos_2 {
	  position: absolute;
	  left: 100rpx;
	  top: 9.17rpx;
	}
	.text-wrapper_2 {
	  padding: 22.5rpx 0;
	  background-color: #e79ea1;
	  border-radius: 187.5rpx;
	  width: 241.88rpx;
	  height: 76.88rpx;
	}
	.text_7 {
	  color: #ffffff;
	  font-size: 30rpx;
	  font-family: FZSongKeBenXiuKaiS-R-GB;
	  line-height: 28.01rpx;
	}
	@import url(../../../common/css/global.css);
</style>