feat(admin): implement order management and statistics with real database integration

This commit is contained in:
comlibmb
2026-02-10 21:59:30 +08:00
parent 47968565a5
commit 1d9915cd77
9 changed files with 567 additions and 129 deletions

View File

@@ -123,27 +123,43 @@
import { ref, onMounted } from 'vue'
import AdminLayout from '@/layouts/admin/AdminLayout.uvue'
import EChartsView from '@/uni_modules/charts/EChartsView.vue'
import { fetchOrderStats, fetchOrderTrend, fetchOrderSourceStats } from '@/services/orderService.uts'
const currentPage = ref<string>('order_statistic')
const title = ref<string>('订单统计')
const trendOption = ref<any>({})
const sourceOption = ref<any>({})
const orderStats = ref<any>(null)
const orderTypeData = ref([
{ name: '普通订单', amount: '430986.62', rate: '97.23' },
{ name: '拼团订单', amount: '7127', rate: '1.60' },
{ name: '预售订单', amount: '4835', rate: '1.09' },
{ name: '秒杀订单', amount: '306', rate: '0.06' },
{ name: '砍价订单', amount: '0', rate: '0.00' }
{ name: '普通订单', amount: '0.00', rate: '0.00' }
])
onMounted(() => {
setTimeout(() => {
initCharts()
}, 300)
loadAllData()
})
async function loadAllData() {
const endTime = new Date().toISOString()
const startTime = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString()
try {
// 1. 加载汇总数据
orderStats.value = await fetchOrderStats(startTime, endTime)
// 2. 加载趋势数据
const trendData = await fetchOrderTrend(startTime, endTime)
initTrendChart(trendData)
// 3. 加载来源数据
const sourceData = await fetchOrderSourceStats(startTime, endTime)
initSourceChart(sourceData)
} catch (e) {
uni.showToast({ title: '加载统计数据失败', icon: 'none' })
}
}
/**
* 转换 UTS 对象为纯 JS 对象,确保 ECharts 能正确解析
*/
@@ -170,12 +186,12 @@ function toPlainObject(obj: any): any {
return plain
}
function initCharts() {
initTrendChart()
initSourceChart()
}
function initSourceChart(data: any[]) {
const chartData = data.map(item => ({
name: item.source === 'unknown' ? '全渠道' : item.source,
value: item.order_count
}))
function initSourceChart() {
const option = {
tooltip: {
trigger: 'item',
@@ -206,31 +222,19 @@ function initSourceChart() {
labelLine: {
show: true
},
data: [
{ value: 1048, name: '公众号' },
{ value: 735, name: '小程序' },
{ value: 580, name: 'H5' },
{ value: 484, name: 'PC' },
{ value: 300, name: 'APP' }
]
data: chartData
}
]
}
sourceOption.value = toPlainObject(option)
}
function initTrendChart() {
const dates = [
'01-04', '01-05', '01-06', '01-07', '01-08', '01-09', '01-10', '01-11', '01-12', '01-13',
'01-14', '01-15', '01-16', '01-17', '01-18', '01-19', '01-20', '01-21', '01-22', '01-23',
'01-24', '01-25', '01-26', '01-27', '01-28', '01-29', '01-30', '01-31', '02-01', '02-02'
]
const orderAmount = [
8000, 2000, 9000, 1000, 138000, 6000, 1000, 500, 800, 200,
5000, 35000, 7000, 1000, 12000, 1000, 100000, 16000, 18000, 1000,
1200, 1500, 68000, 1000, 10000, 2000, 4000, 8000, 2000, 1000
]
function initTrendChart(data: any[]) {
const dates = data.map(item => item.date_group.substring(5))
const orderAmounts = data.map(item => item.total_amount)
const orderCounts = data.map(item => item.order_count)
const refundAmounts = data.map(item => item.refund_amount)
const refundCounts = data.map(item => item.refund_count)
const option = {
tooltip: {
@@ -275,25 +279,25 @@ function initTrendChart() {
symbolSize: 6,
itemStyle: { color: '#5b8ff9' },
lineStyle: { width: 2 },
data: orderAmount
data: orderAmounts
},
{
name: '订单量',
type: 'line',
itemStyle: { color: '#5ad8a6' },
data: dates.map((_ : string) : number => Math.floor(Math.random() * 20))
data: orderCounts
},
{
name: '退款金额',
type: 'line',
itemStyle: { color: '#ff9d4d' },
data: dates.map((_ : string) : number => 0)
data: refundAmounts
},
{
name: '退款订单量',
type: 'line',
itemStyle: { color: '#9270ca' },
data: dates.map((_ : string) : number => 0)
data: refundCounts
}
]
}