lizi/shop-toy
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: 分端显示

Browse Source
This commit is contained in:
FlowerWater
2025-12-17 17:01:46 +08:00
parent 5e3d3708c6
commit 3c21b074c4
16 changed files with 1723 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/pagesBank/audit/list.vue Normal file
View File

@@ -0,0 +1,121 @@
<script lang="ts" setup>
definePage({
style: {
navigationBarTitleText: '审核列表',
},
})
// 模拟审核数据
const auditList = ref([
{ id: '1', merchantName: '广州数字科技有限公司', amount: 50000.00, status: 'pending', time: '2小时前' },
{ id: '2', merchantName: '深圳智慧商贸公司', amount: 128000.00, status: 'pending', time: '3小时前' },
{ id: '3', merchantName: '佛山电子商务公司', amount: 35000.00, status: 'approved', time: '昨天' },
])
const statusMap: Record<string, { text: string; color: string }> = {
pending: { text: '待审核', color: '#ff8f0d' },
approved: { text: '已通过', color: '#00c05a' },
rejected: { text: '已拒绝', color: '#fa4350' },
}
function handleAudit(id: string) {
uni.navigateTo({ url: `/pagesBank/audit/detail?id=${id}` })
}
</script>
<template>
<view class="audit-list-page">
<view class="audit-list">
<view
v-for="item in auditList"
:key="item.id"
class="audit-card"
@click="handleAudit(item.id)"
>
<view class="audit-header">
<text class="merchant-name">{{ item.merchantName }}</text>
<text class="audit-status" :style="{ color: statusMap[item.status].color }">
{{ statusMap[item.status].text }}
</text>
</view>
<view class="audit-body">
<text class="amount">申请金额：¥{{ item.amount.toFixed(2) }}</text>
</view>
<view class="audit-footer">
<text class="time">{{ item.time }}</text>
<text class="action" v-if="item.status === 'pending'">去审核 →</text>
</view>
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.audit-list-page {
min-height: 100vh;
background: #f5f5f5;
padding: 20rpx;
}
.audit-list {
display: flex;
flex-direction: column;
gap: 20rpx;
}
.audit-card {
background: #fff;
border-radius: 16rpx;
padding: 24rpx;
.audit-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
.merchant-name {
font-size: 28rpx;
font-weight: 600;
color: #333;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.audit-status {
font-size: 24rpx;
font-weight: 500;
margin-left: 16rpx;
}
}
.audit-body {
margin-bottom: 12rpx;
.amount {
font-size: 30rpx;
font-weight: 600;
color: #00c05a;
}
}
.audit-footer {
display: flex;
justify-content: space-between;
align-items: center;
.time {
font-size: 24rpx;
color: #999;
}
.action {
font-size: 24rpx;
color: #00c05a;
font-weight: 500;
}
}
}
</style>

141
src/pagesBank/customer/list.vue Normal file
View File

@@ -0,0 +1,141 @@
<script lang="ts" setup>
definePage({
style: {
navigationBarTitleText: '客户管理',
},
})
// 模拟客户数据
const customers = ref([
{ id: '1', name: '广州数字科技有限公司', creditLimit: 500000, usedLimit: 125000, status: 'normal' },
{ id: '2', name: '深圳智慧商贸公司', creditLimit: 300000, usedLimit: 280000, status: 'warning' },
{ id: '3', name: '佛山电子商务公司', creditLimit: 200000, usedLimit: 50000, status: 'normal' },
])
function handleDetail(id: string) {
uni.navigateTo({ url: `/pagesBank/customer/detail?id=${id}` })
}
function getUsageRate(used: number, total: number) {
return ((used / total) * 100).toFixed(1)
}
</script>
<template>
<view class="customer-list-page">
<view class="customer-list">
<view
v-for="item in customers"
:key="item.id"
class="customer-card"
@click="handleDetail(item.id)"
>
<view class="customer-header">
<text class="customer-name">{{ item.name }}</text>
<text class="customer-status" :class="item.status">
{{ item.status === 'normal' ? '正常' : '预警' }}
</text>
</view>
<view class="customer-body">
<view class="limit-info">
<text class="label">授信额度</text>
<text class="value">¥{{ (item.creditLimit / 10000).toFixed(0) }}万</text>
</view>
<view class="limit-info">
<text class="label">已使用</text>
<text class="value used">¥{{ (item.usedLimit / 10000).toFixed(1) }}万</text>
</view>
<view class="limit-info">
<text class="label">使用率</text>
<text class="value" :class="{ warning: item.status === 'warning' }">
{{ getUsageRate(item.usedLimit, item.creditLimit) }}%
</text>
</view>
</view>
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.customer-list-page {
min-height: 100vh;
background: #f5f5f5;
padding: 20rpx;
}
.customer-list {
display: flex;
flex-direction: column;
gap: 20rpx;
}
.customer-card {
background: #fff;
border-radius: 16rpx;
padding: 24rpx;
.customer-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
.customer-name {
font-size: 28rpx;
font-weight: 600;
color: #333;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.customer-status {
font-size: 22rpx;
padding: 4rpx 12rpx;
border-radius: 8rpx;
&.normal {
background: rgba(0, 192, 90, 0.1);
color: #00c05a;
}
&.warning {
background: rgba(255, 143, 13, 0.1);
color: #ff8f0d;
}
}
}
.customer-body {
display: flex;
justify-content: space-between;
.limit-info {
text-align: center;
.label {
font-size: 22rpx;
color: #999;
display: block;
margin-bottom: 8rpx;
}
.value {
font-size: 28rpx;
font-weight: 600;
color: #333;
&.used {
color: #00c05a;
}
&.warning {
color: #ff8f0d;
}
}
}
}
}
</style>

192
src/pagesBank/dashboard/index.vue Normal file
View File

@@ -0,0 +1,192 @@
<script lang="ts" setup>
import { useUserStore } from '@/store/user'
definePage({
style: {
navigationBarTitleText: '银行工作台',
},
})
const userStore = useUserStore()
// 模拟数据
const stats = ref({
pendingAudit: 45,
todayApproved: 28,
totalAmount: 2568000.00,
customers: 156,
})
const quickActions = [
{ icon: 'i-carbon-task-approved', label: '待审核', path: '/pagesBank/audit/list' },
{ icon: 'i-carbon-group', label: '客户管理', path: '/pagesBank/customer/list' },
{ icon: 'i-carbon-report', label: '数据报表', path: '/pagesBank/dashboard/index' },
{ icon: 'i-carbon-settings', label: '设置', path: '/pagesBank/me/index' },
]
function handleAction(path: string) {
uni.navigateTo({ url: path })
}
</script>
<template>
<view class="dashboard-page">
<!-- 头部欢迎 -->
<view class="header">
<view class="welcome">
<text class="greeting">您好，{{ userStore.userInfo?.nickname || '银行用户' }}</text>
<text class="sub-text">金融服务数据总览</text>
</view>
</view>
<!-- 数据卡片 -->
<view class="stats-grid">
<view class="stat-card warning">
<text class="stat-value">{{ stats.pendingAudit }}</text>
<text class="stat-label">待审核</text>
</view>
<view class="stat-card success">
<text class="stat-value">{{ stats.todayApproved }}</text>
<text class="stat-label">今日已审</text>
</view>
<view class="stat-card">
<text class="stat-value">{{ (stats.totalAmount / 10000).toFixed(0) }}万</text>
<text class="stat-label">累计放款</text>
</view>
<view class="stat-card">
<text class="stat-value">{{ stats.customers }}</text>
<text class="stat-label">服务客户</text>
</view>
</view>
<!-- 快捷操作 -->
<view class="section">
<view class="section-title">快捷操作</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>
</view>
</template>
<style lang="scss" scoped>
.dashboard-page {
min-height: 100vh;
background: #f5f5f5;
}
.header {
background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%);
padding: 40rpx 30rpx 60rpx;
.welcome {
color: #fff;
.greeting {
font-size: 36rpx;
font-weight: 600;
display: block;
margin-bottom: 8rpx;
}
.sub-text {
font-size: 26rpx;
opacity: 0.9;
}
}
}
.stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20rpx;
padding: 0 20rpx;
margin-top: -40rpx;
.stat-card {
background: #fff;
border-radius: 16rpx;
padding: 30rpx;
text-align: center;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
.stat-value {
font-size: 40rpx;
font-weight: 700;
color: #333;
display: block;
margin-bottom: 8rpx;
}
.stat-label {
font-size: 24rpx;
color: #999;
}
&.warning .stat-value {
color: #ff8f0d;
}
&.success .stat-value {
color: #00c05a;
}
}
}
.section {
margin: 30rpx 20rpx;
background: #fff;
border-radius: 16rpx;
padding: 30rpx;
.section-title {
font-size: 30rpx;
font-weight: 600;
color: #333;
margin-bottom: 24rpx;
}
}
.quick-actions {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20rpx;
.action-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 12rpx;
.action-icon {
width: 80rpx;
height: 80rpx;
background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%);
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: center;
text {
font-size: 40rpx;
color: #fff;
}
}
.action-label {
font-size: 24rpx;
color: #666;
}
}
}
</style>

152
src/pagesBank/me/index.vue Normal file
View File

@@ -0,0 +1,152 @@
<script lang="ts" setup>
import { useUserStore, CLIENT_TYPE_CONFIG, ClientType } from '@/store/user'
import { tabbarStore } from '@/tabbar/store'
definePage({
style: {
navigationBarTitleText: '银行中心',
},
})
const userStore = useUserStore()
const config = CLIENT_TYPE_CONFIG[ClientType.BANK]
const menuList = [
{ icon: 'i-carbon-report', label: '数据报表' },
{ icon: 'i-carbon-settings', label: '系统设置' },
{ icon: 'i-carbon-help', label: '帮助中心' },
{ icon: 'i-carbon-information', label: '关于我们' },
]
function handleLogout() {
uni.showModal({
title: '提示',
content: '确定要退出登录吗？',
success: (res) => {
if (res.confirm) {
userStore.logout()
tabbarStore.setTabbarByClientType('user')
uni.reLaunch({ url: '/pages/login/index' })
}
},
})
}
</script>
<template>
<view class="me-page">
<!-- 用户信息 -->
<view class="user-card" :style="{ background: config.color }">
<view class="avatar">
<image :src="userStore.userInfo?.avatar || '/static/images/avatar.jpg'" mode="aspectFill"></image>
</view>
<view class="info">
<text class="nickname">{{ userStore.userInfo?.nickname || '银行用户' }}</text>
<text class="tag">{{ config.label }}</text>
</view>
</view>
<!-- 菜单列表 -->
<view class="menu-list">
<view v-for="item in menuList" :key="item.label" class="menu-item">
<view class="menu-left">
<text :class="item.icon" class="menu-icon"></text>
<text class="menu-label">{{ item.label }}</text>
</view>
<text class="i-carbon-chevron-right"></text>
</view>
</view>
<!-- 退出登录 -->
<view class="logout-btn" @click="handleLogout">退出登录</view>
</view>
</template>
<style lang="scss" scoped>
.me-page {
min-height: 100vh;
background: #f5f5f5;
}
.user-card {
padding: 60rpx 30rpx 40rpx;
display: flex;
align-items: center;
gap: 24rpx;
.avatar {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
overflow: hidden;
border: 4rpx solid rgba(255, 255, 255, 0.5);
image {
width: 100%;
height: 100%;
}
}
.info {
.nickname {
font-size: 36rpx;
font-weight: 600;
color: #fff;
display: block;
margin-bottom: 8rpx;
}
.tag {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.8);
background: rgba(255, 255, 255, 0.2);
padding: 4rpx 16rpx;
border-radius: 20rpx;
}
}
}
.menu-list {
background: #fff;
margin: 20rpx;
border-radius: 16rpx;
.menu-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx;
border-bottom: 1rpx solid #f5f5f5;
&:last-child {
border-bottom: none;
}
.menu-left {
display: flex;
align-items: center;
gap: 16rpx;
.menu-icon {
font-size: 40rpx;
color: #666;
}
.menu-label {
font-size: 28rpx;
color: #333;
}
}
}
}
.logout-btn {
margin: 40rpx 20rpx;
background: #fff;
border-radius: 16rpx;
padding: 30rpx;
text-align: center;
font-size: 28rpx;
color: #fa4350;
}
</style>