<template> <!-- 收费标准 --> <view class="charge"> <view class="charge-rules-container" v-for="(item, index) in chargeRulesInfo" :key="index"> <view class="charge-rules-list"> <view class="charge-rule-list-header"> <view class="charge-type"> <text v-if="item.feePeriod == 1">节假日规则</text> <text v-else>非节假日规则</text> </view> <view class="charge-time"> <view >免费时长<text>{{ item.freeTime || 0 }}分钟内</text></view > <view v-if="item.topAmt" >封顶金额<text>{{ item.topAmt || 0 }}元</text></view > <view v-else>无封顶金额</view> </view> </view> <view class="charge-rules" v-for="(type, tIndex) in item.list" :key="tIndex"> <view v-if="type.list[0].amt || type.list[1].amt" class="charge-rules-box"> <view v-if="type.vehicleType == 0">小车</view> <view v-if="type.vehicleType == 1">大车</view> <view v-if="type.vehicleType == 2">超大型车</view> <view v-if="type.vehicleType == 3">摩托车</view> <view v-if="type.vehicleType == 4">非机动车</view> <view v-if="type.vehicleType == 5">其他</view> <view class="charge-rules-right"> <view v-for="(time, tIndex) in type.list" :key="tIndex"> <text>{{ time.beginTime.substring(0, 5) }}-{{ time.beginTime > time.endTime ? '次日' : '' }}{{ time.endTime.substring(0, 5) }}</text> <text>{{ time.amt }}元/小时</text> </view> </view> </view> </view> </view> </view> <view class="charge-instructions"> <u-parse :html="chargeContent"></u-parse> </view> </view> </template> <script> export default { data() { return { roadNo: '', parkNo: '', info: { freeTime: '', topAmt: '' }, chargeRulesInfo: [], // 收费标准说明 chargeContent: '' }; }, onLoad(page) { const { roadNo, parkNo } = page; if (roadNo) { this.roadNo = roadNo; this.getSystems(3); this.getChargeRulesInfo(roadNo); } else if (parkNo) { this.parkNo = parkNo; this.getSystems(3); this.getParkingChargeRulesInfo(parkNo); } else { uni.showToast({ title: '参数丢失,返回上一个页面', duration: 2000, icon: 'none', mask: true }); } }, onShow() {}, methods: { /** * 获取收费标准 * {roadNo} 路段 * */ getChargeRulesInfo(roadNo) { this.$u.api.roadChargeRule({ roadNo }).then((res) => { if (res.code === 200) { // 数据整合后 let chargeRulesArr = []; for (let i = 0; i < res.data.length; i++) { let item = res.data[i]; this.info.freeTime = res.data[0].freeTime; this.info.topAmt = res.data[0].topAmt; const obj = { feeName: item.feeName, feeNo: item.feeNo, feePeriod: item.feePeriod, feeStep: item.feeStep, feeType: item.feeType, freeTime: item.freeTime, topAmt: item.topAmt, id: item.id, list: [], repeatList: [] // 用来检验已存在 }; for (let j = 0; j < item.vehicleRules.length; j++) { let jItem = item.vehicleRules[j]; const obj1 = { amt: jItem.amt, beginTime: jItem.beginTime, endTime: jItem.endTime, vehicleFeeNo: jItem.vehicleFeeNo, vehicleType: jItem.vehicleType, list: [] }; if (obj.repeatList.indexOf(jItem.vehicleType) === -1) { obj.repeatList.push(jItem.vehicleType); obj1.list.push(jItem); } else { for (let k = 0; k < item.vehicleRules.length; k++) { if (obj1.vehicleType === item.vehicleRules[k].vehicleType) { obj1.list.push(item.vehicleRules[k]); obj.list.push(obj1); } } } } // 存在重复,去除重复操作 let obj2 = {}; obj.list = obj.list.reduce((cur, next) => { obj[next.vehicleType] ? '' : (obj[next.vehicleType] = true && cur.push(next)); return cur; }, []); chargeRulesArr.push(obj); } this.chargeRulesInfo = chargeRulesArr; } else { uni.showToast({ title: `${res.msg}`, duration: 3000, icon: 'none', mask: true }); } }); }, /** * 获取收费标准 * {roadNo} 路段 * */ getParkingChargeRulesInfo(parkNo) { this.$u.api.parkingLotChargeRule({ parkNo }).then((res) => { if (res.code === 200) { // 数据整合后 let chargeRulesArr = []; for (let i = 0; i < res.data.length; i++) { let item = res.data[i]; this.info.freeTime = res.data[0].freeTime; this.info.topAmt = res.data[0].topAmt; const obj = { feeName: item.feeName, feeNo: item.feeNo, feePeriod: item.feePeriod, feeStep: item.feeStep, feeType: item.feeType, freeTime: item.freeTime, topAmt: item.topAmt, id: item.id, list: [], repeatList: [] // 用来检验已存在 }; for (let j = 0; j < item.vehicleRules.length; j++) { let jItem = item.vehicleRules[j]; const obj1 = { amt: jItem.amt, beginTime: jItem.beginTime, endTime: jItem.endTime, vehicleFeeNo: jItem.vehicleFeeNo, vehicleType: jItem.vehicleType, list: [] }; if (obj.repeatList.indexOf(jItem.vehicleType) === -1) { obj.repeatList.push(jItem.vehicleType); obj1.list.push(jItem); } else { for (let k = 0; k < item.vehicleRules.length; k++) { if (obj1.vehicleType === item.vehicleRules[k].vehicleType) { obj1.list.push(item.vehicleRules[k]); obj.list.push(obj1); } } } } // 存在重复,去除重复操作 let obj2 = {}; obj.list = obj.list.reduce((cur, next) => { obj[next.vehicleType] ? '' : (obj[next.vehicleType] = true && cur.push(next)); return cur; }, []); chargeRulesArr.push(obj); } this.chargeRulesInfo = chargeRulesArr; } else { uni.showToast({ title: `${res.msg}`, duration: 3000, icon: 'none', mask: true }); } }); }, /** * 获取收费标准 * */ getSystems(termsType) { this.$u.api .getSystems({ termsType: Number(termsType) }) .then((res) => { if (res.code === 200) { this.chargeContent = res.data?.content; } else { this.$refs.uToast.show({ title: res.msg, type: 'error' }); } }) .catch((err) => { this.$refs.uToast.show({ title: '系统错误!', type: 'error' }); }); } } }; </script> <style lang="scss" scoped> @import './chargeStandard.scss'; </style>