car-wash-java/admin-h5/src/pages/station/detail.vue

<template>
  <view class="detail-container">
    <!-- 顶部导航栏 -->
    <view class="header-nav">
      <view class="nav-left" @click="goBack">
        <AppIcon name="chevron-left" size="20" color="#FFFFFF" />
      </view>
      <text class="nav-title">{{ stationName || '站点详情' }}</text>
      <view class="nav-right"></view>
    </view>

    <!-- 加载状态 -->
    <view class="loading-overlay" v-if="loading">
      <view class="loading-spinner"></view>
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 站点详情 -->
    <view class="detail-content" v-if="!loading && detail">
      <!-- 站点图片 -->
      <view class="image-section" v-if="detail.pictures && detail.pictures.length > 0">
        <image
          v-for="(pic, index) in detail.pictures"
          :key="index"
          :src="pic"
          mode="aspectFill"
          class="station-image"
          @click="previewImage(pic)" />
      </view>

      <!-- 基本信息卡片 -->
      <view class="info-card">
        <text class="card-title">基本信息</text>
        <view class="info-list">
          <view class="info-item">
            <text class="item-label">站点ID</text>
            <text class="item-value">{{ detail.stationId || '-' }}</text>
          </view>
          <view class="info-item">
            <text class="item-label">站点名称</text>
            <text class="item-value">{{ detail.stationName || '-' }}</text>
          </view>
          <view class="info-item">
            <text class="item-label">站点状态</text>
            <text class="item-value status" :style="getStatusStyle(detail.stationStatus)">{{ fmtDictName('WashStation.status', detail.stationStatus) }}</text>
          </view>
          <view class="info-item">
            <text class="item-label">站点类型</text>
            <text class="item-value">{{ fmtDictName('WashStation.type', detail.stationType) }}</text>
          </view>
          <view class="info-item">
            <text class="item-label">地址</text>
            <text class="item-value">{{ detail.address || '-' }}</text>
          </view>
          <view class="info-item">
            <text class="item-label">服务电话</text>
            <text class="item-value">{{ detail.serviceTel || '-' }}</text>
          </view>
          <view class="info-item">
            <text class="item-label">站点电话</text>
            <text class="item-value">{{ detail.stationTel || '-' }}</text>
          </view>
        </view>
      </view>

      <!-- 运营信息卡片 -->
      <view class="info-card">
        <text class="card-title">运营信息</text>
        <view class="info-list">
          <view class="info-item">
            <text class="item-label">运营主体</text>
            <text class="item-value">{{ detail.operationEntity || '-' }}</text>
          </view>
          <view class="info-item">
            <text class="item-label">统一社会信用代码</text>
            <text class="item-value">{{ detail.creditCode || '-' }}</text>
          </view>
          <view class="info-item">
            <text class="item-label">场站联系人</text>
            <text class="item-value">{{ detail.contactPerson || '-' }}</text>
          </view>
          <view class="info-item">
            <text class="item-label">营业时间</text>
            <text class="item-value">{{ detail.businessHours || '-' }}</text>
          </view>
          <view class="info-item">
            <text class="item-label">工位数量</text>
            <text class="item-value">{{ detail.parkingNum || '-' }}</text>
          </view>
          <view class="info-item">
            <text class="item-label">停车费用</text>
            <text class="item-value">{{ detail.parkingFee || '-' }}</text>
          </view>
          <view class="info-item">
            <text class="item-label">备注</text>
            <text class="item-value">{{ detail.remark || '-' }}</text>
          </view>
        </view>
      </view>

      <!-- 位置信息 -->
      <view class="info-card" v-if="detail.stationLat || detail.stationLng">
        <text class="card-title">位置信息</text>
        <view class="info-list">
          <view class="info-item">
            <text class="item-label">经度</text>
            <text class="item-value">{{ detail.stationLng || '-' }}</text>
          </view>
          <view class="info-item">
            <text class="item-label">纬度</text>
            <text class="item-value">{{ detail.stationLat || '-' }}</text>
          </view>
        </view>
      </view>

      <!-- 时间信息 -->
      <view class="info-card">
        <text class="card-title">时间信息</text>
        <view class="info-list">
          <view class="info-item">
            <text class="item-label">创建时间</text>
            <text class="item-value">{{ formatTime(detail.createTime) }}</text>
          </view>
          <view class="info-item">
            <text class="item-label">更新时间</text>
            <text class="item-value">{{ formatTime(detail.updateTime) }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="!loading && !detail">
      <view class="empty-icon-wrapper"><AppIcon name="home" size="48" color="#BFBFBF" /></view>
      <text class="empty-text">站点信息不存在</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
import { getStationDetail } from '../../api/station.js'
import { formatTime, fmtDictName, getDictColor } from '../../utils/index.js'
import { loadDicts } from '../../utils/dict.js'

const loading = ref(true)
const detail = ref(null)
const stationName = ref('')
const stationId = ref('')

onLoad(async (options) => {
  await loadDicts()
  const id = options.id || ''
  stationName.value = decodeURIComponent(options.name || '')
  if (id) {
    stationId.value = id
    loadDetail(id)
  }
})

// 下拉刷新：重新加载站点详情
onPullDownRefresh(async () => {
  try {
    if (stationId.value) {
      await loadDetail(stationId.value)
    }
  } finally {
    uni.stopPullDownRefresh()
  }
})

const goBack = () => {
  uni.navigateBack()
}

const getStatusStyle = (status) => {
  const color = getDictColor('WashStation.status', status)
  if (color) return { color, backgroundColor: `${color}1A` }
  return {}
}

const loadDetail = async (id) => {
  loading.value = true
  try {
    const res = await getStationDetail(id)
    if (res && res.code === 200) {
      detail.value = res.data
      if (!stationName.value && res.data.stationName) {
        stationName.value = res.data.stationName
      }
    }
  } catch (error) {
    console.error('加载站点详情失败:', error)
  } finally {
    loading.value = false
  }
}

const previewImage = (url) => {
  uni.previewImage({
    urls: detail.value.pictures,
    current: url
  })
}
</script>

<style scoped>
.detail-container {
  min-height: 100vh;
  background-color: #F5F7FA;
  padding-bottom: 100rpx;
}

.header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: calc(24rpx + var(--status-bar-height));
  padding-right: 30rpx;
  padding-bottom: 24rpx;
  padding-left: 30rpx;
  background: #C6171E;
}
.nav-left, .nav-right { width: 120rpx; }
.back-btn { font-size: 36rpx; color: #FFFFFF; }
.nav-title { font-size: 34rpx; color: #FFFFFF; font-weight: 600; }

.loading-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 0;
}
.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid #E0E0E0;
  border-top-color: #C6171E;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.loading-text { font-size: 28rpx; color: #999999; margin-top: 20rpx; }

.image-section {
  display: flex;
  padding: 20rpx;
  gap: 12rpx;
  overflow-x: auto;
}
.station-image {
  width: 280rpx;
  height: 200rpx;
  border-radius: 16rpx;
  flex-shrink: 0;
}

.info-card {
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 24rpx;
  margin: 0 20rpx 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}
.card-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 20rpx;
  display: block;
  padding-bottom: 12rpx;
  border-bottom: 1rpx solid #F0F0F0;
}
.info-list {
  display: flex;
  flex-direction: column;
}
.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12rpx 0;
  border-bottom: 1rpx solid #F8F8F8;
}
.info-item:last-child {
  border-bottom: none;
}
.item-label {
  font-size: 26rpx;
  color: #999999;
}
.item-value {
  font-size: 26rpx;
  color: #1A1A1A;
  max-width: 400rpx;
  text-align: right;
}
.item-value.status {
  font-size: 22rpx;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-weight: 500;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 200rpx 0;
}
.empty-icon { font-size: 120rpx; margin-bottom: 20rpx; }
.empty-text { font-size: 28rpx; color: #999999; }
</style>