feat(user): 新增收货地址管理及售后申请页面
- 新增地址类型定义，增强前端地址数据结构 - 新增地址编辑页面，支持地址智能识别和定位选点功能 - 地址编辑支持省市区选择及默认地址设置 - 新增地址列表页面，支持地址展示、删除、编辑和选择功能 - 实现售后申请页面，支持选择售后类型和退款原因 - 售后申请支持商品选择、退款金额计算和凭证上传 - 新增售后详情页面，支持售后状态展示及申请取消 - 优化页面加载和用户交互体验，增加错误提示和权限处理
This commit is contained in:
197
src_bak/pages/statistics/dashboard/index.tsx
Normal file
197
src_bak/pages/statistics/dashboard/index.tsx
Normal file
@@ -0,0 +1,197 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react'
|
||||
import { View, Text, ScrollView } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import NavBar from '@/components/NavBar'
|
||||
import { pageShopOrder } from '@/api/shop/shopOrder'
|
||||
import Loading from '@/components/common/Loading'
|
||||
|
||||
definePageConfig({
|
||||
navigationBarTitleText: '数据看板',
|
||||
})
|
||||
|
||||
interface DashboardStats {
|
||||
orders: number
|
||||
revenue: number
|
||||
paidOrders: number
|
||||
pendingOrders: number
|
||||
canceledOrders: number
|
||||
}
|
||||
|
||||
const StatisticsDashboardPage: React.FC = () => {
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [todayStats, setTodayStats] = useState<DashboardStats>({ orders: 0, revenue: 0, paidOrders: 0, pendingOrders: 0, canceledOrders: 0 })
|
||||
const [weekStats, setWeekStats] = useState<DashboardStats>({ orders: 0, revenue: 0, paidOrders: 0, pendingOrders: 0, canceledOrders: 0 })
|
||||
|
||||
const formatDate = (date: Date) => {
|
||||
const y = date.getFullYear()
|
||||
const m = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const d = String(date.getDate()).padStart(2, '0')
|
||||
return `${y}-${m}-${d}`
|
||||
}
|
||||
|
||||
const calcStats = (orders: any[]): DashboardStats => {
|
||||
const paidOrders = orders.filter(o => o.payStatus === true || o.payStatus === 1)
|
||||
const revenue = paidOrders.reduce((sum, o) => sum + parseFloat(o.payPrice || '0'), 0)
|
||||
const pendingOrders = orders.filter(o => o.orderStatus === 0 || (!o.payStatus && o.orderStatus !== 2))
|
||||
const canceledOrders = orders.filter(o => o.orderStatus === 2)
|
||||
return {
|
||||
orders: orders.length,
|
||||
revenue,
|
||||
paidOrders: paidOrders.length,
|
||||
pendingOrders: pendingOrders.length,
|
||||
canceledOrders: canceledOrders.length,
|
||||
}
|
||||
}
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const now = new Date()
|
||||
const todayStr = formatDate(now)
|
||||
const weekAgo = new Date(now.getTime() - 6 * 24 * 60 * 60 * 1000)
|
||||
const weekAgoStr = formatDate(weekAgo)
|
||||
|
||||
const [todayRes, weekRes] = await Promise.all([
|
||||
pageShopOrder({ page: 1, limit: 200, startTime: `${todayStr} 00:00:00`, endTime: `${todayStr} 23:59:59` } as any).catch(() => null),
|
||||
pageShopOrder({ page: 1, limit: 500, startTime: `${weekAgoStr} 00:00:00`, endTime: `${todayStr} 23:59:59` } as any).catch(() => null),
|
||||
])
|
||||
|
||||
if (todayRes?.list) {
|
||||
setTodayStats(calcStats(todayRes.list))
|
||||
}
|
||||
if (weekRes?.list) {
|
||||
setWeekStats(calcStats(weekRes.list))
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('加载统计数据失败', e)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
loadData()
|
||||
}, [loadData])
|
||||
|
||||
const goTo = (path: string) => {
|
||||
Taro.navigateTo({ url: path })
|
||||
}
|
||||
|
||||
const renderStatCard = (label: string, value: string | number, color: string, sub?: string) => (
|
||||
<View className="bg-white rounded-lg p-4">
|
||||
<Text className="text-sm text-gray-500 mb-2 block">{label}</Text>
|
||||
<Text className="text-2xl font-bold block" style={{ color }}>{value}</Text>
|
||||
{sub && <Text className="text-xs mt-1 block" style={{ color: '#52c41a' }}>{sub}</Text>}
|
||||
</View>
|
||||
)
|
||||
|
||||
return (
|
||||
<View className="min-h-screen bg-gray-100">
|
||||
<NavBar title="数据看板" />
|
||||
<ScrollView scrollY>
|
||||
{loading ? (
|
||||
<Loading />
|
||||
) : (
|
||||
<View>
|
||||
{/* 今日数据 */}
|
||||
<View className="p-4">
|
||||
<View className="flex items-center justify-between mb-3">
|
||||
<Text className="text-base font-medium">今日数据</Text>
|
||||
<Text className="text-xs text-gray-400">实时</Text>
|
||||
</View>
|
||||
<View className="grid grid-cols-2 gap-3 mb-3">
|
||||
{renderStatCard('今日订单', todayStats.orders, '#3b82f6')}
|
||||
{renderStatCard('今日销售额', `¥${todayStats.revenue.toFixed(2)}`, '#ef4444')}
|
||||
{renderStatCard('已支付', todayStats.paidOrders, '#10b981')}
|
||||
{renderStatCard('待支付', todayStats.pendingOrders, '#f59e0b')}
|
||||
</View>
|
||||
{todayStats.canceledOrders > 0 && (
|
||||
<View className="bg-white rounded-lg px-4 py-3 flex items-center justify-between">
|
||||
<Text className="text-sm text-gray-600">今日取消订单</Text>
|
||||
<Text className="text-base font-medium text-gray-500">{todayStats.canceledOrders} 单</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 近7天数据 */}
|
||||
<View className="p-4 pt-0">
|
||||
<View className="flex items-center justify-between mb-3">
|
||||
<Text className="text-base font-medium">近7天数据</Text>
|
||||
<Text className="text-xs text-gray-400">滚动统计</Text>
|
||||
</View>
|
||||
<View className="bg-white rounded-lg p-4">
|
||||
<View className="flex items-center justify-between py-3 border-b border-gray-50">
|
||||
<Text className="text-sm text-gray-600">总订单数</Text>
|
||||
<Text className="text-base font-medium">{weekStats.orders} 单</Text>
|
||||
</View>
|
||||
<View className="flex items-center justify-between py-3 border-b border-gray-50">
|
||||
<Text className="text-sm text-gray-600">总销售额</Text>
|
||||
<Text className="text-base font-medium text-red-500">¥{weekStats.revenue.toFixed(2)}</Text>
|
||||
</View>
|
||||
<View className="flex items-center justify-between py-3 border-b border-gray-50">
|
||||
<Text className="text-sm text-gray-600">已支付订单</Text>
|
||||
<Text className="text-base font-medium text-green-500">{weekStats.paidOrders} 单</Text>
|
||||
</View>
|
||||
<View className="flex items-center justify-between py-3">
|
||||
<Text className="text-sm text-gray-600">客单价</Text>
|
||||
<Text className="text-base font-medium text-orange-500">
|
||||
¥{weekStats.paidOrders > 0 ? (weekStats.revenue / weekStats.paidOrders).toFixed(2) : '0.00'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 快捷入口 */}
|
||||
<View className="p-4 pt-0">
|
||||
<Text className="text-base font-medium mb-3 block">详细数据</Text>
|
||||
<View className="bg-white rounded-lg overflow-hidden">
|
||||
<View
|
||||
className="p-4 border-b border-gray-50 flex items-center justify-between"
|
||||
onClick={() => goTo('/pages/statistics/sales/index')}
|
||||
>
|
||||
<View className="flex items-center gap-3">
|
||||
<Text className="text-lg">📊</Text>
|
||||
<Text className="text-sm text-gray-700">销售统计</Text>
|
||||
</View>
|
||||
<Text className="text-gray-400">→</Text>
|
||||
</View>
|
||||
<View
|
||||
className="p-4 border-b border-gray-50 flex items-center justify-between"
|
||||
onClick={() => goTo('/pages/statistics/users/index')}
|
||||
>
|
||||
<View className="flex items-center gap-3">
|
||||
<Text className="text-lg">👥</Text>
|
||||
<Text className="text-sm text-gray-700">用户分析</Text>
|
||||
</View>
|
||||
<Text className="text-gray-400">→</Text>
|
||||
</View>
|
||||
<View
|
||||
className="p-4 flex items-center justify-between"
|
||||
onClick={() => goTo('/pages/order/list')}
|
||||
>
|
||||
<View className="flex items-center gap-3">
|
||||
<Text className="text-lg">📋</Text>
|
||||
<Text className="text-sm text-gray-700">查看所有订单</Text>
|
||||
</View>
|
||||
<Text className="text-gray-400">→</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 刷新按钮 */}
|
||||
<View className="p-4 pt-0">
|
||||
<View
|
||||
className="bg-white rounded-lg p-4 text-center"
|
||||
onClick={loadData}
|
||||
>
|
||||
<Text className="text-sm text-blue-500">点击刷新数据</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default StatisticsDashboardPage
|
||||
226
src_bak/pages/statistics/sales/index.tsx
Normal file
226
src_bak/pages/statistics/sales/index.tsx
Normal file
@@ -0,0 +1,226 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react'
|
||||
import { View, Text, ScrollView } from '@tarojs/components'
|
||||
import NavBar from '@/components/NavBar'
|
||||
import { pageShopOrder } from '@/api/shop/shopOrder'
|
||||
import type { ShopOrder } from '@/api/shop/shopOrder/model'
|
||||
import Loading from '@/components/common/Loading'
|
||||
|
||||
definePageConfig({
|
||||
navigationBarTitleText: '销售统计',
|
||||
})
|
||||
|
||||
type TimeRange = 'week' | 'month'
|
||||
|
||||
interface DayStat {
|
||||
date: string
|
||||
amount: number
|
||||
orders: number
|
||||
}
|
||||
|
||||
const SalesStatisticsPage: React.FC = () => {
|
||||
const [timeRange, setTimeRange] = useState<TimeRange>('week')
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [dayStats, setDayStats] = useState<DayStat[]>([])
|
||||
const [totalRevenue, setTotalRevenue] = useState(0)
|
||||
const [totalOrders, setTotalOrders] = useState(0)
|
||||
const [avgPrice, setAvgPrice] = useState(0)
|
||||
|
||||
const formatDateKey = (date: Date) => {
|
||||
const m = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const d = String(date.getDate()).padStart(2, '0')
|
||||
return `${m}-${d}`
|
||||
}
|
||||
|
||||
const formatDateFull = (date: Date) => {
|
||||
const y = date.getFullYear()
|
||||
const m = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const d = String(date.getDate()).padStart(2, '0')
|
||||
return `${y}-${m}-${d}`
|
||||
}
|
||||
|
||||
const loadData = useCallback(async (range: TimeRange) => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const now = new Date()
|
||||
const days = range === 'week' ? 7 : 30
|
||||
const startDate = new Date(now.getTime() - (days - 1) * 24 * 60 * 60 * 1000)
|
||||
const startStr = `${formatDateFull(startDate)} 00:00:00`
|
||||
const endStr = `${formatDateFull(now)} 23:59:59`
|
||||
|
||||
const res = await pageShopOrder({
|
||||
page: 1,
|
||||
limit: 500,
|
||||
startTime: startStr,
|
||||
endTime: endStr,
|
||||
} as any).catch(() => null)
|
||||
|
||||
if (!res?.list) {
|
||||
setDayStats([])
|
||||
setTotalRevenue(0)
|
||||
setTotalOrders(0)
|
||||
setAvgPrice(0)
|
||||
return
|
||||
}
|
||||
|
||||
const orders: ShopOrder[] = res.list
|
||||
|
||||
// 按天分组
|
||||
const dayMap: Record<string, { amount: number; orders: number }> = {}
|
||||
for (let i = 0; i < days; i++) {
|
||||
const d = new Date(startDate.getTime() + i * 24 * 60 * 60 * 1000)
|
||||
dayMap[formatDateKey(d)] = { amount: 0, orders: 0 }
|
||||
}
|
||||
|
||||
let totalRev = 0
|
||||
let paidCount = 0
|
||||
orders.forEach(o => {
|
||||
if (!o.createTime) return
|
||||
const key = o.createTime.substring(5, 10) // MM-DD
|
||||
if (dayMap[key]) {
|
||||
const amt = parseFloat(o.payPrice || '0')
|
||||
if (o.payStatus) {
|
||||
dayMap[key].amount += amt
|
||||
totalRev += amt
|
||||
paidCount++
|
||||
}
|
||||
dayMap[key].orders += 1
|
||||
}
|
||||
})
|
||||
|
||||
const stats: DayStat[] = Object.entries(dayMap).map(([date, d]) => ({
|
||||
date,
|
||||
amount: d.amount,
|
||||
orders: d.orders,
|
||||
}))
|
||||
|
||||
setDayStats(stats)
|
||||
setTotalRevenue(totalRev)
|
||||
setTotalOrders(orders.length)
|
||||
setAvgPrice(paidCount > 0 ? totalRev / paidCount : 0)
|
||||
} catch (e) {
|
||||
console.error('加载销售数据失败', e)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
loadData(timeRange)
|
||||
}, [timeRange, loadData])
|
||||
|
||||
const maxAmount = Math.max(...dayStats.map(d => d.amount), 1)
|
||||
|
||||
return (
|
||||
<View className="min-h-screen bg-gray-100">
|
||||
<NavBar title="销售统计" />
|
||||
|
||||
{/* 时间范围选择 */}
|
||||
<View className="bg-white flex">
|
||||
{([{ key: 'week', label: '近7天' }, { key: 'month', label: '近30天' }] as const).map(option => (
|
||||
<View
|
||||
key={option.key}
|
||||
className="flex-1 py-3 text-center relative"
|
||||
style={{ color: timeRange === option.key ? '#ef4444' : '#6b7280' }}
|
||||
onClick={() => setTimeRange(option.key)}
|
||||
>
|
||||
<Text className={timeRange === option.key ? 'font-medium' : ''}>{option.label}</Text>
|
||||
{timeRange === option.key && (
|
||||
<View className="absolute bottom-0 left-0 right-0 flex justify-center">
|
||||
<View className="h-1 rounded-t" style={{ width: '32px', backgroundColor: '#ef4444' }} />
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<ScrollView scrollY>
|
||||
{loading ? (
|
||||
<Loading />
|
||||
) : (
|
||||
<View className="p-4">
|
||||
{/* 汇总数据 */}
|
||||
<View className="bg-white rounded-lg p-4 mb-4">
|
||||
<View className="flex justify-around mb-4">
|
||||
<View className="text-center">
|
||||
<Text className="text-2xl font-bold text-red-500 block">¥{totalRevenue.toFixed(2)}</Text>
|
||||
<Text className="text-xs text-gray-500">总销售额</Text>
|
||||
</View>
|
||||
<View className="text-center">
|
||||
<Text className="text-2xl font-bold text-blue-500 block">{totalOrders}</Text>
|
||||
<Text className="text-xs text-gray-500">总订单数</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View className="flex justify-around border-t border-gray-50 pt-4">
|
||||
<View className="text-center">
|
||||
<Text className="text-2xl font-bold text-green-500 block">¥{avgPrice.toFixed(2)}</Text>
|
||||
<Text className="text-xs text-gray-500">客单价</Text>
|
||||
</View>
|
||||
<View className="text-center">
|
||||
<Text className="text-2xl font-bold text-orange-500 block">
|
||||
{totalOrders > 0 ? ((dayStats.filter(d => d.amount > 0).length / dayStats.length) * 100).toFixed(1) : '0.0'}%
|
||||
</Text>
|
||||
<Text className="text-xs text-gray-500">有销售天占比</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 销售趋势柱状图 */}
|
||||
<View className="bg-white rounded-lg p-4 mb-4">
|
||||
<Text className="text-base font-medium mb-4 block">销售趋势</Text>
|
||||
{dayStats.every(d => d.amount === 0) ? (
|
||||
<View className="py-8 text-center">
|
||||
<Text className="text-gray-400 text-sm">暂无销售数据</Text>
|
||||
</View>
|
||||
) : (
|
||||
<View>
|
||||
<View className="flex items-end justify-between" style={{ height: '120px', marginBottom: '8px' }}>
|
||||
{dayStats.map((item, index) => (
|
||||
<View key={index} className="flex flex-col items-center flex-1">
|
||||
<View
|
||||
className="rounded-t"
|
||||
style={{
|
||||
width: '80%',
|
||||
height: `${Math.max((item.amount / maxAmount) * 100, item.amount > 0 ? 4 : 0)}%`,
|
||||
backgroundColor: item.amount > 0 ? '#ef4444' : '#e5e7eb',
|
||||
minHeight: item.amount > 0 ? '4px' : '2px',
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
<View className="flex justify-between">
|
||||
{dayStats.map((item, index) => (
|
||||
<Text key={index} className="text-xs text-gray-400 flex-1 text-center">
|
||||
{item.date.substring(3)}
|
||||
</Text>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 每日明细 */}
|
||||
<View className="bg-white rounded-lg p-4">
|
||||
<Text className="text-base font-medium mb-3 block">每日明细</Text>
|
||||
{dayStats.length === 0 ? (
|
||||
<Text className="text-gray-400 text-sm text-center block py-4">暂无数据</Text>
|
||||
) : (
|
||||
dayStats.slice().reverse().map((item, index) => (
|
||||
<View key={index} className={`flex justify-between items-center py-3 ${index < dayStats.length - 1 ? 'border-b border-gray-50' : ''}`}>
|
||||
<Text className="text-sm text-gray-600">{item.date}</Text>
|
||||
<View className="text-right">
|
||||
<Text className="text-base font-medium block">¥{item.amount.toFixed(2)}</Text>
|
||||
<Text className="text-xs text-gray-400">{item.orders} 单</Text>
|
||||
</View>
|
||||
</View>
|
||||
))
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default SalesStatisticsPage
|
||||
194
src_bak/pages/statistics/users/index.tsx
Normal file
194
src_bak/pages/statistics/users/index.tsx
Normal file
@@ -0,0 +1,194 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react'
|
||||
import { View, Text, ScrollView } from '@tarojs/components'
|
||||
import NavBar from '@/components/NavBar'
|
||||
import { pageShopUserReferee } from '@/api/shop/shopUserReferee'
|
||||
import { pageShopOrder } from '@/api/shop/shopOrder'
|
||||
import Loading from '@/components/common/Loading'
|
||||
|
||||
definePageConfig({
|
||||
navigationBarTitleText: '用户分析',
|
||||
})
|
||||
|
||||
type TimeRange = 'week' | 'month'
|
||||
|
||||
interface UserStat {
|
||||
date: string
|
||||
newUsers: number
|
||||
}
|
||||
|
||||
const UserAnalysisPage: React.FC = () => {
|
||||
const [timeRange, setTimeRange] = useState<TimeRange>('week')
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [totalNewUsers, setTotalNewUsers] = useState(0)
|
||||
const [totalBuyUsers, setTotalBuyUsers] = useState(0)
|
||||
const [dayStats, setDayStats] = useState<UserStat[]>([])
|
||||
const [conversionRate, setConversionRate] = useState(0)
|
||||
|
||||
const formatDateKey = (date: Date) => {
|
||||
const m = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const d = String(date.getDate()).padStart(2, '0')
|
||||
return `${m}-${d}`
|
||||
}
|
||||
|
||||
const formatDateFull = (date: Date) => {
|
||||
const y = date.getFullYear()
|
||||
const m = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const d = String(date.getDate()).padStart(2, '0')
|
||||
return `${y}-${m}-${d}`
|
||||
}
|
||||
|
||||
const loadData = useCallback(async (range: TimeRange) => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const now = new Date()
|
||||
const days = range === 'week' ? 7 : 30
|
||||
const startDate = new Date(now.getTime() - (days - 1) * 24 * 60 * 60 * 1000)
|
||||
const startStr = `${formatDateFull(startDate)} 00:00:00`
|
||||
const endStr = `${formatDateFull(now)} 23:59:59`
|
||||
|
||||
const [refereeRes, orderRes] = await Promise.all([
|
||||
pageShopUserReferee({ page: 1, limit: 500, startTime: startStr, endTime: endStr } as any).catch(() => null),
|
||||
pageShopOrder({ page: 1, limit: 500, startTime: startStr, endTime: endStr } as any).catch(() => null),
|
||||
])
|
||||
|
||||
// 按天分组用户
|
||||
const dayMap: Record<string, number> = {}
|
||||
for (let i = 0; i < days; i++) {
|
||||
const d = new Date(startDate.getTime() + i * 24 * 60 * 60 * 1000)
|
||||
dayMap[formatDateKey(d)] = 0
|
||||
}
|
||||
|
||||
const refereeList = refereeRes?.list || []
|
||||
refereeList.forEach((r: any) => {
|
||||
if (!r.createTime) return
|
||||
const key = r.createTime.substring(5, 10)
|
||||
if (dayMap.hasOwnProperty(key)) {
|
||||
dayMap[key]++
|
||||
}
|
||||
})
|
||||
|
||||
const stats: UserStat[] = Object.entries(dayMap).map(([date, newUsers]) => ({ date, newUsers }))
|
||||
setDayStats(stats)
|
||||
setTotalNewUsers(refereeList.length)
|
||||
|
||||
// 计算购买用户数（通过订单去重）
|
||||
const orderList = orderRes?.list || []
|
||||
const buyerSet = new Set(orderList.map((o: any) => o.userId).filter(Boolean))
|
||||
setTotalBuyUsers(buyerSet.size)
|
||||
setConversionRate(refereeList.length > 0 ? (buyerSet.size / refereeList.length) * 100 : 0)
|
||||
} catch (e) {
|
||||
console.error('加载用户数据失败', e)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
loadData(timeRange)
|
||||
}, [timeRange, loadData])
|
||||
|
||||
const maxNewUsers = Math.max(...dayStats.map(d => d.newUsers), 1)
|
||||
|
||||
return (
|
||||
<View className="min-h-screen bg-gray-100">
|
||||
<NavBar title="用户分析" />
|
||||
|
||||
{/* 时间范围选择 */}
|
||||
<View className="bg-white flex">
|
||||
{([{ key: 'week', label: '近7天' }, { key: 'month', label: '近30天' }] as const).map(option => (
|
||||
<View
|
||||
key={option.key}
|
||||
className="flex-1 py-3 text-center relative"
|
||||
style={{ color: timeRange === option.key ? '#ef4444' : '#6b7280' }}
|
||||
onClick={() => setTimeRange(option.key)}
|
||||
>
|
||||
<Text className={timeRange === option.key ? 'font-medium' : ''}>{option.label}</Text>
|
||||
{timeRange === option.key && (
|
||||
<View className="absolute bottom-0 left-0 right-0 flex justify-center">
|
||||
<View className="h-1 rounded-t" style={{ width: '32px', backgroundColor: '#ef4444' }} />
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<ScrollView scrollY>
|
||||
{loading ? (
|
||||
<Loading />
|
||||
) : (
|
||||
<View className="p-4">
|
||||
{/* 核心指标 */}
|
||||
<View className="bg-white rounded-lg p-4 mb-4">
|
||||
<View className="grid grid-cols-2 gap-3">
|
||||
<View className="text-center p-3 rounded-lg" style={{ backgroundColor: '#eff6ff' }}>
|
||||
<Text className="text-2xl font-bold block" style={{ color: '#3b82f6' }}>{totalNewUsers}</Text>
|
||||
<Text className="text-xs text-gray-500">新增用户</Text>
|
||||
</View>
|
||||
<View className="text-center p-3 rounded-lg" style={{ backgroundColor: '#f0fdf4' }}>
|
||||
<Text className="text-2xl font-bold block" style={{ color: '#10b981' }}>{totalBuyUsers}</Text>
|
||||
<Text className="text-xs text-gray-500">购买用户</Text>
|
||||
</View>
|
||||
<View className="text-center p-3 rounded-lg" style={{ backgroundColor: '#fff7ed' }}>
|
||||
<Text className="text-2xl font-bold block" style={{ color: '#f59e0b' }}>
|
||||
{conversionRate.toFixed(1)}%
|
||||
</Text>
|
||||
<Text className="text-xs text-gray-500">转化率</Text>
|
||||
</View>
|
||||
<View className="text-center p-3 rounded-lg" style={{ backgroundColor: '#fdf4ff' }}>
|
||||
<Text className="text-2xl font-bold block" style={{ color: '#a855f7' }}>
|
||||
{totalNewUsers > 0 ? (totalNewUsers / (timeRange === 'week' ? 7 : 30)).toFixed(1) : '0.0'}
|
||||
</Text>
|
||||
<Text className="text-xs text-gray-500">日均新增</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 新增用户趋势 */}
|
||||
<View className="bg-white rounded-lg p-4 mb-4">
|
||||
<Text className="text-base font-medium mb-4 block">新增用户趋势</Text>
|
||||
{dayStats.every(d => d.newUsers === 0) ? (
|
||||
<View className="py-8 text-center">
|
||||
<Text className="text-gray-400 text-sm">暂无用户数据</Text>
|
||||
</View>
|
||||
) : (
|
||||
dayStats.map((item, index) => (
|
||||
<View key={index} className={`flex items-center mb-3 ${index === dayStats.length - 1 ? 'mb-0' : ''}`}>
|
||||
<Text className="text-xs text-gray-500" style={{ width: '48px' }}>{item.date}</Text>
|
||||
<View className="flex-1 mx-3 rounded-full" style={{ backgroundColor: '#e5e7eb', height: '24px' }}>
|
||||
<View
|
||||
className="rounded-full flex items-center justify-end"
|
||||
style={{
|
||||
width: `${Math.max((item.newUsers / maxNewUsers) * 100, item.newUsers > 0 ? 8 : 0)}%`,
|
||||
backgroundColor: '#3b82f6',
|
||||
height: '24px',
|
||||
paddingRight: '8px',
|
||||
minWidth: item.newUsers > 0 ? '32px' : '0',
|
||||
}}
|
||||
>
|
||||
{item.newUsers > 0 && (
|
||||
<Text className="text-xs text-white">{item.newUsers}</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
))
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 数据说明 */}
|
||||
<View className="bg-white rounded-lg p-4">
|
||||
<Text className="text-base font-medium mb-3 block">数据说明</Text>
|
||||
<View className="flex flex-col" style={{ gap: '8px' }}>
|
||||
<Text className="text-sm text-gray-500 block">• 新增用户：通过推荐/分享注册的用户数</Text>
|
||||
<Text className="text-sm text-gray-500 block">• 购买用户：所选时间内有下单记录的用户</Text>
|
||||
<Text className="text-sm text-gray-500 block">• 转化率：购买用户 / 新增用户 × 100%</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default UserAnalysisPage
|
||||
Reference in New Issue
Block a user