feat: 出场增加缴费状态查询

kongdeqiang

2025-02-20 105128d7780861f699a3261fdad68804fe5b7c80

 src/components/page/MonthFeePay.vue

@@ -1,14 +1,14 @@
<template>
    <div class="weizhang-box">
      <div class="weizhang-main-top">
        <h1 class="title">月租车办理</h1>
      </div>
        <div class="weizhang-main-box">
    <div class="weizhang-box yuezucard-wrap">
<!--      <div class="weizhang-main-top">-->
<!--        <h1 class="title">月租车办理</h1>-->
<!--      </div>-->
      <div class="weizhang-main-box">
            <div class="weizhang-main-bootom">
                <div class="weizhang-main-form">
                    <el-form label-width="100px" :model="statisticData" ref="statisticData" :rules="rules" label-position="left">
                    <el-form label-width="110px" :model="statisticData" ref="statisticData" :rules="rules" label-position="left">
                        <el-form-item label="车牌号：" style="margin-left: 25px;" prop="carNo">
                            <el-input v-model="statisticData.carNo" ></el-input>
                            <el-input readonly @focus="isShow=true" v-model="statisticData.carNo" ></el-input>
                        </el-form-item>
                        <el-form-item label="手机号：" style="margin-left: 25px;" prop="phone">
                            <el-input v-model="statisticData.phone" ></el-input>
@@ -16,14 +16,14 @@
                        <el-form-item label="车主姓名：" style="margin-left: 25px;" prop="name">
                            <el-input v-model="statisticData.name" ></el-input>
                        </el-form-item>
                        <el-form-item label="选择全部：" style="margin-left: 25px;" prop="allFlag">
                          <el-select v-model="statisticData.allFlag" :onchange="changeAll">
                        <el-form-item label="选择全部：" style="margin-left: 25px;" prop="type">
                          <el-select v-model="statisticData.type" :onchange="changeAll">
                            <el-option label="单个" :value=0></el-option>
                            <el-option label="全部" :value=1></el-option>
                          </el-select>
                        </el-form-item>
                      <el-form-item v-if="statisticData.allFlag == 0" label="停车场：" style="margin-left: 25px;" prop="parkId">
                        <el-select v-model="statisticData.parkId" @onchange="changePark">
                      <el-form-item v-if="statisticData.type == 0" label="停车场：" style="margin-left: 25px;" prop="parkId">
                        <el-select v-model="statisticData.parkId" @change="changePark">
                          <el-option v-for="item in table1" :key="item.id" :label="item.name" :value="item.id + ''" ></el-option>
                        </el-select>
                      </el-form-item>
@@ -33,10 +33,14 @@
                    </el-form>
                </div>
                <div class="yuezu-box" v-if="searchShow">
                  <div class="current-box" v-if="startTime && endTime">
                  <div>
                    <div class="current-box" v-if="startTime && endTime">月票剩余时间：<span class="utilTime">{{untilToday}}天（{{endTime}} 结束）</span></div>
                    <div class="current-box" v-else>月票剩余时间：暂未开通月票</div>
                  </div>
<!--                  <div class="current-box" v-if="startTime && endTime">
                    <span class="title">当前使用时间：</span>
                      {{startTime}} - {{endTime}}
                  </div>
                  </div>-->
                  <div class="yuezuCard">
                    <div class="yuezu-line">
                      <div class="title">
@@ -77,21 +81,39 @@

            </div>
        </div>

      <t-keyword
          :isShow="isShow"
          @ok="isShow=false"
          @cancel="isShow=false"
          @inputchange="inputchange"
          :finalValue="statisticData.carNo"
      />
    </div>
</template>

<script>
import {isMobile} from "@/utils/validate";
import TKeyword from "@/components/page/components/TKeyword";

export default {
        name: 'dashboard',
        components: {
          TKeyword,
        },
        data() {
            return {
                isShow: false,
                ticketId:"",
                table1:[],
                type:null,
                code:null,
                id:null,
                statisticData:{
                  allFlag:0
                  type:0,
                  carNo:'',
                  parkId:'',
                  phone:'',
                  name:'',
                },
                showFlag:true,
                activeIndex:'',
@@ -105,7 +127,7 @@
                yueZuObj:{},
                rules: {
                  carNo: [
                    { required: true, message: '请输入车牌号', trigger: 'blur' },
                    { required: true, message: '请输入车牌号', trigger: ['blur','change'] },
                  ],
                  phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
@@ -123,8 +145,41 @@
                }
            }
        },
        computed: {
          untilToday() {
            if(this.endTime) {
              let toady = new Date()
              let cur = this.$moment(toady).format('YYYY-MM-DD')
              return this.getDayDifference(cur,this.endTime)
            }
          }
        },
        created(){
          document.title = "月租车办理";
          let ua = window.navigator.userAgent.toLowerCase();
          //判断是不是微信
          if (ua.match(/MicroMessenger/i) == "micromessenger") {
            // 微信
            this.type = 0
          }
          //判断是不是支付宝
          if (ua.match(/AlipayClient/i) == "alipayclient") {
            //支付宝
            this.type = 1
          }
          if(this.type == null){
            this.$message.error("请用微信或支付宝扫描二维码")
            return;
          }
          var url = window.location.href;
          url = decodeURIComponent(url)
          var count = url.split('?').length-1;
          if(count >1){  //获取用户信息后跳回来本页面
            let data = this.getCodeFromUrl(url)
            window.location.href = `http://hesuancj.cn/#/MonthFeePay?code=${encodeURIComponent(data.code)}&state=STATE&id=${encodeURIComponent(data.id)}`
            return;
          }

          var cs = url.split('?')[1];
          var cs_arr = cs.split('&');
          var cs={};
@@ -137,59 +192,48 @@
          })
        },
        methods: {
           getNewDate(date, n) {//date 日期  n 前后相差月份
              let curDate = new Date(date),newDate = new Date(date),diff,remainder //curDate当前日期  newDate计算后日期  diff日期相差月份  remainder n对12的余数
              newDate.setMonth(curDate.getMonth() + n); //设置月份+n
              diff = newDate.getMonth() - curDate.getMonth(); //计算后月与之前月差值
              diff < 0 ? diff += 12: diff; //如果差值小于12 对其+12
              n > 0 ? remainder = n % 12 : remainder = n + 12 * Math.ceil((Math.abs(n) /12 )) //n>0时直接对12取余 n<0时，将其加上 n取绝对值后的年份（向上取整）* 12
              if(diff != remainder){
                return new Date(newDate.setMonth(newDate.getMonth(),0)) //如果diff与remainder不相等，此时的情况是Date.setMonth()方法自动处理了月末日期向后顺延到下个月，将其设置为上个月的最后一天，否则不进行处理
              }
              return newDate;
            },
            pay(){
          pay(){
              this.$refs.statisticData.validate((valid) => {
                if(valid) {
                  this.searchShow = true
                  this.activeIndex = ''  //重置
                  this.money = null
                  this.compStartTime = ''
                  this.compEndTime = ''
                  this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/monthFeePay/pay', this.statisticData, res => {
                    console.log(res,'res====')
                    if(res.code == 0){
                      //未查询到月票，可正常缴费
                      if(res.data) {
                        this.startTime = res.data.startTime
                        this.endTime = res.data.endTime
                      }else {
                        this.startTime = ''
                        this.endTime = ''
                        this.$message.error(res.msg)
                        console.log('我进来了----------------')
                      }
                    }else {

                    }
                  })

                  this.getYuezuMoney()
                }
              })
            },
          getYuezuMoney() {
          getYuezuMoney() {  //获取需要的月租的money
            let params = {
              parkId:this.statisticData.parkId,
              type:this.statisticData.allFlag
            }
            this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/whiteListRule/getByPark', params, res => {
              console.log(res,'res====月租')
              if(res.code == 0){
                 this.yueZuObj = res.data
              }else {

            this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/whiteListRule/getByPark', params, res => {
              console.log(res,'res====111')
              if(res.code == 0){
                this.yueZuObj = res.data
                this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/monthFeePay/pay', this.statisticData, res => {
                  console.log(res,'res====')
                  if(res.code == 0){
                    this.searchShow = true
                    this.activeIndex = ''  //重置
                    this.money = null
                    this.compStartTime = ''
                    this.compEndTime = ''
                    //未查询到月票，可正常缴费
                    if(res.data) {
                      this.startTime = res.data.startTime
                      this.endTime = res.data.endTime
                    }else {
                      this.startTime = ''
                      this.endTime = ''
                    }
                  }else {

                  }
                })
              }else {
                this.searchShow = false
                this.$message.error(res.msg)
              }

            })
          },
          handleSelect(key) {
@@ -260,8 +304,151 @@
              }
            }
          },
          changePark(){
          // 输入车牌号
          inputchange(val, maxLength) {
            console.log(val,'0000',maxLength)
            if (this.statisticData.carNo && this.statisticData.carNo.length >= maxLength && val !== 'delete') {
              return false
            }
            if (val === 'delete') {
              this.statisticData.carNo = this.statisticData.carNo.slice(0, this.statisticData.carNo.length - 1)
            } else {
              this.statisticData.carNo += val.toUpperCase()
            }
          },
          getNewDate(date, n) {//date 日期  n 前后相差月份 （相差的月份）
            let curDate = new Date(date),newDate = new Date(date),diff,remainder //curDate当前日期  newDate计算后日期  diff日期相差月份  remainder n对12的余数
            newDate.setMonth(curDate.getMonth() + n); //设置月份+n
            diff = newDate.getMonth() - curDate.getMonth(); //计算后月与之前月差值
            diff < 0 ? diff += 12: diff; //如果差值小于12 对其+12
            n > 0 ? remainder = n % 12 : remainder = n + 12 * Math.ceil((Math.abs(n) /12 )) //n>0时直接对12取余 n<0时，将其加上 n取绝对值后的年份（向上取整）* 12
            if(diff != remainder){
              return new Date(newDate.setMonth(newDate.getMonth(),0)) //如果diff与remainder不相等，此时的情况是Date.setMonth()方法自动处理了月末日期向后顺延到下个月，将其设置为上个月的最后一天，否则不进行处理
            }
            return newDate;
          },
          getDayDifference(date1, date2) {  //相差的天数
              const millisecondsPerDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
              const timeDifference = Math.abs(new Date(date2).getTime() - new Date(date1).getTime()); // 获取两个日期的毫秒数差值
              const dayDifference = Math.round(timeDifference / millisecondsPerDay); // 将毫秒数差值转换为天数
              return dayDifference;
          },
          changePark(val){
            console.log(val,'改变停车场---')
            this.statisticData.parkId = val
            this.pay()
          },
          /**
           * 解析微信redirect_uri地址中的code
           */
          getCodeFromUrl (cur_url) {
            let index = cur_url.split('?')[1]
            let index2 = cur_url.split('?')[2]
            let code = null
            let id = null
            let data = {}
            let paramStr =index.split('&');

            if(paramStr.length>1) {
              code = paramStr[0].split('=')[1]
              id = index2.split('=')[1]
            }else {
              id = paramStr[0].split('=')[1]
              code = index2.split('&')[0].split('=')[1]
            }
            data.code = code
            data.id = id
            return data
          },
          getCode(){   //获取用户微信登录信息
            this.statisticData.startTime = this.startTime
            this.statisticData.endTime = this.endTime
            this.statisticData.money  = this.money

            if(this.type == 0 ){
              //微信，获取code
              if(this.code==null||this.code==""){
                var url = encodeURIComponent("http://hesuancj.cn/#/MonthFeePay?id="+this.statisticData.parkId);
                window.location.href ="https://open.weixin.qq.com/connect/oauth2/authorize?" +
                    "appid=wx46e756aed958f895&redirect_uri="+url+"&response_type=code" +
                    "&scope=snsapi_userinfo&state=STATE#wechat_redirect";
              }else{
                this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/monthFeePay/getOpenId', this.statisticData, res => {
                  if(res.code === 0){
                    var param = res.data;
                    // 点击支付时候调用
                    if (typeof WeixinJSBridge === 'undefined') {
                      if (document.addEventListener) {
                        document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(param), false)
                      } else if (document.attachEvent) {
                        document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(param))
                        document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(param))
                      }
                    } else {
                      this.onBridgeReady(param)
                    }

                    this.showFlag = false
                  }else {
                    alert('微信支付调起失败！')
                  }
                })
              }
            }else if(this.type == 1){
              //支付宝，不获取code
              this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/monthFeePay/getAiLi', this.statisticData, res => {
                if(res.code != 0){
                  alert(res.data)
                  this.showFlag = false
                }else {
                  this.$message({
                    message: '2秒后自动跳转到支付页面，防止内外网数据同步延迟，请稍等',
                    type: 'success',
                    duration:2000,
                  });
                  setTimeout(function(){window.location.href = res.msg;},2000);
                  this.showFlag = false;
                }
              })

            }
          },
          onBridgeReady (params) {
            const that = this
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest',
                {
                  appId: params.appId, // 公众号名称，由商户传入
                  timeStamp: params.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                  nonceStr: params.nonceStr, // 支付签名随机串，不长于 32 位
                  package: params.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                  signType: params.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                  paySign: params.paySign // 支付签名
                },
                (res) => {
                  if (res.err_msg === 'get_brand_wcpay_request:ok') {
                    //that.queryOrder() // 这里是查询订单是否支付完成，然后执行成功和失败的业务逻辑
                  } else if (res.err_msg === 'get_brand_wcpay_request:fail') {
                    alert('支付失败！')
                  } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
                    alert('支付取消！')
                  }
                }
            )
          },
          queryOrder() {
            this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/outpark/getById', {id: this.outParkId}, res => {
              if (res.code === 0) {
                let outpark = res.data
                if(outpark.status === 1){
                  window.location.href = "http://hesuancj.cn/#/indexOk?code2="+this.code2
                  return;
                }else {
                  window.location.href = "http://hesuancj.cn/#/indexFail?code2="+this.code2
                  return;
                }
              }
            })
          },
          changeAll(){

@@ -274,6 +461,18 @@


<style lang="scss">
.yuezucard-wrap{
  .el-form-item{
    margin-bottom: 2.5vw!important;
  }
  .el-input__inner{
    height: 5.33vw  /* 40/7.5 */;
    line-height: 5.33vw;
  }
  .el-select{
    width: 100%;
  }
}
    .weizhang-main-bootom{
        .el-input__inner{
            border:none;
@@ -354,7 +553,7 @@
    width: 100%;
    display: flex;
    flex-direction: column;
    padding:5.33vw  /* 40/7.5 */;
    padding: 0 5.33vw  /* 40/7.5 */  5.33vw  /* 40/7.5 */  5.33vw  /* 40/7.5 */;
}
.weizhang-main-top{
    display: flex;
@@ -370,8 +569,8 @@
    .title{
      font-size: 4.27vw  /* 32/7.5 */;
      font-weight: bolder;
      height: 10.67vw  /* 80/7.5 */;
      line-height: 10.67vw  /* 80/7.5 */;
      height: 11.73vw  /* 88/7.5 */;
      line-height: 11.73vw  /* 88/7.5 */;
    }
    .money{
        font-size: 6.93vw  /* 52/7.5 */;
@@ -393,9 +592,10 @@
      flex-direction: column;
      margin-top: 8vw  /* 30/7.5 */;
      .current-box{
        .title{
        margin-left: 3.33vw  /* 25/7.5 */;
        .utilTime{
          font-weight: bolder;
          margin-left: 3.33vw  /* 25/7.5 */;
          color: #ff423b;
        }
        font-size: 3.73vw  /* 28/7.5 */;
        color: #000;