parking_h5/pages/chargeStandard/chargeStandard.vue

<template>
	<!-- 收费标准 -->
	<view class="charge">
		<view class="charge-rules-container" v-for="(item, index) in chargeRulesInfo" :key="index">
			<!-- <view class="charge-list">
				<view class="charge-list-item">
					<view>2.5元/小时</view>
					<view>收费标准</view>
				</view>
				<view class="charge-list-item">
					<view>{{item.freeTime}}分钟内</view>
					<view>免费时长</view>
				</view>
				<view class="charge-list-item">
					<view>{{item.topAmt}}元</view>
					<view>封顶金额</view>
				</view>
			</view> -->
			<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}}分钟内</text></view>
						<view v-if="item.topAmt">封顶金额<text>{{item.topAmt}}元</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">
			<!-- <view class="charge-instructions-title">相关说明</view>
			<view class="charge-instructions-item">1、全天任何时段，封停必须扫码；</view>
			<view class="charge-instructions-item">2、停车5分钟未扫码启动缴费程序，将按违法停车处罚；</view>
			<view class="charge-instructions-item">3、停车时间在30分钟内不收费；超过30分钟按1小时收费；</view>
			<view class="charge-instructions-item">4、停放车辆须按车位停放，禁止乱停乱放，否则停车场有权采取相应措施；</view>
			<view class="charge-instructions-item">5、路边临停收费仅是收起个人占用公共资源的费用，非保管合同法律关系，如车辆发生刮蹭，责任由相关部门认定，与运营方无关；</view>
			<view class="charge-instructions-item">6、贵重东西请妥善保管或随身带走，如有遗失概不负责；</view>
			<view class="charge-telphone">
				<view>客服电话</view>
				<view>0851-8888888</view>
			</view>
			<view class="charge-telphone">
				<view>监督电话</view>
				<view>0851-8888888</view>
			</view> -->
			<u-parse :html="chargeContent"></u-parse>
		</view>
	</view>
</template>

<script>
	import getUrlParams from './../../utils/getUrlParams.js'
	export default {
		data() {
			return {
				roadNo: '',
				info: {
					freeTime: '',
					topAmt: ''
				},
				chargeRulesInfo: [],
				// 收费标准说明
				chargeContent: ''
			}
		},
		onLoad() {
			let locationLocaturl = window.location.hash
			const roadNo = getUrlParams(locationLocaturl, "roadNo"); // 截取roadId
			if (roadNo) {
				this.roadNo = roadNo
				this.getSysterms(3)
				this.getChargeRulesInfo(roadNo)
			} else {
				uni.showToast({
				    title: '参数丢失,返回上一个页面',
				    duration: 2000,
					icon: 'none',
					mask: true
				})
			}
		},
		onShow() {
			
		},
		methods: {
			/**
			  * 获取收费标准
			  * {roadNo} 路段
			  * */
			getChargeRulesInfo (roadNo) {
				this.$u.api.roadChargeRule({
					roadNo: 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
							})
						}
					})
			},
			/**
			 * 获取收费标准
			 * */
			getSysterms(termsType) {
				this.$u.api.getSysterms({
						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>