charge-java/charge-front/src/pages-charge/machines/price-desc/price-desc.vue

<template>
  <view class="dialog flex-align-end">
    <view class="desc-dialog">
      <view class="desc-dialog_head flex-center">
        <view class="fw-500 color-000" style="font-size: 16px"
          >充电费用说明</view
        >
        <view class="close" @click="close">
          <uni-icons type="closeempty" size="24" color="#2D284B"></uni-icons>
        </view>
      </view>
      <view class="desc-dialog_body">
        <view class="table">
          <view class="tr flex">
            <view class="th flex-center fs-28">时间</view>
            <view class="th flex-center flex-column">
              <view>电费</view>
              <view class="fs-24 lh-24" style="color: rgba(0, 0, 0, 0.5)"
                >（元/kwh）</view
              >
            </view>
            <view class="th flex-center flex-column">
              <view>服务费</view>
              <view class="fs-24 lh-24" style="color: rgba(0, 0, 0, 0.5)"
                >（元/kwh）</view
              >
            </view>
          </view>
          <view
            class="tr flex"
            v-for="(item, index) in _desc"
            :key="index"
            :style="{
              'border-top': `1rpx solid ${
                index === 0 ? 'transparent' : '#E5E5E5'
              }`,
              'background':`${item.isCurrentTimePeriod?'rgba(45, 158, 149, 0.10)':'transparent'}`
            }"
          >
            <view class="td flex-center">
              <text style="width: 158rpx; text-align: center">{{
                item.startTimeFormat
              }}</text>
              <text
                class="ml-16 width-38 height-38 br-round fs-24 flex-center"
                v-if="item.iconIndex >= 0"
                :style="{
                  color: iconColor[item.iconIndex],
                  backgroundColor: iconBgColor[item.iconIndex],
                }"
                >{{ item.pricePeriod }}</text
              ></view
            >
            <view class="td flex-center">{{ item.elecPrice }}</view>
            <view class="td flex-center">{{ item.servicePrice }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  props: {
    desc: Array<any>,
  },
  data() {
    return {
      _desc: [],
      iconText: ["谷", "平", "峰", "尖", "统"],
      iconBgColor: [
        "rgba(0, 218, 179, 0.20)",
        "rgba(100, 116, 139, 0.25)",
        "rgba(255, 153, 0, 0.20)",
        "rgba(255, 46, 0, 0.20)",
        "rgba(0, 218, 179, 0.20)"
      ],
      iconColor: ["#00DAB3", "#2d9e95", "#FF9900", "#FF2E00", "#006b57"]
    };
  },
  mounted() {
    // console.log(this.desc);
    let currentHour = new Date().getHours()
    if (this.desc && this.desc.length) {
      this._desc = this.desc.map((item) => {
       let  isCurrentTimePeriod = false;
       if(item.startTimeFormat){
         let split = item.startTimeFormat.split("~");
         if(split&&split.length===2){
           isCurrentTimePeriod =
           currentHour>=Number(split[0].split(":")[0])&&
           currentHour<Number(split[1].split(":")[0])
         }
       }
        return {
          ...item,
          isCurrentTimePeriod,
          iconIndex: this.iconText.findIndex(
            (text) => item.pricePeriod === text
          ),
        };
      });

      // console.log(this._desc)
    }
  },
  methods: {
    close() {
      this.$emit("close");
    },
  },
});
</script>

<style lang="scss">
@use "../../../styles/layout.scss";
@use "../../../styles/font.scss";
@use "../../../styles/flex.scss";
@use "../../../styles/dialog.scss";
.desc-dialog {
  background-color: transparent;
  width: 100%;
  overflow: hidden;
  border-radius: 20rpx 20rpx 0px 0px;

  &_head {
    padding: 24rpx 0px;
    position: relative;
    background-color: #fff;
    .close {
      position: absolute;
      right: 30rpx;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  &_body {
    box-sizing: border-box;
    padding: 0rpx 30rpx 80rpx 30rpx;
    background-color: #fff;

    .table {
      border: 1rpx solid #e5e5e5;
      border-radius: 10rpx;
      overflow: hidden;
    }

    .tr {
      width: 100%;

      & > view:nth-child(1) {
        width: 254rpx;
        flex-shrink: 0;
        border-right: 1rpx solid #e5e5e5;
      }

      & > view:nth-child(2) {
        width: 200rpx;
        flex-shrink: 0;
        border-right: 1rpx solid #e5e5e5;
      }

      & > view:nth-child(3) {
        flex-grow: 1;
      }
    }

    .tr:nth-child(2n) {
      background-color: #fbfcff;
    }

    .th {
      border-bottom: 1rpx solid #e5e5e5;
      background-color: #f1f6ff;
      height: 92rpx;
      color: rgba(0, 0, 0, 0.7);
      font-size: 28rpx;

      view {
        color: rgba(0, 0, 0, 0.7);
        font-size: 28rpx;
      }
    }

    .td {
      color: #000;
      font-size: 26rpx;
      height: 76rpx;
    }
  }
}
</style>