czg_team/cashier-web
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化新版数据统计页面，优化销量统计

Browse Source
This commit is contained in:
gyq
2025-11-25 16:45:27 +08:00
parent 748c20362f
commit 89f9283163
6 changed files with 241 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/data_home_item5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
src/assets/images/data_home_item6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

197
src/views/data/index.vue
View File

@@ -57,15 +57,15 @@
<el-option v-for="item in branchList" :key="item.shopId" :label="item.shopName" :value="item.shopId" />
</el-select>
<div class="time_wrap u-flex" style="flex-shrink: 0">
<el-radio-group v-model="timeValue" class="m-r-5" @change="timeChange">
<el-radio-button value="today">今天</el-radio-button>
<el-radio-button value="yesterday">昨天</el-radio-button>
<el-radio-button value="last_7_days">最近7天</el-radio-button>
<el-radio-button value="last_30_days">最近30天</el-radio-button>
<el-radio-button value="this_week">本周</el-radio-button>
<el-radio-button value="this_month">本月</el-radio-button>
<el-radio-button value="custom">自定义</el-radio-button>
</el-radio-group>
<div class="date_list">
<div class="item" :class="{ active: dataListActive == index }" v-for="(item, index) in dateList"
:key="item.value" @click="timeChange(item.value, index)">
<!-- 标签文本 -->
<span class="date-tab-item">{{ item.label }}</span>
<!-- 分隔符：非最后一项才显示 -->
<span class="separator" v-if="index < dateList.length - 1">|</span>
</div>
</div>
<div class="u-flex">
<el-date-picker v-if="timeValue == 'custom'" v-model="query.createdAt" type="daterange"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD"
@@ -129,7 +129,7 @@
<div class="item">
<div class="left">
<img class="icon" src="@/assets/images/data/cash.png" />
<span>会员支付</span>
<span>余额支付</span>
</div>
<span class="num">{{ trade.memberPayAmount || 0 }}</span>
</div>
@@ -241,16 +241,26 @@
</div>
<div class="btm">
<div class="item item1">
<div class="title">客单价</div>
<div class="title">
客单价
<el-tooltip effect="dark" :content="`订单实付金额（${trade.payAmount}）/就餐人数（${trade.customerCount || 0}）`"
placement="top">
<el-icon>
<QuestionFilled />
</el-icon>
</el-tooltip>
</div>
<div class="icon_wrap">
<img class="img" src="@/assets/images/data_home_item1_icon.png" />
<div class="t">{{ formatDecimal(trade.avgPayAmount || 0) }}</div>
<div class="t" style="color: #0080FF;">{{ formatDecimal(trade.avgPayAmount || 0) }}</div>
</div>
</div>
<div class="item item2">
<div class="title">
翻台率
<el-tooltip effect="dark" content="翻台率=（客单数-桌台数）/桌台数*100%" placement="top">
<el-tooltip effect="dark"
:content="`翻台率=（客单数（${trade.customerCount || 0}）-桌台数（${trade.tableCount || 0}））/桌台数*100%`"
placement="top">
<el-icon>
<QuestionFilled />
</el-icon>
@@ -258,51 +268,110 @@
</div>
<div class="icon_wrap">
<img class="img" src="@/assets/images/data_home_item2_icon.png" />
<div class="t">{{ trade.turnoverRate || 0 }}%</div>
<div class="t" style="color: #FFB200;">{{ trade.turnoverRate || 0 }}%</div>
</div>
</div>
<div class="item item3">
<div class="title">优惠金额</div>
<div class="title">
优惠金额
<el-tooltip popper-class="popper" effect="light" placement="bottom">
<template #content>
<div class="tips_row">
<div class="item">
<div class="left">
<span>优惠类目</span>
</div>
<span class="num">优惠金额</span>
</div>
<div class="item">
<div class="left">
<span>新客立减</span>
</div>
<span class="num">{{ multiplyAndFormat(trade.newCustomerDiscountAmount || 0) }}</span>
</div>
<div class="item">
<div class="left">
<span>满减活动</span>
</div>
<span class="num">{{ multiplyAndFormat(trade.fullDiscountAmount || 0) }}</span>
</div>
<div class="item">
<div class="left">
<span>优惠券抵扣</span>
</div>
<span class="num">{{ multiplyAndFormat(trade.couponDiscountAmount || 0) }}</span>
</div>
<div class="item">
<div class="left">
<span>积分抵扣</span>
</div>
<span class="num">{{ multiplyAndFormat(trade.pointDiscountAmount || 0) }}</span>
</div>
<div class="item">
<div class="left">
<span>霸王餐</span>
</div>
<span class="num">{{ multiplyAndFormat(trade.backDiscountAmount || 0) }}</span>
</div>
<div class="item">
<div class="left">
<span>会员折扣</span>
</div>
<span class="num">{{ multiplyAndFormat(trade.memberDiscountAmount || 0) }}</span>
</div>
<div class="item">
<div class="left">
<span>订单改价</span>
</div>
<span class="num">{{ multiplyAndFormat(trade.orderPriceDiscountAmount || 0) }}</span>
</div>
</div>
</template>
<el-icon>
<QuestionFilled />
</el-icon>
</el-tooltip>
</div>
<div class="icon_wrap">
<img class="img" src="@/assets/images/data_home_item3_icon.png" />
<div class="t">{{ formatDecimal(trade.discountAmount || 0) }}</div>
<div class="t" style="color: #FF8000;">{{ formatDecimal(trade.discountAmount || 0) }}</div>
</div>
</div>
<div class="item item4">
<div class="title">优惠笔数</div>
<div class="icon_wrap">
<img class="img" src="@/assets/images/data_home_item4_icon.png" />
<div class="t">{{ trade.discountCount || 0 }}</div>
<div class="t" style="color: #00CB71;">{{ trade.discountCount || 0 }}</div>
</div>
</div>
<div class="item item1">
<div class="item item5">
<div class="row_wrap">
<div class="row">
<div class="title">毛利润</div>
<div class="icon_wrap">
<div class="t">{{ trade.profitAmount || 0 }}</div>
<div class="t" style="color: #0000C2;">{{ trade.profitAmount || 0 }}</div>
</div>
</div>
<div class="row">
<div class="title">毛利率</div>
<div class="icon_wrap">
<div class="t">{{ trade.profitRate || 0 }}%</div>
<div class="t" style="color: #0000C2;">{{ trade.profitRate || 0 }}%</div>
</div>
</div>
</div>
</div>
<div class="item item4">
<div class="item item6">
<div class="row_wrap">
<div class="row">
<div class="title">净利润</div>
<div class="icon_wrap">
<div class="t">{{ trade.netProfitAmount || 0 }}</div>
<div class="t" style="color: #E30675;">{{ trade.netProfitAmount || 0 }}</div>
</div>
</div>
<div class="row">
<div class="title">净利率</div>
<div class="icon_wrap">
<div class="t">{{ trade.netProfitRate || 0 }}%</div>
<div class="t" style="color: #E30675;">{{ trade.netProfitRate || 0 }}%</div>
</div>
</div>
</div>
@@ -397,10 +466,43 @@ import dayjs from "dayjs";
import * as echarts from "echarts";
import { debounce, formatDecimal } from "@/utils/tools";
import { formatDateRange } from './utils/index.js'
import { multiplyAndFormat } from '@/utils/index.js'
export default {
name: "home",
data() {
return {
multiplyAndFormat,
dataListActive: 0,
dateList: [
{
label: "今天",
value: "today",
},
{
label: "昨天",
value: "yesterday",
},
{
label: "最近7天",
value: "last_7_days",
},
{
label: "最近30天",
value: "last_30_days",
},
{
label: "本周",
value: "this_week",
},
{
label: "本月",
value: "this_month",
},
{
label: "自定义",
value: "custom",
},
],
payCount: [
{
icon: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/static/wx.png",
@@ -557,7 +659,9 @@ export default {
this.dateProduct()
},
// 切换时间
timeChange(e) {
timeChange(e, index = 0) {
this.dataListActive = index;
this.timeValue = e;
this.query.createdAt = formatDateRange(e)
if (e != "custom") {
this.summarytrade();
@@ -1376,6 +1480,14 @@ export default {
background-image: url("../../assets/images/data_home_item4.png");
}
&.item5 {
background-image: url("../../assets/images/data_home_item5.png");
}
&.item6 {
background-image: url("../../assets/images/data_home_item6.png");
}
.row_wrap {
display: flex;
width: 100%;
@@ -1398,6 +1510,7 @@ export default {
align-items: center;
color: #333;
font-size: 14px;
gap: 8px;
.icon {
font-size: 12px;
@@ -1419,6 +1532,7 @@ export default {
.t {
font-size: 24px;
margin-left: 10px;
font-weight: bold;
}
}
}
@@ -1586,7 +1700,8 @@ export default {
.num {
font-size: 32px;
color: #3F9EFF;
color: var(--el-color-primary);
font-weight: bold;
}
.tips {
@@ -1595,4 +1710,36 @@ export default {
}
}
}
.date_list {
display: flex;
margin-right: 10px;
.item {
font-size: 14px;
color: #999999;
display: flex;
align-items: center;
&.active {
.date-tab-item {
color: var(--el-color-primary);
}
}
.date-tab-item {
cursor: pointer;
&:hover {
color: var(--el-color-primary-light-3);
}
}
.separator {
margin: 0 6px;
position: relative;
top: -1px;
}
}
}
</style>

43
src/views/data/sales.vue
View File

@@ -94,6 +94,28 @@
<div class="t">退单量</div>
</div>
</div>
<div class="item">
<div class="icon_wrap" style="--bg-color: #c978ee">
<el-icon color="#fff">
<ShoppingCart />
</el-icon>
</div>
<div class="info">
<div class="m">{{ payCount.totalAmount - payCount.refundAmount || 0 }}</div>
<div class="t">实际销售额总和</div>
</div>
</div>
<div class="item">
<div class="icon_wrap" style="--bg-color: #c978ee">
<el-icon color="#fff">
<ShoppingCart />
</el-icon>
</div>
<div class="info">
<div class="m">{{ payCount.saleCount - payCount.refundCount || 0 }}</div>
<div class="t">实际销量总和</div>
</div>
</div>
</div>
</div>
<div class="head-container">
@@ -122,7 +144,6 @@
<el-table-column label="会员支付" prop="cash">
<template v-slot="scope">￥{{ scope.row.deposit }}</template>
</el-table-column>
<!-- <el-table-column label="充值金额" prop="cash">
<template v-slot="scope">
￥{{ scope.row.recharge }}
@@ -131,6 +152,12 @@
<el-table-column label="退款金额" prop="cash">
<template v-slot="scope">￥{{ scope.row.refund }}</template>
</el-table-column>
<el-table-column label="实际销量" prop="refundCount">
<template v-slot="scope"> {{ scope.row.saleCount - scope.row.refundCount }} </template>
</el-table-column>
<el-table-column label="实际销售额" prop="refundCount">
<template v-slot="scope"> ￥{{ scope.row.saleAmount - scope.row.refundAmount }} </template>
</el-table-column>
</el-table>
<el-table :data="tableData.data" v-loading="tableData.loading" v-if="orderType == 2">
<!-- <el-table-column label="商品分类" prop="cateName"></el-table-column>
@@ -145,6 +172,12 @@
<el-table-column label="退款金额" prop="refundAmount">
<template v-slot="scope">￥{{ scope.row.refundAmount }}</template>
</el-table-column>
<el-table-column label="实际销量" prop="refundCount">
<template v-slot="scope"> {{ scope.row.saleCount - scope.row.refundCount }} </template>
</el-table-column>
<el-table-column label="实际销售额" prop="refundCount">
<template v-slot="scope"> ￥{{ scope.row.saleAmount - scope.row.refundAmount }} </template>
</el-table-column>
</el-table>
</div>
<div class="head-container">
@@ -346,6 +379,14 @@ export default {
background-image: url(../../assets/images/home/data_forms1.png);
}
.item:nth-child(5) {
background-image: url(../../assets/images/home/data_forms2.png);
}
.item:nth-child(6) {
background-image: url(../../assets/images/home/data_forms1.png);
}
.item {
background-size: 100% 100%;
width: 255px;

14
src/views/marketing_center/components/getDetailDialog.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<el-dialog title="已领取详情" v-model="dialogVisible" width="80%" top="5vh">
<el-dialog title="已领取详情" v-model="dialogVisible" width="860px" top="5vh">
<div>
<el-form :model="querForm" inline>
<el-form-item label="搜索">
@@ -21,8 +21,8 @@
@change="datePickerChange" />
</el-form-item>
<el-form-item label-width="0">
<el-button type="primary" @click="searchHandle">搜索</el-button>
<el-button @click="resetHandle">重置</el-button>
<el-button type="primary" icon="Search" :loading="tableData.loading" @click="searchHandle">搜索</el-button>
<el-button icon="Refresh" :loading="tableData.loading" @click="resetHandle">重置</el-button>
</el-form-item>
</el-form>
</div>
@@ -57,7 +57,7 @@
</div>
</div>
<div>
<el-table :data="tableData.list" border stripe v-loading="tableData.loading" height="64vh">
<el-table :data="tableData.list" border stripe v-loading="tableData.loading" height="54vh">
<el-table-column label="用户ID" prop="userId" width="80"></el-table-column>
<el-table-column label="用户名称" prop="name" width="200">
<template #default="scope">
@@ -80,7 +80,7 @@
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作">
<el-table-column label="操作" width="100">
<template #default="scope">
<template v-if="scope.row.status == 0">
<el-popconfirm title="确认要失效吗？" @confirm="deleteHandle(scope.row)">
@@ -229,7 +229,9 @@ async function couponRecordAjax() {
} catch (error) {
console.log(error);
}
tableData.loading = false;
setTimeout(() => {
tableData.loading = false;
}, 500);
}
// 删除用户优惠券

32
src/views/shop/config/components/shopInfo.vue
View File

@@ -160,9 +160,10 @@
<el-switch v-model="form.isOrderFence" :active-value="1" :inactive-value="0"></el-switch>
<div class="tips" style="font-size: 14px;color: #999;">开启后，用户只能在店铺附近xx公里内点餐</div>
</div>
<div class="center">
<div class="center" v-if="form.isOrderFence == 1">
<el-input v-model="form.orderFenceDistance" placeholder="请输入"
@input="e => form.orderFenceDistance = filterNumberInput(e)" style="width: 250px;" :cus>
@input="e => form.orderFenceDistance = filterNumberInput(e)" style="width: 250px;"
input-style="text-align: center;">
<template #prepend>限制：</template>
<template #append>公里</template>
</el-input>
@@ -260,7 +261,7 @@ export default {
trigger: "blur",
validator: (rule, value, callback) => {
if (this.form.isOrderFence === 1 && (!this.form.orderFenceDistance || this.form.orderFenceDistance <= 0)) {
callback(new Error("请输入限制米数"));
callback(new Error("请输入限制公里数"));
} else {
callback();
}
@@ -391,29 +392,34 @@ export default {
// 保存
submitHandle() {
this.$refs.form.validate(async (valid) => {
console.log(valid);
if (valid) {
this.formLoading = true;
try {
this.formLoading = true;
if (this.startTime && this.endTime) {
this.form.businessTime = `${this.startTime}-${this.endTime}`;
}
const data = { ...this.form }
if (this.form.isOrderFence == 1) {
this.form.orderFenceDistance = this.form.orderFenceDistance * 1000
data.orderFenceDistance = this.form.orderFenceDistance * 1000
}
const res = await ShopApi.edit({
...this.form,
await ShopApi.edit({
...data,
eatModel: this.form.eatModel.join(","),
});
ElMessage.success({
title: "成功",
message: "提交成功",
});
setTimeout(() => {
// location.reload();
}, 1000);
} catch (error) { }
this.formLoading = false;
} catch (error) {
console.log(error);
}
setTimeout(() => {
this.formLoading = false;
}, 500);
}
});
},