zx_flk_app/pages/openCabinet/openCabinet.vue

<template>
	<view class="container-view">
		<view class="open-bg-view">
			<img class="open-bg" src="https://qiniu.bms16.com/FqNzU4Wh2kry5H0EqC5zeM2thRFg" alt="">
		</view>
		<view class="explain-view">
			<view class="explain-num-view flex-row">
				<!-- <text><text class="explain-num">{{empty_door_id}} </text>{{ $t('号仓门已打开') }}</text> -->
				<text>{{ $t('仓门已打开') }}</text>
				<!-- <text v-if="list.status == 2">{{ $t('换电中') }}</text>
				<text v-if="list.status == 3">{{ $t('换电成功') }}</text>
				<text v-if="list.status == 4">{{ $t('换电失败') }}</text> -->
			</view>
			<view class="explain-text">{{ $t('请存入更换电池') }},{{ $t('取走满电电池') }},{{ $t('并关好仓门') }}</view>
			<!-- <view class="explain-text">{{ $t('请') }} {{ $t('归还') }} / {{ $t('取出') }} {{ $t('电池并关上仓门') }}</view> -->
			<!-- <view class="explain-text">{{ $t('请取出电池并关上仓门') }}</view> -->
			<!-- <view class="explain-text-grap">{{ $t('归还完成后电柜会自动打开可租仓门') }}</view> -->
			<!-- <view class="explain-text-grap">{{ $t('自动为您匹配最高电量电池') }}</view> -->
		</view>
		<!-- {{ $t('完成弹窗') }} -->
		<view v-if="isOverModal" class="modal-group">
			<view class="payment-info-main">
				<view class="payment-info-top flex-row">
					<!-- <img class="check-icon" :src="showtxt.img" alt=""> -->
					<img v-if="list.status==3" class="check-icon" src="https://qiniu.bms16.com/Fg5C4OVF17Q8p5-mHu7CoFne0Zqp" alt="">
					<img v-if="list.status==4" class="check-icon" src="https://qiniu.bms16.com/FmGcOOZZm09nx9lH3lez7D3DYHKn" alt="">
				</view>
				<view v-if="list.status==3" class="open-result-view">
					<view class="open-result flex-row">{{ $t('换电成功') }}</view>
					<view class="open-result-tip flex-row">{{ $t('祝您骑行愉快') }}</view>
				</view>
				<view v-if="list.status==4" class="open-result-view">
					<view class="open-result flex-row">{{ $t('换电失败') }}</view>
					<view class="open-result-tip flex-row">{{list.fail_reason}}</view>
				</view>
				<view class="over-btn-view">
					<view v-if="list.status==3" @tap="tapToIndex" class="over-btn flex-row">{{ $t('回到首页') }}</view>
					<view v-if="list.status==4" @tap="connectStore" class="over-btn flex-row">{{ $t('联系门店') }}</view>
					<view v-if="list.status==4" @click="srcFn(`/pages/index/index`)" class="over-btn flex-row">{{ $t('确认') }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const http = require('../../common/request.js');
	const config = require('../../common/config_gyq.js');
	const common = require('../../common/common.js');
	var bluetooth = require('../../common/bluetooth.js');
	const DF_CAB_INFO_DONE = 10000; //机柜信息传输完成
	export default {
		data() {
			return {
				isOverModal:false,
				order_sn: '',
				time: null,
				list: {}
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.order_sn = options.order_sn
			this.exchangeStatusFn()
			this.time = setInterval(() => {
				this.exchangeStatusFn()
			}, 1200)
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {

		},
		onUnload() {
			this.clearIntervalTimer()
		},
		methods: {
			srcFn(url){
				uni.reLaunch({
					url: '/pages/index/index',
				})
			},
			tapToIndex() {
				this.isOverModal = false
				uni.reLaunch({
					url: '/pages/index/index',
				})
			},
			connectStore() {
				uni.makePhoneCall({
					phoneNumber: this.list.link_phone //仅为示例
				});
			},
			clearIntervalTimer() {
				if (this.time == null) return
				clearInterval(this.time)
				this.time = null
			},
			async exchangeStatusFn() {
				let {
					data
				} = await http.postApi(config.API_FLK_CABINET_EXCHANGE_STATUS, {
					order_sn: this.order_sn
				})
				if (data.code == 200) {
					this.list = data.data.statusInfo
					if (data.data.statusInfo.status == 3 || data.data.statusInfo.status == 4 || data.data.statusInfo.status == 5) {
						this.clearIntervalTimer()
						this.isOverModal = true
					}
				} else {
					common.simpleToast(data.msg)
				}
			}

		}
	};
</script>

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