354 lines
8.0 KiB
Vue
354 lines
8.0 KiB
Vue
<script lang="ts" setup>
|
||
import { useUserStore } from '@/store/user'
|
||
import { useBankStore } from '@/store/bank'
|
||
|
||
definePage({
|
||
style: {
|
||
navigationBarTitleText: '银行工作台',
|
||
},
|
||
})
|
||
|
||
const userStore = useUserStore()
|
||
const bankStore = useBankStore()
|
||
|
||
// 快捷操作
|
||
const quickActions = [
|
||
{ icon: 'i-carbon-task-approved', label: '待审核', path: '/pagesBank/audit/list' },
|
||
{ icon: 'i-carbon-group', label: '客户管理', path: '/pagesBank/customer/list' },
|
||
{ icon: 'i-carbon-calendar', label: '拜访计划', path: '/pagesBank/visit/list' },
|
||
{ icon: 'i-carbon-add', label: '创建拜访', path: '/pagesBank/visit/create' },
|
||
{ icon: 'i-carbon-settings', label: '设置', path: '/pagesBank/me/index' },
|
||
]
|
||
|
||
function handleAction(path: string) {
|
||
if (!path) {
|
||
uni.showToast({ title: '功能开发中', icon: 'none' })
|
||
return
|
||
}
|
||
uni.navigateTo({ url: path })
|
||
}
|
||
|
||
onMounted(() => {
|
||
bankStore.fetchStats()
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<view class="dashboard-page">
|
||
<view class="header-bg"></view>
|
||
|
||
<!-- 头部欢迎 -->
|
||
<view class="header-content">
|
||
<view class="welcome">
|
||
<text class="greeting">您好，{{ userStore.userInfo?.nickname || '银行管理员' }}</text>
|
||
<text class="sub-text">欢迎回到银行端管理系统</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 关键指标卡片 -->
|
||
<view class="stats-overview">
|
||
<view class="total-amount-card">
|
||
<text class="label">累计放款金额 (元)</text>
|
||
<view class="amount-box">
|
||
<text class="unit">¥</text>
|
||
<text class="value">{{ (bankStore.stats?.totalLoanAmount || 0).toLocaleString() }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="stats-grid">
|
||
<view class="stat-card" @click="handleAction('/pagesBank/audit/list')">
|
||
<view class="stat-info">
|
||
<text class="stat-value warning">{{ bankStore.stats?.pendingAuditWithdraw || 0 }}</text>
|
||
<text class="stat-label">待审核</text>
|
||
</view>
|
||
<view class="stat-icon warning">
|
||
<text class="i-carbon-wallet"></text>
|
||
</view>
|
||
</view>
|
||
<view class="stat-card">
|
||
<view class="stat-info">
|
||
<text class="stat-value success">{{ bankStore.stats?.todayApprovedCount || 0 }}</text>
|
||
<text class="stat-label">今日审批</text>
|
||
</view>
|
||
<view class="stat-icon success">
|
||
<text class="i-carbon-checkmark-outline"></text>
|
||
</view>
|
||
</view>
|
||
<view class="stat-card" @click="handleAction('/pagesBank/customer/list')">
|
||
<view class="stat-info">
|
||
<text class="stat-value">{{ bankStore.stats?.activeCustomerCount || 0 }}</text>
|
||
<text class="stat-label">活跃用户</text>
|
||
</view>
|
||
<view class="stat-icon">
|
||
<text class="i-carbon-user-activity"></text>
|
||
</view>
|
||
</view>
|
||
<view class="stat-card">
|
||
<view class="stat-info">
|
||
<text class="stat-value">{{ bankStore.stats?.pendingAuditStore || 0 }}</text>
|
||
<text class="stat-label">待审入驻</text>
|
||
</view>
|
||
<view class="stat-icon">
|
||
<text class="i-carbon-store"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 快捷操作 -->
|
||
<view class="section">
|
||
<view class="section-header">
|
||
<text class="section-title">快捷操作</text>
|
||
</view>
|
||
<view class="quick-actions">
|
||
<view
|
||
v-for="item in quickActions"
|
||
:key="item.label"
|
||
class="action-item"
|
||
@click="handleAction(item.path)"
|
||
>
|
||
<view class="action-icon">
|
||
<text :class="item.icon"></text>
|
||
</view>
|
||
<text class="action-label">{{ item.label }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 最近动态 (Placeholder) -->
|
||
<view class="section">
|
||
<view class="section-header">
|
||
<text class="section-title">最近动态</text>
|
||
<text class="more">更多 ></text>
|
||
</view>
|
||
<view class="empty-dynamic">
|
||
<text class="i-carbon-reminder-attendance"></text>
|
||
<text>暂无新的审核动态</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.dashboard-page {
|
||
min-height: 100vh;
|
||
background: #f8f9fa;
|
||
padding-bottom: 40rpx;
|
||
}
|
||
|
||
.header-bg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 480rpx; /* 稍微增高一点以容纳更多内容 */
|
||
background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%);
|
||
border-bottom-left-radius: 40rpx;
|
||
border-bottom-right-radius: 40rpx;
|
||
z-index: 0;
|
||
}
|
||
|
||
.header-content {
|
||
position: relative;
|
||
padding: 60rpx 40rpx 20rpx;
|
||
z-index: 1;
|
||
|
||
.welcome {
|
||
color: #fff;
|
||
|
||
.greeting {
|
||
font-size: 40rpx;
|
||
font-weight: 700;
|
||
display: block;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.sub-text {
|
||
font-size: 26rpx;
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
}
|
||
|
||
.stats-overview {
|
||
position: relative;
|
||
margin: 0 30rpx;
|
||
z-index: 1;
|
||
|
||
.total-amount-card {
|
||
background: #fff;
|
||
border-radius: 24rpx;
|
||
padding: 40rpx;
|
||
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.05);
|
||
margin-bottom: 24rpx;
|
||
|
||
.label {
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
display: block;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.amount-box {
|
||
display: flex;
|
||
align-items: baseline;
|
||
|
||
.unit {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.value {
|
||
font-size: 56rpx;
|
||
font-weight: 700;
|
||
color: #333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 20rpx;
|
||
|
||
.stat-card {
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03);
|
||
|
||
.stat-info {
|
||
.stat-value {
|
||
font-size: 36rpx;
|
||
font-weight: 700;
|
||
color: #333;
|
||
display: block;
|
||
margin-bottom: 4rpx;
|
||
|
||
&.warning { color: #ff8f0d; }
|
||
&.success { color: #00c05a; }
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.stat-icon {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
border-radius: 16rpx;
|
||
background: #f5f5f5;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
text {
|
||
font-size: 36rpx;
|
||
color: #666;
|
||
}
|
||
|
||
&.warning {
|
||
background: rgba(255, 143, 13, 0.1);
|
||
text { color: #ff8f0d; }
|
||
}
|
||
|
||
&.success {
|
||
background: rgba(0, 192, 90, 0.1);
|
||
text { color: #00c05a; }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.section {
|
||
margin: 30rpx;
|
||
background: #fff;
|
||
border-radius: 24rpx;
|
||
padding: 30rpx;
|
||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
|
||
|
||
.section-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
|
||
.section-title {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #333;
|
||
}
|
||
|
||
.more {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.quick-actions {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 20rpx;
|
||
|
||
.action-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
|
||
.action-icon {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
background: #f8f9fa;
|
||
border-radius: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.2s;
|
||
|
||
text {
|
||
font-size: 44rpx;
|
||
color: #00c05a;
|
||
}
|
||
|
||
&:active {
|
||
background: #e9ecef;
|
||
transform: scale(0.95);
|
||
}
|
||
}
|
||
|
||
.action-label {
|
||
font-size: 24rpx;
|
||
color: #495057;
|
||
}
|
||
}
|
||
}
|
||
|
||
.empty-dynamic {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 40rpx 0;
|
||
color: #adb5bd;
|
||
gap: 16rpx;
|
||
|
||
text:first-child {
|
||
font-size: 64rpx;
|
||
}
|
||
|
||
text:last-child {
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
</style>
|