parking_h5_all/pages/parkroadgate/parkroadgate.vue

<!-- 道闸 -->
<template>
  <view class="gate" id="page">
    <view class="gate-icon">
      <template v-if="status === 'opening'">
        <u-image width="100%" height="100%" src="/static/img/open-gate-icon.svg" />
      </template>
      <template v-else>
        <u-image width="100%" height="100%" src="/static/img/opened-gate-icon.svg" />
      </template>
    </view>
    <template v-if="status === 'opening'">
      <view class="gate-text">开闸中，请稍等！</view>
    </template>
    <template v-else>
      <view class="gate-text-opened">已开闸，请入场！</view>
    </template>
    <view class="gate-number">
      <u-message-input :maxlength="6" :value="code" :disabled-keyboard="true" inactive-color="#008CFF" />
    </view>
    <view class="gate-tips"> 提示：车辆出场时需要使用同一微信/支付宝扫码出场， 若不是， <text>请保存上面6位数字，用于出场时使用。</text></view>
    <view class="gate-cancel" v-if="status === 'opened'">
      <u-button type="primary" shape="circle" @click="handleCancel">返回</u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      code: '',
      status: 'opening' // opening:开启中  opened:开启成功
    };
  },
  methods: {
    /**
     * @description: 返回
     * @return {*}
     */
    handleCancel() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import './parkroadgate.scss';
</style>