包月支付集成

pages/center/monthly/monthly.vue

@@ -182,6 +182,7 @@ export default {
           this.cancelShow = false
         })
         .catch((err) => {
+          this.$refs['uModal'].clearLoading();
           this.$refs.uToast.show({
             title: '操作失败',
             type: 'error'

pages/choosePayment/choosePayment.vue

@@ -36,6 +36,7 @@
             <view class="pay-list-item">
               <view class="pay-list-item-image">
                 <image class="image" src="/static/img/juhe-icon-new.png" mode="aspectFit" />
+                <!-- <image class="image" src="/static/img/alipay-icon-new.png" mode="aspectFill" /> -->
                 <view>聚合支付</view>
               </view>
               <view class="radioBox">
@@ -187,6 +188,16 @@ export default {
     exportFlag: {
       type: Boolean,
       default: false
+    },
+    // 区分包月支付
+    isMonthPay: {
+      type: Boolean,
+      default: false
+    },
+    // 包月id
+    monthId: {
+      type: String,
+      default: null
     }
   },
   data() {
@@ -231,10 +242,10 @@ export default {
      * @returns {any}
      */
     openPopup(details, numType = 'single', orderType = 'road') {
-			this.wxEnv = getEnvIsWx();
+      this.wxEnv = getEnvIsWx();
       this.payWayPop = true;
       this.orderMoney = details.payAmount.toFixed(2);
-      if (numType === 'single' && orderType === 'parking') {
+      if (numType === 'single' && orderType === 'parking' && !this.isMonthPay) {
         this.isShowCoupon = true;
         this.getCouponList(details.id);
       }
@@ -248,10 +259,6 @@ 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;
-        // }
       });
     },
     /**
@@ -337,12 +344,64 @@ export default {
           });
       }
     },
+    /**
+     * @description: 贵阳银行包月支付
+     * @return {*}
+     */
+    gyBankMonthPay() {
+      this.$u.api
+        .monthPay({
+          monthId: this.monthId,
+          jumpUrl: this.jumpUrl
+        })
+        .then((res) => {
+          if (res.code === 200) {
+            location.href = res?.data?.url;
+          } else {
+            this.$refs.uToast.show({
+              title: res.msg,
+              type: 'error'
+            });
+          }
+        });
+    },
     /**
      * 聚合支付
      * */
     juhePay() {
       this.getWXPayByJava(this.curOrderList, this.deviceNo);
     },
+    /**
+     * @description: 聚合包月支付
+     * @return {*}
+     */
+    juheMonthPay() {
+      // 支付成功跳转到包月页面
+      let params = {
+        monthId: this.monthId,
+        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.modalClose();
+          }
+        })
+        .catch((err) => {
+          this.$refs.uToast.show({
+            title: '无法调起聚合支付!',
+            type: 'error'
+          });
+        });
+    },
     /**
      * 微信支付
      */
@@ -453,6 +512,42 @@ export default {
         });
       }
     },
+    /**
+     * @description: 微信包月支付
+     * @return {*}
+     */
+    wechatMonthPay() {
+      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'
+                  });
+                  break;
+                case 2: // 支付失败
+                  this.$refs.uToast.show({
+                    title: '支付失败，请检查!',
+                    type: 'error'
+                  });
+                  break;
+              }
+            });
+          }
+        });
+    },
     /**
      * 直接通过后台获取贵阳银行微信支付地址
      * @param {Array} list 需要支付的订单组合数组
@@ -528,13 +623,6 @@ export default {
           });
       }
     },
-    /**
-     * 关闭弹框
-     * */
-    closePaymentMethod() {
-      this.modalClose();
-      this.$emit('closePaymentMethod');
-    },
     /**
      * 支付弹框支付触发
      * @date 2023-02-17
@@ -554,6 +642,7 @@ export default {
           },
           currentCoupon: {}
         });
+      this.$emit('closePaymentMethod');
     },
     /**
      * 关闭优惠券弹框

pages/handleMonthly/handleMonthly.vue

@@ -51,72 +51,24 @@
     </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>
+        <u-button type="primary" :loading="loading" @click="submit()">确认包月</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>
+    <!-- 选择支付 -->
+    <choose-payment ref="choosePayment" :monthId="monthId" :jumpUrl="jumpUrl" :isMonthPay="true" @closePaymentMethod="closePaymentMethod" />
     <u-toast ref="uToast" />
   </view>
 </template>
 
 <script>
-import { getEnvIsWx } from '@/utils/judgEnvironment.js';
-import $wxPay from '@/utils/wxPay.js';
+import ChoosePayment from '../choosePayment/choosePayment.vue';
 export default {
+  components: {
+    ChoosePayment
+  },
   data() {
     return {
       startTime: '',
@@ -138,7 +90,6 @@ export default {
         month: 1,
         dateRange: ''
       },
-      label: '',
       payWayPop: false,
       jumpUrl: undefined,
       monthlyContent: '',
@@ -149,7 +100,7 @@ export default {
       monthlyRuleObj: {},
       freeMonthNum: 0,
       radioCurrent: '',
-      orderMoney: '',
+      orderMoney: ''
     };
   },
   watch: {
@@ -162,34 +113,36 @@ export default {
     }
   },
   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);
+      this.getMonthInfo();
     } else if (page.roadNo) {
       this.roadNo = page.roadNo;
       this.type = 'road';
-      this.getMonthInfo(this.roadNo);
+      this.getMonthInfo();
     } else if (page.vehicleNo && page.parkNo) {
       this.parkNo = page.parkNo;
       this.vehicleNo = page.vehicleNo;
       this.type = 'park';
-      this.getMonthInfo(this.parkNo, this.vehicleNo);
+      this.getMonthInfo();
     } else if (page.parkNo) {
       this.parkNo = page.parkNo;
       this.type = 'park';
-      this.getMonthInfo(this.parkNo);
+      this.getMonthInfo();
     }
     if (page.monthId) {
       this.monthId = page.monthId;
-      this.payWayPop = true;
+      // this.payWayPop = true;
     }
     if (page.roadNo) {
-      this.monthlyRuleDetails(page.roadNo);
+      this.monthlyRuleDetails();
     }
+    // if (page.parkNo) {
+    //   this.monthlyRuleDetails();
+    // }
     const baseUrl = window.location.href.split('#')[0];
     let jumpUrl = baseUrl + '#/pages/center/monthly/monthly?type=' + this.type;
     this.jumpUrl = jumpUrl;
@@ -202,7 +155,7 @@ export default {
      * */
     getMonthRange(date, monthNum) {
       let Date1 = this.lastActiveDate;
-      Date1 = new Date(Date1);
+      Date1 = new Date(date || Date1);
       const year = Date1.getFullYear();
       const month = Date1.getMonth() + 1;
       const day = Date1.getDate();
@@ -261,24 +214,22 @@ export default {
     carLicenseListConfirm(item) {
       this.form.carLicense = item[0];
       this.vehicleNo = item[0].label;
-      this.getMonthInfo(this.roadNo, this.vehicleNo);
+      this.getMonthInfo();
     },
     /**
      * 获取包月信息
      * @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;
-      }
+    getMonthInfo() {
+      let paramsObj = {
+          park: 'parkNo',
+          road: 'roadNo'
+        },
+        params = {
+          vehicleNo: this.vehicleNo
+        };
+      params[paramsObj[this.type]] = this[paramsObj[this.type]];
       this.$u.api
         .monthInfo(params)
         .then((res) => {
@@ -306,6 +257,11 @@ export default {
             } else {
               this.form.carLicense = this.carLicenseList[0];
             }
+            if (this.monthId) {
+              this.$nextTick(() => {
+                this.$refs['choosePayment'].openPopup({ payAmount: Number(this.orderMoney) }, 'single', this.type);
+              });
+            }
           }
         })
         .catch((err) => {
@@ -315,25 +271,24 @@ export default {
     /**
      * 获取包月规则详情
      * @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);
-          }
-        });
+    monthlyRuleDetails() {
+      let paramsObj = {
+          park: 'parkNo',
+          road: 'roadNo'
+        },
+        params = {};
+      params[paramsObj[this.type]] = this[paramsObj[this.type]];
+      this.$u.api.monthlyRuleDetailsApi(params).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);
@@ -348,27 +303,30 @@ export default {
      * @param {any} roadNo
      * @returns {any}
      */
-    submit(roadNo) {
+    submit() {
       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;
-      }
+      let paramsObj = {
+          park: 'parkNo',
+          road: 'roadNo'
+        },
+        params = {
+          vehicleNo: this.form.carLicense.label,
+          energyType: this.form.carLicense.energyType,
+          monthStartTime: this.monthStartTime,
+          monthEndTime: this.monthEndTime,
+          monthCount: this.form.month
+        };
+      params[paramsObj[this.type]] = this[paramsObj[this.type]];
       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;
+            // this.payWayPop = true;
+            this.$nextTick(() => {
+              this.$refs['choosePayment'].openPopup({ payAmount: Number(this.orderMoney) }, 'single', this.type);
+            });
           } else {
             this.$refs.uToast.show({
               title: res.msg,
@@ -385,101 +343,6 @@ export default {
           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
@@ -508,12 +371,6 @@ export default {
           });
         });
     },
-    cancel() {
-      this.radioCurrent = '';
-      this.orderMoney = '';
-      this.payWayPop = false;
-      this.jumpMonthList();
-    },
     jumpMonthList() {
       this.$u.route({
         url: '/pages/center/monthly/monthly',
@@ -524,39 +381,11 @@ export default {
       });
     },
     /**
-     * 选中支付类型
-     * @date 2023-02-17
-     * @param {any} {detail}
-     * @returns {any}
+     * @description: 关闭支付弹框
+     * @return {*}
      */
-    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();
+    closePaymentMethod() {
+      if (this.monthId) this.jumpMonthList();
     }
   },
   computed: {

pages/handleMonthly/handleMonthly20230315.vue

@@ -0,0 +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
+      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,
+      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';
+</style>