增加兑换码选择和添加车牌

pages/center/coupon/myCoupon/myCoupon.scss

@@ -1,26 +1,62 @@
+page {
+	height: 100%;
+}
 .navbar-font {
   color: #fff;
   padding-right: 20rpx;
 }
 .swiper {
   height: 100%;
-	padding: 0 30rpx;
+  padding: 0 30rpx;
   background-color: #f9f9f9;
 }
 .content {
-	height: 100%;
+	height: calc(100% - 74px);
 }
 .search-part {
-	display: flex;
-	padding: 30rpx 0 0;
-	margin-bottom: 30rpx;
-	&-input {
-		background-color: #fff;
-		border-radius: 32rpx;
-		padding-left: 30rpx!important;
-		margin-right: 30rpx;
-	}
-	&-btn {
-		background-color: #FF6D6D;
-	}
-}
+  display: flex;
+  padding: 30rpx 0 0;
+  margin-bottom: 30rpx;
+  &-input {
+    background-color: #fff;
+    border-radius: 32rpx;
+    padding-left: 30rpx !important;
+    margin-right: 30rpx;
+  }
+  &-btn {
+    background-color: #ff6d6d;
+  }
+}
+.popup-vehicleNo-title {
+  font-size: 40rpx;
+  text-align: center;
+  padding-top: 20rpx;
+}
+.popup-vehicleNo-center {
+  width: 90%;
+  height: 2rpx;
+  border-top: solid rgb(146, 146, 146) 2rpx;
+  margin: 30rpx auto 20rpx;
+}
+.popup-vehicleNo-content {
+  width: 100%;
+  margin: 0 auto;
+}
+.popup-vehicleNo-select {
+  text-align: center;
+  color: #777777;
+  padding: 20rpx 40rpx;
+  &-empty {
+    text-align: center;
+    font-size: 26rpx;
+  }
+}
+.vehicleNo-btn {
+  display: flex;
+  margin: 40rpx 0;
+}
+.parking-lock-pay-attention {
+  margin: 50rpx;
+  line-height: 48rpx;
+  color: #777777;
+}

pages/center/coupon/myCoupon/myCoupon.vue

@@ -1,152 +1,311 @@
 <template>
-	<view class="content">
-		<z-paging-swiper>
-			<u-navbar slot="top" title-color="#fff" :custom-back="customBack" :border-bottom="false"
-				back-icon-color="#CCE8FF" :background="{ background: '#008CFF' }" title="我的优惠券">
-				<view class="navbar-font" slot="right"
-					@click="jumpPage('/pages/center/coupon/couponRules/couponRules')"> 规则 </view>
-			</u-navbar>
-			<z-tabs ref="tabs" slot="top" :list="tabList" :current="current" barWidth="90rpx" @change="tabsChange">
-			</z-tabs>
-			<swiper class="swiper" :current="current" @transition="swiperTransition"
-				@animationfinish="swiperAnimationfinish">
-				<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
-					<view class="search-part" v-if="current === 0">
-						<u-input class="search-part-input" v-model="form.exchangeCode" placeholder="请输入兑换码" />
-						<u-button class="search-part-btn" type="primary" shape="circle" size="medium"
-							@click="handleExchange">兑换</u-button>
-					</view>
-					<swiper-list-item :tabIndex="index" :currentIndex="current" ref="swiperListItem"></swiper-list-item>
-				</swiper-item>
-			</swiper>
-			<!-- 选择车牌 -->
-			<u-select v-model="chooseVehicle" :list="vehicleList" @confirm="vehicleConfirm"></u-select>
-			<u-toast ref="uToast" />
-		</z-paging-swiper>
-	</view>
+  <view class="content">
+    <z-paging-swiper>
+      <u-navbar
+        slot="top"
+        title-color="#fff"
+        :custom-back="customBack"
+        :border-bottom="false"
+        back-icon-color="#CCE8FF"
+        :background="{ background: '#008CFF' }"
+        title="我的优惠券"
+      >
+        <view class="navbar-font" slot="right" @click="jumpPage('/pages/center/coupon/couponRules/couponRules')"> 规则 </view>
+      </u-navbar>
+      <z-tabs ref="tabs" slot="top" :list="tabList" :current="current" barWidth="90rpx" @change="tabsChange"> </z-tabs>
+      <swiper class="swiper" :current="current" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
+        <swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
+          <view class="search-part" v-if="current === 0">
+            <u-input class="search-part-input" v-model="form.exchangeCode" placeholder="请输入兑换码" />
+            <u-button class="search-part-btn" type="primary" shape="circle" size="medium" @click.stop="handleExchange">兑换</u-button>
+          </view>
+          <swiper-list-item :tabIndex="index" :currentIndex="current" ref="swiperListItem"></swiper-list-item>
+        </swiper-item>
+      </swiper>
+      <!-- 绑定车牌 -->
+      <u-popup class="popup-vehicleNo" v-model="bindVehiclePop.showChangeVehicleNo" mode="center" border-radius="20" width="700rpx" 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="60" font-size="40" :disabled-keyboard="true" v-model="form.vehicleNo" />
+            </view>
+          </view>
+        </view>
+        <view class="popup-vehicleNo-select">
+          <u-collapse ref="refValue" :head-style="{ fontSize: '28rpx' }">
+            <u-collapse-item title="点击选择车牌" align="center">
+              <u-cell-group v-if="bindVehiclePop.vehicleList.length">
+                <u-cell-item :title="item.value" v-for="(item, index) in bindVehiclePop.vehicleList" :key="index" :arrow="false">
+                  <u-radio-group v-model="form.vehicleNo" @change="radioGroupChange">
+                    <u-radio :name="item.value" :key="index"></u-radio>
+                  </u-radio-group>
+                </u-cell-item>
+              </u-cell-group>
+              <template v-else>
+                <view class="popup-vehicleNo-select-empty">暂无绑定车牌</view>
+              </template>
+            </u-collapse-item>
+          </u-collapse>
+        </view>
+        <view class="vehicleNo-btn">
+          <u-button type="primary" :disabled="!form.vehicleNo" :loading="bindVehiclePop.loading" @click="handleBindVehicle">确认</u-button>
+          <u-button type="primary" plain @click="cencelBindVehicle">取消</u-button>
+        </view>
+      </u-popup>
+      <!-- 选择颜色 -->
+      <u-action-sheet :list="bindVehiclePop.colorList" @click="confirmColor" v-model="bindVehiclePop.colorShow" />
+      <!-- 车牌号键盘 -->
+      <u-keyboard
+        ref="uKeyboard"
+        mode="car"
+        @change="keyboardChange"
+        @confirm="keyboardConfirm"
+        @backspace="backspace"
+        v-model="bindVehiclePop.keyboardshow"
+      />
+    </z-paging-swiper>
+    <u-toast ref="uToast" />
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				tabList: [{
-						name: '未使用',
-						value: 0,
-						list: []
-					},
-					{
-						name: '已使用',
-						value: 1,
-						list: []
-					},
-					{
-						name: '已失效',
-						value: 2,
-						list: []
-					}
-				],
-				current: 0,
-				form: {
-					exchangeCode: '',
-					source: 1,
-					vehicleNo: '京A88888'
-				},
-				vehicleList: [],
-				chooseVehicle: false
-			};
-		},
-		onLoad(options) {
-			this.getCarsList();
-		},
-		methods: {
-			// tabs通知swiper切换
-			tabsChange(index) {
-				this.current = index;
-			},
-			// swiper滑动中
-			swiperTransition(e) {
-				this.$refs.tabs.setDx(e.detail.dx);
-			},
-			//swiper滑动结束
-			swiperAnimationfinish(e) {
-				this.current = e.detail.current;
-				this.$refs.tabs.unlockDx();
-			},
-			/**
-			 * 兑换
-			 * @date 2022-12-23
-			 * @returns {any}
-			 */
-			handleExchange() {
-				if (this.form.exchangeCode) {
-					this.chooseVehicle = true;
-				} else {
-					this.$refs.uToast.show({
-						title: '请输入兑换码',
-						type: 'warning'
-					});
-				}
-			},
-			getCarsList() {
-				this.$u.api.getMycars().then((res) => {
-					this.vehicleList = res.data.rows.map((item) => {
-						return {
-							label: item.vehicleNo,
-							value: item.vehicleNo
-						};
-					});
-				});
-			},
-			/**
-			 * 车牌确认
-			 * @date 2022-12-23
-			 * @param {any} list
-			 * @returns {any}
-			 */
-			vehicleConfirm(list) {
-				this.form.vehicleNo = list[0].value;
-				if (this.form.vehicleNo) {
-					this.exchangeCoupon();
-				} else {
-					this.$refs.uToast.show({
-						title: '请选择有车牌',
-						type: 'warning'
-					});
-				}
-			},
-			/**
-			 * 兑换优惠券
-			 * @date 2022-12-23
-			 * @returns {any}
-			 */
-			exchangeCoupon() {
-				this.$u.api.exchangeCouponApi(this.form).then((res) => {
-					if (res.code === 200) {
-						this.$refs.uToast.show({
-							title: '兑换成功!',
-							type: 'success'
-						});
-						this.$refs['swiperListItem'][this.current].reloadData();
-					}
-				});
-			},
-			jumpPage(url) {
-				this.$u.route({
-					url
-				});
-			},
-			// tabbar 返回
-			customBack() {
-				this.$u.route({
-					type: 'switchTab',
-					url: 'pages/index/index'
-				});
-			}
-		}
-	};
+export default {
+  data() {
+    return {
+      tabList: [
+        {
+          name: '未使用',
+          value: 0,
+          list: []
+        },
+        {
+          name: '已使用',
+          value: 1,
+          list: []
+        },
+        {
+          name: '已失效',
+          value: 2,
+          list: []
+        }
+      ],
+      current: 0,
+      form: {
+        exchangeCode: '',
+        source: 1,
+        vehicleNo: ''
+      },
+      // 绑定车牌
+      bindVehiclePop: {
+        show: false,
+        vehicleList: [],
+        showChangeVehicleNo: false,
+        colorShow: false,
+        loading: false,
+        colorList: [
+          {
+            text: '蓝色',
+            colorCode: 0
+          },
+          {
+            text: '黄色',
+            colorCode: 1
+          },
+          {
+            text: '黑色',
+            colorCode: 2
+          },
+          {
+            text: '白色',
+            colorCode: 3
+          },
+          {
+            text: '绿色',
+            colorCode: 4
+          },
+          {
+            text: '其他',
+            colorCode: 99
+          }
+        ],
+        keyboardshow: false
+      }
+    };
+  },
+  methods: {
+    // tabs通知swiper切换
+    tabsChange(index) {
+      this.current = index;
+    },
+    // swiper滑动中
+    swiperTransition(e) {
+      this.$refs.tabs.setDx(e.detail.dx);
+    },
+    //swiper滑动结束
+    swiperAnimationfinish(e) {
+      this.current = e.detail.current;
+      this.$refs.tabs.unlockDx();
+    },
+    /**
+     * 兑换
+     * @date 2022-12-23
+     * @returns {any}
+     */
+    handleExchange() {
+      if (this.form.exchangeCode) {
+        this.bindVehiclePop.showChangeVehicleNo = true;
+        this.getCarsList();
+      } else {
+        this.$refs.uToast.show({
+          title: '请输入兑换码',
+          type: 'warning'
+        });
+      }
+    },
+    getCarsList() {
+      this.$u.api.getMycars().then((res) => {
+        this.bindVehiclePop.vehicleList = res.data.rows.map((item) => {
+          return {
+            label: item.vehicleNo,
+            value: item.vehicleNo
+          };
+        });
+        this.$nextTick(() => {
+          this.$refs['refValue'].init();
+        });
+      });
+    },
+    /**
+     * 兑换优惠券
+     * @date 2022-12-23
+     * @returns {any}
+     */
+    exchangeCoupon() {
+      this.bindVehiclePop.loading = true;
+      this.$u.api
+        .exchangeCouponApi(this.form)
+        .then((res) => {
+          if (res.code === 200) {
+            this.$refs.uToast.show({
+              title: '兑换成功!',
+              type: 'success'
+            });
+            this.form.exchangeCode = '';
+            this.$refs['swiperListItem'][this.current].reloadData();
+            this.cencelBindVehicle();
+          }
+          this.bindVehiclePop.loading = false;
+        })
+        .catch(() => {
+          this.bindVehiclePop.loading = false;
+        });
+    },
+    /**
+     * 点击输入框弹出车牌键盘
+     * @date 2023-02-22
+     * @returns {any}
+     */
+    messageInputClick() {
+      this.bindVehiclePop.keyboardshow = true;
+      this.form.vehicleNo = '';
+    },
+    /**
+     * 颜色下拉确认
+     * @date 2023-02-22
+     * @param {any} e
+     * @returns {any}
+     */
+    confirmColor(e) {
+      this.bindVehiclePop.colorShow = false;
+    },
+    /**
+     * 按键被点击(点击退格键不会触发此事件)
+     * @date 2023-02-22
+     * @param {any} val
+     * @returns {any}
+     */
+    keyboardChange(val) {
+      // 将每次按键的值拼接到value变量中，注意+=写法
+      this.form.vehicleNo += val;
+    },
+    /**
+     * 退格键被点击
+     * @date 2023-02-22
+     * @returns {any}
+     */
+    backspace() {
+      // 删除value的最后一个字符
+      if (this.form.vehicleNo.length) this.form.vehicleNo = this.form.vehicleNo.substr(0, this.form.vehicleNo.length - 1);
+    },
+    /**
+     * 键盘输入完成后确认
+     * @date 2023-02-22
+     * @returns {any}
+     */
+    keyboardConfirm() {
+      this.bindVehiclePop.colorShow = true;
+    },
+    /**
+     * 单选点击
+     * @date 2023-02-22
+     * @param {any} e
+     * @returns {any}
+     */
+    radioGroupChange(e) {
+      this.form.vehicleNo = e;
+    },
+    /**
+     * 关闭绑定弹框
+     * @date 2023-02-22
+     * @returns {any}
+     */
+    cencelBindVehicle() {
+      this.form.vehicleNo = '';
+      this.bindVehiclePop.showChangeVehicleNo = false;
+    },
+    /**
+     * 提交绑定
+     * @date 2023-02-22
+     * @returns {any}
+     */
+    handleBindVehicle() {
+      if (this.form.vehicleNo) {
+        this.exchangeCoupon();
+      } else {
+        this.$refs.uToast.show({
+          title: '请输入或选择车牌号!',
+          type: 'warning'
+        });
+      }
+    },
+    /**
+     * 调整页面
+     * @date 2023-02-22
+     * @param {any} url
+     * @returns {any}
+     */
+    jumpPage(url) {
+      this.$u.route({
+        url
+      });
+    },
+    /**
+     * tabbar 返回
+     * @date 2023-02-22
+     * @returns {any}
+     */
+    customBack() {
+      this.$u.route({
+        type: 'switchTab',
+        url: 'pages/index/index'
+      });
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-	@import './myCoupon.scss';
+@import './myCoupon.scss';
 </style>

pages/geomagnetismLock/geomagnetismLock.vue

@@ -62,16 +62,15 @@
       </view>
     </template>
     <!-- 支付方式 -->
-    <PaymentMethod
-      :payWayPop="payWayPop"
+    <ChoosePayment
+      ref="choosePayment"
       :curOrderList="[orderId]"
       :jumpUrl="jumpUrl"
       :payeeId="payeeId"
       :payeeName="payeeName"
       :pursueType="pursueType"
       :vehicleNo="orderInfo.vehicleNo"
-      @closePaymentMethod="closePaymentMethod"
-    ></PaymentMethod>
+    />
     <u-popup v-model="show" mode="center" border-radius="14" width="200rpx" height="200rpx">
       <view class="loadingSelect">订单查询中...</view>
       <view class="spinner">
@@ -87,11 +86,10 @@
 </template>
 
 <script>
-import getUrlParams from '../../utils/getUrlParams.js';
-import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue';
+import ChoosePayment from '@/pages/choosePayment/choosePayment.vue';
 export default {
   components: {
-    PaymentMethod
+    ChoosePayment
   },
   data() {
     return {
@@ -207,7 +205,9 @@ export default {
      * 立即支付
      */
     payMoney() {
-      this.payWayPop = true;
+      this.$nextTick(() => {
+        this.$refs['choosePayment'].openPopup({ ...this.orderInfo }, 'single', 'road');
+      });
     },
     /**
      * 查询订单信息

pages/geomagnetismLock/geomagnetismLock20230222.vue

@@ -0,0 +1,283 @@
+<template>
+  <!-- 地磁 -->
+  <view class="parking-lock">
+    <view class="Jump">
+      <view class="Jump-btn" @click="jumpArrears"> 欠费补缴 </view>
+    </view>
+    <!-- 地磁支付 -->
+    <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 class="weight">{{ orderInfo.vehicleNo }}</view>
+          </view>
+          <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.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 class="really-money">{{ orderInfo.payAmount || 0 }} 元</view>
+          </view>
+          <view class="parking-lock-info-item">
+            <view>订单编号</view>
+            <view>{{ orderInfo.orderId }}</view>
+          </view>
+        </view>
+        <view class="parking-lock-pay-btn" v-if="is_pay">
+          <button type="default" @click="payMoney">立即支付</button>
+        </view>
+      </view>
+    </template>
+    <template v-else-if="parkingLockStatus === 2">
+      <view class="parking-lock-pay">
+        <view class="parking-lock-tips">{{ tipsMsg }}</view>
+      </view>
+    </template>
+    <!-- 支付方式 -->
+    <PaymentMethod
+      :payWayPop="payWayPop"
+      :curOrderList="[orderId]"
+      :jumpUrl="jumpUrl"
+      :payeeId="payeeId"
+      :payeeName="payeeName"
+      :pursueType="pursueType"
+      :vehicleNo="orderInfo.vehicleNo"
+      @closePaymentMethod="closePaymentMethod"
+    ></PaymentMethod>
+    <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-toast ref="uToast" />
+  </view>
+</template>
+
+<script>
+import getUrlParams from '../../utils/getUrlParams.js';
+import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue';
+export default {
+  components: {
+    PaymentMethod
+  },
+  data() {
+    return {
+      // 车位锁状态 1:需支付 2:查询失败返回提醒
+      parkingLockStatus: 0,
+      // 支付方式选择弹框
+      payWayPop: false,
+      // 订单编号
+      orderList: [],
+      // 提示信息
+      tipsMsg: null,
+      // 轮询
+      timer: null,
+      // 订单信息
+      orderInfo: {},
+      // 订单id
+      orderId: null,
+      // 重定向地址
+      jumpUrl: location.href + '&isBack=1',
+      show: true,
+      isBack: '',
+      polyOrderId: '',
+      // 地磁
+      spaceId: '',
+      payeeId: '',
+      payeeName: '',
+      pursueType: '',
+      is_pay: false
+    };
+  },
+  onLoad(page) {
+    if (page.orderId) {
+      this.orderId = page?.orderId;
+      this.spaceId = page?.spaceId;
+      this.payeeId = page?.payeeId;
+      this.polyOrderId = page?.polyOrderId;
+      this.pursueType = page?.pursueType;
+      this.isBack = page?.isBack;
+    } else {
+      this.tipsMsg = page.msg || '参数丢失!';
+      this.parkingLockStatus = 2;
+    }
+  },
+  onShow() {
+    if (this.orderId) {
+      this.getOrderDetails(this.spaceId, this.orderId, this.payeeId);
+      if (this.polyOrderId && this.isBack == 1) {
+        this.timer = setInterval(() => {
+          this.show = true;
+          this.handlePayStatus(this.polyOrderId);
+        }, 1000);
+      }
+    } else {
+      this.show = false;
+    }
+  },
+  onUnload() {
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
+  },
+  methods: {
+    jumpArrears() {
+      uni.navigateTo({
+        url: '../center/order/order?orderStatus=2'
+      });
+    },
+    /**
+     * 反复查询支付状态
+     * @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.timer);
+              this.is_pay = false;
+              uni.showModal({
+                title: '提示',
+                content: '支付成功，返回首页',
+                showCancel: false,
+                success: (res) => {
+                  if (res.confirm) {
+                    uni.switchTab({
+                      url: '/pages/index/index'
+                    });
+                  }
+                }
+              });
+            } else if (res.data.payStatus === 2) {
+              this.is_pay = true;
+            }
+          } else {
+            this.show = false;
+            clearInterval(this.timer);
+            this.$refs.uToast.show({
+              title: res.msg,
+              type: 'error'
+            });
+          }
+        })
+        .catch(() => {
+          this.show = false;
+          clearInterval(this.timer);
+        });
+    },
+    /**
+     * 立即支付
+     */
+    payMoney() {
+      this.payWayPop = true;
+    },
+    /**
+     * 查询订单信息
+     * @param { String } spaceId 车位ID
+     * @param { String } orderId 订单id
+     * @param { String } payeeId 收费员ID
+     */
+    getOrderDetails(spaceId, orderId, payeeId) {
+      this.$u.api
+        .geomaLockDetailsApi({
+          spaceId,
+          orderId,
+          payeeId
+        })
+        .then((res) => {
+          if (res.code === 200 && res.data.id) {
+            this.payeeName = res.data.payeeName;
+            this.parkingLockStatus = 1;
+            this.orderInfo = res.data;
+            this.show = false;
+            if (res.data.payStatus == 0 || res.data.payStatus == 2 || res.data.payStatus == 3) {
+              this.is_pay = true;
+            } else if (res.data.payStatus == 1) {
+              this.is_pay = false;
+              uni.showModal({
+                title: '提示',
+                content: '订单已支付，返回首页',
+                showCancel: false,
+                success: function (res) {
+                  if (res.confirm) {
+                    uni.switchTab({
+                      url: '/pages/index/index'
+                    });
+                  }
+                }
+              });
+            }
+            if (res.data.payAmount == 0) {
+              this.is_pay = false;
+            }
+          } else {
+            this.$refs.uToast.show({
+              title: res.msg || '订单无数据',
+              type: 'error'
+            });
+          }
+        });
+    },
+    /**
+     * 关闭支付弹框
+     */
+    closePaymentMethod() {
+      this.payWayPop = false;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import './geomagnetismLock.scss';
+
+.Jump {
+  position: fixed;
+  top: 50px;
+  right: 0;
+  background-color: #f6f6ff;
+
+  &-btn {
+    color: rgb(0, 140, 255);
+    padding: 20rpx 30rpx;
+  }
+}
+</style>

pages/parkingLock/parkingLock.vue

@@ -19,22 +19,6 @@
               <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>
@@ -55,14 +39,6 @@
               <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>
@@ -71,29 +47,10 @@
               <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 }}分钟免费停车时长，{{
@@ -143,14 +100,8 @@
         </view>
       </template>
       <!-- 支付方式 -->
-      <PaymentMethod
-        :payWayPop="payWayPop"
-        :curOrderList="orderList"
-        :deviceNo="deviceNo"
-        :jumpUrl="jumpUrl"
-        @closePaymentMethod="closePaymentMethod"
-      ></PaymentMethod>
-      <u-toast ref="uToast" />
+      <ChoosePayment ref="choosePayment" :curOrderList="orderList" :deviceNo="deviceNo" :jumpUrl="jumpUrl" />
+      <!-- 订单查询加载弹框 -->
       <u-popup v-model="show" mode="center" border-radius="14" width="200rpx" height="200rpx">
         <view class="loadingSelect">订单查询中...</view>
         <view class="spinner">
@@ -161,110 +112,20 @@
           <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>
+    <u-toast ref="uToast" />
   </view>
 </template>
 
 <script>
-import getUrlParams from '../../utils/getUrlParams.js';
-import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue';
+import getUrlParams from '@/utils/getUrlParams.js';
+import ChoosePayment from '@/pages/choosePayment/choosePayment.vue';
 export default {
   components: {
-    PaymentMethod
+    ChoosePayment
   },
   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,
       // 支付方式选择弹框
@@ -275,8 +136,9 @@ export default {
       tipsMsg: null,
       // 设备编号
       deviceNo: null,
-      // 轮询
+      // 设备状态轮询
       timer: null,
+      // 订单状态查询轮询
       timer1: null,
       // 订单信息
       orderInfo: {},
@@ -284,8 +146,11 @@ export default {
       orderId: null,
       // 重定向地址
       jumpUrl: location.href + '&isBack=1',
+      // 订单查询中弹框显示
       show: true,
+      // 是否为返回标识
       isBack: '',
+      // 预支付订单
       polyOrderId: ''
     };
   },
@@ -324,112 +189,16 @@ export default {
     }
   },
   methods: {
+    /**
+     * 跳转欠费页面
+     * @date 2023-02-22
+     * @returns {any}
+     */
     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
@@ -460,10 +229,22 @@ export default {
           clearInterval(this.timer1);
         });
     },
+    /**
+     * 立即支付
+     * @date 2023-02-22
+     * @returns {any}
+     */
     payMoney() {
-      this.payWayPop = true;
+      this.$nextTick(() => {
+        this.$refs['choosePayment'].openPopup({ ...this.orderInfo }, 'single', 'road');
+      });
     },
-    // 查询订单信息
+    /**
+     * 根据订单id查询订单信息
+     * @date 2023-02-22
+     * @param {any} id
+     * @returns {any}
+     */
     getOrderDetails(id) {
       this.$u.api
         .getOrderDetail({
@@ -543,9 +324,6 @@ export default {
       uni.switchTab({
         url: '/pages/index/index'
       });
-    },
-    closePaymentMethod() {
-      this.payWayPop = false;
     }
   }
 };

pages/parkingLock/parkingLock20230222.vue

@@ -0,0 +1,567 @@
+<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>

pages/roadGateSystem/roadGateSystem.vue

@@ -63,17 +63,15 @@
         <view class="parking-lock-tips">{{ tipsMsg }}</view>
       </view>
     </template>
-    <!-- 支付方式 -->
-    <PaymentMethod
-      :payWayPop="payWayPop"
+    <ChoosePayment
+      ref="choosePayment"
       :curOrderList="[orderId]"
       :jumpUrl="jumpUrl"
       :payeeId="payeeId"
       :payeeName="payeeName"
+      :pursueType="pursueType"
       :vehicleNo="orderInfo.vehicleNo"
-      @closePaymentMethod="closePaymentMethod"
-    >
-    </PaymentMethod>
+    />
     <u-popup v-model="show" mode="center" border-radius="14" width="200rpx" height="200rpx">
       <view class="loadingSelect">订单查询中...</view>
       <view class="spinner">
@@ -89,11 +87,10 @@
 </template>
 
 <script>
-import getUrlParams from '../../utils/getUrlParams.js';
-import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue';
+import ChoosePayment from '@/pages/choosePayment/choosePayment.vue';
 export default {
   components: {
-    PaymentMethod
+    ChoosePayment
   },
   data() {
     return {
@@ -214,7 +211,9 @@ export default {
      * 立即支付
      */
     payMoney() {
-      this.payWayPop = true;
+      this.$nextTick(() => {
+        this.$refs['choosePayment'].openPopup({ ...this.orderInfo }, 'single', 'road');
+      });
     },
     /**
      * 查询订单信息