<template> <!-- 收费标准 --> <view class="charge"> <view class="charge-rules-container" v-for="(item, index) in chargeRulesInfo" :key="index"> <view class="charge-rules-list" v-if="item.list.length"> <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 ql-editor"> <u-parse :html="chargeContent" /> </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 }); } }, methods: { /** * 获取收费标准 * {roadNo} 路段 * */ async getChargeRulesInfo(roadNo) { const { code, data } = await this.$u.api.roadChargeRule({ roadNo }); if (code === 200) { let chargeRulesArr = []; for (let i = 0; i < data.length; i++) { let item = data[i]; this.info.freeTime = data[0].freeTime; this.info.topAmt = 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); } } } } // 存在重复,去除重复操作 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; } }, /** * 获取收费标准 * {roadNo} 路段 * */ async getParkingChargeRulesInfo(parkNo) { const { code, data } = await this.$u.api.parkingLotChargeRule({ parkNo }); if (code === 200) { // 数据整合后 let chargeRulesArr = []; for (let i = 0; i < data.length; i++) { let item = data[i]; this.info.freeTime = data[0].freeTime; this.info.topAmt = 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); } } } } // 存在重复,去除重复操作 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; } }, /** * @description: 获取收费标准 * @param {*} termsType * @return {*} */ async getSystems(termsType) { const { code, data } = await this.$u.api.getSystems({ termsType: Number(termsType) }); if (code === 200) { this.chargeContent = data?.content; } } } }; </script> <style lang="scss" scoped> @import './chargeStandard.scss'; </style>