zx_flk_app/pages/order/order.vue

<template>
	<view class="container-view">
		<navBar :name="$t('我的订单')" ></navBar>
		<!-- <view v-if="selectOrderType == 0" class="order-type-view flex-row flex-between">
			<view v-if="car_info.car_sn && selectOrderType == 0" @click="srcFn(`/pages/carList/carList`)" class="car-model-list flex-row">
				<view class="car-model-text">{{car_info.car_name}}</view><img class="right-corner-icon"
					src="https://qiniu.bms16.com/Fqs6TrEmcdT7QNEdKWs9Hir2cacO" alt="">
			</view>
			<view v-else></view>
			<view class="order-package-type-view flex-row">
				<view v-for="(type, index) in orderTypes" :key="index" @tap="checkOrderType" :data-type="type.value"
					:class="['package-type-list', 'flex-row', {'package-type-list-i': selectOrderType === type.value}]"
					:style="{ marginRight: index === 0 ? '48rpx' : '' }">
					<view class="package-type-text">{{ type.text }}</view>
					<img v-if="selectOrderType === type.value" class="right-button-icon"
						src="https://qiniu.bms16.com/FmcoAVgWvyK44iPjK0phkDRU21i0" alt="">
				</view>
			</view>
		</view> -->
		<view  class="order-type-view flex-row flex-between">
			<view style="justify-content: space-around;width: 100%;" class="order-package-type-view flex-row">
				<view style="width: 128rpx;" v-for="(type, index) in orderTypes" :key="index" @tap="checkOrderType" :data-type="type.value"
					:class="['package-type-list', 'flex-row', {'package-type-list-i': selectOrderType === type.value}]"
					>
					<view class="package-type-text">{{ type.text }}</view>
					<img v-if="selectOrderType === type.value" class="right-button-icon"
						src="https://qiniu.bms16.com/FmcoAVgWvyK44iPjK0phkDRU21i0" alt="">
				</view>
			</view>
		</view>
		<view v-for="(item, index) of hireOrderList" :key="index" @tap="loadToNav" :data-sub_sn="item.sub_sn"
			class="order-card">
			<view class="card-top flex-row">
				<view v-if="selectOrderType == 1">{{ item.car_name }}</view>


				<block v-if="selectOrderType == 0">
					<view v-if="item.package_type == 1">
						{{item.total_day}}{{ $t('天') }}
					</view>
					<view v-if="item.package_type == 2">
						{{item.num}}{{ $t('次') }}
					</view>
					<view v-if="item.package_type == 3">
						{{item.total_day}}{{ $t('天') }}{{item.num}}{{ $t('次') }}
					</view>
				</block>

				<view v-if="item.finally == 1 && selectOrderType == 1">
					<view class="card card-k" v-if="item.order_status == 0">{{ $t('待支付') }}</view>
					<view class="card card-k" v-if="item.order_status == 1">{{ $t('待取车') }}</view>
					<view class="card card-k" v-else-if="item.order_status == 2">{{ $t('待激活') }}</view>
					<view class="card card-b" v-else-if="item.order_status == 3">{{ $t('使用中') }}</view>
					<view class="card card-r" v-else-if="item.order_status == 4">{{ $t('已逾期') }}</view>
					<view class="card card-k" v-else-if="item.order_status == 5">{{ $t('还车申请中') }}</view>
					<view class="card card-k" v-else-if="item.order_status == 6">{{ $t('还车中') }}</view>
					<view class="card card-k" v-else-if="item.order_status == 7">{{ $t('车辆已归还') }}</view>
					<view class="card card-k" v-else-if="item.order_status == 8 ">{{ $t('订单已支付') }},{{ $t('已取消') }}</view>
					<view class="card card-k" v-else-if=" item.order_status == 9">{{ $t('订单未支付') }},{{ $t('已取消') }}</view>
					<view class="card card-k" v-else-if=" item.order_status == 10">{{ $t('已完结') }}</view>
				</view>

				<view v-if="item.finally != 1 && selectOrderType == 1">
					<view class="card card-k" v-if="item.pay_status == 0">{{ $t('待支付') }}</view>
					<view class="card card-k" v-else-if="item.pay_status == 1">{{ $t('支付中') }}</view>
					<view class="card card-k" v-else-if="item.pay_status == 2">{{ $t('支付成功') }}</view>
					<view class="card card-r" v-else-if="item.pay_status == 3">{{ $t('支付失败') }}</view>
					<view class="card card-k" v-else-if="item.pay_status == 4">{{ $t('支付取消') }}</view>
					<view class="card card-b" v-else-if="item.pay_status == 5">{{ $t('线下待审核') }}</view>
					<view class="card card-k" v-else-if="item.pay_status == 6">{{ $t('线下审核拒绝') }}</view>
				</view>

				<view v-if="selectOrderType == 0">
					<view class="card card-k" v-if="item.pay_status == 0">{{ $t('待支付') }}</view>
					<view class="card card-k" v-else-if="item.pay_status == 1">{{ $t('支付中') }}</view>
					<view class="card card-k" v-else-if="item.pay_status == 2">{{ $t('支付成功') }}</view>
					<view class="card card-r" v-else-if="item.pay_status == 3">{{ $t('支付失败') }}</view>
					<view class="card card-k" v-else-if="item.pay_status == 4">{{ $t('支付取消') }}</view>
					<view class="card card-b" v-else-if="item.pay_status == 5">{{ $t('线下待审核') }}</view>
					<view class="card card-k" v-else-if="item.pay_status == 6">{{ $t('线下审核拒绝') }}</view>
				</view>

			</view>
			<view class="card-border"></view>
			<view class="card-bottom">
				<view class="bottom-item">
					<block v-if="selectOrderType == 1">
						<view class="item-label-view flex-row">
							<view class="item-label">{{ $t('订单编号') }}</view>
							<view class="item-value">{{ item.sub_sn }}</view>
						</view>
						<view class="item-label-view flex-row">
							<view class="item-label">{{ $t('下单时间') }}</view>
							<view class="item-value">{{ tools.formatTime(item.ctime) }}</view>
						</view>
						<view v-if="item.hire_end_time && item.order_type != 3" class="item-label-view flex-row">
							<view class="item-label">{{ $t('有效期至') }}</view>
							<view class="item-value">{{ tools.formatTime(item.hire_end_time) }}</view>
						</view>

						<view v-if="item.hire_duration_time && item.order_type != 3" class="item-label-view flex-row">
							<view class="item-label">{{ $t('有效时长') }}</view>
							<view class="item-value">
								{{ item.hire_duration_time.day > 0 ? item.hire_duration_time.day : '' }}<text
									v-if="item.hire_duration_time.day > 0">{{ $t('日') }}</text>{{ item.hire_duration_time.hour > 0 ?
									item.hire_duration_time.hour : '' }}<text v-if="item.hire_duration_time.hour > 0">{{ $t('小时') }}</text>{{ item.hire_duration_time.minute > 0 ?
									item.hire_duration_time.minute : '' }}<text v-if="item.hire_duration_time.minute > 0">{{ $t('分') }}</text>
							</view>
						</view>
					</block>
					<block v-if="selectOrderType == 0">
						<view class="item-label-view flex-row">
							<view class="item-label">{{ $t('下单时间') }}</view>
							<view class="item-value">{{ tools.formatTime(item.ctime) }}</view>
						</view>
						<view v-if="item.expire_time" class="item-label-view flex-row">
							<view class="item-label">{{ $t('有效期至') }}</view>
							<view class="item-value">{{ tools.formatTime(item.expire_time) }}</view>
						</view>
						<view v-if="item.package_type != 2 && item.expire_time" class="item-label-view flex-row">
							<view class="item-label">{{ $t('有效时长') }}</view>
							<view class="item-value">
								{{calculateRemainingDays(item.expire_time)}}<text
									style="color: #9FA7B7;">/{{item.total_day}}{{ $t('天') }}</text>
							</view>
						</view>
						<view v-if="item.package_type == 1" class="item-label-view flex-row">
							<view class="item-label">{{ $t('免费换电数') }}</view>
							<!-- <view class="item-value">{{item.last_num}}{{ $t('次') }}</view> -->
							<view class="item-value">{{ $t('不限次数') }}</view>
						</view>
						<view v-if="item.package_type == 2" class="item-label-view flex-row">
							<view class="item-label">{{ $t('免费换电数') }}</view>
							<view class="item-value">{{item.last_num}}/{{item.num}}{{ $t('次') }}</view>
						</view>
						<view v-if="item.package_type == 3" class="item-label-view flex-row">
							<view class="item-label">{{ $t('免费换电数') }}</view>
							<view class="item-value">{{item.total_day}}{{ $t('天') }}/{{item.last_num}}{{ $t('次') }}</view>
						</view>

					</block>

					<view v-if="selectOrderType==1" class="item-label-view flex-row">
						<view class="item-label">{{ $t('订单类型') }}</view>
						<view class="item-value">{{ item.order_type==3?$t('购车'):$t('租车') }}</view>
					</view>

					<view v-if="selectOrderType==0" class="flex-row button-config-view">
						<view v-if="item.order_refund_status == 1" class="return-money">{{ $t('申请中') }}</view>
						<view v-if="item.order_refund_status == 2" class="return-money">{{ $t('审核失败') }}</view>
						<view v-if="item.order_refund_status == 3" class="return-money">{{ $t('退款失败') }}</view>
						<view v-if="item.order_refund_status == 4" class="return-money">{{ $t('已退款') }}</view>
						<view class="item-value">{{ $t('套餐金额') }}$ <text
								class="money-style">{{(item.package_money / 100).toFixed(2)}}</text></view>
					</view>
					<view v-if="selectOrderType==1" class="flex-row button-config-view">
						<view class="order-money">{{ $t('订单金额') }} $ {{(item.money / 100).toFixed(2)}}</view>
						<view v-if="item.order_status == 2" class="activation-btn">{{ $t('激活车辆') }}</view>
					</view>
				</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>
	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');
	var storage = require('../../common/storage.js');
	const dayjs = require('dayjs');
	import {
		getRemainingTime
	} from '../../utils/util.js';
	export default {
		data() {
			return {
				is_next: 0,
				car_info: {},
				selectOrderType: 1,
				orderTypes: [{
						value: 0,
						text: this.$t('换电套餐')
					},
					{
						value: 1,
						text: this.$t('租车购车')
					}
				],
				start_id:0,
				page: 1,
				limit: 10,
				status: '-1',
				sort_time: 0,
				sort_num: 0,
				hireOrderList: [],
				order_sn: '',
				myLocation: {
					latitude: null,
					longitude: null
				},
				orderInfoTime: {},
				nowTime: 0
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.selectOrderType = options.selectOrderType == 0 ? 0 : 1
			const locationStr = uni.getStorageSync('user_current_location');
			if (locationStr) {
				this.myLocation = locationStr;
			}
			let timestamp = Date.now();
			this.nowTime = Math.floor(timestamp / 1000);
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.car_info = uni.getStorageSync('car_info') || {};
			this.page = 1
			this.start_id = 0
			this.hireOrderList = []
			setTimeout(()=> {
				if(this.selectOrderType == 1){
					this.bindHireOrderList()
				}else{
					this.bindExchangeOrderFn()
				}
			}, 300);
		},

		// 分享给好友
		onShareAppMessage: function(res) { //发送给朋友
			return {
				title: this.appConfig.app_name,
				path: 'pages/order/order',
			}
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			if (!this.is_next) return
			this.page++
			if (this.selectOrderType == 0) {
				this.bindExchangeOrderFn()
			} else if (this.selectOrderType == 1) {
				this.bindHireOrderList()
			}
		},
		/**
		 * 页面下拉触底事件的处理函数
		 */
		onPullDownRefresh() {
			this.start_id
			if (this.selectOrderType == 0) {
				this.bindExchangeOrderFn()
			} else if (this.selectOrderType == 1) {
				this.bindHireOrderList()
			}
		},
		methods: {
			srcFn(url) {
				uni.navigateTo({
					url,
				})
			},
			calculateRemainingDays(expirationDate) {
				// 获取当前时间
				const now = dayjs();
				// 解析到期时间
				const endDate = dayjs(expirationDate * 1000);
				// 计算剩余天数
				const remainingDays = endDate.diff(now, 'day');
				return remainingDays || 1;
			},
			//dayjs
			validDurationFn(start, end) {
				return getRemainingTime(start, end)
			},
			async bindExchangeOrderFn() {
				let me = this
				let {
					data
				} = await request.postApi(config_gyq.API_FLK_EXCHANGE_PACKAGE_ORDER_LIST, {
					pay_status: -1,
					car_sn: '',
					start_id:me.start_id,
					page: this.page,
					limit: this.limit,
				})
				if (data.code == 200) {
					me.start_id = data.data.start_id
					this.hireOrderList.push.apply(this.hireOrderList, data.data.list)
					this.is_next = data.data.is_next
				} else {
					common.simpleToast(data.msg)
				}
			},
			bindHireOrderList() {
				const me = this
				http.postApi(config.API_FLK_ORDER_LIST, {
					page: me.page,
					limit: me.limit,
					start_id:me.start_id,
					// status: me.status,
					// sort_time: me.sort_time,
					// sort_num: me.sort_num
				}, (resp) => {
					if (resp.data.code === 200) {
						me.start_id = resp.data.data.start_id
						me.hireOrderList.push.apply(me.hireOrderList, resp.data.data.list)
						me.is_next = resp.data.data.is_next
						if (me.hireOrderList.length > 0) {
							me.sort_time = me.hireOrderList[me.hireOrderList.length - 1].ctime;
							me.sort_num = me.hireOrderList[me.hireOrderList.length - 1].sort_num;
							me.hireOrderList = me.hireOrderList.map(item => {
								item.order_time = common.getTimeToDay(Math.ceil(item.hire_end_time - me
									.nowTime) / 60)
								item.hire_duration_time = common.getTimeToDay(Math.ceil(item
									.hire_end_time - item.hire_begin_time) / 60)
								return item
							})
						}
					} else {
						common.simpleToast(resp.data.msg)
					}
				})
			},
			checkOrderType(e) {
				this.start_id = 0
				const type = e.currentTarget.dataset.type;
				this.setData({
					selectOrderType: type
				})
				this.hireOrderList = []
				if (type == 0) {
					this.page = 1
					this.bindExchangeOrderFn()
				} else if (type == 1) {
					this.page = 1
					this.bindHireOrderList()
				}
			},
			navToPage(e) {
				const url = e.currentTarget.dataset.url;
				if (!url) {
					return;
				}
				uni.navigateTo({
					url: url
				});
			},

			loadToNav(e) {
				if (this.selectOrderType == 0) {
					return
				}
				const sub_sn = e.currentTarget.dataset.sub_sn
				const isJumpReturn = false
				uni.navigateTo({
					url: '/pages/orderStatus/orderStatus?sub_sn=' + sub_sn,
				})
			},
			async activateCar(e) {
				let car_sn = e.currentTarget.dataset.car_sn || ''
				let model_id = e.currentTarget.dataset.model_id || ''
				if (!car_sn) {
					let res = await uni.scanCode({
						onlyFromCamera: true,
						scanType: [],
					});
					if (res[0]) return
					car_sn = res[1].result
				}
				uni.navigateTo({
					url: `/pages/activation/activation?model_id=${this.orderInfo.model_id}&sub_sn=${this.sub_sn}&car_sn=${car_sn}`
				})
				// uni.scanCode({
				// 			onlyFromCamera: true,
				// 			success: function (res) {
				// 				uni.navigateTo({
				// 					url: '/pages/activation/activation?sub_sn=' + sub_sn 
				// 				})
				// 			},
				// 			fail: function (res) { },
				// 			complete: function (res) { },
				// 		})

			}
		}
	};
</script>

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