zx_flk_app/pages/battery/battery.vue

<template>
	<view class="">
		<view v-if="!isNoneList" class="container-view">
			<view class="battery-info" style="height: 612rpx;">
				<view class="img_position"><img style="width: 520rpx;height: 544rpx;"
						src="https://qiniu.bms16.com/FsNL3g6p_ek2_pPdd35E8Or_S1ap" /></view>

				<view class="shadow" :style="{ '--progress': quantity*0.68 + '%' }">
				</view>
				<view class="quantity_box">
					<view class="num_quantity">{{Math.floor(quantity)}}</view>
				</view>
			</view>
			<view class="endurance-img-view" style="display: flex;justify-content: center;">
				<view class="endurance-img">
					<text>: {{Math.round(last_endurance/1000)}}km</text>
				</view>
			</view>
			<view class="flex-row" style="justify-content: center;">
				<view class="icon-box flex-row" style="justify-content: space-around;">
					<view v-if="orderInfo.order_info.battery_sn!=''" @tap="navToPage"
						data-url="/pages/exchangeCar/exchangeCar" data-index="1"
						class="flex-column my_function position">
						<view v-if="(orderInfo.order_info.gift_exchange_num - orderInfo.order_info.used_exchange_num)>0"
							class="red_tip">免费 <text
								style="font-size: 28rpx;margin: 0 2rpx;">{{orderInfo.order_info.gift_exchange_num - orderInfo.order_info.used_exchange_num}}</text>
							次</view>
						<image class="my_icon" src="https://qiniu.bms16.com/FgR9qwTgatlAzamYdcFngFU4_ydj"></image>
						<view class="my_title">车辆换电</view>
					</view>
					<view v-if="orderInfo.third_device_type == 'TBTKC'" @tap="clickCarCommand" data-command="FINDCAR" class="flex-column my_function">
						<image class="my_icon" src="https://zxappfile.bms16.com/zx_client/find_car.png"></image>
						<view class="my_title">响铃找车</view>
					</view>
					<view  v-if="orderInfo.third_device_type == 'TBTKC'" @tap="clickCarCommand" data-command="OPENSEATLOCK" class="flex-column my_function">
						<image class="my_icon" src="https://zxappfile.bms16.com/zx_client/seat_lock.png"></image>
						<view class="my_title">开座桶锁</view>
					</view>
					<!-- 	<view @tap="clickCarCommand" data-command="helmet" class="flex-column my_function">
						<image class="my_icon_1" src="https://zxappfile.bms16.com/zx_client/helmet.png"></image>
						<view class="my_title">关闭头盔锁</view>
					</view> -->
					<view 
						@tap="clickCarCommand($event, true)" 
						:data-command="protect_state ? 'SAFEOFF': 'SAFEON'" 
						data-index="5" 
						class="flex-column my_function"
					>
						<image class="my_icon" :src="protect_state ? lockIcon : onLockIcon"></image>
						<view class="my_title">{{ protect_state ? '解锁' : '上锁'}}</view>
					</view>
					<view @tap="navToPage" data-url="/pages/travelingTrack/travelingTrack" data-index="2"
						class="flex-column my_function">
						<image class="my_icon" src="https://qiniu.bms16.com/Fj61bkq6KYkfA9QdbLfpVUj3Nm5Q"></image>
						<view class="my_title">行驶轨迹</view>
					</view>
					<view @tap="navToPage" data-url="/pages/carLocation/carLocation" data-index="3"
						class="flex-column my_function">
						<image class="my_icon" src="https://qiniu.bms16.com/Fg_eny6c-tiDVy1iTFyyWzmUj4ho"></image>
						<view class="my_title">车辆位置</view>
					</view>
					<view v-if="orderInfo.drag_car_service" @tap="navToPage" data-url="/pages/towingCar/towingCar"
						data-index="4" class="flex-column my_function">
						<image class="my_icon" src="https://qiniu.bms16.com/FsG5bN2bg-MXLXZehQ33TsYPfrH8"></image>
						<view class="my_title">拖车服务</view>
					</view>
				</view>

			</view>
			<view class="flex-row" style="justify-content: center;">
				<view class="battery-btn flex-row">
					<view v-if="orderInfo.is_on == 1" @tap="bindCarStatus" :data-car="orderInfo.is_on">
						<!-- <img class="img_car_on" src="https://qiniu.bms16.com/FtoO8li2ncvlGsjggXY7gMtaIAWt" /> -->
						关闭车辆
					</view>
					<view v-else-if="orderInfo.is_on == 0||orderInfo.is_on == 2" @tap="bindCarStatus"
						:data-car="orderInfo.is_on">
						<!-- <img class="lock_img" src="https://qiniu.bms16.com/Fq7SWg4flipex4HXuDxsxL88AN5s" /> -->
						启动车辆
					</view>

					<view @tap="bindReturnCar">我要还车</view>
				</view>
			</view>
			<view class="">
				<view class="battery-second flex-row flex-between">
					<view>剩余租期</view>
					<view @tap="navToPage" data-url="/pages/orderStatus/orderStatus" data-index="5">查看订单</view>
				</view>
			</view>
			<view class="battery-bottom flex-row flex-between">
				<view v-if="orderInfo.time" class="bottom-time flex-row">
					{{orderInfo.time.day > 0 ? orderInfo.time.day :'' }}<text
						v-if="orderInfo.time.day>0">日</text>{{orderInfo.time.hour > 0 ? orderInfo.time.hour :'' }}<text
						v-if="orderInfo.time.hour>0">小时</text>{{orderInfo.time.minute > 0 ? orderInfo.time.minute :'' }}<text
						v-if="orderInfo.time.minute>0">分</text>
					<view style="font-weight: 400;">到期后将无法用车</view>
				</view>
				<view v-else class="bottom-time flex-row">
					已到期
					<view>到期后将无法用车</view>
				</view>
				<view @tap="bindRenewHire">续租</view>
			</view>
			<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" style="font-size: 60rpx;">×</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="isShowRenewHire" class="renew-box">
				<scroll-view class="renew-item" scroll-y :show-scrollbar='true' :enhanced='true'>
					<view class="renew-title flex-row flex-between">
						<view>选择续租方案</view>
						<view @tap="isShowRenewHire = false" style="font-size: 60rpx;">×</view>
					</view>
					<view class="plan-info">
						<view class="plan-type flex-row flex-between">
							<view @tap="bindChangeStatus" data-status="0"
								:class="isSelectStatus == 0?'ptyped-item':'ptype-item'">
								<view class="ptype-title">时租</view>
								<view :class="isSelectStatus == 0?'ptyped-text':'ptype-text'">
									￥<text>8</text>
								</view>
							</view>
							<view @tap="bindChangeStatus" data-status="1"
								:class="isSelectStatus == 1?'ptyped-item':'ptype-item'">
								<view class="ptype-title">日租</view>
								<view :class="isSelectStatus == 1?'ptyped-text':'ptype-text'">
									￥<text>48</text>
								</view>
							</view>
							<view @tap="bindChangeStatus" data-status="2"
								:class="isSelectStatus == 2?'ptyped-item':'ptype-item'">
								<view class="ptype-title">周租</view>
								<view :class="isSelectStatus == 2?'ptyped-text':'ptype-text'">
									￥<text>208</text>
								</view>
							</view>
						</view>
						<view class="plan-time flex-row flex-between">
							<view>租车时长/天</view>
							<view class="quantity-count flex-row">
								<view class="count-btn fbtn" @tap.stop.prevent="bindMinus">-</view>
								<input @input="bindInput" @blur="bindBlur" type="number" :value="count" />
								<view class="count-btn sbtn" @tap.stop.prevent="bindAdd">+</view>
							</view>
						</view>
						<view class="coupon-info flex-row flex-between">
							<view>优惠券</view>
							<view>
								9.8 折
								<img src="https://qiniu.bms16.com/Fjw9OKXT_2aZ1iPStF941RoawSy_" />
							</view>
						</view>
					</view>
					<view class="guarantee-info">
						<view class="guarantee-title flex-row flex-between">
							<view>骑行保障服务</view>
							<view>保障须知</view>
						</view>
						<view class="flex-row flex-between">
							<view @tap="clickSelectGuarantee" v-for="(item,index) in guaranteeList" :key="index"
								:data-status="index"
								:class="isSelectGuarantee==index?'selected-guarantee':'select-guarantee'">
								<view class="guarantee-top flex-row flex-column">
									<img :src="item.src" />
									{{item.title}}
								</view>
								<view class="guarantee-center">
									<view v-for="(items,indexs) in guaranteeType" :key="indexs"
										class="center-item flex-row flex-between">
										<view>{{items.title}}</view>
										<view>{{items.price}}</view>
									</view>
									<view style="color: #828DA2;text-align: center;font-size: 24rpx;">
										含行程延误保障
									</view>
									<view class="guarantee-border"></view>
									<view class="guarantee-bottom flex-row flex-column">
										<view>1.3元/天</view>
										<view v-if="index==0" :class="isSelectGuarantee==0?'blue-t':'black-t'">商家赠送
										</view>
										<view v-if="index!=0">
											<img
												:src="isSelectGuarantee==index?'https://qiniu.bms16.com/FjLudtM29xwqgJh5kUKR9kyhK0Lu':'https://qiniu.bms16.com/FuQZipm9g7wX6CyGQBCjK2RTXfbW'" />
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="assort-info">
						<view>配套服务</view>
						<view class="assort-text flex-row">
							<view>头盔×1</view>
							<view>手机支架×1</view>
						</view>
					</view>

					<view class="payment-info">
						<view class="payment-top flex-row">
							<img
								:src="isArgee?'https://qiniu.bms16.com/FhWimtmWybKlYMB6mgIReVWArbfq':'https://qiniu.bms16.com/FkmDjxBNZhFGFU5inza2usdtDlX8'" />
							已阅读并同意
							<text>《小众电动车租赁用户协议》</text>
						</view>
						<view class="payment-bottom flex-row flex-between">
							<view class="bottom-left flex-row">
								<view>￥92.23</view>
								<view>明细<img src="https://qiniu.bms16.com/FmEDQp82D5k9lkHMEcCoCeLO8ZQL" /></view>
							</view>
							<view @tap="navToPage" data-url="/pages/orderStatus/orderStatus">支付·授权免押</view>
						</view>
					</view>
				</scroll-view>
			</view>

		</view>
		<view v-else class="no-car">暂无车辆</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 common = require('../../common/common.js');
	var http = require('../../common/http.js');
	var storage = require('../../common/storage.js');
	import lockIcon from '@/static/resource/images/lock_icon.png';
	import onLockIcon from '@/static/resource/images/onLock_icon.png';
	export default {
		components: {},
		data() {
			return {
				lockIcon,
				onLockIcon,
				isReturnIndex: true, //是否返回首页
				last_endurance: 0,
				isCustomJump: true,
				is_show: false,
				imageUrl: '',
				return_imgs: [],
				order_sn: '',
				plate_number: '',
				myLocation: {
					// longitude: '',
					// latitude: '',
				},
				orderInfo: [],
				model_info: {},
				quantity: 0,
				electricity: 20,
				isShowReturnCar: false,
				isShowRenewHire: false,
				isSelectStatus: 1,
				count: 1,
				isSelectGuarantee: 0,
				last_endurance: 0,
				isNoneList: false,
				protect_state: false, // 车辆状态（是否上锁）
				initialProtectState: '', // 初始状态
				initialIsOn: '',
				cycleTimer: null
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.plate_number = options.plate_number || ''
			this.isReturnIndex = options.isReturnIndex ? false : true
			this.getWxLocation()
			if (this.plate_number == 'undefined') {
				this.setData({
					isNoneList: true
				})
			} else {
				this.setData({
					isNoneList: false
				})
				this.loadCarInfo(true)
				if (options.isActivePage) {
					// 如果是激活页面过来的。后端接口第一时间无法获取数据。需要再延迟获取一次
					const timer = setTimeout(() => {
						this.loadCarInfo(true)
						clearTimeout(timer)
					}, 8000)
				}
			}

			this.$_queryCarStatus()
			this.cycleTimer = setInterval(() => {
				this.$_queryCarStatus()
			}, 10000);

		},

		onUnload: function() {
			if (this.cycleTimer) {
				clearInterval(this.cycleTimer);
				this.cycleTimer = null;
			}
			
			if (this.isCustomJump && this.isReturnIndex) {
				uni.switchTab({
					url: '/pages/my/my'
				});
			} else if (this.isCustomJump && !this.isReturnIndex) {
				uni.switchTab({
					url: '/pages/index/index' // 首页
				});
			}
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.isCustomJump = true
		},
		methods: {
			// 查询车辆关键参数
			$_queryCarStatus() {
				const myLocation = uni.getStorageSync('user_current_location')
				const data = {
					longitude: myLocation.longitude,
					latitude: myLocation.latitude,
					plate_number: this.plate_number
				}
				http.postApi(config.API_DAYHIRE_CAR_CAR_STATUS, data, res => {
					if (res.data.code !== 200) return
					const { is_on, last_comm_time, last_endurance, protect_state, quantity, third_device_type } = res.data.data
					
					this.orderInfo.is_on = is_on
					this.orderInfo.third_device_type = third_device_type
					this.setData({
						last_endurance,
						protect_state: protect_state == 1,
						quantity
					})
				})
			},
			handleCanvasToImage(imageUrl) {
				this.imageUrl = imageUrl
			},
			walletInfo() {
				http.postApi(config.API_DAYHIRE_USER_WALLET_INFO, {}, function(resp) {
					if (resp.data.code === 200) {

					} else {
						common.simpleToast(resp.data.msg)
					}
				})
			},

			getWxLocation() {
				const me = this;
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					success: function(res) {
						me.myLocation = {
							longitude: res.longitude,
							latitude: res.latitude
						}
						uni.setStorageSync('user_current_location', me.myLocation)
					},
					fail: function(res) {
						common.simpleToast('获取地址失败，请授权重新打开')
					}
				})
				// this.loadCarInfo()
			},

			loadCarInfo(init = false) {
				const me = this
				const myLocation = uni.getStorageSync('user_current_location')
				const pData = {
					longitude: myLocation.longitude,
					latitude: myLocation.latitude,
					plate_number: me.plate_number
				}
				return new Promise(function(resolve, reject) {
					http.postApi(config.API_DAYHIRE_CAR_CAR_INFO, pData, function(resp) {
						if (resp.data.code === 200) {
							me.orderInfo = resp.data.data
							const _model_image = resp.data.data.model_info.model_images ? resp.data.data.model_info
								.model_images.split(",")[0] : ''
							me.setData({
								quantity: me.orderInfo.quantity,
								last_endurance: me.orderInfo.last_endurance,
								protect_state: me.orderInfo.protect_state == 1
							})
							if (init) {
								me.setData({
									initialProtectState: me.orderInfo.protect_state,
									initialIsOn: me.orderInfo.is_on
								})
							}
							resolve(me.orderInfo)
							me.model_info = me.orderInfo.model_info
							me.model_image = _model_image
							me.order_sn = me.orderInfo.order_sn
							me.return_imgs = me.orderInfo.return_imgs
							const datetime = Math.floor(new Date().getTime() / 1000); //获取当前时间
							var remain = Math.ceil(me.orderInfo.hire_expire_time - datetime) / 60
							const car_list = {
								plate_number: me.plate_number,
								order_status: me.orderInfo.order_info.order_status,
								battery_sn: me.orderInfo.order_info.battery_sn || '',
								remain: me.orderInfo.hire_expire_time - datetime > 0
							}
							uni.setStorageSync('user_car_list', car_list)
							// var remain = Math.ceil(me.orderInfo.hire_expire_time - datetime) / 60
							if (remain > 0) {
								var day = Math.floor(remain / (60 * 24))
								var hour = Math.floor((remain - day * (60 * 24)) / 60)
								var Minute = Math.floor(remain - (hour * 60) - day * (60 * 24))
								me.orderInfo.time = {
									day: day,
									hour: hour,
									minute: Minute,
								}
							} else {
								me.orderInfo.time = ''
							}
						} else {
							// 默认返回首页再提示报错
							me.isCustomJump = false
							uni.reLaunch({
								url: '/pages/index/index'
							})
							common.simpleToast(resp.data.msg)
						}
					})
				})
			},

			bindReturnCar() {
				this.setData({
					isShowReturnCar: true
				})
			},

			bindRenewHire() {
				let isRenew = true
				this.isCustomJump = false
				uni.navigateTo({
					url: '/pages/carIntroduce/carIntroduce?plate_number=' + this.plate_number + '&isRenew=' +
						isRenew +
						'&order_sn=' + this.order_sn,
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {}
				});
			},

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

			bindMinus() {
				if (this.count > 1) {
					this.setData({
						count: this.count - 1
					});
				}
			},

			bindInput(e) {
				let count = Number(e.detail.value)
				this.setData({
					count: count,
				})
			},

			bindBlur(e) {
				const count = e.detail.value
				if (count < 1) {
					this.setData({
						count: 1
					})
				}
			},

			bindAdd() {
				this.setData({
					count: this.count + 1
				});
			},

			clickSelectGuarantee(e) {
				const status = e.currentTarget.dataset.status
				this.setData({
					isSelectGuarantee: status
				})
			},

			clickCarCommand(e, isRefresh = false) {
				var command = e.currentTarget.dataset.command;

				const commandTips = {
					FINDCAR: {
						title: "响铃找车",
						desc: "您确定开启响铃找车？",
						success: "车辆已开始鸣笛"
					},
					OPENSEATLOCK: {
						title: "开座桶锁",
						desc: "您确定打开座桶锁？",
						success: "座桶锁已打开"
					},
					SAFEON: {
						title: "上锁",
						desc: "您确定给车辆上锁？",
						optTxt: '正在上锁...',
						success: "已上锁"
					},
					SAFEOFF: {
						title: "解锁",
						desc: "您确定给车辆解锁？",
						optTxt: '正在解锁...',
						success: "已解锁"
					}
				}

				const tipTitle = commandTips[command].title || ""
				const tipDesc = commandTips[command].desc || ""
				const tipSuccess = commandTips[command].success || ""
				const optTxt = commandTips[command].optTxt || ""
				
				const me = this
				uni.showModal({
					title: tipTitle,
					content: tipDesc,
					cancelText: '取消',
					confirmText: '确定',
					success: function(res) {
						if (res.confirm) {
							const pData = {
								plate_number: me.plate_number,
								cmd: command
							}
							http.postApi(config.API_CAR_SEND_COMMAND, pData, function(resp) {
								if (resp.data.code === 200) {
									if (isRefresh) {
										const TIME = 8000
										common.simpleToast(optTxt, TIME)
										const timer = setTimeout(() => {
											me.loadCarInfo()
											clearTimeout(timer)
										}, TIME)
									} else {
										common.simpleToast(tipSuccess, 4000)			
									}
								} else {
									common.simpleToast(resp.data.msg)
								}
							})
						} else if (res.cancel) {
							// common.simpleToast('已取消')
						}
					},
					fail: function(res) {
						common.simpleToast(res.data.msg)
					},
					complete: function(res) {},
				})
			},

			navToPage(e) {
				var url = e.currentTarget.dataset.url;
				const index = e.currentTarget.dataset.index;
				if (index === '1') {
					const num = (this.orderInfo.order_info.gift_exchange_num - this.orderInfo.order_info
						.used_exchange_num) || 0
					const free_num = num > 0 ? num : 0
					url = url + '?free_num=' + free_num

					// 车辆换电
				} else if (index === '4') {
					// 拖车服务
					url = url + '?plate_number=' + this.plate_number + '&car_model=' + this.model_info.car_model +
						'&model_images=' + this.model_info.model_images
				} else if (index === '5') {
					// 查看订单
					const isJumpReturn = false
					url = url + '?order_sn=' + this.order_sn + '&isJumpReturn=' + isJumpReturn
				} else {
					// 其他都需要带车牌号
					url = url + '?plate_number=' + this.plate_number
				}
				if (!url) {
					return;
				}
				this.isCustomJump = false
				uni.navigateTo({
					url: url
				})
			},

			toNearbyStorePage() {
				this.isCustomJump = false
				uni.navigateTo({
					url: '/pages/carReturnStores/carReturnStores?plate_number=' + this.plate_number +
						'&car_model=' + this
						.model_info.car_model + '&model_image=' + this.model_image + '&return_imgs=' +
						encodeURIComponent(JSON.stringify(this.return_imgs))
				})
			},

			toRurnCarPage() {
				this.isCustomJump = false
				uni.navigateTo({
					url: '/pages/returnCar/returnCar?plate_number=' + this.plate_number + '&car_model=' + this
						.model_info.car_model + '&model_image=' + this.model_image + '&return_imgs=' +
						encodeURIComponent(JSON.stringify(this.return_imgs))
				});
			},

			bindCarStatus(e) {
				const is_on = e.currentTarget.dataset.car
				const me = this
				const CUR_IS_ON = (is_on - 0) == 1 
				// is_on :0 2 :锁车  1 :启动
				uni.showModal({
					title: '车辆提示',
					content: CUR_IS_ON ? '确认关闭车辆?' : '确认需要启动车辆?',
					cancelText: '取消',
					confirmText: '确定',
					success: function(res) {
						if (res.confirm) {
							const pData = {
								plate_number: me.plate_number,
								cmd: CUR_IS_ON ? 'LOCK' : 'UNLOCK', // 1 开启 0 关闭 2 
							}
							http.postApi(config.API_DAYHIRE_CAR_LOCK, pData, function(resp) {
								if (resp.data.code === 200) {
									const text = CUR_IS_ON ? '正在关闭车辆...' : '正在启动车辆...';
									const resultText = CUR_IS_ON ? '车辆已关闭' : '车辆已启动';
									common.simpleToast(text, 4000)
									setTimeout(() => {
										me.loadCarInfo().then(res => {
											// console.log(me.initialIsOn, res.is_on)
											// const TEXT = me.initialIsOn === res.is_on ? '操作超时' : resultText
											// me.setData({
											// 	initialIsOn: res.is_on
											// })
											// common.simpleToast(TEXT, 4000)
										})
									}, 8000);
								} else {
									common.simpleToast(resp.data.msg)
								}
							})
						} else if (res.cancel) {
							common.simpleToast('已取消')
						}
					},
					fail: function(res) {
						common.simpleToast(res.data.msg)
					},
					complete: function(res) {},
				})
			}
		}
	};
</script>

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