From 7f1be38a5488f7066e608379e3ea17d2b6838bca Mon Sep 17 00:00:00 2001
From: 1012414140@qq.com <1012414140@qq.com>
Date: 星期三, 24 十二月 2025 16:58:27 +0800
Subject: [PATCH] feat: 按钮的样式
---
src/components/page/IndexXTYH.vue | 357 ++++++++++++++++++++++++++++++++++------------------------
1 files changed, 209 insertions(+), 148 deletions(-)
diff --git a/src/components/page/IndexXTYH.vue b/src/components/page/IndexXTYH.vue
index 98f676c..bddee47 100644
--- a/src/components/page/IndexXTYH.vue
+++ b/src/components/page/IndexXTYH.vue
@@ -1,11 +1,14 @@
<template>
<div class="weizhang-box" v-loading="dataLoading">
- <!--<div class="weizhang-header">-->
- <!--<div class="iconfont leftjiantou"></div>-->
- <!--<div class="text"><h1>宄板嘲鐭垮尯缁煎悎琛屾斂鎵ф硶灞�</h1></div>-->
- <!--<div class="right"></div>-->
- <!--</div>-->
- <div class="weizhang-main-box">
+ <!-- 棣栧睆楠ㄦ灦灞忥紙鍒濆鍖栧畬鎴愬墠鏄剧ず锛� -->
+ <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>
+ </div>
+ <div class="weizhang-main-box" v-else>
<div class="weizhang-main-top">
<!-- <img class="logoPhone" src="../../assets/images/logoImg.png" alt="">-->
<span class="weizhang">鍋滆溅鏀惰垂</span>
@@ -33,8 +36,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
@@ -47,10 +52,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>
@@ -58,6 +65,8 @@
</div>
</div>
+
+
<div class="moreCarNum" v-if="pipaiCarNumShow">
<h1 class="title">浠ヤ笅鏄笌鎮ㄨ溅鐗屽彿鐩镐技鐨勫叆鍦鸿褰�</h1>
<div class="moreCarNum-main">
@@ -110,11 +119,15 @@
</div>
<div class="wx-img-box">
<div class="wx-img-l">
- <img src="../../assets/images/wxIcon.png" alt="">
+ <img src="../../assets/images/wxIcon.png" alt="" style="width: 5.33vw;object-fit: contain;">
<h1>寰俊鏀粯</h1>
</div>
<div class="wx-img-r">
- <img src="../../assets/images/duigouIcon.png" alt="">
+ <!-- 鏇夸唬 duigouIcon.png -->
+ <svg width="30" height="30" viewBox="0 0 24 24" fill="#4CAF50">
+ <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
+ </svg>
+<!-- <img src="../../assets/images/duigouIcon.png" alt="">-->
</div>
</div>
</div>
@@ -141,7 +154,8 @@
</span>
</el-dialog>
</div>
- <div class="pipeicarNum-dialog-box">
+
+ <div class="pipeicarNum-dialog-box" v-if="pipeicardialogVisible">
<el-dialog
title="璇烽�夋嫨璇嗗埆姝ｇ‘鐨勮褰�"
:close-on-click-modal="false"
@@ -159,15 +173,25 @@
</template>
<script>
-import wx from 'weixin-js-sdk'
-import TishiDialog from "@/components/page/TishiDialog";
-import TishiDialog2 from "@/components/page/TishiDialog2";
+import { Button, Form, FormItem, Table, TableColumn, Dialog, Input, Loading, Message } from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import fa from "element-ui/src/locale/lang/fa"; // 鎸夐渶寮曞叆鏍峰紡锛堜粎蹇呰鏍峰紡锛�
+// 鏇挎崲鍘熸湁鐨刬mport
+const TishiDialog = () => import('@/components/page/TishiDialog');
+const TishiDialog2 = () => import('@/components/page/TishiDialog2');
export default {
name: 'dashboard',
components: {
TishiDialog,
TishiDialog2,
-
+ ElButton: Button,
+ ElForm: Form,
+ ElFormItem: FormItem,
+ ElTable: Table,
+ ElTableColumn: TableColumn,
+ ElDialog: Dialog,
+ ElInput: Input,
+ ElLoading: Loading
},
data() {
return {
@@ -188,23 +212,35 @@
statisticData:{
},
+ initCompleted: false,
showFlag:true,
+ querying:false,
+ paying:false,
showFlag2:true,
status3:0,
carNo:"",
code2:"",
code:"",
dataLoading:false, //鏁版嵁鍥炴樉鍓嶅姞loading锛岄槻姝㈡病鏈夋暟鎹� 鐐瑰嚮鈥樼珛鍗虫敮浠樻寜閽��
+ wx: null,
}
},
created(){
+ this.$message = Message; // 鎸傝浇鍏ㄥ眬Message锛岄伩鍏嶉噸澶嶅紩鍏�
this.code = ''
this.code2 = ''
let ua = window.navigator.userAgent.toLowerCase();
+ this.querying = false; // 鏂板锛氭煡璇㈢姸鎬侀攣
+ this.paying = false; // 鏂板锛氭敮浠樼姸鎬侀攣
+ this.initCompleted = false; // 鏂板锛氶灞忓垵濮嬪寲鐘舵��
//鍒ゆ柇鏄笉鏄井淇�
if (ua.match(/MicroMessenger/i) == "micromessenger") {
// 寰俊
this.type = 0
+ // 鍔ㄦ�佸姞杞藉井淇DK
+ import('weixin-js-sdk').then(wx => {
+ this.wx = wx; // 鎸傝浇鍒板疄渚嬩笂
+ });
}
//鍒ゆ柇鏄笉鏄敮浠樺疂
if (ua.match(/AlipayClient/i) == "alipayclient") {
@@ -216,32 +252,33 @@
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://localhost:8082/#/IndexXTYH39?code="+data.code+"&state=STATE&code2="+data.code2
- window.location.href = `http://hesuancj.cn/#/index2?code=${encodeURIComponent(data.code)}&state=STATE&code2=${encodeURIComponent(data.code2)}`
+ var url = decodeURIComponent(window.location.href);
+ const getUrlParams=(url) => {
+ const params = {};
+ const queryIndex = url.indexOf('?');
+ if (queryIndex === -1) return params;
+ const query = url.slice(queryIndex + 1);
+ query.split('&').forEach(item => {
+ const [key, val] = item.split('=');
+ if (key) params[key] = val || '';
+ });
+ return params;
+ }
+
+ const params = getUrlParams(url);
+ this.code = params.code || '';
+ this.code2 = params.code2 || '';
+
+ // 浼樺寲璺宠浆閫昏緫锛堥伩鍏嶉噸澶嶈烦杞級
+ if (Object.keys(params).length > 2 && params.code && params.code2) {
+ // 浠呭綋鍙傛暟瀹屾暣鏃惰烦杞紙閬垮厤鏃犻檺寰幆锛�
+ window.location.href = `http://hesuancj.cn/#/index2?code=${encodeURIComponent(params.code)}&state=STATE&code2=${encodeURIComponent(params.code2)}`;
return;
}
- var cs = url.split('?')[1];
- var cs_arr = cs.split('&');
- var cs={};
- for(var i=0;i<cs_arr.length;i++){
- cs[cs_arr[i].split('=')[0]] = cs_arr[i].split('=')[1]
- }
- this.code2 = cs.code2;
- this.code = cs.code;
+
//鍒濆鍖栬烦杞� 39 鏈嶅姟鍣�
if(this.code2 == null || this.code2 == ''){
- // this.$message({
- // message: '1绉掑悗鑷姩璺宠浆锛岃绋嶇瓑',
- // type: 'success',
- // duration:1000,
- // });
- window.location.href = "http://hesuancj.cn/#/index2?code2="+cs.code //姝ｅ紡
- // window.location.href = "http://localhost:8082/#/IndexXTYH39?code2="+cs.code //娴嬭瘯鐢ㄧ殑
+ window.location.href = `http://192.168.0.118:8082/#/index2?code2=${params.code || ''}`;
//window.location.href = "http://60.0.121.40:8889/#/IndexXTYH39?code2="+cs.code //娴嬭瘯鐢ㄧ殑
return;
}
@@ -259,32 +296,36 @@
this.dataLoading = true //鍥炴樉鏁版嵁鐨刲oading
this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/outpark/findByBarrierCode2', {code2:this.code2}, res => {
this.statisticData = res.data;
+ this.initCompleted = true; // 鏄剧ず鐪熷疄鍐呭
this.outParkId = this.statisticData.id;
this.status3 = this.statisticData.status3;
this.oldCarNo = this.statisticData.carNo;
this.dataLoading = false
this.payFlag = false
if(!this.statisticData.enterTime) { //娌℃湁鍏ュ満
- this.isShowjiaofei = false
- this.pipaiCarNumShow = true //鍖归厤鍖哄煙鏄剧ず
- this.$byutil.getData(this,this.$systemconfig.basePath + '/ffzf/outpark/getLikeCar',{outParkId:this.outParkId},res => {
- if(res.code == 0) {
- if(res.data.length > 0) {
- this.moreCarNumData = res.data.map(item => {
- return {
- ...item,
- createTime: this.$moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')
- }
- })
- }else {
- this.tishiDialogVisiable = true //鍏ュ満淇℃伅 寮傚父鎻愮ず
- }
- }
- })
-
- }else if(this.statisticData.enterTime && (!this.statisticData.price || this.statisticData.price == 0)) { //閲戦涓�0
- if(this.statisticData.carNo !='_鏃燺' && this.statisticData.carNo!='鏃犺溅鐗�') {
+ if(this.statisticData.carNo =='_鏃燺' || this.statisticData.carNo=='鏃犵墝杞�'){
this.isShowjiaofei = false
+ }else {
+ this.isShowjiaofei = false
+ this.pipaiCarNumShow = true //鍖归厤鍖哄煙鏄剧ず
+ this.$byutil.getData(this,this.$systemconfig.basePath + '/ffzf/outpark/getLikeCar',{outParkId:this.outParkId},res => {
+ if(res.code == 0) {
+ if(res.data.length > 0) {
+ this.moreCarNumData = res.data.map(item => {
+ return {
+ ...item,
+ createTime: this.$moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')
+ }
+ })
+ }else {
+ this.tishiDialogVisiable = true //鍏ュ満淇℃伅 寮傚父鎻愮ず
+ }
+ }
+ })
+ }
+ }else if(this.statisticData.enterTime && (!this.statisticData.price || this.statisticData.price == 0)) { //閲戦涓�0
+ this.isShowjiaofei = false
+ if(this.statisticData.carNo !='_鏃燺' && this.statisticData.carNo!='鏃犵墝杞�') {
this.tishiDialogVisiable2 = true
}
}else {
@@ -326,45 +367,45 @@
})
},
pay(){
- this.payFlag = true; //鍘荤即璐筶oading
- // this.payNowFlag = true;
- // this.showFlag = true
- if(this.status3==1){
- this.$message({
- message: '鎮ㄦ湁杩濈珷鏈鐞嗭紝璇峰厛澶勭悊鎴栬仈绯诲仠杞﹀満绠＄悊浜哄憳',
- type: 'error',
- duration:3000,
- });
+ if (this.paying || this.dataLoading) return; // 闃叉閲嶅鏀粯+鏁版嵁鍔犺浇涓姝�
+ this.paying = true;
+ this.payFlag = true;
+ if (this.status3 === 1) {
+ this.$message.error('鎮ㄦ湁杩濈珷鏈鐞嗭紝璇峰厛澶勭悊鎴栬仈绯诲仠杞﹀満绠＄悊浜哄憳', 3000);
+ this.payFlag = false;
+ this.paying = false;
return;
}
- this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/api/parkJudg', {id:this.outParkId}, res => {
- if(res.code === 0){
- this.payFlag = false; //鍘荤即璐筶oading
- if(res.data == 1) { //1 寮瑰嚭寮规(宸茬即璐规彁绀�)
- this.againDialogVisible = true
- }else {
- // this.dialogVisible = true; //绔嬪嵆鏀粯鐨勫脊妗�
- this.parkXT(this.outParkId) //鍘昏幏鍙栧井淇′俊鎭�
+ this.$byutil.postData(
+ this,
+ `${this.$systemconfig.basePath}/ffzf/api/parkJudg`,
+ { id: this.outParkId },
+ res => {
+ this.payFlag = false;
+ if (res.code === 0) {
+ res.data === 1 ? (this.againDialogVisible = true) : this.parkXT(this.outParkId);
+ } else {
+ this.$message.error(res.msg || '鏀粯楠岃瘉澶辫触锛岃閲嶈瘯', 3000);
+ }
+ },
+ err => {
+ this.payFlag = false;
+ this.$message.error('缃戠粶寮傚父锛岃閲嶈瘯', 3000);
}
- // this.getCode()
- // this.showFlag = false
- }else {
- this.$message({
- message:res.msg,
- type: 'error',
- duration:3000,
- });
- this.payFlag = false;
- }
- })
+ ).finally(() => {
+ this.paying = false;
+ });
+
},
againPay() {
- this.againDialogVisible = false
- this.dataLoading = true //椤甸潰loading鎵撳紑
- this.parkXT(this.outParkId) //鑾峰彇寰俊鐢ㄦ埛淇℃伅
-
- // this.dialogVisible = true //鎵撳紑绔嬪嵆鏀粯寮规
- // this.parkXT(this.outParkId)
+ if (this.paying) return;
+ this.paying = true;
+ this.againDialogVisible = false;
+ this.dataLoading = true;
+ this.parkXT(this.outParkId).finally(() => {
+ this.dataLoading = false;
+ this.paying = false;
+ });
},
parkXT(outParkId) {
this.payNowFlag = true //绔嬪嵆鏀粯loading
@@ -389,26 +430,40 @@
}
},
noCarOut(){
- if(this.oldCarNo == '鏃犺溅鐗�' || this.oldCarNo == '_鏃燺'){
- if(this.carNo){
- this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/car/outParkByPhone', {code2:this.code2,carNo:this.carNo}, res => {
- if(res.code===0){
+ // 闃叉姈锛氶槻姝㈤噸澶嶇偣鍑�
+ if (this.querying) return;
+ this.querying = true;
+
+ const { oldCarNo, carNo, code2 } = this;
+ // 绠�鍖栨潯浠跺垽鏂�
+ if (!['鏃犵墝杞�', '_鏃燺'].includes(oldCarNo)) {
+ this.$message.error('闈炴硶杈撳叆');
+ this.querying = false;
+ return;
+ }
+ if (!carNo.trim()) {
+ this.$message.error('璇疯緭鍏ユ墜鏈哄彿');
+ this.querying = false;
+ return;
+ }
+
+ this.$byutil.postData(
+ this,
+ `${this.$systemconfig.basePath}/ffzf/car/outParkByPhone`,
+ { code2, carNo: carNo.trim() },
+ res => {
+ if (res.code === 0) {
this.statisticData = res.data;
this.outParkId = this.statisticData.id;
+ this.isShowjiaofei = true;
+ this.$message.success('鏌ヨ鎴愬姛');
+ } else {
+ this.$message.error(res.message || '鏌ヨ澶辫触锛岃閲嶈瘯');
}
- })
- }else{
- this.$message({
- message: '璇疯緭鍏ユ墜鏈哄彿',
- type: 'error',
- });
- }
- }else {
- this.$message({
- message: '闈炴硶杈撳叆',
- type: 'error',
- });
- }
+ }
+ ).finally(() => {
+ this.querying = false; // 閲嶇疆鐘舵�侀攣
+ });
},
GetQueryString(name) {
@@ -545,12 +600,49 @@
}
</script>
+<style lang="scss" scoped>
+// 鏂板楠ㄦ灦灞忔牱寮�
+.skeleton {
+ width: 100%;
+ padding: 0 5.33vw;
+ box-sizing: border-box;
+ .skeleton-top {
+ height: 15vh;
+ background: #f5f5f5;
+ border-radius: 1.33vw;
+ margin-bottom: 3.33vw;
+ animation: skeleton-loading 1.5s infinite alternate;
+ }
-<style lang="scss">
-//.el-message{
-// padding: 6.944vh /* 75/10.8 */ 0.78125vw /* 15/19.2 */ 6.944vh /* 75/10.8 */ 1.042vw /* 20/19.2 */;
-//}
+ .skeleton-form {
+ .skeleton-form-item {
+ height: 8vw;
+ background: #f5f5f5;
+ border-radius: 1.33vw;
+ margin-bottom: 3.33vw;
+ animation: skeleton-loading 1.5s infinite alternate;
+ }
+
+ .skeleton-btn {
+ height: 12vw;
+ background: #f5f5f5;
+ border-radius: 6.67vw;
+ margin-top: 4.498vh;
+ animation: skeleton-loading 1.5s infinite alternate;
+ }
+ }
+
+ @keyframes skeleton-loading {
+ 0% {
+ opacity: 0.5;
+ }
+ 100% {
+ opacity: 0.8;
+ }
+ }
+}
+
.weizhang-box{
.el-form-item{
margin-bottom: 3.8vw!important;
@@ -581,17 +673,6 @@
font-weight: 600;
}
}
- .weizhang-footer-box{
- .el-form-item__content{
- width: 100%;
- display: flex;
- justify-content: center;
- }
- .el-button--small{
- padding: 11px 15px;
- font-size: 0.347rem /* 26/75 */;
- }
- }
.dialog-box{
.el-dialog{
bottom: 0;
@@ -599,12 +680,7 @@
left: 0;
margin: 0;
}
- .el-dialog__header{
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 1.87vw /* 14/7.5 */;
+ ::v-deep .el-dialog__header {
background: rgba(103,201,122,0.1);
}
}
@@ -640,12 +716,7 @@
margin-top: 47vh!important;
border-radius: 2.67vw /* 20/7.5 */;
}
- .el-dialog__header{
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 1.87vw /* 14/7.5 */;
+ ::v-deep .el-dialog__header {
background: rgba(103,201,122,0.1);
}
}
@@ -668,9 +739,6 @@
.el-table td, .el-table th{
padding: 2.5vw /* 12/7.5 */ 0;
}
- //.el-table td, .el-table th.is-leaf{
- // border-bottom: 1px solid transparent;
- //}
.el-table::before{
height: 0;
}
@@ -717,10 +785,6 @@
font-size: 0.347rem /* 26/75 */;
}
}
-
-
-</style>
-<style lang="scss" scoped>
.weizhang-box{
height: 100%;
overflow-y: auto;
@@ -806,9 +870,6 @@
}
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
margin-bottom: 10px;
-}
-.weizhang-main-bootom{
- margin-top: 0.333rem /* 25/75 */;
}
.dialog-main-box{
.dialog-main-line{
--
Gitblit v1.9.1