zx_flk_app/pages/purchaseOrder/purchaseOrder.vue

<template>
	<view class="container-view">
		<navBar :name="$t('确认订单')" left="0"></navBar>
		<view class="select-time-view">
			<view class="flex-row">{{ $t('选择取车时间') }}</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">
				<image style="width: 160rpx;height: 160rpx;border-radius: 16rpx;" :src="modelInfo.model_images" mode="aspectFit"></image>
				<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}}
						{{ $t('共计') }}{{tools.countToDay(modelInfo.count,modelInfo.selectType)}}{{ $t('天') }}</view>
					<allPrice v-if="modelInfo.selectType == 100" :amount="modelInfo.sell_price / 100"></allPrice>
					<allPrice v-else :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 v-if="modelInfo.selectType != 100" class="deposit-info">
			<view class="deposit-info-title flex-row flex-between">
				<text>{{ $t('车辆押金') }}</text>
				<text>${{modelInfo.deposit/100}}</text>
			</view>
			<view class="deposit-info-text">{{ $t('需要支付') }}{{modelInfo.deposit/100}}{{ $t('元押金，诺无车损、违章及逾期，还车后可退') }}</view>
		</view>

		<view class="method-info">
			<view class="flex-row flex-between" style="margin-bottom: 40rpx;">
				<view class="font_32">{{ $t('前往门店取还') }}</view>
				<view class="font_32">{{ $t('门店距您') }} <text class="distance-num">{{modelInfo.distance}}</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;">{{ $t('导航') }}</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 style="margin-right: 20rpx;" class="bottom-left flex-row">
					<allPrice :amount="totalPrice"></allPrice>
					<view v-if="modelInfo.selectType != 100" @tap="bindDetail" class="all-money">{{ $t('明细') }}
							<image class="img" src="https://qiniu.bms16.com/Fvl1d-AWRvwY_ehNrw7bMZOK6LBZ" mode=""></image>
							</view>
				</view>
				<view @tap="navToPage">{{ $t('确认下单') }}</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>{{ $t('价格明细') }}</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>{{ $t('车辆租金') }}</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>{{ $t('车辆押金') }}</view>
						<view>{{$(￥)}}{{modelInfo.deposit /100}}</view>
					</view>

					<view class="detail-money flex-row" style="padding-bottom: 44rpx;">
						<view style="margin-right: 20rpx;">{{ $t('支付金额') }}</view>
						<allPrice :amount="totalPrice"></allPrice>
					</view>
				</view>
				<view class="second">
					<view class="payment-bottom flex-row flex-between">
						<view style="margin-right: 20rpx;" class="bottom-left flex-row">
							<allPrice :amount="totalPrice"></allPrice>
							<view @tap="isShowDetail = false" class="all-money">{{ $t('明细') }}
									<image class="img"  src="https://qiniu.bms16.com/FkzZI0r5jO-c2JRahNkZW2pHb9dR" mode=""></image>
									</view>
						</view>
						<view @tap="navToPage">{{ $t('确认下单') }}</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>{{ $t('还车到门店') }}</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">{{ $t('系统会根据您的定位判断您是否已到还车位置，如您已经到达门店，请点击「我已到店」按钮，待门店确认还车后，即可还车成功。') }}</view>
				<view class="return-btn flex-row">
					<view @tap="toRurnCarPage">{{ $t('导航到店') }}</view>
					<view @tap="toNearbyStorePage">{{ $t('我已到店') }}</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">{{ $t('租车订单已提交') }}</view>
					<view>{{ $t('请于') }} <text class="get-car-time">{{takeCar}}</text> {{ $t('到') }} <text
							class="get-car-name">{{modelInfo.shop_name}}</text> {{ $t('取车') }}</view>
				</view>
				<view class="return-btn flex-row">
					<view @tap="toIndexPage">{{ $t('我知道了') }}</view>
					<view @tap="toOrderInfo">{{ $t('订单详情') }}</view>
				</view>
			</view>
		</view>
		<PayTypeModel @closeShow="closeShow" @payToOrder="payToOrder" :free_price="Number(totalPrice) * 100"
			: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 config_gyq = require('../../common/config_gyq.js');
	var common = require('../../common/common.js');
	var http = require('../../common/http.js');
	var request = require('../../common/request.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 {
				takeCar:'',
				isShowReturnCar:false,
				isShowCheckOrder:false,
				sub_sn: "",
				service_list: [],
				isShowCalendar: false, //选择预约订单时间
				price: 0,
				modelInfo: {},
				isShowDetail: false,
				unitPrice: 0, //单价
				isShowToBuy: false,
				order_sn: '', //租赁订单号
				totalPrice: 0, //结算总金额
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			if (options && options.params) {
				// #ifdef APP
				const model_info = JSON.parse(options.params) || {}
				// #endif
				// #ifndef APP
				const model_info = JSON.parse(decodeURIComponent(options.params)) || {}
				// #endif
				console.log(model_info, 'model_info');
				model_info.model_images = model_info.model_images ? model_info.model_images[0] : ''
				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.price,
					totalPrice: model_info.selectType != 100 ? ((model_info.totalPrice + model_info.deposit) / 100).toFixed(2) : ((model_info.sell_price) / 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'
				}
				common.loading();
				if (this.modelInfo.selectType == 100) {
					this.loadPayBuy(pData)
					return
				}
				this.loadPayMethod(pData)

			},
			async loadPayBuy(pData) {
				let {
					data
				} = await request.postApi(config_gyq.API_FLK_ORDER_RESERVE, {
					pay_type: pData.pay_type,
					car_model_id: pData.car_model_id,
					price: this.modelInfo.sell_price,
					pick_up_time: pData.pick_up_time,
					currency_code: 'CNY',
				})
				uni.hideLoading();
				if (data.code == 200) {
					if (!data.data.need_pay) {
						common.simpleToast(this.$t(this.$t('支付成功')));
						this.order_sn = data.data.order_sn;
						this.sub_sn = data.data.sub_sn;
						this.setData({
							isShowToBuy: false,
							isShowCheckOrder: true
						})
					}
				} else {
					common.simpleToast(data.msg);

				}
			},
			loadPayMethod(pData) {
				const me = this;
				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.$t('支付成功'));
							me.order_sn = resp.data.data.order_sn;
							me.sub_sn = resp.data.data.sub_sn;
							me.setData({
								isShowToBuy: false,
								isShowCheckOrder: true
							})
						}
					} else {
						common.simpleToast(me, resp.data.msg);

					}
				});
			},
			toIndexPage() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			toOrderInfo() {
				uni.navigateTo({
					url: '/pages/orderStatus/orderStatus?sub_sn=' + this.sub_sn
				})
			}
		}
	};
</script>

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