qdintc/intc-vue-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 银行卡数量统计分析，编码。

Browse Source
This commit is contained in:
tianyongbao
2026-02-02 19:45:58 +08:00
parent 6a8672fd64
commit 694852ef7c
4 changed files with 470 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/api/invest/statisticAnalysis.js
View File

@@ -115,3 +115,12 @@ export function getOpenCardList(query) {
params: query
})
}
// 查询按银行统计银行卡数量
export function getBankCardStatistics(query) {
return request({
url: '/invest/analysis/bankCardStatistics',
method: 'get',
params: query
})
}

8
src/pages.json
View File

@@ -214,6 +214,14 @@
}
}
,
{
"path": "pages/statistic/accounts/bankCardStatistics/index",
"style": {
"navigationBarTitleText": "银行卡数量统计",
"disableScroll": true
}
}
,
{
"path": "pages/statistic/accounts/accountDealAnalysis/index",
"style": {

452
src/pages/statistic/accounts/bankCardStatistics/index.vue Normal file
View File

@@ -0,0 +1,452 @@
<template>
<view class="container">
<!-- 统计概览卡片 -->
<view class="statistics-overview">
<view class="overview-item">
<view class="icon-wrapper icon-blue">
<uni-icons type="shop" size="24" color="#ffffff"></uni-icons>
</view>
<view class="card-info">
<text class="card-title">银行总数</text>
<text class="card-num">{{ totalStats.bankCount || 0 }}<text class="unit-text">行</text></text>
</view>
</view>
<view class="overview-item">
<view class="icon-wrapper icon-purple">
<uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
</view>
<view class="card-info">
<text class="card-title">卡片总数</text>
<text class="card-num">{{ totalStats.cardCount || 0 }}<text class="unit-text">卡</text></text>
</view>
</view>
<view class="overview-item">
<view class="icon-wrapper icon-pink">
<uni-icons type="star" size="24" color="#ffffff"></uni-icons>
</view>
<view class="card-info">
<text class="card-title">信用卡总数</text>
<text class="card-num">{{ totalStats.creditCardBanksCount || 0 }}<text class="unit-text">行</text>{{ totalStats.creditCardCount || 0 }}<text class="unit-text">卡</text></text>
</view>
</view>
<view class="overview-item">
<view class="icon-wrapper icon-green">
<uni-icons type="paperplane" size="24" color="#ffffff"></uni-icons>
</view>
<view class="card-info">
<text class="card-title">储蓄卡总数</text>
<text class="card-num">{{ totalStats.debitCardBanksCount || 0 }}<text class="unit-text">行</text>{{ totalStats.debitCardCount || 0 }}<text class="unit-text">卡</text></text>
</view>
</view>
<view class="overview-item">
<view class="icon-wrapper icon-orange">
<uni-icons type="flag-filled" size="24" color="#ffffff"></uni-icons>
</view>
<view class="card-info">
<text class="card-title">I类储蓄卡总数</text>
<text class="card-num">{{ totalStats.debitTypeOneCount || 0 }}<text class="unit-text">卡</text></text>
</view>
</view>
<view class="overview-item">
<view class="icon-wrapper icon-teal">
<uni-icons type="flag" size="24" color="#ffffff"></uni-icons>
</view>
<view class="card-info">
<text class="card-title">II类储蓄卡总数</text>
<text class="card-num">{{ totalStats.debitTypeTwoCount || 0 }}<text class="unit-text">卡</text></text>
</view>
</view>
</view>
<!-- 银行列表 -->
<view class="section-title" v-if="bankList.length > 0">
<view class="title-decorator"></view>
<text class="title-text">银行卡数量统计</text>
</view>
<u-list v-if="bankList.length > 0" @scrolltolower="loadmore" :spaceHeight="720" lowerThreshold="100">
<u-list-item v-for="(item, index) in bankList" :key="index">
<view class="list-item">
<view class="item-header">
<view class="header-left">
<view class="card-badge">
<uni-icons type="wallet-filled" size="16" color="#ffffff"></uni-icons>
<text>{{ item.bankName }}</text>
</view>
</view>
<view class="header-right">
<text class="total-label">卡片总数：</text>
<text class="total-value">{{ (item.creditCardCount || 0) + (item.debitCardCount || 0) }}</text>
</view>
</view>
<view class="item-body">
<view class="item-row">
<text class="row-label">信用卡数量：</text>
<text class="row-value highlight-blue">{{ item.creditCardCount || 0 }}</text>
</view>
<view class="item-row">
<text class="row-label highlight-green">储蓄卡总数：</text>
<text class="row-value highlight-green">{{ item.debitCardCount || 0 }}</text>
</view>
<view class="item-row sub-item">
<text class="row-label">└ I类储蓄卡：</text>
<text class="row-value">{{ item.debitTypeOneCount || 0 }}</text>
</view>
<view class="item-row sub-item">
<text class="row-label">└ II类储蓄卡：</text>
<text class="row-value">{{ item.debitTypeTwoCount || 0 }}</text>
</view>
</view>
</view>
</u-list-item>
</u-list>
<!-- 空状态 -->
<view class="empty-state" v-if="bankList.length === 0 && !loading">
<uni-icons type="info" size="64" color="#c0c4cc"></uni-icons>
<text class="empty-text">暂无数据</text>
</view>
<!-- 悬停按钮返回统计分析-->
<statisticBtn></statisticBtn>
</view>
</template>
<script setup>
import { getBankCardStatistics } from '@/api/invest/statisticAnalysis'
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref, computed } from "vue";
const bankList = ref([])
const loading = ref(false)
// 总统计数据
const totalStats = computed(() => {
if (!bankList.value || bankList.value.length === 0) {
return {
bankCount: 0,
cardCount: 0,
creditCardCount: 0,
debitCardCount: 0,
debitTypeOneCount: 0,
debitTypeTwoCount: 0,
creditCardBanksCount: 0,
debitCardBanksCount: 0
}
}
return bankList.value.reduce((acc, item) => {
acc.bankCount++
const creditCardCount = item.creditCardCount || 0
const debitCardCount = item.debitCardCount || 0
const debitTypeOneCount = item.debitTypeOneCount || 0
const debitTypeTwoCount = item.debitTypeTwoCount || 0
// 统计有信用卡的银行数量
if (creditCardCount > 0) {
acc.creditCardBanksCount++
}
// 统计有储蓄卡的银行数量
if (debitCardCount > 0) {
acc.debitCardBanksCount++
}
acc.creditCardCount += creditCardCount
acc.debitCardCount += debitCardCount
acc.debitTypeOneCount += debitTypeOneCount
acc.debitTypeTwoCount += debitTypeTwoCount
acc.cardCount += creditCardCount + debitCardCount
return acc
}, {
bankCount: 0,
cardCount: 0,
creditCardCount: 0,
debitCardCount: 0,
debitTypeOneCount: 0,
debitTypeTwoCount: 0,
creditCardBanksCount: 0,
debitCardBanksCount: 0
})
})
onLoad(() => {
getList()
})
onShow(() => {
// 页面显示时刷新数据
})
function getList() {
loading.value = true
getBankCardStatistics().then(res => {
bankList.value = res.data || []
}).catch(() => {
bankList.value = []
}).finally(() => {
loading.value = false
})
}
function loadmore() {
// 暂无分页需求，如有需要可扩展
}
</script>
<style lang="scss" scoped>
page {
height: 100%;
overflow: auto;
background-color: #f5f7fa;
}
.container {
min-height: 100vh;
background-color: #f5f7fa;
padding-bottom: 40rpx;
}
// 统计概览
.statistics-overview {
display: flex;
flex-wrap: wrap;
padding: 16rpx 16rpx;
gap: 12rpx;
.overview-item {
width: calc(50% - 6rpx);
display: flex;
align-items: center;
padding: 24rpx 20rpx;
background: #ffffff;
border-radius: 16rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
border: 2rpx solid #e8edf3;
transition: all 0.3s ease;
&:active {
transform: scale(0.98);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
}
.icon-wrapper {
width: 72rpx;
height: 72rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
flex-shrink: 0;
// 图标背景渐变
&.icon-blue {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
&.icon-purple {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
&.icon-pink {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
&.icon-green {
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}
&.icon-orange {
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}
&.icon-teal {
background: linear-gradient(135deg, #0ba360 0%, #3cba92 100%);
}
}
.card-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
.card-title {
color: #7f8c8d;
font-size: 22rpx;
line-height: 1.4;
margin-bottom: 8rpx;
}
.card-num {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
line-height: 1;
display: flex;
align-items: baseline;
.unit-text {
font-size: 20rpx;
font-weight: normal;
margin-left: 4rpx;
color: #95a5a6;
}
}
}
}
}
// 区块标题
.section-title {
display: flex;
align-items: center;
padding: 24rpx 32rpx 16rpx;
background-color: #f5f7fa;
.title-decorator {
width: 6rpx;
height: 32rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 3rpx;
margin-right: 12rpx;
}
.title-text {
font-size: 28rpx;
font-weight: 600;
color: #2c3e50;
line-height: 1;
flex: 1;
}
}
// 列表项
.list-item {
margin: 0 24rpx 16rpx;
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
.item-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16rpx 24rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
.header-left {
flex: 1;
.card-badge {
display: inline-flex;
align-items: center;
gap: 6rpx;
padding: 4rpx 12rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 12rpx;
text {
font-size: 24rpx;
color: #ffffff;
font-weight: 600;
line-height: 1;
}
}
}
.header-right {
display: flex;
flex-direction: row;
align-items: center;
gap: 4rpx;
.total-label {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.85);
line-height: 1;
}
.total-value {
font-size: 28rpx;
font-weight: 700;
color: #ffffff;
line-height: 1;
}
}
}
.item-body {
padding: 24rpx;
}
.item-row {
padding: 12rpx 0;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1rpx solid #f0f0f0;
&:last-child {
border-bottom: none;
}
.row-label {
color: #7f8c8d;
font-size: 26rpx;
&.highlight-green {
color: #059669;
font-weight: 600;
}
}
.row-value {
color: #2c3e50;
font-size: 26rpx;
font-weight: 600;
&.highlight-blue {
color: #667eea;
}
&.highlight-green {
color: #059669;
}
}
// 子项样式
&.sub-item {
padding-left: 24rpx;
.row-label {
color: #95a5a6;
font-size: 24rpx;
}
.row-value {
font-size: 24rpx;
font-weight: normal;
}
}
}
}
// 空状态
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 160rpx 0;
.empty-text {
margin-top: 24rpx;
font-size: 28rpx;
color: #c0c4cc;
}
}
</style>

1
src/pages/statistic/index.vue
View File

@@ -83,6 +83,7 @@
{ path: '/pages/statistic/accounts/debitDealAnalysis/index', text: '储蓄账户统计', icon: 'paperplane', color: 'linear-gradient(135deg, #00b4db 0%, #0083b0 100%)', permission: 'invest:debitCard' },
{ path: '/pages/statistic/accounts/sleepAccounts/index', text: '睡眠账户统计', icon: 'eye-slash-filled', color: 'linear-gradient(135deg, #636e72 0%, #2d3436 100%)', permission: 'invest:debitCard' },
{ path: '/pages/statistic/accounts/openCardStatics/index', text: '储蓄卡开卡统计', icon: 'gift-filled', color: 'linear-gradient(135deg, #fd79a8 0%, #e84393 100%)', permission: 'invest:debitCard' },
{ path: '/pages/statistic/accounts/bankCardStatistics/index', text: '银行卡数量统计', icon: 'wallet-filled', color: 'linear-gradient(135deg, #00b4db 0%, #0083b0 100%)', permission: 'invest:bankCardStatistics:list' },
{ path: '/pages/statistic/accounts/dailyLiabilities/index', text: '每日净资产统计', icon: 'bars', color: 'linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%)', permission: 'invest:dailyLiabilities:list' },
{ path: '/pages/statistic/accounts/debitCardAnalysis/index', text: '结算卡统计', icon: 'star', color: 'linear-gradient(135deg, #fa8231 0%, #f7971e 100%)', permission: 'invest:debitCardAnalysis:list' },
{ path: '/pages/statistic/accounts/posStatics/index', text: 'POS机统计', icon: 'navigate-filled', color: 'linear-gradient(135deg, #0be881 0%, #0fbcf9 100%)', permission: 'invest:posmachine:list' },