包月页面调整

common/apiurl.js

@@ -124,7 +124,9 @@ const apiurl = {
   // 获取参数
   getParamsUrl: '/admin/config/configKey/',
   // 微信包月支付
-  wechatMonthlyPayUrl: '/client/monthpay/wechat'
+  wechatMonthlyPayUrl: '/client/monthpay/wechat',
+	// 包月规则详情
+	monthlyRuleDetailsUrl: '/admin/feemonthrule',
 };
 
 export { apiurl };

common/http.api.js

@@ -115,7 +115,7 @@ const install = (Vue, vm) => {
   let parkingWechatPayApi = (params = {}) => vm.$u.post(apiurl.parkingWechatPayUrl, params);
   let getParamsApi = (params = {}) => vm.$u.get(apiurl.getParamsUrl + params.key);
   let wechatMonthlyPayapi = (params = {}) => vm.$u.post(apiurl.wechatMonthlyPayUrl, params);
-
+	let monthlyRuleDetailsApi = (params = {}) => vm.$u.get(apiurl.monthlyRuleDetailsUrl, params);
   // 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
   vm.$u.api = {
     feedbackAdd,
@@ -176,7 +176,8 @@ const install = (Vue, vm) => {
     wechatPayApi,
     parkingWechatPayApi,
     getParamsApi,
-    wechatMonthlyPayapi
+    wechatMonthlyPayapi,
+		monthlyRuleDetailsApi
   };
 };
 

pages/handleMonthly/handleMonthly.scss

@@ -3,14 +3,16 @@
   .handle-monthly-item {
     display: flex;
     flex-direction: row;
+		align-items: center;
     border-bottom: solid 1rpx #cecece;
-    height: 96rpx;
+    // height: 96rpx;
     line-height: 96rpx;
+		position: relative;
     > view {
       &:first-child {
         width: 22%;
         color: #757575;
-        font-size: 36rpx;
+        font-size: 32rpx;
         font-weight: 400;
         text-align: justify;
         text-align-last: justify;
@@ -48,6 +50,13 @@
         padding: 0 61rpx;
       }
     }
+		.handle-monthly-time-tips {
+			width: 100%!important;
+			position: absolute;
+			bottom: -24rpx;
+			font-size: 24rpx!important;
+			color: #2979ff!important;
+		}
   }
   .handle-monthly-explain {
     font-size: 24rpx;
@@ -60,3 +69,6 @@
     margin: 52rpx auto;
   }
 }
+.pb20 {
+	padding-bottom: 30rpx;
+}

pages/handleMonthly/handleMonthly.vue

@@ -17,7 +17,21 @@
 			<view>包月金额</view>
 			<view class="handle-monthly-money">{{ form.monthAmount || 0 }}元</view>
 		</view>
-		<view class="handle-monthly-item">
+		<view class="handle-monthly-item"
+			v-if="monthlyRuleObj.giveFlag && Number(monthlyRuleObj.giveFlag) === 1"
+			:class="{ 'pb20': monthlyRuleObj.minMonth && form.month >= monthlyRuleObj.minMonth && Number(monthlyRuleObj.giveFlag) === 1 }">
+			<view>包月时长</view>
+			<view class="handle-monthly-time-long">
+				<button @click="reduceMonthNum()">-</button>
+				<view>{{ form.month || 0 }}个月</view>
+				<button @click="addMonthNum()">+</button>
+			</view>
+			<view class="handle-monthly-time-tips"
+				v-if="monthlyRuleObj.minMonth && form.month >= monthlyRuleObj.minMonth && Number(monthlyRuleObj.giveFlag) === 1">
+				赠送提示：可获得{{ freeMonthNum }}个月的免费停车时长
+			</view>
+		</view>
+		<view class="handle-monthly-item" v-else>
 			<view>包月时长</view>
 			<view class="handle-monthly-time-long">
 				<button @click="reduceMonthNum()">-</button>
@@ -117,9 +131,23 @@
 				carLicenseDefaultValue: [0],
 				wxEnv: false,
 				loading: false,
-				type: 'road'
+				type: 'road',
+				monthlyRuleObj: {},
+				freeMonthNum: 0
 			};
 		},
+		watch: {
+			'form.month'(val) {
+				let freeNum = 0;
+				if (this.monthlyRuleObj.giveFlag && Number(this.monthlyRuleObj.giveFlag) === 1) {
+					let remainNum = Number(val) % Number(this.monthlyRuleObj.minMonth),
+						timesNum = Number(val) / Number(this.monthlyRuleObj.minMonth);
+					if (remainNum === 0) {
+						this.freeMonthNum = Number(timesNum) * Number(this.monthlyRuleObj.giveMonth);
+					}
+				}
+			}
+		},
 		onLoad(page) {
 			this.wxEnv = getEnvIsWx();
 			this.getSysterms(0);
@@ -146,6 +174,9 @@
 				this.monthId = page.monthId
 				this.payWayPop = true
 			}
+			if (page.roadNo) {
+				this.monthlyRuleDetails(page.roadNo);
+			}
 			const baseUrl = window.location.href.split('#')[0];
 			let jumpUrl = baseUrl + '#/pages/center/monthly/monthly?type=' + this.type;
 			this.jumpUrl = jumpUrl;
@@ -267,6 +298,21 @@
 						console.log(err);
 					})
 			},
+			/**
+			 * 获取包月规则详情
+			 * @date 2022-12-20
+			 * @param {any} roadNo
+			 * @returns {any}
+			 */
+			monthlyRuleDetails(roadNo) {
+				this.$u.api.monthlyRuleDetailsApi({
+					roadNo
+				}).then(res => {
+					if (res.code === 200) {
+						this.monthlyRuleObj = res?.rows[0] ?? {}
+					}
+				})
+			},
 			/**
 			 * 提交包月信息
 			 * @date 2022-10-09