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 ++++++++---
src/components/page/components/TKeyword.vue | 334 +++++++++++++++++++++++++++++++++++++++++
2 files changed, 401 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;
diff --git a/src/components/page/components/TKeyword.vue b/src/components/page/components/TKeyword.vue
new file mode 100644
index 0000000..c969b68
--- /dev/null
+++ b/src/components/page/components/TKeyword.vue
@@ -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>
--
Gitblit v1.9.1