zx_flk_app/pages/orderStatus/orderStatus.vue

<template>
	
	
	<view class="container-view">
		<view class="time-info">
			<navBar bgColor="transparent" left="0"></navBar>
			<view>
				<view v-if="orderInfo.pay_status!=2">
					<view class="get-time-view flex-row" v-if="orderInfo.pay_status == 0">{{ $t('待支付') }}</view>
					<view class="get-time-view flex-row" v-else-if="orderInfo.pay_status == 1">{{ $t('支付中') }}</view>
					<view class="get-time-view flex-row" v-else-if="orderInfo.pay_status == 3">{{ $t('支付失败') }}</view>
					<view class="get-time-view flex-row" v-else-if="orderInfo.pay_status == 4">{{ $t('支付取消') }}</view>
					<view class="get-time-view flex-row" v-else-if="orderInfo.pay_status == 5">{{ $t('线下待审核') }}</view>
					<view class="get-time-view flex-row" v-else-if="orderInfo.pay_status == 6">{{ $t('线下审核拒绝') }}</view>
				</view>
				<block v-if="orderInfo.pay_status == 2">
					<view :class="['get-time-view', 'flex-row', 'blue-text']" v-if="orderInfo.order_status == 3">{{ $t('使用中') }}...
					</view>
					<view :class="['get-time-view', 'flex-row', 'red-text']" v-if="orderInfo.order_status == 4">{{ $t('已逾期') }}
					</view>
					<view class="get-time-view flex-row" v-if="orderInfo.order_status == 2">{{ $t('请上传车辆图片激活车辆') }}</view>
					<view class="get-time-view flex-row" v-if="orderInfo.order_status == 5">{{ $t('待门店确认') }}</view>
					<view class="get-time-view flex-row" v-if="orderInfo.order_status == 6">{{ $t('还车中') }},{{ $t('等待门店取车') }}</view>
					<view class="get-time-view flex-row" v-if="orderInfo.order_status == 7">{{ $t('已完成') }}</view>
					<view class="get-time-view flex-row"
						v-if="orderInfo.order_status == 8||orderInfo.order_status == 9">{{ $t('已取消') }}</view>
					<view class="get-time-view flex-row" v-if="orderInfo.order_status == 1 "><text>{{ $t('请于') }}</text><text
							class="get-car-time">{{tools.formatTimeSecond( orderInfo.pick_up_time)}}</text><text>{{ $t('到门店取车') }}</text>
					</view>
					<view v-if="orderInfo.order_status == 10">{{ $t('已完结') }}</view>
				</block>

			</view>

			<view class="time-money">
				<view v-if="orderInfo.order_type != 3" class="flex-row flex-between">
					<view class="money-item">
						<view :class="orderInfo.order_status == 4?'red-status':''">
							<block v-if="orderInfo.hire_duration_time">{{orderInfo.hire_duration_time}}</block>
							<block v-else>{{Number(orderInfo.hire_cycle) * (orderInfo.hire_duration)}}</block>
						</view>
						
						<view>{{((orderInfo.order_status == 2) || orderInfo.order_status == 3)?$t('租期剩余'):(orderInfo.order_status == 4 ? $t('逾期时长'):$t('租借周期'))}}·<text style="opacity: 0.4;">{{leaseUnits(orderInfo.hire_duration_unit)}}</text></view>
						
						<!-- <view v-if="(orderInfo.order_status == 2&&orderInfo.hire_type==2) || orderInfo.order_status == 3">
							{{ $t('租期剩余') }}·{{ $t('天') }}</view>
						<view v-else-if="orderInfo.order_status == 4 " class="red-status">{{ $t('逾期时长') }}·{{ $t('天') }}</view>
						<view v-else>{{ $t('租借周期') }}·{{ $t('天') }}</view> -->
					</view>
					<view v-if="orderInfo.order_status != 4" class="money-item">
						<view>
							{{(orderInfo.hire_money + orderInfo.deposit / 100).toFixed(2)}}
						</view>
						<view>{{ $t('订单金额') }}<text style="opacity: 0.4;">·$</text></view>
					</view>

					<view v-if="orderInfo.order_status == 4" class="money-item">
						<view style="color:#F95151" class="red-status">
							{{(orderInfo.money / 100).toFixed(2)}}
						</view>
						<view style="color:#F95151">{{ $t('逾期金额') }}·$</view>
					</view>

					<view @tap="bindExpanded">
						<text>{{isExpanded?$t('收起'): $t('展开')}}</text>
						<img
							:src="isExpanded?'https://qiniu.bms16.com/FvRah8ro91B_TUVEmInBq6n69W2f':'https://qiniu.bms16.com/FtbxPP0aXYG8hyJTEJfNTXa_Puuc'" />
					</view>
				</view>
				
				<view v-if="orderInfo.order_type == 3" class="flex-row flex-between">
					<view class="money-item">
						<view></view>
						<view>{{ $t('租借周期：购买') }}</view>
					</view>
					<view class="money-item">
						<view :class="orderInfo.order_status == 4?'red-status':''">
							{{orderInfo.order_status == 4?tools.toFix(over_fee/100):tools.toFix(orderInfo.money / 100)}}<text>{{ $t('元') }}</text>
						</view>
						<view>{{ $t('订单金额') }}</view>
					</view>
					<view @tap="bindExpanded">
						<text>{{isExpanded?$t('收起'):$t('展开')}}</text>
						<img
							:src="isExpanded?'https://qiniu.bms16.com/FvRah8ro91B_TUVEmInBq6n69W2f':'https://qiniu.bms16.com/FtbxPP0aXYG8hyJTEJfNTXa_Puuc'" />
					</view>
				</view>

				<view v-if="isExpanded" class="dashed-border"></view>
				
				<view v-if="isExpanded">
					<view class="big-text">{{ $t('订单信息') }}</view>
					<view class="sn-content flex-row flex-between">
						<view class="sn-title">{{ $t('订单编号') }}</view>
						<view class="sn-text">{{orderInfo.sub_sn}}</view>
					</view>
					<view class="sn-content flex-row flex-between">
						<view class="sn-title">{{ $t('下单时间') }}</view>
						<view class="sn-text">{{tools.formatTime(orderInfo.ctime)}}</view>
					</view>
					<view v-if="orderInfo.pay_time" class="sn-content flex-row flex-between">
						<view class="sn-title">{{ $t('支付时间') }}</view>
						<view class="sn-text">{{tools.formatTime(orderInfo.pay_time)}}</view>
					</view>
					<view class="sn-content flex-row flex-between">
						<view class="sn-title">{{ $t('支付方式') }}</view>
						<view v-if="orderInfo.pay_type == 0" class="sn-text">{{ $t('微信支付') }}</view>
						<view v-if="orderInfo.pay_type == 1" class="sn-text">{{ $t('线下支付') }}</view>
						<view v-if="orderInfo.pay_type == 2" class="sn-text">{{ $t('支付宝支付') }}</view>
						<view v-if="orderInfo.pay_type == 9" class="sn-text">{{ $t('钱包余额支付') }}</view>
					</view>
					<view v-if="orderInfo.order_type != 3" class="sn-content flex-row flex-between">
						<view class="sn-title">{{ $t('租车金额') }}</view>
						<view class="sn-text">$ {{tools.toFix(orderInfo.hire_money/100)}}</view>
					</view>
					<view v-if="orderInfo.order_type != 3" class="sn-content flex-row flex-between">
						<view class="sn-title">{{ $t('租车押金') }}</view>
						<view class="sn-text"><text class="grey-text"></text> $
							{{tools.toFix(orderInfo.deposit/100)}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="car-info">
			<view class="flex-row flex-between" style="margin-bottom: 40rpx;">
				<text>{{ $t('自行去门店取还') }}</text>
				<text class="distance-num">{{orderInfo.distance}}m</text>
			</view>
			<view class="flex-row store-img-view">
				<img src="https://qiniu.bms16.com/FrwDlFZdSMiBgqnqDjB19PiDUmuu" alt="">
				<view style="width: calc(100% - 180rpx);margin-left: 24rpx;">
					<view class="store-name">{{orderInfo.shop_name}}</view>
					<view class="store-name-address">{{orderInfo.address || $t('未知地址')}}</view>
					<view class="flex-row flex-between align-center">
						<view class="flex-row time-style align-center">
							<img v-if="orderInfo.work_begin_time && orderInfo.work_end_time"
								style="width: 40rpx;height: 40rpx;"
								src="https://qiniu.bms16.com/Fp-G1pdXxnTV-G3qFbgS453AuqcU" alt="">
							<text
								v-if="orderInfo.work_begin_time && orderInfo.work_end_time">{{orderInfo.work_begin_time}}-{{orderInfo.work_end_time}}</text>
						</view>
						<img @click="navToCabinet" style="width: 112rpx;height: 64rpx;"
							src="https://qiniu.bms16.com/Fts38M35doVjK09GfOza5qD-wwkK" alt="">
					</view>
				</view>
			</view>
		</view>
		<view class="car-info">
			<view>{{ $t('车辆信息') }}</view>
			<view class="car-top flex-row flex-between">
				<view>
					<view class="top-flex">
						<view>{{orderInfo.model_name}}</view>
						<view>
							{{ $t('续航') }}{{(orderInfo.endurance /1000).toFixed(0)}}km{{ $t('｜重量') }}{{(orderInfo.weight / 1000).toFixed(0)}}kg
						</view>
					</view>
					<!-- //{{ $t('配套服务') }} -->
					<view class="serviceList">
						<view v-for="(item,index) of orderInfo.service_list" :key="index" class="tag">
							{{item}}
						</view>
					</view>
				</view>
				<image mode="aspectFit" v-if="orderInfo.model_images" :src="orderInfo.model_images"></image>
				<image v-else src="https://qiniu.bms16.com/FhEvnKUckAHPtWaC04mi2s53IEVj" mode=""></image>
			</view>
			<!-- <view class="exchange-info">
				<view class="flex-row flex-between">
					<view class="exchange-info-title flex-row align-center">
						<img style="width: 40rpx;height: 40rpx;" src="https://qiniu.bms16.com/Fj_ifr41AqH2PijZBdOBa3SCxADg" alt="">
						<text style="margin-left: 16rpx;">{{ $t('换电信息') }}</text>
					</view>
					<view @tap="navToExchange" class="flex-row" style="margin-bottom: 28rpx;">
						<view class="exchange-button">{{ $t('共') }}3{{ $t('次') }}</view>
						<image src="https://qiniu.bms16.com/FpIN7AVzFU75slFlX-SIdnSEmn1k" style="width: 28rpx;height: 28rpx;" />
					</view>
				</view>			
				<view class="exchange-content">{{ $t('本单可享') }}3{{ $t('次免费换电数，超出后需单独支付') }}</view>
				<view class="exchange-content">{{ $t('自费换电') }}:S1/{{ $t('次') }}</view> -->
			<!-- <view class="exchange-content">{{ $t('本单您可享受') }}{{orderInfo.gift_exchange_num}}{{ $t('次免费换电，') }}
				{{ $t('当前免费换电剩余') }}{{(orderInfo.gift_exchange_num - orderInfo.used_exchange_num) > 0 ? (orderInfo.gift_exchange_num - orderInfo.used_exchange_num) : '0' }}{{ $t('次，超出后需要单独支付换电费用') }}
				</view> -->
			<!-- </view> -->
		</view>

		<view v-if="orderInfo.hire_begin_time!=0&&orderInfo.hire_end_time!=0" class="return-info">
			<view class="return-top flex-row flex-between">
				<view>{{ $t('取还时间') }}</view>
				<view>
					<!-- {{ $t('共') }}3{{ $t('天') }}{{orderInfo.hire_return_time.day > 0 ? orderInfo.hire_return_time.day :'' }}<text
						v-if="orderInfo.hire_return_time.day>0">{{ $t('日') }}</text>{{orderInfo.hire_return_time.hour > 0 ? orderInfo.hire_return_time.hour :'' }}<text
						v-if="orderInfo.hire_return_time.hour>0">{{ $t('小时') }}</text>{{orderInfo.hire_return_time.minute > 0 ? orderInfo.hire_return_time.minute :'' }}<text
						v-if="orderInfo.hire_return_time.minute>0">{{ $t('分') }}</text> -->
					{{ $t('共') }}{{hireDurationUnitsFn(orderInfo.total_hire_time,orderInfo.hire_duration_unit)}}{{leaseUnits(orderInfo.hire_duration_unit)}}
				</view>
			</view>
			<view class="return-bottom flex-row">
				<view>{{orderInfo.hire_begin_times}}</view>
				<img src="https://qiniu.bms16.com/FoXmBbj7YGWmjyeuVEY35nzieqnx" />
				<view>{{orderInfo.hire_end_times}}</view>
				<!-- <view>{{tools.formatTimeDate(orderInfo.hire_begin_time)}}</view>
				<img src="https://qiniu.bms16.com/FoXmBbj7YGWmjyeuVEY35nzieqnx" />
				<view>{{tools.formatTimeDate(orderInfo.hire_end_time)}}</view> -->
			</view>
		</view>


		<view v-if="orderInfo.order_status==2||orderInfo.order_status==3||orderInfo.order_status==4"
			class="overdue-info">
			<view>{{ $t('逾期规则') }}</view>
			<view class="overdue-one">
				<view>1. {{ $t('逾期后还可用车吗') }}?</view>
				<view>{{ $t('如果逾期将触发智能锁车逻辑，可能导致您无法正常用车，请及时续费或联系商家处理。') }}</view>
			</view>
			<view class="overdue-two">
				<view>2. {{ $t('逾期费计算标准是什么') }}?</view>
				<view>{{ $t('小时租逾期费') }}={{ $t('每小时费用') }}*{{ $t('逾期小时；当日还') }}/{{ $t('日') }}/{{ $t('周') }}/{{ $t('月') }}/{{ $t('季租逾期费') }}={{ $t('每天费用') }}*{{ $t('逾期天数；如果不满') }}1{{ $t('小时按') }}1{{ $t('小时算，不满') }}1{{ $t('天按') }}1{{ $t('天算，最终收取的逾期费以门店确认的费用为准') }}</view>
			</view>
			<view class="overdue-thr">
				<view>3. {{ $t('逾期后续租如何收费') }}?</view>
				<view>{{ $t('逾期后及时续租不收取逾期费，逾期时长将从续租订单的用车时间中抵扣') }}</view>
			</view>
		</view>
		<view class="inset-bottom"></view>
		<view class="payment-info flex-row flex-between">
			<view>
				<view
					v-if="(orderInfo.order_status == 0 ||orderInfo.order_status == 1 || orderInfo.pay_status == 5 || orderInfo.pay_status == 0) && orderInfo.order_type != 3"
					class="cancel" @tap="clickCancel">{{ $t('结束订单') }}</view>
			</view>
			<view class="flex-row">
				<view v-if="orderInfo.order_status == 1" @tap="navToScan" class="sesame-btn ">{{ $t('扫码绑定') }}</view>
				<view v-if="orderInfo.order_status == 2" @tap="navToScan" class="sesame-btn ">{{ $t('去上传') }}</view>
				<view
					v-if="(orderInfo.order_status == 3||orderInfo.order_status == 4) && orderInfo.order_type != 3 && orderInfo.pay_status != 5"
					@tap="tapReturnCar" class="deposit-btn">{{ $t('到店还车') }}</view>
				<view
					v-if="(orderInfo.order_status == 3||orderInfo.order_status == 4) && orderInfo.order_type != 3 && orderInfo.pay_status != 5"
					@tap="bindRenew" class="sesame-btn">{{ $t('续租') }}</view>
				<view @tap="callStorePhone" class="deposit-btn ">{{ $t('联系门店') }}</view>
			</view>
		</view>

		<!-- <view class="payment-info flex-row flex-between">
			<view v-if="orderInfo.order_status == 1 || orderInfo.pay_status == 5" class="flex-row"> 
				<view v-if="orderInfo.order_type != 3"
					class="cancel" @tap="clickCancel">{{ $t('结束订单') }}
				</view>
				<view @tap="callStorePhone" class="deposit-btn ">{{ $t('联系门店') }}</view>
			</view>
			<view v-if="orderInfo.order_status == 1" class="flex-row"> 
				<view @tap="callStorePhone" class="deposit-btn ">{{ $t('联系门店') }}</view>
				<view @tap="navToScan" class="sesame-btn ">{{ $t('扫码绑定') }}</view>
			</view>

			<view v-if="orderInfo.order_status == 2" class="flex-row">
				<view @tap="callStorePhone" class="deposit-btn ">{{ $t('联系门店') }}</view>
				<view @tap="navToScan" class="sesame-btn ">{{ $t('去上传') }}</view>
			</view>

			<view
				v-else-if="(orderInfo.order_status == 3||orderInfo.order_status == 4) && orderInfo.order_type != 3 && orderInfo.pay_status != 5"
				class="flex-row"> 
				<view @tap="callStorePhone" class="cancel">{{ $t('联系门店') }}</view>
				<view @tap="tapReturnCar" class="deposit-btn">{{ $t('到店还车') }}</view>
				<view @tap="bindRenew" class="sesame-btn">{{ $t('续租') }}</view>
			</view>

			<view v-else-if="orderInfo.order_status == 5||orderInfo.order_status == 6" @tap="callStorePhone"
				class="pay-btn">
				{{ $t('联系门店') }}</view> 
			<view v-else-if="orderInfo.order_status == 7" @tap="callStorePhone" class="pay-btn">{{ $t('联系门店') }}</view>
			

			<view v-if="orderInfo.order_type == 3 && (orderInfo.order_status == 3||orderInfo.order_status == 4)"
				@tap="callStorePhone" class="pay-btn">{{ $t('联系门店') }}</view>
		</view> -->

		<view v-if="isShowCancel" class="cancel-b">
			<view class="cancel-box">
				<view class="cancel-title flex-row flex-between">
					<view>{{ $t('选择取消原因') }}</view>
					<view @tap="isShowCancel = false" style="font-size: 60rpx;">×</view>
				</view>
				<view @click="reason = $t('行程变更无需用车')" class="cancel-item flex-row flex-between">
					<view>{{ $t('行程变更无需用车') }}</view>
					<img :src="reason == $t('行程变更无需用车') ? 'https://qiniu.bms16.com/FhWimtmWybKlYMB6mgIReVWArbfq':'https://qiniu.bms16.com/Fh0JH6_QbiXYmVy7FNYnDkVIGvLC'" />
				</view>
				<view @click="reason = $t('修改订单信息')" class="cancel-item flex-row flex-between">
					<view>{{ $t('修改订单信息') }}</view>
					<img
						:src="reason == $t('修改订单信息') ?'https://qiniu.bms16.com/FhWimtmWybKlYMB6mgIReVWArbfq':'https://qiniu.bms16.com/Fh0JH6_QbiXYmVy7FNYnDkVIGvLC'" />
				</view>
				<view @click="reason = $t('不想要了')" class="cancel-item flex-row flex-between">
					<view>{{ $t('不想要了') }}</view>
					<img
						:src="reason == $t('不想要了') ?'https://qiniu.bms16.com/FhWimtmWybKlYMB6mgIReVWArbfq':'https://qiniu.bms16.com/Fh0JH6_QbiXYmVy7FNYnDkVIGvLC'" />
				</view>
				<view @click="bindCancel" class="cancel_btn">{{ $t('确认取消') }}</view>
			</view>
		</view>

		<returnCar :isShowReturnCar="isShowReturnCar" @closeShowReturnCarBtn="()=>isShowReturnCar=false"
			@navStoreBtn="navStoreBtn" @immediatelyReturnBtn="immediatelyReturnBtn" />

		<carPlan :isBuy='false' @payToOrder='payReturn' v-if="showCarPlan" @changeSelectType="changeSelectType"
			@closeShowMore="showCarPlan = false" :params="params" :selectType="selectType" />

		<PayTypeModel @closeShow="()=>isShowToBuy=false" @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_gyq = require('../../common/config_gyq.js');
	var config = require('../../common/config.js');
	var request = require('../../common/request');
	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 {
		getRemainingTime
	} from '@/utils/util';
	import {
		MAX_LIMITS,LEASE_TYPE_ARR
	} from '@/common/constant.js'
	var appWhiteListFilter = require('../../common/appWhiteListFilter.js');
	import allPrice from '@/component/allPrice/allPrice';
	import ReturnCar from '@/component/returnCar/returnCar';
	import carPlan from '@/component/carPlan/carPlan';
	import PayTypeModel from '@/component/payTypeModel/payTypeModel';
	import dayjs from 'dayjs'
	import duration from 'dayjs/plugin/duration'
	dayjs.extend(duration);
	
	export default {
		components: {
			allPrice,
			ReturnCar,
			PayTypeModel,
			carPlan
		},
		data() {
			return {
				overdueData: {},
				select_type: '',
				car_detail: {},
				showCarPlan: false,
				return_imgs: {},
				charge_standard: {},
				isShowCancel: false,
				order_sn: '',
				reason: this.$t('行程变更无需用车'),
				orderInfo: {},
				shop_image: [],
				isExpanded: false,
				isShowPrice: false,
				timer: '',
				isSelectStatus: 1,
				price_list: [], //车辆价格  hire_duration_unit 1 日 4 小时 6 周
				insurance_status: 0,
				over_fee: 0, //逾期金额
				plate_number: '',
				isScanCondeRentalCar: '',
				isShowReturnCar: false,
				isShowToBuy: false,
				totalPrice: 0, //逾期支付金额
			};
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.sub_sn = options.sub_sn || ''
			this.bindOrderInfo()
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function(e) {
			if (this.sub_sn && this.orderInfo.sub_sn) {
				this.bindOrderInfo()
			}
		},

		onUnload: function() {},

		computed: {},

		methods: {
			getAddressName(latitude, longitude) {
				const pData = {
					lng: longitude,
					lat: latitude,
					pi: "wx_index"
				}
				const that = this
				http.postApi(config.API_MAP_REGEO, pData, (resp) => {
					if (resp.data.code === 200) {
						that.orderInfo.address = resp.data.data.data.address
					} else {
						common.simpleToast(resp.data.msg)
					}
				})
			},
			leaseUnits(type){
				const result = LEASE_TYPE_ARR.find(v => v.value == type);
				return result ? result.unit : '';
			},
			leaseUnitsResult(type) {
				const result = LEASE_TYPE_ARR.find(v => v.value == type);
				return result ? result.label : '';
			},
			payReturn() {},
			//逾期费用计算
			async overdueMoneyFn(car_sn) {
				let {
					data
				} = await request.postApi(config_gyq.API_FLK_CAR_OVERDUE_MONEY, {
					car_sn
				})
				if (data.code == 200) {
					this.overdueData = data.data
				} else {
					common.simpleToast(data.msg)
				}
			},
			payToOrder() {},
			async loadCarInfo(model_id) {
				const me = this
				http.postApi(config.API_FLK_INDEX_CAR_MODEL_DETAIL, {
					model_id,
				}, (resp) => {
					if (resp.data.code === 200) {
						const pData = {
							...this.car_detail,
							price: this.price
						}

						me.setData({
							car_detail: resp.data.data,
							params: {
								order_sn: this.orderInfo.order_sn,
								...resp.data.data,
								price: (resp.data.data.rental_setting[0].hire_price / 100).toFixed(2)
							}
						})
						
					} else {
						common.simpleToast(resp.data.msg);
					}
				})
			},

			changeSelectType(select_type, price) {
				this.setData({
					selectType: select_type,
					price: (price / 100).toFixed(2)
				})
			},

			async carDetFn(car_sn) {
				let {
					data
				} = await request.postApi(config.API_FLK_CAR_DETAIL, {
					car_sn
				})
				if (data.code === 200) {
					if (data.data.model_id == this.orderInfo.model_id) {
						return true
					} else {
						common.simpleToast(this.$t('车型不匹配！'))
						return false
					}

					if (data.data.is_hire == 1) {
						return true
					} else {
						common.simpleToast(this.$t('车辆已被租售！'))
						return false
					}
					if (data.data.is_display == 1) {
						return true
					} else {
						common.simpleToast(this.$t('车辆未展示！'))
						return false
					}
				} else {
					common.simpleToast(this.$t('请扫描正确的二维码！'))
					return false
				}
				return false
			},
			async navToScan() {
				let car_sn = this.orderInfo.car_sn || ''
				if (!car_sn) {
					let res = await uni.scanCode({
						onlyFromCamera: true,
						scanType: ['qrCode'],
					});
					if (res[0]) return
					car_sn = res[1].result
					if (!await this.carDetFn(car_sn)) return
				}
				uni.showLoading({
					title: '识别中....',
					mask: true
				})
				setTimeout(() => {
					uni.hideLoading();
					uni.navigateTo({
						url: `/pages/activation/activation?model_id=${this.orderInfo.model_id}&sub_sn=${this.sub_sn}&car_sn=${car_sn}`
					})
				}, 1000);

			},

			navToCabinet() {
				const {
					latitude,
					longitude,
					cityname,
					address,
					shop_name
				} = this.orderInfo
				uni.openLocation({
					latitude: latitude - 0,
					longitude: longitude - 0,
					scale: 15,
					name: shop_name,
					address: address,
					success: function(res) {}
				});
			},

			hireDurationUnitFn(type) {
				if (type == 1) {
					return this.$t('天')
				} else if (type == 2) {
					return this.$t('月')
				} else if (type == 3) {
					return this.$t('年')
				} else if (type == 4) {
					return this.$t('小时')
				} else if (type == 5) {
					return this.$t('分钟')
				} else if (type == 6) {
					return this.$t('周')
				} else if (type == 7) {
					return this.$t('季')
				}
			},
			hireDurationUnitsFn(time, type) {

				if (type == 1) {
					return Math.ceil(time / 60 / 60 / 24) 
				} else if (type == 2) {
					return Math.ceil(time / 60 / 60 / 24 / 30)
				} else if (type == 3) {
					return Math.ceil(time / 60 / 60 / 24 / 30 / 365) 
				} else if (type == 4) {
					return Math.ceil(time / 60 / 60) 
				} else if (type == 5) {
					return Math.ceil(time / 60)
				} else if (type == 6) {
					return Math.ceil(time / 60 / 60 / 24 / 7)
				} else if (type == 7) {
					return Math.ceil(time / 60 / 60 / 24 / 30 / 3)
				}
			},

			async bindOrderInfo() {
				const me = this
				const locationStr = uni.getStorageSync('user_current_location');
				// if (locationStr) {
				// 	this.myLocation = locationStr;
				// }
				http.postApi(config.API_FLK_ORDER_INFO, {
					sub_sn: me.sub_sn,
					latitude: locationStr.latitude,
					longitude: locationStr.longitude,
				}, (resp) => {
					if (resp.data.code === 200) {
						me.orderInfo = resp.data.data.order_info
						me.orderInfo.model_images = me.orderInfo.model_images.split(',')[0]
						me.getAddressName(this.orderInfo.latitude,this.orderInfo.longitude)
						// 
						if (resp.data.data.order_info.model_id) {
							me.loadCarInfo(resp.data.data.order_info.model_id)
						}
						let distance = common.getFlatternDistance(locationStr.longitude, locationStr.latitude,
							me
							.orderInfo.longitude, me.orderInfo.latitude)
						resp.data.data.order_info.distance = distance
						// 取还时间展示
						// me.orderInfo.hire_return_time = common.getTimeToDay(Math.ceil(me.orderInfo
						// 	.hire_end_time - me.orderInfo.hire_begin_time) / 60)

						me.orderInfo.hire_return_time = getRemainingTime(me.orderInfo
							.hire_begin_time, me
							.orderInfo.hire_end_time)
						me.orderInfo.hire_begin_times = me.orderInfo.hire_begin_time ? dayjs(me
							.orderInfo
							.hire_begin_time * 1000).format(
							'YY-MM-DD') : 0
						me.orderInfo.hire_end_times = me.orderInfo.hire_end_time ? dayjs(me
							.orderInfo
							.hire_end_time * 1000).format(
							'YY-MM-DD') : 0
						console.log(me.orderInfo.order_status == 1);
						let other_time = 0
						// 剩余租期判断
						//订单状态 0 默认 1 待取车 2 待激活 3 使用中 4 已逾期 5 还车申请中 6 还车中 7 车辆已归还 8 订单已支付,已取消 9 订单未支付已取消
						if (me.orderInfo.order_status == 1) {
							me.orderInfo.hire_duration_time = common.countToDay(me.orderInfo.hire_cycle * me
								.orderInfo.hire_duration, me.orderInfo.hire_duration_unit)
							console.log(me.orderInfo.hire_duration_time, 'me.orderInfo.hire_duration_time');
						} else if ((me.orderInfo.hire_type == 2 && me.orderInfo.order_status == 2) || me
							.orderInfo.order_status == 3) {
							// me.orderInfo.hire_duration_time = common.timestampToDays(Math.ceil(me.orderInfo
							// 	.hire_end_time - Math.floor(new Date()) / 1000))
							
							me.orderInfo.hire_duration_time = common.formatTimeDifference(me.orderInfo
									.hire_end_time * 1000)
						} else {
							if (me.orderInfo.order_status == 4) {
								me.overdueMoneyFn(me.orderInfo.car_sn)

								// me.orderInfo.hire_duration_time = common.timestampToDays(Math.ceil(Math.floor(
								// 	new Date()) / 1000 - me.orderInfo.hire_end_time))
								me.orderInfo.hire_duration_time = common.formatTimeDifference(me.orderInfo
									.hire_end_time * 1000)

							} else {
								me.orderInfo.hire_duration_time = common.timestampToDays(Math.ceil(me.orderInfo
									.hire_begin_time - me.orderInfo.hire_end_time))
							}
						}
					} else {
						// 默认返回上一个页面再提示报错
						uni.navigateBack({
							delta: 1
						})
						common.simpleToast(resp.data.msg)
					}
				})

			},
			navStoreBtn() {
				const {
					latitude,
					longitude,
					address,
					shop_name
				} = this.orderInfo
				uni.openLocation({
					latitude: latitude - 0,
					longitude: longitude - 0,
					scale: 15,
					name: shop_name,
					address: address,
					success: function(res) {}
				});
			},
			tapReturnCar() {
				this.setData({
					isShowReturnCar: true
				})
			},
			immediatelyReturnBtn() {
				//到店还车  判断逾期状态 如果逾期要交逾期费用 跳转到上传车辆图片再支付逾期费用还车
				const isOverdue = this.orderInfo.order_status == 4
				const {
					car_sn,
					shop_id,
					overdue_money
				} = this.orderInfo
				const returnCarParams = {
					car_sn,
					shop_id,
					overdue_money,
					isReturnCar: true,
				}
				//提交还车图片
				uni.navigateTo({
					url: `/pages/activation/activation?isReturnCar=true&model_id=${this.orderInfo.model_id}&sub_sn=${this.sub_sn}&car_sn=${this.orderInfo.car_sn}&isOverdue=${isOverdue}&overdueMoney=${this.overdueData.money}&overdueTime=${this.overdueData.time}&type=index`
				});
				// if (isOverdue) {
				// 	this.setData({
				// 		totalPrice: this.overdueData.money,
				// 		isShowToBuy: true
				// 	})
				// } else {
				// 	//提交还车图片
				// 	uni.navigateTo({
				// 		url: `/pages/activation/activation?isReturnCar=true,model_id=${this.orderInfo.model_id}&sub_sn=${this.sub_sn}&car_sn=${this.orderInfo.car_sn}&isOverdue=${isOverdue}&overdueMoney=${this.overdueData.money}&overdueTime=${this.overdueData.time}`
				// 	});
				// }
			},
			callStorePhone() {
				const phone = this.orderInfo.link_phone
				common.callPhone(phone)
			},
			async clickCancel() {
				this.isShowCancel = true
			},

			async bindCancel() {
				const me = this
				let res = await uni.showModal({
					title: this.$t('取消订单'),
					content: this.$t('您是否需要取消该订单'),
					confirmText: this.$t('是'),
					confirmColor: '#0074FF',
					cancelText: this.$t('否'),
					cancelColor: '#191D23',
				});
				if (res[1].confirm) {
					let {
						data
					} = await request.postApi(config.API_DAYHIRE_HIRE_CANCEL_ORDER, {
						sub_sn: this.sub_sn,
						remark: this.reason
					})
					if (data.code == 200) {
						common.simpleToast(data.msg)
						this.isShowCancel = false
						this.bindOrderInfo()
					} else {
						common.simpleToast(data.msg)
					}
				}
			},

			bindToNav() {
				console.log(111);
				const {
					address,
					latitude,
					longitude,
					shop_name
				} = this.shopInfo
				uni.openLocation({
					latitude: latitude - 0,
					longitude: longitude - 0,
					scale: 15,
					name: shop_name,
					address: address,
					success: function(res) {},
				})
			},

			bindToHome() {
				uni.reLaunch({
					url: '/pages/index/index',
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {}
				});
			},

			callPhone() {
				const me = this
				const phone = me.shopInfo.link_phone
				uni.showModal({
					content: `您是否要拨打电话${phone}？`,
					confirmText: this.$t('确定'),
					success: (res) => {
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: phone,
								success() {},
								fail() {}
							})
						}
					},
					fail: (res) => {}
				})
			},

			bindRenew() {
				this.params.overdueData = this.overdueData
				this.showCarPlan = true
				// this.isReturnHome = false
				// let isRenew = true
				// uni.navigateTo({
				// 	url: '/pages/carIntroduce/carIntroduce?plate_number=' + this.orderInfo
				// 		.license_plate_number +
				// 		'&isRenew=' + isRenew +
				// 		'&order_sn=' + this.order_sn,
				// 	success: function(res) {},
				// 	fail: function(res) {},
				// 	complete: function(res) {}
				// });
			},

			bindBattery() {
				this.isReturnHome = false
				uni.navigateTo({
					url: '/pages/battery/battery?plate_number=' + this.orderInfo.license_plate_number,
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {}
				});
			},

			bindExpanded() {
				this.isExpanded = !this.isExpanded
			},

			navToInput() {
				this.isReturnHome = false
				uni.navigateTo({
					url: '/pages/inputLicensePlate/inputLicensePlate?order_sn=' + this.orderInfo
						.order_sn,
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {}
				});
			},

			// 激活车辆
			navToActive() {
				this.isReturnHome = false
				const me = this
				if (this.orderInfo.hire_type == 1) { // 预约
					if (me.isScanCondeRentalCar) {
						uni.scanCode({
							onlyFromCamera: true,
							success: function(res) {
								me.loadScanCode(res.result)
							},
							fail: function(res) {},
							complete: function(res) {},
						})
					} else {
						uni.navigateTo({
							url: '/pages/inputLicensePlate/inputLicensePlate?order_sn=' + this
								.order_sn + '&order_model_id=' + this.orderInfo.model_id,
							success: function(res) {},
							fail: function(res) {},
							complete: function(res) {}
						});
					}
				} else { // 非预约
					const isJumpReturn = false
					uni.navigateTo({
						url: '/pages/activation/activation?order_sn=' + this.order_sn +
							'&plate_number=' + this
							.orderInfo.license_plate_number + '&isJumpReturn=' + isJumpReturn,
						success: function(res) {},
						fail: function(res) {},
						complete: function(res) {}
					});
				}
			},

			loadScanCode(battery_sn) {
				const pData = {
					longitude: this.longitude,
					latitude: this.latitude,
					battery_sn: battery_sn
				}
				const me = this
				http.postApi(config.API_DAYHIRE_CAR_CAR_INFO, pData, (resp) => {
					uni.hideLoading()
					if (resp.data.code === 200) {
						const timestamp = Date.now(); // 获取当前时间戳（毫秒）  
						const isOffline = (Math.floor(timestamp / 1000) - resp.data.data
							.last_comm_time) > 1800
						me.plate_number = resp.data.data.license_plate_number
						if (resp.data.data.last_comm_time === 0 || isOffline) {
							common.simpleToast(this.$t('此车辆已离线，请选择其他车辆'))
						} else {
							let carInfo = JSON.stringify(resp.data.data)
							const car_model = resp.data.data.model_info.car_model
							const model_images = resp.data.data.model_info.model_images.split(',')
							const return_imgs = resp.data.data.return_imgs
							var model_id = resp.data.data.model_info.model_id
							if (resp.data.data.has_owner) { //车辆正在被使用
								if (resp.data.data.is_mine) { //是本人在使用
									wx.showModal({
										title: this.$t('提示'),
										content: '已有正在使用的车辆，是否跳转至车辆详情页?',
										cancelText: this.$t('取消'),
										confirmText: this.$t('确定'),
										success: function(res) {
											this.isReturnHome = false
											uni.navigateTo({
												url: '/pages/battery/battery?plate_number=' +
													this.plate_number
											});
										},
										fail: function(res) {},
										complete: function(res) {},
									})
								} else {
									common.simpleToast(this.$t('此车辆正在被使用'))
								}
							} else {
								if (me.order_sn && me.order_sn != '') {
									if (this.orderInfo.model_id != model_id) { // 预租车型与之前预约车型不一致
										common.simpleToast(this.$t('与预约车型不符'))
									} else {
										this.isReturnHome = false
										uni.navigateTo({
											url: '/pages/activation/activation?plate_number=' +
												this.plate_number + '&order_sn=' + this
												.order_sn +
												'&car_model=' + car_model + '&model_image=' +
												model_images[0] + '&return_imgs=' + JSON
												.stringify(
													return_imgs),
											fail() {}
										})
									}

								} else {
									this.isReturnHome = false
									uni.navigateTo({
										url: '/pages/carIntroduce/carIntroduce?carInfo=' +
											encodeURIComponent(carInfo) + '&plate_number=' +
											this.plate_number,
										fail() {}
									})
								}
							}
						}
					} else {
						common.simpleToast(resp.data.msg)
					}
				})
			},

			bindToPay() {
				const me = this
				//#ifdef MP-ALIPAY
				const _from = 'ali'
				const _pay_type = 2
				//#endif
				//#ifdef MP-WEIXIN
				const _from = 'wx'
				const _pay_type = 0
				//#endif
				http.postApi(config.API_DAYHIRE_HIRE_CONTINUE_PAY, {
					order_sn: me.order_sn,
					from: _from,
					pay_type: _pay_type
				}, (resp) => {
					common.loading()
					if (resp.data.code === 200) {
						uni.hideLoading()
						//#ifdef MP-ALIPAY
						my.tradePay({
							tradeNO: resp.data.data.trade_no,
							success: function(res) {
								if (res.resultCode == 9000) {
									common.simpleToast(this.$t('支付成功'));
								}
								setTimeout(function() {
									me.bindOrderInfo()
								}, 1000)
							},
							fail: function(res) {
								common.simpleToast(this.$t('支付失败，请重试'))
							},
						})
						//#endif
						//#ifdef MP-WEIXIN
						var payParams = JSON.parse(resp.data.data.payParams);
						user.wxPay(me.order_sn, payParams, function(isSuccess) {
							if (isSuccess) {
								common.simpleToast(this.$t('支付成功'))
								setTimeout(function() {
									me.bindOrderInfo()
								}, 1000)
							} else {
								common.simpleToast(this.$t('支付失败，请重试'))
							}
						});
						//#endif
					} else {
						uni.hideLoading()
						common.simpleToast(resp.data.msg)
					}
				})
			},

			// 计算拖车说明收费价格
			calculateFare(distance, charge_list) {
				let fare = 0
				if (distance <= charge_list.start_mil) {
					fare = charge_list.start_price / 100
				} else {
					// actual_start_mil:实际距离单位米
					// over_start_price:向上取整的公里数*超出首公里的费用
					var actual_start_mil = distance - charge_list.start_mil
					var over_start_price = (Math.ceil(actual_start_mil / charge_list.step_mil)) * charge_list
						.step_price
					fare = (charge_list.start_price + over_start_price) / 100
				}
				const fareArray = fare.toFixed(2).split('.'); //将价格拆分为整数部分和小数部分
				const price_list = {
					start_mil: (charge_list.start_mil / 1000).toFixed(2),
					start_price: (charge_list.start_price / 100).toFixed(2),
					step_mil: (charge_list.step_mil / 1000).toFixed(2),
					step_price: (charge_list.step_price / 100).toFixed(2),
					actual_start_mil: actual_start_mil ? (actual_start_mil / 1000).toFixed(2) : 0,
					over_start_price: over_start_price ? (over_start_price / 100).toFixed(2) : 0,
					fare: fare.toFixed(2), // 保留两位小数
					fareArray: fareArray //将价格拆分为整数部分和小数部分
				}
				return price_list
			},

			bindChangeStatus(e) {
				const {
					status,
					unit
				} = e.currentTarget.dataset
				this.setData({
					isSelectStatus: unit,
					selectIndex: status
				})
				// this.bindDuration()
			},

			//计算价格
			// bindDuration(){
			// 	const me = this
			// 	var _insurance_price  //保险金
			// 	const unit_price=(me.price_list[0].hire_price/100) * me.leaseTime  //租金
			// 	// insurance_setting 保险
			// 	if (me.insurance_setting!=null) {  // 有保险的时候
			// 		// isSelectDeposit==0为免押  isOpenNoDeposit为是否成功开通免押  total_money为总金额
			// 		// unit_price 租金   insurance_setting.price 保险金   deposit 押金
			// 		if (me.duration_unit == 4) { // 时
			// 			_insurance_price = (me.insurance_setting.price - 0) * 1
			// 		} else if(me.duration_unit == 6) { // 周
			// 			_insurance_price = (me.insurance_setting.price - 0) * 7 * me.leaseTime
			// 		} else { //天
			// 			_insurance_price = (me.insurance_setting.price - 0) * me.leaseTime
			// 		}
			// 	} else {  // 无保险
			// 		_insurance_price = 0
			// 	}

			// 	if (me.isOpenNoDeposit) {
			// 		// 金额=(周期数*周期价格)+保险金
			// 			me.amount = ((me.leaseTime * me.price_list[0].hire_price -0) + (_insurance_price - 0)) / 100
			// 	} else {
			// 		// 金额=(周期数*周期价格)+押金+保险金
			// 		me.amount = ((me.leaseTime * me.price_list[0].hire_price -0) + (me.modelInfo.deposit -0) + (_insurance_price - 0)) / 100
			// 	}
			// },

			loadEnd() {
				this.bindOrderInfo()
			},
			navToExchange() {
				console.log(this.$t('跳转换电记录'));
				uni.navigateTo({
					url: '/pages/exchangeRecord/exchangeRecord' +
						'?order_sn=' + this.orderInfo.order_sn
				})
			}
		}
	};
</script>

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

	.cancel_btn {
		width: 702rpx;
		height: 80rpx;
		background: #060809;
		border-radius: 40rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>