parking_h5_all/pages/chargeStandard/chargeStandard.vue

<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>