feat(distribution): 增强分销功能与界面优化

- 新增银行卡管理页面,支持用户查看与管理银行卡。
- 实现添加、删除及设置默认银行卡功能。
- 优化邀请与加入页面,展示邀请人信息并改进用户提示。
- 更新海报与二维码生成逻辑,提升用户体验。
- 重构多个组件,提高可读性与可维护性。
This commit is contained in:
pikachu1995@126.com
2026-08-11 15:43:21 +08:00
parent 7d3daf2f02
commit 4b1a09cbc3
18 changed files with 2481 additions and 527 deletions

View File

@@ -0,0 +1,204 @@
<template>
<view class="page" :style="themeStyle">
<view v-if="cashLoading && !cashList.length" class="state-wrap">
<text class="state-text">加载中...</text>
</view>
<view v-else-if="!cashList.length" class="state-wrap">
<text class="state-text">暂无提现记录</text>
</view>
<view v-else class="log-list">
<view class="log-item" v-for="item in cashList" :key="item.id">
<view class="log-left">
<view class="log-sn">单号{{ item.sn || item.id }}</view>
<view class="log-time">{{ formatTime(item.createTime) }}</view>
</view>
<view class="log-right">
<text class="log-amount log-amount-out">-{{ formatMoney(item.price) }}</text>
<view class="cash-status-tag" :class="cashStatusClass(item.distributionCashStatus)">
{{ cashStatusLabel(item.distributionCashStatus) }}
</view>
</view>
</view>
</view>
<view class="list-footer">
<text v-if="cashFinished && cashList.length" class="footer-text">没有更多数据了</text>
<text v-else-if="cashLoadingMore" class="footer-text">加载中...</text>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { useStore } from '@/store'
import { getThemeStyle } from '@/utils/theme'
import { cashLog } from '@/api/distribution'
const store = useStore()
const themeStyle = computed(() => getThemeStyle(store.state.theme))
const cashList = ref<any[]>([])
const cashPage = ref(1)
const cashTotal = ref(0)
const cashLoading = ref(false)
const cashLoadingMore = ref(false)
const cashFinished = ref(false)
const PAGE_SIZE = 15
onLoad(() => {
loadCashHistory(true)
})
onReachBottom(() => {
loadCashHistory(false)
})
function loadCashHistory(reset: boolean) {
if (!reset && (cashLoading.value || cashLoadingMore.value || cashFinished.value)) return
if (reset) {
cashLoading.value = true
cashPage.value = 1
cashFinished.value = false
} else {
cashLoadingMore.value = true
}
cashLog({ pageNumber: cashPage.value, pageSize: PAGE_SIZE, sort: 'createTime', order: 'desc' })
.then((res: any) => {
const result = res?.data?.result || {}
const records: any[] = result.records || []
cashTotal.value = Number(result.total || 0)
cashList.value = reset ? records : [...cashList.value, ...records]
if (records.length < PAGE_SIZE || cashList.value.length >= cashTotal.value) {
cashFinished.value = true
} else {
cashPage.value += 1
}
})
.finally(() => {
cashLoading.value = false
cashLoadingMore.value = false
})
}
function formatMoney(val: number | string) {
return Number(val || 0).toFixed(2)
}
function formatTime(value?: string) {
if (!value) return '-'
return String(value).replace('T', ' ').slice(0, 19)
}
const CASH_STATUS_MAP: Record<string, { label: string; cls: string }> = {
APPLY: { label: '审核中', cls: 'status-pending' },
VIA_AUDITING: { label: '已通过', cls: 'status-success' },
FAIL_AUDITING: { label: '已驳回', cls: 'status-fail' },
}
function cashStatusLabel(status: string) {
return CASH_STATUS_MAP[status]?.label || status
}
function cashStatusClass(status: string) {
return CASH_STATUS_MAP[status]?.cls || ''
}
</script>
<style lang="scss" scoped>
.page {
min-height: 100vh;
background: #f5f6f8;
padding: 16rpx 24rpx 40rpx;
}
.state-wrap {
padding: 120rpx 0;
text-align: center;
}
.state-text {
color: #999;
font-size: 26rpx;
}
.log-list {
padding-top: 16rpx;
}
.log-item {
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
border-radius: 16rpx;
padding: 24rpx;
margin-bottom: 16rpx;
}
.log-left {
display: flex;
flex-direction: column;
gap: 10rpx;
}
.log-time {
font-size: 22rpx;
color: #999;
}
.log-sn {
font-size: 24rpx;
color: #666;
max-width: 360rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.log-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8rpx;
}
.log-amount {
font-size: 32rpx;
font-weight: 700;
}
.log-amount-out {
color: #333;
}
.cash-status-tag {
font-size: 22rpx;
padding: 4rpx 14rpx;
border-radius: 999rpx;
}
.status-pending {
background: #fff8e6;
color: #e6a23c;
}
.status-success {
background: #e8f8ec;
color: #3aaa52;
}
.status-fail {
background: #fef0f0;
color: #f56c6c;
}
.list-footer {
padding: 12rpx 0 32rpx;
text-align: center;
}
.footer-text {
color: #ccc;
font-size: 24rpx;
}
</style>