update
This commit is contained in:
aaron
parent
7d9652c3dc
commit
8bf635e997
29
src/api/community.js
Normal file
29
src/api/community.js
Normal file
@ -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
|
||||
});
|
||||
}
|
||||
@ -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',
|
||||
|
||||
408
src/views/CommunityDetail.vue
Normal file
408
src/views/CommunityDetail.vue
Normal file
@ -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>
|
||||
@ -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
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user