微信支付选择优惠券操作

pages/center/monthly/monthly.vue

@@ -1,201 +1,214 @@
 <template>
-	<!-- 包月 -->
-	<view class="monthly">
-		<z-paging class="paging" ref="paging" v-model="dataList" @query="queryList">
-			<!-- 选项卡 -->
-			<view class="monthly-tab" slot="top">
-				<u-tabs :list="tabList" :is-scroll="false" :current="current" @change="tabChange" bg-color="#fff"
-					inactive-color="#000000" active-color="#008CFF" :bold="false"
-					:active-item-style="{color: '#008CFF'}"></u-tabs>
-			</view>
-			<view class="monthly-list">
-				<view class="monthly-list-item" v-for="(monthlyItem, index) in  dataList" :key="monthlyItem.id">
-					<view class="monthly-list-item-top">
-						<view class="mlit-left">
-							<view>{{monthlyItem.vehicleNo}}</view>
-							<view>{{monthlyItem.roadName || monthlyItem.parkName}}</view>
-						</view>
-						<view class="mlit-right u-flex">
-							<view class="mlit-right-item fee-status" v-if="monthlyItem.feeStatus === 0">未缴费</view>
-							<view class="mlit-right-item fee-status" v-if="monthlyItem.feeStatus === 1">已缴费</view>
-							<view class="mlit-right-item" v-if="monthlyItem.energyType === 1">汽油车</view>
-							<view class="mlit-right-item" v-if="monthlyItem.energyType === 2">新能源</view>
-						</view>
-					</view>
-					<view class="monthly-list-item-bottom">
-						<view class="mlib-item">
-							<view>有效期限</view>:
-							<view>
-								{{(monthlyItem.beginTime.split('-')).join('.')}}-{{(monthlyItem.endTime.split('-')).join('.')}}
-							</view>
-						</view>
-						<view class="mlib-item">
-							<view>剩余天数</view>:
-							<view>{{monthlyItem.surplusDays}}天</view>
-						</view>
-					</view>
-					<view v-if="monthlyItem.feeStatus=='0'" class="button-wrap u-flex u-row-right">
-						<view class="tool-btn" :class="{'tool-btn-cancel': monthlyItem.feeStatus=='0'}"
-							v-if="monthlyItem.feeStatus=='0'" @click="cancelMonth(monthlyItem.monthId)">取消订单</view>
-						<view class="tool-btn pay-btn" v-if="monthlyItem.feeStatus=='0'"
-							@click="goMonthPay(monthlyItem)">重新支付</view>
-					</view>
-					<view v-else-if="monthlyItem.feeStatus == 1 && monthlyItem.surplusDays > 2"
-						class="button-wrap u-flex u-row-right">
-						<view class="tool-btn">已缴费</view>
-					</view>
-					<view v-else-if="monthlyItem.feeStatus == 1 && monthlyItem.surplusDays < 3"
-						class="button-wrap u-flex u-row-right">
-						<view class="tool-btn" @click="goRenewal(monthlyItem)">去续费</view>
-					</view>
-				</view>
-			</view>
-		</z-paging>
-		<u-modal v-model="cancelShow" content="确认取消该订单？" @confirm="confirm" :show-cancel-button="true"></u-modal>
-		<u-toast ref="uToast" />
-	</view>
+  <!-- 包月 -->
+  <view class="monthly">
+    <z-paging class="paging" ref="paging" v-model="dataList" @query="queryList">
+      <!-- 选项卡 -->
+      <view class="monthly-tab" slot="top">
+        <u-tabs
+          :list="tabList"
+          :is-scroll="false"
+          :current="current"
+          @change="tabChange"
+          bg-color="#fff"
+          inactive-color="#000000"
+          active-color="#008CFF"
+          :bold="false"
+          :active-item-style="{ color: '#008CFF' }"
+        ></u-tabs>
+      </view>
+      <view class="monthly-list">
+        <view class="monthly-list-item" v-for="(monthlyItem, index) in dataList" :key="index">
+          <view class="monthly-list-item-top">
+            <view class="mlit-left">
+              <view>{{ monthlyItem.vehicleNo }}</view>
+              <view>{{ monthlyItem.roadName || monthlyItem.parkName }}</view>
+            </view>
+            <view class="mlit-right u-flex">
+              <view class="mlit-right-item fee-status" v-if="monthlyItem.feeStatus === 0">未缴费</view>
+              <view class="mlit-right-item fee-status" v-if="monthlyItem.feeStatus === 1">已缴费</view>
+              <view class="mlit-right-item" v-if="monthlyItem.energyType === 1">汽油车</view>
+              <view class="mlit-right-item" v-if="monthlyItem.energyType === 2">新能源</view>
+            </view>
+          </view>
+          <view class="monthly-list-item-bottom">
+            <view class="mlib-item">
+              <view>有效期限</view>:
+              <view> {{ monthlyItem.beginTime.split('-').join('.') }}-{{ monthlyItem.endTime.split('-').join('.') }} </view>
+            </view>
+            <view class="mlib-item">
+              <view>剩余天数</view>:
+              <view>{{ monthlyItem.surplusDays }}天</view>
+            </view>
+          </view>
+          <view v-if="monthlyItem.feeStatus == '0'" class="button-wrap u-flex u-row-right">
+            <view
+              class="tool-btn"
+              :class="{ 'tool-btn-cancel': monthlyItem.feeStatus == '0' }"
+              v-if="monthlyItem.feeStatus == '0'"
+              @click="cancelMonth(monthlyItem.monthId)"
+              >取消订单</view
+            >
+            <view class="tool-btn pay-btn" v-if="monthlyItem.feeStatus == '0'" @click="goMonthPay(monthlyItem)">重新支付</view>
+          </view>
+          <view v-else-if="monthlyItem.feeStatus == 1 && monthlyItem.surplusDays > 2" class="button-wrap u-flex u-row-right">
+            <view class="tool-btn">已缴费</view>
+          </view>
+          <view v-else-if="monthlyItem.feeStatus == 1 && monthlyItem.surplusDays < 3" class="button-wrap u-flex u-row-right">
+            <view class="tool-btn" @click="goRenewal(monthlyItem)">去续费</view>
+          </view>
+        </view>
+      </view>
+    </z-paging>
+    <u-modal ref="uModal" v-model="cancelShow" content="确认取消该订单？" :async-close="true" @confirm="confirm" :show-cancel-button="true"></u-modal>
+    <u-toast ref="uToast" />
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				tabList: [{
-					name: '路段',
-					value: 'road'
-				}, {
-					name: '停车场',
-					value: 'park'
-				}],
-				current: 0,
-				currentValue: 'road',
-				id: '', // 当前选中的条目id
-				cancelShow: false,
-				dataList: [],
-				pageSize: 10,
-				pageNo: 1
-			}
-		},
-		onLoad(page) {
-			const obj = {
-				road: 0,
-				park: 1
-			}
-			if (page.type) {
-				this.current = obj[page.type]
-			}
-		},
-		onShow() {
-			this.$nextTick(() => {
-				this.$refs.paging.reload()
-			})
-		},
-		onBackPress(options) {
-			this.$u.route({
-				type: 'switchTab',
-				url: 'pages/center/index'
-			});
-			return true;
-		},
-		methods: {
-			//tabs通知swiper切换
-			tabChange(index) {
-				this.current = index;
-				this.currentValue = this.tabList[index].value
-				this.$refs.paging.reload()
-			},
-			// 下拉刷新操作
-			queryList(pageNo, pageSize) {
-				const tabObj = {
-					road: 'getMonthList',
-					park: 'getParkMonthList'
-				}
-				this.$u.api[tabObj[this.currentValue]]({
-						pageSize: pageSize,
-						pageNum: pageNo,
-						ifPark: this.current
-					})
-					.then(res => {
-						if (res.code === 200) {
-							this.pageNo = pageNo
-							this.pageSize = pageSize
-							this.$refs.paging.complete(res.data.rows);
-						} else {
-							this.$refs.uToast.show({
-								title: res.msg,
-								type: 'error',
-							});
-						}
-					})
-
-			},
-			// 取消订单
-			cancelMonth(monthId) {
-				this.id = monthId;
-				this.cancelShow = true;
-			},
-			// 重新支付
-			goMonthPay(item) {
-				const params = {
-					vehicleNo: item.vehicleNo,
-					monthId: item.monthId
-				}
-				if (this.current === 0) {
-					params.roadNo = item.roadNo
-				} else {
-					params.parkNo = item.parkNo
-				}
-				this.$u.route({
-					url: 'pages/handleMonthly/handleMonthly',
-					params
-				})
-			},
-			// 确认取消订单
-			confirm() {
-				this.$u.api.cancelMonth({
-						monthId: this.id,
-					})
-					.then(res => {
-						if (res.code === 200) {
-							this.$refs.uToast.show({
-								title: res.msg,
-								type: 'success',
-							});
-							this.queryList(this.pageNo, this.pageSize)
-						} else {
-							this.$refs.uToast.show({
-								title: res.msg,
-								type: 'error',
-							});
-						}
-					}).catch(err => {
-						this.$refs.uToast.show({
-							title: '操作失败',
-							type: 'error',
-						});
-					})
-			},
-			/**
-			 * 去续费
-			 * */
-			goRenewal(item) {
-				const params = {
-					vehicleNo: item.vehicleNo
-				}
-				if (this.current === 0) {
-					params.roadNo = item.roadNo
-				} else {
-					params.parkNo = item.parkNo
-				}
-				this.$u.route({
-					url: 'pages/handleMonthly/handleMonthly',
-					params
-				})
-			}
-		}
-	}
+export default {
+  data() {
+    return {
+      tabList: [
+        {
+          name: '路段',
+          value: 'road'
+        },
+        {
+          name: '停车场',
+          value: 'park'
+        }
+      ],
+      current: 0,
+      currentValue: 'road',
+      id: '', // 当前选中的条目id
+      cancelShow: false,
+      dataList: [],
+      pageSize: 10,
+      pageNo: 1
+    };
+  },
+  onLoad(page) {
+    const obj = {
+      road: 0,
+      park: 1
+    };
+    if (page.type) {
+      this.current = obj[page.type];
+    }
+  },
+  onShow() {
+    this.$nextTick(() => {
+      this.$refs.paging.reload();
+    });
+  },
+  onBackPress(options) {
+    this.$u.route({
+      type: 'switchTab',
+      url: 'pages/center/index'
+    });
+    return true;
+  },
+  methods: {
+    //tabs通知swiper切换
+    tabChange(index) {
+      this.current = index;
+      this.currentValue = this.tabList[index].value;
+      this.$refs.paging.reload();
+    },
+    // 下拉刷新操作
+    queryList(pageNo, pageSize) {
+      const tabObj = {
+        road: 'getMonthList',
+        park: 'getParkMonthList'
+      };
+      this.$u.api[tabObj[this.currentValue]]({
+        pageSize: pageSize,
+        pageNum: pageNo,
+        ifPark: this.current
+      }).then((res) => {
+        if (res.code === 200) {
+          this.pageNo = pageNo;
+          this.pageSize = pageSize;
+          this.$refs.paging.complete(res.data.rows);
+        } else {
+          this.$refs.uToast.show({
+            title: res.msg,
+            type: 'error'
+          });
+        }
+      });
+    },
+    // 取消订单
+    cancelMonth(monthId) {
+      this.id = monthId;
+      this.cancelShow = true;
+    },
+    // 重新支付
+    goMonthPay(item) {
+      const params = {
+        vehicleNo: item.vehicleNo,
+        monthId: item.monthId
+      };
+      if (this.current === 0) {
+        params.roadNo = item.roadNo;
+      } else {
+        params.parkNo = item.parkNo;
+      }
+      this.$u.route({
+        url: 'pages/handleMonthly/handleMonthly',
+        params
+      });
+    },
+    // 确认取消订单
+    confirm() {
+      this.$u.api
+        .cancelMonth({
+          monthId: this.id
+        })
+        .then((res) => {
+          if (res.code === 200) {
+            this.$refs.uToast.show({
+              title: res.msg,
+              type: 'success'
+            });
+            this.queryList(this.pageNo, this.pageSize);
+          } else {
+            this.$refs.uToast.show({
+              title: res.msg,
+              type: 'error'
+            });
+          }
+          this.$refs['uModal'].clearLoading();
+          this.cancelShow = false
+        })
+        .catch((err) => {
+          this.$refs.uToast.show({
+            title: '操作失败',
+            type: 'error'
+          });
+        });
+    },
+    /**
+     * 去续费
+     * */
+    goRenewal(item) {
+      const params = {
+        vehicleNo: item.vehicleNo
+      };
+      if (this.current === 0) {
+        params.roadNo = item.roadNo;
+      } else {
+        params.parkNo = item.parkNo;
+      }
+      this.$u.route({
+        url: 'pages/handleMonthly/handleMonthly',
+        params
+      });
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-	@import './monthly.scss';
+@import './monthly.scss';
 </style>

pages/center/order/orderDetails/orderDetails.vue

@@ -155,13 +155,13 @@
     </view>
 
     <!-- 支付方式 -->
-    <PaymentMethod
+    <!-- <PaymentMethod
       :payWayPop="payWayPop"
       :exportFlag="exportFlag"
       :curOrderList="orderList"
       :jumpUrl="jumpUrl"
       @closePaymentMethod="closePaymentMethod"
-    />
+    /> -->
 
     <!-- 加载中遮罩 -->
     <u-mask :show="loadingMask">
@@ -174,23 +174,23 @@
         </view>
       </view>
     </u-mask>
-    <!-- <ChoosePayment
+    <ChoosePayment
       ref="choosePayment"
       :exportFlag="exportFlag"
       :curOrderList="orderList"
       :jumpUrl="jumpUrl"
       @closePaymentMethod="closePaymentMethod"
-    /> -->
+    />
     <u-toast ref="uToast" />
   </view>
 </template>
 
 <script>
-import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue';
+// import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue';
 import ChoosePayment from '@/pages/choosePayment/choosePayment.vue';
 export default {
   components: {
-    PaymentMethod,
+    // PaymentMethod,
     ChoosePayment
   },
   data() {
@@ -319,14 +319,10 @@ export default {
         this.exportFlag = false;
       }
       if (this.orderList.length > 0) {
-        this.payWayPop = true;
-        // this.$nextTick(() => {
-        //   this.$refs['choosePayment'].openPopup(
-        //     { id: this.orderId, totalAmount: this.orderInfo.totalAmount },
-        //     'single',
-        //     this.orderType === 'road' ? 'road' : 'parking'
-        //   );
-        // });
+        // this.payWayPop = true;
+        this.$nextTick(() => {
+          this.$refs['choosePayment'].openPopup({ ...this.orderInfo }, 'single', this.orderType === 'road' ? 'road' : 'parking');
+        });
       } else {
         this.$refs.uToast.show({
           title: '当前订单编号不存在,请重新进入当前页面!',

pages/choosePayment/choosePayment.vue

@@ -46,12 +46,18 @@
         </view>
         <view class="pay-coupon" v-if="radioCurrent === 'weixin' && isShowCoupon">
           <u-cell-group :border="false">
-            <u-cell-item icon="" title="优惠券" :value="couponName || '暂无优惠券'" :border-bottom="false" @click="chooseCoupon"></u-cell-item>
+            <u-cell-item
+              icon=""
+              title="优惠券"
+              :value="couponPopup.currentCoupon.couponName || (couponPopup.couponList.length ? '暂未选择优惠券' : '无可用优惠券')"
+              :border-bottom="false"
+              @click="chooseCoupon"
+            ></u-cell-item>
           </u-cell-group>
         </view>
-        <view class="pay-money"> 金额¥{{ orderMoney }} </view>
+        <view class="pay-money"> 金额：¥{{ orderMoney }} </view>
         <view class="pay-btn">
-          <u-button type="primary" shape="circle" @click="immediatePayment">立即支付</u-button>
+          <u-button type="primary" shape="circle" :disabled="!radioCurrent" @click="immediatePayment">立即支付</u-button>
         </view>
       </view>
     </u-modal>
@@ -85,7 +91,7 @@
                     </view>
                   </view>
                   <view class="coupon-popup-list-item-top-right">
-                    <radio color="#FF6D6D" :value="item.id" :checked="item.id === couponPopup.radioCurrent" />
+                    <radio color="#FF6D6D" :value="item.id" :checked="item.id === couponPopup.radioCurrent" @click="couponItemClick(item)" />
                   </view>
                 </view>
                 <view class="coupon-popup-list-item-bottom">
@@ -117,7 +123,7 @@
           </template>
         </view>
         <view class="coupon-popup-btn">
-          <u-button type="primary" shape="circle" :disabled="!couponPopup.radioCurrent" @click="confimCoupon">确 定</u-button>
+          <u-button type="primary" shape="circle" @click="confimCoupon">确 定</u-button>
         </view>
       </view>
     </u-popup>
@@ -178,104 +184,35 @@ export default {
   },
   data() {
     return {
+      // 支付弹框显示
       payWayPop: false,
+      // 是否微信环境
       wxEnv: true,
+      // 支付方式选择
       radioCurrent: '',
-      couponName: '',
+      // 订单金额
       orderMoney: '',
+      // 显示优惠券选项
       isShowCoupon: false,
+      // 选择优惠券弹框
       couponPopup: {
+        // 弹框标识
         show: false,
-        couponList: [
-          {
-            id: '770098293625933824',
-            createTime: '2023-01-03 11:42:31',
-            updateTime: '2023-01-02 21:57:18',
-            merchantName: '',
-            couponId: '770098213246291968',
-            couponName: '路段10元券',
-            exchangeId: '770098224449277952',
-            exchangeCode: 'h3zi1nek',
-            memberId: '550854924816437248',
-            memberName: '15085256944',
-            startTime: '2023-01-02 11:42:31',
-            endTime: '2023-04-13 11:42:31',
-            vehicleNo: '贵A22223',
-            status: 0,
-            source: 1,
-            threshold: 0.0,
-            couponContent: 10.0,
-            parkList: [
-              {
-                id: '770098213267263488',
-                createBy: 'admin',
-                createTime: '2023-01-03 11:42:12',
-                delFlag: 0,
-                couponId: '770098213246291968',
-                couponName: '路段10元券',
-                parkType: 1,
-                parkId: '1395602533837180929',
-                parkName: '本杰路',
-                parkNo: 'RN000000038'
-              },
-              {
-                id: '770098213279846400',
-                createBy: 'admin',
-                createTime: '2023-01-03 11:42:12',
-                delFlag: 0,
-                couponId: '770098213246291968',
-                couponName: '路段10元券',
-                parkType: 1,
-                parkId: '1395602161655615489',
-                parkName: '党固路',
-                parkNo: 'RN000000031'
-              }
-            ]
-          },
-          {
-            id: '770097376860131328',
-            createTime: '2023-01-03 11:38:53',
-            updateTime: '2023-02-17 09:57:38',
-            merchantName: '',
-            couponId: '770097278759555072',
-            couponName: '优惠券10元',
-            exchangeId: '770097291925475328',
-            exchangeCode: 'TTqBGghf',
-            memberId: '550854924816437248',
-            memberName: '15085256944',
-            startTime: '2023-01-02 11:38:53',
-            endTime: '2023-04-13 11:38:53',
-            vehicleNo: '贵A22223',
-            status: 0,
-            source: 1,
-            threshold: 0.0,
-            couponContent: 10.0,
-            parkList: [
-              {
-                id: '770097278818275328',
-                createBy: 'admin',
-                createTime: '2023-01-03 11:38:29',
-                delFlag: 0,
-                couponId: '770097278759555072',
-                couponName: '优惠券10元',
-                parkType: 0,
-                parkId: '657028028294320128',
-                parkName: '工信局停车场',
-                parkNo: 'ecd4650febc94ad4a2e8fcedfbec266a'
-              }
-            ]
-          }
-        ],
+        // 优惠券列表
+        couponList: [],
+        // 优惠券选中项value
         radioCurrent: '',
+        // navbar背景
         background: {
           backgroundColor: '#008CFF'
         },
+        // 优惠券选中项
         currentCoupon: {}
       }
     };
   },
   created() {
-    this.wxEnv = getEnvIsWx();
+    // this.wxEnv = getEnvIsWx();
   },
   methods: {
     /**
@@ -288,7 +225,7 @@ export default {
      */
     openPopup(details, numType = 'single', orderType = 'road') {
       this.payWayPop = true;
-      this.orderMoney = details.totalAmount.toFixed(2);
+      this.orderMoney = details.payAmount.toFixed(2);
       if (numType === 'single' && orderType === 'parking') {
         this.isShowCoupon = true;
         this.getCouponList(details.id);
@@ -303,11 +240,10 @@ export default {
     getCouponList(orderId) {
       this.$u.api.getCouponByOrderIdApi({ orderId }).then((res) => {
         this.couponPopup.couponList = res?.data ?? [];
-        if (this.couponPopup.couponList.length) {
-          this.couponPopup.currentCoupon = this.couponPopup.couponList[0];
-          this.couponPopup.radioCurrent = this.couponPopup.couponList[0].id;
-          this.couponName = this.couponPopup.couponList[0].couponName;
-        }
+        // if (this.couponPopup.couponList.length) {
+        //   this.couponPopup.currentCoupon = this.couponPopup.couponList[0];
+        //   this.couponPopup.radioCurrent = this.couponPopup.couponList[0].id;
+        // }
       });
     },
     /**
@@ -412,6 +348,9 @@ export default {
         vehicleNo: this.vehicleNo,
         sanPay: this.sanPay
       };
+      if (this.couponPopup.radioCurrent) {
+        params.couponMemberId = this.couponPopup.radioCurrent;
+      }
       if (this.exportFlag) {
         this.$u.api.parkingWechatPayApi(params).then((res) => {
           if (res.code === 200) {
@@ -424,11 +363,19 @@ export default {
                     //#endif
                     break;
                   case 1: // 取消
-                    this.$refs.uToast.show({
-                      title: '已取消支付',
-                      type: 'info'
-                    });
-                    window.location.reload();
+                    this.$u.api
+                      .updateCouponStatusApi({
+                        orderList: this.curOrderList
+                      })
+                      .then((res) => {
+                        if (res.code === 200) {
+                          this.$refs.uToast.show({
+                            title: '已取消支付',
+                            type: 'info'
+                          });
+                          window.location.reload();
+                        }
+                      });
                     break;
                   case 2: // 支付失败
                     this.$refs.uToast.show({
@@ -462,11 +409,19 @@ export default {
                     //#endif
                     break;
                   case 1: // 取消
-                    this.$refs.uToast.show({
-                      title: '已取消支付',
-                      type: 'info'
-                    });
-                    window.location.reload();
+                    this.$u.api
+                      .updateCouponStatusApi({
+                        orderList: this.curOrderList
+                      })
+                      .then((res) => {
+                        if (res.code === 200) {
+                          this.$refs.uToast.show({
+                            title: '已取消支付',
+                            type: 'info'
+                          });
+                          window.location.reload();
+                        }
+                      });
                     break;
                   case 2: // 支付失败
                     this.$refs.uToast.show({
@@ -569,6 +524,7 @@ export default {
      * 关闭弹框
      * */
     closePaymentMethod() {
+      this.modalClose();
       this.$emit('closePaymentMethod');
     },
     /**
@@ -577,20 +533,19 @@ export default {
      * @returns {any}
      */
     modalClose() {
-      this.wxEnv = true,
-      this.radioCurrent = 'weixin',
-      this.couponName = '',
-      this.orderMoney = '',
-      this.isShowCoupon = false,
-      this.couponPopup = {
-        show: false,
-        couponList: [],
-        radioCurrent: '',
-        background: {
-          backgroundColor: '#008CFF'
-        },
-        currentCoupon: {}
-      }
+      (this.wxEnv = true),
+        (this.radioCurrent = ''),
+        (this.orderMoney = ''),
+        (this.isShowCoupon = false),
+        (this.couponPopup = {
+          show: false,
+          couponList: [],
+          radioCurrent: '',
+          background: {
+            backgroundColor: '#008CFF'
+          },
+          currentCoupon: {}
+        });
     },
     /**
      * 关闭优惠券弹框
@@ -607,7 +562,15 @@ export default {
      * @returns {any}
      */
     couponRadioChange(val) {
-      this.couponPopup.radioCurrent = val.detail.value;
+      // this.couponPopup.radioCurrent = val.detail.value;
+      // this.couponPopup.currentCoupon = this.couponPopup.couponList.find((item) => item.id === this.couponPopup.radioCurrent);
+    },
+    couponItemClick(item) {
+      if (item.id === this.couponPopup.radioCurrent) {
+        this.couponPopup.radioCurrent = '';
+      } else {
+        this.couponPopup.radioCurrent = item.id;
+      }
     },
     /**
      * 优惠券确认
@@ -615,8 +578,11 @@ export default {
      * @returns {any}
      */
     confimCoupon() {
-      this.couponPopup.currentCoupon = this.couponPopup.couponList.find((item) => item.id === this.couponPopup.radioCurrent);
-      this.couponName = this.couponPopup.currentCoupon.couponName;
+      if (this.couponPopup.radioCurrent) {
+        this.couponPopup.currentCoupon = this.couponPopup.couponList.find((item) => item.id === this.couponPopup.radioCurrent);
+      } else {
+        this.couponPopup.currentCoupon = {};
+      }
       this.couponPopup.show = false;
     },
     /**

pages/handleMonthly/handleMonthly.scss

@@ -71,4 +71,110 @@
 }
 .pb20 {
 	padding-bottom: 30rpx;
+}
+.pay-content {
+  padding: 40rpx;
+  .pay-list {
+    &-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 104rpx;
+      border-top: solid 1px #eeeeee;
+      &-image {
+        display: flex;
+        font-size: 30rpx;
+        color: #1E1E1E;
+        .image {
+          width: 54rpx;
+          height: 45rpx;
+          margin-right: 20rpx;
+        }
+      }
+      &:last-child {
+        border-bottom: solid 1px #eeeeee;
+      }
+    }
+  }
+  .pay-money {
+    text-align: center;
+    font-size: 34rpx;
+    color: #008CFF;
+    margin-top: 20rpx;
+  }
+  .pay-btn {
+    margin-top: 34rpx;
+  }
+}
+.coupon-popup {
+  position: relative;
+  min-height: 100vh;
+  overflow-y: auto;
+  background-color: #F9F9F9;
+  &-list {
+    padding: 30rpx;
+    &-item {
+      background-color: #fff;
+      border-radius: 17rpx;
+      margin-bottom: 20rpx;
+      &-top {
+        padding: 30rpx;
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        border-bottom: 1px solid #EEEEEE;
+        &-left {
+          display: flex;
+          align-items: baseline;
+          .cplitl-left {
+            color: #FF6D6D;
+            font-size: 20rpx;
+            margin-right: 34rpx;
+            text:last-child {
+              font-size: 60rpx;
+              font-weight: bold;
+            }
+            &-bottom {
+              color: #333333;
+              font-size: 24rpx;
+            }
+          }
+          .cplitl-right {
+            view {
+              &:first-child {
+                font-size: 32rpx;
+                color: #333333;
+                font-weight: 700;
+                margin-bottom: 8rpx;
+              }
+              &:last-child {
+                font-size: 20rpx;
+                color: #666;
+              }
+            }
+          }
+        }
+      }
+      &-bottom {
+        color: #999999;
+        padding: 10rpx 30rpx;
+        font-size: 20rpx;
+        .cplib-point {
+          margin-top: 10rpx;
+          &-content {
+            padding-top: 10rpx;
+            font-size: 24rpx;
+            color: #999999;
+          }
+        }
+      }
+    }
+  }
+  &-btn {
+    width: 100%;
+    padding: 80rpx 30rpx;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
 }

pages/handleMonthly/handleMonthly.vue

@@ -1,522 +1,586 @@
 <template>
-	<view class="handle-monthly">
-		<view class="handle-monthly-item">
-			<view>车牌选择</view>
-			<view class="choose-license" @click="isShowCarLicense = true">
-				<view>{{ form.carLicense.label || '未选车牌' }}</view>
-				<u-icon name="arrow-down" color="#7B7B7B" size="30"></u-icon>
-			</view>
-		</view>
-		<u-select v-model="isShowCarLicense" :list="carLicenseList" :default-value="carLicenseDefaultValue"
-			@confirm="carLicenseListConfirm"></u-select>
-		<view class="handle-monthly-item">
-			<view>车辆信息</view>
-			<view>{{ form.carLicense.value | verifyStatusFilter }}</view>
-		</view>
-		<view class="handle-monthly-item">
-			<view>包月金额</view>
-			<view class="handle-monthly-money">{{ form.monthAmount || 0 }}元</view>
-		</view>
-		<view class="handle-monthly-item"
-			v-if="monthlyRuleObj.giveFlag && Number(monthlyRuleObj.giveFlag) === 1"
-			:class="{ 'pb20': monthlyRuleObj.minMonth && form.month >= monthlyRuleObj.minMonth && Number(monthlyRuleObj.giveFlag) === 1 }">
-			<view>包月时长</view>
-			<view class="handle-monthly-time-long">
-				<button @click="reduceMonthNum()">-</button>
-				<view>{{ form.month || 0 }}个月</view>
-				<button @click="addMonthNum()">+</button>
-			</view>
-			<view class="handle-monthly-time-tips"
-				v-if="monthlyRuleObj.minMonth && form.month >= monthlyRuleObj.minMonth && Number(monthlyRuleObj.giveFlag) === 1">
-				赠送提示：可获得{{ freeMonthNum }}个月的免费停车时长
-			</view>
-		</view>
-		<view class="handle-monthly-item" v-else>
-			<view>包月时长</view>
-			<view class="handle-monthly-time-long">
-				<button @click="reduceMonthNum()">-</button>
-				<view>{{ form.month || 0 }}个月</view>
-				<button @click="addMonthNum()">+</button>
-			</view>
-		</view>
-		<view class="handle-monthly-item">
-			<view>有效期限</view>
-			<view>{{ dateRange || '-' }}</view>
-		</view>
-		<view class="handle-monthly-explain">
-			<u-parse :html="monthlyContent"></u-parse>
-		</view>
-		<view class="handle-monthly-confirm-button">
-			<template v-if="carLicenseList.length && form.carLicense && form.carLicense.label">
-				<u-button type="primary" :loading="loading" @click="submit(roadNo)">确认包月</u-button>
-			</template>
-			<template v-else>
-				<u-button>未选车牌</u-button>
-			</template>
-		</view>
-		<u-modal v-model="payWayPop" :title-style="{ color: '#404040' }" title="缴费方式" :show-confirm-button="false"
-			:show-cancel-button="false">
-			<view class="slot-content">
-				<view class="pay-way-new">
-					<view class="pay-way-item pay-way-item-hy"
-						@click="$u.debounce(gyBankPay, 1000, (immediate = true))">
-						<image src="/static/img/gyyh-icon.svg" mode=""></image>
-						<view class="title">贵州银行</view>
-					</view>
-					<!-- #ifdef H5 || MP-WEIXIN -->
-					<view class="pay-way-item pay-way-item-wx" @click="$u.debounce(wechatPay, 1000, (immediate = true))"
-						v-if="wxEnv">
-						<image src="/static/img/weixin-icon.svg" mode=""></image>
-						<view class="title">微信支付</view>
-					</view>
-					<!-- #endif -->
-					<view class="pay-way-item pay-way-item-jh" @click="$u.debounce(juhePay, 1000, (immediate = true))">
-						<image src="/static/img/juhe-icon.svg" mode=""></image>
-						<view class="title">聚合支付</view>
-					</view>
-				</view>
-				<view class="pay-way-subtitle">
-					<view class="pay-way-subtitle-item">前三个月每天首次一分钱，长期八折优惠</view>
-					<!-- #ifdef H5 || MP-WEIXIN -->
-					<!-- <view class="pay-way-subtitle-item" v-if="wxEnv">&nbsp;</view> -->
-					<!-- #endif -->
-					<view class="pay-way-subtitle-item">&nbsp;</view>
-				</view>
-				<button class="pay-way-close-btn" @click="cancel">关闭</button>
-			</view>
-		</u-modal>
-		<u-toast ref="uToast" />
-	</view>
+  <view class="handle-monthly">
+    <view class="handle-monthly-item">
+      <view>车牌选择</view>
+      <view class="choose-license" @click="isShowCarLicense = true">
+        <view>{{ form.carLicense.label || '未选车牌' }}</view>
+        <u-icon name="arrow-down" color="#7B7B7B" size="30"></u-icon>
+      </view>
+    </view>
+    <u-select v-model="isShowCarLicense" :list="carLicenseList" :default-value="carLicenseDefaultValue" @confirm="carLicenseListConfirm"></u-select>
+    <view class="handle-monthly-item">
+      <view>车辆信息</view>
+      <view>{{ form.carLicense.value | verifyStatusFilter }}</view>
+    </view>
+    <view class="handle-monthly-item">
+      <view>包月金额</view>
+      <view class="handle-monthly-money">{{ form.monthAmount || 0 }}元</view>
+    </view>
+    <view
+      class="handle-monthly-item"
+      v-if="monthlyRuleObj.giveFlag && Number(monthlyRuleObj.giveFlag) === 1"
+      :class="{ pb20: monthlyRuleObj.minMonth && form.month >= monthlyRuleObj.minMonth && Number(monthlyRuleObj.giveFlag) === 1 }"
+    >
+      <view>包月时长</view>
+      <view class="handle-monthly-time-long">
+        <button @click="reduceMonthNum()">-</button>
+        <view>{{ form.month || 0 }}个月</view>
+        <button @click="addMonthNum()">+</button>
+      </view>
+      <view
+        class="handle-monthly-time-tips"
+        v-if="monthlyRuleObj.minMonth && form.month >= monthlyRuleObj.minMonth && Number(monthlyRuleObj.giveFlag) === 1"
+      >
+        赠送提示：可获得{{ freeMonthNum }}个月的免费停车时长
+      </view>
+    </view>
+    <view class="handle-monthly-item" v-else>
+      <view>包月时长</view>
+      <view class="handle-monthly-time-long">
+        <button @click="reduceMonthNum()">-</button>
+        <view>{{ form.month || 0 }}个月</view>
+        <button @click="addMonthNum()">+</button>
+      </view>
+    </view>
+    <view class="handle-monthly-item">
+      <view>有效期限</view>
+      <view>{{ dateRange || '-' }}</view>
+    </view>
+    <view class="handle-monthly-explain">
+      <u-parse :html="monthlyContent"></u-parse>
+    </view>
+    <view class="handle-monthly-confirm-button">
+      <template v-if="carLicenseList.length && form.carLicense && form.carLicense.label">
+        <u-button type="primary" :loading="loading" @click="submit(roadNo)">确认包月</u-button>
+      </template>
+      <template v-else>
+        <u-button>未选车牌</u-button>
+      </template>
+    </view>
+    <u-modal
+      ref="uModal"
+      v-model="payWayPop"
+      :title-style="{ color: '#1E1E1E', fontSize: '34rpx' }"
+      title="选择支付方式"
+      width="550rpx"
+      :show-cancel-button="true"
+      :mask-close-able="false"
+      confirm-text="立即支付"
+      confirm-color="#fff"
+      :confirm-style="{ backgroundColor: '#008CFF' }"
+      :async-close="true"
+      @confirm="immediatePayment"
+      @cancel="cancel"
+    >
+      <view class="pay-content">
+        <view class="pay-list">
+          <radio-group @change="payRadioChange">
+            <!-- #ifdef H5 || MP-WEIXIN -->
+            <view class="pay-list-item" v-if="wxEnv">
+              <view class="pay-list-item-image">
+                <image class="image" src="/static/img/wechat-icon-new.png" mode="aspectFit" />
+                <view>微信支付</view>
+              </view>
+              <view class="radioBox">
+                <radio color="#2DCF8C" value="weixin" :checked="'weixin' === radioCurrent" />
+              </view>
+            </view>
+            <!-- #endif -->
+            <view class="pay-list-item">
+              <view class="pay-list-item-image">
+                <image class="image" src="/static/img/gy-icon-new.png" mode="aspectFit" />
+                <view>贵州银行</view>
+              </view>
+              <view class="radioBox">
+                <radio color="#2DCF8C" value="gzyh" :checked="'gzyh' === radioCurrent" />
+              </view>
+            </view>
+            <view class="pay-list-item">
+              <view class="pay-list-item-image">
+                <image class="image" src="/static/img/juhe-icon-new.png" mode="aspectFit" />
+                <view>聚合支付</view>
+              </view>
+              <view class="radioBox">
+                <radio color="#2DCF8C" value="juhe" :checked="'juhe' === radioCurrent" />
+              </view>
+            </view>
+          </radio-group>
+        </view>
+        <view class="pay-money"> 金额：¥{{ orderMoney }} </view>
+      </view>
+    </u-modal>
+    <u-toast ref="uToast" />
+  </view>
 </template>
 
 <script>
-	import {
-		getEnvIsWx
-	} from '@/utils/judgEnvironment.js';
-	import $wxPay from '@/utils/wxPay.js';
-	export default {
-		data() {
-			return {
-				startTime: '',
-				endTime: '',
-				payUrl: '',
-				monthId: '',
-				vehicleNo: '',
-				monthEndTime: '',
-				monthStartTime: '',
-				lastActiveDate: null,
-				roadNo: null,
-				parkNo: null,
-				carLicenseList: [],
-				isShowCarLicense: false,
-				form: {
-					energyType: [],
-					monthAmount: 0,
-					carLicense: {},
-					month: 1,
-					dateRange: ''
-				},
-				label: '',
-				payWayPop: false,
-				jumpUrl: undefined,
-				monthlyContent: '',
-				carLicenseDefaultValue: [0],
-				wxEnv: false,
-				loading: false,
-				type: 'road',
-				monthlyRuleObj: {},
-				freeMonthNum: 0
-			};
-		},
-		watch: {
-			'form.month':{
-					handler(val){
-						this.calcFreeMonthNum(val)
-					},
-					deep:true,
-					immediate:false
-			}
-		},
-		onLoad(page) {
-			this.wxEnv = getEnvIsWx();
-			this.getSysterms(0);
-			if (page.vehicleNo && page.roadNo) {
-				this.roadNo = page.roadNo;
-				this.vehicleNo = page.vehicleNo;
-				this.type = 'road'
-				this.getMonthInfo(this.roadNo, this.vehicleNo);
-			} else if (page.roadNo) {
-				this.roadNo = page.roadNo;
-				this.type = 'road'
-				this.getMonthInfo(this.roadNo);
-			} else if (page.vehicleNo && page.parkNo) {
-				this.parkNo = page.parkNo;
-				this.vehicleNo = page.vehicleNo;
-				this.type = 'park'
-				this.getMonthInfo(this.parkNo, this.vehicleNo);
-			} else if (page.parkNo) {
-				this.parkNo = page.parkNo;
-				this.type = 'park'
-				this.getMonthInfo(this.parkNo);
-			}
-			if (page.monthId) {
-				this.monthId = page.monthId
-				this.payWayPop = true
-			}
-			if (page.roadNo) {
-				this.monthlyRuleDetails(page.roadNo);
-			}
-			const baseUrl = window.location.href.split('#')[0];
-			let jumpUrl = baseUrl + '#/pages/center/monthly/monthly?type=' + this.type;
-			this.jumpUrl = jumpUrl;
-		},
-		methods: {
-			/**
-			 * 获取几个月的日期范围
-			 * {date} Date 起始日期,往后推一天
-			 * {monthNum} Number  往后月数
-			 * */
-			getMonthRange(date, monthNum) {
-				let Date1 = this.lastActiveDate;
-				Date1 = new Date(Date1);
-				const year = Date1.getFullYear();
-				const month = Date1.getMonth() + 1;
-				const day = Date1.getDate();
-				const hours = Date1.getHours();
-				const minutes = Date1.getMinutes();
-				const seconds = Date1.getSeconds();
-				let days = new Date(year, month, 0);
-				days = days.getDate(); //获取当前日期中的月的天数
-				let year2 = year;
-				let month2 = parseInt(month) + parseInt(monthNum);
-				if (month2 > 12) {
-					year2 = parseInt(year2) + parseInt(parseInt(month2) / 12 == 0 ? 1 : parseInt(month2) / 12);
-					month2 = parseInt(month2) % 12;
-				}
-				let day2 = day;
-				let days2 = new Date(year2, month2, 0);
-				days2 = days2.getDate();
-				if (day2 > days2) {
-					day2 = days2;
-				}
-				if (month2 < 10) {
-					month2 = '0' + month2;
-				}
-				const t1 = year + '.' + (month > 9 ? month : '0' + month) + '.' + (day > 9 ? day : '0' + day);
-				const t2 = year2 + '.' + month2 + '.' + (day2 > 9 ? day2 : '0' + day2);
-				this.startTime = t1;
-				this.endTime = t2;
-				this.monthStartTime =
-					year + '-' + (month > 9 ? month : '0' + month) + '-' + (day > 9 ? day : '0' + day) + ' ' + hours +
-					':' + minutes + ':' + seconds;
-				this.monthEndTime = year2 + '-' + month2 + '-' + day2 + ' ' + hours + ':' + minutes + ':' + seconds;
-				return t1 + '-' + t2;
-			},
-			/**
-			 * 月操作 减1
-			 * */
-			reduceMonthNum() {
-				if (this.form.month > 1) {
-					this.form.month -= 1;
-					this.form.dateRange = this.getMonthRange(new Date(), this.form.month + this.freeMonthNum);
-				}
-			},
-			/**
-			 * 月操作 加1
-			 * */
-			addMonthNum() {
-				if (this.form.month >= 24) {
-					this.$refs.uToast.show({
-						title: '最多24月',
-						type: 'warning'
-					});
-					return;
-				}
-				this.form.month += 1;
-				this.form.dateRange = this.getMonthRange(new Date(), (this.form.month + this.freeMonthNum));
-			},
-			carLicenseListConfirm(item) {
-				this.form.carLicense = item[0];
-				this.vehicleNo = item[0].label;
-				this.getMonthInfo(this.roadNo, this.vehicleNo);
-			},
-			/**
-			 * 获取包月信息
-			 * @date 2022-10-09
-			 * @param {any} roadNo
-			 * @param {any} vehicleNo
-			 * @returns {any}
-			 */
-			getMonthInfo(roadNo, vehicleNo) {
-				const params = {
-					vehicleNo
-				}
-				if (this.type === 'park') {
-					params.parkNo = roadNo
-				} else {
-					params.roadNo = roadNo
-				}
-				this.$u.api
-					.monthInfo(params)
-					.then((res) => {
-						if (res.code === 200 && res.data.vehicleList && res.data.vehicleList.length) {
-							this.lastActiveDate = res.data.lastActiveDate;
-							this.form.monthAmount = res.data.monthAmount;
-							this.carLicenseList = [];
-							let vehicleNoItem = null;
-							res.data.vehicleList.forEach((item, index) => {
-								const obj = {
-									value: item.energyType,
-									label: item.vehicleNo,
-									energyType: item.energyType
-								};
-								if (this.vehicleNo == item.vehicleNo) {
-									vehicleNoItem = obj;
-									this.carLicenseDefaultValue = [index];
-								}
-								this.carLicenseList.push(obj);
-							});
-							// 判断是否url存在车牌号,存在则选中项默认选中
-							if (vehicleNoItem) {
-								this.form.carLicense = vehicleNoItem;
-							} else {
-								this.form.carLicense = this.carLicenseList[0];
-							}
-						}
-					}).catch((err) => {
-						console.log(err);
-					})
-			},
-			/**
-			 * 获取包月规则详情
-			 * @date 2022-12-20
-			 * @param {any} roadNo
-			 * @returns {any}
-			 */
-			monthlyRuleDetails(roadNo) {
-				this.$u.api.monthlyRuleDetailsApi({
-					roadNo
-				}).then(res => {
-					if (res.code === 200) {
-						this.monthlyRuleObj = res?.rows[0] ?? {}
-						this.calcFreeMonthNum(this.form.month)
-					}
-				})
-			},
-			calcFreeMonthNum(val){
-				let freeNum = 0;
-				if (this.monthlyRuleObj.giveFlag && Number(this.monthlyRuleObj.giveFlag) === 1) {
-					// let remainNum = Number(val) % Number(this.monthlyRuleObj.minMonth)
-					let	timesNum = parseInt(Number(val) / Number(this.monthlyRuleObj.minMonth));
-					if (timesNum > 0) {
-						this.freeMonthNum = Number(timesNum) * Number(this.monthlyRuleObj.giveMonth);
-					} else {
-						this.freeMonthNum = 0
-					}
-				}
-			},
-			/**
-			 * 提交包月信息
-			 * @date 2022-10-09
-			 * @param {any} roadNo
-			 * @returns {any}
-			 */
-			submit(roadNo) {
-				this.loading = true;
-				const params = {
-					vehicleNo: this.form.carLicense.label,
-					energyType: this.form.carLicense.energyType,
-					monthStartTime: this.monthStartTime,
-					monthEndTime: this.monthEndTime,
-					monthCount: this.form.month
-				}
-				if (this.type === 'park') {
-					params.parkNo = this.parkNo
-				} else {
-					params.roadNo = this.roadNo
-				}
-				this.$u.api
-					.createMonth(params)
-					.then((res) => {
-						if (res.code === 200) {
-							this.monthId = res.data.monthId;
-							this.payWayPop = true;
-						} else {
-							this.$refs.uToast.show({
-								title: res.msg,
-								type: 'error'
-							});
-						}
-						this.loading = false;
-					})
-					.catch((err) => {
-						this.$refs.uToast.show({
-							title: '程序错误!',
-							type: 'error'
-						});
-						this.loading = false;
-					});
-			},
-			/**
-			 * 贵州银行包月支付
-			 * @date 2022-10-09
-			 * @returns {any}
-			 */
-			gyBankPay() {
-				this.$u.api
-					.monthPay({
-						monthId: this.monthId,
-						jumpUrl: this.jumpUrl
-					})
-					.then((res) => {
-						if (res.code === 200) {
-							window.location.href = res.data.url;
-						} else {
-							this.$refs.uToast.show({
-								title: res.msg,
-								type: 'error'
-							});
-							this.jumpMonthList()
-						}
-					});
-			},
-			/**
-			 * 聚合支付直接通过后台获取贵阳银行微信支付地址
-			 * @date 2022-10-09
-			 * @returns {any}
-			 */
-			juhePay() {
-				// 支付成功跳转到包月页面
-				let params = {
-					monthId: this.monthId,
-					openid: '',
-					jumpUrl: this.jumpUrl
-				};
-				this.$u.api
-					.monthlyWxPay(params)
-					.then((res) => {
-						if (res.code === 200) {
-							localStorage.setItem('jumpUrl', this.jumpUrl);
-							location.href = res.data.qrCodeUrl;
-						} else {
-							this.$refs.uToast.show({
-								title: res.msg,
-								type: 'error'
-							});
-							this.jumpMonthList()
-						}
-					})
-					.catch((err) => {
-						this.$refs.uToast.show({
-							title: '无法调起微信支付!',
-							type: 'error'
-						});
-					});
-			},
-			/**
-			 * 微信支付
-			 * @date 2022-10-09
-			 * @returns {any}
-			 */
-			wechatPay() {
-				this.$u.api
-					.wechatMonthlyPayapi({
-						monthId: this.monthId,
-						openid: this.vuex_wxinfo.openId
-					})
-					.then((r) => {
-						if (r.code === 200) {
-							$wxPay.wexinPay(r.data.wx).then((res) => {
-								switch (Number(res.code)) {
-									case 0: // 成功
-										//#ifdef H5
-										// this.jumpMonthList()
-										location.href = this.jumpUrl
-										//#endif
-										break;
-									case 1: // 取消
-										this.$refs.uToast.show({
-											title: '已取消支付',
-											type: 'info'
-										});
-										this.jumpMonthList()
-										break;
-									case 2: // 支付失败
-										this.$refs.uToast.show({
-											title: '支付失败，请检查!',
-											type: 'error'
-										});
-										this.jumpMonthList()
-										break;
-								}
-							});
-						}
-					});
-			},
-			/**
-			 * 获取包月说明
-			 * @date 2022-10-09
-			 * @param {any} termsType
-			 * @returns {any}
-			 */
-			getSysterms(termsType) {
-				this.$u.api
-					.getSysterms({
-						termsType: termsType
-					})
-					.then((res) => {
-						if (res.code === 200) {
-							this.monthlyContent = res.data?.content;
-						} else {
-							this.$refs.uToast.show({
-								title: res.msg,
-								type: 'error'
-							});
-						}
-					})
-					.catch((err) => {
-						this.$refs.uToast.show({
-							title: '系统错误!',
-							type: 'error'
-						});
-					});
-			},
-			cancel() {
-				this.payWayPop = false
-				this.jumpMonthList()
-			},
-			jumpMonthList() {
-				this.$u.route({
-					url: '/pages/center/monthly/monthly',
-					type: 'redirect',
-					params: {
-						type: this.type
-					}
-				})
-			}
-		},
-		computed: {
-			dateRange: function() {
-				return this.getMonthRange(this.lastActiveDate, this.form.month + this.freeMonthNum);
-			}
-		},
-		filters: {
-			verifyStatusFilter(value) {
-				if (value === 0) {
-					return '-';
-				} else if (value === 1) {
-					return '汽油车';
-				} else if (value === 2) {
-					return '新能源';
-				} else {
-					return '-';
-				}
-			}
-		}
-	};
+import { getEnvIsWx } from '@/utils/judgEnvironment.js';
+import $wxPay from '@/utils/wxPay.js';
+export default {
+  data() {
+    return {
+      startTime: '',
+      endTime: '',
+      payUrl: '',
+      monthId: '',
+      vehicleNo: '',
+      monthEndTime: '',
+      monthStartTime: '',
+      lastActiveDate: null,
+      roadNo: null,
+      parkNo: null,
+      carLicenseList: [],
+      isShowCarLicense: false,
+      form: {
+        energyType: [],
+        monthAmount: 0,
+        carLicense: {},
+        month: 1,
+        dateRange: ''
+      },
+      label: '',
+      payWayPop: false,
+      jumpUrl: undefined,
+      monthlyContent: '',
+      carLicenseDefaultValue: [0],
+      wxEnv: false,
+      loading: false,
+      type: 'road',
+      monthlyRuleObj: {},
+      freeMonthNum: 0,
+      radioCurrent: '',
+      orderMoney: '',
+    };
+  },
+  watch: {
+    'form.month': {
+      handler(val) {
+        this.calcFreeMonthNum(val);
+      },
+      deep: true,
+      immediate: false
+    }
+  },
+  onLoad(page) {
+    this.wxEnv = getEnvIsWx();
+    this.getSysterms(0);
+    if (page.vehicleNo && page.roadNo) {
+      this.roadNo = page.roadNo;
+      this.vehicleNo = page.vehicleNo;
+      this.type = 'road';
+      this.getMonthInfo(this.roadNo, this.vehicleNo);
+    } else if (page.roadNo) {
+      this.roadNo = page.roadNo;
+      this.type = 'road';
+      this.getMonthInfo(this.roadNo);
+    } else if (page.vehicleNo && page.parkNo) {
+      this.parkNo = page.parkNo;
+      this.vehicleNo = page.vehicleNo;
+      this.type = 'park';
+      this.getMonthInfo(this.parkNo, this.vehicleNo);
+    } else if (page.parkNo) {
+      this.parkNo = page.parkNo;
+      this.type = 'park';
+      this.getMonthInfo(this.parkNo);
+    }
+    if (page.monthId) {
+      this.monthId = page.monthId;
+      this.payWayPop = true;
+    }
+    if (page.roadNo) {
+      this.monthlyRuleDetails(page.roadNo);
+    }
+    const baseUrl = window.location.href.split('#')[0];
+    let jumpUrl = baseUrl + '#/pages/center/monthly/monthly?type=' + this.type;
+    this.jumpUrl = jumpUrl;
+  },
+  methods: {
+    /**
+     * 获取几个月的日期范围
+     * {date} Date 起始日期,往后推一天
+     * {monthNum} Number  往后月数
+     * */
+    getMonthRange(date, monthNum) {
+      let Date1 = this.lastActiveDate;
+      Date1 = new Date(Date1);
+      const year = Date1.getFullYear();
+      const month = Date1.getMonth() + 1;
+      const day = Date1.getDate();
+      const hours = Date1.getHours();
+      const minutes = Date1.getMinutes();
+      const seconds = Date1.getSeconds();
+      let days = new Date(year, month, 0);
+      days = days.getDate(); //获取当前日期中的月的天数
+      let year2 = year;
+      let month2 = parseInt(month) + parseInt(monthNum);
+      if (month2 > 12) {
+        year2 = parseInt(year2) + parseInt(parseInt(month2) / 12 == 0 ? 1 : parseInt(month2) / 12);
+        month2 = parseInt(month2) % 12;
+      }
+      let day2 = day;
+      let days2 = new Date(year2, month2, 0);
+      days2 = days2.getDate();
+      if (day2 > days2) {
+        day2 = days2;
+      }
+      if (month2 < 10) {
+        month2 = '0' + month2;
+      }
+      const t1 = year + '.' + (month > 9 ? month : '0' + month) + '.' + (day > 9 ? day : '0' + day);
+      const t2 = year2 + '.' + month2 + '.' + (day2 > 9 ? day2 : '0' + day2);
+      this.startTime = t1;
+      this.endTime = t2;
+      this.monthStartTime =
+        year + '-' + (month > 9 ? month : '0' + month) + '-' + (day > 9 ? day : '0' + day) + ' ' + hours + ':' + minutes + ':' + seconds;
+      this.monthEndTime = year2 + '-' + month2 + '-' + day2 + ' ' + hours + ':' + minutes + ':' + seconds;
+      return t1 + '-' + t2;
+    },
+    /**
+     * 月操作 减1
+     * */
+    reduceMonthNum() {
+      if (this.form.month > 1) {
+        this.form.month -= 1;
+        this.form.dateRange = this.getMonthRange(new Date(), this.form.month + this.freeMonthNum);
+      }
+    },
+    /**
+     * 月操作 加1
+     * */
+    addMonthNum() {
+      if (this.form.month >= 24) {
+        this.$refs.uToast.show({
+          title: '最多24月',
+          type: 'warning'
+        });
+        return;
+      }
+      this.form.month += 1;
+      this.form.dateRange = this.getMonthRange(new Date(), this.form.month + this.freeMonthNum);
+    },
+    carLicenseListConfirm(item) {
+      this.form.carLicense = item[0];
+      this.vehicleNo = item[0].label;
+      this.getMonthInfo(this.roadNo, this.vehicleNo);
+    },
+    /**
+     * 获取包月信息
+     * @date 2022-10-09
+     * @param {any} roadNo
+     * @param {any} vehicleNo
+     * @returns {any}
+     */
+    getMonthInfo(roadNo, vehicleNo) {
+      const params = {
+        vehicleNo
+      };
+      if (this.type === 'park') {
+        params.parkNo = roadNo;
+      } else {
+        params.roadNo = roadNo;
+      }
+      this.$u.api
+        .monthInfo(params)
+        .then((res) => {
+          if (res.code === 200 && res.data.vehicleList && res.data.vehicleList.length) {
+            this.lastActiveDate = res.data.lastActiveDate;
+            this.form.monthAmount = res.data.monthAmount;
+            this.orderMoney = (Number(this.form.monthAmount) * Number(this.form.month)).toFixed(2);
+            this.carLicenseList = [];
+            let vehicleNoItem = null;
+            res.data.vehicleList.forEach((item, index) => {
+              const obj = {
+                value: item.energyType,
+                label: item.vehicleNo,
+                energyType: item.energyType
+              };
+              if (this.vehicleNo == item.vehicleNo) {
+                vehicleNoItem = obj;
+                this.carLicenseDefaultValue = [index];
+              }
+              this.carLicenseList.push(obj);
+            });
+            // 判断是否url存在车牌号,存在则选中项默认选中
+            if (vehicleNoItem) {
+              this.form.carLicense = vehicleNoItem;
+            } else {
+              this.form.carLicense = this.carLicenseList[0];
+            }
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    /**
+     * 获取包月规则详情
+     * @date 2022-12-20
+     * @param {any} roadNo
+     * @returns {any}
+     */
+    monthlyRuleDetails(roadNo) {
+      this.$u.api
+        .monthlyRuleDetailsApi({
+          roadNo
+        })
+        .then((res) => {
+          if (res.code === 200) {
+            this.monthlyRuleObj = res?.rows[0] ?? {};
+            this.calcFreeMonthNum(this.form.month);
+          }
+        });
+    },
+    calcFreeMonthNum(val) {
+      let freeNum = 0;
+      if (this.monthlyRuleObj.giveFlag && Number(this.monthlyRuleObj.giveFlag) === 1) {
+        // let remainNum = Number(val) % Number(this.monthlyRuleObj.minMonth)
+        let timesNum = parseInt(Number(val) / Number(this.monthlyRuleObj.minMonth));
+        if (timesNum > 0) {
+          this.freeMonthNum = Number(timesNum) * Number(this.monthlyRuleObj.giveMonth);
+        } else {
+          this.freeMonthNum = 0;
+        }
+      }
+    },
+    /**
+     * 提交包月信息
+     * @date 2022-10-09
+     * @param {any} roadNo
+     * @returns {any}
+     */
+    submit(roadNo) {
+      this.loading = true;
+      const params = {
+        vehicleNo: this.form.carLicense.label,
+        energyType: this.form.carLicense.energyType,
+        monthStartTime: this.monthStartTime,
+        monthEndTime: this.monthEndTime,
+        monthCount: this.form.month
+      };
+      if (this.type === 'park') {
+        params.parkNo = this.parkNo;
+      } else {
+        params.roadNo = this.roadNo;
+      }
+      this.$u.api
+        .createMonth(params)
+        .then((res) => {
+          if (res.code === 200) {
+            this.monthId = res.data.monthId;
+            this.orderMoney = (Number(this.form.monthAmount) * Number(this.form.month)).toFixed(2);
+            this.payWayPop = true;
+          } else {
+            this.$refs.uToast.show({
+              title: res.msg,
+              type: 'error'
+            });
+          }
+          this.loading = false;
+        })
+        .catch((err) => {
+          this.$refs.uToast.show({
+            title: '程序错误!',
+            type: 'error'
+          });
+          this.loading = false;
+        });
+    },
+    /**
+     * 贵州银行包月支付
+     * @date 2022-10-09
+     * @returns {any}
+     */
+    gyBankPay() {
+      this.$u.api
+        .monthPay({
+          monthId: this.monthId,
+          jumpUrl: this.jumpUrl
+        })
+        .then((res) => {
+          if (res.code === 200) {
+            window.location.href = res.data.url;
+          } else {
+            this.$refs.uToast.show({
+              title: res.msg,
+              type: 'error'
+            });
+            this.jumpMonthList();
+          }
+        });
+    },
+    /**
+     * 聚合支付直接通过后台获取贵阳银行微信支付地址
+     * @date 2022-10-09
+     * @returns {any}
+     */
+    juhePay() {
+      // 支付成功跳转到包月页面
+      let params = {
+        monthId: this.monthId,
+        openid: '',
+        jumpUrl: this.jumpUrl
+      };
+      this.$u.api
+        .monthlyWxPay(params)
+        .then((res) => {
+          if (res.code === 200) {
+            localStorage.setItem('jumpUrl', this.jumpUrl);
+            location.href = res.data.qrCodeUrl;
+          } else {
+            this.$refs.uToast.show({
+              title: res.msg,
+              type: 'error'
+            });
+            this.jumpMonthList();
+          }
+        })
+        .catch((err) => {
+          this.$refs.uToast.show({
+            title: '无法调起微信支付!',
+            type: 'error'
+          });
+        });
+    },
+    /**
+     * 微信支付
+     * @date 2022-10-09
+     * @returns {any}
+     */
+    wechatPay() {
+      this.$u.api
+        .wechatMonthlyPayapi({
+          monthId: this.monthId,
+          openid: this.vuex_wxinfo.openId
+        })
+        .then((r) => {
+          if (r.code === 200) {
+            $wxPay.wexinPay(r.data.wx).then((res) => {
+              switch (Number(res.code)) {
+                case 0: // 成功
+                  //#ifdef H5
+                  location.href = this.jumpUrl;
+                  //#endif
+                  break;
+                case 1: // 取消
+                  this.$refs.uToast.show({
+                    title: '已取消支付',
+                    type: 'info'
+                  });
+                  this.jumpMonthList();
+                  break;
+                case 2: // 支付失败
+                  this.$refs.uToast.show({
+                    title: '支付失败，请检查!',
+                    type: 'error'
+                  });
+                  this.jumpMonthList();
+                  break;
+              }
+            });
+          }
+        });
+    },
+    /**
+     * 获取包月说明
+     * @date 2022-10-09
+     * @param {any} termsType
+     * @returns {any}
+     */
+    getSysterms(termsType) {
+      this.$u.api
+        .getSysterms({
+          termsType: termsType
+        })
+        .then((res) => {
+          if (res.code === 200) {
+            this.monthlyContent = res.data?.content;
+          } else {
+            this.$refs.uToast.show({
+              title: res.msg,
+              type: 'error'
+            });
+          }
+        })
+        .catch((err) => {
+          this.$refs.uToast.show({
+            title: '系统错误!',
+            type: 'error'
+          });
+        });
+    },
+    cancel() {
+      this.radioCurrent = '';
+      this.orderMoney = '';
+      this.payWayPop = false;
+      this.jumpMonthList();
+    },
+    jumpMonthList() {
+      this.$u.route({
+        url: '/pages/center/monthly/monthly',
+        type: 'redirect',
+        params: {
+          type: this.type
+        }
+      });
+    },
+    /**
+     * 选中支付类型
+     * @date 2023-02-17
+     * @param {any} {detail}
+     * @returns {any}
+     */
+    payRadioChange({ detail }) {
+      this.radioCurrent = detail.value;
+    },
+    /**
+     * 立即支付
+     * @date 2023-02-17
+     * @returns {any}
+     */
+    immediatePayment() {
+      if (this.radioCurrent) {
+        switch (this.radioCurrent) {
+          case 'weixin': // 微信支付
+            this.wechatPay();
+            break;
+          case 'gzyh':
+            this.gyBankPay();
+            break;
+          case 'juhe':
+            this.juhePay();
+            break;
+        }
+      } else {
+        this.$refs.uToast.show({
+          title: '请选择支付方式!',
+          type: 'warning'
+        });
+      }
+      this.$refs['uModal'].clearLoading();
+    }
+  },
+  computed: {
+    dateRange: function () {
+      return this.getMonthRange(this.lastActiveDate, this.form.month + this.freeMonthNum);
+    }
+  },
+  filters: {
+    verifyStatusFilter(value) {
+      if (value === 0) {
+        return '-';
+      } else if (value === 1) {
+        return '汽油车';
+      } else if (value === 2) {
+        return '新能源';
+      } else {
+        return '-';
+      }
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-	@import './handleMonthly.scss';
-	@import '../paymentMethod/paymentMethod.scss';
+@import './handleMonthly.scss';
+@import '../paymentMethod/paymentMethod.scss';
 </style>

pages/handleMonthly/handleMonthly20230220.vue

@@ -0,0 +1,522 @@
+<template>
+	<view class="handle-monthly">
+		<view class="handle-monthly-item">
+			<view>车牌选择</view>
+			<view class="choose-license" @click="isShowCarLicense = true">
+				<view>{{ form.carLicense.label || '未选车牌' }}</view>
+				<u-icon name="arrow-down" color="#7B7B7B" size="30"></u-icon>
+			</view>
+		</view>
+		<u-select v-model="isShowCarLicense" :list="carLicenseList" :default-value="carLicenseDefaultValue"
+			@confirm="carLicenseListConfirm"></u-select>
+		<view class="handle-monthly-item">
+			<view>车辆信息</view>
+			<view>{{ form.carLicense.value | verifyStatusFilter }}</view>
+		</view>
+		<view class="handle-monthly-item">
+			<view>包月金额</view>
+			<view class="handle-monthly-money">{{ form.monthAmount || 0 }}元</view>
+		</view>
+		<view class="handle-monthly-item"
+			v-if="monthlyRuleObj.giveFlag && Number(monthlyRuleObj.giveFlag) === 1"
+			:class="{ 'pb20': monthlyRuleObj.minMonth && form.month >= monthlyRuleObj.minMonth && Number(monthlyRuleObj.giveFlag) === 1 }">
+			<view>包月时长</view>
+			<view class="handle-monthly-time-long">
+				<button @click="reduceMonthNum()">-</button>
+				<view>{{ form.month || 0 }}个月</view>
+				<button @click="addMonthNum()">+</button>
+			</view>
+			<view class="handle-monthly-time-tips"
+				v-if="monthlyRuleObj.minMonth && form.month >= monthlyRuleObj.minMonth && Number(monthlyRuleObj.giveFlag) === 1">
+				赠送提示：可获得{{ freeMonthNum }}个月的免费停车时长
+			</view>
+		</view>
+		<view class="handle-monthly-item" v-else>
+			<view>包月时长</view>
+			<view class="handle-monthly-time-long">
+				<button @click="reduceMonthNum()">-</button>
+				<view>{{ form.month || 0 }}个月</view>
+				<button @click="addMonthNum()">+</button>
+			</view>
+		</view>
+		<view class="handle-monthly-item">
+			<view>有效期限</view>
+			<view>{{ dateRange || '-' }}</view>
+		</view>
+		<view class="handle-monthly-explain">
+			<u-parse :html="monthlyContent"></u-parse>
+		</view>
+		<view class="handle-monthly-confirm-button">
+			<template v-if="carLicenseList.length && form.carLicense && form.carLicense.label">
+				<u-button type="primary" :loading="loading" @click="submit(roadNo)">确认包月</u-button>
+			</template>
+			<template v-else>
+				<u-button>未选车牌</u-button>
+			</template>
+		</view>
+		<u-modal v-model="payWayPop" :title-style="{ color: '#404040' }" title="缴费方式" :show-confirm-button="false"
+			:show-cancel-button="false">
+			<view class="slot-content">
+				<view class="pay-way-new">
+					<view class="pay-way-item pay-way-item-hy"
+						@click="$u.debounce(gyBankPay, 1000, (immediate = true))">
+						<image src="/static/img/gyyh-icon.svg" mode=""></image>
+						<view class="title">贵州银行</view>
+					</view>
+					<!-- #ifdef H5 || MP-WEIXIN -->
+					<view class="pay-way-item pay-way-item-wx" @click="$u.debounce(wechatPay, 1000, (immediate = true))"
+						v-if="wxEnv">
+						<image src="/static/img/weixin-icon.svg" mode=""></image>
+						<view class="title">微信支付</view>
+					</view>
+					<!-- #endif -->
+					<view class="pay-way-item pay-way-item-jh" @click="$u.debounce(juhePay, 1000, (immediate = true))">
+						<image src="/static/img/juhe-icon.svg" mode=""></image>
+						<view class="title">聚合支付</view>
+					</view>
+				</view>
+				<view class="pay-way-subtitle">
+					<view class="pay-way-subtitle-item">前三个月每天首次一分钱，长期八折优惠</view>
+					<!-- #ifdef H5 || MP-WEIXIN -->
+					<!-- <view class="pay-way-subtitle-item" v-if="wxEnv">&nbsp;</view> -->
+					<!-- #endif -->
+					<view class="pay-way-subtitle-item">&nbsp;</view>
+				</view>
+				<button class="pay-way-close-btn" @click="cancel">关闭</button>
+			</view>
+		</u-modal>
+		<u-toast ref="uToast" />
+	</view>
+</template>
+
+<script>
+	import {
+		getEnvIsWx
+	} from '@/utils/judgEnvironment.js';
+	import $wxPay from '@/utils/wxPay.js';
+	export default {
+		data() {
+			return {
+				startTime: '',
+				endTime: '',
+				payUrl: '',
+				monthId: '',
+				vehicleNo: '',
+				monthEndTime: '',
+				monthStartTime: '',
+				lastActiveDate: null,
+				roadNo: null,
+				parkNo: null,
+				carLicenseList: [],
+				isShowCarLicense: false,
+				form: {
+					energyType: [],
+					monthAmount: 0,
+					carLicense: {},
+					month: 1,
+					dateRange: ''
+				},
+				label: '',
+				payWayPop: false,
+				jumpUrl: undefined,
+				monthlyContent: '',
+				carLicenseDefaultValue: [0],
+				wxEnv: false,
+				loading: false,
+				type: 'road',
+				monthlyRuleObj: {},
+				freeMonthNum: 0
+			};
+		},
+		watch: {
+			'form.month':{
+					handler(val){
+						this.calcFreeMonthNum(val)
+					},
+					deep:true,
+					immediate:false
+			}
+		},
+		onLoad(page) {
+			this.wxEnv = getEnvIsWx();
+			this.getSysterms(0);
+			if (page.vehicleNo && page.roadNo) {
+				this.roadNo = page.roadNo;
+				this.vehicleNo = page.vehicleNo;
+				this.type = 'road'
+				this.getMonthInfo(this.roadNo, this.vehicleNo);
+			} else if (page.roadNo) {
+				this.roadNo = page.roadNo;
+				this.type = 'road'
+				this.getMonthInfo(this.roadNo);
+			} else if (page.vehicleNo && page.parkNo) {
+				this.parkNo = page.parkNo;
+				this.vehicleNo = page.vehicleNo;
+				this.type = 'park'
+				this.getMonthInfo(this.parkNo, this.vehicleNo);
+			} else if (page.parkNo) {
+				this.parkNo = page.parkNo;
+				this.type = 'park'
+				this.getMonthInfo(this.parkNo);
+			}
+			if (page.monthId) {
+				this.monthId = page.monthId
+				this.payWayPop = true
+			}
+			if (page.roadNo) {
+				this.monthlyRuleDetails(page.roadNo);
+			}
+			const baseUrl = window.location.href.split('#')[0];
+			let jumpUrl = baseUrl + '#/pages/center/monthly/monthly?type=' + this.type;
+			this.jumpUrl = jumpUrl;
+		},
+		methods: {
+			/**
+			 * 获取几个月的日期范围
+			 * {date} Date 起始日期,往后推一天
+			 * {monthNum} Number  往后月数
+			 * */
+			getMonthRange(date, monthNum) {
+				let Date1 = this.lastActiveDate;
+				Date1 = new Date(Date1);
+				const year = Date1.getFullYear();
+				const month = Date1.getMonth() + 1;
+				const day = Date1.getDate();
+				const hours = Date1.getHours();
+				const minutes = Date1.getMinutes();
+				const seconds = Date1.getSeconds();
+				let days = new Date(year, month, 0);
+				days = days.getDate(); //获取当前日期中的月的天数
+				let year2 = year;
+				let month2 = parseInt(month) + parseInt(monthNum);
+				if (month2 > 12) {
+					year2 = parseInt(year2) + parseInt(parseInt(month2) / 12 == 0 ? 1 : parseInt(month2) / 12);
+					month2 = parseInt(month2) % 12;
+				}
+				let day2 = day;
+				let days2 = new Date(year2, month2, 0);
+				days2 = days2.getDate();
+				if (day2 > days2) {
+					day2 = days2;
+				}
+				if (month2 < 10) {
+					month2 = '0' + month2;
+				}
+				const t1 = year + '.' + (month > 9 ? month : '0' + month) + '.' + (day > 9 ? day : '0' + day);
+				const t2 = year2 + '.' + month2 + '.' + (day2 > 9 ? day2 : '0' + day2);
+				this.startTime = t1;
+				this.endTime = t2;
+				this.monthStartTime =
+					year + '-' + (month > 9 ? month : '0' + month) + '-' + (day > 9 ? day : '0' + day) + ' ' + hours +
+					':' + minutes + ':' + seconds;
+				this.monthEndTime = year2 + '-' + month2 + '-' + day2 + ' ' + hours + ':' + minutes + ':' + seconds;
+				return t1 + '-' + t2;
+			},
+			/**
+			 * 月操作 减1
+			 * */
+			reduceMonthNum() {
+				if (this.form.month > 1) {
+					this.form.month -= 1;
+					this.form.dateRange = this.getMonthRange(new Date(), this.form.month + this.freeMonthNum);
+				}
+			},
+			/**
+			 * 月操作 加1
+			 * */
+			addMonthNum() {
+				if (this.form.month >= 24) {
+					this.$refs.uToast.show({
+						title: '最多24月',
+						type: 'warning'
+					});
+					return;
+				}
+				this.form.month += 1;
+				this.form.dateRange = this.getMonthRange(new Date(), (this.form.month + this.freeMonthNum));
+			},
+			carLicenseListConfirm(item) {
+				this.form.carLicense = item[0];
+				this.vehicleNo = item[0].label;
+				this.getMonthInfo(this.roadNo, this.vehicleNo);
+			},
+			/**
+			 * 获取包月信息
+			 * @date 2022-10-09
+			 * @param {any} roadNo
+			 * @param {any} vehicleNo
+			 * @returns {any}
+			 */
+			getMonthInfo(roadNo, vehicleNo) {
+				const params = {
+					vehicleNo
+				}
+				if (this.type === 'park') {
+					params.parkNo = roadNo
+				} else {
+					params.roadNo = roadNo
+				}
+				this.$u.api
+					.monthInfo(params)
+					.then((res) => {
+						if (res.code === 200 && res.data.vehicleList && res.data.vehicleList.length) {
+							this.lastActiveDate = res.data.lastActiveDate;
+							this.form.monthAmount = res.data.monthAmount;
+							this.carLicenseList = [];
+							let vehicleNoItem = null;
+							res.data.vehicleList.forEach((item, index) => {
+								const obj = {
+									value: item.energyType,
+									label: item.vehicleNo,
+									energyType: item.energyType
+								};
+								if (this.vehicleNo == item.vehicleNo) {
+									vehicleNoItem = obj;
+									this.carLicenseDefaultValue = [index];
+								}
+								this.carLicenseList.push(obj);
+							});
+							// 判断是否url存在车牌号,存在则选中项默认选中
+							if (vehicleNoItem) {
+								this.form.carLicense = vehicleNoItem;
+							} else {
+								this.form.carLicense = this.carLicenseList[0];
+							}
+						}
+					}).catch((err) => {
+						console.log(err);
+					})
+			},
+			/**
+			 * 获取包月规则详情
+			 * @date 2022-12-20
+			 * @param {any} roadNo
+			 * @returns {any}
+			 */
+			monthlyRuleDetails(roadNo) {
+				this.$u.api.monthlyRuleDetailsApi({
+					roadNo
+				}).then(res => {
+					if (res.code === 200) {
+						this.monthlyRuleObj = res?.rows[0] ?? {}
+						this.calcFreeMonthNum(this.form.month)
+					}
+				})
+			},
+			calcFreeMonthNum(val){
+				let freeNum = 0;
+				if (this.monthlyRuleObj.giveFlag && Number(this.monthlyRuleObj.giveFlag) === 1) {
+					// let remainNum = Number(val) % Number(this.monthlyRuleObj.minMonth)
+					let	timesNum = parseInt(Number(val) / Number(this.monthlyRuleObj.minMonth));
+					if (timesNum > 0) {
+						this.freeMonthNum = Number(timesNum) * Number(this.monthlyRuleObj.giveMonth);
+					} else {
+						this.freeMonthNum = 0
+					}
+				}
+			},
+			/**
+			 * 提交包月信息
+			 * @date 2022-10-09
+			 * @param {any} roadNo
+			 * @returns {any}
+			 */
+			submit(roadNo) {
+				this.loading = true;
+				const params = {
+					vehicleNo: this.form.carLicense.label,
+					energyType: this.form.carLicense.energyType,
+					monthStartTime: this.monthStartTime,
+					monthEndTime: this.monthEndTime,
+					monthCount: this.form.month
+				}
+				if (this.type === 'park') {
+					params.parkNo = this.parkNo
+				} else {
+					params.roadNo = this.roadNo
+				}
+				this.$u.api
+					.createMonth(params)
+					.then((res) => {
+						if (res.code === 200) {
+							this.monthId = res.data.monthId;
+							this.payWayPop = true;
+						} else {
+							this.$refs.uToast.show({
+								title: res.msg,
+								type: 'error'
+							});
+						}
+						this.loading = false;
+					})
+					.catch((err) => {
+						this.$refs.uToast.show({
+							title: '程序错误!',
+							type: 'error'
+						});
+						this.loading = false;
+					});
+			},
+			/**
+			 * 贵州银行包月支付
+			 * @date 2022-10-09
+			 * @returns {any}
+			 */
+			gyBankPay() {
+				this.$u.api
+					.monthPay({
+						monthId: this.monthId,
+						jumpUrl: this.jumpUrl
+					})
+					.then((res) => {
+						if (res.code === 200) {
+							window.location.href = res.data.url;
+						} else {
+							this.$refs.uToast.show({
+								title: res.msg,
+								type: 'error'
+							});
+							this.jumpMonthList()
+						}
+					});
+			},
+			/**
+			 * 聚合支付直接通过后台获取贵阳银行微信支付地址
+			 * @date 2022-10-09
+			 * @returns {any}
+			 */
+			juhePay() {
+				// 支付成功跳转到包月页面
+				let params = {
+					monthId: this.monthId,
+					openid: '',
+					jumpUrl: this.jumpUrl
+				};
+				this.$u.api
+					.monthlyWxPay(params)
+					.then((res) => {
+						if (res.code === 200) {
+							localStorage.setItem('jumpUrl', this.jumpUrl);
+							location.href = res.data.qrCodeUrl;
+						} else {
+							this.$refs.uToast.show({
+								title: res.msg,
+								type: 'error'
+							});
+							this.jumpMonthList()
+						}
+					})
+					.catch((err) => {
+						this.$refs.uToast.show({
+							title: '无法调起微信支付!',
+							type: 'error'
+						});
+					});
+			},
+			/**
+			 * 微信支付
+			 * @date 2022-10-09
+			 * @returns {any}
+			 */
+			wechatPay() {
+				this.$u.api
+					.wechatMonthlyPayapi({
+						monthId: this.monthId,
+						openid: this.vuex_wxinfo.openId
+					})
+					.then((r) => {
+						if (r.code === 200) {
+							$wxPay.wexinPay(r.data.wx).then((res) => {
+								switch (Number(res.code)) {
+									case 0: // 成功
+										//#ifdef H5
+										// this.jumpMonthList()
+										location.href = this.jumpUrl
+										//#endif
+										break;
+									case 1: // 取消
+										this.$refs.uToast.show({
+											title: '已取消支付',
+											type: 'info'
+										});
+										this.jumpMonthList()
+										break;
+									case 2: // 支付失败
+										this.$refs.uToast.show({
+											title: '支付失败，请检查!',
+											type: 'error'
+										});
+										this.jumpMonthList()
+										break;
+								}
+							});
+						}
+					});
+			},
+			/**
+			 * 获取包月说明
+			 * @date 2022-10-09
+			 * @param {any} termsType
+			 * @returns {any}
+			 */
+			getSysterms(termsType) {
+				this.$u.api
+					.getSysterms({
+						termsType: termsType
+					})
+					.then((res) => {
+						if (res.code === 200) {
+							this.monthlyContent = res.data?.content;
+						} else {
+							this.$refs.uToast.show({
+								title: res.msg,
+								type: 'error'
+							});
+						}
+					})
+					.catch((err) => {
+						this.$refs.uToast.show({
+							title: '系统错误!',
+							type: 'error'
+						});
+					});
+			},
+			cancel() {
+				this.payWayPop = false
+				this.jumpMonthList()
+			},
+			jumpMonthList() {
+				this.$u.route({
+					url: '/pages/center/monthly/monthly',
+					type: 'redirect',
+					params: {
+						type: this.type
+					}
+				})
+			}
+		},
+		computed: {
+			dateRange: function() {
+				return this.getMonthRange(this.lastActiveDate, this.form.month + this.freeMonthNum);
+			}
+		},
+		filters: {
+			verifyStatusFilter(value) {
+				if (value === 0) {
+					return '-';
+				} else if (value === 1) {
+					return '汽油车';
+				} else if (value === 2) {
+					return '新能源';
+				} else {
+					return '-';
+				}
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import './handleMonthly.scss';
+	@import '../paymentMethod/paymentMethod.scss';
+</style>

pages/index/index.vue

@@ -63,7 +63,7 @@
     </view>
 
     <!-- ===================================== 停车列表 ===================================== -->
-    <template v-for="(item) in orderList">
+    <view v-for="item in orderList" :key="item.id">
       <u-card :show-foot="false" border-radius="16" margin="20rpx 40rpx" padding="30">
         <view class="pending-order-head" slot="head">
           <view class="pending-order-head-left">
@@ -123,7 +123,7 @@
               <view class="order">停车泊位:{{ item.spaceName }}</view>
             </view>
             <view class="go-pay-wrap" v-if="Number(item.deviceType) !== 2">
-              <view class="go-pay" @click="goPay(item.id)" v-if="item.payAmount != 0">出场缴费</view>
+              <view class="go-pay" @click="goPay(item)" v-if="item.payAmount != 0">出场缴费</view>
               <view class="go-pay1" v-else>出场缴费</view>
             </view>
           </view>
@@ -139,7 +139,7 @@
           </view>
         </view>
       </u-card>
-    </template>
+    </view>
 
     <!-- ===================================== 优惠活动 ===================================== -->
     <view class="promotion-box">
@@ -186,7 +186,7 @@
     </u-popup>
 
     <!-- ===================================== 支付方式弹框 ===================================== -->
-    <PaymentMethod :payWayPop="payWayPop" :curOrderList="curOrderList" :jumpUrl="jumpUrl" @closePaymentMethod="closePaymentMethod"></PaymentMethod>
+    <!-- <PaymentMethod :payWayPop="payWayPop" :curOrderList="curOrderList" :jumpUrl="jumpUrl" @closePaymentMethod="closePaymentMethod"></PaymentMethod> -->
 
     <!-- ===================================== 0元提示弹出层 ===================================== -->
     <u-modal v-model="jumpMsgModal" :content="jumpMsgContent" :show-title="false" :show-confirm-button="false" />
@@ -249,19 +249,20 @@
         <u-button type="primary" plain @click="ShowchangevehicleNo = false">取消</u-button>
       </view>
     </u-popup>
-		<!-- <ChoosePayment/> -->
+    <!-- 选择支付 -->
+    <ChoosePayment ref="choosePayment" :curOrderList="curOrderList" :jumpUrl="jumpUrl" @closePaymentMethod="closePaymentMethod" />
   </view>
 </template>
 
 <script>
 import getUrlParams from '../../utils/getUrlParams.js';
-import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue';
-// import ChoosePayment from '@/pages/choosePayment/choosePayment.vue';
+// import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue';
+import ChoosePayment from '@/pages/choosePayment/choosePayment.vue';
 import { jsonp } from 'vue-jsonp';
 export default {
   components: {
-    PaymentMethod,
-		// ChoosePayment
+    // PaymentMethod,
+    ChoosePayment
   },
   data() {
     return {
@@ -394,7 +395,7 @@ export default {
         this.jumpMsgModal = false;
       }, 3000);
     }
-		this.getLocation();
+    this.getLocation();
   },
   onShow() {
     this.handleGetIndexData();
@@ -527,18 +528,18 @@ export default {
             //     alert('未知错误。');
             //     break;
             // }
-						uni.getLocation({
-							type: 'gcj02',
-							success: function (res) {
-								that.latLongItude = {
-								  latitude: res.latitude,
-								  longitude: res.longitude
-								};
-								that.latitude = res.latitude;
-								that.longitude = res.longitude;
-								that.getCityNameByLonLat(that.latLongItude);
-							}
-						});
+            uni.getLocation({
+              type: 'gcj02',
+              success: function (res) {
+                that.latLongItude = {
+                  latitude: res.latitude,
+                  longitude: res.longitude
+                };
+                that.latitude = res.latitude;
+                that.longitude = res.longitude;
+                that.getCityNameByLonLat(that.latLongItude);
+              }
+            });
           }
         );
       } else {
@@ -702,12 +703,13 @@ export default {
       });
     },
     // 去支付,选择支付方式
-    goPay(orderId) {
+    goPay(item) {
       const href = location.href.split('#');
-      this.jumpUrl = href[0] + '#/pages/center/order/orderDetails/orderDetails?orderId=' + orderId + '&type=open';
-      this.payWayPop = true;
+      this.jumpUrl = href[0] + '#/pages/center/order/orderDetails/orderDetails?orderId=' + item.id + '&type=open';
+      // this.payWayPop = true;
       this.curOrderList = [];
-      this.curOrderList.push(orderId);
+      this.curOrderList.push(item.id);
+      this.$refs['choosePayment'].openPopup({ ...item }, 'single', 'road');
     },
     // 获取路段详情
     onRoadInfo(item) {

pages/parkexport/parkexport.vue

@@ -70,23 +70,25 @@
       </view>
     </template>
     <!-- 支付方式 -->
-    <PaymentMethod
+    <ChoosePayment
+      ref="choosePayment"
       :payWayPop="payWayPop"
       :curOrderList="orderList"
       :jumpUrl="jumpUrl"
       :exportFlag="true"
       :sanPay="saopay"
+      :otherParams="{ parkType: 'export' }"
       @closePaymentMethod="closePaymentMethod"
-    ></PaymentMethod>
+    />
     <u-toast ref="uToast" />
   </view>
 </template>
 
 <script>
-import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue';
+import ChoosePayment from '@/pages/choosePayment/choosePayment.vue';
 export default {
   components: {
-    PaymentMethod
+    ChoosePayment
   },
   data() {
     return {
@@ -130,7 +132,9 @@ export default {
      * 立即支付
      */
     onEntraceClick() {
-      this.payWayPop = true;
+      this.$nextTick(() => {
+        this.$refs['choosePayment'].openPopup({ ...this.infoData }, 'single', 'parking');
+      });
     },
     /**
      * 反复查询支付状态

pages/parkexport/parkexport20230220.vue

@@ -0,0 +1,222 @@
+
+<template>
+  <!-- 地磁 -->
+  <view class="parking-lock">
+    <!-- 地磁支付 -->
+    <template v-if="infoData">
+      <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">{{ infoData.vehicleNo }}</view>
+          </view>
+          <view class="parking-lock-info-item">
+            <view>停车场名称</view>
+            <view class="weight">{{ infoData.parkingName }}</view>
+          </view>
+          <view class="parking-lock-info-item">
+            <view>入场车道</view>
+            <view class="weight">{{ infoData.entranceName }}</view>
+          </view>
+          <view class="parking-lock-info-item">
+            <view>入场时间</view>
+            <view class="weight">{{ infoData.inTime }}</view>
+          </view>
+          <view class="parking-lock-info-item">
+            <view>出场车道</view>
+            <view class="weight">{{ infoData.outEntranceName }}</view>
+          </view>
+          <view class="parking-lock-info-item">
+            <view>出场时间</view>
+            <view class="weight">{{ infoData.outTime }}</view>
+          </view>
+          <!-- <view class="parking-lock-info-item">
+						<view>通道名称</view>
+						<view class="weight">{{infoData.roadwayName}}</view>
+					</view> -->
+          <view class="parking-lock-info-item">
+            <view>免费时长</view>
+            <view class="weight">{{ infoData.freeDuration || `0天0时${free_time}分0秒` }}</view>
+          </view>
+          <view class="parking-lock-info-item">
+            <view class="weight">计费时长</view>
+            <view class="weight">{{ infoData.calcDuration }}</view>
+          </view>
+          <view class="parking-lock-info-item">
+            <view>累计停车时长</view>
+            <view class="weight">{{ infoData.duration }}</view>
+          </view>
+          <view class="parking-lock-info-item">
+            <view>应收金额</view>
+            <view class="weight">{{ infoData.totalAmount }}元</view>
+          </view>
+          <view class="parking-lock-info-item">
+            <view>订单编号</view>
+            <view class="weight">{{ infoData.id }}</view>
+          </view>
+        </view>
+        <view class="parking-lock-pay-btn">
+          <button type="default" v-if="isPay" @click="onEntraceClick">支付出场</button>
+          <button type="default" v-else @click="jumpHome('/pages/index/index')">支付成功，返回首页</button>
+        </view>
+      </view>
+    </template>
+    <template v-else>
+      <view class="parking-lock-info">
+        <view class="parking-lock-info-item">
+          <view>出口无车辆</view>
+        </view>
+      </view>
+    </template>
+    <!-- 支付方式 -->
+    <PaymentMethod
+      :payWayPop="payWayPop"
+      :curOrderList="orderList"
+      :jumpUrl="jumpUrl"
+      :exportFlag="true"
+      :sanPay="saopay"
+			:otherParams="{ parkType: 'export' }"
+      @closePaymentMethod="closePaymentMethod"
+    ></PaymentMethod>
+    <u-toast ref="uToast" />
+  </view>
+</template>
+
+<script>
+import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue';
+export default {
+  components: {
+    PaymentMethod,
+  },
+  data() {
+    return {
+      intoInfo: {
+        parkNo: '',
+        roadwayNo: '',
+        polyOrderId: '',
+        isBack: 0
+      },
+      saopay: true,
+      payWayPop: false, // 支付弹框
+      infoData: undefined, // 订单信息
+      orderList: [], // 支付订单列表
+      jumpUrl: location.href + '&isBack=1', // 回调地址
+      timer: null, // 轮询
+      isPay: false // 支付按钮显示
+    };
+  },
+  onLoad(page) {
+    this.intoInfo.parkNo = page?.parkNo;
+    this.intoInfo.roadwayNo = page?.roadwayNo;
+    this.intoInfo.polyOrderId = page?.polyOrderId;
+    this.intoInfo.isBack = page?.isBack;
+  },
+  onShow() {
+    this.getOrderDetails(this.intoInfo.parkNo, this.intoInfo.roadwayNo);
+    if (this.intoInfo.polyOrderId && this.intoInfo.isBack == 1) {
+      uni.showLoading({
+        title: '订单状态查询中...'
+      });
+      this.timer = setInterval(() => {
+        this.handlePayStatus(this.intoInfo.polyOrderId);
+      }, 1000);
+    }
+  },
+  onUnload() {
+    clearInterval(this.timer);
+  },
+  methods: {
+    /**
+     * 立即支付
+     */
+    onEntraceClick() {
+      this.payWayPop = true;
+    },
+    /**
+     * 反复查询支付状态
+     * @param { String } orderId
+     */
+    handlePayStatus(orderId) {
+      this.$u.api
+        .getOrderStateExportApi({
+          orderId
+        })
+        .then((res) => {
+          if (res.code === 200) {
+            if (res.data.payStatus === 1 || res.data.payStatus === 3) {
+              clearInterval(this.timer);
+              uni.hideLoading();
+              this.getOrderDetails(this.intoInfo.parkNo, this.intoInfo.roadwayNo);
+            } else if (res.data.payStatus === 2) {
+              this.isPay = true;
+              uni.hideLoading();
+            }
+          } else {
+            clearInterval(this.timer);
+            uni.hideLoading();
+            this.$refs.uToast.show({
+              title: res.msg || '支付失败!',
+              type: 'error'
+            });
+          }
+        })
+        .catch(() => {
+          uni.hideLoading();
+          clearInterval(this.timer);
+        });
+    },
+    /**
+     * 查询订单信息
+     * @param { String } parkNo 停车场编号
+     * @param { String } roadwayNo 出口编号
+     */
+    getOrderDetails(parkNo, roadwayNo) {
+      uni.showLoading({
+        title: '订单查询中...'
+      });
+      this.$u.api
+        .getDetailExportApi({
+          parkNo,
+          roadwayNo
+        })
+        .then((res) => {
+          if (res.code === 200) {
+            this.infoData = res.data;
+            this.orderList = [res.data.id];
+            if (res.data.orderStatus == 2 || res.data.orderStatus == 3) {
+              this.isPay = true;
+            } else {
+              this.isPay = false;
+            }
+          } else {
+            this.$refs.uToast.show({
+              title: res.msg || '订单无数据',
+              type: 'error'
+            });
+          }
+          uni.hideLoading();
+        })
+        .catch((err) => {
+          uni.hideLoading();
+        });
+    },
+    /**
+     * 关闭支付弹框
+     */
+    closePaymentMethod() {
+      this.payWayPop = false;
+    },
+    jumpHome(url) {
+      uni.switchTab({
+        url: url
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import './parkexport.scss';
+</style>

pages/payLists/payLists.vue

@@ -132,30 +132,30 @@
       </view>
     </u-modal>
     <!-- 支付方式 -->
-    <PaymentMethod
+    <!-- <PaymentMethod
       :payWayPop="payWayPop"
       :exportFlag="exportFlag"
       :curOrderList="currentItem"
       :jumpUrl="jumpUrl"
       @closePaymentMethod="closePaymentMethod"
-    ></PaymentMethod>
-    <!-- <ChoosePayment
+    ></PaymentMethod> -->
+    <ChoosePayment
       ref="choosePayment"
       :exportFlag="exportFlag"
       :curOrderList="currentItem"
       :jumpUrl="jumpUrl"
       @closePaymentMethod="closePaymentMethod"
-    /> -->
+    />
     <u-toast ref="uToast" />
   </view>
 </template>
 
 <script>
-import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue';
+// import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue';
 import ChoosePayment from '@/pages/choosePayment/choosePayment.vue';
 export default {
   components: {
-    PaymentMethod,
+    // PaymentMethod,
     ChoosePayment
   },
   data() {
@@ -345,10 +345,10 @@ export default {
     choosePayWay(orderId, item) {
       this.currentItem = [];
       this.currentItem.push(orderId);
-      this.payWayPop = true;
-      // this.$nextTick(() => {
-      //   this.$refs['choosePayment'].openPopup(item, 'single', this.current === 0 ? 'road' : 'parking');
-      // });
+      // this.payWayPop = true;
+      this.$nextTick(() => {
+        this.$refs['choosePayment'].openPopup(item, 'single', this.current === 0 ? 'road' : 'parking');
+      });
     },
     // 全部缴费确认
     confirmPrice() {
@@ -375,10 +375,14 @@ export default {
     },
     // 缴费提示弹框确认
     payTipsPopConfirm() {
-      this.payWayPop = true;
-      // this.$nextTick(() => {
-      //   this.$refs['choosePayment'].openPopup({ totalAmount: Number(this.payTipsItem.price) }, 'multiple', this.current === 0 ? 'road' : 'parking');
-      // });
+      // this.payWayPop = true;
+      this.$nextTick(() => {
+        this.$refs['choosePayment'].openPopup(
+          { payAmount: Number(this.payTipsItem.price), ...this.payTipsItem },
+          'multiple',
+          this.current === 0 ? 'road' : 'parking'
+        );
+      });
     },
     handleGetOrderinfo(orderId) {
       this.$u.api
@@ -387,7 +391,6 @@ export default {
         })
         .then((res) => {
           this.orderInfo = res.data;
-          console.log('handleGetOrderinfo', JSON.parse(JSON.stringify(res)));
         })
         .catch((err) => {
           this.$refs.uToast.show({

pages/paymentMethod/paymentMethod.vue

@@ -110,6 +110,11 @@
 			exportFlag: {
 				type: Boolean,
 				default: false
+			},
+			// 其他参数
+			otherParams: {
+				type: Object,
+				default: () => {}
 			}
 		},
 		data() {
@@ -204,7 +209,8 @@
 					payeeId: this.payeeId || undefined,
 					payeeName: this.payeeName || undefined,
 					vehicleNo: this.vehicleNo,
-					sanPay: this.sanPay
+					sanPay: this.sanPay,
+					...this.otherParams
 				};
 				if (this.exportFlag) {
 					this.$u.api.parkingWechatPayApi(params).then((res) => {