share-space-vue/src/views/system/store/store_detail.vue

<template>
  <div class="store-detail">
    <!-- 基本信息卡片 -->
    <el-card class="info-card" shadow="hover">
      <div slot="header" class="card-header">
        <div class="header-left">
          <span class="title">店铺详情</span>
          <el-tag size="small" :type="getStatusType(storeData.status)" class="status-tag">
            <dict-tag :options="dict.type.ss_store_status" :value="storeData.status" />
          </el-tag>
        </div>
        <div class="action-buttons">
          <!-- <el-button type="primary" size="small" @click="handleEdit">编辑</el-button> -->
          <el-button type="danger" size="small" @click="handleDelete">删除</el-button>
        </div>
      </div>
      <el-row :gutter="20">
        <el-col :span="2">
          <div class="store-image">
            <image-preview :src="storeData.picture" :width="80" :height="80" />
          </div>
        </el-col>
        <el-col :span="7">
          <div class="info-item">
            <span class="label">店铺名称:</span>
            <span class="value">{{ storeData.name || '--' }}</span>
          </div>
          <div class="info-item">
            <span class="label">联系人:</span>
            <span class="value">{{ storeData.contactName || '--' }}</span>
          </div>
          <div class="info-item">
            <span class="label">联系电话:</span>
            <span class="value">{{ storeData.contactMobile || '--' }}</span>
          </div>
          <div class="info-item">
            <span class="label">营业时间:</span>
            <span class="value">{{ formatBusinessTime(storeData.businessTimeStart, storeData.businessTimeEnd) }}</span>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="info-item">
            <span class="label">店长:</span>
            <span class="value">{{ storeData.managerName || '--' }}</span>
          </div>
          <div class="info-item">
            <span class="label">客服电话:</span>
            <span class="value">{{ storeData.serverPhone || '--' }}</span>
          </div>
          <div class="info-item">
            <span class="label">身份证号:</span>
            <span class="value">{{ storeData.idcard || '--' }}</span>
          </div>
          <div class="info-item">
            <span class="label">地址:</span>
            <span class="value">{{ storeData.address || '--' }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <span class="label">标签:</span>
            <dict-tag :options="dict.type.ss_store_tags" :value="storeData.tags" />
          </div>
          <div class="info-item">
            <span class="label">类型:</span>
            <dict-tag :options="dict.type.ss_room_type" :value="storeData.typeTags" />
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 顶部统计卡片 -->
    <el-row :gutter="20" class="stat-cards">
      <!-- 今日收入 -->
      <el-col :span="4">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-icon income">
            <i class="el-icon-money"></i>
          </div>
          <div class="stat-content">
            <div class="stat-label">今日收入</div>
            <div class="stat-value">¥ {{ stats.todayIncome || '0.00' }}</div>

          </div>
        </el-card>
      </el-col>

      <!-- 本月收入 -->
      <el-col :span="4">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-icon income-month">
            <i class="el-icon-wallet"></i>
          </div>
          <div class="stat-content">
            <div class="stat-label">本月收入</div>
            <div class="stat-value">¥ {{ stats.monthIncome || '0.00' }}</div>

          </div>
        </el-card>
      </el-col>

      <!-- 总营收 -->
      <el-col :span="4">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-icon total-income">
            <i class="el-icon-bank-card"></i>
          </div>
          <div class="stat-content">
            <div class="stat-label">总营收</div>
            <div class="stat-value">¥ {{ stats.totalIncome || '0.00' }}</div>

          </div>
        </el-card>
      </el-col>

      <!-- 总提现 -->
      <el-col :span="4">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-icon withdraw">
            <i class="el-icon-wallet"></i>
          </div>
          <div class="stat-content">
            <div class="stat-label">总提现</div>
            <div class="stat-value">¥ {{ stats.totalWithdraw || '0.00' }}</div>

          </div>
        </el-card>
      </el-col>

      <!-- 房间统计 -->
      <el-col :span="4">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-icon room">
            <i class="el-icon-office-building"></i>
          </div>
          <div class="stat-content">
            <div class="stat-label">房间使用</div>
            <div class="stat-numbers">
              <span class="current">{{ stats.usedRooms || 0 }}</span>
              <span class="divider">/</span>
              <span class="total">{{ stats.totalRooms || 0 }}</span>
            </div>

          </div>
        </el-card>
      </el-col>

      <!-- 设施统计 -->
      <el-col :span="4">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-icon facility">
            <i class="el-icon-set-up"></i>
          </div>

          <div class="stat-content">
            <div class="stat-label">设施使用</div>
            <div class="stat-numbers">
              <span class="current">{{ stats.usedFacilities || 0 }}</span>
              <span class="divider">/</span>
              <span class="total">{{ stats.totalFacilities || 0 }}</span>
            </div>

          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表和地图区域 -->
    <el-row :gutter="20" class="chart-section">
      <el-col :span="16">
        <el-card class="chart-card" shadow="hover">
          <div slot="header" class="card-header">
            <span class="title">收入趋势</span>
            <el-radio-group v-model="chartTimeRange" size="small" @change="handleChartRangeChange">
              <el-radio-button label="week">近7天</el-radio-button>
              <el-radio-button label="month">近30天</el-radio-button>
            </el-radio-group>
          </div>
          <div class="chart-container" ref="incomeChart"></div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="map-card" shadow="hover">
          <div slot="header" class="card-header">
            <span class="title">店铺位置</span>
          </div>
          <div class="map-container" id="mapContainer"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-tabs v-model="activeTab" class="detail-tabs">

      <el-tab-pane label="订单列表" name="orders">
        <order :storeId="storeId"></order>
      </el-tab-pane>
      <el-tab-pane label="房间列表" name="rooms">
        <room :storeId="storeId"></room>
      </el-tab-pane>
      <el-tab-pane label="设施列表" name="equipments">
        <equipment :storeId="storeId"></equipment>
      </el-tab-pane>
      <el-tab-pane label="设备列表" name="devices">
        <device :storeId="storeId"></device>
      </el-tab-pane>
      <el-tab-pane label="员工列表" name="users">
        <user :storeId="storeId"></user>
      </el-tab-pane>


    </el-tabs>
  </div>
</template>
<script>
import { getStore, delStore } from "@/api/system/store";
import * as echarts from 'echarts';
import AMapLoader from "@amap/amap-jsapi-loader";
import globalConfig from '@/utils/config/globalConfig';
import order from '@/views/system/order/index.vue';
import room from '@/views/system/room/index.vue';
import equipment from '@/views/system/equipment/index.vue';
import device from '@/views/system/device/index.vue';
import user from '@/views/user/user/index.vue';
export default {
  name: 'StoreDetail',
  dicts: ['ss_store_status', 'ss_store_tags', 'ss_room_type'],
  components: {
    order,
    room,
    equipment,
    device,
    user
  },
  data() {
    return {
      storeId: null,
      storeData: {},
      map: null,
      marker: null,
      stats: {
        todayIncome: 0,
        monthIncome: 0,
        totalIncome: 0,
        totalWithdraw: 0,
        totalRooms: 0,
        usedRooms: 0,
        totalFacilities: 0,
        usedFacilities: 0
      },
      chartTimeRange: 'week',
      incomeChart: null,
      activeTab: 'orders',
    }
  },
  created() {
    this.storeId = this.$route.params.storeId;
    this.getStoreData();
    this.getStoreStats();
  },
  mounted() {
    this.$nextTick(() => {
      this.initMap();
      this.initChart();
    });
  },
  beforeDestroy() {
    if (this.incomeChart) {
      this.incomeChart.dispose();
    }
    if (this.map) {
      this.map.destroy();
    }
    window.removeEventListener('resize', this.resizeChart);
  },
  methods: {
    getStatusType(status) {
      const statusMap = {
        0: 'info',
        1: 'success',
        2: 'danger'
      };
      return statusMap[status] || 'info';
    },
    initChart() {
      if (!this.$refs.incomeChart) return;

      this.incomeChart = echarts.init(this.$refs.incomeChart);
      const option = {
        tooltip: {
          trigger: 'axis',
          formatter: '{b}<br />{a}: ¥{c}'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLine: {
            lineStyle: {
              color: '#DCDFE6'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '¥{value}'
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: '#EBEEF5'
            }
          }
        },
        series: [{
          name: '收入',
          type: 'line',
          smooth: true,
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          itemStyle: {
            color: '#409EFF'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(64,158,255,0.3)'
            }, {
              offset: 1,
              color: 'rgba(64,158,255,0.1)'
            }])
          }
        }]
      };
      this.incomeChart.setOption(option);

      window.addEventListener('resize', this.resizeChart);
    },
    resizeChart() {
      if (this.incomeChart) {
        this.incomeChart.resize();
      }
    },
    getStoreData() {
      getStore(this.storeId).then(response => {
        this.storeData = response.data;
        this.$nextTick(() => {
          this.updateMapMarker();
        });
      });
    },
    getStoreStats() {
      // Mock数据，实际项目中替换为API调用
      this.stats = {
        todayIncome: 1234.56,
        monthIncome: 45678.90,
        totalDevices: 100,
        onlineDevices: 85
      };
    },
    handleChartRangeChange(range) {
      // Mock数据，实际项目中替换为API调用
      const mockData = {
        week: {
          xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          series: [820, 932, 901, 934, 1290, 1330, 1320]
        },
        month: {
          xAxis: Array.from({ length: 30 }, (_, i) => `${i + 1}日`),
          series: Array.from({ length: 30 }, () => Math.floor(Math.random() * 2000 + 500))
        }
      };

      const data = mockData[range];
      this.incomeChart.setOption({
        xAxis: { data: data.xAxis },
        series: [{ data: data.series }]
      });
    },
    formatBusinessTime(start, end) {
      if (!start && !end) return '--';
      return `${start || '--'} - ${end || '--'}`;
    },
    async initMap() {
      try {
        await AMapLoader.load({
          key: globalConfig.aMap.key,
          version: "2.0",
          plugins: [
            "AMap.ToolBar",
            "AMap.Scale",
            "AMap.PlaceSearch",
          ],
        });

        this.map = new AMap.Map('mapContainer', {
          zoom: 15,
          viewMode: '3D',
          // mapStyle: 'amap://styles/fresh'
        });

        this.map.addControl(new AMap.ToolBar({
          position: 'RB'
        }));

        this.map.addControl(new AMap.Scale());

        // 如果已有店铺数据，更新地图标记
        if (this.storeData.longitude && this.storeData.latitude) {
          this.updateMapMarker();
        }
      } catch (e) {
        console.error('地图初始化失败:', e);
      }
    },
    updateMapMarker() {
      const { longitude: lng, latitude: lat } = this.storeData;
      if (!lng || !lat) return;

      this.map.setCenter([lng, lat]);

      if (this.marker) {
        this.map.remove(this.marker);
      }

      this.marker = new AMap.Marker({
        position: new AMap.LngLat(lng, lat),
        title: this.storeData.name,
        animation: 'AMAP_ANIMATION_DROP'
      });

      this.map.add(this.marker);

      const infoWindow = new AMap.InfoWindow({
        content: `
          <div class="info-window">
            <h4>${this.storeData.name || '未命名店铺'}</h4>
            <p>${this.storeData.address || '暂无地址'}</p>
          </div>
        `,
        offset: new AMap.Pixel(0, -30)
      });

      this.marker.on('click', () => {
        infoWindow.open(this.map, this.marker.getPosition());
      });
    },
    handleEdit() {
      this.$router.push(`/system/store/edit/${this.storeId}`);
    },
    handleDelete() {
      this.$modal.confirm('是否确认删除该店铺？').then(() => {
        return delStore(this.storeId);
      }).then(() => {
        this.$modal.msgSuccess("删除成功");
        this.$router.push('/system/store/list');
      }).catch(() => { });
    }
  }
}
</script>

<style lang="scss" scoped>
.store-detail {
  padding: 20px;

  .info-card {
    margin-bottom: 20px;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .header-left {
        display: flex;
        align-items: center;

        .title {
          font-size: 16px;
          font-weight: bold;
          margin-right: 12px;
        }

        .status-tag {
          margin-left: 8px;
        }
      }

      .action-buttons {
        .el-button {
          margin-left: 10px;
        }
      }
    }

    .info-item {
      margin-bottom: 16px;
      display: flex;
      align-items: center;

      .label {
        color: #909399;
        margin-right: 12px;
        min-width: 80px;
        font-size: 14px;
      }

      .value {
        color: #303133;
        font-size: 14px;
      }
    }

    .store-image {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px 0;

      :deep(.el-image) {
        border-radius: 8px;
        overflow: hidden;
        display: block;
        border: 1px solid #EBEEF5;
      }
    }
  }

  .detail-tabs {
    margin-top: 20px;

    .search-form {
      margin-bottom: 20px;

      .el-form-item {
        margin-bottom: 10px;
      }
    }
  }

  .stat-cards {
    margin-bottom: 20px;

    .stat-card {
      height: 120px;
      display: flex;
      padding: 0 10px;
      transition: all 0.3s;

      &:hover {
        transform: translateY(-2px);
      }

      .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 16px;

        i {
          font-size: 24px;
          color: #fff;
        }

        &.income {
          background: linear-gradient(135deg, #36d1dc, #5b86e5);
        }

        &.income-month {
          background: linear-gradient(135deg, #ff9a9e, #fad0c4);
        }

        &.total-income {
          background: linear-gradient(135deg, #a8edea, #fed6e3);
        }

        &.withdraw {
          background: linear-gradient(135deg, #84fab0, #8fd3f4);
        }

        &.room {
          background: linear-gradient(135deg, #fbc2eb, #a6c1ee);
        }

        &.facility {
          background: linear-gradient(135deg, #f6d365, #fda085);
        }
      }

      .stat-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .stat-value {
          font-size: 22px;
          font-weight: bold;
          color: #303133;
          margin-bottom: 8px;
          line-height: 1.2;
        }

        .stat-numbers {
          font-size: 22px;
          font-weight: bold;
          color: #303133;
          margin-bottom: 8px;
          line-height: 1.2;

          .current {
            color: #409EFF;
          }

          .divider {
            margin: 0 4px;
            color: #909399;
          }

          .total {
            color: #606266;
          }
        }

        .stat-label {
          font-size: 14px;
          color: #909399;
        }
      }
    }
  }

  .chart-section {
    margin-bottom: 20px;

    .card-header {
      .title {
        font-size: 16px;
        font-weight: bold;
      }
    }

    .chart-card {
      .chart-container {
        height: 350px;
        padding: 10px;
      }
    }

    .map-card {
      .map-container {
        height: 350px;
      }
    }
  }
}

:deep(.info-window) {
  padding: 12px;

  h4 {
    margin: 0 0 8px;
    color: #303133;
    font-size: 16px;
  }

  p {
    margin: 0;
    color: #606266;
    font-size: 14px;
  }
}

:deep(.el-tag) {
  margin-right: 8px;
}
</style>