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-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: '',
      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 }).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>