zx_flk_app/component/carPlan/carPlan.vue

<template>
	<view  class="show-more">
		<view class="more-info">
			<view class="flex-row model-title">
				<view style="margin-right: 24rpx;"><img style="width: 160rpx;height: 160rpx;border-radius: 16rpx;" :src="params.image" alt=""></view>
				<view class="car-model-detail flex-row">
					<!-- <priceTool :price="58" :font_size="40"/> -->
					<allPrice :amount="(price/100)"/>
					<view v-if="duration_unit!=100" class="car-model-price-view">
						<text style="margin-right: 12rpx;">已选择</text>
						<text>{{leaseUnitsResult}}</text>
						<text>时长 {{count}} 
							<text v-if="selectType==1">日</text>
							<text v-if="selectType==2">月</text>
							<text v-if="selectType==3">年</text>
						</text>
						<text>共计{{tools.countToDay(count,selectType)}}天</text>
					</view>
					<view class="car-model-tip">现车 随时可到店提车</view>
				</view>
				<view class="close-img">
					<image style="width: 24rpx;height: 24rpx;" @tap="closeShowMore"
						src="https://qiniu.bms16.com/FoWVlo-Nmx6wTDpsL2Rf9_BamU7L" />
				</view>
			</view>
			<view class="car-plan-view">
				<view class="car-plan-title">用车方案</view>
				<view class="car-plan-list-view flex-row">
					<view v-for="(item,index) in params.rental_setting" :key="index" @tap="tapSelectType" :class="['flex-row' , (selectType == item.hire_duration_unit ? 'car-plan-list-i' : 'car-plan-list')] " 
					:data-price="item.hire_price"
					:data-select_type="item.hire_duration_unit">
						<view :class="(selectType == item.hire_duration_unit ? 'car-plan-unit-i' : 'car-plan-unit') ">
							<text v-if="item.hire_duration_unit==1">日租</text>
							<text v-if="item.hire_duration_unit==2">月租</text>
							<text v-if="item.hire_duration_unit==3">年租</text>
						</view>
						<view :class="(selectType == item.hire_duration_unit ? 'car-plan-price-i' : 'car-plan-price') ">$<text style="font-size: 48rpx;margin-left: 6rpx;">{{item.hire_price/100}}</text></view>
					</view>
					<view  @tap="tapSelectType" :class="['flex-row' , (selectType == 100 ? 'car-plan-list-i' : 'car-plan-list') ]" 
					:data-price="params.sell_price"
					:data-select_type="100">
						<view :class="(selectType == 100 ? 'car-plan-unit-i' : 'car-plan-unit') ">购买</view>
						<view :class="(selectType == 100 ? 'car-plan-price-i' : 'car-plan-price') ">$<text style="font-size: 48rpx;margin-left: 6rpx;">{{params.sell_price/100}}</text></view>
					</view>
				</view>
				<!-- 暂时未安排开发 -->
				<!-- <view class="free-num-block">
					<view class="flex-row flex-between" style="margin-bottom: 24rpx;">
						<view class="free-num-left">
							<img style="width: 40rpx;height: 40rpx;" src="https://qiniu.bms16.com/Fj_ifr41AqH2PijZBdOBa3SCxADg" alt="">
							<text style="margin-left: 16rpx;">免费换电次数</text>
						</view>
						<view class="free-num">共60次</view>
					</view>
					<view class="flex-row free-num-tip">本单可享60次免费换电数，超出后需要单独支付换电费用</view>
					<view class="flex-row free-num-tip">自费换电：$1/次</view>
				</view> -->
				<view v-if="selectType!=100" class="plan-time flex-row flex-between">
					<view>租车时长</view>
					<view class="quantity-count flex-row flex-between">
						<view class="total-time flex-row">
							 共 
							<view style="font-weight: 600;margin: 0 10rpx;">{{tools.countToDay(count,selectType)}}</view>
							<!-- <view style="font-weight: 600;margin: 0 10rpx;">{{tools.countToDay(count,isSelectStatus)}}</view> -->
							<text>天</text>
						</view>
						<!-- <view class="count-btn fbtn" @tap.stop.prevent="bindMinus">-</view> -->
						<view @tap.stop.prevent="bindMinus"><img class="count-btn fbtn"
								src="https://qiniu.bms16.com/Fm-SCbzVeVHgQK920bmWNvnJnL32" /></view>
						<input @input="bindInput"  @blur="bindBlur" type="number" :value="count" />
						<!-- <view class="count-btn sbtn" @tap.stop.prevent="bindAdd">+</view> -->
						<view @tap.stop.prevent="bindAdd"><img class="count-btn sbtn"
								src="https://qiniu.bms16.com/FsO-2adBjkUkmk4ENuQco-aK7IyY" /></view>
					</view>
				</view>
				<!-- <view class="car-color-view">
					<view>车辆颜色</view>
					<view class="flex-row">
						<view class="car-color-list car-color-s">白色</view>
						<view class="car-color-list car-color-i">白色</view>
						<view class="car-color-list car-color-i">白色</view>
						<view class="car-color-list car-color-i">白色</view>
					</view>
				</view> -->
			</view>
			<view class="lift-btn-view">
				<view @tap="checkOrder" class="lift-btn">确认</view>
			</view>
		</view>
	</view>
</template>
<script module="tools" lang="wxs" src="@/pages/common/wxs/tools.wxs"></script>
<script module="tools" lang="sjs" src="@/pages/common/wxs/tools.sjs"></script>
<script>
	import allPrice from '@/component/allPrice/allPrice';
	import {
		MAX_LIMITS,LEASE_TYPE_ARR
	} from '@/common/constant.js'
	import common from '../../common/common';
	export default {
		data() {
			return {
				count:1,
				price:0,
				duration_unit:''

			};
		},
		computed: {
			leaseUnitsResult() {
				const result = LEASE_TYPE_ARR.find(v => v.value == this.params.rentalType);
      			return result ? result.label : '';
			}
		},
		/**
		 * 组件的属性列表
		 */
		props: {
			params:{
				type:Object,
				default:{}
			},
			selectType:{
				type:String,
				default:''
			},
		},
		components: {
			allPrice,
		},
		created: function () {
			console.log(this.params,'this.params');
			this.setData({
				price:this.params.price*100,
			})
		},
		/**
		 * 组件的方法列表
		 */
		methods: {
			tapSelectType(e){
				const {select_type,price} = e.currentTarget.dataset
				console.log(e,select_type,price,'selectType,price');
				this.$emit('changeSelectType',select_type,price)
				this.setData({
					price,
					count:1
				})
			},
			closeShowMore(){
				this.$emit('closeShowMore')
			},
			bindMinus() {
				if (this.count > 1) {
					this.setData({
						count: this.count - 1
					});
				}
				this.bindDuration()
			},

			bindInput(e) {
				const num = Number(e.detail.value)
				this.bindTipCount(num)
				this.bindDuration()
			},

			bindBlur(e) {
				const count = e.detail.value
				this.bindTipCount(count)
				if (count < 1) {
					this.setData({
						count: 1
					})
				}
				this.bindDuration()
			},

			bindAdd() {
				const num = this.count - 0 + 1
				this.bindTipCount(num)
				this.bindDuration()
			},

			bindTipCount(num) {
				const limit = MAX_LIMITS[this.isSelectStatus];
				if (limit && num > limit.max) {
					common.simpleToast(limit.message);
					this.setData({
						count: limit.max
					})
					this.blurHandle()
				} else {
					this.setData({
						count: num
					})
				}
			},
			blurHandle() {
				this.showInput = false
				this.$nextTick(() => {
					this.showInput = true
				})
			},	
			//计算价格
			bindDuration() {
				const me = this
				//未有显示总价钱的地方
				// var new_price=0
				// if(me.selectType == 100){
				// 	new_price=me.params.sell_price
				// }else{
				// 	new_price=me.price*me.count
				// }
				// console.log(me.count,me.price,new_price,'new_price');
				// this.setData({
				// 	price:new_price
				// })
				
			},
			checkOrder(){
				const params={
					...this.params,
					selectType:this.selectType,
					count:this.count,
					totalPrice:this.price,
					selectUnit:LEASE_TYPE_ARR.find(v => v.value == this.selectType)?.label
				}
				uni.navigateTo({
					url: `/pages/purchaseOrder/purchaseOrder?params=${encodeURIComponent(JSON.stringify(params))}`,
				})
			},
		}
	};
</script>
<style scoped>
	@import './carPlan.css';
</style>