update
This commit is contained in:
aaron
parent
b07dc4a79d
commit
a28ae6063f
@ -9,14 +9,14 @@ import config from '../utils/config';
|
||||
* @param {string} data.role - 角色，默认为 partner
|
||||
* @returns {Promise} - 返回登录结果
|
||||
*/
|
||||
export function login(data) {
|
||||
export function login(postData) {
|
||||
return request({
|
||||
url: config.API.LOGIN,
|
||||
method: 'post',
|
||||
data: {
|
||||
phone: data.phone,
|
||||
password: data.password,
|
||||
role: data.role || 'partner'
|
||||
phone: postData.phone,
|
||||
password: postData.password,
|
||||
role: 'partner'
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -1,75 +1,138 @@
|
||||
<template>
|
||||
<div class="dashboard">
|
||||
<!-- 汇总卡片 -->
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="6">
|
||||
<a-card>
|
||||
<a-col :span="8" :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
|
||||
<a-card class="card-community">
|
||||
<template #title>
|
||||
<span><user-outlined /> 用户总数</span>
|
||||
<span><home-outlined /> 运营小区数</span>
|
||||
</template>
|
||||
<div class="card-content">
|
||||
<h2>1,286</h2>
|
||||
<p>较上周 <a-tag color="green">+12%</a-tag></p>
|
||||
<h2>{{ dashboardData.communityCount }}</h2>
|
||||
<p>本月新增 <a-tag color="success">+{{ dashboardData.newCommunityCount }}</a-tag></p>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-card>
|
||||
<a-col :span="8" :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
|
||||
<a-card class="card-orders">
|
||||
<template #title>
|
||||
<span><shopping-outlined /> 订单总数</span>
|
||||
<span><shopping-outlined /> 总配送订单数</span>
|
||||
</template>
|
||||
<div class="card-content">
|
||||
<h2>4,389</h2>
|
||||
<p>较上周 <a-tag color="green">+8%</a-tag></p>
|
||||
<h2>{{ dashboardData.totalOrders.toLocaleString() }}</h2>
|
||||
<div class="comparison-data">
|
||||
<div>
|
||||
<span>今日：</span>
|
||||
<span class="highlight">{{ dashboardData.todayOrders }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>昨日：</span>
|
||||
<span>{{ dashboardData.yesterdayOrders }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-card>
|
||||
<a-col :span="8" :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
|
||||
<a-card class="card-users">
|
||||
<template #title>
|
||||
<span><dollar-outlined /> 销售额</span>
|
||||
<span><user-outlined /> 总用户数</span>
|
||||
</template>
|
||||
<div class="card-content">
|
||||
<h2>¥ 126,560</h2>
|
||||
<p>较上周 <a-tag color="green">+23%</a-tag></p>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-card>
|
||||
<template #title>
|
||||
<span><team-outlined /> 新增会员</span>
|
||||
</template>
|
||||
<div class="card-content">
|
||||
<h2>128</h2>
|
||||
<p>较上周 <a-tag color="red">-5%</a-tag></p>
|
||||
<h2>{{ dashboardData.totalUsers.toLocaleString() }}</h2>
|
||||
<div class="comparison-data">
|
||||
<div>
|
||||
<span>今日新增：</span>
|
||||
<span class="highlight">{{ dashboardData.todayNewUsers }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>昨日新增：</span>
|
||||
<span>{{ dashboardData.yesterdayNewUsers }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="16" style="margin-top: 16px">
|
||||
<a-col :span="16">
|
||||
<a-card title="销售趋势">
|
||||
<div style="height: 300px; display: flex; justify-content: center; align-items: center;">
|
||||
<p>这里将显示销售趋势图表</p>
|
||||
<a-col :span="8" :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
|
||||
<a-card class="card-sales">
|
||||
<template #title>
|
||||
<span><dollar-outlined /> 累计销售金额</span>
|
||||
</template>
|
||||
<div class="card-content">
|
||||
<h2>¥ {{ dashboardData.totalSales.toLocaleString() }}</h2>
|
||||
<div class="comparison-data">
|
||||
<div>
|
||||
<span>今日：</span>
|
||||
<span class="highlight">¥ {{ dashboardData.todaySales.toLocaleString() }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>昨日：</span>
|
||||
<span>¥ {{ dashboardData.yesterdaySales.toLocaleString() }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-card title="最近活动">
|
||||
<a-list item-layout="horizontal" :data-source="activities">
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item>
|
||||
<a-list-item-meta>
|
||||
<template #avatar>
|
||||
<a-avatar :src="item.avatar" />
|
||||
</template>
|
||||
<template #title>{{ item.title }}</template>
|
||||
<template #description>{{ item.description }}</template>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
<a-col :span="8" :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
|
||||
<a-card class="card-profit">
|
||||
<template #title>
|
||||
<span><wallet-outlined /> 累计分润金额</span>
|
||||
</template>
|
||||
<div class="card-content">
|
||||
<h2>¥ {{ dashboardData.totalProfit.toLocaleString() }}</h2>
|
||||
<div class="comparison-data">
|
||||
<div>
|
||||
<span>今日：</span>
|
||||
<span class="highlight">¥ {{ dashboardData.todayProfit.toLocaleString() }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>昨日：</span>
|
||||
<span>¥ {{ dashboardData.yesterdayProfit.toLocaleString() }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="8" :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
|
||||
<a-card class="card-conversion">
|
||||
<template #title>
|
||||
<span><rise-outlined /> 订单转化率</span>
|
||||
</template>
|
||||
<div class="card-content">
|
||||
<h2>{{ dashboardData.conversionRate }}%</h2>
|
||||
<p>较上周 <a-tag :color="dashboardData.conversionRateChange > 0 ? 'success' : 'error'">{{ dashboardData.conversionRateChange > 0 ? '+' : '' }}{{ dashboardData.conversionRateChange }}%</a-tag></p>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="16" style="margin-top: 16px">
|
||||
<a-col :span="24">
|
||||
<a-card title="每日分润趋势" class="card-chart">
|
||||
<div style="height: 350px; padding: 0 20px;">
|
||||
<a-row style="margin-bottom: 20px;">
|
||||
<a-col :span="24">
|
||||
<div class="chart-legend">
|
||||
<div class="chart-legend-item">
|
||||
<div class="chart-legend-color" style="background-color: #1890ff;"></div>
|
||||
<span>分润金额</span>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div class="chart-container">
|
||||
<div v-for="(item, index) in dashboardData.dailyProfitData" :key="index" class="chart-bar-item">
|
||||
<div class="chart-bar-value">¥{{ item.value }}</div>
|
||||
<div class="chart-bar">
|
||||
<div class="chart-bar-inner" :style="{ height: (item.value / maxProfitValue * 100) + '%' }"></div>
|
||||
</div>
|
||||
<div class="chart-bar-label">{{ item.date }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
@ -77,12 +140,14 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
import { ref, reactive, onMounted, computed } from 'vue';
|
||||
import {
|
||||
UserOutlined,
|
||||
ShoppingOutlined,
|
||||
DollarOutlined,
|
||||
TeamOutlined
|
||||
HomeOutlined,
|
||||
WalletOutlined,
|
||||
RiseOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
@ -91,34 +156,68 @@ export default {
|
||||
UserOutlined,
|
||||
ShoppingOutlined,
|
||||
DollarOutlined,
|
||||
TeamOutlined
|
||||
HomeOutlined,
|
||||
WalletOutlined,
|
||||
RiseOutlined
|
||||
},
|
||||
setup() {
|
||||
const activities = ref([
|
||||
{
|
||||
title: '张三',
|
||||
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
|
||||
description: '刚刚完成了一笔订单'
|
||||
},
|
||||
{
|
||||
title: '李四',
|
||||
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
|
||||
description: '刚刚注册成为新用户'
|
||||
},
|
||||
{
|
||||
title: '王五',
|
||||
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
|
||||
description: '提交了一个工单'
|
||||
},
|
||||
{
|
||||
title: '系统通知',
|
||||
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
|
||||
description: '服务器将于今晚23:00进行维护'
|
||||
}
|
||||
]);
|
||||
// 仪表盘数据
|
||||
const dashboardData = reactive({
|
||||
// 运营小区数
|
||||
communityCount: 68,
|
||||
newCommunityCount: 5,
|
||||
|
||||
// 总配送订单数
|
||||
totalOrders: 24689,
|
||||
todayOrders: 386,
|
||||
yesterdayOrders: 412,
|
||||
|
||||
// 总用户数
|
||||
totalUsers: 8756,
|
||||
todayNewUsers: 42,
|
||||
yesterdayNewUsers: 38,
|
||||
|
||||
// 累计销售金额
|
||||
totalSales: 1268950,
|
||||
todaySales: 28650,
|
||||
yesterdaySales: 31280,
|
||||
|
||||
// 累计分润金额
|
||||
totalProfit: 253790,
|
||||
todayProfit: 5730,
|
||||
yesterdayProfit: 6256,
|
||||
|
||||
// 订单转化率
|
||||
conversionRate: 32.6,
|
||||
conversionRateChange: 2.8,
|
||||
|
||||
// 每日分润数据
|
||||
dailyProfitData: [
|
||||
{ date: '6/1', value: 4280 },
|
||||
{ date: '6/2', value: 5120 },
|
||||
{ date: '6/3', value: 4830 },
|
||||
{ date: '6/4', value: 5680 },
|
||||
{ date: '6/5', value: 6120 },
|
||||
{ date: '6/6', value: 5890 },
|
||||
{ date: '6/7', value: 4950 },
|
||||
{ date: '6/8', value: 5230 },
|
||||
{ date: '6/9', value: 5780 },
|
||||
{ date: '6/10', value: 6050 },
|
||||
{ date: '6/11', value: 5840 },
|
||||
{ date: '6/12', value: 5320 },
|
||||
{ date: '6/13', value: 6256 },
|
||||
{ date: '6/14', value: 5730 }
|
||||
]
|
||||
});
|
||||
|
||||
// 计算最大分润值，用于图表显示
|
||||
const maxProfitValue = computed(() => {
|
||||
return Math.max(...dashboardData.dailyProfitData.map(item => item.value)) * 1.1;
|
||||
});
|
||||
|
||||
return {
|
||||
activities
|
||||
dashboardData,
|
||||
maxProfitValue
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -136,18 +235,30 @@ export default {
|
||||
.card-content h2 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 8px;
|
||||
color: #1a1a1a;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card-content p {
|
||||
margin: 0;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
.comparison-data {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.comparison-data .highlight {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.ant-card) {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
:deep(.ant-card:hover) {
|
||||
@ -161,64 +272,140 @@ export default {
|
||||
|
||||
:deep(.ant-card-head-title) {
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
:deep(.ant-tag.ant-tag-green) {
|
||||
color: #1a1a1a;
|
||||
background: rgba(26, 26, 26, 0.1);
|
||||
border-color: #1a1a1a;
|
||||
/* 卡片颜色主题 */
|
||||
.card-community {
|
||||
border-top: 3px solid #722ed1;
|
||||
}
|
||||
.card-community h2, .card-community :deep(.anticon) {
|
||||
color: #722ed1;
|
||||
}
|
||||
|
||||
:deep(.ant-tag.ant-tag-red) {
|
||||
color: #ff4d4f;
|
||||
background: rgba(255, 77, 79, 0.1);
|
||||
border-color: #ff4d4f;
|
||||
.card-orders {
|
||||
border-top: 3px solid #1890ff;
|
||||
}
|
||||
.card-orders h2, .card-orders :deep(.anticon) {
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
:deep(.ant-list-item) {
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
.card-users {
|
||||
border-top: 3px solid #52c41a;
|
||||
}
|
||||
.card-users h2, .card-users :deep(.anticon) {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
:deep(.ant-list-item:last-child) {
|
||||
border-bottom: none;
|
||||
.card-sales {
|
||||
border-top: 3px solid #fa8c16;
|
||||
}
|
||||
.card-sales h2, .card-sales :deep(.anticon) {
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
:deep(.ant-list-item-meta-title) {
|
||||
color: #1a1a1a;
|
||||
font-weight: 500;
|
||||
.card-profit {
|
||||
border-top: 3px solid #eb2f96;
|
||||
}
|
||||
.card-profit h2, .card-profit :deep(.anticon) {
|
||||
color: #eb2f96;
|
||||
}
|
||||
|
||||
:deep(.ant-list-item-meta-description) {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
.card-conversion {
|
||||
border-top: 3px solid #13c2c2;
|
||||
}
|
||||
.card-conversion h2, .card-conversion :deep(.anticon) {
|
||||
color: #13c2c2;
|
||||
}
|
||||
|
||||
:deep(.ant-avatar) {
|
||||
background-color: #1a1a1a;
|
||||
.card-chart {
|
||||
border-top: 3px solid #1890ff;
|
||||
}
|
||||
.card-chart :deep(.ant-card-head-title) {
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
/* 链接样式 */
|
||||
:deep(a) {
|
||||
color: #1a1a1a;
|
||||
transition: all 0.3s;
|
||||
/* 图表样式 */
|
||||
.chart-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
:deep(a:hover) {
|
||||
color: #333333;
|
||||
.chart-bar-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 列表项中的链接样式 */
|
||||
:deep(.ant-list-item-meta-title a) {
|
||||
color: #1a1a1a;
|
||||
.chart-bar-value {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-bottom: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
:deep(.ant-list-item-meta-title a:hover) {
|
||||
color: #333333;
|
||||
.chart-bar {
|
||||
width: 24px;
|
||||
height: 200px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 图标颜色 */
|
||||
:deep(.anticon) {
|
||||
color: #1a1a1a;
|
||||
.chart-bar-inner {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #1890ff;
|
||||
border-radius: 4px;
|
||||
transition: height 0.3s ease;
|
||||
}
|
||||
|
||||
.chart-bar-label {
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.chart-legend {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.chart-legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.chart-legend-color {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 8px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.comparison-data {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.comparison-data div {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
overflow-x: auto;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.chart-bar-item {
|
||||
min-width: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user