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 || 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">
      <!-- <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>
export default {
  data() {
    return {
      roadNo: '',
      info: {
        freeTime: '',
        topAmt: ''
      },
      chargeRulesInfo: [],
      // 收费标准说明
      chargeContent: ''
    };
  },
  onLoad(page) {
    const { roadNo } = page;
    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>