car-wash-java/car-wash-mp/src/components/station/index.vue

<template>
  <view class="station_item"
        @click="handleNavStation(item)">
    <view class="station_item-title">
      <text class="station_item-idle" v-if="item.idleParkingNum !== undefined && item.idleParkingNum !== null">空闲{{ item.idleParkingNum }}</text>
      <text class="station_item-name">{{ item.stationName }}</text>
    </view>

    <view class="station_item-status">
      <text class="station_item-status-text">{{ fmtDictName('WashStation.status', item.stationStatus) }}</text>
    </view>

    <view class="station_item-content">
      <view class="station_item-content-address">
        <uv-icon name="empty-address" size="18" color="#999999"></uv-icon>
        <text class="station_address">{{ item.address }}</text>
        <text class="station_distance" v-if="item.distance !== undefined && item.distance !== null" @click.stop="handleNavMap(item)">{{ item.distance }}km</text>
      </view>
    </view>

    <view class="station_item-footer">
      <view class="footer-info">
        <view class="footer-row">
          <uv-icon name="clock" size="14" color="#909399"></uv-icon>
          <text class="business_hours">营业时间: {{ item.businessHours }}</text>
        </view>
        <view class="footer-row" v-if="item.parkingFee">
          <text class="parking-icon">P</text>
          <text class="parking-fee">{{ item.parkingFee }}</text>
        </view>
      </view>
      <view class="footer-phone" v-if="showPhone && (item.serviceTel || item.stationTel)" @click.stop="handleCallStation">
        <uv-icon name="phone" size="22" color="#C6171E"></uv-icon>
      </view>
    </view>
  </view>
</template>

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

import {fmtDictName} from "@/utils/common"

const props = defineProps({
  item: {
    type: Object,
  },
  showPhone: {
    type: Boolean,
    default: false,
  },
})


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

const handleCallStation = () => {
  const phone = props.item.serviceTel || props.item.stationTel;
  if (!phone) return;
  uni.showModal({
    title: "联系站点",
    content: "是否拨打站点服务电话？",
    confirmText: "拨打",
    confirmColor: "#C6171E",
    success: (res) => {
      if (res.confirm) {
        uni.makePhoneCall({ phoneNumber: phone });
      }
    },
  });
};

const handleNavStation = (station: any) => {
  let currentPages = getCurrentPages();
  let currentPageRoute = currentPages[currentPages.length - 1].route;
  if (currentPageRoute?.includes('pages-wash/station/index')) {
    return;

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

const handleNav = () => {
  handleNavMap(props.item);
}


defineExpose({
  handleNav
})

</script>

<style scoped lang="scss">

.station_item {
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
  padding: 24rpx;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  @include card-interactive(16rpx, 0.08);

  &-title {
    display: flex;
    align-items: center;
    gap: 12rpx;
    margin-bottom: 20rpx;
    padding-right: 120rpx;
    min-width: 0;
  }

  &-idle {
    background: $uni-color-primary;
    padding: 4rpx 14rpx;
    color: #fff;
    font-size: 22rpx;
    font-weight: 600;
    border-radius: 20rpx;
    flex-shrink: 0;
    line-height: 1.5;
  }

  &-name {
    font-weight: $uni-font-weight-semibold;
    font-size: $uni-font-size-xl;
    color: $uni-text-color;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
  }

  &-status {
    position: absolute;
    right: 24rpx;
    top: 24rpx;

    &-text {
      background: $uni-color-primary;
      padding: 6rpx 16rpx;
      color: $uni-text-color-inverse;
      font-size: $uni-font-size-xs;
      border-radius: 16rpx;
    }
  }

  &-content {
    width: 100%;
    margin-bottom: 16rpx;
    box-sizing: border-box;

    &-address {
      display: flex;
      align-items: center;
      gap: 8rpx;
      font-size: $uni-font-size-sm;
      color: $uni-text-color-secondary;
      line-height: $uni-line-height-sm;
      overflow: hidden;
    }
  }

  &-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16rpx;
    border-top: 1px solid $uni-border-color-light;

    .footer-info {
      display: flex;
      flex-direction: column;
      gap: 10rpx;
      flex: 1;
    }

    .footer-row {
      display: flex;
      align-items: center;
      gap: 8rpx;
    }

    .business_hours {
      font-size: $uni-font-size-sm;
      color: $uni-text-color-tertiary;
    }

    .footer-phone {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 68rpx;
      height: 68rpx;
      background: rgba($uni-color-primary, 0.08);
      border-radius: 50%;
      flex-shrink: 0;
    }

    .parking-fee {
      font-size: $uni-font-size-sm;
      color: $uni-color-primary;
      font-weight: $uni-font-weight-medium;
    }

    .parking-icon {
      width: 28rpx;
      height: 28rpx;
      line-height: 28rpx;
      text-align: center;
      font-size: 18rpx;
      font-weight: $uni-font-weight-bold;
      color: #fff;
      background: $uni-color-primary;
      border-radius: 4rpx;
      flex-shrink: 0;
    }
  }
}

.station_address {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.station_distance {
  font-size: $uni-font-size-sm;
  color: $uni-color-primary;
  font-weight: $uni-font-weight-semibold;
  flex-shrink: 0;
  margin-left: 4rpx;

  &:active {
    opacity: 0.7;
  }
}

</style>