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;">
					<image style="width: 160rpx;height: 160rpx;border-radius: 16rpx;" :src="image" mode="aspectFit"</image>
					</view>
				<view class="car-model-detail flex-row">
					<!-- <priceTool :price="58" :font_size="40"/> -->
					<allPrice :amount="((price || 0)/100)"/>
					<view v-if="params.overdueData && params.overdueData.money" style="align-items: baseline;" class="flex-row">
						<text>{{ $t('逾期金额')}}：</text>
						<allPrice  :amount="(params.overdueData.money || 0/100)"/>
					</view>
					
					<view v-if="type!=100" class="car-model-price-view">
						<text style="margin-right: 12rpx;">{{ $t('已选择') }}</text>
						<text>{{leaseUnitsResult}}</text>
						<text style="margin-left: 12rpx;">{{ $t('时长') }} {{count}} 
							<text>{{leaseUnits}}</text>
						</text>
						<!-- <text>共计{{tools.countToDay(count,type)}}天</text> -->
					</view>
					<view style="margin-top: 10rpx;" class="car-model-tip">{{ $t('现车') }}-{{ $t('随时可到店提车') }}</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">{{ $t('用车方案') }}</view>
				<view class="car-plan-list-view flex-row">
					<view v-for="(item,index) in params.rental_setting" :key="index" @click="tapSelectType(item)" :class="['flex-row' , (type == item.hire_duration_unit ? 'car-plan-list-i' : 'car-plan-list')] " 
					>
					
						<view :class="(type == item.hire_duration_unit ? 'car-plan-unit-i' : 'car-plan-unit') ">
							<text v-if="item.hire_duration_unit==1">{{ $t('日租') }}</text>
							<text v-if="item.hire_duration_unit==2">{{ $t('月租') }}</text>
							<text v-if="item.hire_duration_unit==3">{{ $t('年租') }}</text>
							<text v-if="item.hire_duration_unit==4">{{ $t('时租') }}</text>
							<text v-if="item.hire_duration_unit==5">{{ $t('分租') }}</text>
							<text v-if="item.hire_duration_unit==6">{{ $t('周租') }}</text>
							<text v-if="item.hire_duration_unit==7">{{ $t('季租') }}</text>
						</view>
						<view :class="(type == 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 v-if="params.sell_price != 0 && isBuy"  @click="tapSelectType({hire_duration_unit:100,hire_price:params.sell_price})" :class="['flex-row' , (type == 100 ? 'car-plan-list-i' : 'car-plan-list') ]" style="padding:  0rpx 20rpx; min-width: auto; "  >
						<view :class="(type == 100 ? 'car-plan-unit-i' : 'car-plan-unit') ">{{ $t('购买') }}</view>
						<view :class="(type == 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="type!=100" class="plan-time flex-row flex-between">
					<view>{{ $t('租车时长') }}</view>
					<view class="quantity-count flex-row flex-between">
						<view class="total-time flex-row">
							 {{ $t('共') }} 
							<view style="font-weight: 600;margin: 0 10rpx;">{{count}}</view>
							<!-- <view style="font-weight: 600;margin: 0 10rpx;">{{tools.countToDay(count,isSelectStatus)}}</view> -->
							<text>{{leaseUnits}}</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">{{ $t('确认') }}</view>
			</view>
		</view>
		
		<PayTypeModel @closeShow="isShowToBuy = false" @payToOrder="payToOrder" :free_price="Number(priceAll) + (Number(params.overdueData ? params.overdueData.money : 0) || 0)" :isShowToBuy="isShowToBuy"/>
	</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';
	var config_gyq = require('../../common/config_gyq.js');
	var request = require('../../common/request');
	import PayTypeModel from '@/component/payTypeModel/payTypeModel';
	export default {
		data() {
			return {
				image:'',
				orderInfo:{},
				isShowToBuy:false,
				priceAll:0,
				count:1,
				price:0,
				duration_unit:'',
				type:'',
			};
		},
		computed: {
			leaseUnitsResult() {
				const result = LEASE_TYPE_ARR.find(v => v.value == this.type);
      			return result ? result.label : '';
			},
			leaseUnits(){
				const result = LEASE_TYPE_ARR.find(v => v.value == this.type);
				return result ? result.unit : '';
			}
		},
		/**
		 * 组件的属性列表
		 */
		props: {
			isBuy:{
				type: Boolean,
				default: true
			},
			params:{
				type:Object,
				default:{}
			},
			selectType:{
				type:Number,
				default:1
			},
		},
		components: {
			allPrice,
			PayTypeModel,
		},
		mounted() {
			this.params.image =  this.params.model_images[0]
			this.image = this.params.image ? this.params.image : this.params?.model_images[0] ? this.params.model_images[0] : "" 
			this.type = this.selectType
			this.tapSelectType({hire_duration_unit:this.selectType,hire_price:this.params.price*100})
		},
		// created: function () {
		// 	console.log(this.params,'this.params');
		// 	this.setData({
		// 		price:this.params.price*100,
		// 	})
		// },
		/**
		 * 组件的方法列表
		 */
		methods: {
			async payToOrder(type){
				const pay_type = type
				var from=''
				if(pay_type == 1){
					from = 'wx'
				}else if(pay_type == 2){
					from = 'ali'
				}
				let {data} = await request.postApi(config_gyq.API_FLK_ORDER_RENEW,{
					...this.orderInfo,
					pay_type,
					from
				})
				if(data.code == 200){
					common.simpleToast('成功！')
					this.isShowToBuy = false
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						});
					}, 800);
					
				}else{
					common.simpleToast(data.msg)
				}
			},
			tapSelectType(e){
				const {hire_duration_unit,hire_price} = e
				this.type = hire_duration_unit
				this.priceAll = hire_price
				this.price = hire_price
				this.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
				console.log(me.price)
				if(me.type == 100){
					new_price=me.params.sell_price
				}else{
					new_price=Number(me.price)*Number(me.count)
				}
				this.setData({
					priceAll:new_price
				})
			},
			async orderRenewFn(){
				// this.overdueData
				console.log(this.params)
				let current_time = this.params.overdueData.time ? this.params.overdueData.time:parseInt(new Date().getTime() / 1000);
				let money = 0
				if(this.params.overdueData.time){
					money = this.params.overdueData.money ? Number(this.params.overdueData.money) : 0
				}
				let hire_duration = 0
				this.params.rental_setting.map(item=>{
					if(item.hire_duration_unit == this.type){
						hire_duration = item.hire_duration
					}
				})
				
				this.orderInfo={
					order_sn:this.params.order_sn,
					hire_duration,
					hire_cycle:this.count,
					hire_duration_unit:this.type,
					price:this.priceAll + money,
					current_time,
					currency_code:'CNY'
				}
				this.isShowToBuy = true
				
			},
			
			checkOrder(){
				const params={
					...this.params,
					selectType:this.type,
					count:this.count,
					totalPrice:this.priceAll,
					selectUnit:this.type
				}
				if(this.params.order_sn){
					this.orderRenewFn()
				}else{
					uni.navigateTo({
						url: `/pages/purchaseOrder/purchaseOrder?params=${encodeURIComponent(JSON.stringify(params))}`,
					})
				}
				
			},
		}
	};
</script>
<style scoped>
	@import './carPlan.css';
</style>