mirror of
https://gitee.com/hhyykk/ipms-sjy-ui.git
synced 2025-07-16 11:55:07 +08:00
Merge remote-tracking branch 'origin/dev' into dev
This commit is contained in:
jason
42
src/views/mall/home/components/ComparisonCard.vue
Normal file
42
src/views/mall/home/components/ComparisonCard.vue
Normal file
@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div class="flex flex-col gap-2 bg-[var(--el-bg-color-overlay)] p-6">
|
||||
<div class="flex items-center justify-between text-gray-500">
|
||||
<span>{{ title }}</span>
|
||||
<el-tag>{{ tag }}</el-tag>
|
||||
</div>
|
||||
<div class="flex flex-row items-baseline justify-between">
|
||||
<CountTo :prefix="prefix" :end-val="value" :decimals="decimals" class="text-3xl" />
|
||||
<span :class="toNumber(percent) > 0 ? 'text-red-500' : 'text-green-500'">
|
||||
{{ Math.abs(toNumber(percent)) }}%
|
||||
<Icon :icon="toNumber(percent) > 0 ? 'ep:caret-top' : 'ep:caret-bottom'" class="!text-sm" />
|
||||
</span>
|
||||
</div>
|
||||
<el-divider class="mb-1! mt-2!" />
|
||||
<div class="flex flex-row items-center justify-between text-sm">
|
||||
<span class="text-gray-500">昨日数据</span>
|
||||
<span>{{ prefix || '' }}{{ reference }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { toNumber } from 'lodash-es'
|
||||
import { calculateRelativeRate } from '@/utils'
|
||||
|
||||
/** 交易对照卡片 */
|
||||
defineOptions({ name: 'ComparisonCard' })
|
||||
|
||||
const props = defineProps({
|
||||
title: propTypes.string.def('').isRequired,
|
||||
tag: propTypes.string.def(''),
|
||||
prefix: propTypes.string.def(''),
|
||||
value: propTypes.number.def(0).isRequired,
|
||||
reference: propTypes.number.def(0).isRequired,
|
||||
decimals: propTypes.number.def(0)
|
||||
})
|
||||
|
||||
// 计算环比
|
||||
const percent = computed(() =>
|
||||
calculateRelativeRate(props.value as number, props.reference as number)
|
||||
)
|
||||
</script>
|
||||
91
src/views/mall/home/components/MemberStatisticsCard.vue
Normal file
91
src/views/mall/home/components/MemberStatisticsCard.vue
Normal file
@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<CardTitle title="用户统计" />
|
||||
</template>
|
||||
<!-- 折线图 -->
|
||||
<Echart :height="300" :options="lineChartOptions" />
|
||||
</el-card>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import dayjs from 'dayjs'
|
||||
import { EChartsOption } from 'echarts'
|
||||
import * as MemberStatisticsApi from '@/api/mall/statistics/member'
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
import { CardTitle } from '@/components/Card'
|
||||
|
||||
/** 会员用户统计卡片 */
|
||||
defineOptions({ name: 'MemberStatisticsCard' })
|
||||
|
||||
const loading = ref(true) // 加载中
|
||||
/** 折线图配置 */
|
||||
const lineChartOptions = reactive<EChartsOption>({
|
||||
dataset: {
|
||||
dimensions: ['date', 'count'],
|
||||
source: []
|
||||
},
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
bottom: 20,
|
||||
top: 80,
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
top: 50
|
||||
},
|
||||
series: [{ name: '注册量', type: 'line', smooth: true, areaStyle: {} }],
|
||||
toolbox: {
|
||||
feature: {
|
||||
// 数据区域缩放
|
||||
dataZoom: {
|
||||
yAxisIndex: false // Y轴不缩放
|
||||
},
|
||||
brush: {
|
||||
type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮
|
||||
},
|
||||
saveAsImage: { show: true, name: '会员统计' } // 保存为图片
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
},
|
||||
padding: [5, 10]
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: (date: string) => formatDate(date, 'MM-DD')
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
}) as EChartsOption
|
||||
|
||||
const getMemberRegisterCountList = async () => {
|
||||
loading.value = true
|
||||
// 查询最近一月数据
|
||||
const beginTime = dayjs().subtract(30, 'd').startOf('d')
|
||||
const endTime = dayjs().endOf('d')
|
||||
const list = await MemberStatisticsApi.getMemberRegisterCountList(beginTime, endTime)
|
||||
// 更新 Echarts 数据
|
||||
if (lineChartOptions.dataset && lineChartOptions.dataset['source']) {
|
||||
lineChartOptions.dataset['source'] = list
|
||||
}
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(() => {
|
||||
getMemberRegisterCountList()
|
||||
})
|
||||
</script>
|
||||
91
src/views/mall/home/components/OperationDataCard.vue
Normal file
91
src/views/mall/home/components/OperationDataCard.vue
Normal file
@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<CardTitle title="运营数据" />
|
||||
</template>
|
||||
<div class="flex flex-row flex-wrap items-center gap-8 p-4">
|
||||
<div
|
||||
v-for="item in data"
|
||||
:key="item.name"
|
||||
class="h-20 w-20% flex flex-col cursor-pointer items-center justify-center gap-2"
|
||||
@click="handleClick(item.routerName)"
|
||||
>
|
||||
<CountTo
|
||||
:prefix="item.prefix"
|
||||
:end-val="item.value"
|
||||
:decimals="item.decimals"
|
||||
class="text-3xl"
|
||||
/>
|
||||
<span class="text-center">{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as ProductSpuApi from '@/api/mall/product/spu'
|
||||
import * as TradeStatisticsApi from '@/api/mall/statistics/trade'
|
||||
import * as PayStatisticsApi from '@/api/mall/statistics/pay'
|
||||
import { CardTitle } from '@/components/Card'
|
||||
|
||||
/** 运营数据卡片 */
|
||||
defineOptions({ name: 'OperationDataCard' })
|
||||
|
||||
const router = useRouter() // 路由
|
||||
|
||||
/** 数据 */
|
||||
const data = reactive({
|
||||
orderUndelivered: { name: '待发货订单', value: 9, routerName: 'TradeOrder' },
|
||||
orderAfterSaleApply: { name: '退款中订单', value: 4, routerName: 'TradeAfterSale' },
|
||||
orderWaitePickUp: { name: '待核销订单', value: 0, routerName: 'TradeOrder' },
|
||||
productAlertStock: { name: '库存预警', value: 0, routerName: 'ProductSpu' },
|
||||
productForSale: { name: '上架商品', value: 0, routerName: 'ProductSpu' },
|
||||
productInWarehouse: { name: '仓库商品', value: 0, routerName: 'ProductSpu' },
|
||||
withdrawAuditing: { name: '提现待审核', value: 0, routerName: 'TradeBrokerageWithdraw' },
|
||||
rechargePrice: {
|
||||
name: '账户充值',
|
||||
value: 0.0,
|
||||
prefix: '￥',
|
||||
decimals: 2,
|
||||
routerName: 'PayWalletRecharge'
|
||||
}
|
||||
})
|
||||
|
||||
/** 查询订单数据 */
|
||||
const getOrderData = async () => {
|
||||
const orderCount = await TradeStatisticsApi.getOrderCount()
|
||||
data.orderUndelivered.value = orderCount.undelivered
|
||||
data.orderAfterSaleApply.value = orderCount.afterSaleApply
|
||||
data.orderWaitePickUp.value = orderCount.pickUp
|
||||
data.withdrawAuditing.value = orderCount.auditingWithdraw
|
||||
}
|
||||
|
||||
/** 查询商品数据 */
|
||||
const getProductData = async () => {
|
||||
// TODO: @芋艿：这个接口的返回值，是不是用命名字段更好些？
|
||||
const productCount = await ProductSpuApi.getTabsCount()
|
||||
data.productForSale.value = productCount['0']
|
||||
data.productInWarehouse.value = productCount['1']
|
||||
data.productAlertStock.value = productCount['3']
|
||||
}
|
||||
|
||||
/** 查询钱包充值数据 */
|
||||
const getWalletRechargeData = async () => {
|
||||
data.rechargePrice.value = await PayStatisticsApi.getWalletRechargePrice()
|
||||
}
|
||||
|
||||
/**
|
||||
* 跳转到对应页面
|
||||
*
|
||||
* @param routerName 路由页面组件的名称
|
||||
*/
|
||||
const handleClick = (routerName: string) => {
|
||||
router.push({ name: routerName })
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(() => {
|
||||
getOrderData()
|
||||
getProductData()
|
||||
getWalletRechargeData()
|
||||
})
|
||||
</script>
|
||||
79
src/views/mall/home/components/ShortcutCard.vue
Normal file
79
src/views/mall/home/components/ShortcutCard.vue
Normal file
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<CardTitle title="快捷入口" />
|
||||
</template>
|
||||
<div class="flex flex-row flex-wrap gap-8 p-4">
|
||||
<div
|
||||
v-for="menu in menuList"
|
||||
:key="menu.name"
|
||||
class="h-20 w-20% flex flex-col cursor-pointer items-center justify-center gap-2"
|
||||
@click="handleMenuClick(menu.routerName)"
|
||||
>
|
||||
<div :class="menu.bgColor" class="rounded p-3 text-white">
|
||||
<Icon :icon="menu.icon" class="text-7.5!" />
|
||||
</div>
|
||||
<span>{{ menu.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
/** 快捷入口卡片 */
|
||||
import { CardTitle } from '@/components/Card'
|
||||
|
||||
defineOptions({ name: 'ShortcutCard' })
|
||||
|
||||
const router = useRouter() // 路由
|
||||
|
||||
/** 菜单列表 */
|
||||
const menuList = [
|
||||
{ name: '用户管理', icon: 'ep:user-filled', bgColor: 'bg-red-400', routerName: 'MemberUser' },
|
||||
{
|
||||
name: '商品管理',
|
||||
icon: 'fluent-mdl2:product',
|
||||
bgColor: 'bg-orange-400',
|
||||
routerName: 'ProductSpu'
|
||||
},
|
||||
{ name: '订单管理', icon: 'ep:list', bgColor: 'bg-yellow-500', routerName: 'TradeOrder' },
|
||||
{
|
||||
name: '售后管理',
|
||||
icon: 'ri:refund-2-line',
|
||||
bgColor: 'bg-green-600',
|
||||
routerName: 'TradeAfterSale'
|
||||
},
|
||||
{
|
||||
name: '分销管理',
|
||||
icon: 'fa-solid:project-diagram',
|
||||
bgColor: 'bg-cyan-500',
|
||||
routerName: 'TradeBrokerageUser'
|
||||
},
|
||||
{
|
||||
name: '优惠券',
|
||||
icon: 'ep:ticket',
|
||||
bgColor: 'bg-blue-500',
|
||||
routerName: 'PromotionCoupon'
|
||||
},
|
||||
{
|
||||
name: '拼团活动',
|
||||
icon: 'fa:group',
|
||||
bgColor: 'bg-purple-500',
|
||||
routerName: 'PromotionBargainActivity'
|
||||
},
|
||||
{
|
||||
name: '佣金提现',
|
||||
icon: 'vaadin:money-withdraw',
|
||||
bgColor: 'bg-rose-500',
|
||||
routerName: 'TradeBrokerageWithdraw'
|
||||
}
|
||||
]
|
||||
|
||||
/**
|
||||
* 跳转到菜单对应页面
|
||||
*
|
||||
* @param routerName 路由页面组件的名称
|
||||
*/
|
||||
const handleMenuClick = (routerName: string) => {
|
||||
router.push({ name: routerName })
|
||||
}
|
||||
</script>
|
||||
208
src/views/mall/home/components/TradeTrendCard.vue
Normal file
208
src/views/mall/home/components/TradeTrendCard.vue
Normal file
@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<CardTitle title="交易量趋势" />
|
||||
<!-- 查询条件 -->
|
||||
<div class="flex flex-row items-center gap-2">
|
||||
<el-radio-group v-model="timeRangeType" @change="handleTimeRangeTypeChange">
|
||||
<el-radio-button v-for="[key, value] in timeRange.entries()" :key="key" :label="key">
|
||||
{{ value.name }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 折线图 -->
|
||||
<Echart :height="300" :options="eChartOptions" />
|
||||
</el-card>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import dayjs, { Dayjs } from 'dayjs'
|
||||
import { EChartsOption } from 'echarts'
|
||||
import * as TradeStatisticsApi from '@/api/mall/statistics/trade'
|
||||
import { fenToYuan } from '@/utils'
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
import { CardTitle } from '@/components/Card'
|
||||
|
||||
/** 交易量趋势 */
|
||||
defineOptions({ name: 'TradeTrendCard' })
|
||||
|
||||
enum TimeRangeTypeEnum {
|
||||
DAY30 = 1,
|
||||
WEEK = 7,
|
||||
MONTH = 30,
|
||||
YEAR = 365
|
||||
} // 日期类型
|
||||
const timeRangeType = ref(TimeRangeTypeEnum.DAY30) // 日期快捷选择按钮, 默认30天
|
||||
const loading = ref(true) // 加载中
|
||||
// 时间范围 Map
|
||||
const timeRange = new Map()
|
||||
.set(TimeRangeTypeEnum.DAY30, {
|
||||
name: '30天',
|
||||
series: [
|
||||
{ name: '订单金额', type: 'bar', smooth: true, data: [] },
|
||||
{ name: '订单数量', type: 'line', smooth: true, data: [] }
|
||||
]
|
||||
})
|
||||
.set(TimeRangeTypeEnum.WEEK, {
|
||||
name: '周',
|
||||
series: [
|
||||
{ name: '上周金额', type: 'bar', smooth: true, data: [] },
|
||||
{ name: '本周金额', type: 'bar', smooth: true, data: [] },
|
||||
{ name: '上周数量', type: 'line', smooth: true, data: [] },
|
||||
{ name: '本周数量', type: 'line', smooth: true, data: [] }
|
||||
]
|
||||
})
|
||||
.set(TimeRangeTypeEnum.MONTH, {
|
||||
name: '月',
|
||||
series: [
|
||||
{ name: '上月金额', type: 'bar', smooth: true, data: [] },
|
||||
{ name: '本月金额', type: 'bar', smooth: true, data: [] },
|
||||
{ name: '上月数量', type: 'line', smooth: true, data: [] },
|
||||
{ name: '本月数量', type: 'line', smooth: true, data: [] }
|
||||
]
|
||||
})
|
||||
.set(TimeRangeTypeEnum.YEAR, {
|
||||
name: '年',
|
||||
series: [
|
||||
{ name: '去年金额', type: 'bar', smooth: true, data: [] },
|
||||
{ name: '今年金额', type: 'bar', smooth: true, data: [] },
|
||||
{ name: '去年数量', type: 'line', smooth: true, data: [] },
|
||||
{ name: '今年数量', type: 'line', smooth: true, data: [] }
|
||||
]
|
||||
})
|
||||
/** 图表配置 */
|
||||
const eChartOptions = reactive<EChartsOption>({
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
bottom: 20,
|
||||
top: 80,
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
top: 50,
|
||||
data: []
|
||||
},
|
||||
series: [],
|
||||
toolbox: {
|
||||
feature: {
|
||||
// 数据区域缩放
|
||||
dataZoom: {
|
||||
yAxisIndex: false // Y轴不缩放
|
||||
},
|
||||
brush: {
|
||||
type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮
|
||||
},
|
||||
saveAsImage: { show: true, name: '订单量趋势' } // 保存为图片
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
},
|
||||
padding: [5, 10]
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
inverse: true,
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
data: [],
|
||||
axisLabel: {
|
||||
formatter: (date: string) => {
|
||||
switch (timeRangeType.value) {
|
||||
case TimeRangeTypeEnum.DAY30:
|
||||
return formatDate(date, 'MM-DD')
|
||||
case TimeRangeTypeEnum.WEEK:
|
||||
let weekDay = formatDate(date, 'ddd')
|
||||
if (weekDay == '0') weekDay = '日'
|
||||
return '周' + weekDay
|
||||
case TimeRangeTypeEnum.MONTH:
|
||||
return formatDate(date, 'D')
|
||||
case TimeRangeTypeEnum.YEAR:
|
||||
return formatDate(date, 'M') + '月'
|
||||
default:
|
||||
return date
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
}) as EChartsOption
|
||||
|
||||
/** 时间范围类型单选按钮选中 */
|
||||
const handleTimeRangeTypeChange = async () => {
|
||||
// 设置时间范围
|
||||
let beginTime: Dayjs
|
||||
let endTime: Dayjs
|
||||
switch (timeRangeType.value) {
|
||||
case TimeRangeTypeEnum.WEEK:
|
||||
beginTime = dayjs().startOf('week')
|
||||
endTime = dayjs().endOf('week')
|
||||
break
|
||||
case TimeRangeTypeEnum.MONTH:
|
||||
beginTime = dayjs().startOf('month')
|
||||
endTime = dayjs().endOf('month')
|
||||
break
|
||||
case TimeRangeTypeEnum.YEAR:
|
||||
beginTime = dayjs().startOf('year')
|
||||
endTime = dayjs().endOf('year')
|
||||
break
|
||||
case TimeRangeTypeEnum.DAY30:
|
||||
default:
|
||||
beginTime = dayjs().subtract(30, 'day').startOf('d')
|
||||
endTime = dayjs().endOf('d')
|
||||
break
|
||||
}
|
||||
// 发送时间范围选中事件
|
||||
await getOrderCountTrendComparison(beginTime, endTime)
|
||||
}
|
||||
|
||||
/** 查询订单数量趋势对照数据 */
|
||||
const getOrderCountTrendComparison = async (
|
||||
beginTime: dayjs.ConfigType,
|
||||
endTime: dayjs.ConfigType
|
||||
) => {
|
||||
loading.value = true
|
||||
// 查询数据
|
||||
const list = await TradeStatisticsApi.getOrderCountTrendComparison(
|
||||
timeRangeType.value,
|
||||
beginTime,
|
||||
endTime
|
||||
)
|
||||
// 处理数据
|
||||
const dates: string[] = []
|
||||
const series = [...timeRange.get(timeRangeType.value).series]
|
||||
for (let item of list) {
|
||||
dates.push(item.value.date)
|
||||
if (series.length === 2) {
|
||||
series[0].data.push(fenToYuan(item?.value?.orderPayPrice || 0)) // 当前金额
|
||||
series[1].data.push(fenToYuan(item?.value?.orderPayCount || 0)) // 对照数量
|
||||
} else {
|
||||
series[0].data.push(fenToYuan(item?.reference?.orderPayPrice || 0)) // 对照金额
|
||||
series[1].data.push(fenToYuan(item?.value?.orderPayPrice || 0)) // 当前金额
|
||||
series[2].data.push(item?.reference?.orderPayCount || 0) // 对照数量
|
||||
series[3].data.push(item?.value?.orderPayCount || 0) // 当前数量
|
||||
}
|
||||
}
|
||||
eChartOptions.xAxis!['data'] = dates
|
||||
eChartOptions.series = series
|
||||
// legend在4个切换到2个的时候，还是显示成4个，需要手动配置一下
|
||||
eChartOptions.legend['data'] = series.map((item) => item.name)
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(() => {
|
||||
handleTimeRangeTypeChange()
|
||||
})
|
||||
</script>
|
||||
111
src/views/mall/home/index.vue
Normal file
111
src/views/mall/home/index.vue
Normal file
@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<!-- 数据对照 -->
|
||||
<el-row :gutter="16" class="row">
|
||||
<el-col :md="6" :sm="12" :xs="24" :loading="loading">
|
||||
<ComparisonCard
|
||||
tag="今日"
|
||||
title="销售额"
|
||||
prefix="￥"
|
||||
::decimals="2"
|
||||
:value="fenToYuan(orderComparison?.value?.orderPayPrice || 0)"
|
||||
:reference="fenToYuan(orderComparison?.reference?.orderPayPrice || 0)"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :md="6" :sm="12" :xs="24" :loading="loading">
|
||||
<ComparisonCard
|
||||
tag="今日"
|
||||
title="用户访问量"
|
||||
:value="userComparison?.value?.visitUserCount || 0"
|
||||
:reference="userComparison?.reference?.visitUserCount || 0"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :md="6" :sm="12" :xs="24" :loading="loading">
|
||||
<ComparisonCard
|
||||
tag="今日"
|
||||
title="订单量"
|
||||
:value="fenToYuan(orderComparison?.value?.orderPayCount || 0)"
|
||||
:reference="fenToYuan(orderComparison?.reference?.orderPayCount || 0)"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :md="6" :sm="12" :xs="24" :loading="loading">
|
||||
<ComparisonCard
|
||||
tag="今日"
|
||||
title="新增用户"
|
||||
:value="userComparison?.value?.createUserCount || 0"
|
||||
:reference="userComparison?.reference?.createUserCount || 0"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="16" class="row">
|
||||
<el-col :md="12">
|
||||
<!-- 快捷入口 -->
|
||||
<ShortcutCard />
|
||||
</el-col>
|
||||
<el-col :md="12">
|
||||
<!-- 运营数据 -->
|
||||
<OperationDataCard />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="16" class="mb-4">
|
||||
<el-col :md="18" :sm="24">
|
||||
<!-- 会员概览 -->
|
||||
<MemberFunnelCard />
|
||||
</el-col>
|
||||
<el-col :md="6" :sm="24">
|
||||
<!-- 会员终端 -->
|
||||
<MemberTerminalCard />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 交易量趋势 -->
|
||||
<TradeTrendCard class="mb-4" />
|
||||
<!-- 会员统计 -->
|
||||
<MemberStatisticsCard />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as TradeStatisticsApi from '@/api/mall/statistics/trade'
|
||||
import * as MemberStatisticsApi from '@/api/mall/statistics/member'
|
||||
import { DataComparisonRespVO } from '@/api/mall/statistics/common'
|
||||
import { TradeOrderSummaryRespVO } from '@/api/mall/statistics/trade'
|
||||
import { MemberCountRespVO } from '@/api/mall/statistics/member'
|
||||
import { fenToYuan } from '@/utils'
|
||||
import ComparisonCard from './components/ComparisonCard.vue'
|
||||
import MemberStatisticsCard from './components/MemberStatisticsCard.vue'
|
||||
import OperationDataCard from './components/OperationDataCard.vue'
|
||||
import ShortcutCard from './components/ShortcutCard.vue'
|
||||
import TradeTrendCard from './components/TradeTrendCard.vue'
|
||||
import MemberTerminalCard from '@/views/mall/statistics/member/components/MemberTerminalCard.vue'
|
||||
import MemberFunnelCard from '@/views/mall/statistics/member/components/MemberFunnelCard.vue'
|
||||
|
||||
/** 商城首页 */
|
||||
defineOptions({ name: 'MallHome' })
|
||||
|
||||
const loading = ref(true) // 加载中
|
||||
const orderComparison = ref<DataComparisonRespVO<TradeOrderSummaryRespVO>>() // 交易对照数据
|
||||
const userComparison = ref<DataComparisonRespVO<MemberCountRespVO>>() // 用户对照数据
|
||||
|
||||
/** 查询交易对照卡片数据 */
|
||||
const getOrderComparison = async () => {
|
||||
orderComparison.value = await TradeStatisticsApi.getOrderComparison()
|
||||
}
|
||||
|
||||
/** 查询会员用户数量对照卡片数据 */
|
||||
const getUserCountComparison = async () => {
|
||||
userComparison.value = await MemberStatisticsApi.getUserCountComparison()
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(async () => {
|
||||
loading.value = true
|
||||
await Promise.all([getOrderComparison(), getUserCountComparison()])
|
||||
loading.value = false
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.row {
|
||||
.el-col {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
238
src/views/mall/promotion/article/ArticleForm.vue
Normal file
238
src/views/mall/promotion/article/ArticleForm.vue
Normal file
@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<Dialog v-model="dialogVisible" :title="dialogTitle" width="70%">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
v-loading="formLoading"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="110px"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="文章标题" prop="title">
|
||||
<el-input v-model="formData.title" placeholder="请输入文章标题" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="文章分类" prop="categoryId">
|
||||
<el-select v-model="formData.categoryId" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in categoryList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="文章作者" prop="author">
|
||||
<el-input v-model="formData.author" placeholder="请输入文章作者" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="文章简介" prop="introduction">
|
||||
<el-input v-model="formData.introduction" placeholder="请输入文章简介" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="文章封面" prop="picUrl">
|
||||
<UploadImg v-model="formData.picUrl" height="80px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- TODO @puhui999：浏览次数，不能修改 -->
|
||||
<el-col :span="12">
|
||||
<el-form-item label="浏览次数" prop="browseCount">
|
||||
<el-input-number
|
||||
v-model="formData.browseCount"
|
||||
:min="0"
|
||||
clearable
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number v-model="formData.sort" :min="0" clearable controls-position="right" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- TODO @puhui999：可以使用 SpuTableSelect -->
|
||||
<el-col :span="12">
|
||||
<el-form-item label="商品关联" prop="spuId">
|
||||
<el-select v-model="formData.spuId" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in spuList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="是否热门" prop="recommendHot">
|
||||
<el-radio-group v-model="formData.recommendHot">
|
||||
<el-radio
|
||||
v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="是否轮播图" prop="recommendBanner">
|
||||
<el-radio-group v-model="formData.recommendBanner">
|
||||
<el-radio
|
||||
v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="文章内容">
|
||||
<Editor v-model="formData.content" height="150px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '@/utils/dict'
|
||||
import * as ArticleApi from '@/api/mall/promotion/article'
|
||||
import * as ArticleCategoryApi from '@/api/mall/promotion/articleCategory'
|
||||
import * as ProductSpuApi from '@/api/mall/product/spu'
|
||||
|
||||
defineOptions({ name: 'PromotionArticleForm' })
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
||||
const formData = ref({
|
||||
id: undefined,
|
||||
categoryId: undefined,
|
||||
title: undefined,
|
||||
author: undefined,
|
||||
picUrl: undefined,
|
||||
introduction: undefined,
|
||||
browseCount: 0,
|
||||
sort: 0,
|
||||
status: 0,
|
||||
spuId: undefined,
|
||||
recommendHot: false,
|
||||
recommendBanner: false,
|
||||
content: undefined
|
||||
})
|
||||
const formRules = reactive({
|
||||
categoryId: [{ required: true, message: '分类id不能为空', trigger: 'blur' }],
|
||||
title: [{ required: true, message: '文章标题不能为空', trigger: 'blur' }],
|
||||
picUrl: [{ required: true, message: '文章封面图片地址不能为空', trigger: 'blur' }],
|
||||
sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
|
||||
status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
|
||||
spuId: [{ required: true, message: '商品关联id不能为空', trigger: 'blur' }],
|
||||
recommendHot: [{ required: true, message: '是否热门(小程序)不能为空', trigger: 'blur' }],
|
||||
recommendBanner: [{ required: true, message: '是否轮播图(小程序)不能为空', trigger: 'blur' }],
|
||||
content: [{ required: true, message: '文章内容不能为空', trigger: 'blur' }]
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = t('action.' + type)
|
||||
formType.value = type
|
||||
resetForm()
|
||||
// 修改时，设置数据
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
formData.value = await ArticleApi.getArticle(id)
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||||
const submitForm = async () => {
|
||||
// 校验表单
|
||||
if (!formRef) return
|
||||
const valid = await formRef.value.validate()
|
||||
if (!valid) return
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
const data = formData.value as unknown as ArticleApi.ArticleVO
|
||||
if (formType.value === 'create') {
|
||||
await ArticleApi.createArticle(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
} else {
|
||||
await ArticleApi.updateArticle(data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emit('success')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
id: undefined,
|
||||
categoryId: undefined,
|
||||
title: undefined,
|
||||
author: undefined,
|
||||
picUrl: undefined,
|
||||
introduction: undefined,
|
||||
browseCount: 0,
|
||||
sort: 0,
|
||||
status: 0,
|
||||
spuId: undefined,
|
||||
recommendHot: false,
|
||||
recommendBanner: false,
|
||||
content: undefined
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
|
||||
const categoryList = ref<ArticleCategoryApi.ArticleCategoryVO[]>([])
|
||||
const spuList = ref<ProductSpuApi.Spu[]>([])
|
||||
onMounted(async () => {
|
||||
categoryList.value =
|
||||
(await ArticleCategoryApi.getSimpleArticleCategoryList()) as ArticleCategoryApi.ArticleCategoryVO[]
|
||||
spuList.value = (await ProductSpuApi.getSpuSimpleList()) as ProductSpuApi.Spu[]
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<Dialog v-model="dialogVisible" :title="dialogTitle">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
v-loading="formLoading"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="分类名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入分类名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标地址" prop="picUrl">
|
||||
<UploadImg v-model="formData.picUrl" height="80px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number v-model="formData.sort" :min="0" clearable controls-position="right" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
import * as ArticleCategoryApi from '@/api/mall/promotion/articleCategory'
|
||||
import { CommonStatusEnum } from '@/utils/constants'
|
||||
|
||||
defineOptions({ name: 'PromotionArticleCategoryForm' })
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
||||
const formData = ref({
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
picUrl: undefined,
|
||||
status: undefined,
|
||||
sort: undefined
|
||||
})
|
||||
const formRules = reactive({
|
||||
name: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
|
||||
status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
|
||||
sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }]
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = t('action.' + type)
|
||||
formType.value = type
|
||||
resetForm()
|
||||
// 修改时，设置数据
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
formData.value = await ArticleCategoryApi.getArticleCategory(id)
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||||
const submitForm = async () => {
|
||||
// 校验表单
|
||||
if (!formRef) return
|
||||
const valid = await formRef.value.validate()
|
||||
if (!valid) return
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
const data = formData.value as unknown as ArticleCategoryApi.ArticleCategoryVO
|
||||
if (formType.value === 'create') {
|
||||
await ArticleCategoryApi.createArticleCategory(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
} else {
|
||||
await ArticleCategoryApi.updateArticleCategory(data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emit('success')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
picUrl: undefined,
|
||||
status: CommonStatusEnum.ENABLE,
|
||||
sort: 0
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
199
src/views/mall/promotion/article/category/index.vue
Normal file
199
src/views/mall/promotion/article/category/index.vue
Normal file
@ -0,0 +1,199 @@
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
:model="queryParams"
|
||||
class="-mb-15px"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="分类名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
class="!w-240px"
|
||||
clearable
|
||||
placeholder="请输入分类名称"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" class="!w-240px" clearable placeholder="请选择状态">
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="createTime">
|
||||
<el-date-picker
|
||||
v-model="queryParams.createTime"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
class="!w-240px"
|
||||
end-placeholder="结束日期"
|
||||
start-placeholder="开始日期"
|
||||
type="daterange"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery">
|
||||
<Icon class="mr-5px" icon="ep:search" />
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<Icon class="mr-5px" icon="ep:refresh" />
|
||||
重置
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="['promotion:article-category:create']"
|
||||
plain
|
||||
type="primary"
|
||||
@click="openForm('create')"
|
||||
>
|
||||
<Icon class="mr-5px" icon="ep:plus" />
|
||||
新增
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
|
||||
<el-table-column align="center" label="编号" prop="id" min-width="100" />
|
||||
<el-table-column align="center" label="分类名称" prop="name" min-width="240" />
|
||||
<el-table-column label="分类图图" min-width="80">
|
||||
<template #default="{ row }">
|
||||
<el-image :src="row.picUrl" class="h-30px w-30px" @click="imagePreview(row.picUrl)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="状态" prop="status" min-width="150">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="排序" prop="sort" min-width="150" />
|
||||
<el-table-column
|
||||
:formatter="dateFormatter"
|
||||
align="center"
|
||||
label="创建时间"
|
||||
prop="createTime"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column align="center" label="操作">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
v-hasPermi="['promotion:article-category:update']"
|
||||
link
|
||||
type="primary"
|
||||
@click="openForm('update', scope.row.id)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="['promotion:article-category:delete']"
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row.id)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
v-model:limit="queryParams.pageSize"
|
||||
v-model:page="queryParams.pageNo"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 表单弹窗：添加/修改 -->
|
||||
<ArticleCategoryForm ref="formRef" @success="getList" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
import * as ArticleCategoryApi from '@/api/mall/promotion/articleCategory'
|
||||
import ArticleCategoryForm from './ArticleCategoryForm.vue'
|
||||
import { createImageViewer } from '@/components/ImageViewer'
|
||||
|
||||
defineOptions({ name: 'PromotionArticleCategory' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const total = ref(0) // 列表的总页数
|
||||
const list = ref([]) // 列表的数据
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
status: null,
|
||||
createTime: []
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
const exportLoading = ref(false) // 导出的加载中
|
||||
|
||||
/** 分类图预览 */
|
||||
const imagePreview = (imgUrl: string) => {
|
||||
createImageViewer({
|
||||
urlList: [imgUrl]
|
||||
})
|
||||
}
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await ArticleCategoryApi.getArticleCategoryPage(queryParams)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 添加/修改操作 */
|
||||
const formRef = ref()
|
||||
const openForm = (type: string, id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
// 删除的二次确认
|
||||
await message.delConfirm()
|
||||
// 发起删除
|
||||
await ArticleCategoryApi.deleteArticleCategory(id)
|
||||
message.success(t('common.delSuccess'))
|
||||
// 刷新列表
|
||||
await getList()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
229
src/views/mall/promotion/article/index.vue
Normal file
229
src/views/mall/promotion/article/index.vue
Normal file
@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
:model="queryParams"
|
||||
class="-mb-15px"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item label="文章分类" prop="categoryId">
|
||||
<el-select
|
||||
v-model="queryParams.categoryId"
|
||||
class="!w-240px"
|
||||
placeholder="全部"
|
||||
@keyup.enter="handleQuery"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in categoryList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="文章标题" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
class="!w-240px"
|
||||
clearable
|
||||
placeholder="请输入文章标题"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" class="!w-240px" clearable placeholder="请选择状态">
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="createTime">
|
||||
<el-date-picker
|
||||
v-model="queryParams.createTime"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
class="!w-240px"
|
||||
end-placeholder="结束日期"
|
||||
start-placeholder="开始日期"
|
||||
type="daterange"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery">
|
||||
<Icon class="mr-5px" icon="ep:search" />
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<Icon class="mr-5px" icon="ep:refresh" />
|
||||
重置
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="['promotion:article:create']"
|
||||
plain
|
||||
type="primary"
|
||||
@click="openForm('create')"
|
||||
>
|
||||
<Icon class="mr-5px" icon="ep:plus" />
|
||||
新增
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
|
||||
<el-table-column align="center" label="编号" prop="id" min-width="60" />
|
||||
<el-table-column align="center" label="封面" prop="picUrl" min-width="80">
|
||||
<template #default="{ row }">
|
||||
<el-image :src="row.picUrl" class="h-30px w-30px" @click="imagePreview(row.picUrl)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="标题" prop="title" min-width="180" />
|
||||
<el-table-column align="center" label="分类" prop="categoryId" min-width="180">
|
||||
<template #default="scope">
|
||||
{{ categoryList.find((item) => item.id === scope.row.categoryId)?.name }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="浏览量" prop="browseCount" min-width="180" />
|
||||
<el-table-column align="center" label="作者" prop="author" min-width="180" />
|
||||
<el-table-column align="center" label="文章简介" prop="introduction" min-width="250" />
|
||||
<el-table-column align="center" label="排序" prop="sort" min-width="60" />
|
||||
<el-table-column align="center" label="状态" prop="status" min-width="60">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:formatter="dateFormatter"
|
||||
align="center"
|
||||
label="发布时间"
|
||||
prop="createTime"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="120">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
v-hasPermi="['promotion:article:update']"
|
||||
link
|
||||
type="primary"
|
||||
@click="openForm('update', scope.row.id)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="['promotion:article:delete']"
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row.id)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
v-model:limit="queryParams.pageSize"
|
||||
v-model:page="queryParams.pageNo"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 表单弹窗：添加/修改 -->
|
||||
<ArticleForm ref="formRef" @success="getList" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
import * as ArticleApi from '@/api/mall/promotion/article'
|
||||
import ArticleForm from './ArticleForm.vue'
|
||||
import * as ArticleCategoryApi from '@/api/mall/promotion/articleCategory'
|
||||
import * as ProductSpuApi from '@/api/mall/product/spu'
|
||||
import { createImageViewer } from '@/components/ImageViewer'
|
||||
|
||||
defineOptions({ name: 'PromotionArticle' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const total = ref(0) // 列表的总页数
|
||||
const list = ref([]) // 列表的数据
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
categoryId: undefined,
|
||||
title: null,
|
||||
status: undefined,
|
||||
spuId: undefined,
|
||||
createTime: []
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
const exportLoading = ref(false) // 导出的加载中
|
||||
/** 文章封面预览 */
|
||||
const imagePreview = (imgUrl: string) => {
|
||||
createImageViewer({
|
||||
urlList: [imgUrl]
|
||||
})
|
||||
}
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await ArticleApi.getArticlePage(queryParams)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 添加/修改操作 */
|
||||
const formRef = ref()
|
||||
const openForm = (type: string, id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
// 删除的二次确认
|
||||
await message.delConfirm()
|
||||
// 发起删除
|
||||
await ArticleApi.deleteArticle(id)
|
||||
message.success(t('common.delSuccess'))
|
||||
// 刷新列表
|
||||
await getList()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
const categoryList = ref<ArticleCategoryApi.ArticleCategoryVO[]>([])
|
||||
const spuList = ref<ProductSpuApi.Spu[]>([])
|
||||
onMounted(async () => {
|
||||
await getList()
|
||||
// 加载分类、商品列表
|
||||
categoryList.value =
|
||||
(await ArticleCategoryApi.getSimpleArticleCategoryList()) as ArticleCategoryApi.ArticleCategoryVO[]
|
||||
spuList.value = (await ProductSpuApi.getSpuSimpleList()) as ProductSpuApi.Spu[]
|
||||
})
|
||||
</script>
|
||||
119
src/views/mall/statistics/member/components/MemberFunnelCard.vue
Normal file
119
src/views/mall/statistics/member/components/MemberFunnelCard.vue
Normal file
@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="my--1.5 flex flex-row items-center justify-between">
|
||||
<CardTitle title="会员概览" />
|
||||
<!-- 查询条件 -->
|
||||
<ShortcutDateRangePicker @change="handleTimeRangeChange" />
|
||||
</div>
|
||||
</template>
|
||||
<div class="min-w-225 py-1.75" v-loading="loading">
|
||||
<div class="relative h-24 flex">
|
||||
<div class="h-full w-75% bg-blue-50 <lg:w-35% <xl:w-55%">
|
||||
<div class="ml-15 h-full flex flex-col justify-center">
|
||||
<div class="font-bold">
|
||||
注册用户数量：{{ analyseData?.comparison?.value?.registerUserCount || 0 }}
|
||||
</div>
|
||||
<div class="mt-2 text-3.5">
|
||||
环比增长率：{{
|
||||
calculateRelativeRate(
|
||||
analyseData?.comparison?.value?.registerUserCount,
|
||||
analyseData?.comparison?.reference?.registerUserCount
|
||||
)
|
||||
}}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="trapezoid1 ml--38.5 mt-1.5 h-full w-77 flex flex-col items-center justify-center bg-blue-5 text-3.5 text-white"
|
||||
>
|
||||
<span class="text-6 font-bold">{{ analyseData?.visitUserCount || 0 }}</span>
|
||||
<span>访客</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative h-24 flex">
|
||||
<div class="h-full w-75% flex bg-cyan-50 <lg:w-35% <xl:w-55%">
|
||||
<div class="ml-15 h-full flex flex-col justify-center">
|
||||
<div class="font-bold">
|
||||
活跃用户数量：{{ analyseData?.comparison?.value?.visitUserCount || 0 }}
|
||||
</div>
|
||||
<div class="mt-2 text-3.5">
|
||||
环比增长率：{{
|
||||
calculateRelativeRate(
|
||||
analyseData?.comparison?.value?.visitUserCount,
|
||||
analyseData?.comparison?.reference?.visitUserCount
|
||||
)
|
||||
}}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="trapezoid2 ml--28 mt-1.7 h-25 w-56 flex flex-col items-center justify-center bg-cyan-5 text-3.5 text-white"
|
||||
>
|
||||
<span class="text-6 font-bold">{{ analyseData?.orderUserCount || 0 }}</span>
|
||||
<span>下单</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative h-24 flex">
|
||||
<div class="w-75% flex bg-slate-50 <lg:w-35% <xl:w-55%">
|
||||
<div class="ml-15 h-full flex flex-row gap-x-16">
|
||||
<div class="flex flex-col justify-center">
|
||||
<div class="font-bold">
|
||||
充值用户数量：{{ analyseData?.comparison?.value?.rechargeUserCount || 0 }}
|
||||
</div>
|
||||
<div class="mt-2 text-3.5">
|
||||
环比增长率：{{
|
||||
calculateRelativeRate(
|
||||
analyseData?.comparison?.value?.rechargeUserCount,
|
||||
analyseData?.comparison?.reference?.rechargeUserCount
|
||||
)
|
||||
}}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center">
|
||||
<div class="font-bold">客单价：{{ fenToYuan(analyseData?.atv || 0) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="trapezoid3 ml--18 mt-3.25 h-23 w-36 flex flex-col items-center justify-center bg-slate-5 text-3.5 text-white"
|
||||
>
|
||||
<span class="text-6 font-bold">{{ analyseData?.payUserCount || 0 }}</span>
|
||||
<span>成交用户</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as MemberStatisticsApi from '@/api/mall/statistics/member'
|
||||
import dayjs from 'dayjs'
|
||||
import { calculateRelativeRate, fenToYuan } from '@/utils'
|
||||
import { MemberAnalyseRespVO } from '@/api/mall/statistics/member'
|
||||
import { CardTitle } from '@/components/Card'
|
||||
|
||||
/** 会员概览卡片 */
|
||||
defineOptions({ name: 'MemberFunnelCard' })
|
||||
|
||||
const loading = ref(true) // 加载中
|
||||
const analyseData = ref<MemberAnalyseRespVO>() // 会员分析数据
|
||||
|
||||
/** 查询会员概览数据列表 */
|
||||
const handleTimeRangeChange = async (times: [dayjs.ConfigType, dayjs.ConfigType]) => {
|
||||
loading.value = true
|
||||
// 查询数据
|
||||
analyseData.value = await MemberStatisticsApi.getMemberAnalyse({ times })
|
||||
loading.value = false
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.trapezoid1 {
|
||||
transform: perspective(5em) rotateX(-11deg);
|
||||
}
|
||||
.trapezoid2 {
|
||||
transform: perspective(7em) rotateX(-20deg);
|
||||
}
|
||||
.trapezoid3 {
|
||||
transform: perspective(3em) rotateX(-13deg);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<el-card shadow="never" v-loading="loading">
|
||||
<template #header>
|
||||
<CardTitle title="会员终端" />
|
||||
</template>
|
||||
<Echart :height="300" :options="terminalChartOptions" />
|
||||
</el-card>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as MemberStatisticsApi from '@/api/mall/statistics/member'
|
||||
import { EChartsOption } from 'echarts'
|
||||
import { MemberTerminalStatisticsRespVO } from '@/api/mall/statistics/member'
|
||||
import { DICT_TYPE, DictDataType, getIntDictOptions } from '@/utils/dict'
|
||||
import { CardTitle } from '@/components/Card'
|
||||
|
||||
/** 会员终端卡片 */
|
||||
defineOptions({ name: 'MemberTerminalCard' })
|
||||
|
||||
const loading = ref(true) // 加载中
|
||||
|
||||
/** 会员终端统计图配置 */
|
||||
const terminalChartOptions = reactive<EChartsOption>({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
confine: true,
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'right'
|
||||
},
|
||||
roseType: 'area',
|
||||
series: [
|
||||
{
|
||||
name: '会员终端',
|
||||
type: 'pie',
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}) as EChartsOption
|
||||
|
||||
/** 按照终端，查询会员统计列表 */
|
||||
const getMemberTerminalStatisticsList = async () => {
|
||||
loading.value = true
|
||||
const list = await MemberStatisticsApi.getMemberTerminalStatisticsList()
|
||||
const dictDataList = getIntDictOptions(DICT_TYPE.TERMINAL)
|
||||
terminalChartOptions.series![0].data = dictDataList.map((dictData: DictDataType) => {
|
||||
const userCount = list.find(
|
||||
(item: MemberTerminalStatisticsRespVO) => item.terminal === dictData.value
|
||||
)?.userCount
|
||||
return {
|
||||
name: dictData.label,
|
||||
value: userCount || 0
|
||||
}
|
||||
})
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(() => {
|
||||
getMemberTerminalStatisticsList()
|
||||
})
|
||||
</script>
|
||||
@ -44,118 +44,20 @@
|
||||
</el-row>
|
||||
<el-row :gutter="16" class="mb-4">
|
||||
<el-col :md="18" :sm="24">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<span>会员概览</span>
|
||||
<!-- 查询条件 -->
|
||||
<div class="my--2 flex flex-row items-center gap-2">
|
||||
<el-radio-group v-model="shortcutDays" @change="handleDateTypeChange">
|
||||
<el-radio-button :label="1">昨天</el-radio-button>
|
||||
<el-radio-button :label="7">最近7天</el-radio-button>
|
||||
<el-radio-button :label="30">最近30天</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-date-picker
|
||||
v-model="queryParams.times"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
:shortcuts="shortcuts"
|
||||
class="!w-240px"
|
||||
@change="getMemberAnalyse"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="min-w-225 py-1.75" v-loading="analyseLoading">
|
||||
<div class="relative h-24 flex">
|
||||
<div class="h-full w-75% bg-blue-50 <lg:w-35% <xl:w-55%">
|
||||
<div class="ml-15 h-full flex flex-col justify-center">
|
||||
<div class="font-bold">
|
||||
注册用户数量：{{ analyseData?.comparison?.value?.userCount || 0 }}
|
||||
</div>
|
||||
<div class="mt-2 text-3.5">
|
||||
环比增长率：{{
|
||||
calculateRelativeRate(
|
||||
analyseData?.comparison?.value?.userCount,
|
||||
analyseData?.comparison?.reference?.userCount
|
||||
)
|
||||
}}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="trapezoid1 ml--38.5 mt-1.5 h-full w-77 flex flex-col items-center justify-center bg-blue-5 text-3.5 text-white"
|
||||
>
|
||||
<span class="text-6 font-bold">{{ analyseData?.visitorCount || 0 }}</span>
|
||||
<span>访客</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative h-24 flex">
|
||||
<div class="h-full w-75% flex bg-cyan-50 <lg:w-35% <xl:w-55%">
|
||||
<div class="ml-15 h-full flex flex-col justify-center">
|
||||
<div class="font-bold">
|
||||
活跃用户数量：{{ analyseData?.comparison?.value?.activeUserCount || 0 }}
|
||||
</div>
|
||||
<div class="mt-2 text-3.5">
|
||||
环比增长率：{{
|
||||
calculateRelativeRate(
|
||||
analyseData?.comparison?.value?.activeUserCount,
|
||||
analyseData?.comparison?.reference?.activeUserCount
|
||||
)
|
||||
}}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="trapezoid2 ml--28 mt-1.7 h-25 w-56 flex flex-col items-center justify-center bg-cyan-5 text-3.5 text-white"
|
||||
>
|
||||
<span class="text-6 font-bold">{{ analyseData?.orderUserCount || 0 }}</span>
|
||||
<span>下单</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative h-24 flex">
|
||||
<div class="w-75% flex bg-slate-50 <lg:w-35% <xl:w-55%">
|
||||
<div class="ml-15 h-full flex flex-row gap-x-16">
|
||||
<div class="flex flex-col justify-center">
|
||||
<div class="font-bold">
|
||||
充值用户数量：{{ analyseData?.comparison?.value?.rechargeUserCount || 0 }}
|
||||
</div>
|
||||
<div class="mt-2 text-3.5">
|
||||
环比增长率：{{
|
||||
calculateRelativeRate(
|
||||
analyseData?.comparison?.value?.rechargeUserCount,
|
||||
analyseData?.comparison?.reference?.rechargeUserCount
|
||||
)
|
||||
}}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center">
|
||||
<div class="font-bold">客单价：{{ fenToYuan(analyseData?.atv || 0) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="trapezoid3 ml--18 mt-3.25 h-23 w-36 flex flex-col items-center justify-center bg-slate-5 text-3.5 text-white"
|
||||
>
|
||||
<span class="text-6 font-bold">{{ analyseData?.payUserCount || 0 }}</span>
|
||||
<span>成交用户</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<!-- 会员概览 -->
|
||||
<MemberFunnelCard />
|
||||
</el-col>
|
||||
<el-col :md="6" :sm="24">
|
||||
<el-card shadow="never" header="会员终端" v-loading="loading">
|
||||
<Echart :height="300" :options="terminalChartOptions" />
|
||||
</el-card>
|
||||
<!-- 会员终端 -->
|
||||
<MemberTerminalCard />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="16">
|
||||
<el-col :md="18" :sm="24">
|
||||
<el-card shadow="never" header="会员地域分布">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<CardTitle title="会员地域分布" />
|
||||
</template>
|
||||
<el-row v-loading="loading">
|
||||
<el-col :span="10">
|
||||
<Echart :height="300" :options="areaChartOptions" />
|
||||
@ -180,14 +82,14 @@
|
||||
/>
|
||||
<el-table-column
|
||||
label="订单创建数量"
|
||||
prop="orderCreateCount"
|
||||
prop="orderCreateUserCount"
|
||||
align="center"
|
||||
min-width="135"
|
||||
sortable
|
||||
/>
|
||||
<el-table-column
|
||||
label="订单支付数量"
|
||||
prop="orderPayCount"
|
||||
prop="orderPayUserCount"
|
||||
align="center"
|
||||
min-width="135"
|
||||
sortable
|
||||
@ -206,7 +108,10 @@
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :md="6" :sm="24">
|
||||
<el-card shadow="never" header="会员性别比例" v-loading="loading">
|
||||
<el-card shadow="never" v-loading="loading">
|
||||
<template #header>
|
||||
<CardTitle title="会员性别比例" />
|
||||
</template>
|
||||
<Echart :height="300" :options="sexChartOptions" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
@ -214,62 +119,33 @@
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as TradeMemberApi from '@/api/mall/statistics/member'
|
||||
import * as MemberStatisticsApi from '@/api/mall/statistics/member'
|
||||
import TradeTrendValue from '../trade/components/TradeTrendValue.vue'
|
||||
import { EChartsOption } from 'echarts'
|
||||
import china from '@/assets/map/json/china.json'
|
||||
import dayjs from 'dayjs'
|
||||
import { fenToYuan } from '@/utils'
|
||||
import * as DateUtil from '@/utils/formatTime'
|
||||
import {
|
||||
MemberAnalyseRespVO,
|
||||
MemberAreaStatisticsRespVO,
|
||||
MemberSexStatisticsRespVO,
|
||||
MemberAnalyseReqVO,
|
||||
MemberSummaryRespVO,
|
||||
MemberTerminalStatisticsRespVO
|
||||
} from '@/api/mall/statistics/member'
|
||||
import { DICT_TYPE, DictDataType, getIntDictOptions } from '@/utils/dict'
|
||||
import echarts from '@/plugins/echarts'
|
||||
import { fenToYuanFormat } from '@/utils/formatter'
|
||||
import MemberFunnelCard from './components/MemberFunnelCard.vue'
|
||||
import MemberTerminalCard from './components/MemberTerminalCard.vue'
|
||||
import { CardTitle } from '@/components/Card'
|
||||
|
||||
/** 会员统计 */
|
||||
defineOptions({ name: 'MemberStatistics' })
|
||||
|
||||
const loading = ref(true) // 加载中
|
||||
const analyseLoading = ref(true) // 会员概览加载中
|
||||
const queryParams = reactive<MemberAnalyseReqVO>({ times: ['', ''] }) // 会员概览查询参数
|
||||
const shortcutDays = ref(7) // 日期快捷天数（单选按钮组）, 默认7天
|
||||
const summary = ref<MemberSummaryRespVO>() // 会员统计数据
|
||||
const analyseData = ref<MemberAnalyseRespVO>() // 会员分析数据
|
||||
const areaStatisticsList = shallowRef<MemberAreaStatisticsRespVO[]>() // 省份会员统计
|
||||
|
||||
// 注册地图
|
||||
echarts?.registerMap('china', china!)
|
||||
|
||||
/** 日期快捷选择 */
|
||||
const shortcuts = [
|
||||
{
|
||||
text: '昨天',
|
||||
value: () => DateUtil.getDayRange(new Date(), -1)
|
||||
},
|
||||
{
|
||||
text: '最近7天',
|
||||
value: () => DateUtil.getLast7Days()
|
||||
},
|
||||
{
|
||||
text: '本月',
|
||||
value: () => [dayjs().startOf('M'), dayjs().subtract(1, 'd')]
|
||||
},
|
||||
{
|
||||
text: '最近30天',
|
||||
value: () => DateUtil.getLast30Days()
|
||||
},
|
||||
{
|
||||
text: '最近1年',
|
||||
value: () => DateUtil.getLast1Year()
|
||||
}
|
||||
]
|
||||
echarts?.registerMap('china', china as any)
|
||||
|
||||
/** 会员终端统计图配置 */
|
||||
const terminalChartOptions = reactive<EChartsOption>({
|
||||
@ -331,8 +207,8 @@ const areaChartOptions = reactive<EChartsOption>({
|
||||
formatter: (params: any) => {
|
||||
return `${params?.data?.areaName || params?.name}<br/>
|
||||
会员数量：${params?.data?.userCount || 0}<br/>
|
||||
订单创建数量：${params?.data?.orderCreateCount || 0}<br/>
|
||||
订单支付数量：${params?.data?.orderPayCount || 0}<br/>
|
||||
订单创建数量：${params?.data?.orderCreateUserCount || 0}<br/>
|
||||
订单支付数量：${params?.data?.orderPayUserCount || 0}<br/>
|
||||
订单支付金额：${fenToYuan(params?.data?.orderPayPrice || 0)}`
|
||||
}
|
||||
},
|
||||
@ -357,37 +233,14 @@ const areaChartOptions = reactive<EChartsOption>({
|
||||
]
|
||||
}) as EChartsOption
|
||||
|
||||
/** 计算环比 */
|
||||
const calculateRelativeRate = (value?: number, reference?: number) => {
|
||||
// 防止除0
|
||||
if (!reference) return 0
|
||||
|
||||
return ((100 * ((value || 0) - reference)) / reference).toFixed(0)
|
||||
}
|
||||
|
||||
/** 设置时间范围 */
|
||||
function setTimes() {
|
||||
const beginDate = dayjs().subtract(shortcutDays.value, 'd')
|
||||
const yesterday = dayjs().subtract(1, 'd')
|
||||
queryParams.times = DateUtil.getDateRange(beginDate, yesterday)
|
||||
}
|
||||
|
||||
/** 处理会员概览查询（日期单选按钮组选择后） */
|
||||
const handleDateTypeChange = async () => {
|
||||
// 设置时间范围
|
||||
setTimes()
|
||||
// 查询数据
|
||||
await getMemberAnalyse()
|
||||
}
|
||||
|
||||
/** 查询会员统计 */
|
||||
const getMemberSummary = async () => {
|
||||
summary.value = await TradeMemberApi.getMemberSummary()
|
||||
summary.value = await MemberStatisticsApi.getMemberSummary()
|
||||
}
|
||||
|
||||
/** 按照省份，查询会员统计列表 */
|
||||
const getMemberAreaStatisticsList = async () => {
|
||||
const list = await TradeMemberApi.getMemberAreaStatisticsList()
|
||||
const list = await MemberStatisticsApi.getMemberAreaStatisticsList()
|
||||
areaStatisticsList.value = list.map((item: MemberAreaStatisticsRespVO) => {
|
||||
return {
|
||||
...item,
|
||||
@ -401,20 +254,21 @@ const getMemberAreaStatisticsList = async () => {
|
||||
})
|
||||
let min = 0
|
||||
let max = 0
|
||||
areaChartOptions.series[0].data = areaStatisticsList.value.map((item) => {
|
||||
min = Math.min(min, item.orderPayCount)
|
||||
max = Math.max(max, item.orderPayCount)
|
||||
return { ...item, name: item.areaName, value: item.orderPayCount || 0 }
|
||||
areaChartOptions.series![0].data = areaStatisticsList.value.map((item) => {
|
||||
min = Math.min(min, item.orderPayUserCount || 0)
|
||||
max = Math.max(max, item.orderPayUserCount || 0)
|
||||
return { ...item, name: item.areaName, value: item.orderPayUserCount || 0 }
|
||||
})
|
||||
areaChartOptions.visualMap.min = min
|
||||
areaChartOptions.visualMap.max = max
|
||||
areaChartOptions.visualMap!['min'] = min
|
||||
areaChartOptions.visualMap!['max'] = max
|
||||
}
|
||||
|
||||
/** 按照性别，查询会员统计列表 */
|
||||
const getMemberSexStatisticsList = async () => {
|
||||
const list = await TradeMemberApi.getMemberSexStatisticsList()
|
||||
const list = await MemberStatisticsApi.getMemberSexStatisticsList()
|
||||
const dictDataList = getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)
|
||||
sexChartOptions.series[0].data = dictDataList.map((dictData: DictDataType) => {
|
||||
dictDataList.push({ label: '未知', value: null } as any)
|
||||
sexChartOptions.series![0].data = dictDataList.map((dictData: DictDataType) => {
|
||||
const userCount = list.find((item: MemberSexStatisticsRespVO) => item.sex === dictData.value)
|
||||
?.userCount
|
||||
return {
|
||||
@ -426,8 +280,9 @@ const getMemberSexStatisticsList = async () => {
|
||||
|
||||
/** 按照终端，查询会员统计列表 */
|
||||
const getMemberTerminalStatisticsList = async () => {
|
||||
const list = await TradeMemberApi.getMemberTerminalStatisticsList()
|
||||
const list = await MemberStatisticsApi.getMemberTerminalStatisticsList()
|
||||
const dictDataList = getIntDictOptions(DICT_TYPE.TERMINAL)
|
||||
dictDataList.push({ label: '未知', value: null } as any)
|
||||
terminalChartOptions.series![0].data = dictDataList.map((dictData: DictDataType) => {
|
||||
const userCount = list.find(
|
||||
(item: MemberTerminalStatisticsRespVO) => item.terminal === dictData.value
|
||||
@ -439,20 +294,6 @@ const getMemberTerminalStatisticsList = async () => {
|
||||
})
|
||||
}
|
||||
|
||||
/** 查询会员概览数据列表 */
|
||||
const getMemberAnalyse = async () => {
|
||||
analyseLoading.value = true
|
||||
const times = queryParams.times
|
||||
// 开始与截止在同一天的, 环比出不来, 需要延长一天
|
||||
if (DateUtil.isSameDay(times[0], times[1])) {
|
||||
// 前天
|
||||
times[0] = DateUtil.formatDate(dayjs(times[0]).subtract(1, 'd'))
|
||||
}
|
||||
// 查询数据
|
||||
analyseData.value = await TradeMemberApi.getMemberAnalyse({ times })
|
||||
analyseLoading.value = false
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(async () => {
|
||||
loading.value = true
|
||||
@ -460,8 +301,7 @@ onMounted(async () => {
|
||||
getMemberSummary(),
|
||||
getMemberTerminalStatisticsList(),
|
||||
getMemberAreaStatisticsList(),
|
||||
getMemberSexStatisticsList(),
|
||||
handleDateTypeChange()
|
||||
getMemberSexStatisticsList()
|
||||
])
|
||||
loading.value = false
|
||||
})
|
||||
@ -472,13 +312,4 @@ onMounted(async () => {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
.trapezoid1 {
|
||||
transform: perspective(5em) rotateX(-11deg);
|
||||
}
|
||||
.trapezoid2 {
|
||||
transform: perspective(7em) rotateX(-20deg);
|
||||
}
|
||||
.trapezoid3 {
|
||||
transform: perspective(3em) rotateX(-13deg);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -59,25 +59,9 @@
|
||||
<template #header>
|
||||
<!-- 标题 -->
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<span>交易状况</span>
|
||||
<CardTitle title="交易状况" />
|
||||
<!-- 查询条件 -->
|
||||
<div class="flex flex-row items-center gap-2">
|
||||
<el-radio-group v-model="shortcutDays" @change="handleDateTypeChange">
|
||||
<el-radio-button :label="1">昨天</el-radio-button>
|
||||
<el-radio-button :label="7">最近7天</el-radio-button>
|
||||
<el-radio-button :label="30">最近30天</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-date-picker
|
||||
v-model="queryParams.times"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
:shortcuts="shortcuts"
|
||||
class="!w-240px"
|
||||
@change="getTradeTrendData"
|
||||
/>
|
||||
<ShortcutDateRangePicker ref="shortcutDateRangePicker" @change="getTradeTrendData">
|
||||
<el-button
|
||||
class="ml-4"
|
||||
@click="handleExport"
|
||||
@ -86,7 +70,7 @@
|
||||
>
|
||||
<Icon icon="ep:download" class="mr-1" />导出
|
||||
</el-button>
|
||||
</div>
|
||||
</ShortcutDateRangePicker>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 统计值 -->
|
||||
@ -100,11 +84,11 @@
|
||||
icon-bg-color="text-blue-500"
|
||||
prefix="￥"
|
||||
:decimals="2"
|
||||
:value="fenToYuan(trendSummary?.value?.turnover || 0)"
|
||||
:value="fenToYuan(trendSummary?.value?.turnoverPrice || 0)"
|
||||
:percent="
|
||||
calculateRelativeRate(
|
||||
trendSummary?.value?.turnover,
|
||||
trendSummary?.reference?.turnover
|
||||
trendSummary?.value?.turnoverPrice,
|
||||
trendSummary?.reference?.turnoverPrice
|
||||
)
|
||||
"
|
||||
/>
|
||||
@ -172,11 +156,11 @@
|
||||
icon-bg-color="text-cyan-500"
|
||||
prefix="￥"
|
||||
:decimals="2"
|
||||
:value="fenToYuan(trendSummary?.value?.balancePrice || 0)"
|
||||
:value="fenToYuan(trendSummary?.value?.orderWalletPayPrice || 0)"
|
||||
:percent="
|
||||
calculateRelativeRate(
|
||||
trendSummary?.value?.balancePrice,
|
||||
trendSummary?.reference?.balancePrice
|
||||
trendSummary?.value?.orderWalletPayPrice,
|
||||
trendSummary?.reference?.orderWalletPayPrice
|
||||
)
|
||||
"
|
||||
/>
|
||||
@ -230,58 +214,27 @@ import * as TradeStatisticsApi from '@/api/mall/statistics/trade'
|
||||
import TradeStatisticValue from './components/TradeStatisticValue.vue'
|
||||
import TradeTrendValue from './components/TradeTrendValue.vue'
|
||||
import { EChartsOption } from 'echarts'
|
||||
import {
|
||||
TradeStatisticsComparisonRespVO,
|
||||
TradeSummaryRespVO,
|
||||
TradeTrendReqVO,
|
||||
TradeTrendSummaryRespVO
|
||||
} from '@/api/mall/statistics/trade'
|
||||
import dayjs from 'dayjs'
|
||||
import { fenToYuan } from '@/utils'
|
||||
import * as DateUtil from '@/utils/formatTime'
|
||||
import { DataComparisonRespVO } from '@/api/mall/statistics/common'
|
||||
import { TradeSummaryRespVO, TradeTrendSummaryRespVO } from '@/api/mall/statistics/trade'
|
||||
import { calculateRelativeRate, fenToYuan } from '@/utils'
|
||||
import download from '@/utils/download'
|
||||
import { CardTitle } from '@/components/Card'
|
||||
|
||||
/** 交易统计 */
|
||||
defineOptions({ name: 'TradeStatistics' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const loading = ref(true) // 加载中
|
||||
const trendLoading = ref(true) // 交易状态加载中
|
||||
const exportLoading = ref(false) // 导出的加载中
|
||||
const queryParams = reactive<TradeTrendReqVO>({ times: ['', ''] }) // 交易状况查询参数
|
||||
const shortcutDays = ref(7) // 日期快捷天数（单选按钮组）, 默认7天
|
||||
const summary = ref<TradeStatisticsComparisonRespVO<TradeSummaryRespVO>>() // 交易统计数据
|
||||
const trendSummary = ref<TradeStatisticsComparisonRespVO<TradeTrendSummaryRespVO>>() // 交易状况统计数据
|
||||
|
||||
/** 日期快捷选择 */
|
||||
const shortcuts = [
|
||||
{
|
||||
text: '昨天',
|
||||
value: () => DateUtil.getDayRange(new Date(), -1)
|
||||
},
|
||||
{
|
||||
text: '最近7天',
|
||||
value: () => DateUtil.getLast7Days()
|
||||
},
|
||||
{
|
||||
text: '本月',
|
||||
value: () => [dayjs().startOf('M'), dayjs().subtract(1, 'd')]
|
||||
},
|
||||
{
|
||||
text: '最近30天',
|
||||
value: () => DateUtil.getLast30Days()
|
||||
},
|
||||
{
|
||||
text: '最近1年',
|
||||
value: () => DateUtil.getLast1Year()
|
||||
}
|
||||
]
|
||||
const summary = ref<DataComparisonRespVO<TradeSummaryRespVO>>() // 交易统计数据
|
||||
const trendSummary = ref<DataComparisonRespVO<TradeTrendSummaryRespVO>>() // 交易状况统计数据
|
||||
const shortcutDateRangePicker = ref()
|
||||
|
||||
/** 折线图配置 */
|
||||
const lineChartOptions = reactive<EChartsOption>({
|
||||
dataset: {
|
||||
dimensions: ['date', 'turnover', 'orderPayPrice', 'rechargePrice', 'expensePrice'],
|
||||
dimensions: ['date', 'turnoverPrice', 'orderPayPrice', 'rechargePrice', 'expensePrice'],
|
||||
source: []
|
||||
},
|
||||
grid: {
|
||||
@ -333,33 +286,10 @@ const lineChartOptions = reactive<EChartsOption>({
|
||||
}
|
||||
}) as EChartsOption
|
||||
|
||||
/** 计算环比 */
|
||||
const calculateRelativeRate = (value?: number, reference?: number) => {
|
||||
// 防止除0
|
||||
if (!reference) return 0
|
||||
|
||||
return ((100 * ((value || 0) - reference)) / reference).toFixed(0)
|
||||
}
|
||||
|
||||
/** 设置时间范围 */
|
||||
function setTimes() {
|
||||
const beginDate = dayjs().subtract(shortcutDays.value, 'd')
|
||||
const yesterday = dayjs().subtract(1, 'd')
|
||||
queryParams.times = DateUtil.getDateRange(beginDate, yesterday)
|
||||
}
|
||||
|
||||
/** 处理交易状况查询（日期单选按钮组选择后） */
|
||||
const handleDateTypeChange = async () => {
|
||||
// 设置时间范围
|
||||
setTimes()
|
||||
// 查询数据
|
||||
await getTradeTrendData()
|
||||
}
|
||||
|
||||
/** 处理交易状况查询 */
|
||||
const getTradeTrendData = async () => {
|
||||
trendLoading.value = true
|
||||
await Promise.all([getTradeTrendSummary(), getTradeTrendList()])
|
||||
await Promise.all([getTradeTrendSummary(), getTradeStatisticsList()])
|
||||
trendLoading.value = false
|
||||
}
|
||||
|
||||
@ -370,24 +300,18 @@ const getTradeStatisticsSummary = async () => {
|
||||
|
||||
/** 查询交易状况数据统计 */
|
||||
const getTradeTrendSummary = async () => {
|
||||
loading.value = true
|
||||
trendSummary.value = await TradeStatisticsApi.getTradeTrendSummary(queryParams)
|
||||
loading.value = false
|
||||
const times = shortcutDateRangePicker.value.times
|
||||
trendSummary.value = await TradeStatisticsApi.getTradeTrendSummary({ times })
|
||||
}
|
||||
|
||||
/** 查询交易状况数据列表 */
|
||||
const getTradeTrendList = async () => {
|
||||
const times = queryParams.times
|
||||
// 开始与截止在同一天的, 折线图出不来, 需要延长一天
|
||||
if (DateUtil.isSameDay(times[0], times[1])) {
|
||||
// 前天
|
||||
times[0] = DateUtil.formatDate(dayjs(times[0]).subtract(1, 'd'))
|
||||
}
|
||||
const getTradeStatisticsList = async () => {
|
||||
// 查询数据
|
||||
const list = await TradeStatisticsApi.getTradeTrendList({ times })
|
||||
const times = shortcutDateRangePicker.value.times
|
||||
const list = await TradeStatisticsApi.getTradeStatisticsList({ times })
|
||||
// 处理数据
|
||||
for (let item of list) {
|
||||
item.turnover = fenToYuan(item.turnover)
|
||||
item.turnoverPrice = fenToYuan(item.turnoverPrice)
|
||||
item.orderPayPrice = fenToYuan(item.orderPayPrice)
|
||||
item.rechargePrice = fenToYuan(item.rechargePrice)
|
||||
item.expensePrice = fenToYuan(item.expensePrice)
|
||||
@ -405,7 +329,8 @@ const handleExport = async () => {
|
||||
await message.exportConfirm()
|
||||
// 发起导出
|
||||
exportLoading.value = true
|
||||
const data = await TradeStatisticsApi.exportTradeTrend(queryParams)
|
||||
const times = shortcutDateRangePicker.value.times
|
||||
const data = await TradeStatisticsApi.exportTradeStatisticsExcel({ times })
|
||||
download.excel(data, '交易状况.xls')
|
||||
} catch {
|
||||
} finally {
|
||||
@ -416,7 +341,6 @@ const handleExport = async () => {
|
||||
/** 初始化 **/
|
||||
onMounted(async () => {
|
||||
await getTradeStatisticsSummary()
|
||||
await handleDateTypeChange()
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -15,7 +15,21 @@
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="接收人" prop="userId">
|
||||
<el-form-item label="用户类型" prop="userType">
|
||||
<el-radio-group v-model="formData.userType">
|
||||
<el-radio
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.USER_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.value as number"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="formData.userType === 1" label="接收人ID" prop="userId">
|
||||
<el-input v-model="formData.userId" style="width: 160px" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="formData.userType === 2" label="接收人" prop="userId">
|
||||
<el-select v-model="formData.userId" placeholder="请选择接收人">
|
||||
<el-option
|
||||
v-for="item in userOption"
|
||||
@ -46,6 +60,7 @@
|
||||
<script lang="ts" setup>
|
||||
import * as UserApi from '@/api/system/user'
|
||||
import * as NotifyTemplateApi from '@/api/system/notify/template'
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
|
||||
defineOptions({ name: 'SystemNotifyTemplateSendForm' })
|
||||
|
||||
@ -57,6 +72,7 @@ const formData = ref({
|
||||
content: '',
|
||||
params: {},
|
||||
userId: null,
|
||||
userType: 1,
|
||||
templateCode: '',
|
||||
templateParams: new Map()
|
||||
})
|
||||
@ -122,7 +138,8 @@ const resetForm = () => {
|
||||
params: {},
|
||||
mobile: '',
|
||||
templateCode: '',
|
||||
templateParams: new Map()
|
||||
templateParams: new Map(),
|
||||
userType: 1
|
||||
} as any
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user