parking_h5_all/pages/parkingLock/parkingLock20230222.vue

<template>
  <view class="parking-lock">
    <view class="Jump">
      <view class="Jump-btn" @click="jumpArrears"> 欠费补缴 </view>
    </view>
    <!-- 车位锁 -->
    <view class="parking-lock-box">
      <!-- 车位锁支付 -->
      <template v-if="parkingLockStatus === 1">
        <view class="parking-lock-pay">
          <view class="parking-lock-title">支付停车费</view>
          <view class="parking-lock-tips">请您确认停车费用，确认后请支付费用，结束停车。谢谢您的使用！</view>
          <view class="parking-lock-info">
            <view class="parking-lock-info-item">
              <view>停车场名称</view>
              <view>{{ orderInfo.roadName }}</view>
            </view>
            <view class="parking-lock-info-item">
              <view>停车泊位</view>
              <view>{{ orderInfo.spaceName }}</view>
            </view>
            <!-- <view class="parking-lock-info-item">
							<view>入场时间</view>
							<view>{{orderInfo.inTime}}</view>
						</view>
						<view class="parking-lock-info-item">
							<view>出场时间</view>
							<view>{{orderInfo.outTime}}</view>
						</view>
						<view class="parking-lock-info-item">
							<view>停车时长</view>
							<view>{{ orderInfo.duration || 0}}</view>
						</view>
						<view class="parking-lock-info-item">
							<view>免费时长</view>
							<view>{{ orderInfo.freeDuration || 0 }}</view>
						</view> -->
            <view class="parking-lock-info-item">
              <view>开始计费</view>
              <view>{{ orderInfo.inTime }}</view>
            </view>
            <view class="parking-lock-info-item">
              <view>结束计费</view>
              <view>{{ orderInfo.outTime }}</view>
            </view>
            <view class="parking-lock-info-item">
              <view>免费时长</view>
              <view>{{ orderInfo.freeDuration || `0天0时${free_time}分0秒` }}</view>
            </view>
            <view class="parking-lock-info-item">
              <view>计费时长</view>
              <view>{{ orderInfo.calcDuration || 0 }}</view>
            </view>
            <view class="parking-lock-info-item">
              <view>累计停车时长</view>
              <view>{{ orderInfo.duration || 0 }}</view>
            </view>
            <!-- <view class="parking-lock-info-item">
							<view>合计金额</view>
							<view>{{orderInfo.totalAmount}} 元</view>
						</view>
						<view class="parking-lock-info-item">
							<view>优惠金额</view>
							<view>{{orderInfo.preferentialAmount}} 元</view>
						</view> -->
            <view class="parking-lock-info-item">
              <view>应缴金额</view>
              <view class="really-money">{{ orderInfo.payAmount || 0 }} 元</view>
            </view>
            <view class="parking-lock-info-item">
              <view>订单编号</view>
              <view>{{ orderInfo.orderId }}</view>
            </view>
            <!-- <view class="parking-lock-info-item" v-if="orderInfo.vehicleNo">
							<view>车牌信息</view>
							<view class="really-license">{{ orderInfo.vehicleNo }}</view>
						</view> -->
            <!-- <view class="parking-lock-info-item" v-if="orderInfo.vehicleNo==''">
							<view>车牌信息</view>
							<view class="really-license"><text class="really-license-txt" @click="addvehicleNo">添加车牌</text>
							</view>
						</view>
						<view class="parking-lock-info-item" v-else>
							<view>车牌信息</view>
							<view class="really-license">{{orderInfo.vehicleNo}} <text @click="changevehicleNo"
									class="really-license-txt1">更换</text></view>
						</view> -->
          </view>
          <view class="parking-lock-pay-btn">
            <button type="default" @click="payMoney">立即支付</button>
          </view>
          <!-- <view class="parking-lock-pay-attention">
						<text>
							温馨提示：车牌信息可填可不填，如果您已通过本机号码办理了特定车或包月车业务，则需要输入车牌号，否则将按照常规收费标准进行收费。
						</text>
					</view> -->
          <view class="parking-lock-pay-attention">
            <text>
              温馨提示：车辆计费前您有{{ orderInfo.freeDurationNum / 60 }}分钟免费停车时长，{{
                orderInfo.freeDurationNum / 60
              }}分钟过后则升板锁车开始计费。
            </text>
          </view>
        </view>
      </template>
      <!-- 车位锁开始状态 -->
      <template v-else-if="parkingLockStatus === 2">
        <view class="parking-lock-begin">
          <view class="parking-lock-begin-box">
            <view class="parking-lock-begin-bg">
              <image src="../../static/img/parking-lock-bg.png" mode=""></image>
            </view>
          </view>
          <view class="parking-lock-begin-info">车位锁正在动作，还未到位</view>
        </view>
      </template>
      <!-- 车位锁正在状态 -->
      <template v-else-if="parkingLockStatus === 3">
        <view class="parking-lock-loading">
          <view class="parking-lock-loading-box">
            <view class="parking-lock-loading-bg">
              <image src="../../static/img/parking-lock-bg.png" mode=""></image>
            </view>
          </view>
          <view class="parking-lock-loading-info">开锁中，请等待！</view>
        </view>
      </template>
      <!-- 开锁完成 -->
      <template v-else-if="parkingLockStatus === 4">
        <view class="parking-lock-success">
          <view class="parking-lock-success-box">
            <image src="../../static/img/parking-lock-achieve.png" mode=""></image>
          </view>
          <view class="parking-lock-success-info">开锁已完成</view>
          <view class="parking-lock-success-button">
            <button @click="cancel">返回</button>
          </view>
        </view>
      </template>
      <template v-else-if="parkingLockStatus === 5">
        <view class="parking-lock-pay">
          <view class="parking-lock-tips">{{ tipsMsg }}</view>
        </view>
      </template>
      <!-- 支付方式 -->
      <PaymentMethod
        :payWayPop="payWayPop"
        :curOrderList="orderList"
        :deviceNo="deviceNo"
        :jumpUrl="jumpUrl"
        @closePaymentMethod="closePaymentMethod"
      ></PaymentMethod>
      <u-toast ref="uToast" />
      <u-popup v-model="show" mode="center" border-radius="14" width="200rpx" height="200rpx">
        <view class="loadingSelect">订单查询中...</view>
        <view class="spinner">
          <view class="rect1"></view>
          <view class="rect2"></view>
          <view class="rect3"></view>
          <view class="rect4"></view>
          <view class="rect5"></view>
        </view>
      </u-popup>
      <u-popup class="popup-vehicleNo" v-model="ShowaddvehicleNo" mode="center" border-radius="20" width="710rpx" height="auto">
        <view class="popup-vehicleNo-title">添加车牌</view>
        <view class="popup-vehicleNo-center"></view>
        <view class="popup-vehicleNo-content">
          <view class="new-plate-number">
            <view class="message-input-wrap" @click="messageInputClick">
              <u-message-input :maxlength="8" width="70" font-size="50" :disabled-keyboard="true" v-model="newPlateNumber"></u-message-input>
            </view>
          </view>
        </view>
        <view class="popup-vehicleNo-select">暂无绑定车牌</view>
        <view class="vehicleNo-btn">
          <u-button type="primary" @click="handleAddCar">确认</u-button>
          <u-button type="primary" plain @click="ShowaddvehicleNo = false">取消</u-button>
        </view>
      </u-popup>

      <u-popup class="popup-vehicleNo" v-model="ShowchangevehicleNo" mode="center" border-radius="20" width="710rpx" height="auto">
        <view class="popup-vehicleNo-title">更换车牌</view>
        <view class="popup-vehicleNo-center"></view>
        <view class="popup-vehicleNo-content">
          <view class="new-plate-number">
            <view class="message-input-wrap" @click="messageInputClick">
              <u-message-input :maxlength="8" width="70" font-size="50" :disabled-keyboard="true" v-model="newPlateNumber"></u-message-input>
            </view>
          </view>
        </view>
        <view class="popup-vehicleNo-select">
          <u-collapse ref="refValue">
            <u-collapse-item title="点击选择车牌" align="center">
              <u-cell-group>
                <u-cell-item :title="item.vehicleNo" v-for="(item, index) in groupList" :key="index" :arrow="false">
                  <u-radio-group v-model="selectvalue" @change="radioGroupChange">
                    <u-radio :name="item.vehicleNo" :key="index"></u-radio>
                  </u-radio-group>
                </u-cell-item>
              </u-cell-group>
            </u-collapse-item>
          </u-collapse>
        </view>
        <view class="vehicleNo-btn">
          <u-button type="primary" @click="handleAddCar">确认</u-button>
          <u-button type="primary" plain @click="ShowchangevehicleNo = false">取消</u-button>
        </view>
      </u-popup>
      <u-action-sheet :list="colorList" @click="confirmColor" v-model="colorShow"></u-action-sheet>
      <u-keyboard
        ref="uKeyboard"
        mode="car"
        @change="keyboardChange"
        @confirm="keyboardConfirm"
        @backspace="backspace"
        v-model="keyboardshow"
      ></u-keyboard>
    </view>
  </view>
</template>

<script>
import getUrlParams from '../../utils/getUrlParams.js';
import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue';
export default {
  components: {
    PaymentMethod
  },
  data() {
    return {
      selectvalue: null,
      groupList: [],
      radiogroupList: [],
      keyboardshow: false,
      colorShow: false,
      colorList: [
        {
          text: '蓝色',
          colorCode: 0
        },
        {
          text: '黄色',
          colorCode: 1
        },
        {
          text: '黑色',
          colorCode: 2
        },
        {
          text: '白色',
          colorCode: 3
        },
        {
          text: '绿色',
          colorCode: 4
        },
        {
          text: '其他',
          colorCode: 99
        }
      ],
      vehicleColor: 0,
      newPlateNumber: '',
      //更换车牌弹窗
      ShowchangevehicleNo: false,
      //添加车牌弹窗
      ShowaddvehicleNo: false,
      // 车位锁状态 1:支付 2:开始开锁 3:开锁中 4:开锁完成
      parkingLockStatus: 0,
      // 支付方式选择弹框
      payWayPop: false,
      // 订单编号
      orderList: [],
      // 提示信息
      tipsMsg: null,
      // 设备编号
      deviceNo: null,
      // 轮询
      timer: null,
      timer1: null,
      // 订单信息
      orderInfo: {},
      // 订单id
      orderId: null,
      // 重定向地址
      jumpUrl: location.href + '&isBack=1',
      show: true,
      isBack: '',
      polyOrderId: ''
    };
  },
  onLoad(page) {
    if (page.orderId) {
      this.getOrderDetails(page.orderId);
      this.orderList = [];
      this.orderId = page.orderId;
      this.orderList.push(page.orderId);
      this.deviceNo = page.deviceNo;
      this.isBack = page?.isBack;
      this.polyOrderId = page?.polyOrderId;
    } else {
      this.tipsMsg = page.msg || '参数丢失!';
      this.parkingLockStatus = 5;
    }
  },
  onShow() {
    if (this.orderId) {
      if (this.polyOrderId && this.isBack == 1) {
        this.timer1 = setInterval(() => {
          this.show = true;
          this.handlePayStatus(this.polyOrderId);
        }, 2000);
      }
    } else {
      this.show = false;
    }
  },
  onUnload() {
    if (this.timer) {
      clearInterval(this.timer);
    }
    if (this.timer1) {
      clearInterval(this.timer1);
    }
  },
  methods: {
    jumpArrears() {
      uni.navigateTo({
        url: '../center/order/order?orderStatus=2'
      });
    },
    radioGroupChange(e) {
      this.newPlateNumber = e;
    },
    // 获取车辆列表
    handlegetMycars() {
      let that = this;
      this.$u.api
        .getMycars()
        .then((res) => {
          if (res.code === 200) {
            this.groupList = res.data.rows;
            this.radiogroupList = res.data.rows;
            this.$nextTick(() => {
              // dom元素更新后执行，因此这里能正确打印更改之后的值
              console.log(that.$refs.refValue.init()); // 改变了的值
            });
          } else {
            this.$refs.uToast.show({
              title: res.msg,
              type: 'error'
            });
          }
        })
        .catch((err) => {
          this.$refs.uToast.show({
            title: '操作失败!',
            type: 'error'
          });
        });
    },
    //更换车牌信息
    changevehicleNo() {
      this.ShowchangevehicleNo = true;
      this.handlegetMycars();
    },
    // 添加车辆
    handleAddCar() {
      if (!this.$u.test.carNo(this.newPlateNumber)) {
        this.$refs.uToast.show({
          title: '请正确填写车牌号',
          type: 'error'
        });
        return;
      }
      let param = {
        orderId: this.orderId,
        vehicleNo: this.newPlateNumber,
        vehicleColor: this.vehicleColor
      };
      let that = this;
      this.$u.api
        .bindVehicleNo(param)
        .then((res) => {
          if (res.code === 200) {
            this.$refs.uToast.show({
              title: res.msg,
              type: 'success'
            });
            that.getOrderDetails(that.orderId);
            that.ShowchangevehicleNo = false;
          } else {
            this.$refs.uToast.show({
              title: res.msg,
              type: 'error'
            });
          }
        })
        .catch((err) => {
          this.$refs.uToast.show({
            title: '操作失败!',
            type: 'error'
          });
        });
    },
    //新增车牌
    addvehicleNo() {
      this.ShowaddvehicleNo = true;
    },

    // 点击输入框
    messageInputClick() {
      this.keyboardshow = true;
    },
    // 按键被点击(点击退格键不会触发此事件)
    keyboardChange(val) {
      // 将每次按键的值拼接到value变量中，注意+=写法
      this.newPlateNumber += val;
    },
    // 退格键被点击
    backspace() {
      // 删除value的最后一个字符
      if (this.newPlateNumber.length) this.newPlateNumber = this.newPlateNumber.substr(0, this.newPlateNumber.length - 1);
    },
    // 键盘输入完成后确认
    keyboardConfirm() {
      this.colorShow = true;
    },
    // 确认颜色
    confirmColor(e) {
      this.vehicleColor = this.colorList[e].colorCode;
    },
    /**
     * 反复查询支付状态
     * @param { String } orderId
     */
    handlePayStatus(orderId) {
      this.$u.api
        .getOrderInfo({
          orderId
        })
        .then((res) => {
          if (res.code === 200) {
            if (res.data.payStatus === 1 || res.data.payStatus === 3) {
              this.show = false;
              clearInterval(this.timer1);
              this.getOrderDetails(this.orderId);
            }
          } else {
            this.show = false;
            clearInterval(this.timer1);
            this.$refs.uToast.show({
              title: res.msg,
              type: 'error'
            });
          }
        })
        .catch(() => {
          this.show = false;
          clearInterval(this.timer1);
        });
    },
    payMoney() {
      this.payWayPop = true;
    },
    // 查询订单信息
    getOrderDetails(id) {
      this.$u.api
        .getOrderDetail({
          id
        })
        .then((res) => {
          if (res.code === 200 && res.data.id) {
            this.parkingLockStatus = 1;
            // 获取页面完整url
            const local = window.location.href;
            // 获取url后面的参数
            const locationLocaturl = window.location.search;
            // 截取url中的isBack
            let isBack = getUrlParams(local, 'isBack');
            // 如果没有isBack，则去请求
            if (!isBack) {
              // uni.hideLoading();
              this.show = false;
              clearInterval(this.timer1);
            }
            this.orderInfo = res.data;
            if (res.data.payStatus === 1) {
              this.show = false;
              clearInterval(this.timer1);
              this.checkEqupment();
            }
          } else {
            this.$refs.uToast.show({
              title: res.msg || '订单无数据',
              type: 'error'
            });
            this.show = false;
            if (this.timer1) {
              clearInterval(this.timer1);
            }
          }
        })
        .catch(() => {
          this.show = false;
          if (this.timer1) {
            clearInterval(this.timer1);
          }
        });
    },
    // 检测设备
    checkEqupment() {
      this.timer = setInterval(() => {
        this.getEqumentStatus(this.deviceNo);
      }, 1000);
    },
    // 查询设备状态
    getEqumentStatus(orderNo) {
      this.$u.api
        .getEquomentInfo({
          orderNo
        })
        .then((res) => {
          if (res.code === 200) {
            if (res.data.deviceStatus == 0) {
              this.parkingLockStatus = 4;
              clearInterval(this.timer);
            } else if (res.data.deviceStatus == 1 || res.data.deviceStatus == 5) {
              this.parkingLockStatus = 2;
            } else if (res.data.deviceStatus == 6) {
              this.parkingLockStatus = 3;
            }
          } else {
            clearInterval(this.timer);
          }
        })
        .catch(() => {
          clearInterval(this.timer);
        });
    },
    // 返回首页
    cancel() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    },
    closePaymentMethod() {
      this.payWayPop = false;
    }
  }
};
</script>

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

.Jump {
  display: flex;
  justify-content: flex-end;
  background-color: #f6f6ff;

  &-btn {
    color: rgb(0, 140, 255);
    padding: 20rpx 30rpx;
  }
}
</style>