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>号仓门已打开</text> -->
				<text v-if="list.status == 1">仓门已打开</text>
				<text v-if="list.status == 2">换电中</text>
				<text v-if="list.status == 3">换电成功</text>
				<text v-if="list.status == 4">换电失败</text>
			</view>
			<view v-if="list.status == 1" class="explain-text">请存入更换电池,取走满电电池,并关好仓门</view>
			<view v-if="list.status == 2" class="explain-text">换电中</view>
			<view v-if="list.status == 3" class="explain-text">换电成功</view>
			<view v-if="list.status == 4" class="explain-text-grap">{{list.fail_reason}}</view>
			<!-- <view class="explain-text">请 归还 / 取出 电池并关上仓门</view> -->
			<!-- <view class="explain-text">请取出电池并关上仓门</view> -->
			<!-- <view class="explain-text-grap">归还完成后电柜会自动打开可租仓门</view> -->
			<!-- <view class="explain-text-grap">自动为您匹配最高电量电池</view> -->
		</view>
		<!-- 完成弹窗 -->
		<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">换电成功</view>
					<view class="open-result-tip flex-row">即将跳转至首页，祝您骑行愉快</view>
				</view>
				<view v-if="list.status==4" class="open-result-view">
					<view class="open-result flex-row">换电失败</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">回到首页</view>
					<view v-if="list.status==4" @tap="connectStore" class="over-btn flex-row">联系门店</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; //机柜信息传输完成
	const app = getApp();
	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()
			}, 3000)
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {

		},
		onUnload() {
			this.clearIntervalTimer()
		},
		methods: {
			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) {
						this.clearIntervalTimer()
						this.isOverModal = true
					}
				} else {
					common.simpleToast(data.msg)
				}
			}

		}
	};
</script>

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