zx_flk_app/pages/order/order.vue

<template>
	<view class="container-view">
		<view class="order-type-view flex-row flex-between">
			<view 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 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 v-for="(item, index) in 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}}天
					</view>
					<view v-if="item.package_type == 2">
						{{item.num}}次
					</view>
					<view v-if="item.package_type == 3">
						{{item.total_day}}天{{item.num}}次
					</view>
				</block>
				
				<view v-if="item.pay_status==2 && selectOrderType == 1">
					<view class="card card-k" v-if="item.order_status == 1">待取车</view>
					<view class="card card-k" v-else-if="item.order_status == 2">待激活</view>
					<view class="card card-b" v-else-if="item.order_status == 3">使用中</view>
					<view class="card card-r" v-else-if="item.order_status == 4">已逾期</view>
					<view class="card card-k" v-else-if="item.order_status == 5">还车申请中</view>
					<view class="card card-k" v-else-if="item.order_status == 6">还车中</view>
					<view class="card card-k" v-else-if="item.order_status == 7">车辆已归还</view>
					<view class="card card-k" v-else-if="item.order_status == 8 ">订单已支付,已取消</view>
					<view class="card card-k" v-else-if=" item.order_status == 9">订单未支付,已取消</view>
				</view>
				
				<view v-if="item.pay_status!=2 && selectOrderType == 1">
					<view class="card card-k" v-if="item.pay_status == 0">待支付</view>
					<view class="card card-k" v-else-if="item.pay_status == 1">支付中</view>
					<view class="card card-r" v-else-if="item.pay_status == 3">支付失败</view>
					<view class="card card-k" v-else-if="item.pay_status == 4">支付取消</view>
					<view class="card card-b" v-else-if="item.pay_status == 5">线下待审核</view>
					<view class="card card-k" v-else-if="item.pay_status == 6">线下审核拒绝</view>
				</view>

				<view v-if="selectOrderType == 0">
					<view class="card card-k" v-if="item.pay_status == 0">待支付</view>
					<view class="card card-k" v-else-if="item.pay_status == 1">支付中</view>
					<view class="card card-k" v-else-if="item.pay_status == 2">支付成功</view>
					<view class="card card-r" v-else-if="item.pay_status == 3">支付失败</view>
					<view class="card card-k" v-else-if="item.pay_status == 4">支付取消</view>
					<view class="card card-b" v-else-if="item.pay_status == 5">线下待审核</view>
					<view class="card card-k" v-else-if="item.pay_status == 6">线下审核拒绝</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">下单时间</view>
							<view class="item-value">{{ tools.formatTime(item.ctime) }}</view>
						</view>
						<view v-if="item.hire_end_time" class="item-label-view flex-row">
							<view class="item-label">有效期至</view>
							<view class="item-value">{{ tools.formatTime(item.hire_end_time) }}</view>
						</view>

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

					</block>

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

					<view v-if="selectOrderType==0" class="flex-row button-config-view">
						<view v-if="item.order_refund_status == 1" class="return-money">申请中</view>
						<view v-if="item.order_refund_status == 2" class="return-money">审核失败</view>
						<view v-if="item.order_refund_status == 3" class="return-money">退款失败</view>
						<view v-if="item.order_refund_status == 4" class="return-money">已退款</view>
						<view class="item-value">套餐金额$ <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">订单金额 $ {{(item.money / 100).toFixed(2)}}</view>
						<view v-if="item.order_status == 2" class="activation-btn">激活车辆</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: '换电套餐'
					},
					{
						value: 1,
						text: '租车购车'
					}
				],
				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.car_info = uni.getStorageSync('car_info') || {};
			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.hireOrderList = []
			this.bindHireOrderList()
		},

		// 分享给好友
		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.page = 1
			if (this.selectOrderType == 0) {
				this.bindExchangeOrderFn()
			} else if (this.selectOrderType == 1) {
				this.bindHireOrderList()
			}
		},
		methods: {
			calculateRemainingDays(expirationDate) {
				// 获取当前时间
				const now = dayjs();
				// 解析到期时间
				const endDate = dayjs(expirationDate);
				// 计算剩余天数
				const remainingDays = endDate.diff(now, 'day');
				return remainingDays || 0;
			},
			//dayjs
			validDurationFn(start, end) {
				return getRemainingTime(start, end)
			},
			async bindExchangeOrderFn() {
				let {
					data
				} = await request.postApi(config_gyq.API_FLK_EXCHANGE_PACKAGE_ORDER_LIST, {
					pay_status: -1,
					car_sn: this.car_info.car_sn,
					page: this.page,
					limit: this.limit,
				})
				if (data.code == 200) {
					this.hireOrderList.push.apply(this.hireOrderList, data.data.list)
					this.is_next = data.data.is_next
				} else {
					common.simpleToast(resp.data.msg)
				}
			},
			bindHireOrderList() {
				const me = this
				http.postApi(config.API_FLK_ORDER_LIST, {
					page: me.page,
					limit: me.limit,
					// status: me.status,
					// sort_time: me.sort_time,
					// sort_num: me.sort_num
				}, (resp) => {
					if (resp.data.code === 200) {
						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) {
				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,
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			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>