parking_h5/pages/handleMonthly/handleMonthly20230315.vue

<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.weixinPay(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>