charge-front/src/components/charge-station/charge-station.vue

<template>
  <view
      class="charge-station"
      :style="{
      border: border ? '1rpx solid rgba(0, 0, 0, 0.1)' : 'none',
      'border-radius': fromMap ? '20rpx 20rpx 0 0' : '20rpx',
    }"
      @touchstart="touchstart"
      @touchend="touchend"
  >
    <view class="flex-between">
      <view>
        <view class="flex flex-align-center">
          <view class="fs-32 fw-bold" @click.stop="detail">{{ title }}</view>
          <image v-if="activityList&&activityList.length>0" class="ml-10" src="/static/images/coupon-center.png" mode="widthFix" style="width:32rpx"/>
          <view class="coupon-box ml-5" @click.stop="toCouponCenter"
                v-if="activityList&&activityList.length>0"
          >
            <text>活动中</text>
          </view>
        </view>


        <view v-if="tag">
          <view class="flex-center tag">{{ tagMap[tag] }}</view>
        </view>
        <view v-else @click.stop="detail" class="fs-22" style="color: rgba(0, 0, 0, 0.5)"
        >{{ address }} | {{ distance }}km
        </view
        >
      </view>
      <view
          @click.top="nav"
          class="nav flex-center flex-shrink"
          @touchstart="touchstart"
          @touchend.stop="touchend"
      >
        <image src="/static/images/icon-nav.png" mode="widthFix"/>
        <text>导航</text>
      </view>
    </view>
    <view class="mt-20 flex" @click.stop="detail">
      <view class="status flex-column flex-grow">
        <view class="flex-align-center" v-if="price">
          <text class="fs-32 fw-600" style="color: var(--color-warning)">{{
              price
            }}
          </text>
          <text class="fs-22 ml-6 color-666">元/度</text>
        </view>
        <view class="flex-align-center lh-0 mt-auto" v-if="!fromMap">
          <charge-icon type="fast"></charge-icon>
          <view class="fs-22 ml-8 color-666" v-if="fast"
          >空闲:{{ freeLength(fast) }}｜共:{{ fast.length }}
          </view
          >
          <view class="ml-60">
            <charge-icon type="slow"></charge-icon>
          </view>
          <view class="fs-22 ml-8 color-666" v-if="slow"
          >空闲:{{ freeLength(slow) }}｜共:{{ slow.length }}
          </view
          >
        </view>
        <block v-else>
          <view class="lh-0 mt-18 fs-20" style="color: #999"
          >停车费用：以场地方公告为准！
          </view
          >
          <view
              class="top-right-bound flex-align-center lh-32"
              v-if="slow && slow.length"
          >
            <charge-icon type="slow"></charge-icon>
            <view class="ml-6 fs-22 color-666"
            >{{ freeLength(slow) }} / {{ slow.length }}
            </view
            >
          </view>
          <view
              class="top-right-bound flex-align-center lh-32"
              v-if="fast && fast.length"
          >
            <charge-icon type="fast"></charge-icon>
            <view class="ml-6 fs-22 color-666"
            >{{ freeLength(fast) }} / {{ fast.length }}
            </view
            >
          </view>
        </block>
      </view>
      <view
          class="btn flex-shrink flex-column flex-center"
          @tap.stop="collect" >

        <uni-icons
            :type="collected ? 'star-filled' : 'star'"
            size="20"
            :color="collected ? 'var(--color-warning)' : '#999999'"
        ></uni-icons>
        <view
            class="fs-22 mt-6"
            :style="{
            color: collected ? 'var(--color-warning)' : '#999999',
          }"
        >收藏
        </view
        >
      </view>
    </view>
    <station-coupon ref="station_coupon_ref"></station-coupon>
  </view>
</template>

<script lang="ts">
import {addCollectList, fetchCollectList} from "../../api/user";
import StationCoupon from "@/components/station-coupon/station-coupon.vue";

export default {
  components: {StationCoupon},
  props: {
    sId: {
      type: String,
    },
    title: String,
    address: String,
    tag: Number,
    price: String,
    fast: Array,
    slow: Array,
    latitude: Number,
    longitude: Number,
    distance: String,
    border: Boolean,
    fromMap: Boolean,
    activityList: Array
  },
  watch: {
    sId: {
      handler: function (newV) {
        if (newV) {
          fetchCollectList().then((res) => {
            this.collected = res ? res.includes(Number(newV)) : false;
          });
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      touchtime: 0,
      collected: false,
      tagMap: [
        "",
        "居民区",
        "公共机构",
        "企事业单位",
        "写字楼",
        "工业园区",
        "交通枢纽",
        "大型文体设施",
        "城市绿地",
        "大型建筑配建停车场",
        "路边停车位",
        "城际高速服务区",
      ],
    };
  },
  methods: {
    toCouponCenter() {
      const {address, latitude, longitude, activityList} = this;
      getApp<any>().globalData.lastData.station = {
        address,
        latitude,
        longitude,
        activityList
      };
      // uni.navigateTo({
      //   url: `/pages-charge/coupon-center/coupon-center?title=${this.title}&id=${this.sId}`,
      // });
      this.$refs.station_coupon_ref?.open(this.sId);
    },
    detail() {
      const {address, latitude, longitude, activityList} = this;
      getApp<any>().globalData.lastData.station = {
        address,
        latitude,
        longitude,
        activityList
      };
      uni.navigateTo({
        url: `/pages-charge/machines/machines?title=${this.title}&id=${this.sId}`,
      });
    },
    collect() {
      addCollectList(Number(this.sId)).then((collected) => {
        collected &&
        uni.vibrateShort &&
        uni.vibrateShort({
          type: "light",
        });
        this.collected = collected;
      });
    },
    nav() {
      const {latitude, longitude, title, address} = this;
      uni.openLocation({
        latitude,
        longitude,
        scale: 18,
        name: title,
        address,
      });
    },
    freeLength(infos: any[]) {
      var length = 0;
      infos.forEach(function (item) {
        item.connectorInfos.forEach(function (conItem: any) {
          if (
              conItem.connectorStatusInfo &&
              conItem.connectorStatusInfo.status === 1
          ) {
            length += 1;
          }
        });
      });
      return length;
    },
    touchstart() {
      this.touchtime = new Date().getTime();
    },
    touchend(e: any) {
      const current = new Date().getTime();
      // if (current - this.touchtime < 100) {
      //   this[e.currentTarget.dataset.method]();
      // }
    },
  },
};
</script>

<style lang="scss">
.charge-station {
  background: #ffffff;
  width: 100%;
  padding: 30rpx;

  .tag {
    display: inline-block;
    box-sizing: content-box;
    padding: 0px 6rpx;
    height: 34rpx;
    background: var(--color-sec);
    border-radius: 4rpx;
    color: #999999;
    font-size: 22rpx;
  }

  .nav {
    width: 120rpx;
    height: 60rpx;
    border-radius: 30rpx;
    background-color: var(--color-primary);
    color: #fff;
    font-size: 26rpx;

    image {
      width: 24rpx;
      margin-right: 8rpx;
    }
  }

  .status {
    background: var(--color-sec);
    border-radius: 10rpx;
    padding: 16rpx 20rpx;
    position: relative;
  }

  .top-right-bound {
    position: absolute;
    top: 18rpx;
    right: 26rpx;
    padding: 4rpx 10rpx 4rpx 4rpx;
    background: #ffffff;
    border: 1rpx solid #44deba;
    border-radius: 20rpx;
  }

  .btn {
    height: 118rpx;
    width: 64rpx;
    margin-left: 10rpx;
    background: var(--color-sec);
    border-radius: 10rpx;
    transition: all 0.3s;
  }
}

.coupon-box {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  background-color: #2d9e95;
  font-size: 14rpx;
  border-radius: 8rpx;
  padding: 0rpx 6rpx;
  text {
    font-size: 24rpx;
  }
}
</style>