zx_flk_app/pages/purchaseOrder/purchaseOrder.vue

<template>
	<view class="container-view">
		<view class="select-time-view">
			<view class="flex-row">选择取车时间</view>
			<view @tap="tapSelectTime" class="flex-row align-center" style="margin-bottom:20rpx ;">
				<text class="select-time-text">{{takeCar}}</text>
				<img style="width: 28rpx;height: 28rpx;" src="https://qiniu.bms16.com/FpbKGisSPfL9r8a7QkZCYXolhu1Y" alt="">
			</view>
		</view>
		<view class="car-info-view">
			<view class="flex-row align-center">
				<img style="width: 160rpx;height: 160rpx;border-radius: 16rpx;" :src="modelInfo.image" alt="">
				<view class="flex-row car-info-grow">
					<view class="flex-row align-center">
						<view class="car-name">{{modelInfo.car_model_name}}</view>
						<img style="width: 28rpx;height: 28rpx;" src="https://qiniu.bms16.com/FlMiRsUF-KZyevFCZDP9DwffOlag" alt="">
					</view>
					<view class="car-information">{{leaseUnitsResult}}  共计{{tools.countToDay(modelInfo.count,modelInfo.selectType)}}天</view>
					<allPrice :amount="price"></allPrice>
				</view>
			</view>
			<view class="config-list-view">
				<view :class="service_list.length>4?'config-list-view-1 flex-row':'flex-row'">
					<view class="service_name-tab" v-for=" (item,indexs) in service_list" :key="indexs">
						{{item.service_name}}
					</view>
				</view>
			</view>
		</view>
		
		<view  class="deposit-info">
			<view class="deposit-info-title flex-row flex-between">
				<text>车辆押金</text>
				<text>${{modelInfo.deposit/100}}</text>
			</view>
			<view class="deposit-info-text">需要支付{{modelInfo.deposit/100}}元押金，诺无车损、违章及逾期，还车后可退</view>
		</view>

		<view class="method-info">
			<view class="flex-row flex-between" style="margin-bottom: 40rpx;">
				<view class="font_32">前往门店取还</view>
				<view class="font_32">门店距您 <text class="distance-num">{{modelInfo.distance}}m</text></view>
			</view>
			<view @tap="navAddress" class="shop-bg flex-row flex-between">
				<view class="shop-name-view">
					<!-- <view class="shop-name">{{shopInfo.shop_name}}</view>
					<view class="shop-address">{{shopInfo.address}}</view> -->
					<view class="shop-name">{{modelInfo.shop_name}}</view>
					<view class="shop-address">{{modelInfo.address}}</view>
				</view>
				<view class="nav-btn flex-row">
					<img style="width: 48rpx;height: 48rpx;" src="https://zxappfile.bms16.com/zx_admin/cab_nav.png"
						alt="">
					<view style="margin-top: 12rpx;font-size: 24rpx;">导航</view>
				</view>
			</view>
		</view>

	

		<view style="height: 224rpx;"></view>
		<view v-if="!isShowDetail" class="payment-info">
			<view class="payment-bottom flex-row flex-between">
				<view class="bottom-left flex-row">
					<allPrice :amount="totalPrice"></allPrice>
					<view @tap="bindDetail" class="all-money">明细<img
							src="https://qiniu.bms16.com/Fvl1d-AWRvwY_ehNrw7bMZOK6LBZ" /></view>
				</view>
				<view @tap="navToPage">确认下单</view>
			</view>
		</view>
		<view v-else class="show-detail">
			<view class="detail-info">
				<view class="pay-money">
					<view class="flex-row flex-between" style="margin-bottom: 46rpx;">
						<view>价格明细</view>
						<view>
							<image style="width: 32rpx;height: 32rpx;" @tap="isShowDetail = false"
								src="https://qiniu.bms16.com/FtoTEHOJiUf_gjPCJGGHMsAtHI5M" />
						</view>
					</view>
					<view class="flex-row flex-between" style="margin-bottom: 44rpx;">
						<view>车辆租金</view>
						<view>
							<!-- ￥{{(leaseTime * price_list[0].hire_price) /100}} -->
							￥{{price+'x'+modelInfo.count}}
							<text >{{leaseUnits}}</text>
						</view>
					</view>
					<view class="flex-row flex-between"
						style="margin-bottom: 44rpx;">
						<view>车辆押金</view>
						<view>￥{{modelInfo.deposit /100}}</view>
					</view>
					
					<view class="detail-money flex-row" style="padding-bottom: 44rpx;">
						<view>支付金额</view>
						<allPrice :amount="totalPrice"></allPrice>
					</view>
				</view>
				<view class="second">
					<view class="payment-bottom flex-row flex-between">
						<view class="bottom-left flex-row">
							<allPrice :amount="totalPrice"></allPrice>
							<view @tap="isShowDetail = false" class="all-money">明细<img
									src="https://qiniu.bms16.com/FkzZI0r5jO-c2JRahNkZW2pHb9dR" /></view>
						</view>
						<view @tap="navToPage">确认下单</view>
					</view>
				</view>
			</view>
		</view>
		<calendar ref="calendar" :showPopup.sync="isShowCalendar" @valuesUpdated="handleValuesUpdated"
			@close="() => isShowCalendar = false" />
		<view v-if="isShowReturnCar" class="return-box">
			<view class="return-item">
				<view class="return-title flex-row flex-between">
					<view>还车到门店</view>
					<view @tap="isShowReturnCar = false" class="close-view"><img style="width: 24rpx;height: 24rpx;" src="https://qiniu.bms16.com/FoWVlo-Nmx6wTDpsL2Rf9_BamU7L" alt=""></view>
				</view>
				<view class="return-text">系统会根据您的定位判断您是否已到还车位置，如您已经到达门店，请点击「我已到店」按钮，待门店确认还车后，即可还车成功。</view>
				<view class="return-btn flex-row">
					<view @tap="toRurnCarPage">导航到店</view>
					<view @tap="toNearbyStorePage">我已到店</view>
				</view>
			</view>
		</view>
		<view v-if="isShowCheckOrder" class="return-box">
			<view class="return-item">
				<view style="text-align: center;margin-bottom: 120rpx;">
					<img style="width: 88rpx;height: 88rpx;" src="https://qiniu.bms16.com/Fqb-i2uJWlZOg8EvUXHr_1qhlndf" alt="">
					<view class="check-order-text">租车订单已提交</view>
					<view>请于 <text class="get-car-time">3.5-20:00</text>  到 <text class="get-car-name">深圳南山深大店</text>  取车</view>
				</view>
				<view class="return-btn flex-row">
					<view @tap="toIndexPage">我知道了</view>
					<view @tap="toOrderInfo">订单详情</view>
				</view>
			</view>
		</view>
		<PayTypeModel @closeShow="closeShow" @payToOrder="payToOrder" :free_price="totalPrice" :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>
	var config = require('../../common/config.js');
	var common = require('../../common/common.js');
	var http = require('../../common/http.js');
	var storage = require('../../common/storage.js');
	var user = require('../../common/user.js');
	import allPrice from '@/component/allPrice/allPrice';
	import calendar from '@/component/smartCalendar';
	import PayTypeModel from '@/component/payTypeModel/payTypeModel';
	import {
		MAX_LIMITS,LEASE_TYPE_ARR
	} from '@/common/constant.js';
	export default {
		components: {
			allPrice,
			calendar,
			PayTypeModel
		},
		data() {
			return {
				service_list:[],
				isShowCalendar: false, //选择预约订单时间
				price:0,
				modelInfo:{},
				isShowDetail:false,
				unitPrice:0, //单价
				isShowToBuy:false,
				order_sn:'', //租赁订单号
				totalPrice:0,//结算总金额
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			if(options && options.params){
				const model_info=JSON.parse(decodeURIComponent(options.params))||{}
				console.log(model_info,'model_info');
				this.setData({
					modelInfo:model_info,
					unitPrice:model_info.rental_setting.find(v => v.hire_duration_unit == model_info.selectType)?.hire_price,
					service_list:model_info.service_list||[],
					price:model_info.totalPrice/100,
					totalPrice:((model_info.totalPrice+model_info.deposit)/100).toFixed(2)
				})
			}
			this.pick_up_time = Math.floor(new Date().getTime() / 1000)
			this.setData({
				takeCar:common.getFormattedTime()
			})
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},
		computed: {
			leaseUnitsResult() {
				const result = LEASE_TYPE_ARR.find(v => v.value == this.modelInfo.selectType);
      			return result ? result.label : '';
			},
			leaseUnits() {
				const result = LEASE_TYPE_ARR.find(v => v.value == this.modelInfo.selectType);
      			return result ? result.unit : '';
			},

		},
		methods: {
			handleValuesUpdated(e) {
				this.isShowCalendar = false;
				const timeStr=new Date(e.startDate)
				this.pick_up_time=Math.floor(new Date(e.startDate).getTime()/1000)
				this.setData({
					takeCar:common.getFormattedTime(timeStr)
				})
				console.log(e,'eeee');
			},
			tapSelectTime() {
				this.setData({
					isShowCalendar: true
				})
			},
			navAddress(){
				const {
					address,
					latitude,
					longitude,
					shop_name
				} = this.modelInfo
				uni.openLocation({
					latitude: latitude - 0,
					longitude: longitude - 0,
					scale: 15,
					name: shop_name,
					address: address,
					success: function (res) {},
				})
			},
			bindDetail() {
				this.isShowDetail = true
			},
			navToPage(){
				this.setData({
					isShowToBuy:true
				})
			},
			closeShow(){
				this.setData({
					isShowToBuy:false
				})
			},
			payToOrder(type){
				const pay_type = type
				var from=''
				if(pay_type == 1){
					from = 'wx'
				}else if(pay_type == 2){
					from = 'ali'
				}
				const hire_duration=this.modelInfo.rental_setting.find(v => v.hire_duration_unit == this.modelInfo.selectType)?.hire_duration
				console.log(this.modelInfo,'test');
				const pData={
					pay_type,
					car_model_id:this.modelInfo.model_id,
					hire_cycle:this.modelInfo.count,
					hire_duration_unit:this.modelInfo.selectType,
					hire_duration,
					price: this.totalPrice*100,
					pick_up_time:this.pick_up_time,
					address: this.modelInfo.address,
					currency_code:'CNY'
				}
				this.loadPayMethod(pData)
				
			},
			loadPayMethod(pData){
				const me = this;
				common.loading();
				http.postApi(config.API_FLK_ORDER_HIRE_MODEL, pData, function (resp) {
					uni.hideLoading();
					if (resp.data.code === 200) {
						if(!resp.data.data.need_pay){
							common.simpleToast(me,me.$t('支付成功'));
							me.order_sn = resp.data.data.order_sn;
							me.setData({
								isShowToBuy:false,
								isShowCheckOrder:true
							})
						}
					}  else {
						common.simpleToast(me,resp.data.msg);
						
					}
				});
			},
			toIndexPage(){
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			toOrderInfo(){
				uni.navToPage({ url: '/pages/orderStatus/orderStatus?order_sn=' + this.order_sn })
			}
		}
	};
</script>

<style>
	@import './purchaseOrder.css';
</style>