haha/haha-admin-mp/src/pages/shop/detail.vue

<template>
  <view class="page">
    <!-- 导航栏 -->
    <NavBar title="门店详情" :showBack="true" />
    
    <view class="detail-card" v-if="shop">
      <!-- 门店状态 -->
      <view class="status-section">
        <view class="status-header">
          <text class="shop-name">{{ shop.name }}</text>
          <view class="shop-status" :class="getStatusClass(shop.status)">
            <view class="status-dot"></view>
            <text>{{ getStatusText(shop.status) }}</text>
          </view>
        </view>
      </view>
      
      <!-- 基本信息 -->
      <view class="info-section">
        <text class="section-title">基本信息</text>
        <view class="info-item">
          <text class="label">门店地址</text>
          <text class="value">{{ shop.address }}</text>
        </view>
        <view class="info-item">
          <text class="label">联系电话</text>
          <text class="value">{{ shop.contactPhone }}</text>
        </view>
        <view class="info-item">
          <text class="label">负责人</text>
          <text class="value">{{ shop.contactName }}</text>
        </view>
        <view class="info-item">
          <text class="label">营业时间</text>
          <text class="value">{{ shop.businessHours }}</text>
        </view>
      </view>
      
      <!-- 销售数据 -->
      <view class="info-section">
        <text class="section-title">销售数据</text>
        <view class="sales-grid">
          <view class="sales-item">
            <text class="sales-value accent">¥{{ formatMoney(shop.todaySales) }}</text>
            <text class="sales-label">今日销售额</text>
          </view>
          <view class="sales-item">
            <text class="sales-value">{{ shop.todayOrders }}</text>
            <text class="sales-label">今日订单</text>
          </view>
          <view class="sales-item">
            <text class="sales-value primary">¥{{ formatMoney(shop.monthSales) }}</text>
            <text class="sales-label">本月销售额</text>
          </view>
        </view>
      </view>
      
      <!-- 门店设备 -->
      <view class="info-section" v-if="shop.devices && shop.devices.length > 0">
        <text class="section-title">门店设备</text>
        <view class="device-list">
          <view class="device-item" v-for="device in shop.devices" :key="device.id">
            <view class="device-info">
              <text class="device-name">{{ device.name }}</text>
              <text class="device-no">{{ device.deviceNo }}</text>
            </view>
            <view class="device-status" :class="getDeviceStatusClass(device.status)">
              <view class="status-dot"></view>
              <text>{{ getDeviceStatusText(device.status) }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import NavBar from '@/components/NavBar.vue';
import { getShopDetail } from '@/api/shop';
import { ShopStatusText, ShopStatusColor } from '@/mock/shop';
import { DeviceStatusText, DeviceStatusColor } from '@/mock/device';
import { formatMoney as formatMoneyUtil, showToast, navigateBack } from '@/utils/common';

const shop = ref<any>(null);
const formatMoney = formatMoneyUtil;

const getStatusText = (status: number) => ShopStatusText[status] || '未知';
const getStatusColor = (status: number) => ShopStatusColor[status] || '#94a3b8';
const getDeviceStatusText = (status: number) => DeviceStatusText[status] || '未知';
const getDeviceStatusColor = (status: number) => DeviceStatusColor[status] || '#94a3b8';

const getStatusClass = (status: number) => {
  if (status === 1) return 'active';
  return 'inactive';
};

const getDeviceStatusClass = (status: number) => {
  if (status === 1) return 'online';
  if (status === 0) return 'offline';
  return 'maintenance';
};

const loadDetail = async () => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const id = (currentPage as any).options?.id;
  
  if (!id) {
    showToast('门店ID不存在');
    navigateBack();
    return;
  }
  
  try {
    shop.value = await getShopDetail(Number(id));
  } catch (error) {
    showToast('加载门店详情失败');
    navigateBack();
  }
};

onMounted(() => {
  loadDetail();
});
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #f8fafc;
}

.status-section {
  background: #ffffff;
  padding: 30rpx 32rpx;
  margin-bottom: 16rpx;
  
  .status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .shop-name {
      font-size: 36rpx;
      font-weight: 700;
      color: #1e293b;
    }
    
    .shop-status {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8rpx;
      padding: 10rpx 20rpx;
      font-size: 24rpx;
      font-weight: 500;
      border-radius: 20rpx;
      
      .status-dot {
        width: 8rpx;
        height: 8rpx;
        border-radius: 50%;
      }
      
      &.active {
        background: #ecfdf5;
        color: #10b981;
        .status-dot { background: #10b981; }
      }
      
      &.inactive {
        background: #fff7ed;
        color: #f97316;
        .status-dot { background: #f97316; }
      }
    }
  }
}

.info-section {
  background: #ffffff;
  margin-bottom: 16rpx;
  padding: 24rpx 32rpx;
  
  .section-title {
    display: block;
    font-size: 28rpx;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 20rpx;
    padding-bottom: 16rpx;
    border-bottom: 1rpx solid #f1f5f9;
  }
  
  .info-item {
    display: flex;
    justify-content: space-between;
    padding: 14rpx 0;
    
    .label {
      font-size: 28rpx;
      color: #64748b;
    }
    
    .value {
      font-size: 28rpx;
      color: #1e293b;
    }
  }
  
  .sales-grid {
    display: flex;
    background: #f8fafc;
    border-radius: 12rpx;
    padding: 20rpx 0;
    
    .sales-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      
      .sales-value {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30rpx;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 8rpx;
        
        &.accent {
          color: #f97316;
        }
        
        &.primary {
          color: #10b981;
        }
      }
      
      .sales-label {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22rpx;
        color: #64748b;
      }
    }
  }
  
  .device-list {
    .device-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f1f5f9;
      
      &:last-child {
        border-bottom: none;
      }
      
      .device-info {
        .device-name {
          display: block;
          font-size: 28rpx;
          color: #1e293b;
          font-weight: 500;
          margin-bottom: 4rpx;
        }
        
        .device-no {
          font-size: 24rpx;
          color: #94a3b8;
          font-family: monospace;
        }
      }
      
      .device-status {
        display: flex;
        align-items: center;
        gap: 6rpx;
        padding: 8rpx 16rpx;
        border-radius: 8rpx;
        font-size: 22rpx;
        font-weight: 500;
        
        .status-dot {
          width: 8rpx;
          height: 8rpx;
          border-radius: 50%;
        }
        
        &.online {
          background: #ecfdf5;
          color: #10b981;
          .status-dot { background: #10b981; }
        }
        
        &.offline {
          background: #fff7ed;
          color: #f97316;
          .status-dot { background: #f97316; }
        }
        
        &.maintenance {
          background: #faf5ff;
          color: #a855f7;
          .status-dot { background: #a855f7; }
        }
      }
    }
  }
}
</style>