From ce32469aa73a5926e0b35c053e5b8e5f9a5d850d Mon Sep 17 00:00:00 2001
From: kongdeqiang <123456>
Date: 星期三, 24 十二月 2025 17:35:18 +0800
Subject: [PATCH] feat: 修改支付页面
---
src/components/page/IndexXTYH.vue | 115 +++++++++++++++++++++++++++++++++------------------------
1 files changed, 66 insertions(+), 49 deletions(-)
diff --git a/src/components/page/IndexXTYH.vue b/src/components/page/IndexXTYH.vue
index 6df9290..97fb194 100644
--- a/src/components/page/IndexXTYH.vue
+++ b/src/components/page/IndexXTYH.vue
@@ -1,11 +1,13 @@
<template>
<div class="weizhang-box" v-loading="dataLoading">
<!-- 棣栧睆楠ㄦ灦灞忥紙鍒濆鍖栧畬鎴愬墠鏄剧ず锛� -->
- <div class="skeleton" v-if="!initCompleted">
- <div class="skeleton-top"></div>
- <div class="skeleton-form">
- <div class="skeleton-form-item" v-for="i in 6" :key="i"></div>
- <div class="skeleton-btn"></div>
+ <div class="loading-tips" v-if="!initCompleted">
+ <div class="tips-text">璇风◢鍚�...</div>
+ <!-- 鍙�夛細鍔犱釜鍔犺浇鍔ㄧ敾鍦嗙偣 -->
+ <div class="loading-dots">
+ <span></span>
+ <span></span>
+ <span></span>
</div>
</div>
<div class="weizhang-main-box" v-else>
@@ -36,8 +38,10 @@
{{this.statisticData.code}}
<!--<el-input v-model="statisticData.code" readonly></el-input>-->
</el-form-item>
- <el-form-item v-if="isShowjiaofei" class="weizhang-footer-box" style="display: flex;justify-content: center;margin-top: 4.498vh" label-width="0" v-show="showFlag">
- <el-button class="jiaofei-btn" type="primary" @click="pay()" :loading="payFlag">鍘荤即璐�</el-button>
+ <el-form-item v-if="isShowjiaofei" class="weizhang-footer-box" style="margin-top: 4.498vh" label-width="0" v-show="showFlag">
+ <div style="flex: 1; text-align: center;">
+ <el-button class="jiaofei-btn" type="primary" @click="pay()" :loading="payFlag">鍘荤即璐�</el-button>
+ </div>
</el-form-item>
</el-form>
<el-form
@@ -50,10 +54,12 @@
label="鏃� 鐗� 杞� 杈� 鏌� 璇�">
<el-input prefix-icon="el-icon-search" style="margin-top: 20px;border: solid 1px #ccc!important;" v-model="carNo" placeholder="璇疯緭鍏ユ墜鏈哄彿"></el-input>
</el-form-item>
- <el-form-item class="weizhang-footer-box" style="display: flex;justify-content: center;margin-top: 5.498vh" label-width="0">
- <el-button
- style="borderColor:'none';background:#121215e0 "
- class="jiaofei-btn" type="primary" @click="noCarOut()" v-show="showFlag">鏌ヨ</el-button>
+ <el-form-item class="weizhang-footer-box" style="margin-top: 5.498vh" label-width="0">
+ <div style="flex: 1; text-align: center;">
+ <el-button
+ style="borderColor:'none';background:#121215e0 "
+ class="jiaofei-btn" type="primary" @click="noCarOut()" v-show="showFlag">鏌ヨ</el-button>
+ </div>
</el-form-item>
</el-form>
@@ -383,25 +389,27 @@
} else {
this.$message.error(res.msg || '鏀粯楠岃瘉澶辫触锛岃閲嶈瘯', 3000);
}
+ this.paying = false;
},
err => {
this.payFlag = false;
this.$message.error('缃戠粶寮傚父锛岃閲嶈瘯', 3000);
+ this.paying = false;
}
- ).finally(() => {
- this.paying = false;
- });
+ )
},
againPay() {
+ console.log('this.paying=', this.paying);
if (this.paying) return;
this.paying = true;
this.againDialogVisible = false;
this.dataLoading = true;
- this.parkXT(this.outParkId).finally(() => {
- this.dataLoading = false;
- this.paying = false;
- });
+ this.parkXT(this.outParkId)
+ // .finally(() => {
+ // this.dataLoading = false;
+ // this.paying = false;
+ // });
},
parkXT(outParkId) {
this.payNowFlag = true //绔嬪嵆鏀粯loading
@@ -423,6 +431,9 @@
})
} catch (err) {
this.payNowFlag = false;
+ } finally {
+ this.dataLoading = false;
+ this.paying = false;
}
},
noCarOut(){
@@ -597,45 +608,51 @@
</script>
<style lang="scss" scoped>
-// 鏂板楠ㄦ灦灞忔牱寮�
-.skeleton {
+//楠ㄦ灦灞忔牱寮�
+.loading-tips {
width: 100%;
- padding: 0 5.33vw;
- box-sizing: border-box;
+ height: 80vh; // 鍗犳弧灞忓箷涓昏鍖哄煙
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
- .skeleton-top {
- height: 15vh;
- background: #f5f5f5;
- border-radius: 1.33vw;
- margin-bottom: 3.33vw;
- animation: skeleton-loading 1.5s infinite alternate;
+ .tips-text {
+ font-size: 4.27vw; // 閫傞厤绉诲姩绔瓧鍙�
+ color: #666;
+ margin-bottom: 3vw;
}
- .skeleton-form {
- .skeleton-form-item {
- height: 8vw;
- background: #f5f5f5;
- border-radius: 1.33vw;
- margin-bottom: 3.33vw;
- animation: skeleton-loading 1.5s infinite alternate;
- }
+ // 鍔犺浇鍦嗙偣鍔ㄧ敾锛堝彲閫夛紝澧炲姞鍔ㄦ晥锛�
+ .loading-dots {
+ display: flex;
+ gap: 1.33vw;
- .skeleton-btn {
- height: 12vw;
- background: #f5f5f5;
- border-radius: 6.67vw;
- margin-top: 4.498vh;
- animation: skeleton-loading 1.5s infinite alternate;
+ span {
+ width: 1.87vw;
+ height: 1.87vw;
+ border-radius: 50%;
+ background: #666;
+ animation: dot-flash 1.5s infinite ease-in-out;
+
+ &:nth-child(2) {
+ animation-delay: 0.3s;
+ }
+
+ &:nth-child(3) {
+ animation-delay: 0.6s;
+ }
}
}
+}
- @keyframes skeleton-loading {
- 0% {
- opacity: 0.5;
- }
- 100% {
- opacity: 0.8;
- }
+// 鍔犺浇鍦嗙偣鍔ㄧ敾
+@keyframes dot-flash {
+ 0%, 100% {
+ opacity: 0.3;
+ }
+ 50% {
+ opacity: 1;
}
}
--
Gitblit v1.9.1