luo/one-pipe-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增: 微信配置-代理充值
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 4m58s
Details

Browse Source
This commit is contained in:
sexygoat
2026-03-17 14:06:38 +08:00
parent f4ccf9ed24
commit e975e6af4b
19 changed files with 2940 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/views/dashboard/analysis/index.vue
View File

@@ -8,6 +8,10 @@
<div class="section-title">提现配置</div>
<WithdrawalSettings />
<!-- 支付配置 -->
<div class="section-title">支付配置</div>
<ActiveWechatConfig />
<!--<el-row :gutter="20">-->
<!-- <el-col :xl="14" :lg="15" :xs="24">-->
<!-- <TodaySales />-->
@@ -54,6 +58,7 @@
import VolumeServiceLevel from './widget/VolumeServiceLevel.vue'
import CommissionSummary from './widget/CommissionSummary.vue'
import WithdrawalSettings from './widget/WithdrawalSettings.vue'
import ActiveWechatConfig from './widget/ActiveWechatConfig.vue'
defineOptions({ name: 'Analysis' })
</script>

238
src/views/dashboard/analysis/widget/ActiveWechatConfig.vue Normal file
View File

@@ -0,0 +1,238 @@
<template>
<ElCard shadow="never" class="active-wechat-config-widget" v-if="activeConfig">
<template #header>
<div class="card-header">
<div class="header-left">
<span class="header-title">当前生效支付配置</span>
<ElTag type="success" effect="dark" size="small">生效中</ElTag>
</div>
<div class="header-right">
<span class="creator-info">创建于 {{ formatDateTime(activeConfig.created_at) }}</span>
</div>
</div>
</template>
<div class="config-info">
<div class="info-card">
<div
class="info-icon"
style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
>
<i class="el-icon">📝</i>
</div>
<div class="info-content">
<div class="info-label">配置名称</div>
<div class="info-value">{{ activeConfig.name }}</div>
</div>
</div>
<div class="info-card">
<div
class="info-icon"
style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"
>
<i class="el-icon">💳</i>
</div>
<div class="info-content">
<div class="info-label">支付渠道类型</div>
<div class="info-value">{{ getProviderTypeText(activeConfig.provider_type) }}</div>
</div>
</div>
<div class="info-card">
<div
class="info-icon"
style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"
>
<i class="el-icon">🏪</i>
</div>
<div class="info-content">
<div class="info-label">商户号</div>
<div class="info-value">{{ getMerchantId(activeConfig) }}</div>
</div>
</div>
<div class="info-card">
<div
class="info-icon"
style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)"
>
<i class="el-icon">✅</i>
</div>
<div class="info-content">
<div class="info-label">激活状态</div>
<div class="info-value">{{ activeConfig.is_active ? '已激活' : '未激活' }}</div>
</div>
</div>
</div>
</ElCard>
<ElCard shadow="never" v-else class="active-wechat-config-widget empty-state">
<div class="empty-content">
<i class="el-icon-info" style="font-size: 48px; color: var(--el-text-color-placeholder)"></i>
<p>暂无生效的支付配置</p>
</div>
</ElCard>
</template>
<script setup lang="ts">
import { WechatConfigService } from '@/api/modules'
import { ElTag } from 'element-plus'
import type { WechatConfig, PaymentProviderType } from '@/types/api'
import { formatDateTime } from '@/utils/business/format'
defineOptions({ name: 'ActiveWechatConfigWidget' })
// 当前生效的支付配置
const activeConfig = ref<WechatConfig | null>(null)
// 获取支付渠道类型文本
const getProviderTypeText = (type: PaymentProviderType): string => {
const typeMap: Record<PaymentProviderType, string> = {
wechat: '微信直连',
fuiou: '富友支付'
}
return typeMap[type] || type
}
// 获取商户号
const getMerchantId = (config: WechatConfig): string => {
if (config.provider_type === 'wechat') {
return config.wx_mch_id || '-'
}
if (config.provider_type === 'fuiou') {
return config.fy_mchnt_cd || '-'
}
return '-'
}
// 加载当前生效配置
const loadActiveConfig = async () => {
try {
const res = await WechatConfigService.getActiveWechatConfig()
if (res.code === 0 && res.data) {
activeConfig.value = res.data
}
} catch (error) {
console.error('获取当前生效支付配置失败:', error)
}
}
onMounted(() => {
loadActiveConfig()
})
</script>
<style lang="scss" scoped>
.active-wechat-config-widget {
:deep(.el-card__header) {
padding: 18px 20px;
background: var(--el-fill-color-light);
border-bottom: 1px solid var(--el-border-color-lighter);
}
:deep(.el-card__body) {
padding: 20px;
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
.header-left {
display: flex;
gap: 10px;
align-items: center;
.header-title {
font-size: 15px;
font-weight: 600;
color: var(--el-text-color-primary);
}
}
.header-right {
.creator-info {
font-size: 13px;
color: var(--el-text-color-secondary);
}
}
}
.config-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
.info-card {
display: flex;
gap: 12px;
align-items: center;
padding: 16px;
background: var(--el-fill-color-blank);
border-radius: 8px;
.info-icon {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
font-size: 20px;
border-radius: 8px;
}
.info-content {
flex: 1;
min-width: 0;
.info-label {
margin-bottom: 4px;
font-size: 13px;
color: var(--el-text-color-secondary);
}
.info-value {
overflow: hidden;
font-size: 16px;
font-weight: 600;
color: var(--el-text-color-primary);
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
&.empty-state {
.empty-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
color: var(--el-text-color-secondary);
p {
margin-top: 12px;
font-size: 14px;
}
}
}
}
@media (max-width: 768px) {
.active-wechat-config-widget {
.card-header {
.header-left,
.header-right {
width: 100%;
}
}
.config-info {
grid-template-columns: 1fr;
gap: 12px;
}
}
}
</style>

129
src/views/dashboard/analysis/widget/CommissionSummary.vue
View File

@@ -1,6 +1,15 @@
<template>
<ElRow :gutter="20" class="commission-summary-widget">
<ElCol :xs="24" :sm="12" :md="12" :lg="8" :xl="4">
<!-- 错误状态 -->
<ElCard shadow="never" v-if="errorMsg" class="commission-summary-widget error-state">
<div class="error-content">
<i class="el-icon-warning" style="font-size: 48px; color: var(--el-color-warning)"></i>
<p>{{ errorMsg }}</p>
</div>
</ElCard>
<!-- 正常显示 -->
<div v-else class="commission-summary-widget">
<div class="stats-container">
<ElCard shadow="hover" class="stat-card-wrapper">
<div class="stat-card">
<div
@@ -15,8 +24,6 @@
</div>
</div>
</ElCard>
</ElCol>
<ElCol :xs="24" :sm="12" :md="12" :lg="8" :xl="4">
<ElCard shadow="hover" class="stat-card-wrapper">
<div class="stat-card">
<div
@@ -31,8 +38,6 @@
</div>
</div>
</ElCard>
</ElCol>
<ElCol :xs="24" :sm="12" :md="12" :lg="8" :xl="4">
<ElCard shadow="hover" class="stat-card-wrapper">
<div class="stat-card">
<div
@@ -47,8 +52,6 @@
</div>
</div>
</ElCard>
</ElCol>
<ElCol :xs="24" :sm="12" :md="12" :lg="8" :xl="4">
<ElCard shadow="hover" class="stat-card-wrapper">
<div class="stat-card">
<div
@@ -63,8 +66,6 @@
</div>
</div>
</ElCard>
</ElCol>
<ElCol :xs="24" :sm="12" :md="12" :lg="8" :xl="4">
<ElCard shadow="hover" class="stat-card-wrapper">
<div class="stat-card">
<div
@@ -79,8 +80,8 @@
</div>
</div>
</ElCard>
</ElCol>
</ElRow>
</div>
</div>
</template>
<script setup lang="ts">
@@ -90,6 +91,9 @@
defineOptions({ name: 'CommissionSummaryWidget' })
// 错误信息
const errorMsg = ref<string>('')
// 佣金概览
const summary = ref<MyCommissionSummary>({
total_commission: 0,
@@ -105,9 +109,19 @@
const res = await CommissionService.getMyCommissionSummary()
if (res.code === 0) {
summary.value = res.data
errorMsg.value = ''
} else {
// 显示错误信息
errorMsg.value = res.msg || '获取佣金概览失败'
}
} catch (error) {
} catch (error: any) {
console.error('获取佣金概览失败:', error)
// 尝试从错误响应中提取 msg
if (error?.response?.data?.msg) {
errorMsg.value = error.response.data.msg
} else {
errorMsg.value = '获取佣金概览失败'
}
}
}
@@ -118,26 +132,50 @@
<style lang="scss" scoped>
.commission-summary-widget {
&.error-state {
.error-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
color: var(--el-text-color-secondary);
p {
margin-top: 12px;
font-size: 14px;
color: var(--el-text-color-primary);
}
}
}
.stats-container {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.stat-card-wrapper {
margin-bottom: 20px;
flex: 1;
min-width: 180px;
:deep(.el-card__body) {
padding: 20px;
padding: 16px;
}
}
.stat-card {
display: flex;
gap: 16px;
gap: 12px;
align-items: center;
.stat-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
font-size: 24px;
width: 40px;
height: 40px;
font-size: 20px;
color: white;
border-radius: 8px;
flex-shrink: 0;
@@ -148,13 +186,14 @@
min-width: 0;
.stat-label {
margin-bottom: 6px;
font-size: 13px;
margin-bottom: 4px;
font-size: 12px;
color: var(--el-text-color-secondary);
white-space: nowrap;
}
.stat-value {
font-size: 20px;
font-size: 18px;
font-weight: 600;
color: var(--el-text-color-primary);
overflow: hidden;
@@ -165,10 +204,52 @@
}
}
@media (max-width: 768px) {
@media (max-width: 1400px) {
.commission-summary-widget {
.stats-container {
gap: 12px;
}
.stat-card-wrapper {
min-width: 160px;
}
.stat-card {
.stat-content {
.stat-value {
font-size: 16px;
}
}
}
}
}
@media (max-width: 1200px) {
.commission-summary-widget {
.stat-card-wrapper {
margin-bottom: 12px;
flex: 1 1 calc(33.333% - 12px);
min-width: 200px;
}
}
}
@media (max-width: 768px) {
.commission-summary-widget {
.stats-container {
gap: 12px;
}
.stat-card-wrapper {
flex: 1 1 calc(50% - 8px);
min-width: 150px;
}
}
}
@media (max-width: 480px) {
.commission-summary-widget {
.stat-card-wrapper {
flex: 1 1 100%;
}
}
}