feat(admin): full integration of order, product, and finance modules with real RPC data streams
This commit is contained in:
comlibmb
@@ -3,19 +3,16 @@
|
||||
<!-- 筛选卡片 -->
|
||||
<view class="filter-card border-shadow">
|
||||
<view class="filter-row">
|
||||
<view class="filter-item">
|
||||
<text class="filter-label">订单时间:</text>
|
||||
<view class="date-picker-wrap">
|
||||
<text class="calendar-icon">📅</text>
|
||||
<text class="date-placeholder">开始日期 - 结束日期</text>
|
||||
</view>
|
||||
<view class="filter-item search-wrap">
|
||||
<text class="filter-label">流水搜索:</text>
|
||||
<input class="search-input" v-model="searchKeyword" placeholder="订单号/昵称/电话/用户ID" @confirm="handleQuery" />
|
||||
</view>
|
||||
<view class="filter-item">
|
||||
<text class="filter-label">交易类型:</text>
|
||||
<view class="select-box">
|
||||
<text class="select-txt">请选择</text>
|
||||
<text class="arrow-down">▼</text>
|
||||
</view>
|
||||
<uni-data-select v-model="typeValue" :localdata="typeOptions" class="data-select" @change="handleQuery" />
|
||||
</view>
|
||||
<view class="btn-query" @click="handleQuery">
|
||||
<text class="btn-txt">查询</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -23,114 +20,164 @@
|
||||
<!-- 列表表格 -->
|
||||
<view class="table-container border-shadow">
|
||||
<view class="table-header">
|
||||
<view class="th col-id"><text class="th-txt">ID</text></view>
|
||||
<view class="th col-order"><text class="th-txt">关联订单</text></view>
|
||||
<view class="th col-id"><text class="th-txt">序号</text></view>
|
||||
<view class="th col-order"><text class="th-txt">关联单据</text></view>
|
||||
<view class="th col-time"><text class="th-txt">交易时间</text></view>
|
||||
<view class="th col-amount"><text class="th-txt">交易金额</text></view>
|
||||
<view class="th col-user"><text class="th-txt">用户</text></view>
|
||||
<view class="th col-type"><text class="th-txt">交易类型</text></view>
|
||||
<view class="th col-type"><text class="th-txt">业务类型</text></view>
|
||||
<view class="th col-remark"><text class="th-txt">备注</text></view>
|
||||
<view class="th col-op"><text class="th-txt">操作</text></view>
|
||||
</view>
|
||||
|
||||
<scroll-view class="table-body">
|
||||
<view class="table-row" v-for="item in tableData" :key="item.id">
|
||||
<view class="td col-id"><text class="td-txt">{{ item.id }}</text></view>
|
||||
<view class="td col-order text-left"><text class="td-txt">{{ item.order }}</text></view>
|
||||
<view class="td col-time"><text class="td-txt">{{ item.time }}</text></view>
|
||||
<view class="table-body">
|
||||
<view v-if="loading" class="table-loading" style="padding: 40px; text-align: center;">
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
<view v-else-if="tableData.length === 0" class="table-empty" style="padding: 40px; text-align: center;">
|
||||
<text>暂无记录</text>
|
||||
</view>
|
||||
<view class="table-row" v-for="(item, index) in tableData" :key="item.id">
|
||||
<view class="td col-id"><text class="td-txt">{{ (page - 1) * pageSize + index + 1 }}</text></view>
|
||||
<view class="td col-order text-left"><text class="td-txt">{{ item.link_id || '-' }}</text></view>
|
||||
<view class="td col-time"><text class="td-txt">{{ item.created_at.substring(0, 16).replace('T', ' ') }}</text></view>
|
||||
<view class="td col-amount">
|
||||
<text :class="['td-txt', item.amount.startsWith('+') ? 'red-txt' : 'green-txt']">{{ item.amount }}</text>
|
||||
<text :class="['td-txt', item.pm === 1 ? 'red-txt' : 'green-txt']">
|
||||
{{ item.pm === 1 ? '+' : '-' }}{{ item.number.toFixed(2) }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="td col-user"><text class="td-txt">{{ item.user }}</text></view>
|
||||
<view class="td col-type"><text class="td-txt">{{ item.type }}</text></view>
|
||||
<view class="td col-remark text-left"><text class="td-txt">{{ item.remark }}</text></view>
|
||||
<view class="td col-user">
|
||||
<view class="u-info-box">
|
||||
<text class="u-name">{{ item.user_name || '未知' }}</text>
|
||||
<text class="u-id">UID:{{ item.uid.substring(0, 8) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="td col-type"><text class="td-txt">{{ getBillTypeText(item.type) }}</text></view>
|
||||
<view class="td col-remark text-left"><text class="td-txt">{{ item.mark || '-' }}</text></view>
|
||||
<view class="td col-op">
|
||||
<text class="btn-link">备注</text>
|
||||
<text class="btn-link">详情</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分页区域 -->
|
||||
<view class="pagination-footer">
|
||||
<view class="page-total">
|
||||
<text class="total-txt">共 {{ total }} 条</text>
|
||||
</view>
|
||||
<view class="page-btns">
|
||||
<view class="p-btn" :class="{ disabled: page <= 1 }" @click="prevPage">
|
||||
<text><</text>
|
||||
</view>
|
||||
<view class="p-btn active">
|
||||
<text>{{ page }}</text>
|
||||
</view>
|
||||
<view class="p-btn" :class="{ disabled: page >= totalPages }" @click="nextPage">
|
||||
<text>></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="page-jump">
|
||||
<text class="jump-txt">前往</text>
|
||||
<input class="jump-input" v-model="jumpPage" type="number" @confirm="goToJumpPage" />
|
||||
<text class="jump-txt">页</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { fetchUserBillList } from '@/services/admin/financeService.uts'
|
||||
import { UserBillRecord } from '@/types/admin/finance.uts'
|
||||
|
||||
interface BalanceRecord {
|
||||
id: string
|
||||
order: string
|
||||
time: string
|
||||
amount: string
|
||||
user: string
|
||||
type: string
|
||||
remark: string
|
||||
const typeValue = ref<string>('all')
|
||||
const searchKeyword = ref('')
|
||||
const page = ref(1)
|
||||
const pageSize = ref(15)
|
||||
const total = ref(0)
|
||||
const loading = ref(false)
|
||||
const jumpPage = ref('')
|
||||
|
||||
const typeOptions = [
|
||||
{ value: 'all', text: '全部类型' },
|
||||
{ value: 'recharge', text: '充值' },
|
||||
{ value: 'extract', text: '提现' },
|
||||
{ value: 'pay', text: '支付' },
|
||||
{ value: 'refund', text: '退款' },
|
||||
{ value: 'system_add', text: '系统增加' },
|
||||
{ value: 'system_sub', text: '系统减少' }
|
||||
]
|
||||
|
||||
const tableData = ref<UserBillRecord[]>([])
|
||||
|
||||
const totalPages = computed(() : number => {
|
||||
if (pageSize.value <= 0) return 1
|
||||
return Math.ceil(total.value / pageSize.value)
|
||||
})
|
||||
|
||||
async function loadList() {
|
||||
loading.value = true
|
||||
try {
|
||||
const type = typeValue.value == 'all' ? null : typeValue.value
|
||||
|
||||
const res = await fetchUserBillList(
|
||||
page.value,
|
||||
pageSize.value,
|
||||
'balance', // 余额明细
|
||||
type,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
searchKeyword.value || null
|
||||
)
|
||||
tableData.value = res.items
|
||||
total.value = res.total
|
||||
} catch (e) {
|
||||
uni.showToast({ title: '加载余额记录失败', icon: 'none' })
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const tableData = ref<BalanceRecord[]>([
|
||||
{
|
||||
id: '31216',
|
||||
order: '新用户注册赠送余额',
|
||||
time: '2026-02-03 10:30:11',
|
||||
amount: '+ 88888.00',
|
||||
user: '1',
|
||||
type: '新用户注册赠送余额',
|
||||
remark: '新用户注册赠送88888余额'
|
||||
},
|
||||
{
|
||||
id: '31215',
|
||||
order: '新用户注册赠送余额',
|
||||
time: '2026-02-03 10:19:52',
|
||||
amount: '+ 88888.00',
|
||||
user: 'circus',
|
||||
type: '新用户注册赠送余额',
|
||||
remark: '新用户注册赠送88888余额'
|
||||
},
|
||||
{
|
||||
id: '31214',
|
||||
order: 'cp541560738494283776',
|
||||
time: '2026-02-03 10:09:07',
|
||||
amount: '- 999.00',
|
||||
user: '1岁上班22岁退休',
|
||||
type: '余额支付购买商品',
|
||||
remark: '余额支付999.00元购买商品'
|
||||
},
|
||||
{
|
||||
id: '31213',
|
||||
order: '新用户注册赠送余额',
|
||||
time: '2026-02-03 10:07:59',
|
||||
amount: '+ 88888.00',
|
||||
user: '1岁上班22岁退休',
|
||||
type: '新用户注册赠送余额',
|
||||
remark: '新用户注册赠送88888余额'
|
||||
},
|
||||
{
|
||||
id: '31212',
|
||||
order: '新用户注册赠送余额',
|
||||
time: '2026-02-03 02:17:24',
|
||||
amount: '+ 88888.00',
|
||||
user: '136****0434',
|
||||
type: '新用户注册赠送余额',
|
||||
remark: '新用户注册赠送88888余额'
|
||||
},
|
||||
{
|
||||
id: '31211',
|
||||
order: '新用户注册赠送余额',
|
||||
time: '2026-02-03 02:04:17',
|
||||
amount: '+ 88888.00',
|
||||
user: '灵境',
|
||||
type: '新用户注册赠送余额',
|
||||
remark: '新用户注册赠送88888余额'
|
||||
},
|
||||
{
|
||||
id: '31210',
|
||||
order: '新用户注册赠送余额',
|
||||
time: '2026-02-03 00:58:21',
|
||||
amount: '+ 88888.00',
|
||||
user: 'J.',
|
||||
type: '新用户注册赠送余额',
|
||||
remark: '新用户注册赠送88888余额'
|
||||
onMounted(() => {
|
||||
loadList()
|
||||
})
|
||||
|
||||
const handleQuery = () => {
|
||||
page.value = 1
|
||||
loadList()
|
||||
}
|
||||
|
||||
const prevPage = () => {
|
||||
if (page.value > 1) {
|
||||
page.value--
|
||||
loadList()
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
const nextPage = () => {
|
||||
if (page.value < totalPages.value) {
|
||||
page.value++
|
||||
loadList()
|
||||
}
|
||||
}
|
||||
|
||||
const goToJumpPage = () => {
|
||||
const targetPage = parseInt(jumpPage.value)
|
||||
if (!isNaN(targetPage) && targetPage >= 1 && targetPage <= totalPages.value) {
|
||||
page.value = targetPage
|
||||
loadList()
|
||||
jumpPage.value = ''
|
||||
} else {
|
||||
uni.showToast({ title: '页码无效', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
function getBillTypeText(type : string) : string {
|
||||
const found = typeOptions.find(opt => opt.value === type)
|
||||
return found != null ? found.text : type
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -148,40 +195,31 @@ const tableData = ref<BalanceRecord[]>([
|
||||
|
||||
.filter-card { padding: 24px; margin-bottom: 20px; }
|
||||
.filter-row { display: flex; flex-direction: row; align-items: center; }
|
||||
.filter-item { display: flex; flex-direction: row; align-items: center; margin-right: 40px; }
|
||||
.filter-label { font-size: 14px; color: #333; margin-right: 15px; }
|
||||
.filter-item { display: flex; flex-direction: row; align-items: center; margin-right: 28px; }
|
||||
.filter-label { font-size: 14px; color: #333; margin-right: 12px; white-space: nowrap; }
|
||||
|
||||
.date-picker-wrap {
|
||||
width: 260px;
|
||||
height: 36px;
|
||||
border: 1px solid #dcdfe6;
|
||||
.search-wrap { flex: 1; }
|
||||
.search-input { flex: 1; height: 32px; border: 1px solid #dcdfe6; border-radius: 4px; padding: 0 12px; font-size: 13px; }
|
||||
|
||||
.data-select { width: 160px; }
|
||||
|
||||
.btn-query {
|
||||
background-color: #1890ff;
|
||||
border-radius: 4px;
|
||||
height: 32px;
|
||||
padding: 0 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
justify-content: center;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select-box {
|
||||
width: 200px;
|
||||
height: 36px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.calendar-icon { font-size: 14px; margin-right: 10px; color: #c0c4cc; }
|
||||
.date-placeholder, .select-txt { font-size: 14px; color: #c0c4cc; }
|
||||
.arrow-down { margin-left: auto; font-size: 10px; color: #c0c4cc; }
|
||||
.btn-txt { color: #fff; font-size: 14px; }
|
||||
|
||||
/* 表格样式 */
|
||||
.table-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 600px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
@@ -189,7 +227,6 @@ const tableData = ref<BalanceRecord[]>([
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.th {
|
||||
@@ -201,15 +238,20 @@ const tableData = ref<BalanceRecord[]>([
|
||||
|
||||
.th-txt {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.table-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
background-color: #fff;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.table-row:hover {
|
||||
@@ -217,7 +259,7 @@ const tableData = ref<BalanceRecord[]>([
|
||||
}
|
||||
|
||||
.td {
|
||||
padding: 16px 10px;
|
||||
padding: 12px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -228,20 +270,57 @@ const tableData = ref<BalanceRecord[]>([
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
/* 列宽分配 (参考截图比例) */
|
||||
.u-info-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
.u-name { font-size: 13px; color: #303133; font-weight: 500; }
|
||||
.u-id { font-size: 11px; color: #909399; }
|
||||
}
|
||||
|
||||
/* 列宽分配 */
|
||||
.col-id { width: 70px; }
|
||||
.col-order { flex: 1.5; min-width: 180px; justify-content: flex-start; }
|
||||
.col-order { width: 200px; justify-content: flex-start; }
|
||||
.col-time { width: 160px; }
|
||||
.col-amount { width: 120px; }
|
||||
.col-user { width: 120px; }
|
||||
.col-type { width: 150px; }
|
||||
.col-remark { flex: 1.8; min-width: 200px; justify-content: flex-start; }
|
||||
.col-user { width: 160px; }
|
||||
.col-type { width: 140px; }
|
||||
.col-remark { flex: 1; min-width: 180px; justify-content: flex-start; }
|
||||
.col-op { width: 80px; }
|
||||
|
||||
.text-left { justify-content: flex-start; text-align: left; }
|
||||
|
||||
/* 颜色 */
|
||||
.red-txt { color: #f56c6c; font-weight: 500; }
|
||||
.green-txt { color: #67c23a; font-weight: 500; }
|
||||
.red-txt { color: #f5222d; font-weight: bold; }
|
||||
.green-txt { color: #52c41a; font-weight: bold; }
|
||||
.btn-link { color: #1890ff; font-size: 13px; cursor: pointer; }
|
||||
|
||||
/* 分页 */
|
||||
.pagination-footer {
|
||||
padding: 24px 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
.total-txt { font-size: 14px; color: #606266; }
|
||||
.page-btns { display: flex; flex-direction: row; gap: 8px; }
|
||||
.p-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.p-btn.active { background-color: #2d8cf0; border-color: #2d8cf0; color: #fff; }
|
||||
.p-btn.disabled { color: #c0c4cc; background-color: #f5f7fa; cursor: not-allowed; }
|
||||
|
||||
.page-jump { display: flex; flex-direction: row; align-items: center; gap: 8px; }
|
||||
.jump-txt { font-size: 14px; color: #606266; }
|
||||
.jump-input { width: 40px; height: 32px; border: 1px solid #dcdfe6; text-align: center; border-radius: 4px; font-size: 14px; }
|
||||
</style>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<text class="icon-white">💰</text>
|
||||
</view>
|
||||
<view class="stat-content">
|
||||
<text class="stat-value">1447117274.55</text>
|
||||
<text class="stat-value">{{ statsData.current_balance.toFixed(2) }}</text>
|
||||
<text class="stat-label">当前余额</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -16,7 +16,7 @@
|
||||
<text class="icon-white">🏦</text>
|
||||
</view>
|
||||
<view class="stat-content">
|
||||
<text class="stat-value">1602611838.49</text>
|
||||
<text class="stat-value">{{ statsData.total_accumulation.toFixed(2) }}</text>
|
||||
<text class="stat-label">累计余额</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -25,7 +25,7 @@
|
||||
<text class="icon-white">💳</text>
|
||||
</view>
|
||||
<view class="stat-content">
|
||||
<text class="stat-value">155494563.94</text>
|
||||
<text class="stat-value">{{ statsData.total_consumption.toFixed(2) }}</text>
|
||||
<text class="stat-label">累计消耗余额</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -144,30 +144,31 @@
|
||||
<script setup lang="uts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import EChartsView from '@/uni_modules/charts/EChartsView.vue'
|
||||
import {
|
||||
fetchAdminBalanceStats,
|
||||
fetchAdminBalanceTrend,
|
||||
fetchAdminBalanceDistribution
|
||||
} from '@/services/admin/financeService.uts'
|
||||
|
||||
const trendOption = ref<any>(null)
|
||||
const sourceOption = ref<any>(null)
|
||||
const consumptionOption = ref<any>(null)
|
||||
const loading = ref(false)
|
||||
|
||||
// 顶部汇总指标
|
||||
const statsData = ref({
|
||||
current_balance: 0,
|
||||
total_accumulation: 0,
|
||||
total_consumption: 0
|
||||
})
|
||||
|
||||
// 样式切换状态: 0=图表, 1=列表
|
||||
const sourceStyleMode = ref(0)
|
||||
const consumptionStyleMode = ref(0)
|
||||
|
||||
// 统计数据 (使用 ref 保证响应式)
|
||||
const sourceData = ref([
|
||||
{ value: 125000.00, name: '系统增加', percent: 40.00 },
|
||||
{ value: 93750.00, name: '用户充值', percent: 30.00 },
|
||||
{ value: 78125.00, name: '佣金提现', percent: 25.00 },
|
||||
{ value: 62500.00, name: '抽奖赠送', percent: 20.00 },
|
||||
{ value: 46875.00, name: '商品退款', percent: 15.00 }
|
||||
])
|
||||
|
||||
const consumptionDataList = ref([
|
||||
{ value: 435692.51, name: '购买商品', percent: 50.00 },
|
||||
{ value: 8060.18, name: '购买会员', percent: 20.00 },
|
||||
{ value: 0.00, name: '充值退款', percent: 15.00 },
|
||||
{ value: 0.00, name: '系统减少', percent: 15.00 }
|
||||
])
|
||||
// 统计数据列表 (用于展示样式1)
|
||||
const sourceData = ref<any[]>([])
|
||||
const consumptionDataList = ref<any[]>([])
|
||||
|
||||
/**
|
||||
* 转换 Plain Object 工具
|
||||
@@ -195,17 +196,46 @@ function toPlainObject(obj : any) : any {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
initTrendChart()
|
||||
initSourceChart()
|
||||
initConsumptionChart()
|
||||
}, 300)
|
||||
loadAllData()
|
||||
})
|
||||
|
||||
function initTrendChart() {
|
||||
const dates = ['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', '02-03']
|
||||
const accumulationData = [2500000, 2900000, 1500000, 2400000, 1800000, 1300000, 500000, 2100000, 3000000, 2800000, 2300000, 2200000, 1500000, 1100000, 2300000, 2800000, 2600000, 2700000, 1800000, 1950000, 650000, 1600000, 1750000, 2400000, 2600000, 2000000, 1400000, 550000, 2100000, 550000]
|
||||
const consumptionData = [10000, 20000, 15000, 120000, 50000, 20000, 10000, 30000, 40000, 35000, 60000, 25000, 30000, 45000, 55000, 110000, 60000, 50000, 40000, 35000, 85000, 45000, 120000, 50000, 45000, 40000, 35000, 55000, 65000, 45000]
|
||||
async function loadAllData() {
|
||||
loading.value = true
|
||||
const endTime = new Date().toISOString()
|
||||
const startTime = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString() // 默认最近30天
|
||||
|
||||
try {
|
||||
// 1. 加载汇总指标
|
||||
const stats = await fetchAdminBalanceStats()
|
||||
if (stats != null) {
|
||||
statsData.value.current_balance = (stats as any).current_balance ?? 0
|
||||
statsData.value.total_accumulation = (stats as any).total_accumulation ?? 0
|
||||
statsData.value.total_consumption = (stats as any).total_consumption ?? 0
|
||||
}
|
||||
|
||||
// 2. 加载趋势数据
|
||||
const trendData = await fetchAdminBalanceTrend(startTime, endTime)
|
||||
initTrendChart(trendData)
|
||||
|
||||
// 3. 加载分布数据 (来源与消耗)
|
||||
const distRes = await fetchAdminBalanceDistribution(startTime, endTime)
|
||||
if (distRes != null) {
|
||||
sourceData.value = (distRes as any).income ?? []
|
||||
consumptionDataList.value = (distRes as any).expense ?? []
|
||||
initSourceChart()
|
||||
initConsumptionChart()
|
||||
}
|
||||
} catch (e) {
|
||||
uni.showToast({ title: '加载统计数据失败', icon: 'none' })
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function initTrendChart(data : any[]) {
|
||||
const dates = data.map(item => item.date_group.substring(5))
|
||||
const accumulationData = data.map(item => item.accumulation)
|
||||
const consumptionData = data.map(item => item.consumption)
|
||||
|
||||
const option = {
|
||||
grid: { left: '3%', right: '4%', bottom: '5%', top: '5%', containLabel: true },
|
||||
@@ -255,7 +285,6 @@ function initSourceChart() {
|
||||
radius: '70%',
|
||||
center: ['40%', '50%'],
|
||||
label: { show: true, fontSize: 11, formatter: '{b}\n{c}%' },
|
||||
// 关键点：将图表数据映射到 percent 字段
|
||||
data: sourceData.value.map(item => ({ value: item.percent, name: item.name }))
|
||||
}
|
||||
]
|
||||
@@ -275,7 +304,6 @@ function initConsumptionChart() {
|
||||
radius: '70%',
|
||||
center: ['40%', '50%'],
|
||||
label: { show: true, fontSize: 11, formatter: '{b}\n{c}%' },
|
||||
// 关键点：将图表数据映射到 percent 字段
|
||||
data: consumptionDataList.value.map(item => ({ value: item.percent, name: item.name }))
|
||||
}
|
||||
]
|
||||
|
||||
@@ -4,10 +4,10 @@
|
||||
<view class="filter-card border-shadow">
|
||||
<view class="filter-row">
|
||||
<view class="filter-item">
|
||||
<text class="filter-label">创建时间:</text>
|
||||
<text class="filter-label">时间筛选:</text>
|
||||
<view class="date-picker-wrap">
|
||||
<text class="calendar-icon">📅</text>
|
||||
<text class="date-placeholder">开始日期 - 结束日期</text>
|
||||
<text class="date-placeholder">最近30天</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -17,36 +17,45 @@
|
||||
<view class="content-card border-shadow">
|
||||
<!-- 汇总选项卡 -->
|
||||
<view class="tab-header">
|
||||
<view class="tab-item active"><text class="tab-txt active-txt">日账单</text></view>
|
||||
<view class="tab-item"><text class="tab-txt">周账单</text></view>
|
||||
<view class="tab-item"><text class="tab-txt">月账单</text></view>
|
||||
<view
|
||||
v-for="(item, index) in intervalOptions"
|
||||
:key="index"
|
||||
:class="['tab-item', currentTab === index ? 'active' : '']"
|
||||
@click="handleTabChange(index)"
|
||||
>
|
||||
<text :class="['tab-txt', currentTab === index ? 'active-txt' : '']">{{ item.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 表格区域 -->
|
||||
<view class="table-container">
|
||||
<view class="table-header">
|
||||
<view class="th col-id"><text class="th-txt">ID</text></view>
|
||||
<view class="th col-title"><text class="th-txt">标题</text></view>
|
||||
<view class="th col-date"><text class="th-txt">日期</text></view>
|
||||
<view class="th col-id"><text class="th-txt">序号</text></view>
|
||||
<view class="th col-title"><text class="th-txt">账单周期</text></view>
|
||||
<view class="th col-date"><text class="th-txt">具体日期/周期</text></view>
|
||||
<view class="th col-income"><text class="th-txt">收入金额</text></view>
|
||||
<view class="th col-expense"><text class="th-txt">支出金额</text></view>
|
||||
<view class="th col-entry"><text class="th-txt">入账金额</text></view>
|
||||
<view class="th col-entry"><text class="th-txt">净入账</text></view>
|
||||
<view class="th col-ops"><text class="th-txt">操作</text></view>
|
||||
</view>
|
||||
|
||||
<view class="table-body">
|
||||
<view class="table-row" v-for="item in tableData" :key="item.id">
|
||||
<view class="td col-id"><text class="td-txt">{{ item.id }}</text></view>
|
||||
<view class="td col-title text-left"><text class="td-txt">{{ item.title }}</text></view>
|
||||
<view class="td col-date"><text class="td-txt">{{ item.date }}</text></view>
|
||||
<view class="td col-income"><text class="td-txt red-txt">￥{{ item.income }}</text></view>
|
||||
<view class="td col-expense"><text class="td-txt green-txt">￥{{ item.expense }}</text></view>
|
||||
<view class="td col-entry"><text class="td-txt">￥{{ item.entry }}</text></view>
|
||||
<view v-if="loading" class="table-loading" style="padding: 40px; text-align: center;">
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
<view v-else-if="tableData.length === 0" class="table-empty" style="padding: 40px; text-align: center;">
|
||||
<text>暂无账单数据</text>
|
||||
</view>
|
||||
<view v-else class="table-row" v-for="(item, index) in tableData" :key="index">
|
||||
<view class="td col-id"><text class="td-txt">{{ index + 1 }}</text></view>
|
||||
<view class="td col-title text-left"><text class="td-txt">{{ intervalOptions[currentTab].label }}</text></view>
|
||||
<view class="td col-date"><text class="td-txt">{{ item.date_group }}</text></view>
|
||||
<view class="td col-income"><text class="td-txt red-txt">￥{{ item.income.toFixed(2) }}</text></view>
|
||||
<view class="td col-expense"><text class="td-txt green-txt">￥{{ item.expense.toFixed(2) }}</text></view>
|
||||
<view class="td col-entry"><text class="td-txt">￥{{ item.net_entry.toFixed(2) }}</text></view>
|
||||
<view class="td col-ops">
|
||||
<view class="ops-wrap">
|
||||
<text class="op-link">账单详情</text>
|
||||
<text class="op-divider">|</text>
|
||||
<text class="op-link">下载</text>
|
||||
<text class="op-link">查看流水</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -57,29 +66,46 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { fetchFinanceBillSummary } from '@/services/admin/financeService.uts'
|
||||
|
||||
interface BillSumRecord {
|
||||
id: number
|
||||
title: string
|
||||
date: string
|
||||
income: string
|
||||
expense: string
|
||||
entry: string
|
||||
const currentTab = ref(0)
|
||||
const loading = ref(false)
|
||||
const tableData = ref<any[]>([])
|
||||
|
||||
const intervalOptions = [
|
||||
{ label: '日账单', value: 'day' },
|
||||
{ label: '周账单', value: 'week' },
|
||||
{ label: '月账单', value: 'month' }
|
||||
]
|
||||
|
||||
async function loadData() {
|
||||
loading.value = true
|
||||
const endTime = new Date().toISOString()
|
||||
const startTime = new Date(Date.now() - 90 * 24 * 60 * 60 * 1000).toISOString() // 默认查最近90天
|
||||
|
||||
try {
|
||||
const res = await fetchFinanceBillSummary(
|
||||
startTime,
|
||||
endTime,
|
||||
intervalOptions[currentTab.value].value
|
||||
)
|
||||
tableData.value = res
|
||||
} catch (e) {
|
||||
uni.showToast({ title: '加载账单失败', icon: 'none' })
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const tableData = ref<BillSumRecord[]>([
|
||||
{ id: 1, title: '日账单', date: '2026-02-03', income: '0.00', expense: '0.00', entry: '0.00' },
|
||||
{ id: 2, title: '日账单', date: '2026-02-01', income: '0.00', expense: '0.00', entry: '0.00' },
|
||||
{ id: 3, title: '日账单', date: '2026-01-30', income: '0.00', expense: '0.00', entry: '0.00' },
|
||||
{ id: 4, title: '日账单', date: '2026-01-29', income: '0.00', expense: '0.00', entry: '0.00' },
|
||||
{ id: 5, title: '日账单', date: '2026-01-28', income: '0.00', expense: '0.00', entry: '0.00' },
|
||||
{ id: 6, title: '日账单', date: '2026-01-27', income: '0.00', expense: '0.00', entry: '0.00' },
|
||||
{ id: 7, title: '日账单', date: '2026-01-26', income: '0.00', expense: '0.00', entry: '0.00' },
|
||||
{ id: 8, title: '日账单', date: '2026-01-25', income: '0.00', expense: '0.00', entry: '0.00' },
|
||||
{ id: 9, title: '日账单', date: '2026-01-23', income: '0.00', expense: '0.00', entry: '0.00' },
|
||||
{ id: 10, title: '日账单', date: '2026-01-22', income: '0.00', expense: '0.00', entry: '0.00' }
|
||||
])
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
|
||||
const handleTabChange = (index : number) => {
|
||||
currentTab.value = index
|
||||
loadData()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -187,7 +213,7 @@ const tableData = ref<BillSumRecord[]>([
|
||||
}
|
||||
|
||||
.table-header {
|
||||
background-color: #e6f0ff; /* 对应截图的淡蓝色背景 */
|
||||
background-color: #e6f0ff;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
@@ -227,7 +253,6 @@ const tableData = ref<BillSumRecord[]>([
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
/* 列宽分配 */
|
||||
.col-id { width: 80px; }
|
||||
.col-title { width: 150px; }
|
||||
.col-date { width: 220px; }
|
||||
@@ -240,16 +265,14 @@ const tableData = ref<BillSumRecord[]>([
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/* 颜色 */
|
||||
.red-txt {
|
||||
color: #f5222d; /* 收入红色 */
|
||||
color: #f5222d;
|
||||
}
|
||||
|
||||
.green-txt {
|
||||
color: #52c41a; /* 支出绿色 */
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
/* 操作项 */
|
||||
.ops-wrap {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -261,162 +284,4 @@ const tableData = ref<BillSumRecord[]>([
|
||||
color: #1890ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.op-divider {
|
||||
margin: 0 8px;
|
||||
color: #e8e8e8;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.finance-bill {
|
||||
padding: 20px;
|
||||
background-color: #f5f7fa;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.border-shadow {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.filter-card {
|
||||
padding: 20px 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-right: 28px;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.date-picker-wrap, .select-box {
|
||||
width: 200px;
|
||||
height: 32px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.calendar-icon {
|
||||
font-size: 12px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.date-placeholder, .select-txt {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.arrow-down {
|
||||
margin-left: auto;
|
||||
font-size: 8px;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
.btn-query, .btn-export {
|
||||
height: 32px;
|
||||
padding: 0 20px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.btn-query {
|
||||
background-color: #1890ff;
|
||||
}
|
||||
|
||||
.btn-export {
|
||||
background-color: #fff;
|
||||
border: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
.btn-txt { color: #fff; font-size: 14px; }
|
||||
.export-txt { color: #606266; font-size: 14px; }
|
||||
|
||||
/* 表格样式 */
|
||||
.table-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
background-color: #f8f9fb;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.th {
|
||||
padding: 15px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.th-txt {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.td {
|
||||
padding: 15px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.td-txt {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.col-id { width: 100px; }
|
||||
.col-title { width: 150px; }
|
||||
.col-type { width: 120px; }
|
||||
.col-amount { width: 120px; }
|
||||
.col-time { width: 180px; }
|
||||
.col-remark { flex: 1; min-width: 200px; }
|
||||
|
||||
.text-left { justify-content: flex-start; }
|
||||
|
||||
.type-tag {
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.tag-green { background-color: #f0f9eb; color: #67c23a; border: 1px solid #e1f3d8; }
|
||||
.tag-orange { background-color: #fdf6ec; color: #e6a23c; border: 1px solid #faecd8; }
|
||||
|
||||
.green-txt { color: #67c23a; }
|
||||
.red-txt { color: #f56c6c; }
|
||||
</style>
|
||||
|
||||
@@ -4,24 +4,18 @@
|
||||
<view class="filter-card border-shadow">
|
||||
<view class="filter-row">
|
||||
<view class="filter-item">
|
||||
<text class="filter-label">订单时间:</text>
|
||||
<view class="date-picker-wrap">
|
||||
<text class="calendar-icon">📅</text>
|
||||
<text class="date-placeholder">开始日期 - 结束日期</text>
|
||||
</view>
|
||||
<text class="filter-label">交易类型:</text>
|
||||
<uni-data-select v-model="typeValue" :localdata="typeOptions" class="data-select" @change="handleQuery" />
|
||||
</view>
|
||||
<view class="filter-item">
|
||||
<text class="filter-label">交易类型:</text>
|
||||
<view class="select-box">
|
||||
<text class="select-txt">请选择</text>
|
||||
<text class="arrow-down">▼</text>
|
||||
</view>
|
||||
<text class="filter-label">收支类型:</text>
|
||||
<uni-data-select v-model="pmValue" :localdata="pmOptions" class="data-select" @change="handleQuery" />
|
||||
</view>
|
||||
<view class="filter-item search-wrap">
|
||||
<text class="filter-label">流水搜索:</text>
|
||||
<input class="search-input" placeholder="订单号/昵称/电话/用户ID" />
|
||||
<input class="search-input" v-model="searchKeyword" placeholder="订单号/昵称/电话/用户ID" @confirm="handleQuery" />
|
||||
</view>
|
||||
<view class="btn-query">
|
||||
<view class="btn-query" @click="handleQuery">
|
||||
<text class="btn-txt">查询</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -30,112 +24,170 @@
|
||||
<!-- 数据表格 (Flex 模拟) -->
|
||||
<view class="table-container border-shadow">
|
||||
<view class="table-header">
|
||||
<view class="th col-flow"><text class="th-txt">交易单号</text></view>
|
||||
<view class="th col-order"><text class="th-txt">关联订单</text></view>
|
||||
<view class="th col-flow"><text class="th-txt">交易 ID</text></view>
|
||||
<view class="th col-order"><text class="th-txt">关联单据</text></view>
|
||||
<view class="th col-time"><text class="th-txt">交易时间</text></view>
|
||||
<view class="th col-amount"><text class="th-txt">交易金额</text></view>
|
||||
<view class="th col-user"><text class="th-txt">交易用户</text></view>
|
||||
<view class="th col-method"><text class="th-txt">支付方式</text></view>
|
||||
<view class="th col-method"><text class="th-txt">业务类型</text></view>
|
||||
<view class="th col-remark"><text class="th-txt">备注</text></view>
|
||||
<view class="th col-ops"><text class="th-txt">操作</text></view>
|
||||
</view>
|
||||
|
||||
<view class="table-body">
|
||||
<view class="table-row" v-for="item in tableData" :key="item.flowNo">
|
||||
<view class="td col-flow"><text class="td-txt">{{ item.flowNo }}</text></view>
|
||||
<view class="td col-order text-left"><text class="td-txt">{{ item.orderNo }}</text></view>
|
||||
<view class="td col-time"><text class="td-txt">{{ item.time }}</text></view>
|
||||
<view class="td col-amount"><text class="td-txt red-txt">{{ item.amount }}</text></view>
|
||||
<view class="td col-user"><text class="td-txt">{{ item.user }}</text></view>
|
||||
<view class="td col-method"><text class="td-txt">{{ item.method }}</text></view>
|
||||
<view class="td col-remark"><text class="td-txt">{{ item.remark }}</text></view>
|
||||
<view v-if="loading" class="table-loading" style="padding: 40px; text-align: center;">
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
<view v-else-if="tableData.length === 0" class="table-empty" style="padding: 40px; text-align: center;">
|
||||
<text>暂无流水记录</text>
|
||||
</view>
|
||||
<view class="table-row" v-for="item in tableData" :key="item.id">
|
||||
<view class="td col-flow"><text class="td-txt">{{ item.id.substring(0, 8) }}...</text></view>
|
||||
<view class="td col-order text-left"><text class="td-txt">{{ item.link_id || '-' }}</text></view>
|
||||
<view class="td col-time"><text class="td-txt">{{ item.created_at.substring(0, 16).replace('T', ' ') }}</text></view>
|
||||
<view class="td col-amount">
|
||||
<text class="td-txt" :class="item.pm === 1 ? 'red-txt' : 'green-txt'">
|
||||
{{ item.pm === 1 ? '+' : '-' }}{{ item.number.toFixed(2) }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="td col-user">
|
||||
<view class="u-info-box">
|
||||
<text class="u-name">{{ item.user_name || '未知' }}</text>
|
||||
<text class="u-id">UID:{{ item.uid.substring(0, 8) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="td col-method"><text class="td-txt">{{ getBillTypeText(item.type) }}</text></view>
|
||||
<view class="td col-remark"><text class="td-txt">{{ item.mark || '-' }}</text></view>
|
||||
<view class="td col-ops">
|
||||
<text class="op-link">备注</text>
|
||||
<text class="op-link">详情</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分页区域 -->
|
||||
<view class="pagination-footer">
|
||||
<view class="page-total">
|
||||
<text class="total-txt">共 {{ total }} 条</text>
|
||||
</view>
|
||||
<view class="page-btns">
|
||||
<view class="p-btn" :class="{ disabled: page <= 1 }" @click="prevPage">
|
||||
<text><</text>
|
||||
</view>
|
||||
<view class="p-btn active">
|
||||
<text>{{ page }}</text>
|
||||
</view>
|
||||
<view class="p-btn" :class="{ disabled: page >= totalPages }" @click="nextPage">
|
||||
<text>></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="page-jump">
|
||||
<text class="jump-txt">前往</text>
|
||||
<input class="jump-input" v-model="jumpPage" type="number" @confirm="goToJumpPage" />
|
||||
<text class="jump-txt">页</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { fetchUserBillList } from '@/services/admin/financeService.uts'
|
||||
import { UserBillRecord } from '@/types/admin/finance.uts'
|
||||
|
||||
interface FlowRecord {
|
||||
flowNo: string
|
||||
orderNo: string
|
||||
time: string
|
||||
amount: string
|
||||
user: string
|
||||
method: string
|
||||
remark: string
|
||||
const typeValue = ref<string>('all')
|
||||
const pmValue = ref<string>('all')
|
||||
const searchKeyword = ref('')
|
||||
const page = ref(1)
|
||||
const pageSize = ref(15)
|
||||
const total = ref(0)
|
||||
const loading = ref(false)
|
||||
const jumpPage = ref('')
|
||||
|
||||
const typeOptions = [
|
||||
{ value: 'all', text: '全部类型' },
|
||||
{ value: 'recharge', text: '充值' },
|
||||
{ value: 'extract', text: '提现' },
|
||||
{ value: 'pay', text: '支付' },
|
||||
{ value: 'refund', text: '退款' }
|
||||
]
|
||||
|
||||
const pmOptions = [
|
||||
{ value: 'all', text: '全部' },
|
||||
{ value: '1', text: '收入' },
|
||||
{ value: '0', text: '支出' }
|
||||
]
|
||||
|
||||
const tableData = ref<UserBillRecord[]>([])
|
||||
|
||||
const totalPages = computed(() : number => {
|
||||
if (pageSize.value <= 0) return 1
|
||||
return Math.ceil(total.value / pageSize.value)
|
||||
})
|
||||
|
||||
async function loadList() {
|
||||
loading.value = true
|
||||
try {
|
||||
const pm = pmValue.value == 'all' ? null : parseInt(pmValue.value)
|
||||
const type = typeValue.value == 'all' ? null : typeValue.value
|
||||
|
||||
const res = await fetchUserBillList(
|
||||
page.value,
|
||||
pageSize.value,
|
||||
null, // category 先不传
|
||||
type,
|
||||
pm,
|
||||
null,
|
||||
null,
|
||||
searchKeyword.value || null
|
||||
)
|
||||
tableData.value = res.items
|
||||
total.value = res.total
|
||||
} catch (e) {
|
||||
uni.showToast({ title: '加载流水失败', icon: 'none' })
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const tableData = ref<FlowRecord[]>([
|
||||
{
|
||||
flowNo: 'ZJ202602031258428744',
|
||||
orderNo: 'hy541422245264752640',
|
||||
time: '2026-02-03 00:58:42',
|
||||
amount: '+0.00',
|
||||
user: 'J.',
|
||||
method: '微信',
|
||||
remark: ''
|
||||
},
|
||||
{
|
||||
flowNo: 'ZJ202602011056592117',
|
||||
orderNo: 'hy541029224517992448',
|
||||
time: '2026-02-01 22:56:59',
|
||||
amount: '+0.00',
|
||||
user: 'dev 王鑫',
|
||||
method: '微信',
|
||||
remark: ''
|
||||
},
|
||||
{
|
||||
flowNo: 'ZJ202602010513443817',
|
||||
orderNo: 'hy540942844546777088',
|
||||
time: '2026-02-01 17:13:44',
|
||||
amount: '+0.00',
|
||||
user: 'Sunshine',
|
||||
method: '微信',
|
||||
remark: ''
|
||||
},
|
||||
{
|
||||
flowNo: 'ZJ202602010127248683',
|
||||
orderNo: 'hy540885887420989440',
|
||||
time: '2026-02-01 13:27:24',
|
||||
amount: '+0.00',
|
||||
user: '132****8769',
|
||||
method: '微信',
|
||||
remark: ''
|
||||
},
|
||||
{
|
||||
flowNo: 'ZJ202602011215407366',
|
||||
orderNo: 'hy540686639874179072',
|
||||
time: '2026-02-01 00:15:40',
|
||||
amount: '+0.00',
|
||||
user: '177****9187',
|
||||
method: '微信',
|
||||
remark: ''
|
||||
},
|
||||
{
|
||||
flowNo: 'ZJ202601301026512881',
|
||||
orderNo: 'hy540296867267739648',
|
||||
time: '2026-01-30 22:26:51',
|
||||
amount: '+0.00',
|
||||
user: '暂未成功人士',
|
||||
method: '微信',
|
||||
remark: ''
|
||||
},
|
||||
{
|
||||
flowNo: 'ZJ202601300534267557',
|
||||
orderNo: 'hy540223279126806528',
|
||||
time: '2026-01-30 17:34:26',
|
||||
amount: '+0.00',
|
||||
user: 'b342865d2077',
|
||||
method: '微信',
|
||||
remark: ''
|
||||
onMounted(() => {
|
||||
loadList()
|
||||
})
|
||||
|
||||
const handleQuery = () => {
|
||||
page.value = 1
|
||||
loadList()
|
||||
}
|
||||
|
||||
const prevPage = () => {
|
||||
if (page.value > 1) {
|
||||
page.value--
|
||||
loadList()
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
const nextPage = () => {
|
||||
if (page.value < totalPages.value) {
|
||||
page.value++
|
||||
loadList()
|
||||
}
|
||||
}
|
||||
|
||||
const goToJumpPage = () => {
|
||||
const targetPage = parseInt(jumpPage.value)
|
||||
if (!isNaN(targetPage) && targetPage >= 1 && targetPage <= totalPages.value) {
|
||||
page.value = targetPage
|
||||
loadList()
|
||||
jumpPage.value = ''
|
||||
} else {
|
||||
uni.showToast({ title: '页码无效', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
function getBillTypeText(type : string) : string {
|
||||
const found = typeOptions.find(opt => opt.value === type)
|
||||
return found != null ? found.text : type
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -177,47 +229,8 @@ const tableData = ref<FlowRecord[]>([
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.date-picker-wrap {
|
||||
width: 220px;
|
||||
height: 32px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.calendar-icon {
|
||||
font-size: 12px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.date-placeholder {
|
||||
font-size: 13px;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
.select-box {
|
||||
width: 200px;
|
||||
height: 32px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.select-txt {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.arrow-down {
|
||||
font-size: 8px;
|
||||
color: #c0c4cc;
|
||||
.data-select {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.search-wrap {
|
||||
@@ -242,6 +255,7 @@ const tableData = ref<FlowRecord[]>([
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-txt {
|
||||
@@ -263,7 +277,7 @@ const tableData = ref<FlowRecord[]>([
|
||||
}
|
||||
|
||||
.th {
|
||||
padding: 15px 10px;
|
||||
padding: 12px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -279,10 +293,11 @@ const tableData = ref<FlowRecord[]>([
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.td {
|
||||
padding: 15px 10px;
|
||||
padding: 12px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -293,25 +308,60 @@ const tableData = ref<FlowRecord[]>([
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.col-flow { width: 200px; }
|
||||
.col-order { width: 220px; }
|
||||
.col-time { width: 180px; }
|
||||
.u-info-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
.u-name { font-size: 13px; color: #303133; font-weight: 500; }
|
||||
.u-id { font-size: 11px; color: #909399; }
|
||||
}
|
||||
|
||||
.red-txt { color: #f5222d; font-weight: bold; }
|
||||
.green-txt { color: #52c41a; font-weight: bold; }
|
||||
|
||||
.col-flow { width: 140px; }
|
||||
.col-order { width: 200px; }
|
||||
.col-time { width: 160px; }
|
||||
.col-amount { width: 120px; }
|
||||
.col-user { width: 150px; }
|
||||
.col-user { width: 160px; }
|
||||
.col-method { width: 120px; }
|
||||
.col-remark { flex: 1; min-width: 100px; }
|
||||
.col-remark { flex: 1; min-width: 150px; }
|
||||
.col-ops { width: 100px; }
|
||||
|
||||
.text-left {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.red-txt {
|
||||
color: #f56c6c;
|
||||
}
|
||||
.text-left { justify-content: flex-start; }
|
||||
|
||||
.op-link {
|
||||
font-size: 13px;
|
||||
color: #1890ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 分页 */
|
||||
.pagination-footer {
|
||||
padding: 24px 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
.total-txt { font-size: 14px; color: #606266; }
|
||||
.page-btns { display: flex; flex-direction: row; gap: 8px; }
|
||||
.p-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.p-btn.active { background-color: #2d8cf0; border-color: #2d8cf0; color: #fff; }
|
||||
.p-btn.disabled { color: #c0c4cc; background-color: #f5f7fa; cursor: not-allowed; }
|
||||
|
||||
.page-jump { display: flex; flex-direction: row; align-items: center; gap: 8px; }
|
||||
.jump-txt { font-size: 14px; color: #606266; }
|
||||
.jump-input { width: 40px; height: 32px; border: 1px solid #dcdfe6; text-align: center; border-radius: 4px; font-size: 14px; }
|
||||
</style>
|
||||
|
||||
@@ -3,11 +3,15 @@
|
||||
<!-- 筛选卡片 -->
|
||||
<view class="filter-card border-shadow">
|
||||
<view class="filter-row">
|
||||
<view class="filter-item">
|
||||
<text class="filter-label">昵称/手机号/分销商ID:</text>
|
||||
<input class="search-input" placeholder="请输入昵称搜索" />
|
||||
<view class="filter-item search-wrap">
|
||||
<text class="filter-label">佣金搜索:</text>
|
||||
<input class="search-input" v-model="searchKeyword" placeholder="关联单据/用户昵称/UID" @confirm="handleQuery" />
|
||||
</view>
|
||||
<view class="btn-query">
|
||||
<view class="filter-item">
|
||||
<text class="filter-label">收支类型:</text>
|
||||
<uni-data-select v-model="pmValue" :localdata="pmOptions" class="data-select" @change="handleQuery" />
|
||||
</view>
|
||||
<view class="btn-query" @click="handleQuery">
|
||||
<text class="btn-txt">查询</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -23,102 +27,159 @@
|
||||
|
||||
<view class="table-container">
|
||||
<view class="table-header">
|
||||
<view class="th col-id"><text class="th-txt">序号</text></view>
|
||||
<view class="th col-order"><text class="th-txt">关联单据</text></view>
|
||||
<view class="th col-time"><text class="th-txt">时间</text></view>
|
||||
<view class="th col-amount"><text class="th-txt">变动金额</text></view>
|
||||
<view class="th col-user"><text class="th-txt">用户信息</text></view>
|
||||
<view class="th col-total"><text class="th-txt">总佣金金额</text></view>
|
||||
<view class="th col-account"><text class="th-txt">账户佣金</text></view>
|
||||
<view class="th col-withdraw"><text class="th-txt">提现佣金</text></view>
|
||||
<view class="th col-type"><text class="th-txt">业务类型</text></view>
|
||||
<view class="th col-remark"><text class="th-txt">备注</text></view>
|
||||
</view>
|
||||
|
||||
<view class="table-body">
|
||||
<view class="table-row" v-for="item in tableData" :key="item.uid">
|
||||
<view v-if="loading" class="table-loading" style="padding: 40px; text-align: center;">
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
<view v-else-if="tableData.length === 0" class="table-empty" style="padding: 40px; text-align: center;">
|
||||
<text>暂无佣金记录</text>
|
||||
</view>
|
||||
<view v-else class="table-row" v-for="(item, index) in tableData" :key="item.id">
|
||||
<view class="td col-id"><text class="td-txt">{{ (page - 1) * pageSize + index + 1 }}</text></view>
|
||||
<view class="td col-order"><text class="td-txt">{{ item.link_id || '-' }}</text></view>
|
||||
<view class="td col-time"><text class="td-txt">{{ item.created_at.substring(0, 16).replace('T', ' ') }}</text></view>
|
||||
<view class="td col-amount">
|
||||
<text :class="['td-txt', item.pm === 1 ? 'red-txt' : 'green-txt']">
|
||||
{{ item.pm === 1 ? '+' : '-' }}{{ item.number.toFixed(2) }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="td col-user">
|
||||
<text class="td-txt">{{ item.userInfo }}</text>
|
||||
</view>
|
||||
<view class="td col-total">
|
||||
<text class="td-txt">{{ item.totalAmount }}</text>
|
||||
</view>
|
||||
<view class="td col-account">
|
||||
<text class="td-txt">{{ item.accountAmount }}</text>
|
||||
</view>
|
||||
<view class="td col-withdraw">
|
||||
<text class="td-txt">{{ item.withdrawAmount }}</text>
|
||||
<view class="u-info-box">
|
||||
<text class="u-name">{{ item.user_name || '未知' }}</text>
|
||||
<text class="u-id">UID:{{ item.uid.substring(0, 8) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="td col-type"><text class="td-txt">{{ getBillTypeText(item.type) }}</text></view>
|
||||
<view class="td col-remark"><text class="td-txt">{{ item.mark || '-' }}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分页区域 -->
|
||||
<view class="pagination-footer">
|
||||
<view class="page-total">
|
||||
<text class="total-txt">共 {{ total }} 条</text>
|
||||
</view>
|
||||
<view class="page-btns">
|
||||
<view class="p-btn" :class="{ disabled: page <= 1 }" @click="prevPage">
|
||||
<text><</text>
|
||||
</view>
|
||||
<view class="p-btn active">
|
||||
<text>{{ page }}</text>
|
||||
</view>
|
||||
<view class="p-btn" :class="{ disabled: page >= totalPages }" @click="nextPage">
|
||||
<text>></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="page-jump">
|
||||
<text class="jump-txt">前往</text>
|
||||
<input class="jump-input" v-model="jumpPage" type="number" @confirm="goToJumpPage" />
|
||||
<text class="jump-txt">页</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { fetchUserBillList } from '@/services/admin/financeService.uts'
|
||||
import { UserBillRecord } from '@/types/admin/finance.uts'
|
||||
|
||||
interface CommissionSummary {
|
||||
uid: string
|
||||
userInfo: string
|
||||
totalAmount: string
|
||||
accountAmount: string
|
||||
withdrawAmount: string
|
||||
const pmValue = ref<string>('all')
|
||||
const searchKeyword = ref('')
|
||||
const page = ref(1)
|
||||
const pageSize = ref(15)
|
||||
const total = ref(0)
|
||||
const loading = ref(false)
|
||||
const jumpPage = ref('')
|
||||
|
||||
const pmOptions = [
|
||||
{ value: 'all', text: '全部收支' },
|
||||
{ value: '1', text: '获得佣金' },
|
||||
{ value: '0', text: '佣金支出' }
|
||||
]
|
||||
|
||||
const tableData = ref<UserBillRecord[]>([])
|
||||
|
||||
const totalPages = computed(() : number => {
|
||||
if (pageSize.value <= 0) return 1
|
||||
return Math.ceil(total.value / pageSize.value)
|
||||
})
|
||||
|
||||
async function loadList() {
|
||||
loading.value = true
|
||||
try {
|
||||
const pm = pmValue.value == 'all' ? null : parseInt(pmValue.value)
|
||||
|
||||
const res = await fetchUserBillList(
|
||||
page.value,
|
||||
pageSize.value,
|
||||
'brokerage', // 佣金明细
|
||||
null,
|
||||
pm,
|
||||
null,
|
||||
null,
|
||||
searchKeyword.value || null
|
||||
)
|
||||
tableData.value = res.items
|
||||
total.value = res.total
|
||||
} catch (e) {
|
||||
uni.showToast({ title: '加载佣金记录失败', icon: 'none' })
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const tableData = ref<CommissionSummary[]>([
|
||||
{
|
||||
uid: '77418',
|
||||
userInfo: '张迪 | 155****5525 | 77418',
|
||||
totalAmount: '11.00',
|
||||
accountAmount: '11.00',
|
||||
withdrawAmount: '0'
|
||||
},
|
||||
{
|
||||
uid: '69696',
|
||||
userInfo: "I'm yours - | 69696",
|
||||
totalAmount: '0.40',
|
||||
accountAmount: '0.40',
|
||||
withdrawAmount: '0'
|
||||
},
|
||||
{
|
||||
uid: '68582',
|
||||
userInfo: 'guan | 68582',
|
||||
totalAmount: '140.80',
|
||||
accountAmount: '140.80',
|
||||
withdrawAmount: '0'
|
||||
},
|
||||
{
|
||||
uid: '65258',
|
||||
userInfo: '纯爱战神别名王富贵儿 | 158****4881 | 65258',
|
||||
totalAmount: '11.00',
|
||||
accountAmount: '11.00',
|
||||
withdrawAmount: '0'
|
||||
},
|
||||
{
|
||||
uid: '66265',
|
||||
userInfo: '王伟兴 | 66265',
|
||||
totalAmount: '11.99',
|
||||
accountAmount: '11.99',
|
||||
withdrawAmount: '0'
|
||||
},
|
||||
{
|
||||
uid: '65270',
|
||||
userInfo: '199****1781 | 199****1781 | 65270',
|
||||
totalAmount: '31.60',
|
||||
accountAmount: '31.60',
|
||||
withdrawAmount: '0'
|
||||
},
|
||||
{
|
||||
uid: '64572',
|
||||
userInfo: '洒笾菂艸 | 188****2434 | 64572',
|
||||
totalAmount: '0.20',
|
||||
accountAmount: '0.20',
|
||||
withdrawAmount: '0'
|
||||
},
|
||||
{
|
||||
uid: '47952',
|
||||
userInfo: '那小子 | 134****3573 | 47952',
|
||||
totalAmount: '19.80',
|
||||
accountAmount: '19.80',
|
||||
withdrawAmount: '0'
|
||||
onMounted(() => {
|
||||
loadList()
|
||||
})
|
||||
|
||||
const handleQuery = () => {
|
||||
page.value = 1
|
||||
loadList()
|
||||
}
|
||||
|
||||
const prevPage = () => {
|
||||
if (page.value > 1) {
|
||||
page.value--
|
||||
loadList()
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
const nextPage = () => {
|
||||
if (page.value < totalPages.value) {
|
||||
page.value++
|
||||
loadList()
|
||||
}
|
||||
}
|
||||
|
||||
const goToJumpPage = () => {
|
||||
const targetPage = parseInt(jumpPage.value)
|
||||
if (!isNaN(targetPage) && targetPage >= 1 && targetPage <= totalPages.value) {
|
||||
page.value = targetPage
|
||||
loadList()
|
||||
jumpPage.value = ''
|
||||
} else {
|
||||
uni.showToast({ title: '页码无效', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
function getBillTypeText(type : string) : string {
|
||||
if (type == 'extract') return '提现扣除'
|
||||
if (type == 'brokerage') return '分销返佣'
|
||||
if (type == 'refund') return '退款扣除'
|
||||
return type
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -134,225 +195,92 @@ const tableData = ref<CommissionSummary[]>([
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* 筛选 */
|
||||
.filter-card {
|
||||
padding: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 240px;
|
||||
height: 36px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn-query {
|
||||
margin-left: 12px;
|
||||
background-color: #1890ff;
|
||||
border-radius: 4px;
|
||||
height: 36px;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-txt {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 表格区域 */
|
||||
.table-card {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
.btn-export {
|
||||
width: 60px;
|
||||
height: 32px;
|
||||
background-color: #e6f7ff;
|
||||
border: 1px solid #91d5ff;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.export-txt {
|
||||
color: #1890ff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
background-color: #e6f0ff; /* 淡蓝色表头 */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.th {
|
||||
padding: 14px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.th-txt {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.table-row:hover {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.td {
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.td-txt {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
/* 列宽分配 */
|
||||
.col-user { flex: 2; min-width: 300px; justify-content: flex-start; }
|
||||
.col-total { flex: 1; justify-content: flex-start; }
|
||||
.col-account { flex: 1; justify-content: flex-start; }
|
||||
.col-withdraw { flex: 1; justify-content: flex-start; }
|
||||
</style>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.finance-commission {
|
||||
padding: 20px;
|
||||
background-color: #f5f7fa;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.border-shadow {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.filter-card {
|
||||
padding: 20px 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-right: 28px;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.date-picker-wrap {
|
||||
width: 220px;
|
||||
height: 32px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.calendar-icon { font-size: 12px; margin-right: 8px; }
|
||||
.date-placeholder { font-size: 13px; color: #c0c4cc; }
|
||||
.filter-card { padding: 24px; margin-bottom: 20px; }
|
||||
.filter-row { display: flex; flex-direction: row; align-items: center; }
|
||||
.filter-item { display: flex; flex-direction: row; align-items: center; margin-right: 28px; }
|
||||
.filter-label { font-size: 14px; color: #333; margin-right: 12px; white-space: nowrap; }
|
||||
|
||||
.search-wrap { flex: 1; }
|
||||
.search-input {
|
||||
width: 200px;
|
||||
height: 32px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
padding: 0 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.search-input { flex: 1; height: 36px; border: 1px solid #dcdfe6; border-radius: 4px; padding: 0 12px; font-size: 14px; }
|
||||
|
||||
.data-select { width: 160px; }
|
||||
|
||||
.btn-query {
|
||||
height: 32px;
|
||||
padding: 0 20px;
|
||||
background-color: #1890ff;
|
||||
border-radius: 4px;
|
||||
height: 36px;
|
||||
padding: 0 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-txt { color: #fff; font-size: 14px; }
|
||||
|
||||
/* 表格 */
|
||||
.table-container { display: flex; flex-direction: column; }
|
||||
.table-header { background-color: #f8f9fb; display: flex; flex-direction: row; border-bottom: 1px solid #ebeef5; }
|
||||
.th { padding: 15px 10px; display: flex; align-items: center; justify-content: center; }
|
||||
.th-txt { font-size: 14px; font-weight: 600; color: #909399; }
|
||||
/* 表格区域 */
|
||||
.table-card { padding: 0; }
|
||||
.action-bar { padding: 15px 20px; }
|
||||
.btn-export { width: 60px; height: 32px; background-color: #e6f7ff; border: 1px solid #91d5ff; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
|
||||
.export-txt { color: #1890ff; font-size: 14px; }
|
||||
|
||||
.table-row { display: flex; flex-direction: row; border-bottom: 1px solid #ebeef5; }
|
||||
.td { padding: 15px 10px; display: flex; align-items: center; justify-content: center; }
|
||||
.table-container { display: flex; flex-direction: column; }
|
||||
.table-header { background-color: #e6f0ff; display: flex; flex-direction: row; }
|
||||
.th { padding: 14px 10px; display: flex; align-items: center; justify-content: center; }
|
||||
.th-txt { font-size: 13px; font-weight: 600; color: #303133; }
|
||||
|
||||
.table-body { display: flex; flex-direction: column; }
|
||||
.table-row { display: flex; flex-direction: row; border-bottom: 1px solid #f0f0f0; min-height: 60px; }
|
||||
.table-row:hover { background-color: #f9f9f9; }
|
||||
.td { padding: 12px 10px; display: flex; align-items: center; justify-content: center; }
|
||||
.td-txt { font-size: 13px; color: #606266; }
|
||||
|
||||
.col-id { width: 80px; }
|
||||
.col-user { width: 180px; justify-content: flex-start; }
|
||||
.col-order { width: 180px; }
|
||||
.col-amount { width: 120px; }
|
||||
.col-type { width: 120px; }
|
||||
.col-time { width: 180px; }
|
||||
.col-status { width: 100px; }
|
||||
|
||||
.avatar { width: 32px; height: 32px; border-radius: 16px; margin-right: 10px; }
|
||||
.user-name { font-size: 13px; color: #606266; }
|
||||
.green-txt { color: #67c23a; font-weight: bold; }
|
||||
|
||||
.status-dot-active {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background-color: #67c23a;
|
||||
margin-right: 6px;
|
||||
.u-info-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
.u-name { font-size: 13px; color: #303133; font-weight: 500; }
|
||||
.u-id { font-size: 11px; color: #909399; }
|
||||
}
|
||||
|
||||
.red-txt { color: #f5222d; font-weight: bold; }
|
||||
.green-txt { color: #52c41a; font-weight: bold; }
|
||||
|
||||
/* 列宽分配 */
|
||||
.col-id { width: 70px; }
|
||||
.col-order { width: 180px; }
|
||||
.col-time { width: 160px; }
|
||||
.col-amount { width: 120px; }
|
||||
.col-user { width: 180px; justify-content: flex-start; }
|
||||
.col-type { width: 120px; }
|
||||
.col-remark { flex: 1; min-width: 150px; justify-content: flex-start; }
|
||||
|
||||
/* 分页 */
|
||||
.pagination-footer {
|
||||
padding: 24px 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
.total-txt { font-size: 14px; color: #606266; }
|
||||
.page-btns { display: flex; flex-direction: row; gap: 8px; }
|
||||
.p-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.p-btn.active { background-color: #2d8cf0; border-color: #2d8cf0; color: #fff; }
|
||||
.p-btn.disabled { color: #c0c4cc; background-color: #f5f7fa; cursor: not-allowed; }
|
||||
|
||||
.page-jump { display: flex; flex-direction: row; align-items: center; gap: 8px; }
|
||||
.jump-txt { font-size: 14px; color: #606266; }
|
||||
.jump-input { width: 40px; height: 32px; border: 1px solid #dcdfe6; text-align: center; border-radius: 4px; font-size: 14px; }
|
||||
</style>
|
||||
|
||||
@@ -7,20 +7,14 @@
|
||||
<text class="filter-label">创建时间:</text>
|
||||
<view class="date-picker-wrap">
|
||||
<text class="calendar-icon">📅</text>
|
||||
<text class="date-placeholder">开始日期 - 结束日期</text>
|
||||
<text class="date-placeholder">最近30天</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter-item">
|
||||
<view class="filter-item search-wrap">
|
||||
<text class="filter-label">搜索:</text>
|
||||
<view class="search-group">
|
||||
<view class="select-trigger">
|
||||
<text class="select-txt">请选择</text>
|
||||
<text class="arrow-down">▼</text>
|
||||
</view>
|
||||
<input class="search-input" placeholder="请输入" />
|
||||
</view>
|
||||
<input class="search-input" v-model="searchKeyword" placeholder="订单号/抬头/用户名" @confirm="handleQuery" />
|
||||
</view>
|
||||
<view class="btn-query">
|
||||
<view class="btn-query" @click="handleQuery">
|
||||
<text class="btn-txt">查询</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -33,134 +27,206 @@
|
||||
:key="index"
|
||||
class="tab-item"
|
||||
:class="{ active: activeTab === index }"
|
||||
@click="activeTab = index"
|
||||
@click="handleTabChange(index)"
|
||||
>
|
||||
<text class="tab-title">{{ tab.name }} ({{ tab.count }})</text>
|
||||
<text class="tab-title">{{ tab.name }}</text>
|
||||
<view class="active-line" v-if="activeTab === index"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 数据表格 (Flex 模拟) -->
|
||||
<!-- 数据表格 -->
|
||||
<view class="table-container border-shadow">
|
||||
<view class="table-header">
|
||||
<view class="th col-order"><text class="th-txt">订单号</text></view>
|
||||
<view class="th col-amount"><text class="th-txt">订单金额</text></view>
|
||||
<view class="th col-type"><text class="th-txt">发票类型</text></view>
|
||||
<view class="th col-header"><text class="th-txt">发票抬头类型</text></view>
|
||||
<view class="th col-time"><text class="th-txt">下单时间</text></view>
|
||||
<view class="th col-header"><text class="th-txt">抬头信息</text></view>
|
||||
<view class="th col-time"><text class="th-txt">申请时间</text></view>
|
||||
<view class="th col-status-inv"><text class="th-txt">开票状态</text></view>
|
||||
<view class="th col-status-order"><text class="th-txt">订单状态</text></view>
|
||||
<view class="th col-ops"><text class="th-txt">操作</text></view>
|
||||
</view>
|
||||
|
||||
<view class="table-body">
|
||||
<view class="table-row" v-for="item in tableData" :key="item.orderNo">
|
||||
<view class="td col-order text-left"><text class="td-txt">{{ item.orderNo }}</text></view>
|
||||
<view class="td col-amount"><text class="td-txt">¥ {{ item.amount }}</text></view>
|
||||
<view class="td col-type"><text class="td-txt">{{ item.invoiceType }}</text></view>
|
||||
<view class="td col-header"><text class="td-txt">{{ item.headerType }}</text></view>
|
||||
<view class="td col-time"><text class="td-txt">{{ item.time }}</text></view>
|
||||
<view class="td col-status-inv"><text class="td-txt red-cell">{{ item.invStatus }}</text></view>
|
||||
<view class="td col-status-order"><text class="td-txt">{{ item.orderStatus }}</text></view>
|
||||
<view class="td col-ops">
|
||||
<view class="ops-box">
|
||||
<text class="op-link">操作</text>
|
||||
<text class="sep">|</text>
|
||||
<text class="op-link">订单信息</text>
|
||||
<view v-if="loading" class="table-loading" style="padding: 40px; text-align: center;">
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
<view v-else-if="tableData.length === 0" class="table-empty" style="padding: 40px; text-align: center;">
|
||||
<text>暂无发票申请</text>
|
||||
</view>
|
||||
<view v-else class="table-row" v-for="(item, index) in tableData" :key="item.id">
|
||||
<view class="td col-order text-left"><text class="td-txt">{{ item.order_no }}</text></view>
|
||||
<view class="td col-amount"><text class="td-txt">¥ {{ item.order_amount.toFixed(2) }}</text></view>
|
||||
<view class="td col-type"><text class="td-txt">{{ item.invoice_type == 1 ? '普通发票' : '专用发票' }}</text></view>
|
||||
<view class="td col-header">
|
||||
<view class="header-box">
|
||||
<text class="td-txt">{{ item.header_name }}</text>
|
||||
<text class="sub-txt" v-if="item.tax_id">税号: {{ item.tax_id }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="td col-time"><text class="td-txt">{{ item.created_at.substring(0, 16).replace('T', ' ') }}</text></view>
|
||||
<view class="td col-status-inv">
|
||||
<text class="status-tag" :class="getStatusClass(item.status)">
|
||||
{{ getStatusText(item.status) }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="td col-ops">
|
||||
<view class="ops-box" v-if="item.status === 0">
|
||||
<text class="op-link" @click="handleProcess(item.id, 1)">开票</text>
|
||||
<text class="sep">|</text>
|
||||
<text class="op-link red-txt" @click="handleProcess(item.id, -1)">驳回</text>
|
||||
</view>
|
||||
<text v-else class="td-txt">-</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分页区域 -->
|
||||
<view class="pagination-footer">
|
||||
<view class="page-total">
|
||||
<text class="total-txt">共 {{ total }} 条</text>
|
||||
</view>
|
||||
<view class="page-btns">
|
||||
<view class="p-btn" :class="{ disabled: page <= 1 }" @click="prevPage">
|
||||
<text><</text>
|
||||
</view>
|
||||
<view class="p-btn active">
|
||||
<text>{{ page }}</text>
|
||||
</view>
|
||||
<view class="p-btn" :class="{ disabled: page >= totalPages }" @click="nextPage">
|
||||
<text>></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="page-jump">
|
||||
<text class="jump-txt">前往</text>
|
||||
<input class="jump-input" v-model="jumpPage" type="number" @confirm="goToJumpPage" />
|
||||
<text class="jump-txt">页</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { fetchInvoiceList, processInvoice } from '@/services/admin/financeService.uts'
|
||||
|
||||
const activeTab = ref(0)
|
||||
const searchKeyword = ref('')
|
||||
const page = ref(1)
|
||||
const pageSize = ref(15)
|
||||
const total = ref(0)
|
||||
const loading = ref(false)
|
||||
const jumpPage = ref('')
|
||||
|
||||
const tabs = ref([
|
||||
{ name: '全部发票', count: 163 },
|
||||
{ name: '待开发票', count: 105 },
|
||||
{ name: '已开发票', count: 34 },
|
||||
{ name: '退款发票', count: 33 }
|
||||
])
|
||||
const tabs = [
|
||||
{ name: '全部发票', value: null as number | null },
|
||||
{ name: '待开发票', value: 0 as number | null },
|
||||
{ name: '已开发票', value: 1 as number | null },
|
||||
{ name: '已拒绝', value: -1 as number | null }
|
||||
]
|
||||
|
||||
const tableData = ref([
|
||||
{
|
||||
orderNo: 'cp538981381384962048',
|
||||
amount: '999.00',
|
||||
invoiceType: '电子普通发票',
|
||||
headerType: '个人',
|
||||
time: '2026-01-27 07:19:35',
|
||||
invStatus: '未开票',
|
||||
orderStatus: '未发货'
|
||||
},
|
||||
{
|
||||
orderNo: 'cp523490058603331584',
|
||||
amount: '9.00',
|
||||
invoiceType: '电子普通发票',
|
||||
headerType: '个人',
|
||||
time: '2025-12-15 13:22:35',
|
||||
invStatus: '未开票',
|
||||
orderStatus: '未发货'
|
||||
},
|
||||
{
|
||||
orderNo: 'cp524967077409193984',
|
||||
amount: '9.00',
|
||||
invoiceType: '电子普通发票',
|
||||
headerType: '个人',
|
||||
time: '2025-12-19 15:11:44',
|
||||
invStatus: '未开票',
|
||||
orderStatus: '未发货'
|
||||
},
|
||||
{
|
||||
orderNo: 'cp521126678106210304',
|
||||
amount: '11890.00',
|
||||
invoiceType: '电子普通发票',
|
||||
headerType: '个人',
|
||||
time: '2025-12-09 00:51:22',
|
||||
invStatus: '未开票',
|
||||
orderStatus: '未发货'
|
||||
},
|
||||
{
|
||||
orderNo: 'cp521126166883467264',
|
||||
amount: '11800.00',
|
||||
invoiceType: '电子普通发票',
|
||||
headerType: '个人',
|
||||
time: '2025-12-09 00:49:20',
|
||||
invStatus: '未开票',
|
||||
orderStatus: '未发货'
|
||||
},
|
||||
{
|
||||
orderNo: 'cp517015093888679936',
|
||||
amount: '142.00',
|
||||
invoiceType: '电子普通发票',
|
||||
headerType: '个人',
|
||||
time: '2025-11-27 16:33:24',
|
||||
invStatus: '未开票',
|
||||
orderStatus: '未发货'
|
||||
},
|
||||
{
|
||||
orderNo: 'cp313601579989073920',
|
||||
amount: '0.00',
|
||||
invoiceType: '电子普通发票',
|
||||
headerType: '个人',
|
||||
time: '2024-05-15 08:59:56',
|
||||
invStatus: '未开票',
|
||||
orderStatus: '待评价'
|
||||
},
|
||||
{
|
||||
orderNo: 'cp503871643047690240',
|
||||
amount: '999.00',
|
||||
invoiceType: '电子普通发票',
|
||||
headerType: '个人',
|
||||
time: '2025-10-22 10:06:01',
|
||||
invStatus: '未开票',
|
||||
orderStatus: '未发货'
|
||||
const tableData = ref<any[]>([])
|
||||
|
||||
const totalPages = computed(() : number => {
|
||||
if (pageSize.value <= 0) return 1
|
||||
return Math.ceil(total.value / pageSize.value)
|
||||
})
|
||||
|
||||
async function loadInvoices() {
|
||||
loading.value = true
|
||||
try {
|
||||
const status = tabs[activeTab.value].value
|
||||
const res = await fetchInvoiceList(
|
||||
page.value,
|
||||
pageSize.value,
|
||||
status,
|
||||
null,
|
||||
null,
|
||||
searchKeyword.value || null
|
||||
)
|
||||
tableData.value = res.items
|
||||
total.value = res.total
|
||||
} catch (e) {
|
||||
uni.showToast({ title: '加载发票列表失败', icon: 'none' })
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadInvoices()
|
||||
})
|
||||
|
||||
function handleTabChange(index : number) {
|
||||
activeTab.value = index
|
||||
page.value = 1
|
||||
loadInvoices()
|
||||
}
|
||||
|
||||
function handleQuery() {
|
||||
page.value = 1
|
||||
loadInvoices()
|
||||
}
|
||||
|
||||
function prevPage() {
|
||||
if (page.value > 1) {
|
||||
page.value--
|
||||
loadInvoices()
|
||||
}
|
||||
}
|
||||
|
||||
function nextPage() {
|
||||
if (page.value < totalPages.value) {
|
||||
page.value++
|
||||
loadInvoices()
|
||||
}
|
||||
}
|
||||
|
||||
function goToJumpPage() {
|
||||
const targetPage = parseInt(jumpPage.value)
|
||||
if (!isNaN(targetPage) && targetPage >= 1 && targetPage <= totalPages.value) {
|
||||
page.value = targetPage
|
||||
loadInvoices()
|
||||
jumpPage.value = ''
|
||||
} else {
|
||||
uni.showToast({ title: '页码无效', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
async function handleProcess(id : string, status : number) {
|
||||
const action = status === 1 ? '确认已完成开票' : '确认驳回该申请'
|
||||
uni.showModal({
|
||||
title: '开票处理',
|
||||
content: action,
|
||||
editable: status === -1,
|
||||
placeholderText: '请输入驳回原因',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
const ok = await processInvoice(id, status, null, res.content || null)
|
||||
if (ok) {
|
||||
uni.showToast({ title: '处理成功' })
|
||||
loadInvoices()
|
||||
} else {
|
||||
uni.showToast({ title: '处理失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function getStatusText(status : number) : string {
|
||||
if (status === 0) return '待开票'
|
||||
if (status === 1) return '已开票'
|
||||
if (status === -1) return '已拒绝'
|
||||
return '未知'
|
||||
}
|
||||
|
||||
function getStatusClass(status : number) : string {
|
||||
if (status === 0) return 'status-pending'
|
||||
if (status === 1) return 'status-success'
|
||||
if (status === -1) return 'status-error'
|
||||
return ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -176,90 +242,13 @@ const tableData = ref([
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* 筛选栏 */
|
||||
.filter-card {
|
||||
padding: 20px 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.filter-card { padding: 20px 24px; margin-bottom: 20px; }
|
||||
.filter-row { display: flex; flex-direction: row; align-items: center; }
|
||||
.filter-item { display: flex; flex-direction: row; align-items: center; margin-right: 30px; }
|
||||
.filter-label { font-size: 14px; color: #333; margin-right: 8px; }
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.date-picker-wrap {
|
||||
width: 240px;
|
||||
height: 32px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.calendar-icon {
|
||||
margin-right: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.date-placeholder {
|
||||
font-size: 13px;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
.search-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
height: 32px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.select-trigger {
|
||||
width: 90px;
|
||||
height: 100%;
|
||||
border-right: 1px solid #dcdfe6;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.select-txt {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.arrow-down {
|
||||
font-size: 8px;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 160px;
|
||||
height: 100%;
|
||||
padding: 0 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.search-wrap { flex: 1; }
|
||||
.search-input { flex: 1; height: 32px; border: 1px solid #dcdfe6; border-radius: 4px; padding: 0 12px; font-size: 13px; }
|
||||
|
||||
.btn-query {
|
||||
background-color: #1890ff;
|
||||
@@ -269,126 +258,69 @@ const tableData = ref([
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-txt {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
.btn-txt { color: #fff; font-size: 14px; }
|
||||
|
||||
/* 选项卡 */
|
||||
.tab-section {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
padding: 12px 20px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab-title {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.tab-item.active .tab-title {
|
||||
color: #1890ff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.active-line {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
height: 2px;
|
||||
background-color: #1890ff;
|
||||
}
|
||||
.tab-section { display: flex; flex-direction: row; margin-bottom: 20px; border-bottom: 1px solid #e4e7ed; padding: 0 10px; }
|
||||
.tab-item { padding: 12px 20px; position: relative; cursor: pointer; }
|
||||
.tab-title { font-size: 14px; color: #606266; transition: all 0.3s; }
|
||||
.tab-item.active .tab-title { color: #1890ff; font-weight: 600; }
|
||||
.active-line { position: absolute; bottom: 0; left: 20px; right: 20px; height: 2px; background-color: #1890ff; }
|
||||
|
||||
/* 表格 */
|
||||
.table-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.table-container { display: flex; flex-direction: column; }
|
||||
.table-header { background-color: #f8f9fb; display: flex; flex-direction: row; border-bottom: 1px solid #ebeef5; }
|
||||
.th { padding: 15px 10px; display: flex; align-items: center; justify-content: center; }
|
||||
.th-txt { font-size: 14px; font-weight: 600; color: #909399; }
|
||||
|
||||
.table-header {
|
||||
background-color: #f8f9fb;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
.table-row { display: flex; flex-direction: row; border-bottom: 1px solid #ebeef5; }
|
||||
.td { padding: 15px 10px; display: flex; align-items: center; justify-content: center; }
|
||||
.td-txt { font-size: 13px; color: #606266; }
|
||||
|
||||
.th {
|
||||
padding: 15px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.header-box { display: flex; flex-direction: column; align-items: flex-start; .sub-txt { font-size: 11px; color: #999; margin-top: 2px; } }
|
||||
|
||||
.th-txt {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.td {
|
||||
padding: 15px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.td-txt {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
}
|
||||
.status-tag { font-size: 12px; padding: 2px 8px; border-radius: 2px; }
|
||||
.status-pending { color: #fa8c16; background: #fff7e6; border: 1px solid #ffd591; }
|
||||
.status-success { color: #52c41a; background: #f6ffed; border: 1px solid #b7eb8f; }
|
||||
.status-error { color: #f5222d; background: #fff1f0; border: 1px solid #ffa39e; }
|
||||
|
||||
/* 列宽分配 */
|
||||
.col-order { width: 220px; justify-content: flex-start; padding-left: 20px; }
|
||||
.col-amount { width: 120px; }
|
||||
.col-type { width: 150px; }
|
||||
.col-header { width: 120px; }
|
||||
.col-time { width: 180px; }
|
||||
.col-status-inv { width: 120px; }
|
||||
.col-status-order { width: 120px; }
|
||||
.col-ops { flex: 1; min-width: 140px; }
|
||||
.col-order { width: 200px; justify-content: flex-start; padding-left: 20px; }
|
||||
.col-amount { width: 100px; }
|
||||
.col-type { width: 120px; }
|
||||
.col-header { flex: 1; min-width: 180px; justify-content: flex-start; }
|
||||
.col-time { width: 160px; }
|
||||
.col-status-inv { width: 100px; }
|
||||
.col-ops { width: 140px; }
|
||||
|
||||
.text-left {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.text-left { justify-content: flex-start; }
|
||||
.ops-box { display: flex; flex-direction: row; align-items: center; }
|
||||
.op-link { font-size: 13px; color: #1890ff; cursor: pointer; }
|
||||
.red-txt { color: #f5222d; }
|
||||
.sep { font-size: 12px; color: #ebeef5; margin: 0 8px; }
|
||||
|
||||
.red-cell {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
.ops-box {
|
||||
/* 分页 */
|
||||
.pagination-footer {
|
||||
padding: 24px 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
.total-txt { font-size: 14px; color: #606266; }
|
||||
.page-btns { display: flex; flex-direction: row; gap: 8px; }
|
||||
.p-btn {
|
||||
width: 32px; height: 32px; border: 1px solid #dcdfe6; border-radius: 4px;
|
||||
display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer;
|
||||
}
|
||||
.p-btn.active { background-color: #2d8cf0; border-color: #2d8cf0; color: #fff; }
|
||||
.p-btn.disabled { color: #c0c4cc; background-color: #f5f7fa; cursor: not-allowed; }
|
||||
|
||||
.op-link {
|
||||
font-size: 13px;
|
||||
color: #1890ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sep {
|
||||
font-size: 12px;
|
||||
color: #ebeef5;
|
||||
margin: 0 8px;
|
||||
}
|
||||
.page-jump { display: flex; flex-direction: row; align-items: center; gap: 8px; }
|
||||
.jump-txt { font-size: 14px; color: #606266; }
|
||||
.jump-input { width: 40px; height: 32px; border: 1px solid #dcdfe6; text-align: center; border-radius: 4px; font-size: 14px; }
|
||||
</style>
|
||||
|
||||
@@ -4,24 +4,14 @@
|
||||
<view class="filter-card border-shadow">
|
||||
<view class="filter-row">
|
||||
<view class="filter-item">
|
||||
<text class="filter-label">时间选择:</text>
|
||||
<view class="date-picker-wrap">
|
||||
<text class="calendar-icon">📅</text>
|
||||
<text class="date-placeholder">开始日期 - 结束日期</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter-item">
|
||||
<text class="filter-label">支付类型:</text>
|
||||
<view class="select-box">
|
||||
<text class="select-txt">全部</text>
|
||||
<text class="arrow-down">▼</text>
|
||||
</view>
|
||||
<text class="filter-label">支付状态:</text>
|
||||
<uni-data-select v-model="paidValue" :localdata="paidOptions" class="data-select" @change="handleQuery" />
|
||||
</view>
|
||||
<view class="filter-item search-wrap">
|
||||
<text class="filter-label">搜索:</text>
|
||||
<input class="search-input" placeholder="请输入用户昵称、订单号" />
|
||||
<input class="search-input" v-model="searchKeyword" placeholder="请输入用户昵称、订单号" @confirm="handleQuery" />
|
||||
</view>
|
||||
<view class="btn-query">
|
||||
<view class="btn-query" @click="handleQuery">
|
||||
<text class="btn-txt">查询</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -29,7 +19,7 @@
|
||||
|
||||
<!-- 统计网格 -->
|
||||
<view class="stats-grid">
|
||||
<view class="stat-card border-shadow" v-for="(item, index) in stats" :key="index">
|
||||
<view class="stat-card border-shadow" v-for="(item, index) in statsItems" :key="index">
|
||||
<view class="icon-circle" :class="item.colorClass">
|
||||
<text class="stat-icon">{{ item.icon }}</text>
|
||||
</view>
|
||||
@@ -51,8 +41,7 @@
|
||||
<view class="table-container border-shadow">
|
||||
<view class="table-header">
|
||||
<view class="th col-id"><text class="th-txt">ID</text></view>
|
||||
<view class="th col-avatar"><text class="th-txt">头像</text></view>
|
||||
<view class="th col-nickname"><text class="th-txt">用户昵称</text></view>
|
||||
<view class="th col-nickname"><text class="th-txt">用户信息</text></view>
|
||||
<view class="th col-orderno"><text class="th-txt">订单号</text></view>
|
||||
<view class="th col-amount"><text class="th-txt">支付金额</text></view>
|
||||
<view class="th col-paid"><text class="th-txt">是否支付</text></view>
|
||||
@@ -62,102 +51,169 @@
|
||||
</view>
|
||||
|
||||
<view class="table-body">
|
||||
<view class="table-row" v-for="item in tableData" :key="item.id">
|
||||
<view class="td col-id"><text class="td-txt">{{ item.id }}</text></view>
|
||||
<view class="td col-avatar">
|
||||
<view class="avatar-box">
|
||||
<text class="avatar-placeholder" v-if="!item.hasAvatar">🖼️</text>
|
||||
<view class="avatar-img-mock" v-else></view>
|
||||
<view v-if="loading" class="table-loading" style="padding: 40px; text-align: center;">
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
<view v-else-if="tableData.length === 0" class="table-empty" style="padding: 40px; text-align: center;">
|
||||
<text>暂无充值记录</text>
|
||||
</view>
|
||||
<view v-else class="table-row" v-for="(item, index) in tableData" :key="item.id">
|
||||
<view class="td col-id"><text class="td-txt">{{ (page - 1) * pageSize + index + 1 }}</text></view>
|
||||
<view class="td col-nickname">
|
||||
<view class="u-info-box">
|
||||
<text class="u-name">{{ item.user_name || '未知' }}</text>
|
||||
<text class="u-email">{{ item.user_email || '-' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="td col-nickname"><text class="td-txt">{{ item.nickname }}</text></view>
|
||||
<view class="td col-orderno"><text class="td-txt">{{ item.orderNo }}</text></view>
|
||||
<view class="td col-amount"><text class="td-txt">{{ item.amount }}</text></view>
|
||||
<view class="td col-paid"><text class="td-txt">{{ item.isPaid }}</text></view>
|
||||
<view class="td col-type"><text class="td-txt">{{ item.type }}</text></view>
|
||||
<view class="td col-time"><text class="td-txt">{{ item.time }}</text></view>
|
||||
<view class="td col-orderno"><text class="td-txt">{{ item.order_no }}</text></view>
|
||||
<view class="td col-amount">
|
||||
<view class="amount-box">
|
||||
<text class="price">¥{{ item.price.toFixed(2) }}</text>
|
||||
<text class="give" v-if="item.give_price > 0">赠:¥{{ item.give_price.toFixed(2) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="td col-paid">
|
||||
<text class="status-tag" :class="item.paid == 1 ? 'paid' : 'unpaid'">
|
||||
{{ item.paid == 1 ? '已支付' : '未支付' }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="td col-type"><text class="td-txt">{{ getRechargeTypeText(item.recharge_type) }}</text></view>
|
||||
<view class="td col-time"><text class="td-txt">{{ item.pay_time ? item.pay_time.substring(0, 16).replace('T', ' ') : '-' }}</text></view>
|
||||
<view class="td col-ops">
|
||||
<text class="op-link">删除</text>
|
||||
<text class="op-link">详情</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分页区域 -->
|
||||
<view class="pagination-footer">
|
||||
<view class="page-total">
|
||||
<text class="total-txt">共 {{ total }} 条</text>
|
||||
</view>
|
||||
<view class="page-btns">
|
||||
<view class="p-btn" :class="{ disabled: page <= 1 }" @click="prevPage">
|
||||
<text><</text>
|
||||
</view>
|
||||
<view class="p-btn active">
|
||||
<text>{{ page }}</text>
|
||||
</view>
|
||||
<view class="p-btn" :class="{ disabled: page >= totalPages }" @click="nextPage">
|
||||
<text>></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="page-jump">
|
||||
<text class="jump-txt">前往</text>
|
||||
<input class="jump-input" v-model="jumpPage" type="number" @confirm="goToJumpPage" />
|
||||
<text class="jump-txt">页</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { fetchRechargeList, fetchFinanceOverview } from '@/services/admin/financeService.uts'
|
||||
|
||||
const stats = ref([
|
||||
{ label: '充值总金额', value: '446747490.72', icon: '¥', colorClass: 'blue' },
|
||||
{ label: '充值退款金额', value: '1.19', icon: '¥', colorClass: 'orange' },
|
||||
{ label: '支付宝充值金额', value: '78812.24', icon: '支', colorClass: 'green' },
|
||||
{ label: '微信充值金额', value: '8518075.11', icon: '✔', colorClass: 'pink' }
|
||||
const paidValue = ref<string>('all')
|
||||
const searchKeyword = ref('')
|
||||
const page = ref(1)
|
||||
const pageSize = ref(15)
|
||||
const total = ref(0)
|
||||
const loading = ref(false)
|
||||
const jumpPage = ref('')
|
||||
|
||||
const paidOptions = [
|
||||
{ value: 'all', text: '全部状态' },
|
||||
{ value: '1', text: '已支付' },
|
||||
{ value: '0', text: '未支付' }
|
||||
]
|
||||
|
||||
const statsItems = ref([
|
||||
{ label: '充值总金额', value: '0.00', icon: '¥', colorClass: 'blue' },
|
||||
{ label: '充值退款金额', value: '0.00', icon: '¥', colorClass: 'orange' },
|
||||
{ label: '本月充值金额', value: '0.00', icon: '月', colorClass: 'green' },
|
||||
{ label: '今日充值金额', value: '0.00', icon: '今', colorClass: 'pink' }
|
||||
])
|
||||
|
||||
interface RechargeRecord {
|
||||
id: number
|
||||
hasAvatar: boolean
|
||||
nickname: string
|
||||
orderNo: string
|
||||
amount: string
|
||||
isPaid: string
|
||||
type: string
|
||||
time: string
|
||||
const tableData = ref<any[]>([])
|
||||
|
||||
const totalPages = computed(() : number => {
|
||||
if (pageSize.value <= 0) return 1
|
||||
return Math.ceil(total.value / pageSize.value)
|
||||
})
|
||||
|
||||
async function loadStats() {
|
||||
const endTime = new Date().toISOString()
|
||||
const startTime = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString()
|
||||
const res = await fetchFinanceOverview(startTime, endTime)
|
||||
if (res != null) {
|
||||
statsItems.value[0].value = res.recharge_amount.toFixed(2)
|
||||
}
|
||||
}
|
||||
|
||||
const tableData = ref<RechargeRecord[]>([
|
||||
{
|
||||
id: 4522,
|
||||
hasAvatar: true,
|
||||
nickname: 'TTA NW',
|
||||
orderNo: 'cz540603403592531968',
|
||||
amount: '10.00',
|
||||
isPaid: '未支付',
|
||||
type: '微信充值',
|
||||
time: '暂无'
|
||||
},
|
||||
{
|
||||
id: 4521,
|
||||
hasAvatar: true,
|
||||
nickname: 'TTA NW',
|
||||
orderNo: 'cz540592008763277312',
|
||||
amount: '3343.00',
|
||||
isPaid: '未支付',
|
||||
type: '微信充值',
|
||||
time: '暂无'
|
||||
},
|
||||
{
|
||||
id: 4520,
|
||||
hasAvatar: true,
|
||||
nickname: '绯',
|
||||
orderNo: 'cz538561368400330752',
|
||||
amount: '500.00',
|
||||
isPaid: '未支付',
|
||||
type: '支付宝充值',
|
||||
time: '暂无'
|
||||
},
|
||||
{
|
||||
id: 4519,
|
||||
hasAvatar: false,
|
||||
nickname: '六六狗',
|
||||
orderNo: 'cz538368229429477376',
|
||||
amount: '50.00',
|
||||
isPaid: '未支付',
|
||||
type: '微信充值',
|
||||
time: '暂无'
|
||||
},
|
||||
{
|
||||
id: 4518,
|
||||
hasAvatar: false,
|
||||
nickname: 'aabbc',
|
||||
orderNo: 'cz538165303901683712',
|
||||
amount: '10.00',
|
||||
isPaid: '未支付',
|
||||
type: '其他充值',
|
||||
time: '暂无'
|
||||
async function loadList() {
|
||||
loading.value = true
|
||||
try {
|
||||
const paid = paidValue.value == 'all' ? null : parseInt(paidValue.value)
|
||||
const res = await fetchRechargeList(
|
||||
page.value,
|
||||
pageSize.value,
|
||||
paid,
|
||||
null,
|
||||
null,
|
||||
searchKeyword.value || null
|
||||
)
|
||||
tableData.value = res.items
|
||||
total.value = res.total
|
||||
} catch (e) {
|
||||
uni.showToast({ title: '加载充值记录失败', icon: 'none' })
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadStats()
|
||||
loadList()
|
||||
})
|
||||
|
||||
const handleQuery = () => {
|
||||
page.value = 1
|
||||
loadList()
|
||||
}
|
||||
|
||||
const prevPage = () => {
|
||||
if (page.value > 1) {
|
||||
page.value--
|
||||
loadList()
|
||||
}
|
||||
}
|
||||
|
||||
const nextPage = () => {
|
||||
if (page.value < totalPages.value) {
|
||||
page.value++
|
||||
loadList()
|
||||
}
|
||||
}
|
||||
|
||||
const goToJumpPage = () => {
|
||||
const targetPage = parseInt(jumpPage.value)
|
||||
if (!isNaN(targetPage) && targetPage >= 1 && targetPage <= totalPages.value) {
|
||||
page.value = targetPage
|
||||
loadList()
|
||||
jumpPage.value = ''
|
||||
} else {
|
||||
uni.showToast({ title: '页码无效', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
function getRechargeTypeText(type : string | null) : string {
|
||||
if (type == 'wechat') return '微信充值'
|
||||
if (type == 'alipay') return '支付宝充值'
|
||||
if (type == 'system') return '后台补单'
|
||||
return type || '其他充值'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -199,47 +255,8 @@ const tableData = ref<RechargeRecord[]>([
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.date-picker-wrap {
|
||||
width: 220px;
|
||||
height: 32px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.calendar-icon {
|
||||
font-size: 12px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.date-placeholder {
|
||||
font-size: 13px;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
.select-box {
|
||||
width: 160px;
|
||||
height: 32px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.select-txt {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.arrow-down {
|
||||
font-size: 8px;
|
||||
color: #c0c4cc;
|
||||
.data-select {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.search-wrap {
|
||||
@@ -264,6 +281,7 @@ const tableData = ref<RechargeRecord[]>([
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-txt {
|
||||
@@ -336,6 +354,7 @@ const tableData = ref<RechargeRecord[]>([
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-export-txt {
|
||||
@@ -373,6 +392,7 @@ const tableData = ref<RechargeRecord[]>([
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.td {
|
||||
@@ -387,39 +407,71 @@ const tableData = ref<RechargeRecord[]>([
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.col-id { width: 80px; }
|
||||
.col-avatar { width: 80px; }
|
||||
.col-nickname { width: 150px; }
|
||||
.u-info-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
.u-name { font-size: 13px; color: #303133; font-weight: 500; }
|
||||
.u-email { font-size: 11px; color: #909399; }
|
||||
}
|
||||
|
||||
.amount-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.price { font-size: 14px; color: #303133; font-weight: bold; }
|
||||
.give { font-size: 11px; color: #f56c6c; }
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 2px;
|
||||
&.paid { background-color: #f6ffed; color: #52c41a; border: 1px solid #b7eb8f; }
|
||||
&.unpaid { background-color: #fff1f0; color: #ff4d4f; border: 1px solid #ffa39e; }
|
||||
}
|
||||
|
||||
.col-id { width: 60px; }
|
||||
.col-nickname { width: 180px; justify-content: flex-start; }
|
||||
.col-orderno { width: 220px; }
|
||||
.col-amount { width: 120px; }
|
||||
.col-paid { width: 120px; }
|
||||
.col-type { width: 150px; }
|
||||
.col-time { width: 150px; }
|
||||
.col-paid { width: 100px; }
|
||||
.col-type { width: 120px; }
|
||||
.col-time { width: 160px; }
|
||||
.col-ops { flex: 1; min-width: 100px; }
|
||||
|
||||
.avatar-box {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #f0f2f5;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar-img-mock {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.op-link {
|
||||
font-size: 13px;
|
||||
color: #1890ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 分页 */
|
||||
.pagination-footer {
|
||||
padding: 24px 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
.total-txt { font-size: 14px; color: #606266; }
|
||||
.page-btns { display: flex; flex-direction: row; gap: 8px; }
|
||||
.p-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.p-btn.active { background-color: #2d8cf0; border-color: #2d8cf0; color: #fff; }
|
||||
.p-btn.disabled { color: #c0c4cc; background-color: #f5f7fa; cursor: not-allowed; }
|
||||
|
||||
.page-jump { display: flex; flex-direction: row; align-items: center; gap: 8px; }
|
||||
.jump-txt { font-size: 14px; color: #606266; }
|
||||
.jump-input { width: 40px; height: 32px; border: 1px solid #dcdfe6; text-align: center; border-radius: 4px; font-size: 14px; }
|
||||
</style>
|
||||
|
||||
@@ -8,16 +8,16 @@
|
||||
:key="index"
|
||||
class="date-tab-item"
|
||||
:class="{ active: activeDateTab === index }"
|
||||
@click="activeDateTab = index"
|
||||
@click="handleDateTabChange(index)"
|
||||
>{{ item }}</text>
|
||||
</view>
|
||||
<view class="date-picker-wrap">
|
||||
<text class="calendar-icon">D</text>
|
||||
<text class="date-range-text">2026-02-03 - 2026-02-03</text>
|
||||
<text class="date-range-text">{{ displayDateRange }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 交易概况区块 (CRMEB 1:1 复刻) -->
|
||||
<!-- 交易概况区块 -->
|
||||
<view class="overview-card">
|
||||
<view class="overview-header">
|
||||
<view class="header-left">
|
||||
@@ -25,11 +25,8 @@
|
||||
<text class="info-tag">?</text>
|
||||
</view>
|
||||
<view class="header-right">
|
||||
<view class="date-picker-inline">
|
||||
<text class="date-text">2026/01/05 - 2026/02/03</text>
|
||||
</view>
|
||||
<button class="btn-query">查询</button>
|
||||
<button class="btn-export">导出</button>
|
||||
<button class="btn-query" @click="loadData">刷新数据</button>
|
||||
<button class="btn-export">导出报表</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -41,10 +38,10 @@
|
||||
<view class="icon-box blue"><text class="icon">🕒</text></view>
|
||||
<view class="item-info">
|
||||
<text class="item-label">营业额</text>
|
||||
<text class="item-value">{{ stats.revenue }}</text>
|
||||
<text class="item-value">¥{{ stats.revenue }}</text>
|
||||
<view class="trend-row">
|
||||
<text class="trend-label">环比增长:</text>
|
||||
<text class="trend-value up">44275370% ▲</text>
|
||||
<text class="trend-label">昨日对比:</text>
|
||||
<text class="trend-value">{{ stats.revenueTrend }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -52,10 +49,10 @@
|
||||
<view class="icon-box green"><text class="icon">¥</text></view>
|
||||
<view class="item-info">
|
||||
<text class="item-label">商品支付金额</text>
|
||||
<text class="item-value">{{ stats.payAmount }}</text>
|
||||
<text class="item-value">¥{{ stats.payAmount }}</text>
|
||||
<view class="trend-row">
|
||||
<text class="trend-label">环比增长:</text>
|
||||
<text class="trend-value up">43469352% ▲</text>
|
||||
<text class="trend-label">交易笔数:</text>
|
||||
<text class="trend-value">{{ stats.orderCount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -63,10 +60,10 @@
|
||||
<view class="icon-box orange"><text class="icon">🔒</text></view>
|
||||
<view class="item-info">
|
||||
<text class="item-label">购买会员金额</text>
|
||||
<text class="item-value">{{ stats.memberAmount }}</text>
|
||||
<text class="item-value">¥{{ stats.memberAmount }}</text>
|
||||
<view class="trend-row">
|
||||
<text class="trend-label">环比增长:</text>
|
||||
<text class="trend-value up">805918% ▲</text>
|
||||
<text class="trend-label">占比:</text>
|
||||
<text class="trend-value">-</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -74,10 +71,10 @@
|
||||
<view class="icon-box purple"><text class="icon">💰</text></view>
|
||||
<view class="item-info">
|
||||
<text class="item-label">充值金额</text>
|
||||
<text class="item-value">{{ stats.rechargeAmount }}</text>
|
||||
<text class="item-value">¥{{ stats.rechargeAmount }}</text>
|
||||
<view class="trend-row">
|
||||
<text class="trend-label">环比增长:</text>
|
||||
<text class="trend-value">0% -</text>
|
||||
<text class="trend-label">笔数:</text>
|
||||
<text class="trend-value">{{ stats.rechargeCount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -85,10 +82,10 @@
|
||||
<view class="icon-box cyan"><text class="icon">🛒</text></view>
|
||||
<view class="item-info">
|
||||
<text class="item-label">线下收银金额</text>
|
||||
<text class="item-value">{{ stats.offlineAmount }}</text>
|
||||
<text class="item-value">¥{{ stats.offlineAmount }}</text>
|
||||
<view class="trend-row">
|
||||
<text class="trend-label">环比增长:</text>
|
||||
<text class="trend-value up">100% ▲</text>
|
||||
<text class="trend-label">占比:</text>
|
||||
<text class="trend-value">-</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -99,33 +96,33 @@
|
||||
<view class="overview-item">
|
||||
<view class="icon-box light-green"><text class="icon">↘</text></view>
|
||||
<view class="item-info">
|
||||
<text class="item-label">支出金额</text>
|
||||
<text class="item-value">{{ stats.expenditure }}</text>
|
||||
<text class="item-label">支出金额 (提现)</text>
|
||||
<text class="item-value">¥{{ stats.expenditure }}</text>
|
||||
<view class="trend-row">
|
||||
<text class="trend-label">环比增长:</text>
|
||||
<text class="trend-value up">44275269% ▲</text>
|
||||
<text class="trend-label">笔数:</text>
|
||||
<text class="trend-value">{{ stats.extractCount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="overview-item">
|
||||
<view class="icon-box gold"><text class="icon">💳</text></view>
|
||||
<view class="item-info">
|
||||
<text class="item-label">余额支付金额</text>
|
||||
<text class="item-value">{{ stats.balancePay }}</text>
|
||||
<text class="item-label">全站余额存量</text>
|
||||
<text class="item-value">¥{{ stats.balancePay }}</text>
|
||||
<view class="trend-row">
|
||||
<text class="trend-label">环比增长:</text>
|
||||
<text class="trend-value up">5293.00% ▲</text>
|
||||
<text class="trend-label">用户总数:</text>
|
||||
<text class="trend-value">-</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="overview-item">
|
||||
<view class="icon-box red-purple"><text class="icon">％</text></view>
|
||||
<view class="item-info">
|
||||
<text class="item-label">支付佣金金额</text>
|
||||
<text class="item-value">{{ stats.commissionPay }}</text>
|
||||
<text class="item-label">佣金总存量</text>
|
||||
<text class="item-value">¥{{ stats.commissionPay }}</text>
|
||||
<view class="trend-row">
|
||||
<text class="trend-label">环比增长:</text>
|
||||
<text class="trend-value">0% -</text>
|
||||
<text class="trend-label">待结算:</text>
|
||||
<text class="trend-value">-</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -133,147 +130,22 @@
|
||||
<view class="icon-box blue-gray"><text class="icon">📦</text></view>
|
||||
<view class="item-info">
|
||||
<text class="item-label">商品退款金额</text>
|
||||
<text class="item-value">{{ stats.refundAmount }}</text>
|
||||
<text class="item-value">¥{{ stats.refundAmount }}</text>
|
||||
<view class="trend-row">
|
||||
<text class="trend-label">环比增长:</text>
|
||||
<text class="trend-value">0% -</text>
|
||||
<text class="trend-label">退款率:</text>
|
||||
<text class="trend-value">-</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 占位使其对齐 -->
|
||||
<view class="overview-item transparent"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 概况图表区 -->
|
||||
<view class="overview-chart-section">
|
||||
<view class="overview-chart-legend">
|
||||
<view class="legend-dot blue"><text class="legend-text">营业额</text></view>
|
||||
<view class="legend-dot green"><text class="legend-text">商品支付金额</text></view>
|
||||
<view class="legend-dot gray-blue"><text class="legend-text">购买会员金额</text></view>
|
||||
<view class="legend-dot red"><text class="legend-text">充值金额</text></view>
|
||||
<view class="legend-dot orange"><text class="legend-text">支出金额</text></view>
|
||||
</view>
|
||||
<view class="overview-chart-box">
|
||||
<EChartsView v-if="overviewTrendOption != null" :option="overviewTrendOption" class="main-trend-chart" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 之前的统计卡片区域 -->
|
||||
<view class="stats-section">
|
||||
<!-- 左侧：今日订单金额 -->
|
||||
<view class="stats-card-main">
|
||||
<view class="card-header">
|
||||
<text class="card-title">今日订单金额</text>
|
||||
</view>
|
||||
<view class="card-content">
|
||||
<view class="amount-wrap">
|
||||
<text class="currency">¥</text>
|
||||
<text class="amount-value">0</text>
|
||||
</view>
|
||||
<view class="chart-legend">
|
||||
<view class="legend-item">
|
||||
<view class="dot blue"></view>
|
||||
<text>今天</text>
|
||||
</view>
|
||||
<view class="legend-item">
|
||||
<view class="dot gray"></view>
|
||||
<text>昨天</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="chart-box">
|
||||
<EChartsView v-if="orderAmountOption != null" :option="orderAmountOption" class="stats-chart" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 侧边统计网格 -->
|
||||
<view class="stats-side-grid">
|
||||
<view class="side-column">
|
||||
<!-- 今日订单数 -->
|
||||
<view class="side-stat-card">
|
||||
<view class="card-header">
|
||||
<text class="card-title">今日订单数</text>
|
||||
</view>
|
||||
<view class="card-body">
|
||||
<text class="main-val">0</text>
|
||||
<view class="compare-row">
|
||||
<text class="label">昨日:</text>
|
||||
<text class="val">4</text>
|
||||
</view>
|
||||
<view class="compare-row">
|
||||
<text class="label">日环比:</text>
|
||||
<text class="val down">-100% ▼</text>
|
||||
</view>
|
||||
<view class="mini-chart-placeholder">
|
||||
<view class="blue-line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 本月订单数 -->
|
||||
<view class="side-stat-card">
|
||||
<view class="card-header">
|
||||
<text class="card-title">本月订单数</text>
|
||||
</view>
|
||||
<view class="card-body">
|
||||
<text class="main-val">12</text>
|
||||
<view class="compare-row">
|
||||
<text class="label">上月:</text>
|
||||
<text class="val">206</text>
|
||||
</view>
|
||||
<view class="compare-row">
|
||||
<text class="label">月环比:</text>
|
||||
<text class="val down">-94% ▼</text>
|
||||
</view>
|
||||
<view class="mini-chart-placeholder">
|
||||
<view class="blue-line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="side-column">
|
||||
<!-- 今日支付人数 -->
|
||||
<view class="side-stat-card">
|
||||
<view class="card-header">
|
||||
<text class="card-title">今日支付人数</text>
|
||||
</view>
|
||||
<view class="card-body">
|
||||
<text class="main-val">0</text>
|
||||
<view class="compare-row">
|
||||
<text class="label">昨日:</text>
|
||||
<text class="val">4</text>
|
||||
</view>
|
||||
<view class="compare-row">
|
||||
<text class="label">日环比:</text>
|
||||
<text class="val down">-100% ▼</text>
|
||||
</view>
|
||||
<view class="mini-chart-placeholder">
|
||||
<view class="blue-line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 本月支付人数 -->
|
||||
<view class="side-stat-card">
|
||||
<view class="card-header">
|
||||
<text class="card-title">本月支付人数</text>
|
||||
</view>
|
||||
<view class="card-body">
|
||||
<text class="main-val">7</text>
|
||||
<view class="compare-row">
|
||||
<text class="label">上月:</text>
|
||||
<text class="val">134</text>
|
||||
</view>
|
||||
<view class="compare-row">
|
||||
<text class="label">月环比:</text>
|
||||
<text class="val down">-94% ▼</text>
|
||||
</view>
|
||||
<view class="mini-chart-placeholder">
|
||||
<view class="blue-line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="loading" class="chart-loading"><text>统计加载中...</text></view>
|
||||
<EChartsView v-else-if="overviewTrendOption != null" :option="overviewTrendOption" class="main-trend-chart" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -281,142 +153,129 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref, onMounted, reactive } from 'vue'
|
||||
import { ref, onMounted, reactive, computed } from 'vue'
|
||||
import EChartsView from '@/uni_modules/charts/EChartsView.vue'
|
||||
import { fetchFinanceOverview } from '@/services/admin/financeService.uts'
|
||||
import { rpcOrNull } from '@/services/analytics/rpc.uts'
|
||||
import { fetchFinanceOverview, fetchFinanceBillSummary } from '@/services/admin/financeService.uts'
|
||||
import { fetchOrderStats } from '@/services/orderService.uts'
|
||||
|
||||
const dateOptions = ['今天', '昨天', '最近7天', '最近30天', '本月', '本年']
|
||||
const dateOptions = ['最近30天', '最近7天', '本月', '本年']
|
||||
const activeDateTab = ref(0)
|
||||
const loading = ref(false)
|
||||
|
||||
// 响应式统计数据
|
||||
const stats = reactive({
|
||||
revenue: '0.00', // 营业额
|
||||
payAmount: '0.00', // 商品支付金额
|
||||
memberAmount: '0.00', // 购买会员金额
|
||||
rechargeAmount: '0.00', // 充值金额
|
||||
offlineAmount: '0.00', // 线下收银金额
|
||||
expenditure: '0.00', // 支出金额
|
||||
balancePay: '0.00', // 余额支付金额
|
||||
commissionPay: '0.00', // 支付佣金金额
|
||||
refundAmount: '0.00', // 商品退款金额
|
||||
|
||||
// 环比数据 (示例暂留)
|
||||
revenueTrend: '0%',
|
||||
rechargeTrend: '0%'
|
||||
revenue: '0.00',
|
||||
payAmount: '0.00',
|
||||
orderCount: '0',
|
||||
memberAmount: '0.00',
|
||||
rechargeAmount: '0.00',
|
||||
rechargeCount: '0',
|
||||
offlineAmount: '0.00',
|
||||
expenditure: '0.00',
|
||||
extractCount: '0',
|
||||
balancePay: '0.00',
|
||||
commissionPay: '0.00',
|
||||
refundAmount: '0.00',
|
||||
revenueTrend: '-'
|
||||
})
|
||||
|
||||
const orderAmountOption = ref<any>(null)
|
||||
const overviewTrendOption = ref<any>(null)
|
||||
|
||||
/**
|
||||
* 加载统计数据
|
||||
*/
|
||||
const displayDateRange = computed(() : string => {
|
||||
const now = new Date()
|
||||
const start = getStartTime()
|
||||
return `${start.substring(0, 10)} - ${now.toISOString().substring(0, 10)}`
|
||||
})
|
||||
|
||||
function getStartTime() : string {
|
||||
const now = Date.now()
|
||||
let days = 30
|
||||
if (activeDateTab.value == 1) days = 7
|
||||
if (activeDateTab.value == 2) days = 30 // 简化处理
|
||||
if (activeDateTab.value == 3) days = 365
|
||||
return new Date(now - days * 24 * 60 * 60 * 1000).toISOString()
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
// TODO: 根据 activeDateTab 计算具体的 startTime 和 endTime
|
||||
const startTime = '2026-01-01T00:00:00Z'
|
||||
const endTime = '2026-12-31T23:59:59Z'
|
||||
loading.value = true
|
||||
const endTime = new Date().toISOString()
|
||||
const startTime = getStartTime()
|
||||
|
||||
try {
|
||||
// 1. 获取财务概况 (充值、提现等)
|
||||
const financeRes = await fetchFinanceOverview(startTime, endTime)
|
||||
if (financeRes != null) {
|
||||
stats.rechargeAmount = financeRes.recharge_amount.toFixed(2)
|
||||
// 支出金额暂以提现成功金额为例
|
||||
stats.expenditure = financeRes.extract_amount.toFixed(2)
|
||||
// 1. 获取财务概况
|
||||
const finRes = await fetchFinanceOverview(startTime, endTime)
|
||||
if (finRes != null) {
|
||||
stats.rechargeAmount = finRes.recharge_amount.toFixed(2)
|
||||
stats.rechargeCount = String(finRes.recharge_count)
|
||||
stats.expenditure = finRes.extract_amount.toFixed(2)
|
||||
stats.extractCount = String(finRes.extract_count)
|
||||
stats.balancePay = finRes.total_user_balance.toFixed(2)
|
||||
stats.commissionPay = finRes.total_user_brokerage.toFixed(2)
|
||||
}
|
||||
|
||||
// 2. 获取订单统计 (营业额、退款等)
|
||||
const orderRes = await rpcOrNull('rpc_admin_order_stats', {
|
||||
p_start_time: startTime,
|
||||
p_end_time: endTime
|
||||
} as UTSJSONObject)
|
||||
|
||||
// 2. 获取订单统计
|
||||
const orderRes = await fetchOrderStats(startTime, endTime)
|
||||
if (orderRes != null) {
|
||||
stats.revenue = ((orderRes as any).total_amount ?? 0).toFixed(2)
|
||||
stats.payAmount = stats.revenue // 简单处理
|
||||
stats.refundAmount = ((orderRes as any).refund_amount ?? 0).toFixed(2)
|
||||
stats.revenue = orderRes.total_amount.toFixed(2)
|
||||
stats.payAmount = orderRes.total_amount.toFixed(2)
|
||||
stats.orderCount = String(orderRes.order_count)
|
||||
stats.refundAmount = orderRes.refund_amount.toFixed(2)
|
||||
}
|
||||
|
||||
// 3. 获取趋势数据驱动图表
|
||||
const trendRes = await fetchFinanceBillSummary(startTime, endTime, 'day')
|
||||
updateChart(trendRes)
|
||||
} catch (e) {
|
||||
console.error('Failed to load transaction stats:', e)
|
||||
uni.showToast({ title: '加载统计失败', icon: 'none' })
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleDateTabChange(index : number) {
|
||||
activeDateTab.value = index
|
||||
loadData()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
// 延迟初始化图表确保容器就位
|
||||
setTimeout(() => {
|
||||
initCharts()
|
||||
}, 300)
|
||||
})
|
||||
|
||||
function initCharts() {
|
||||
// 模拟趋势数据
|
||||
const todayData = [120, 132, 101, 134, 90, 230, 210]
|
||||
const yesterdayData = [220, 182, 191, 234, 290, 330, 310]
|
||||
function toPlainObject(obj: any): any {
|
||||
if (obj == null) return null
|
||||
if (typeof obj !== 'object') return obj
|
||||
if (Array.isArray(obj)) {
|
||||
return obj.map((item: any) : any => toPlainObject(item))
|
||||
}
|
||||
const plain: any = {}
|
||||
const keys = Object.keys(obj)
|
||||
for (let i = 0; i < keys.length; i++) {
|
||||
const key = keys[i]
|
||||
const value = obj[key]
|
||||
if (typeof value === 'function' || key.startsWith('_') || key === 'toJSON') {
|
||||
continue
|
||||
}
|
||||
if (value != null && typeof value === 'object') {
|
||||
plain[key] = toPlainObject(value)
|
||||
} else {
|
||||
plain[key] = value
|
||||
}
|
||||
}
|
||||
return plain
|
||||
}
|
||||
|
||||
function updateChart(data : any[]) {
|
||||
const dates = data.map(item => item.date_group.substring(5))
|
||||
const incomes = data.map(item => item.income)
|
||||
const expenses = data.map(item => item.expense)
|
||||
|
||||
const option = {
|
||||
grid: { left: '3%', right: '4%', bottom: '3%', top: '5%', containLabel: true },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
lineStyle: { color: '#1890ff', type: 'dashed' }
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '23:59'],
|
||||
axisLine: { lineStyle: { color: '#f0f0f0' } },
|
||||
axisLabel: { color: '#999' }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: { show: false },
|
||||
axisLine: { show: false },
|
||||
axisLabel: { color: '#999' }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '今天',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: todayData,
|
||||
lineStyle: { color: '#1890ff', width: 2 },
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0, y: 0, x2: 0, y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(24, 144, 255, 0.2)' },
|
||||
{ offset: 1, color: 'rgba(24, 144, 255, 0)' }
|
||||
]
|
||||
}
|
||||
},
|
||||
itemStyle: { color: '#1890ff' }
|
||||
},
|
||||
{
|
||||
name: '昨天',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: yesterdayData,
|
||||
lineStyle: { color: '#d9d9d9', width: 2, type: 'dashed' },
|
||||
itemStyle: { color: '#d9d9d9' }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
// 核心修复：传递给 ECharts 的 Option 必须是 Plain Object
|
||||
orderAmountOption.value = toPlainObject(option)
|
||||
|
||||
// 初始化交易概况趋势图 (多曲线)
|
||||
const overviewOption = {
|
||||
grid: { left: '3%', right: '4%', bottom: '10%', top: '5%', containLabel: true },
|
||||
tooltip: { trigger: 'axis' },
|
||||
legend: { data: ['收入', '支出'], bottom: 0 },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['2026-01-05', '01-10', '01-15', '01-20', '01-25', '01-31', '02-03'],
|
||||
data: dates,
|
||||
axisLine: { lineStyle: { color: '#f0f0f0' } },
|
||||
axisLabel: { color: '#999', fontSize: 10 }
|
||||
},
|
||||
@@ -428,29 +287,24 @@ function initCharts() {
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '营业额',
|
||||
name: '收入',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: [1000, 5000, 20000, 15000, 80000, 20000, 5000],
|
||||
itemStyle: { color: '#1890ff' }
|
||||
data: incomes,
|
||||
itemStyle: { color: '#1890ff' },
|
||||
areaStyle: { color: 'rgba(24, 144, 255, 0.1)' }
|
||||
},
|
||||
{
|
||||
name: '商品支付金额',
|
||||
name: '支出',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: [800, 4000, 18000, 12000, 75000, 18000, 4000],
|
||||
itemStyle: { color: '#52c41a' }
|
||||
},
|
||||
{
|
||||
name: '支出金额',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: [500, 3000, 15000, 10000, 90000, 15000, 3000],
|
||||
itemStyle: { color: '#fa8c16' }
|
||||
data: expenses,
|
||||
itemStyle: { color: '#fa8c16' },
|
||||
areaStyle: { color: 'rgba(250, 140, 22, 0.1)' }
|
||||
}
|
||||
]
|
||||
}
|
||||
overviewTrendOption.value = toPlainObject(overviewOption)
|
||||
overviewTrendOption.value = toPlainObject(option)
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -461,7 +315,6 @@ function initCharts() {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 头部筛选 */
|
||||
.header-filters {
|
||||
background: #fff;
|
||||
padding: 12px 20px;
|
||||
@@ -487,15 +340,8 @@ function initCharts() {
|
||||
border-right: 1px solid #d9d9d9;
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #1890ff;
|
||||
color: #fff;
|
||||
border-color: #1890ff;
|
||||
}
|
||||
&:last-child { border-right: none; }
|
||||
&.active { background-color: #1890ff; color: #fff; border-color: #1890ff; }
|
||||
}
|
||||
|
||||
.date-picker-wrap {
|
||||
@@ -503,167 +349,17 @@ function initCharts() {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 4px 12px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.calendar-icon {
|
||||
margin-right: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.calendar-icon { margin-right: 8px; font-size: 14px; }
|
||||
.date-range-text { font-size: 14px; color: #333; }
|
||||
|
||||
.date-range-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 统计区域布局 */
|
||||
.stats-section {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.stats-card-main {
|
||||
flex: 3;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
min-height: 380px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.amount-wrap {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.currency {
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.amount-value {
|
||||
font-size: 40px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.chart-legend {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
|
||||
&.blue { background-color: #1890ff; }
|
||||
&.gray { background-color: #d9d9d9; }
|
||||
}
|
||||
|
||||
.chart-box {
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.stats-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 侧边网格 */
|
||||
.stats-side-grid {
|
||||
flex: 2;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.side-column {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.side-stat-card {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.main-val {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.compare-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.compare-row .label {
|
||||
color: #999;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.compare-row .val {
|
||||
color: #333;
|
||||
|
||||
&.down { color: #52c41a; }
|
||||
&.up { color: #f5222d; }
|
||||
}
|
||||
|
||||
.mini-chart-placeholder {
|
||||
margin-top: 20px;
|
||||
height: 2px;
|
||||
background-color: #f0f0f0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.blue-line {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
background-color: #1890ff;
|
||||
}
|
||||
|
||||
/* 交易概况复刻样式 */
|
||||
.overview-card {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.overview-header {
|
||||
@@ -674,72 +370,22 @@ function initCharts() {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.overview-header .header-left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.header-left { display: flex; flex-direction: row; align-items: center; }
|
||||
.section-title { font-size: 16px; font-weight: bold; color: #333; }
|
||||
.info-tag {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: #eee;
|
||||
color: #999;
|
||||
font-size: 11px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.overview-header .header-right {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.date-picker-inline {
|
||||
border: 1px solid #dcdfe6;
|
||||
padding: 5px 15px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.date-text {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
width: 16px; height: 16px; border-radius: 50%;
|
||||
background: #eee; color: #999; font-size: 11px;
|
||||
display: flex; align-items: center; justify-content: center; margin-left: 8px;
|
||||
}
|
||||
|
||||
.header-right { display: flex; flex-direction: row; gap: 12px; }
|
||||
.btn-query, .btn-export {
|
||||
padding: 0 16px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 13px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
padding: 0 16px; height: 32px; line-height: 32px;
|
||||
font-size: 13px; border-radius: 4px; cursor: pointer;
|
||||
}
|
||||
.btn-query { background-color: #1890ff; color: #fff; border: none; }
|
||||
.btn-export { background: #fff; color: #1890ff; border: 1px solid #1890ff; }
|
||||
|
||||
.btn-query {
|
||||
background-color: #1890ff;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-export {
|
||||
background: #fff;
|
||||
color: #1890ff;
|
||||
border: 1px solid #1890ff;
|
||||
}
|
||||
|
||||
/* 指标网格 */
|
||||
.overview-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -748,36 +394,14 @@ function initCharts() {
|
||||
border-bottom: 1px dashed #f0f0f0;
|
||||
}
|
||||
|
||||
.grid-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.overview-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.overview-item.transparent {
|
||||
visibility: hidden;
|
||||
}
|
||||
.grid-row { display: flex; flex-direction: row; justify-content: space-between; }
|
||||
.overview-item { flex: 1; display: flex; flex-direction: row; align-items: center; }
|
||||
.overview-item.transparent { visibility: hidden; }
|
||||
|
||||
.icon-box {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.icon-box .icon {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
width: 44px; height: 44px; border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center; margin-right: 12px;
|
||||
text { color: #fff; font-size: 20px; }
|
||||
}
|
||||
|
||||
.icon-box.blue { background-color: #2f54eb; }
|
||||
@@ -790,74 +414,14 @@ function initCharts() {
|
||||
.icon-box.red-purple { background-color: #eb2f96; }
|
||||
.icon-box.blue-gray { background-color: #4096ff; }
|
||||
|
||||
.item-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.item-info { display: flex; flex-direction: column; }
|
||||
.item-label { font-size: 13px; color: #999; margin-bottom: 4px; }
|
||||
.item-value { font-size: 22px; font-weight: bold; color: #333; margin-bottom: 4px; }
|
||||
.trend-row { display: flex; flex-direction: row; font-size: 12px; color: #999; }
|
||||
.trend-value { margin-left: 4px; }
|
||||
|
||||
.item-label {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.item-value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.trend-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.trend-value.up {
|
||||
color: #f5222d;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/* 图表区 */
|
||||
.overview-chart-section {
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.overview-chart-legend {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.legend-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.legend-dot.blue { background: #1890ff; }
|
||||
.legend-dot.green { background: #52c41a; }
|
||||
.legend-dot.gray-blue { background: #607d8b; }
|
||||
.legend-dot.red { background: #f44336; }
|
||||
.legend-dot.orange { background: #fa8c16; }
|
||||
|
||||
.legend-text {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.overview-chart-box {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.main-trend-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.overview-chart-section { padding-top: 24px; }
|
||||
.overview-chart-box { width: 100%; height: 350px; }
|
||||
.main-trend-chart { width: 100%; height: 100%; }
|
||||
.chart-loading { height: 100%; display: flex; align-items: center; justify-content: center; color: #999; }
|
||||
</style>
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
|
||||
<!-- 统计指标网格 -->
|
||||
<view class="stats-grid">
|
||||
<view class="stat-card" v-for="(item, index) in stats" :key="index">
|
||||
<view class="stat-card" v-for="(item, index) in statsItems" :key="index">
|
||||
<view class="icon-circle" :class="item.colorClass">
|
||||
<text class="stat-icon">{{ item.icon }}</text>
|
||||
</view>
|
||||
@@ -43,73 +43,98 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 数据表格 (使用 Flex 模拟以确保兼容性和精度) -->
|
||||
<!-- 数据表格 -->
|
||||
<view class="table-container">
|
||||
<view class="table-header">
|
||||
<view class="th col-id"><text class="th-txt">ID</text></view>
|
||||
<view class="th col-user"><text class="th-txt">用户信息</text></view>
|
||||
<view class="th col-amount"><text class="th-txt">提现金额</text></view>
|
||||
<view class="th col-fee"><text class="th-txt">提现手续费</text></view>
|
||||
<view class="th col-fee"><text class="th-txt">手续费</text></view>
|
||||
<view class="th col-net"><text class="th-txt">到账金额</text></view>
|
||||
<view class="th col-method"><text class="th-txt">提现方式</text></view>
|
||||
<view class="th col-qr"><text class="th-txt">收款码</text></view>
|
||||
<view class="th col-time"><text class="th-txt">申请时间</text></view>
|
||||
<view class="th col-remark"><text class="th-txt">备注</text></view>
|
||||
<view class="th col-status"><text class="th-txt">审核状态</text></view>
|
||||
<view class="th col-ops"><text class="th-txt">操作</text></view>
|
||||
</view>
|
||||
|
||||
<view class="table-body">
|
||||
<view class="table-row" v-for="(item, index) in tableData" :key="item.id">
|
||||
<view class="td col-id"><text class="td-txt">{{ item.id }}</text></view>
|
||||
<view v-if="loading" class="loading-state" style="padding: 40px; text-align: center;">
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
<view v-else-if="tableData.length === 0" class="empty-state" style="padding: 40px; text-align: center;">
|
||||
<text>暂无提现申请</text>
|
||||
</view>
|
||||
<view v-else class="table-row" v-for="(item, index) in tableData" :key="item.id">
|
||||
<view class="td col-id"><text class="td-txt">{{ (page - 1) * pageSize + index + 1 }}</text></view>
|
||||
<view class="td col-user">
|
||||
<view class="user-info-box">
|
||||
<view class="avatar-box">
|
||||
<text class="avatar-placeholder">U</text>
|
||||
</view>
|
||||
<view class="user-detail">
|
||||
<text class="user-nickname">{{ item.nickname }}</text>
|
||||
<text class="user-id">用户id:{{ item.userId }}</text>
|
||||
<text class="user-nickname">{{ item.user_name || '未知' }}</text>
|
||||
<text class="user-id">UID:{{ item.uid.substring(0, 8) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="td col-amount"><text class="td-txt">{{ item.amount }}</text></view>
|
||||
<view class="td col-fee"><text class="td-txt">{{ item.fee }}</text></view>
|
||||
<view class="td col-net"><text class="td-txt green-txt">{{ item.netAmount }}</text></view>
|
||||
<view class="td col-amount"><text class="td-txt">¥{{ item.extract_price.toFixed(2) }}</text></view>
|
||||
<view class="td col-fee"><text class="td-txt">¥{{ item.service_fee.toFixed(2) }}</text></view>
|
||||
<view class="td col-net"><text class="td-txt green-txt">¥{{ (item.extract_price - item.service_fee).toFixed(2) }}</text></view>
|
||||
<view class="td col-method">
|
||||
<view class="method-box">
|
||||
<text class="m-line">姓名:{{ item.name }}</text>
|
||||
<text class="m-line">{{ item.type }}:{{ item.account }}</text>
|
||||
<text v-if="item.bank" class="m-line">银行开户地址:{{ item.bank }}</text>
|
||||
<text class="m-line">{{ getMethodText(item.extract_type) }}</text>
|
||||
<text class="m-line">账号:{{ item.alipay_code || item.wechat_code || item.bank_code || '-' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="td col-qr">
|
||||
<view class="qr-box" v-if="item.id === 57">
|
||||
<text class="qr-icon-txt">■</text>
|
||||
</view>
|
||||
<view class="td col-time"><text class="td-txt">{{ item.created_at.substring(0, 16).replace('T', ' ') }}</text></view>
|
||||
<view class="td col-status">
|
||||
<text class="td-txt" :class="{ 'red-txt': item.status == -1, 'green-txt': item.status == 1 }">
|
||||
{{ getStatusText(item.status) }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="td col-time"><text class="td-txt">{{ item.time }}</text></view>
|
||||
<view class="td col-remark"><text class="td-txt">{{ item.remark || '' }}</text></view>
|
||||
<view class="td col-status"><text class="td-txt">申请中</text></view>
|
||||
<view class="td col-ops">
|
||||
<view class="ops-box">
|
||||
<text class="op-btn blue">编辑</text>
|
||||
<view class="ops-box" v-if="item.status == 0">
|
||||
<text class="op-btn blue" @click="handleReview(item.id, 1)">通过</text>
|
||||
<text class="op-sep">|</text>
|
||||
<text class="op-btn blue">通过</text>
|
||||
<text class="op-sep">|</text>
|
||||
<text class="op-btn blue">驳回</text>
|
||||
<text class="op-btn blue" @click="handleReview(item.id, -1)">驳回</text>
|
||||
</view>
|
||||
<text v-else class="td-txt">-</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分页区域 -->
|
||||
<view class="pagination-footer" style="padding: 24px 0; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 12px;">
|
||||
<view class="page-total">
|
||||
<text class="total-txt">共 {{ total }} 条</text>
|
||||
</view>
|
||||
<view class="page-btns" style="display: flex; flex-direction: row; gap: 8px;">
|
||||
<view class="p-btn" :class="{ disabled: page <= 1 }" @click="prevPage" style="width: 32px; height: 32px; border: 1px solid #dcdfe6; display: flex; align-items: center; justify-content: center; cursor: pointer;">
|
||||
<text><</text>
|
||||
</view>
|
||||
<view class="p-btn active" style="width: 32px; height: 32px; background-color: #2d8cf0; color: #fff; display: flex; align-items: center; justify-content: center;">
|
||||
<text>{{ page }}</text>
|
||||
</view>
|
||||
<view class="p-btn" :class="{ disabled: page >= totalPages }" @click="nextPage" style="width: 32px; height: 32px; border: 1px solid #dcdfe6; display: flex; align-items: center; justify-content: center; cursor: pointer;">
|
||||
<text>></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="page-jump" style="display: flex; flex-direction: row; align-items: center; gap: 8px;">
|
||||
<text class="jump-txt">前往</text>
|
||||
<input class="jump-input" v-model="jumpPage" type="number" @confirm="goToJumpPage" style="width: 40px; height: 32px; border: 1px solid #dcdfe6; text-align: center;" />
|
||||
<text class="jump-txt">页</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, onMounted, reactive } from 'vue'
|
||||
import { fetchExtractList, fetchFinanceOverview, reviewExtract } from '@/services/admin/financeService.uts'
|
||||
import { ExtractRecord } from '@/types/admin/finance.uts'
|
||||
|
||||
const timeRange = ref([])
|
||||
const timeRange = ref<string[]>([])
|
||||
const statusValue = ref('all')
|
||||
const methodValue = ref('all')
|
||||
const searchKeyword = ref('')
|
||||
@@ -128,45 +153,101 @@ const methodOptions = ref([
|
||||
{ value: 'weixin', text: '微信' }
|
||||
])
|
||||
|
||||
const stats = ref([
|
||||
{ label: '佣金总金额', value: '676809.25', icon: '$', colorClass: 'blue' },
|
||||
{ label: '待提现金额', value: '71', icon: '¥', colorClass: 'orange' },
|
||||
{ label: '已提现金额', value: '68879.25', icon: '$', colorClass: 'green' },
|
||||
{ label: '未提现金额', value: '607930.00', icon: '¥', colorClass: 'pink' }
|
||||
const statsItems = ref([
|
||||
{ label: '佣金总金额', value: '0.00', icon: '¥', colorClass: 'blue' },
|
||||
{ label: '待提现金额', value: '0.00', icon: '¥', colorClass: 'orange' },
|
||||
{ label: '已提现金额', value: '0.00', icon: '¥', colorClass: 'green' },
|
||||
{ label: '未提现金额', value: '0.00', icon: '¥', colorClass: 'pink' }
|
||||
])
|
||||
|
||||
const tableData = ref([
|
||||
{
|
||||
id: 57,
|
||||
nickname: '用户昵称: 177****766',
|
||||
userId: '58837',
|
||||
amount: '20.00',
|
||||
fee: '0.00',
|
||||
netAmount: '20.00',
|
||||
name: '接口',
|
||||
type: '支付宝',
|
||||
account: '1195953899',
|
||||
time: '2025-10-24 16:04',
|
||||
remark: ''
|
||||
},
|
||||
{
|
||||
id: 56,
|
||||
nickname: '用户昵称: 测试员的',
|
||||
userId: '20695',
|
||||
amount: '1.00',
|
||||
fee: '0.00',
|
||||
netAmount: '1.00',
|
||||
name: '123',
|
||||
type: '银行卡',
|
||||
account: '4001231221',
|
||||
bank: '中国银行',
|
||||
time: '2025-07-04 15:11',
|
||||
remark: ''
|
||||
const tableData = ref<ExtractRecord[]>([])
|
||||
const total = ref(0)
|
||||
const page = ref(1)
|
||||
const pageSize = ref(15)
|
||||
const loading = ref(false)
|
||||
|
||||
async function loadStats() {
|
||||
const endTime = new Date().toISOString()
|
||||
const startTime = new Date(Date.now() - 365 * 24 * 60 * 60 * 1000).toISOString()
|
||||
const res = await fetchFinanceOverview(startTime, endTime)
|
||||
if (res != null) {
|
||||
statsItems.value[0].value = res.total_user_brokerage.toFixed(2)
|
||||
statsItems.value[1].value = res.extract_amount.toFixed(2) // 示例逻辑，根据实际汇总调整
|
||||
statsItems.value[2].value = res.extract_amount.toFixed(2)
|
||||
statsItems.value[3].value = (res.total_user_brokerage - res.extract_amount).toFixed(2)
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
async function loadList() {
|
||||
loading.value = true
|
||||
try {
|
||||
const status = statusValue.value == 'all' ? null : parseInt(statusValue.value)
|
||||
let startTime : string | null = null
|
||||
let endTime : string | null = null
|
||||
if (timeRange.value.length == 2) {
|
||||
startTime = timeRange.value[0]
|
||||
endTime = timeRange.value[1]
|
||||
}
|
||||
|
||||
const res = await fetchExtractList(
|
||||
page.value,
|
||||
pageSize.value,
|
||||
status,
|
||||
startTime,
|
||||
endTime,
|
||||
searchKeyword.value || null
|
||||
)
|
||||
tableData.value = res.items
|
||||
total.value = res.total
|
||||
} catch (e) {
|
||||
uni.showToast({ title: '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadStats()
|
||||
loadList()
|
||||
})
|
||||
|
||||
const handleQuery = () => {
|
||||
console.log('Query with:', statusValue.value, methodValue.value, searchKeyword.value)
|
||||
page.value = 1
|
||||
loadList()
|
||||
}
|
||||
|
||||
async function handleReview(id : string, status : number) {
|
||||
const action = status == 1 ? '通过' : '驳回'
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: `确认要${action}该提现申请吗？`,
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
const ok = await reviewExtract(id, status)
|
||||
if (ok) {
|
||||
uni.showToast({ title: '操作成功' })
|
||||
loadList()
|
||||
loadStats()
|
||||
} else {
|
||||
uni.showToast({ title: '操作失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function getStatusText(status : number) : string {
|
||||
if (status == 0) return '待审核'
|
||||
if (status == 1) return '已通过'
|
||||
if (status == -1) return '已驳回'
|
||||
return '未知'
|
||||
}
|
||||
|
||||
function getMethodText(type : string) : string {
|
||||
if (type == 'alipay') return '支付宝'
|
||||
if (type == 'bank') return '银行卡'
|
||||
if (type == 'wechat') return '微信'
|
||||
return type
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<view class="search-row">
|
||||
<view class="search-item">
|
||||
<text class="label">商品搜索：</text>
|
||||
<input class="mock-input" placeholder="请输入商品名称/关键字/ID" />
|
||||
<input class="mock-input" placeholder="请输入商品名称/关键字/ID" v-model="searchName" @confirm="handleSearch" />
|
||||
</view>
|
||||
<view class="search-item">
|
||||
<text class="label">商品类型：</text>
|
||||
@@ -16,14 +16,19 @@
|
||||
</view>
|
||||
<view class="search-item">
|
||||
<text class="label">商品分类：</text>
|
||||
<view class="mock-select">
|
||||
<text>请选择</text>
|
||||
<text class="arrow">▼</text>
|
||||
</view>
|
||||
<picker :value="categoryIndex" :range="categoryOptions" range-key="label" @change="e => {
|
||||
categoryIndex = e.detail.value;
|
||||
selectedCategoryId = categoryOptions[categoryIndex].value;
|
||||
}">
|
||||
<view class="mock-select">
|
||||
<text>{{ categoryOptions[categoryIndex].label }}</text>
|
||||
<text class="arrow">▼</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="search-btns">
|
||||
<button class="btn-primary">查询</button>
|
||||
<button class="btn-reset">重置</button>
|
||||
<button class="btn-primary" @click="handleSearch">查询</button>
|
||||
<button class="btn-reset" @click="handleReset">重置</button>
|
||||
<view class="expand-control">
|
||||
<text class="expand-txt">展开</text>
|
||||
<text class="expand-arrow">▼</text>
|
||||
@@ -49,7 +54,7 @@
|
||||
:key="index"
|
||||
class="tab-item"
|
||||
:class="{ active: activeStatus === tab.key }"
|
||||
@click="activeStatus = tab.key"
|
||||
@click="changeStatus(tab.key)"
|
||||
>
|
||||
<text>{{ tab.label }}({{ tab.count }})</text>
|
||||
</view>
|
||||
@@ -115,7 +120,7 @@
|
||||
<view class="td col-stock"><text>{{ item.stock }}</text></view>
|
||||
<view class="td col-sort"><text>{{ item.sort }}</text></view>
|
||||
<view class="td col-status">
|
||||
<view class="mock-switch" :class="{ on: item.status === 1 }">
|
||||
<view class="mock-switch" :class="{ on: item.status === 1 }" @click="toggleStatus(item)">
|
||||
<text class="switch-txt">{{ item.status === 1 ? '上架' : '下架' }}</text>
|
||||
<view class="switch-dot"></view>
|
||||
</view>
|
||||
@@ -137,7 +142,7 @@
|
||||
<text class="menu-item" @click.stop="goReviews(item.id)">查看评论</text>
|
||||
<text class="menu-item" @click.stop="goMemberPrice(item.id)">会员价管理</text>
|
||||
<text class="menu-item" @click.stop="uni.showToast({title:'佣金管理开发中', icon:'none'})">佣金管理</text>
|
||||
<text class="menu-item danger-item" @click.stop="moveToRecycle(item.id)">{{ activeStatus === 'recycle' ? '恢复商品' : '移到回收站' }}</text>
|
||||
<text class="menu-item danger-item" @click.stop="moveToRecycle(item)">{{ activeStatus === 4 ? '恢复商品' : '移到回收站' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -149,10 +154,9 @@
|
||||
<view class="pagination-row">
|
||||
<text class="total">共 {{ total }} 条</text>
|
||||
<view class="page-ctrl">
|
||||
<text class="page-btn disabled">{"<"}</text>
|
||||
<text class="page-num active">1</text>
|
||||
<text class="page-num">2</text>
|
||||
<text class="page-btn">{">"}</text>
|
||||
<text class="page-btn" :class="{ disabled: page <= 1 }" @click="page > 1 && (page--, loadData())">{"<"}</text>
|
||||
<text class="page-num active">{{ page }}</text>
|
||||
<text class="page-btn" :class="{ disabled: productList.length < pageSize }" @click="productList.length == pageSize && (page++, loadData())">{">"}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -162,15 +166,21 @@
|
||||
<script setup lang="uts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { openRoute } from '@/layouts/admin/store/adminNavStore.uts'
|
||||
import { fetchAdminProductPage, updateAdminProductStatus, type AdminProduct } from '@/services/admin/productService.uts'
|
||||
import { fetchAdminProductPage, updateAdminProductStatus, fetchAdminProductCountStats, type AdminProduct } from '@/services/admin/productService.uts'
|
||||
import { fetchAdminCategoryList, type AdminCategory } from '@/services/admin/productCategoryService.uts'
|
||||
|
||||
const total = ref(0)
|
||||
const page = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const activeStatus = ref<number | null>(1) // 1:出售中
|
||||
const activeStatus = ref<number>(1) // 1:出售中
|
||||
const activeDropdownId = ref<string | null>(null)
|
||||
const productList = ref<Array<AdminProduct>>([])
|
||||
const searchName = ref('')
|
||||
const selectedCategoryId = ref<string | null>(null)
|
||||
const categoryOptions = ref<Array<{label: string, value: string | null}>>([
|
||||
{ label: '全部', value: null }
|
||||
])
|
||||
const categoryIndex = ref(0)
|
||||
|
||||
const statusTabs = ref([
|
||||
{ key: 1, label: '出售中的商品', count: 0 },
|
||||
@@ -180,13 +190,40 @@ const statusTabs = ref([
|
||||
])
|
||||
|
||||
onMounted(() => {
|
||||
loadCounts()
|
||||
loadCategories()
|
||||
loadData()
|
||||
})
|
||||
|
||||
async function loadCategories() {
|
||||
try {
|
||||
const categories = await fetchAdminCategoryList({ isActive: true })
|
||||
categories.forEach(item => {
|
||||
categoryOptions.value.push({
|
||||
label: item.name,
|
||||
value: item.id
|
||||
})
|
||||
})
|
||||
} catch (e) {
|
||||
console.error('加载分类失败:', e)
|
||||
}
|
||||
}
|
||||
|
||||
async function loadCounts() {
|
||||
const stats = await fetchAdminProductCountStats()
|
||||
if (stats != null) {
|
||||
statusTabs.value[0].count = parseInt(String(stats['selling'] ?? '0'))
|
||||
statusTabs.value[1].count = parseInt(String(stats['warehouse'] ?? '0'))
|
||||
statusTabs.value[2].count = parseInt(String(stats['draft'] ?? '0'))
|
||||
statusTabs.value[3].count = parseInt(String(stats['recycle'] ?? '0'))
|
||||
}
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
const res = await fetchAdminProductPage(page.value, pageSize.value, {
|
||||
name: searchName.value,
|
||||
status: activeStatus.value ?? undefined
|
||||
status: activeStatus.value,
|
||||
categoryId: selectedCategoryId.value ?? undefined
|
||||
})
|
||||
productList.value = res.items
|
||||
total.value = res.total
|
||||
@@ -195,43 +232,15 @@ async function loadData() {
|
||||
function handleSearch() {
|
||||
page.value = 1
|
||||
loadData()
|
||||
loadCounts()
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
searchName.value = ''
|
||||
selectedCategoryId.value = null
|
||||
page.value = 1
|
||||
loadData()
|
||||
}
|
||||
|
||||
async function toggleStatus(item: AdminProduct) {
|
||||
const newStatus = item.status === 1 ? 2 : 1
|
||||
const ok = await updateAdminProductStatus(item.id, newStatus)
|
||||
if (ok) {
|
||||
uni.showToast({ title: '操作成功', icon: 'success' })
|
||||
loadData()
|
||||
} else {
|
||||
uni.showToast({ title: '操作失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
async function moveToRecycle(item: AdminProduct) {
|
||||
const isDelete = activeStatus.value !== 4
|
||||
const targetStatus = isDelete ? 4 : 2 // 移到回收站或恢复到下架
|
||||
|
||||
const action = isDelete ? '移到回收站' : '恢复'
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: `确认要将该商品${action}吗？`,
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
const ok = await updateAdminProductStatus(item.id, targetStatus)
|
||||
if (ok) {
|
||||
uni.showToast({ title: '操作成功', icon: 'success' })
|
||||
loadData()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
loadCounts()
|
||||
}
|
||||
|
||||
function changeStatus(key: number) {
|
||||
|
||||
@@ -89,7 +89,13 @@
|
||||
<text class="th col-num">收藏数</text>
|
||||
<text class="th col-num wide">访客-支付转化率(%)</text>
|
||||
</view>
|
||||
<view v-for="(item, index) in rankingList" :key="index" class="table-row">
|
||||
<view v-if="loading" class="table-loading" style="padding: 40px; text-align: center;">
|
||||
<text>加载排行中...</text>
|
||||
</view>
|
||||
<view v-else-if="rankingList.length === 0" class="table-empty" style="padding: 40px; text-align: center;">
|
||||
<text>暂无排行数据</text>
|
||||
</view>
|
||||
<view v-else v-for="(item, index) in rankingList" :key="index" class="table-row">
|
||||
<text class="td col-id">{{ item.id }}</text>
|
||||
<view class="td col-img">
|
||||
<image class="product-img" :src="item.image" mode="aspectFill" />
|
||||
@@ -99,12 +105,12 @@
|
||||
</view>
|
||||
<text class="td col-num">{{ item.views }}</text>
|
||||
<text class="td col-num">{{ item.visitors }}</text>
|
||||
<text class="td col-num">{{ item.cartCount }}</text>
|
||||
<text class="td col-num">{{ item.orderCount }}</text>
|
||||
<text class="td col-num">{{ item.payCount }}</text>
|
||||
<text class="td col-num">{{ item.payAmount }}</text>
|
||||
<text class="td col-num">{{ item.favCount }}</text>
|
||||
<text class="td col-num wide">{{ item.conversion }}%</text>
|
||||
<text class="td col-num">{{ item.cart_count }}</text>
|
||||
<text class="td col-num">{{ item.order_count }}</text>
|
||||
<text class="td col-num">{{ item.pay_count }}</text>
|
||||
<text class="td col-num">{{ item.pay_amount }}</text>
|
||||
<text class="td col-num">{{ item.fav_count }}</text>
|
||||
<text class="td col-num wide">{{ item.visitors > 0 ? (item.pay_count / item.visitors * 100).toFixed(2) : '0.00' }}%</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -114,79 +120,54 @@
|
||||
<script setup lang="uts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import EChartsView from '@/uni_modules/charts/EChartsView.vue'
|
||||
import { fetchAdminProductStats, fetchAdminProductTrend, fetchAdminProductRanking } from '@/services/admin/productService.uts'
|
||||
|
||||
const statItems = ref([
|
||||
{ label: '商品浏览量', value: '7576', compare: '0.93%', trend: 'up', trendClass: 'up-red', bgColor: '#e6f7ff', emoji: '👁️' },
|
||||
{ label: '商品访客量', value: '765', compare: '0.79%', trend: 'up', trendClass: 'up-red', bgColor: '#f6ffed', emoji: '👤' },
|
||||
{ label: '支付件数', value: '322', compare: '-49.52%', trend: 'down', trendClass: 'down-green', bgColor: '#fff7e6', emoji: '🛍️' },
|
||||
{ label: '支付金额', value: '443254.62', compare: '-63.62%', trend: 'down', trendClass: 'down-green', bgColor: '#f9f0ff', emoji: '💰' },
|
||||
{ label: '退款件数', value: '0', compare: '0.00%', trend: 'none', trendClass: 'none-gray', bgColor: '#e6f7ff', emoji: '🔄' },
|
||||
{ label: '退款金额', value: '0', compare: '0.00%', trend: 'none', trendClass: 'none-gray', bgColor: '#f6ffed', emoji: '💴' }
|
||||
])
|
||||
|
||||
const rankingList = ref([
|
||||
{
|
||||
id: 963,
|
||||
image: 'https://img1.baidu.com/it/u=254065646,3100346083&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
|
||||
name: 'UR2024夏季新款女装复古纯欲氛围感一字肩短款T恤衫UWG440060',
|
||||
views: 1200,
|
||||
visitors: 246,
|
||||
cartCount: 74,
|
||||
orderCount: 214,
|
||||
payCount: 180,
|
||||
payAmount: '11877.49',
|
||||
favCount: 13,
|
||||
conversion: 18
|
||||
},
|
||||
{
|
||||
id: 116,
|
||||
image: 'https://img2.baidu.com/it/u=3775079632,546700868&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
|
||||
name: '爱奇艺智能 奇遇LT01 投影仪 家用卧室超高清手机便携投影机 (4K超清 支持侧投 手机同屏 华为一碰即投)',
|
||||
views: 959,
|
||||
visitors: 376,
|
||||
cartCount: 1,
|
||||
orderCount: 60,
|
||||
payCount: 29,
|
||||
payAmount: '26.00',
|
||||
favCount: 6,
|
||||
conversion: 7
|
||||
},
|
||||
{
|
||||
id: 48,
|
||||
image: 'https://img0.baidu.com/it/u=1762118431,3101886131&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
|
||||
name: '阿迪达斯官网 adidas BBALL CAP COT 男女训练运动帽子FQ5270 传奇墨水蓝/传奇墨水蓝/白 XL',
|
||||
views: 758,
|
||||
visitors: 207,
|
||||
cartCount: 63,
|
||||
orderCount: 67,
|
||||
payCount: 17,
|
||||
payAmount: '1409.30',
|
||||
favCount: 4,
|
||||
conversion: 7
|
||||
},
|
||||
{
|
||||
id: 108,
|
||||
image: 'https://img2.baidu.com/it/u=3033501986,2204481084&fm=253&fmt=auto&app=138&f=JPEG?w=569&h=500',
|
||||
name: 'FOMIX 蛋壳椅 进口头层牛皮橙色单人沙发椅Egg chair设计师师单椅单沙头层牛皮/单椅',
|
||||
views: 730,
|
||||
visitors: 216,
|
||||
cartCount: 26999,
|
||||
orderCount: 327,
|
||||
payCount: 14,
|
||||
payAmount: '66197.00',
|
||||
favCount: 4,
|
||||
conversion: 6
|
||||
}
|
||||
{ label: '商品浏览量', value: '0', compare: '0%', trend: 'none', trendClass: 'none-gray', bgColor: '#e6f7ff', emoji: '👁️', key: 'views' },
|
||||
{ label: '商品访客量', value: '0', compare: '0%', trend: 'none', trendClass: 'none-gray', bgColor: '#f6ffed', emoji: '👤', key: 'visitors' },
|
||||
{ label: '支付件数', value: '0', compare: '0%', trend: 'none', trendClass: 'none-gray', bgColor: '#fff7e6', emoji: '🛍️', key: 'pay_count' },
|
||||
{ label: '支付金额', value: '0.00', compare: '0%', trend: 'none', trendClass: 'none-gray', bgColor: '#f9f0ff', emoji: '💰', key: 'pay_amount' },
|
||||
{ label: '退款件数', value: '0', compare: '0%', trend: 'none', trendClass: 'none-gray', bgColor: '#e6f7ff', emoji: '🔄', key: 'refund_count' },
|
||||
{ label: '退款金额', value: '0.00', compare: '0%', trend: 'none', trendClass: 'none-gray', bgColor: '#f6ffed', emoji: '💴', key: 'refund_amount' }
|
||||
])
|
||||
|
||||
const rankingList = ref<Array<any>>([])
|
||||
const chartOption = ref<any>({})
|
||||
const loading = ref(false)
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
initChart()
|
||||
}, 300)
|
||||
loadAllData()
|
||||
})
|
||||
|
||||
async function loadAllData() {
|
||||
loading.value = true
|
||||
const endTime = new Date().toISOString()
|
||||
const startTime = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString()
|
||||
|
||||
try {
|
||||
// 1. 加载核心指标
|
||||
const stats = await fetchAdminProductStats(startTime, endTime)
|
||||
if (stats != null) {
|
||||
statItems.value.forEach(item => {
|
||||
const val = stats[item.key as string]
|
||||
item.value = typeof val === 'number' ? (item.key.includes('amount') ? val.toFixed(2) : String(val)) : String(val ?? '0')
|
||||
})
|
||||
}
|
||||
|
||||
// 2. 加载趋势图
|
||||
const trendData = await fetchAdminProductTrend(startTime, endTime)
|
||||
initChart(trendData)
|
||||
|
||||
// 3. 加载排行
|
||||
const rankingData = await fetchAdminProductRanking(startTime, endTime, 'sales', 10)
|
||||
rankingList.value = rankingData
|
||||
} catch (e) {
|
||||
uni.showToast({ title: '加载统计失败', icon: 'none' })
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function toPlainObject(obj: any): any {
|
||||
if (obj == null) return null
|
||||
if (typeof obj !== 'object') return obj
|
||||
@@ -210,29 +191,19 @@ function toPlainObject(obj: any): any {
|
||||
return plain
|
||||
}
|
||||
|
||||
function initChart() {
|
||||
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'
|
||||
]
|
||||
function initChart(data: any[]) {
|
||||
const dates = data.map(item => item.date_group.substring(5))
|
||||
const views = data.map(item => item.views)
|
||||
const visitors = data.map(item => item.visitors)
|
||||
const payAmounts = data.map(item => item.pay_amount)
|
||||
const refundAmounts = data.map(item => item.refund_amount)
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(50, 50, 50, 0.7)',
|
||||
padding: [10, 15],
|
||||
textStyle: { color: '#fff' },
|
||||
formatter: (params: any[]) : string => {
|
||||
let res = `<div style="font-size:12px; color:#ccc; margin-bottom:5px;">${params[0].name}</div>`
|
||||
params.forEach(p => {
|
||||
res += `<div style="display:flex; align-items:center;">
|
||||
<div style="width:8px; height:8px; border-radius:50%; background:${p.color}; margin-right:8px;"></div>
|
||||
<span>${p.seriesName}: ${p.value}</span>
|
||||
</div>`
|
||||
})
|
||||
return res
|
||||
}
|
||||
textStyle: { color: '#fff' }
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
@@ -252,14 +223,12 @@ function initChart() {
|
||||
{
|
||||
type: 'value',
|
||||
name: '金额',
|
||||
nameTextStyle: { color: '#8c8c8c', padding: [0, 30, 0, 0] },
|
||||
splitLine: { lineStyle: { type: 'dashed', color: '#f0f0f0' } },
|
||||
axisLabel: { color: '#8c8c8c' }
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '数量',
|
||||
nameTextStyle: { color: '#8c8c8c', padding: [0, 0, 0, 30] },
|
||||
splitLine: { show: false },
|
||||
axisLabel: { color: '#8c8c8c' }
|
||||
}
|
||||
@@ -272,8 +241,7 @@ function initChart() {
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
itemStyle: { color: '#b37feb' },
|
||||
lineStyle: { width: 2 },
|
||||
data: [90, 110, 115, 100, 95, 80, 60, 40, 70, 85, 75, 65, 70, 80, 100, 120, 110, 90, 60, 95, 115, 110, 85, 50, 45, 55, 75]
|
||||
data: views
|
||||
},
|
||||
{
|
||||
name: '商品访客量',
|
||||
@@ -282,31 +250,23 @@ function initChart() {
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
itemStyle: { color: '#ffbb96' },
|
||||
lineStyle: { width: 2 },
|
||||
data: [15, 12, 10, 8, 11, 14, 13, 8, 9, 11, 10, 15, 12, 11, 9, 12, 14, 15, 11, 10, 13, 15, 11, 8, 12, 10, 14]
|
||||
data: visitors
|
||||
},
|
||||
{
|
||||
name: '支付金额',
|
||||
type: 'bar',
|
||||
barWidth: '25%',
|
||||
itemStyle: { color: '#1890ff' },
|
||||
data: [10, 5, 8, 0, 145, 15, 5, 0, 0, 0, 0, 5, 30, 0, 15, 20, 100, 20, 25, 5, 1, 3, 70, 5, 10, 5, 15, 10]
|
||||
data: payAmounts
|
||||
},
|
||||
{
|
||||
name: '退款金额',
|
||||
type: 'bar',
|
||||
barWidth: '25%',
|
||||
itemStyle: { color: '#52c41a' },
|
||||
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
|
||||
data: refundAmounts
|
||||
}
|
||||
],
|
||||
markLine: {
|
||||
silent: true,
|
||||
symbol: ['none', 'none'],
|
||||
label: { show: false },
|
||||
lineStyle: { color: '#bfbfbf', type: 'dashed' },
|
||||
data: [{ yAxis: 145853.16 }]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
chartOption.value = toPlainObject(option)
|
||||
|
||||
Reference in New Issue
Block a user