car-wash-front/src/components/station/index.vue

<template>
  <view class="station_item"
        @click="handleNavStation(item)">
    <view class="station_item-title">
      <text class="font13">{{ item.stationName }}</text>
    </view>

    <view class="station_item-status">
      <text class="station_item-status-text">{{ item.stationStatus == 'Normal' ? '营业中' : '暂停营业' }}</text>
    </view>

    <view class="station_item-content">
      <view class="station_item-content-left">
        <view class="station_item-content-left-label">
          <view class="font12 station_item-content-left-label-left">
            <text class="station_item-content-left-label-left_idle">空闲</text>
            <text class="station_item-content-left-label-left_count">{{ item.parkingNum }}/{{ item.parkingNum }}</text>
          </view>
          <!--              <uv-tags size="small" class="station_item-content-left-label_tag" text="洗车机" plain shape="circle"></uv-tags>-->
          <!--              <view class="station_item-content-left-label_func">{{ ['清洁', '泡沫', '吸尘', '消毒', '充电']?.join(" | ") }}</view>-->
        </view>
        <view class="station_item-content-left-position">
          <uv-icon name="empty-address" size="20" color="#aaa"></uv-icon>
          <text>{{ item.address }}</text>
        </view>
      </view>
      <view class="station_item-content-right">
<!--        <image
            style="width: 20px; height: 20px;color: #eeeeee;"
            src="/static/nav.png"
        />-->
        <uv-icon name="map" color="#19A497"></uv-icon>
        <text class="font12"  @click.stop="handleNavMap(item)">{{ item.distance }}km</text>
        <!--            <uv-tags text="1222km" type="warning" plain size="mini"></uv-tags>-->
      </view>
    </view>

    <view class="station_item-distance">
      <uv-text type="primary" :text="item.parkingFee" size="12"></uv-text>
    </view>
  </view>
</template>

<script setup lang="ts" name="Station">

const props = defineProps({
  item: {
    type: Object,
  }
})



const handleNavMap = (station:any) => {
  let location = JSON.parse(station.location)
  uni.openLocation({
    latitude: location.stationLat,
    longitude: location.stationLng,
    scale: 18,
    name: station.stationName,
    address: station.address,
  });
}

const handleNavStation = (station: any) => {
  getApp<any>().globalData.last.station = station
  uni.navigateTo({
    url: '/pages-wash/station/index?id='+station.id
  })
  console.log(station)
}

</script>

<style scoped lang="scss">

.station_item {
  display: flex;
  flex-direction: column;
  border-radius: 10rpx;
  margin-top: 20rpx;
  padding: 15rpx;
  background: #fafafa;
  position: relative;

  &-title {
    display: inline-flex;
    padding-left: 5px;
  }

  &-status {
    position: absolute;
    right: 6rpx;
    top: 0;

    &-text {
      background: $uni-color-primary;
      padding: 6rpx;
      color: white;
      font-size: 12px;
      border-radius: 20rpx 6rpx;
    }
  }

  &-content {
    display: flex;
    justify-content: space-between;
    width: 100%;

    &-left {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 5rpx;

      &-label {
        padding: 4rpx 8rpx;
        display: inline-flex;
        margin-top: 8rpx;
        //justify-content: space-between;

        &-left {
          //border: 1px solid $uni-color-primary;
          border-radius: 4rpx;

          &_idle {
            background: $uni-color-primary;
            padding: 6rpx;
            color: white;
            border-radius: 4rpx;
          }

          &_count {
            //border-radius: 4rpx;
            margin-left: 10px;
            color: $uni-color-primary;
            font-size: 13px;
          }

          &_tag {
            width: 30rpx;
          }

        }


        &_func {
          padding-left: 50rpx;
          font-size: 24rpx;
          color: #aaa;
        }
      }

      &-position {
        display: inline-flex;
        font-size: 24rpx;
        margin-top: 8rpx;
      }
    }

    &-right {
      border-radius: 10rpx;
      background-color: #eee;
      //border: 1px solid $uni-color-primary;
      width: 120rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
      align-items: center;

    }
  }

  &-distance {
    font-size: 24rpx;
    padding-left: 5px;
    margin-top: 8rpx;
  }
}

</style>