更新工作台页面,优化交易数据展示,修复核销订单金额等数据展示错误,并调整相关API接口路径

This commit is contained in:
zmj 2024-06-08 13:39:44 +08:00
parent 7bae897370
commit 30c2940309
1 changed files with 50 additions and 11 deletions

View File

@ -1,5 +1,6 @@
<template>
<el-card>
{{ formData.order_amount }}
<el-form class="mb-[-16px]" :model="queryParams" label-width="80px">
<el-col :span="6">
<el-form-item label="时间筛选">
@ -13,7 +14,7 @@
<el-row>
<el-col :span="6" class='flex mb-7' v-for="(item, index) in statisticLists" :key="index">
<img class="w-[50px] h-[50px] mr-2" :src="item.src" />
<el-statistic :title="item.title" :value="item.value" />
<el-statistic :title="item.title" :value="item.value()" />
</el-col>
</el-row>
</el-card>
@ -29,7 +30,19 @@
<template #header>
交易数据
</template>
<tradData></tradData>
<!-- <tradData></tradData> -->
<el-table :data="[{}]">
<el-table-column label="头像" prop="build_area_text" show-overflow-tooltip>
<template #default="{ row }">
<!-- <el-image style="width: 50px; height: 50px" :src="url" /> -->
</template>
</el-table-column>
<el-table-column label="用户名称" prop="project_level_text" show-overflow-tooltip />
<el-table-column label="订单号" prop="total_investment" show-overflow-tooltip />
<el-table-column label="交易金额" prop="total_investment" show-overflow-tooltip />
<el-table-column label="成交时间" prop="total_investment" show-overflow-tooltip />
</el-table>
</el-card>
</el-col>
<el-col :span="10">
@ -81,46 +94,69 @@ date.value[0] = getFirstAndLastDayOfCurrentMonth().firstDay;
date.value[1] = getFirstAndLastDayOfCurrentMonth().lastDay;
const formData = ref({
order_amount: 0
})
const statisticLists = reactive([
{
src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701552002039.png',
title: "核销订单金额",
value: 1000
value: () => {
return String(formData.value.order_amount)
}
},
{
src: "https://ceshi-engineering.lihaink.cn/uploads/files/20240604/2024060417170150a511510.png",
title: "余额消费金额",
value: 1000
value: () => {
return String(formData.value.order_amount)
}
},
{
src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701594ff8897.png',
title: "门店收益金额",
value: 1000
value: () => {
return String(formData.value.order_amount)
}
},
{
src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/202406041717018a22e1161.png',
title: "线下收银订单金额",
value: 1000
value: () => {
return String(formData.value.order_amount)
}
},
{
src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/202406041717013a08c6793.png',
title: "现金收银订单金额",
value: 1000
value: () => {
return String(formData.value.order_amount)
}
},
{
src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/2024060417170103b0a9686.png',
title: "门店新增用户数",
value: 1000
value: () => {
return String(formData.value.order_amount)
}
},
{
src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701469b91377.png',
title: "门店成交用户数",
value: 1000
value: () => {
return String(formData.value.order_amount)
}
},
{
src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701fbb680115.png',
title: "门店营业额",
value: 1000
value: () => {
return String(formData.value.order_amount)
}
},
])
@ -190,7 +226,10 @@ const tradTypeOption = reactive(
const getData = async () => {
let res = await apiTradStatisApi(queryParams)
console.log(res)
formData.value = res
visitorOption.xAxis.data = res.statistics.range
visitorOption.series[0].data = res.statistics.data.order_amount
visitorOption.series[1].data = res.statistics.data.user_number
}