支付成功和失败页面

819527061@qq.com

2025-01-07 7e13c9523c9dec70c7647654cd043aa84a7a9ae2

支付成功和失败页面

 src/components/page/MonthFeePay.vue

@@ -8,7 +8,7 @@
                <div class="weizhang-main-form">
                    <el-form label-width="100px" :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 @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>
@@ -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,33 @@

            </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:[],
                statisticData:{
                  allFlag:0
                  allFlag:0,
                  carNo:'',
                },
                showFlag:true,
                activeIndex:'',
@@ -105,7 +121,7 @@
                yueZuObj:{},
                rules: {
                  carNo: [
                    { required: true, message: '请输入车牌号', trigger: 'blur' },
                    { required: true, message: '请输入车牌号', trigger: ['blur','change'] },
                  ],
                  phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
@@ -123,6 +139,15 @@
                }
            }
        },
        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(){
          var url = window.location.href;
          var cs = url.split('?')[1];
@@ -137,17 +162,6 @@
          })
        },
        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(){
              this.$refs.statisticData.validate((valid) => {
                if(valid) {
@@ -166,8 +180,6 @@
                      }else {
                        this.startTime = ''
                        this.endTime = ''
                        this.$message.error(res.msg)
                        console.log('我进来了----------------')
                      }
                    }else {

@@ -178,7 +190,7 @@
                }
              })
            },
          getYuezuMoney() {
          getYuezuMoney() {  //获取需要的月租的money
            let params = {
              parkId:this.statisticData.parkId,
              type:this.statisticData.allFlag
@@ -258,6 +270,35 @@
                this.compEndTime = this.$moment(a).format('YYYY-MM-DD')
              }
            }
          },
          // 输入车牌号
          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(){

@@ -353,7 +394,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;
@@ -392,9 +433,10 @@
      flex-direction: column;
      margin-top: 8vw  /* 30/7.5 */;
      .current-box{
        .title{
          font-weight: bolder;
          margin-left: 3.33vw  /* 25/7.5 */;
        .utilTime{
          font-weight: bolder;
          color: #ff423b;
        }
        font-size: 3.73vw  /* 28/7.5 */;
        color: #000;

 src/components/page/components/TKeyword.vue

New file
@@ -0,0 +1,334 @@
<template>
  <div class="panel-wrap" v-if="isShow" data-value="exit" @click="colse_da">
    <div class="mask_layer" v-if="isShowMask"></div>
    <div class="vehicle-panel" :style="{background:backgroundColor}" @click.stop>
      <div class="topItem">
        <div class="check" @click.stop="check">中/英切换</div>
        <div class="contentShow" v-if="finalValue">最终值：{{finalValue}}</div>
        <div class="exit" :style="{color:cancelColor}" @click.stop="vehicleTap('cancel')">取消</div>
      </div>
      <!--省份简写键盘-->
      <div v-if="keyBoardType === 1">
        <div class="vehicle-panel-row_province">
          <div
              class="vehicle-panel-row-button"
              :style="{border:buttonBorder}"
              v-for="(item,idx) in keyVehicle1"
              @click.stop="vehicleTap(item)"
              :key="idx+item"
          >{{item}}</div>
        </div>
        <div class="vehicle-panel-row_province">
          <div
              class="vehicle-panel-row-button"
              :style="{border:buttonBorder}"
              v-for="(item,idx) in keyVehicle2"
              @click.stop="vehicleTap(item)"
              :key="idx+item"
          >{{item}}</div>
        </div>
        <div class="vehicle-panel-row_province">
          <div
              class="vehicle-panel-row-button"
              :style="{border:buttonBorder}"
              v-for="(item,idx) in keyVehicle3"
              @click.stop="vehicleTap(item)"
              :key="idx+item"
          >{{item}}</div>
        </div>

        <div class="vehicle-panel-row_province">
          <div
              class="vehicle-panel-row-button vehicle-panel-row-button-last"
              @click.stop="vehicleTap(item)"
              v-for="(item,idx) in keyVehicle4"
              :style="{border:buttonBorder}"
              :key="idx+item"
          >{{item}}</div>
          <div
              :style="{border:buttonBorder}"
              class="vehicle-panel-row-button vehicle-panel-row-button-img"
          >
            <span class="delete-btn" @click.stop="vehicleTap('delete')">删除</span>
<!--            <van-icon
                class="vehicle-en-button-delete"
                name="close"
                @click.stop="vehicleTap('delete')"
            />-->
          </div>
        </div>
      </div>
      <!--英文键盘  -->
      <div v-else>
        <div class="vehicle-panel-row">
          <div
              class="vehicle-panel-row-button vehicle-panel-row-button-number"
              @click.stop="vehicleTap(item)"
              v-for="(item,idx) in keyNumber"
              :style="{border:buttonBorder}"
              :key="item+idx"
          >{{item}}</div>
        </div>
        <div class="vehicle-panel-row">
          <div
              class="vehicle-panel-row-button"
              :style="{border:buttonBorder}"
              v-for="(item,idx) in keyEnInput1"
              @click.stop="vehicleTap(item)"
              :key="idx+item"
          >{{item}}</div>
        </div>
        <div class="vehicle-panel-row">
          <div
              class="vehicle-panel-row-button"
              :style="{border:buttonBorder}"
              v-for="(item,idx) in keyEnInput2"
              @click.stop="vehicleTap(item)"
              :key="idx+item"
          >{{item}}</div>
          <div
              :style="{border:buttonBorder}"
              class="vehicle-panel-row-button vehicle-panel-row-button-img"
          >
            <span class="delete-btn" @click.stop="vehicleTap('delete')">删除</span>
<!--            <van-icon
                class="vehicle-en-button-delete"
                name="close"
                @click.stop="vehicleTap('delete')"
            />-->
          </div>
        </div>
        <div class="vehicle-panel-row-last">
          <div
              class="vehicle-panel-row-button vehicle-panel-row-button-last"
              @click.stop="vehicleTap(item)"
              :style="{border:buttonBorder}"
              v-for="(item,idx) in keyEnInput3"
              :key="idx+item"
          >{{item}}</div>
          <div
              :style="{border:buttonBorder,backgroundColor:confirmColor}"
              class="vehicle-panel-row-button vehicle-panel-ok"
              @click.stop="vehicleTap('ok')"
          >确定</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TKeyword",
  props: {
    // 是否弹起键盘
    isShow: {
      type: Boolean,
      default: false
    },
    // 取消字体颜色
    cancelColor: {
      type: String,
      default: `#2072ED`
    },
    // 是否显示遮罩
    isShowMask: {
      type: Boolean,
      default: true
    },
    // 是否点击遮罩关闭键盘
    isClickMask: {
      type: Boolean,
      default: true
    },
    // 最大输入长度
    maxLength: {
      type: Number,
      default: 8
    },
    // 确认背景颜色
    confirmColor: {
      type: String,
      default: `#2072ED`
    },
    // 最终显示的值
    finalValue: {
      type: String
    }
  },
  data() {
    return {
      keyVehicle1: ['京', '津', '晋', '冀', '蒙', '辽', '吉', '黑', '沪'],
      keyVehicle2: ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
      keyVehicle3: ['粤', '桂', '琼', '渝', '川', '贵', '云', '藏'],
      keyVehicle4: ['陕', '甘', '青', '宁', '新', 'W'],
      keyNumber: '1234567890',
      keyEnInput1: 'QWERTYUP', // 没有IO
      keyEnInput2: 'ASDFGHJKL',
      keyEnInput3: 'ZXCVBNM',
      backgroundColor: '#fff',
      keyBoardType: 1,
      buttonBorder: '1px solid #ccc'
    }
  },
  methods: {
    vehicleTap(event) {
      console.log(event)
      if (/^[\u4e00-\u9fa5]/.test(event)) {
        this.keyBoardType = 2
      }
      switch (event) {
        case 'delete':
          this.$emit('delete')
          this.$emit('inputchange', event, this.maxLength)
          break
        case 'ok':
          this.$emit('ok')
          break
        case 'cancel':
          this.$emit('cancel')
          break
        default:
          this.$emit('inputchange', event, this.maxLength)
      }
    },
    // 点击遮罩关闭键盘mask-layer
    colse_da() {
      if (!this.isClickMask) {
        return
      }
      this.$emit('cancel')
    },
    check() {
      if (this.keyBoardType === 1) {
        this.keyBoardType = 2
      } else if (this.keyBoardType === 2) {
        this.keyBoardType = 1
      }
    }
  }
}
</script>

<style lang="scss" scoped>
:host {
  width: 100%;
}

.panel-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
.mask_layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}
.vehicle-panel {
  width: 100%;
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1000;
  background: #fff;
  padding-bottom: 10px;
}
.vehicle-panel-row_province {
  display: flex;
  justify-content: center;
  align-items: center;
}
.vehicle-panel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.vehicle-panel-row-last {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.vehicle-panel-row-button {
  background-color: #fff;
  margin: 0 1vw;
  margin-top: 8px;
  width: 8.8vw;
  height: 40px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
  .delete-btn{
    color: #fff;
  }
.vehicle-panel-row-button-number {
  background-color: #eee;
}
.vehicle-panel-row-button-last {
  width: 8.8vw;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vehicle-hover {
  background-color: #ccc;
}
.vehicle-panel-row-button-img {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #dd6161;
  border: 1px solid #dd6161;
}
.vehicle-en-button-delete {
  width: 8.8vw;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vehicle-panel-ok {
  background-color: #355db4;
  color: #fff;
  width: 50px;
  height: 40px;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.topItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  font-size: 16px;
  border: 1px solid #ebedf0;
.check {
  margin-left: 10px;
  color: #355db4;
  flex: 0.5;
}
.exit {
  margin-left: 0;
  margin-right: 10px;
  flex: 0.5;
  text-align: right;
}
.contentShow {
  text-align: center;
  flex: 1;
}
}
}
</style>