-
-
-
佣金: ¥{c}' + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: { + type: 'category', + data: chartData.value.commissionTrend.map(item => { + const date = new Date(item.date) + return `${date.getMonth() + 1}/${date.getDate()}` + }), + axisLabel: { + fontSize: 10 + } + }, + yAxis: { + type: 'value', + axisLabel: { + fontSize: 10, + formatter: '¥{value}' + } + }, + series: [{ + data: chartData.value.commissionTrend.map(item => parseFloat(item.amount || 0).toFixed(2)), + type: 'line', + smooth: true, + lineStyle: { + color: '#409EFF', + width: 3 + }, + itemStyle: { + color: '#409EFF' + }, + areaStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: 'rgba(64, 158, 255, 0.3)' + }, { + offset: 1, color: 'rgba(64, 158, 255, 0.1)' + }] + } + } + }] + } + + // 确保商户状态数据存在 + if (!chartData.value.merchantStatus || !Array.isArray(chartData.value.merchantStatus)) { + return + } + + // 商户状态分布饼图配置 + merchantStatusOption.value = { + tooltip: { + trigger: 'item', + formatter: '{a}
{b}: {c} ({d}%)' + }, + legend: { + bottom: '5%', + left: 'center', + textStyle: { + fontSize: 10 + } + }, + series: [{ + name: '商户状态', + type: 'pie', + radius: ['40%', '70%'], + center: ['50%', '45%'], + avoidLabelOverlap: false, + label: { + show: false, + position: 'center' + }, + emphasis: { + label: { + show: true, + fontSize: '14', + fontWeight: 'bold' + } + }, + labelLine: { + show: false + }, + data: chartData.value.merchantStatus.map((item, index) => ({ + value: item.count, + name: item.status, + itemStyle: { + color: ['#67C23A', '#E6A23C', '#F56C6C'][index] || '#909399' + } + })) + }] + } +} + // 生命周期 onMounted(() => { loadAgentInfo() if (agentInfo.value) { loadStats() + loadChartData() loadMerchants() loadCommissions() } @@ -338,96 +759,291 @@ onMounted(() => { \ No newline at end of file diff --git a/src/views/AgentLogin.vue b/src/views/AgentLogin.vue index b75f2f3..f8e2ea7 100644 --- a/src/views/AgentLogin.vue +++ b/src/views/AgentLogin.vue @@ -243,8 +243,9 @@ const handleLogin = async () => { const { data } = await api.post('/agents/login', loginForm) if (data.success) { - // 保存代理信息到localStorage + // 保存代理信息和token到localStorage localStorage.setItem('agentInfo', JSON.stringify(data.data)) + localStorage.setItem('token', data.data.token) ElMessage.success('登录成功') router.push('/agent/dashboard') } diff --git a/src/views/AgentWithdrawals.vue b/src/views/AgentWithdrawals.vue new file mode 100644 index 0000000..dc39e37 --- /dev/null +++ b/src/views/AgentWithdrawals.vue @@ -0,0 +1,1204 @@ + +
-
+
+ {{ stats.total_merchants || 0 }}
- 招募商户
- 已审核：{{ stats.approved_merchants || 0 }}
-
+
+
@@ -182,9 +315,40 @@
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
-import { User, Money } from '@element-plus/icons-vue'
+import {
+ User,
+ Money,
+ Wallet,
+ Select,
+ SwitchButton,
+ Refresh,
+ CreditCard,
+ Management,
+ ArrowRight
+} from '@element-plus/icons-vue'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { LineChart, PieChart } from 'echarts/charts'
+import {
+ TitleComponent,
+ TooltipComponent,
+ LegendComponent,
+ GridComponent
+} from 'echarts/components'
+import VChart from 'vue-echarts'
import api from '@/utils/api'
+// 注册ECharts组件
+use([
+ CanvasRenderer,
+ LineChart,
+ PieChart,
+ TitleComponent,
+ TooltipComponent,
+ LegendComponent,
+ GridComponent
+])
+
const router = useRouter()
// 响应式数据
@@ -206,6 +370,16 @@ const commissionsPage = ref(1)
const commissionsPageSize = ref(10)
const commissionsTotal = ref(0)
+// 图表相关数据
+const chartPeriod = ref('7d')
+const chartLoading = ref(false)
+const commissionTrendOption = ref({})
+const merchantStatusOption = ref({})
+const chartData = ref({
+ commissionTrend: [],
+ merchantStatus: []
+})
+
// 方法
const loadAgentInfo = () => {
const stored = localStorage.getItem('agentInfo')
@@ -220,10 +394,23 @@ const loadStats = async () => {
if (!agentInfo.value) return
try {
- const { data } = await api.get(`/agents/stats/${agentInfo.value.id}`)
- stats.value = data.data
+ // 使用详细统计接口获取更多维度的数据
+ const { data } = await api.get(`/agents/detailed-stats/${agentInfo.value.id}`)
+ if (data.success) {
+ stats.value = data.data
+ }
} catch (error) {
- ElMessage.error('加载统计信息失败')
+ console.error('加载统计数据失败:', error)
+ ElMessage.error('加载统计数据失败')
+ // 如果详细统计接口失败，回退到基础统计接口
+ try {
+ const { data: fallbackData } = await api.get(`/agents/stats/${agentInfo.value.id}`)
+ if (fallbackData.success) {
+ stats.value = fallbackData.data
+ }
+ } catch (fallbackError) {
+ console.error('回退统计数据加载也失败:', fallbackError)
+ }
}
}
@@ -324,11 +511,245 @@ const formatDateTime = (date) => {
return new Date(date).toLocaleString('zh-CN')
}
+/**
+ * 用户名脱敏处理
+ * @param {string} username - 原始用户名
+ * @returns {string} 脱敏后的用户名
+ */
+const maskUsername = (username) => {
+ if (!username || username.length <= 2) {
+ return username
+ }
+
+ // 如果是手机号格式（11位数字）
+ if (/^\d{11}$/.test(username)) {
+ return username.replace(/(\d{3})\d{5}(\d{3})/, '$1*****$2')
+ }
+
+ // 如果是邮箱格式
+ if (username.includes('@')) {
+ const [localPart, domain] = username.split('@')
+ if (localPart.length <= 2) {
+ return `${localPart[0]}*@${domain}`
+ }
+ const maskedLocal = localPart[0] + '*'.repeat(localPart.length - 2) + localPart[localPart.length - 1]
+ return `${maskedLocal}@${domain}`
+ }
+
+ // 普通用户名：保留首尾字符，中间用*替换
+ if (username.length <= 3) {
+ return username[0] + '*'.repeat(username.length - 1)
+ }
+
+ return username[0] + '*'.repeat(username.length - 2) + username[username.length - 1]
+}
+
+/**
+ * 跳转到提现页面
+ */
+const goToWithdrawals = () => {
+ router.push('/agent/withdrawals')
+}
+
+/**
+ * 刷新所有数据
+ */
+const refreshData = async () => {
+ await Promise.all([
+ loadStats(),
+ loadChartData(),
+ loadMerchants(),
+ loadCommissions()
+ ])
+ ElMessage.success('数据刷新成功')
+}
+
+/**
+ * 加载图表数据
+ */
+const loadChartData = async () => {
+ if (!agentInfo.value) return
+
+ chartLoading.value = true
+ try {
+ // 从后端API获取数据
+ const [trendResponse, statusResponse] = await Promise.all([
+ api.get(`/agents/commission-trend/${agentInfo.value.id}`, {
+ params: { period: chartPeriod.value }
+ }),
+ api.get(`/agents/merchant-status/${agentInfo.value.id}`)
+ ])
+
+ if (trendResponse.data.success && statusResponse.data.success) {
+ chartData.value = {
+ commissionTrend: trendResponse.data.data,
+ merchantStatus: statusResponse.data.data
+ }
+ } else {
+ throw new Error('API返回失败')
+ }
+
+ updateChartOptions()
+ } catch (error) {
+ console.error('加载图表数据失败:', error)
+ ElMessage.warning('图表数据加载失败，使用模拟数据')
+ generateMockChartData()
+ } finally {
+ chartLoading.value = false
+ }
+}
+
+/**
+ * 生成模拟图表数据（用于演示）
+ */
+const generateMockChartData = () => {
+ // 模拟佣金趋势数据
+ const days = chartPeriod.value === '7d' ? 7 : chartPeriod.value === '30d' ? 30 : 90
+ const trendData = []
+ const today = new Date()
+
+ for (let i = days - 1; i >= 0; i--) {
+ const date = new Date(today)
+ date.setDate(date.getDate() - i)
+ trendData.push({
+ date: date.toISOString().split('T')[0],
+ amount: Math.random() * 100 + 20
+ })
+ }
+
+ // 模拟商户状态分布数据
+ const statusData = [
+ { status: '已审核', count: stats.value.approved_merchants || 15 },
+ { status: '待审核', count: (stats.value.total_merchants || 20) - (stats.value.approved_merchants || 15) },
+ { status: '已拒绝', count: Math.floor(Math.random() * 5) }
+ ]
+
+ chartData.value.commissionTrend = trendData
+ chartData.value.merchantStatus = statusData
+ updateChartOptions()
+}
+
+/**
+ * 更新图表配置
+ */
+const updateChartOptions = () => {
+ // 确保数据存在
+ if (!chartData.value.commissionTrend || !Array.isArray(chartData.value.commissionTrend)) {
+ return
+ }
+
+ // 佣金趋势图配置
+ commissionTrendOption.value = {
+ tooltip: {
+ trigger: 'axis',
+ formatter: '{b}
+
+
+
+
+
-
- 今日概览
+
-
+
+
@@ -62,9 +148,17 @@
stripe
style="width: 100%"
>
-
+
+ {{ maskUsername(row.username) }}
+
+
+
+ {{ maskUsername(row.phone) }}
+
+
@@ -121,7 +215,11 @@
stripe
style="width: 100%"
>
-
+
+ {{ maskUsername(row.username) }}
+
+
@@ -174,6 +272,41 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ 佣金趋势
+
+
+
+
+
+
+ 商户状态分布
+
+
+
+
+
+
+
+
+
+
+
+ 佣金提现
+ 快速提现到账
+
+
+
+
+ 进入提现页面
+
+
+
+ 佣金提现
+
+
+
+
+
+
+ 可提现金额：
+ ¥{{ (Number(stats.available_amount) || 0).toFixed(2) }}
+
+
+ 提现中金额：
+ ¥{{ (Number(stats.pending_withdrawal) || 0).toFixed(2) }}
+
+
+ 已提现金额：
+ ¥{{ (Number(stats.withdrawn_amount) || 0).toFixed(2) }}
+
+
+
+ 立即提现
+
+
+ 佣金: ¥{c}' + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: { + type: 'category', + data: chartData.value.commissionTrend.map(item => { + const date = new Date(item.date) + return `${date.getMonth() + 1}/${date.getDate()}` + }), + axisLabel: { + fontSize: 10 + } + }, + yAxis: { + type: 'value', + axisLabel: { + fontSize: 10, + formatter: '¥{value}' + } + }, + series: [{ + data: chartData.value.commissionTrend.map(item => parseFloat(item.amount || 0).toFixed(2)), + type: 'line', + smooth: true, + lineStyle: { + color: '#409EFF', + width: 3 + }, + itemStyle: { + color: '#409EFF' + }, + areaStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: 'rgba(64, 158, 255, 0.3)' + }, { + offset: 1, color: 'rgba(64, 158, 255, 0.1)' + }] + } + } + }] + } + + // 确保商户状态数据存在 + if (!chartData.value.merchantStatus || !Array.isArray(chartData.value.merchantStatus)) { + return + } + + // 商户状态分布饼图配置 + merchantStatusOption.value = { + tooltip: { + trigger: 'item', + formatter: '{a}
{b}: {c} ({d}%)' + }, + legend: { + bottom: '5%', + left: 'center', + textStyle: { + fontSize: 10 + } + }, + series: [{ + name: '商户状态', + type: 'pie', + radius: ['40%', '70%'], + center: ['50%', '45%'], + avoidLabelOverlap: false, + label: { + show: false, + position: 'center' + }, + emphasis: { + label: { + show: true, + fontSize: '14', + fontWeight: 'bold' + } + }, + labelLine: { + show: false + }, + data: chartData.value.merchantStatus.map((item, index) => ({ + value: item.count, + name: item.status, + itemStyle: { + color: ['#67C23A', '#E6A23C', '#F56C6C'][index] || '#909399' + } + })) + }] + } +} + // 生命周期 onMounted(() => { loadAgentInfo() if (agentInfo.value) { loadStats() + loadChartData() loadMerchants() loadCommissions() } @@ -338,96 +759,291 @@ onMounted(() => { \ No newline at end of file diff --git a/src/views/AgentLogin.vue b/src/views/AgentLogin.vue index b75f2f3..f8e2ea7 100644 --- a/src/views/AgentLogin.vue +++ b/src/views/AgentLogin.vue @@ -243,8 +243,9 @@ const handleLogin = async () => { const { data } = await api.post('/agents/login', loginForm) if (data.success) { - // 保存代理信息到localStorage + // 保存代理信息和token到localStorage localStorage.setItem('agentInfo', JSON.stringify(data.data)) + localStorage.setItem('token', data.data.token) ElMessage.success('登录成功') router.push('/agent/dashboard') } diff --git a/src/views/AgentWithdrawals.vue b/src/views/AgentWithdrawals.vue new file mode 100644 index 0000000..dc39e37 --- /dev/null +++ b/src/views/AgentWithdrawals.vue @@ -0,0 +1,1204 @@ + +
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index bf75d29..cd1c385 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -14,11 +14,11 @@ export default defineConfig({
port: 5173,
proxy: {
'/api': {
- target: 'http://114.55.111.44:3001',
+ target: 'http://localhost:3000',
changeOrigin: true
},
'/uploads': {
- target: 'http://114.55.111.44:3001',
+ target: 'http://localhost:3000',
changeOrigin: true
}
}
+
+
+
+
+ 佣金提现
+
+
+
+
+
+
+
+
+
+ ¥{{ commissionStats.total_commission || '0.00' }}
+ 总佣金
+
+
+
+
+
+ ¥{{ commissionStats.available_amount || '0.00' }}
+ 可提现金额
+
+
+
+
+
+ ¥{{ commissionStats.pending_withdrawal || '0.00' }}
+ 提现中
+
+
+
+
+
+ ¥{{ commissionStats.withdrawn_amount || '0.00' }}
+ 已提现
+
+
+
+
+
+
+
+ 收款方式
+ +
+
+
+
+
+ 收款方式：
+ {{ getPaymentTypeText(paymentInfo.payment_type) || '未设置' }}
+
+
+ 银行名称：
+ {{ paymentInfo.bank_name || '未设置' }}
+
+
+ {{ getAccountLabel(paymentInfo.payment_type) }}：
+ {{ maskAccount(paymentInfo.account_number) || '未设置' }}
+
+
+ {{ getHolderLabel(paymentInfo.payment_type) }}：
+ {{ paymentInfo.account_holder || '未设置' }}
+
+
+ 收款码：
+
+
+ ![收款码]()
+
+
+
+
+
+
+
+
+
+ 申请提现
+
+
+
+
+
+ 提现记录
+
+
+
+
+
+ 加载中...
+
+ 暂无提现记录
+
+
+
+
+
+
+ ¥{{ record.amount }}
+
+ {{ getStatusText(record.status) }}
+
+
+
+
+
+ 申请时间：
+ {{ formatDate(record.created_at) }}
+
+
+ 收款信息：
+
+ {{ getPaymentTypeText(record.payment_type || 'bank') }}
+
+ - {{ record.bank_name }} {{ maskAccount(record.account_number || record.bank_account) }}
+
+
+ - {{ record.account_holder }} ({{ maskAccount(record.account_number) }})
+
+
+
+
+ 备注：
+ {{ record.admin_note }}
+
+
+ 完成时间：
+ {{ formatDate(record.completed_at) }}
+
+