From 7e13c9523c9dec70c7647654cd043aa84a7a9ae2 Mon Sep 17 00:00:00 2001
From: 819527061@qq.com <123456>
Date: 星期二, 07 一月 2025 16:12:56 +0800
Subject: [PATCH] 支付成功和失败页面

---
 src/components/page/MonthFeePay.vue |   92 +++++++++++++++++++++++++++++++++------------
 1 files changed, 67 insertions(+), 25 deletions(-)

diff --git a/src/components/page/MonthFeePay.vue b/src/components/page/MonthFeePay.vue
index 00fc28c..9f59340 100644
--- a/src/components/page/MonthFeePay.vue
+++ b/src/components/page/MonthFeePay.vue
@@ -3,12 +3,12 @@
       <div class="weizhang-main-top">
         <h1 class="title">鏈堢杞﹀姙鐞�</h1>
       </div>
-        <div class="weizhang-main-box">
+      <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-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,18 +162,7 @@
           })
         },
         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涓巖emainder涓嶇浉绛夛紝姝ゆ椂鐨勬儏鍐垫槸Date.setMonth()鏂规硶鑷姩澶勭悊浜嗘湀鏈棩鏈熷悜鍚庨『寤跺埌涓嬩釜鏈堬紝灏嗗叾璁剧疆涓轰笂涓湀鐨勬渶鍚庝竴澶╋紝鍚﹀垯涓嶈繘琛屽鐞�
-              }
-              return newDate;
-            },
-            pay(){
+          pay(){
               this.$refs.statisticData.validate((valid) => {
                 if(valid) {
                   this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/monthFeePay/pay', this.statisticData, res => {
@@ -166,8 +180,6 @@
                       }else {
                         this.startTime = ''
                         this.endTime = ''
-                        this.$message.error(res.msg)
-                        console.log('鎴戣繘鏉ヤ簡----------------')
                       }
                     }else {
 
@@ -178,7 +190,7 @@
                 }
               })
             },
-          getYuezuMoney() {
+          getYuezuMoney() {  //鑾峰彇闇�瑕佺殑鏈堢鐨刴oney
             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涓巖emainder涓嶇浉绛夛紝姝ゆ椂鐨勬儏鍐垫槸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{
+        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;

--
Gitblit v1.9.1