From be39d93049f3986be4e353fab5c1e51668a6fdf2 Mon Sep 17 00:00:00 2001
From: 819527061@qq.com <123456>
Date: 星期二, 07 一月 2025 10:45:35 +0800
Subject: [PATCH] 月租车办理页面
---
src/components/page/MonthFeePay.vue | 318 +++++++++++++++++++++++++++++++++++++++++++++++++----
src/utils/validate.js | 12 ++
2 files changed, 306 insertions(+), 24 deletions(-)
diff --git a/src/components/page/MonthFeePay.vue b/src/components/page/MonthFeePay.vue
index 3dff2b8..9bf3312 100644
--- a/src/components/page/MonthFeePay.vue
+++ b/src/components/page/MonthFeePay.vue
@@ -1,37 +1,78 @@
<template>
<div class="weizhang-box">
+ <div class="weizhang-main-top">
+ <h1 class="title">鏈堢杞﹀姙鐞�</h1>
+ </div>
<div class="weizhang-main-box">
- <div class="weizhang-main-top">
- <h1>鏈堢杞﹀姙鐞�</h1>
- </div>
<div class="weizhang-main-bootom">
<div class="weizhang-main-form">
- <el-form label-width="100px" :model="statisticData" label-position="left">
- <el-form-item label="杞︾墝鍙凤細" style="margin-left: 25px;">
+ <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-form-item>
- <el-form-item label="鎵嬫満鍙凤細" style="margin-left: 25px;">
+ <el-form-item label="鎵嬫満鍙凤細" style="margin-left: 25px;" prop="phone">
<el-input v-model="statisticData.phone" ></el-input>
</el-form-item>
- <el-form-item label="濮撳悕锛�" style="margin-left: 25px;">
+ <el-form-item label="杞︿富濮撳悕锛�" style="margin-left: 25px;" prop="name">
<el-input v-model="statisticData.name" ></el-input>
</el-form-item>
- <el-form-item label="閫夋嫨鍏ㄩ儴锛�" style="margin-left: 25px;">
+ <el-form-item label="閫夋嫨鍏ㄩ儴锛�" style="margin-left: 25px;" prop="allFlag">
<el-select v-model="statisticData.allFlag" :onchange="changeAll">
<el-option label="鍗曚釜" :value=0></el-option>
<el-option label="鍏ㄩ儴" :value=1></el-option>
</el-select>
</el-form-item>
- <el-form-item v-if="statisticData.allFlag == 0" label="鍋滆溅鍦猴細" style="margin-left: 25px;">
- <el-select v-model="statisticData.parkId" :onchange="changePark">
- <el-option v-for="item in table1" :key="item.id" :label="item.name" :value="item.id" ></el-option>
+ <el-form-item v-if="statisticData.allFlag == 0" label="鍋滆溅鍦猴細" style="margin-left: 25px;" prop="parkId">
+ <el-select v-model="statisticData.parkId" @onchange="changePark">
+ <el-option v-for="item in table1" :key="item.id" :label="item.name" :value="item.id + ''" ></el-option>
</el-select>
</el-form-item>
<el-form-item class="weizhang-footer-box" style="display: flex;justify-content: center;margin-top: 4.498vh" label-width="0" v-if="showFlag">
- <el-button class="jiaofei-btn" type="primary" @click="pay()" >鏌ヨ</el-button>
+ <el-button :disabled="isDisabled" class="jiaofei-btn" type="primary" @click="pay()" >鏌ヨ</el-button>
</el-form-item>
</el-form>
+ </div>
+ <div class="yuezu-box" v-if="searchShow">
+ <div class="current-box" v-if="startTime && endTime">
+ <span class="title">褰撳墠浣跨敤鏃堕棿锛�</span>
+ {{startTime}} - {{endTime}}
+ </div>
+ <div class="yuezuCard">
+ <div class="yuezu-line">
+ <div class="title">
+ 閫夋嫨鏃堕棿娈碉細
+ </div>
+ <div class="yuezu-line-right">
+ <el-menu
+ :default-active="activeIndex"
+ @select="handleSelect"
+ class="el-menu-demo"
+ mode="horizontal">
+ <el-menu-item index="1">涓�涓湀</el-menu-item>
+ <el-menu-item index="2">涓変釜鏈�</el-menu-item>
+ <el-menu-item index="3">鍏釜鏈�</el-menu-item>
+ <el-menu-item index="4">涓�骞�</el-menu-item>
+ </el-menu>
+ </div>
+ </div>
+ </div>
+ <div class="current-box">
+ <span class="title">寮�濮嬫椂闂达細</span>
+ {{compStartTime}}
+ </div>
+ <div class="current-box">
+ <span class="title">缁撴潫鏃堕棿锛�</span>
+ {{compEndTime}}
+ </div>
+ <div class="money-box" v-if="money">
+ <div class="money">锟{money}}</div>
+ <div class="money-content">缂磋垂閲戦</div>
+ </div>
+ <div class="yuezu-footer">
+ <el-button v-if="startTime && endTime" class="jiaofei-btn2" type="danger">缁垂</el-button>
+ <el-button v-else class="jiaofei-btn2" type="danger">寮�閫�</el-button>
+ </div>
</div>
</div>
@@ -41,7 +82,9 @@
</template>
<script>
- export default {
+import {isMobile} from "@/utils/validate";
+
+export default {
name: 'dashboard',
data() {
return {
@@ -51,6 +94,33 @@
allFlag:0
},
showFlag:true,
+ activeIndex:'',
+ searchShow:false,
+ startTime:'',
+ endTime:'',
+ compStartTime:'',
+ compEndTime:'',
+ isDisabled: false,
+ money: null,
+ yueZuObj:{},
+ rules: {
+ carNo: [
+ { required: true, message: '璇疯緭鍏ヨ溅鐗屽彿', trigger: 'blur' },
+ ],
+ phone: [
+ { required: true, message: '璇疯緭鍏ユ墜鏈哄彿', trigger: 'blur' },
+ { validator: isMobile, trigger: 'blur' }
+ ],
+ name: [
+ { required: true, message: '璇疯緭鍏ュ鍚�', trigger: 'blur' },
+ ],
+ allFlag: [
+ { required: true, message: '璇烽�夋嫨鍋滆溅鍦轰釜鏁�', trigger: 'change' },
+ ],
+ parkId: [
+ { required: true, message: '璇烽�夋嫨鍋滆溅鍦�', trigger: 'change' },
+ ]
+ }
}
},
created(){
@@ -63,25 +133,133 @@
}
this.statisticData.parkId = cs.id;
this.$byutil.postData(this, this.$systemconfig.basePath+'/ffzf/park/findAll', null, res => {
- this.table1 = res.data;
-
- this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/whiteListRule/getByParkId', {parkId:cs.id}, res => {
- this.statisticData.parkId = res.data.id;
- })
+ this.table1 = res.data;
})
},
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(){
- this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/monthFeePay/pay', this.statisticData, res => {
- if(res.code == 0){
- //鏈煡璇㈠埌鏈堢エ锛屽彲姝ｅ父缂磋垂
+ this.$refs.statisticData.validate((valid) => {
+ if(valid) {
+ this.searchShow = true
+ this.activeIndex = '' //閲嶇疆
+ this.money = null
+ this.compStartTime = ''
+ this.compEndTime = ''
+ this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/monthFeePay/pay', this.statisticData, res => {
+ console.log(res,'res====')
+ if(res.code == 0){
+ //鏈煡璇㈠埌鏈堢エ锛屽彲姝ｅ父缂磋垂
+ if(res.data) {
+ this.startTime = res.data.startTime
+ this.endTime = res.data.endTime
+ }else {
+ this.startTime = ''
+ this.endTime = ''
+ this.$message.error(res.msg)
+ console.log('鎴戣繘鏉ヤ簡----------------')
+ }
+ }else {
- }else {
- //鏌ヨ鍒版湀绁紝缁垂
+ }
+ })
+ this.getYuezuMoney()
}
})
},
+ getYuezuMoney() {
+ let params = {
+ parkId:this.statisticData.parkId,
+ type:this.statisticData.allFlag
+ }
+ this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/whiteListRule/getByPark', params, res => {
+ console.log(res,'res====鏈堢')
+ if(res.code == 0){
+ this.yueZuObj = res.data
+ }else {
+
+ }
+ })
+ },
+ handleSelect(key) {
+ this.activeIndex = key
+ if(key == 1) {
+ this.money = this.yueZuObj.monthMoney
+ if(this.startTime && this.endTime) {
+ let tomorrow = new Date(this.endTime)
+ tomorrow.setDate(tomorrow.getDate() + 1)
+ this.compStartTime = this.$moment(tomorrow).format('YYYY-MM-DD')
+ let a = this.getNewDate(tomorrow,1)
+ this.compEndTime = this.$moment(a).format('YYYY-MM-DD')
+ }else {
+ let today = new Date()
+ let tomorrow = new Date(today);
+ tomorrow.setDate(tomorrow.getDate() + 1);
+ this.compStartTime = this.$moment(tomorrow).format('YYYY-MM-DD')
+ let a = this.getNewDate(tomorrow,1)
+ this.compEndTime = this.$moment(a).format('YYYY-MM-DD')
+ }
+ }else if(key == 2) {
+ this.money = this.yueZuObj.threeMonthMoney
+ if(this.startTime && this.endTime) {
+ let tomorrow = new Date(this.endTime)
+ tomorrow.setDate(tomorrow.getDate() + 1)
+ this.compStartTime = this.$moment(tomorrow).format('YYYY-MM-DD')
+ let a = this.getNewDate(tomorrow,3)
+ this.compEndTime = this.$moment(a).format('YYYY-MM-DD')
+ }else {
+ let today = new Date()
+ let tomorrow = new Date(today);
+ tomorrow.setDate(tomorrow.getDate() + 1);
+ this.compStartTime = this.$moment(tomorrow).format('YYYY-MM-DD')
+ let a = this.getNewDate(tomorrow,3)
+ this.compEndTime = this.$moment(a).format('YYYY-MM-DD')
+ }
+ }else if(key == 3) {
+ this.money = this.yueZuObj.sixMonthMoney
+ if(this.startTime && this.endTime) {
+ let tomorrow = new Date(this.endTime)
+ tomorrow.setDate(tomorrow.getDate() + 1)
+ this.compStartTime = this.$moment(tomorrow).format('YYYY-MM-DD')
+ let a = this.getNewDate(tomorrow,6)
+ this.compEndTime = this.$moment(a).format('YYYY-MM-DD')
+ }else {
+ let today = new Date()
+ let tomorrow = new Date(today);
+ tomorrow.setDate(tomorrow.getDate() + 1);
+ this.compStartTime = this.$moment(tomorrow).format('YYYY-MM-DD')
+ let a = this.getNewDate(tomorrow,6)
+ this.compEndTime = this.$moment(a).format('YYYY-MM-DD')
+ }
+ }else if(key == 4) {
+ this.money = this.yueZuObj.yearMoney
+ if(this.startTime && this.endTime) {
+ let tomorrow = new Date(this.endTime)
+ tomorrow.setDate(tomorrow.getDate() + 1)
+ this.compStartTime = this.$moment(tomorrow).format('YYYY-MM-DD')
+ let a = this.getNewDate(tomorrow,12)
+ this.compEndTime = this.$moment(a).format('YYYY-MM-DD')
+ }else {
+ let today = new Date()
+ let tomorrow = new Date(today);
+ tomorrow.setDate(tomorrow.getDate() + 1);
+ this.compStartTime = this.$moment(tomorrow).format('YYYY-MM-DD')
+ let a = this.getNewDate(tomorrow,12)
+ this.compEndTime = this.$moment(a).format('YYYY-MM-DD')
+ }
+ }
+ },
changePark(){
},
@@ -119,6 +297,32 @@
</style>
<style lang="scss" scoped>
+.yuezu-line{
+ ::v-deep{
+ .el-menu.el-menu--horizontal{
+ border-bottom: none;
+ }
+ .el-menu--horizontal>.el-menu-item{
+ height: 6.4vw /* 48/7.5 */;
+ line-height: 6.4vw /* 48/7.5 */;
+ margin: 1.33vw /* 10/7.5 */;
+ color: #409eff;
+ background: #ecf5ff;
+ border-color: #b3d8ff;
+ border-radius: 1.07vw /* 8/7.5 */;
+ }
+ .el-menu-item{
+ font-size: 2.93vw /* 22/7.5 */;
+ }
+ .el-menu--horizontal>.el-menu-item.is-active{
+ color: #fff;
+ margin: 1.33vw /* 10/7.5 */;
+ border-radius: 1.07vw /* 8/7.5 */;
+ border-bottom: none;
+ background: #409eff;
+ }
+ }
+}
h1,h2,h3,h4,h5{
font-family: '鑻规柟 涓瓑';
font-weight: normal;
@@ -153,12 +357,22 @@
padding:5.33vw /* 40/7.5 */;
}
.weizhang-main-top{
- height: 22.489vh /* 300/13.34 */;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-bottom: 1px solid #f0f0f0;
+ position: sticky;
+ top: 0;
+ left: 0;
+ z-index: 9999;
+ background: #fff;
+ .title{
+ font-size: 4.27vw /* 32/7.5 */;
+ font-weight: bolder;
+ height: 10.67vw /* 80/7.5 */;
+ line-height: 10.67vw /* 80/7.5 */;
+ }
.money{
font-size: 6.93vw /* 52/7.5 */;
font-weight: 550;
@@ -173,6 +387,58 @@
}
.weizhang-main-form{
}
+ .yuezu-box{
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ margin-top: 8vw /* 30/7.5 */;
+ .current-box{
+ .title{
+ font-weight: bolder;
+ margin-left: 3.33vw /* 25/7.5 */;
+ }
+ font-size: 3.73vw /* 28/7.5 */;
+ color: #000;
+ margin-top: 4vw /* 30/7.5 */;
+ }
+ .yuezuCard{
+ .yuezu-line{
+ .title{
+ margin-left: 3.33vw /* 25/7.5 */;
+ font-size: 3.73vw /* 28/7.5 */;
+ color: #000;
+ font-weight: bolder;
+ width: 100%;
+ }
+ .yuezu-line-right{
+ margin-top: 2.67vw /* 20/7.5 */;
+ }
+ margin-top: 4vw /* 30/7.5 */;
+ }
+ }
+ .money-box{
+ margin: 5.33vw /* 40/7.5 */ auto 2.67vw /* 20/7.5 */;
+ .money{
+ font-size:5.33vw /* 40/7.5 */;
+ color: #000;
+ font-weight: bolder;
+ text-align: center;
+ }
+ .money-content{
+ font-size: 3.2vw /* 24/7.5 */;
+ color: #888;
+ text-align: center;
+ }
+ }
+ .yuezu-footer{
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 6vw /* 30/7.5 */;
+ margin-bottom: 6vw;
+ }
+ }
.weizhang-tiaokuan{
margin-top: 2.67vw /* 20/7.5 */;
h1{
@@ -187,6 +453,10 @@
border-radius: 5.33vw /* 40/7.5 */;
background-image: linear-gradient(to right,#33b1fe,#0679dc);
}
+ .jiaofei-btn2{
+ width: 64.53vw /* 484/7.5 */;
+ border-radius: 5.33vw /* 40/7.5 */;
+ }
.logoPhone{
margin-top: 0.67vw;
width: 1.333rem /* 100/75 */;
diff --git a/src/utils/validate.js b/src/utils/validate.js
new file mode 100644
index 0000000..8eb5e09
--- /dev/null
+++ b/src/utils/validate.js
@@ -0,0 +1,12 @@
+/**
+ * 鎵嬫満鍙风爜
+ * @param {*} s
+ */
+export const isMobile = (rule, value, callback) => {
+ var reg = /^(((\d{3,4}-)?[0-9]{7,8})|(1(3|4|5|6|7|8|9)\d{9}))$/;
+ if (!reg.test(value)) {
+ callback(new Error('鎵嬫満鍙锋牸寮忛敊璇�'));
+ } else {
+ callback();
+ }
+};
--
Gitblit v1.9.1