From 8bf635e997886e92e5b7206785e0c5abbca126c0 Mon Sep 17 00:00:00 2001
From: aaron <>
Date: Thu, 13 Mar 2025 00:01:00 +0800
Subject: [PATCH] update

---
 src/api/community.js          |  29 +++
 src/router/index.js           |   7 +
 src/views/CommunityDetail.vue | 408 ++++++++++++++++++++++++++++++++++
 src/views/Dashboard.vue       |  21 +-
 4 files changed, 463 insertions(+), 2 deletions(-)
 create mode 100644 src/api/community.js
 create mode 100644 src/views/CommunityDetail.vue

diff --git a/src/api/community.js b/src/api/community.js
new file mode 100644
index 0000000..67ca8d4
--- /dev/null
+++ b/src/api/community.js
@@ -0,0 +1,29 @@
+import request from '../utils/request';
+
+/**
+ * 获取小区详情
+ * @param {string} communityId 小区ID
+ * @returns {Promise} 返回小区详情数据
+ */
+export function getCommunityDetail(communityId) {
+  return request({
+    url: `/api/partner/community/${communityId}`,
+    method: 'get'
+  });
+}
+
+/**
+ * 获取小区配送员列表
+ * @param {Object} params 查询参数
+ * @param {string} params.community_id 小区ID
+ * @param {number} params.page 页码
+ * @param {number} params.pageSize 每页条数
+ * @returns {Promise} 返回配送员列表数据
+ */
+export function getCommunityDeliveryStaff(params) {
+  return request({
+    url: '/api/community/delivery-staff',
+    method: 'get',
+    params
+  });
+} 
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 1adc4ea..ac83c29 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -23,6 +23,13 @@ const routes = [
         component: () => import('../views/Dashboard.vue'),
         meta: { title: '仪表盘', icon: 'dashboard' }
       },
+      {
+        path: 'community/:id',
+        name: 'CommunityDetail',
+        component: () => import('../views/CommunityDetail.vue'),
+        meta: { title: '小区详情', icon: 'home' },
+        props: true
+      },
       {
         path: 'finance',
         redirect: '/finance/account',
diff --git a/src/views/CommunityDetail.vue b/src/views/CommunityDetail.vue
new file mode 100644
index 0000000..e5b57bc
--- /dev/null
+++ b/src/views/CommunityDetail.vue
@@ -0,0 +1,408 @@
+<template>
+  <div class="community-detail">
+    <a-page-header
+      :title="communityData.community_name || '小区详情'"
+      @back="goBack"
+      style="padding: 16px 0"
+    />
+    
+    <!-- 基本信息卡片 - 优化设计 -->
+    <a-row :gutter="16">
+      <a-col :span="24">
+        <a-card class="info-card">
+          <div class="info-header">
+            <div class="community-name">
+              <home-outlined class="icon" />
+              <span>{{ communityData.community_name || '-' }}</span>
+            </div>
+            <div class="community-meta">
+              <user-outlined class="icon" />
+              <span>服务商：{{ communityData.partner_names || '-' }}</span>
+              <a-divider type="vertical" />
+              <team-outlined class="icon" />
+              <span>用户数：{{ communityData.user_count || 0 }}</span>
+            </div>
+          </div>
+        </a-card>
+      </a-col>
+    </a-row>
+    
+    <!-- 统计卡片 -->
+    <a-row :gutter="16" style="margin-top: 16px">
+      <!-- 订单统计卡片 -->
+      <a-col :xs="24" :sm="24" :md="12">
+        <a-card class="stat-card">
+          <template #title>
+            <div class="card-title">
+              <shopping-outlined class="title-icon" />
+              <span>订单统计</span>
+            </div>
+          </template>
+          <div class="stat-content">
+            <div class="stat-item">
+              <div class="stat-label">订单总数</div>
+              <div class="stat-value orders-value">{{ communityData.total_order_count || 0 }}</div>
+            </div>
+            <a-divider type="vertical" class="item-divider" />
+            <div class="stat-item">
+              <div class="stat-label">今日订单数</div>
+              <div class="stat-value orders-value">{{ getTodayOrderCount() }}</div>
+            </div>
+            <a-divider type="vertical" class="item-divider" />
+            <div class="stat-item">
+              <div class="stat-label">昨日订单数</div>
+              <div class="stat-value orders-value">{{ communityData.yesterday_order_count || 0 }}</div>
+            </div>
+          </div>
+        </a-card>
+      </a-col>
+      
+      <!-- 销售统计卡片 -->
+      <a-col :xs="24" :sm="24" :md="12">
+        <a-card class="stat-card">
+          <template #title>
+            <div class="card-title">
+              <dollar-outlined class="title-icon" />
+              <span>销售统计</span>
+            </div>
+          </template>
+          <div class="stat-content">
+            <div class="stat-item">
+              <div class="stat-label">总销售金额</div>
+              <div class="stat-value sales-value">¥ {{ formatAmount(communityData.total_income) }}</div>
+            </div>
+            <a-divider type="vertical" class="item-divider" />
+            <div class="stat-item">
+              <div class="stat-label">今日销售金额</div>
+              <div class="stat-value sales-value">¥ {{ formatAmount(communityData.today_income) }}</div>
+            </div>
+            <a-divider type="vertical" class="item-divider" />
+            <div class="stat-item">
+              <div class="stat-label">昨日销售金额</div>
+              <div class="stat-value sales-value">¥ {{ formatAmount(communityData.yesterday_income) }}</div>
+            </div>
+          </div>
+        </a-card>
+      </a-col>
+    </a-row>
+    
+    <!-- 配送员列表 -->
+    <a-card title="配送员列表" style="margin-top: 16px">
+      <template #extra>
+        <a-button type="primary" @click="refreshData">
+          <reload-outlined style="color: #fff;" />
+          刷新
+        </a-button>
+      </template>
+      <a-table
+        :dataSource="deliveryStaffList"
+        :loading="loading"
+        :pagination="false"
+        rowKey="delivery_id"
+      >
+        <a-table-column title="配送员ID" dataIndex="delivery_id" key="delivery_id" width="100px" />
+        <a-table-column title="配送员名字" dataIndex="delivery_name" key="delivery_name" />
+        <a-table-column title="今日订单数" dataIndex="today_order_count" key="today_order_count">
+          <template #default="{ text, record }">
+            {{ record.today_order_count || 0 }}
+          </template>
+        </a-table-column>
+        <a-table-column title="昨日订单数" dataIndex="yesterday_order_count" key="yesterday_order_count">
+          <template #default="{ text, record }">
+            {{ record.yesterday_order_count || 0 }}
+          </template>
+        </a-table-column>
+        <a-table-column title="今日销售金额" dataIndex="today_income" key="today_income">
+          <template #default="{ text, record }">
+            ¥ {{ formatAmount(record.today_income) }}
+          </template>
+        </a-table-column>
+        <a-table-column title="昨日销售金额" dataIndex="yesterday_income" key="yesterday_income">
+          <template #default="{ text, record }">
+            ¥ {{ formatAmount(record.yesterday_income) }}
+          </template>
+        </a-table-column>
+        <a-table-column title="配送总次数" dataIndex="total_order_count" key="total_order_count">
+          <template #default="{ text, record }">
+            {{ record.total_order_count || 0 }}
+          </template>
+        </a-table-column>
+        <a-table-column title="总销售金额" dataIndex="total_income" key="total_income">
+          <template #default="{ text, record }">
+            ¥ {{ formatAmount(record.total_income) }}
+          </template>
+        </a-table-column>
+      </a-table>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import { ref, reactive, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { message } from 'ant-design-vue';
+import { 
+  UserOutlined, 
+  ShoppingOutlined, 
+  DollarOutlined, 
+  HomeOutlined,
+  TeamOutlined,
+  ReloadOutlined
+} from '@ant-design/icons-vue';
+import { getCommunityDetail } from '../api/community';
+
+export default {
+  name: 'CommunityDetail',
+  components: {
+    UserOutlined,
+    ShoppingOutlined,
+    DollarOutlined,
+    HomeOutlined,
+    TeamOutlined,
+    ReloadOutlined
+  },
+  setup() {
+    const route = useRoute();
+    const router = useRouter();
+    const communityId = ref(route.params.id);
+    
+    // 小区数据
+    const communityData = ref({});
+    // 配送员列表
+    const deliveryStaffList = ref([]);
+    // 加载状态
+    const loading = ref(false);
+
+    // 获取小区详情数据
+    const fetchCommunityDetail = async () => {
+      loading.value = true;
+      try {
+        const data = await getCommunityDetail(communityId.value);
+        console.log('接口返回数据:', data); // 添加调试日志
+        
+        // 直接使用返回的数据，因为request.js已经处理了响应
+        communityData.value = data || {};
+        console.log('处理后的小区数据:', communityData.value); // 添加调试日志
+        
+        // 确保字段名称一致
+        if (data) {
+          // 如果接口返回的字段名与组件中使用的不一致，进行适配
+          if (data.today_order_income !== undefined && data.today_income === undefined) {
+            communityData.value.today_income = data.today_order_income;
+          }
+          
+          if (data.yesterday_order_income !== undefined && data.yesterday_income === undefined) {
+            communityData.value.yesterday_income = data.yesterday_order_income;
+          }
+          
+          if (data.total_order_income !== undefined && data.total_income === undefined) {
+            communityData.value.total_income = data.total_order_income;
+          }
+        }
+        
+        deliveryStaffList.value = data.delivery_list || [];
+        console.log('配送员列表:', deliveryStaffList.value); // 添加调试日志
+        
+        // 适配配送员列表中的字段
+        if (deliveryStaffList.value && deliveryStaffList.value.length > 0) {
+          deliveryStaffList.value = deliveryStaffList.value.map(item => {
+            // 如果字段名不一致，进行适配
+            if (item.income !== undefined && item.today_income === undefined) {
+              item.today_income = item.income;
+            }
+            return item;
+          });
+        }
+      } catch (error) {
+        console.error('获取小区详情失败:', error);
+        message.error('获取小区详情失败');
+      } finally {
+        loading.value = false;
+      }
+    };
+
+    // 刷新数据
+    const refreshData = () => {
+      fetchCommunityDetail();
+    };
+
+    // 返回上一页
+    const goBack = () => {
+      router.go(-1);
+    };
+
+    // 格式化金额，保留2位小数
+    const formatAmount = (amount) => {
+      if (amount === undefined || amount === null) return '0.00';
+      return Number(amount).toFixed(2);
+    };
+
+    // 计算今日订单总数
+    const getTodayOrderCount = () => {
+      // 如果communityData中有today_order_count，直接使用
+      if (communityData.value && communityData.value.today_order_count !== undefined) {
+        return communityData.value.today_order_count;
+      }
+      
+      // 否则从配送员列表中计算
+      if (!deliveryStaffList.value || deliveryStaffList.value.length === 0) return 0;
+      return deliveryStaffList.value.reduce((sum, staff) => sum + (staff.today_order_count || 0), 0);
+    };
+
+    // 计算今日销售金额
+    const getTodayIncome = () => {
+      // 如果communityData中有today_income，直接使用
+      if (communityData.value && communityData.value.today_income !== undefined) {
+        return communityData.value.today_income;
+      }
+      
+      // 否则从配送员列表中计算
+      if (!deliveryStaffList.value || deliveryStaffList.value.length === 0) return 0;
+      return deliveryStaffList.value.reduce((sum, staff) => sum + (staff.today_income || 0), 0);
+    };
+
+    onMounted(() => {
+      refreshData();
+    });
+
+    return {
+      communityId,
+      communityData,
+      deliveryStaffList,
+      loading,
+      refreshData,
+      goBack,
+      formatAmount,
+      getTodayOrderCount,
+      getTodayIncome
+    };
+  }
+};
+</script>
+
+<style scoped>
+.community-detail {
+  padding: 8px;
+}
+
+.info-card {
+  margin-bottom: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
+}
+
+.info-header {
+  padding: 0 0 8px 0;
+}
+
+.community-name {
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+}
+
+.community-name .icon {
+  color: #52c41a;
+  margin-right: 8px;
+  font-size: 20px;
+}
+
+.community-meta {
+  color: rgba(0, 0, 0, 0.65);
+  display: flex;
+  align-items: center;
+}
+
+.community-meta .icon {
+  margin-right: 4px;
+}
+
+.community-meta .ant-divider {
+  margin: 0 12px;
+}
+
+/* 统计卡片样式 */
+.stat-card {
+  height: 100%;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
+  transition: all 0.3s;
+}
+
+.stat-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  transform: translateY(-2px);
+}
+
+.card-title {
+  display: flex;
+  align-items: center;
+  font-weight: 600;
+}
+
+.title-icon {
+  margin-right: 8px;
+  font-size: 18px;
+}
+
+.stat-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 0;
+}
+
+.stat-item {
+  text-align: center;
+  flex: 1;
+}
+
+.item-divider {
+  height: 50px;
+  margin: 0;
+}
+
+.stat-label {
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+  margin-bottom: 8px;
+}
+
+.stat-value {
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.orders-value {
+  color: #1890ff;
+}
+
+.sales-value {
+  color: #fa8c16;
+}
+
+@media (max-width: 768px) {
+  .stat-content {
+    flex-direction: column;
+  }
+  
+  .item-divider {
+    display: none;
+  }
+  
+  .stat-item {
+    margin-bottom: 16px;
+    padding: 8px 0;
+    border-bottom: 1px solid #f0f0f0;
+  }
+  
+  .stat-item:last-child {
+    margin-bottom: 0;
+    border-bottom: none;
+  }
+  
+  .stat-card {
+    margin-bottom: 16px;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index f8ce6bd..e153941 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -90,7 +90,16 @@
         rowKey="community_id"
       >
         <a-table-column title="小区ID" dataIndex="community_id" key="community_id" width="100px" />
-        <a-table-column title="小区名称" dataIndex="community_name" key="community_name" />
+        <a-table-column title="小区名称" dataIndex="community_name" key="community_name">
+          <template #default="{ text, record }">
+            <a @click="viewCommunityDetail(record.community_id)">{{ text }}</a>
+          </template>
+        </a-table-column>
+        <a-table-column title="用户数" key="user_count">
+          <template #default="{ text, record }">
+            {{ record.user_count || 0 }}
+          </template>
+        </a-table-column>
         <a-table-column title="今日订单数" key="today_order_count">
           <template #default="{ text, record }">
             {{ record.today_order_count || 0 }}
@@ -119,6 +128,7 @@
 <script>
 import { ref, reactive, onMounted } from 'vue';
 import { message } from 'ant-design-vue';
+import { useRouter } from 'vue-router';
 import { 
   UserOutlined, 
   ShoppingOutlined, 
@@ -142,6 +152,7 @@ export default {
     ReloadOutlined
   },
   setup() {
+    const router = useRouter();
     // 汇总数据
     const summaryData = ref({});
     // 小区列表
@@ -221,6 +232,11 @@ export default {
       return Number(amount).toFixed(2);
     };
 
+    // 点击小区名称进入小区详情页面
+    const viewCommunityDetail = (communityId) => {
+      router.push(`/community/${communityId}`);
+    };
+
     onMounted(() => {
       refreshData();
     });
@@ -237,7 +253,8 @@ export default {
       handlePageSizeChange,
       getComparisonText,
       getComparisonColor,
-      formatAmount
+      formatAmount,
+      viewCommunityDetail
     };
   }
 };