charge-java/charge-front/src/pages-charge/machines/charge-machine/charge-machine.vue

<template>
  <view
    :class="['charge-point', 'flex-align-center', 'mt-20', 'pressable']"
    hover-class="pressed"
    hover-stay-time="80"
    v-for="(item, index) in list"
    :key="index"
    @click="toOrdering(index)"
  >
    <view
      :class="[
        'charge-point_icon',
        'flex-center',
        `charge-point_icon-${item.status}`,
      ]"
    >
      <image
        class="width-28"
        src="../../static/charge-status-icon.png"
        mode="widthFix"
      ></image>
    </view>
    <view class="charge-point_title ml-16">
      <view class="flex-align-center">
        <view class="fs-32 fw-600 color-000 lh-32">{{ title }}</view>
        <view
          :class="[
            'tag',
            'fs-24',
            'flex-center',
            'ml-8',
            `tag-${item.status}`,
          ]"
          >{{ (statusMap as any)[item.status] }}</view
        >
      </view>
      <view class="mt-10 flex-align-center">
        <view class="fs-24 color-666"
          >{{ item.connectorType === 1 ? "直流" : "交流"
          }}{{ item.power }}kw</view
        >
        <view class="fs-24 color-666 mr-6 ml-6">|</view>
        <view class="fs-24 color-666">车位号{{ parkingNo }}</view>
      </view>
    </view>
    <view class="ml-auto" v-if="price">
      <view
        class="lh-32 color-warning  flex-end "
        style="text-align: right; margin-top: -8rpx"
      >
        <text class="fs-22 mr-4">¥</text>
        <text class="fs-32">{{ price }}</text>
        <text class="fs-22 ml-4" style="vertical-align: text-top">元</text>
      </view>
      <view class="fs-24 lh-24 color-999 mt-10">当前时段</view>
    </view>
    <view class="ml-auto height-60 flex-align-end" v-if="time">
      <view class="fs-24 lh-24 color-999">{{ time }}</view>
    </view>
  </view>
</template>

<script lang="ts">
export default {
  props: {
    title: String,
    price: [String, Number],
    time: String,
    list: Array<any>,
    parkingNo: String,
  },
  data() {
    return {
      statusMap: {
        255: "故障",
        0: "离网",
        1: "空闲",
        2: "占用中",
        3: "充电中",
        4: "已预约",
      },
    };
  },
  methods: {
    toOrdering(index: number) {
      const { list } = this;
      if (
        list &&
        list[index] &&
        list[index].status &&
        (list[index].status === 1 ||
          list[index].status === 2)
      ) {
        uni.showActionSheet({
          itemList: ["去充电"],
          success: (res) => {
            if (res.tapIndex === 0) {
              uni.navigateTo({
                url: `/pages-charge/appointment/appointment?connectorId=${list[index].connectorId}&sn=${list[index].shortId}&stationId=${list[index].stationId}`,
              });
            }
          },
        });
      }
    },
  },
};
</script>

<style lang="scss">
@use "../../../styles/layout.scss";
@use "../../../styles/font.scss";
@use "../../../styles/flex.scss";

.charge-point {
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  padding: 30rpx;
  &_icon {
    height: 56rpx;
    width: 56rpx;
    border-radius: 50%;
    &-255 {
      background: var(--color-error);
    }
    &-0 {
      background-color: #b7c2c0;
    }
    &-1 {
      background: var(--color-primary);
    }
    &-2,
    &-3,
    &-4 {
      background: #9daaa8;
    }
  }
  .tag {
    height: 38rpx;
    padding: 0rpx 10rpx;
    box-sizing: border-box;
    border-radius: 12rpx;
    font-size: 24rpx;
  }
  .tag-255 {
    color: var(--color-error);
    background: rgba(244, 54, 54, 0.08);
  }
  .tag-0 {
    color: #8c9997;
    background: rgba(28, 43, 41, 0.06);
  }
  .tag-1 {
    color: var(--color-primary);
    background: var(--color-primary-tint);
  }
  .tag-2,
  .tag-3,
  .tag-4 {
    color: #8c9997;
    background: rgba(28, 43, 41, 0.06);
  }
}
</style>