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

Compare commits

base: lizi:5ba58bafa66272e9771adaafa66170317590ef1f
Branches Tags
lizi:master
lizi:25.12.17
..
compare: lizi:25.12.17
Branches Tags
lizi:master
lizi:25.12.17

2 Commits
5ba58bafa6 ... 25.12.17

Author SHA1 Message Date
FlowerWater
3c21b074c4 feat: 分端显示 2025-12-17 17:01:46 +08:00
xiayebo
5e3d3708c6 修改logo 2025-12-01 20:35:21 +08:00
17 changed files with 1727 additions and 123 deletions
Expand all files Collapse all files

33
pages.config.ts
View File

@@ -18,6 +18,37 @@ export default defineUniPages({
'^wd-(.*)': 'wot-design-uni/components/wd-$1/wd-$1.vue',
},
},
// tabbar 的配置统一在 “./src/tabbar/config.ts” 文件中
// tabbar 配置
tabBar: tabBar as any,
// 分包配置
subPackages: [
{
root: 'pagesMerchant',
pages: [
{ path: 'dashboard/index', style: { navigationBarTitleText: '商家工作台' } },
{ path: 'order/list', style: { navigationBarTitleText: '订单管理' } },
{ path: 'goods/list', style: { navigationBarTitleText: '商品管理' } },
{ path: 'finance/index', style: { navigationBarTitleText: '财务中心' } },
{ path: 'me/index', style: { navigationBarTitleText: '商家中心' } },
],
},
{
root: 'pagesBank',
pages: [
{ path: 'dashboard/index', style: { navigationBarTitleText: '银行工作台' } },
{ path: 'audit/list', style: { navigationBarTitleText: '审核列表' } },
{ path: 'customer/list', style: { navigationBarTitleText: '客户管理' } },
{ path: 'me/index', style: { navigationBarTitleText: '银行中心' } },
],
},
],
// 分包预下载配置
preloadRule: {
'pages/login/index': {
network: 'all',
packages: ['pagesMerchant', 'pagesBank'],
},
},
})

12
src/App.vue
View File

@@ -1,10 +1,20 @@
<script setup lang="ts">
import { onHide, onLaunch, onShow } from '@dcloudio/uni-app'
import { navigateToInterceptor } from '@/router/interceptor'
import { useUserStore, ClientType } from '@/store/user'
import { tabbarStore } from '@/tabbar/store'
onLaunch((options) => {
console.log('App.vue onLaunch', options)
// 根据已存储的客户端类型恢复 tabbar 配置
const userStore = useUserStore()
if (userStore.clientType && userStore.clientType !== ClientType.USER) {
tabbarStore.setTabbarByClientType(userStore.clientType)
console.log('Restored tabbar for clientType:', userStore.clientType)
}
})
onShow((options) => {
console.log('App.vue onShow', options)
// 处理直接进入页面路由的情况：如h5直接输入路由、微信小程序分享后进入等
@@ -16,6 +26,7 @@ onShow((options) => {
navigateToInterceptor.invoke({ url: '/' })
}
})
onHide(() => {
console.log('App Hide')
})
@@ -24,3 +35,4 @@ onHide(() => {
<style lang="scss">
</style>

176
src/pages/login/index.vue
View File

@@ -1,5 +1,6 @@
<script lang="ts" setup>
import { useUserStore } from '@/store/user'
import { useUserStore, ClientType, CLIENT_TYPE_CONFIG } from '@/store/user'
import { tabbarStore } from '@/tabbar/store'
import { login, sendCode } from '@/api/auth'
definePage({
@@ -18,6 +19,19 @@ const loading = ref(false)
const countdown = ref(0)
const timer = ref<any>(null)
// 客户端类型选择
const selectedClientType = ref<ClientType>(ClientType.USER)
const clientTypes = [
{ type: ClientType.USER, ...CLIENT_TYPE_CONFIG[ClientType.USER] },
{ type: ClientType.MERCHANT, ...CLIENT_TYPE_CONFIG[ClientType.MERCHANT] },
{ type: ClientType.BANK, ...CLIENT_TYPE_CONFIG[ClientType.BANK] },
]
// 选择客户端类型
function selectClientType(type: ClientType) {
selectedClientType.value = type
}
// 发送验证码
async function handleSendCode() {
if (!phone.value) {
@@ -30,7 +44,6 @@ async function handleSendCode() {
await sendCode(phone.value)
uni.showToast({ title: '验证码已发送', icon: 'none' })
// 倒计时
countdown.value = 60
timer.value = setInterval(() => {
countdown.value--
@@ -49,26 +62,25 @@ async function handleLogin() {
uni.showToast({ title: '请输入手机号', icon: 'none' })
return
}
if (!code.value) {
// 为了演示方便，这里允许空验证码直接登录（模拟）
// uni.showToast({ title: '请输入验证码', icon: 'none' })
// return
}
loading.value = true
try {
const res: any = await login({ phone: phone.value, code: code.value })
// 更新用户信息
// 更新用户信息和客户端类型
userStore.userInfo = res.data.user
userStore.isLogin = true
userStore.setClientType(selectedClientType.value)
uni.showToast({ title: '登录成功', icon: 'success' })
// 根据客户端类型切换 tabbar
tabbarStore.setTabbarByClientType(selectedClientType.value)
const config = CLIENT_TYPE_CONFIG[selectedClientType.value]
uni.showToast({ title: `${config.label}登录成功`, icon: 'success' })
// 跳转到对应首页
setTimeout(() => {
uni.switchTab({
url: '/pages/index/index'
})
uni.reLaunch({ url: config.homePage })
}, 1500)
} catch (error) {
uni.showToast({ title: '登录失败', icon: 'none' })
@@ -89,9 +101,33 @@ onUnload(() => {
<view class="logo-wrapper">
<view class="logo">
<image src="/static/logo4.png" class="logo-image"></image>
<!-- <text class="i-carbon-store icon"></text> -->
</view>
<!-- <text class="app-name">商城+金融</text> -->
</view>
<!-- 客户端类型选择 -->
<view class="client-type-section">
<view class="section-title">选择登录端</view>
<view class="client-type-list">
<view
v-for="item in clientTypes"
:key="item.type"
class="client-type-item"
:class="{ active: selectedClientType === item.type }"
:style="{ '--theme-color': item.color }"
@click="selectClientType(item.type)"
>
<view class="type-icon" :style="selectedClientType === item.type ? { background: item.color } : {}">
<text :class="item.icon"></text>
</view>
<view class="type-info">
<text class="type-label">{{ item.label }}</text>
<text class="type-desc">{{ item.description }}</text>
</view>
<view class="type-check" v-if="selectedClientType === item.type" :style="{ color: item.color }">
<text class="i-carbon-checkmark-filled"></text>
</view>
</view>
</view>
</view>
<view class="form">
@@ -123,9 +159,15 @@ onUnload(() => {
{{ countdown > 0 ? `${countdown}s后重发` : '获取验证码' }}
</view>
</view>
<wd-notice-bar text="演示使用,直接点击登录~" prefix="warn-bold" custom-class="space" color="#34D19D" background-color="#f0f9eb" />
<view class="submit-btn" @click="handleLogin">
<text v-if="!loading">登录</text>
<view
class="submit-btn"
:style="{ background: CLIENT_TYPE_CONFIG[selectedClientType].color }"
@click="handleLogin"
>
<text v-if="!loading">{{ CLIENT_TYPE_CONFIG[selectedClientType].label }}登录</text>
<text v-else>登录中...</text>
</view>
@@ -140,9 +182,10 @@ onUnload(() => {
<style lang="scss" scoped>
.logo-image {
width: 378px;
height: 60px;
width: 80px;
height: 78px;
}
.login-page {
min-height: 100vh;
background: #fff;
@@ -155,31 +198,94 @@ onUnload(() => {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 100rpx;
margin-bottom: 100rpx;
margin-top: 40rpx;
margin-bottom: 30rpx;
.logo {
width: 378rpx;
height: 60rpx;
// background: linear-gradient(135deg, #ff6b6b 0%, #ff4d4f 100%);
width: 320rpx;
height: 116rpx;
border-radius: 40rpx;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24rpx;
// box-shadow: 0 8rpx 24rpx rgba(255, 77, 79, 0.3);
}
}
.icon {
font-size: 80rpx;
// 客户端类型选择区域
.client-type-section {
margin-bottom: 30rpx;
.section-title {
font-size: 28rpx;
color: #666;
margin-bottom: 20rpx;
padding-left: 10rpx;
}
.client-type-list {
display: flex;
flex-direction: column;
gap: 16rpx;
}
.client-type-item {
display: flex;
align-items: center;
padding: 20rpx 24rpx;
background: #f8f9fa;
border-radius: 16rpx;
border: 2rpx solid transparent;
transition: all 0.3s ease;
&.active {
background: #fff;
border-color: var(--theme-color);
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}
.type-icon {
width: 72rpx;
height: 72rpx;
border-radius: 16rpx;
background: #e9ecef;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
transition: all 0.3s ease;
text {
font-size: 36rpx;
color: #666;
}
}
&.active .type-icon text {
color: #fff;
}
}
.app-name {
font-size: 40rpx;
.type-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 4rpx;
.type-label {
font-size: 28rpx;
font-weight: 600;
color: #333;
}
.type-desc {
font-size: 22rpx;
color: #999;
}
}
.type-check {
font-size: 36rpx;
}
}
}
.form {
@@ -190,7 +296,7 @@ onUnload(() => {
background: #f5f5f5;
border-radius: 50rpx;
padding: 0 40rpx;
margin-bottom: 30rpx;
margin-bottom: 24rpx;
.icon {
font-size: 40rpx;
@@ -219,7 +325,6 @@ onUnload(() => {
.submit-btn {
height: 100rpx;
background: linear-gradient(135deg, #0060ef 0%, #0060ef 100%);
border-radius: 50rpx;
display: flex;
align-items: center;
@@ -227,11 +332,13 @@ onUnload(() => {
color: #fff;
font-size: 32rpx;
font-weight: 600;
margin-top: 60rpx;
box-shadow: 0 8rpx 24rpx rgba(255, 77, 79, 0.3);
margin-top: 40rpx;
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
&:active {
opacity: 0.9;
transform: scale(0.98);
}
}
@@ -243,3 +350,4 @@ onUnload(() => {
}
}
</style>

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>

192
src/pagesMerchant/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({
todayOrders: 128,
pendingOrders: 23,
todaySales: 15680.50,
totalGoods: 356,
})
const quickActions = [
{ icon: 'i-carbon-document-add', label: '新增订单', path: '/pagesMerchant/order/list' },
{ icon: 'i-carbon-add-alt', label: '新增商品', path: '/pagesMerchant/goods/edit' },
{ icon: 'i-carbon-wallet', label: '财务中心', path: '/pagesMerchant/finance/index' },
{ icon: 'i-carbon-settings', label: '店铺设置', path: '/pagesMerchant/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">
<text class="stat-value">{{ stats.todayOrders }}</text>
<text class="stat-label">今日订单</text>
</view>
<view class="stat-card warning">
<text class="stat-value">{{ stats.pendingOrders }}</text>
<text class="stat-label">待处理</text>
</view>
<view class="stat-card success">
<text class="stat-value">¥{{ stats.todaySales.toFixed(0) }}</text>
<text class="stat-label">今日销售额</text>
</view>
<view class="stat-card">
<text class="stat-value">{{ stats.totalGoods }}</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, #ff8f0d 0%, #ffb347 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, #ff8f0d 0%, #ffb347 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>

105
src/pagesMerchant/finance/index.vue Normal file
View File

@@ -0,0 +1,105 @@
<script lang="ts" setup>
definePage({
style: {
navigationBarTitleText: '财务中心',
},
})
// 模拟数据
const finance = ref({
balance: 125680.50,
pendingSettlement: 23500.00,
monthIncome: 89600.00,
})
</script>
<template>
<view class="finance-page">
<!-- 余额卡片 -->
<view class="balance-card">
<text class="label">可用余额</text>
<text class="amount">¥{{ finance.balance.toFixed(2) }}</text>
<view class="actions">
<view class="action-btn">提现</view>
</view>
</view>
<!-- 财务统计 -->
<view class="stats">
<view class="stat-item">
<text class="value">¥{{ finance.pendingSettlement.toFixed(2) }}</text>
<text class="label">待结算</text>
</view>
<view class="stat-item">
<text class="value">¥{{ finance.monthIncome.toFixed(2) }}</text>
<text class="label">本月收入</text>
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.finance-page {
min-height: 100vh;
background: #f5f5f5;
padding: 20rpx;
}
.balance-card {
background: linear-gradient(135deg, #ff8f0d 0%, #ffb347 100%);
border-radius: 24rpx;
padding: 40rpx;
color: #fff;
.label {
font-size: 26rpx;
opacity: 0.9;
display: block;
margin-bottom: 12rpx;
}
.amount {
font-size: 56rpx;
font-weight: 700;
display: block;
margin-bottom: 30rpx;
}
.actions {
.action-btn {
display: inline-block;
padding: 16rpx 48rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 40rpx;
font-size: 28rpx;
}
}
}
.stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20rpx;
margin-top: 20rpx;
.stat-item {
background: #fff;
border-radius: 16rpx;
padding: 30rpx;
text-align: center;
.value {
font-size: 36rpx;
font-weight: 700;
color: #333;
display: block;
margin-bottom: 8rpx;
}
.label {
font-size: 24rpx;
color: #999;
}
}
}
</style>

144
src/pagesMerchant/goods/list.vue Normal file
View File

@@ -0,0 +1,144 @@
<script lang="ts" setup>
definePage({
style: {
navigationBarTitleText: '商品管理',
},
})
// 模拟商品数据
const goods = ref([
{ id: '1', name: '苹果 iPhone 15 Pro', price: 8999.00, stock: 50, status: 'on' },
{ id: '2', name: '华为 Mate 60 Pro', price: 6999.00, stock: 30, status: 'on' },
{ id: '3', name: '小米 14 Ultra', price: 5999.00, stock: 0, status: 'off' },
])
function handleEdit(id: string) {
uni.navigateTo({ url: `/pagesMerchant/goods/edit?id=${id}` })
}
function handleAdd() {
uni.navigateTo({ url: '/pagesMerchant/goods/edit' })
}
</script>
<template>
<view class="goods-list-page">
<view class="goods-list">
<view
v-for="item in goods"
:key="item.id"
class="goods-card"
@click="handleEdit(item.id)"
>
<view class="goods-info">
<text class="goods-name">{{ item.name }}</text>
<view class="goods-meta">
<text class="price">¥{{ item.price.toFixed(2) }}</text>
<text class="stock" :class="{ warning: item.stock === 0 }">
库存：{{ item.stock }}
</text>
</view>
</view>
<view class="goods-status" :class="item.status">
{{ item.status === 'on' ? '上架' : '下架' }}
</view>
</view>
</view>
<!-- 添加按钮 -->
<view class="add-btn" @click="handleAdd">
<text class="i-carbon-add"></text>
</view>
</view>
</template>
<style lang="scss" scoped>
.goods-list-page {
min-height: 100vh;
background: #f5f5f5;
padding: 20rpx;
padding-bottom: 120rpx;
}
.goods-list {
display: flex;
flex-direction: column;
gap: 20rpx;
}
.goods-card {
background: #fff;
border-radius: 16rpx;
padding: 24rpx;
display: flex;
justify-content: space-between;
align-items: center;
.goods-info {
flex: 1;
.goods-name {
font-size: 28rpx;
font-weight: 600;
color: #333;
display: block;
margin-bottom: 12rpx;
}
.goods-meta {
display: flex;
gap: 24rpx;
.price {
font-size: 30rpx;
font-weight: 700;
color: #ff8f0d;
}
.stock {
font-size: 24rpx;
color: #666;
&.warning {
color: #fa4350;
}
}
}
}
.goods-status {
padding: 8rpx 16rpx;
border-radius: 8rpx;
font-size: 22rpx;
&.on {
background: rgba(0, 192, 90, 0.1);
color: #00c05a;
}
&.off {
background: rgba(153, 153, 153, 0.1);
color: #999;
}
}
}
.add-btn {
position: fixed;
right: 40rpx;
bottom: 140rpx;
width: 100rpx;
height: 100rpx;
background: linear-gradient(135deg, #ff8f0d 0%, #ffb347 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8rpx 24rpx rgba(255, 143, 13, 0.4);
text {
font-size: 48rpx;
color: #fff;
}
}
</style>

152
src/pagesMerchant/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.MERCHANT]
const menuList = [
{ icon: 'i-carbon-settings', label: '店铺设置' },
{ icon: 'i-carbon-customer-service', 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>

114
src/pagesMerchant/order/list.vue Normal file
View File

@@ -0,0 +1,114 @@
<script lang="ts" setup>
definePage({
style: {
navigationBarTitleText: '订单管理',
},
})
// 模拟订单数据
const orders = ref([
{ id: '1', orderNo: 'M202312170001', customer: '张三', amount: 299.00, status: 'pending', time: '10:30' },
{ id: '2', orderNo: 'M202312170002', customer: '李四', amount: 1580.00, status: 'processing', time: '09:45' },
{ id: '3', orderNo: 'M202312170003', customer: '王五', amount: 456.50, status: 'completed', time: '08:20' },
])
const statusMap: Record<string, { text: string; color: string }> = {
pending: { text: '待处理', color: '#ff8f0d' },
processing: { text: '处理中', color: '#4d80f0' },
completed: { text: '已完成', color: '#00c05a' },
}
function handleOrder(id: string) {
uni.navigateTo({ url: `/pagesMerchant/order/detail?id=${id}` })
}
</script>
<template>
<view class="order-list-page">
<view class="order-list">
<view
v-for="order in orders"
:key="order.id"
class="order-card"
@click="handleOrder(order.id)"
>
<view class="order-header">
<text class="order-no">{{ order.orderNo }}</text>
<text class="order-status" :style="{ color: statusMap[order.status].color }">
{{ statusMap[order.status].text }}
</text>
</view>
<view class="order-body">
<text class="customer">客户：{{ order.customer }}</text>
<text class="amount">¥{{ order.amount.toFixed(2) }}</text>
</view>
<view class="order-footer">
<text class="time">今天 {{ order.time }}</text>
</view>
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.order-list-page {
min-height: 100vh;
background: #f5f5f5;
padding: 20rpx;
}
.order-list {
display: flex;
flex-direction: column;
gap: 20rpx;
}
.order-card {
background: #fff;
border-radius: 16rpx;
padding: 24rpx;
.order-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
.order-no {
font-size: 28rpx;
font-weight: 600;
color: #333;
}
.order-status {
font-size: 24rpx;
font-weight: 500;
}
}
.order-body {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12rpx;
.customer {
font-size: 26rpx;
color: #666;
}
.amount {
font-size: 32rpx;
font-weight: 700;
color: #ff8f0d;
}
}
.order-footer {
.time {
font-size: 24rpx;
color: #999;
}
}
}
</style>

BIN
src/static/logo4.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 7.2 KiB

71
src/store/user.ts
View File

@@ -2,6 +2,43 @@ import { defineStore } from 'pinia'
import type { User } from '@/typings/mall'
import { mockMember } from '@/mock/member'
/**
* 客户端类型枚举
* - user: 用户端（消费者）
* - merchant: 商家端
* - bank: 银行端
*/
export enum ClientType {
USER = 'user',
MERCHANT = 'merchant',
BANK = 'bank',
}
/** 客户端类型配置 */
export const CLIENT_TYPE_CONFIG = {
[ClientType.USER]: {
label: '用户端',
icon: 'i-carbon-user',
color: '#4d80f0',
description: '购物消费、查看订单',
homePage: '/pages/index/index',
},
[ClientType.MERCHANT]: {
label: '商家端',
icon: 'i-carbon-store',
color: '#ff8f0d',
description: '商品管理、订单处理',
homePage: '/pagesMerchant/dashboard/index',
},
[ClientType.BANK]: {
label: '银行端',
icon: 'i-carbon-bank',
color: '#00c05a',
description: '账款审核、金融服务',
homePage: '/pagesBank/dashboard/index',
},
}
export const useUserStore = defineStore('user', {
state: () => ({
userInfo: {
@@ -10,23 +47,48 @@ export const useUserStore = defineStore('user', {
nickname: '王明阳',
avatar: '/static/images/avatar.jpg',
phone: '13800138000',
creditLimits: [], // 实际应从 financeStore 获取或关联
creditLimits: [],
member: mockMember,
} as User | null,
isLogin: true, // 默认已登录
isLogin: true,
clientType: ClientType.USER as ClientType,
}),
getters: {
// 获取当前客户端类型配置
currentClientConfig(state) {
return CLIENT_TYPE_CONFIG[state.clientType]
},
// 是否为用户端
isUserClient(state) {
return state.clientType === ClientType.USER
},
// 是否为商家端
isMerchantClient(state) {
return state.clientType === ClientType.MERCHANT
},
// 是否为银行端
isBankClient(state) {
return state.clientType === ClientType.BANK
},
},
actions: {
// 登录（模拟）
// 设置客户端类型
setClientType(type: ClientType) {
this.clientType = type
},
// 登录
login(data: any) {
this.isLogin = true
// ...
},
// 退出登录
logout() {
this.isLogin = false
this.userInfo = null
this.clientType = ClientType.USER
},
},
@@ -38,3 +100,4 @@ export const useUserStore = defineStore('user', {
},
},
})

148
src/tabbar/config.ts
View File

@@ -2,13 +2,11 @@ import type { TabBar } from '@uni-helper/vite-plugin-uni-pages'
import type { CustomTabBarItem, NativeTabBarItem } from './types'
/**
* tabbar 选择的策略，更详细的介绍见 tabbar.md 文件
* 0: 'NO_TABBAR' `无 tabbar`
* 1: 'NATIVE_TABBAR' `完全原生 tabbar`
* 2: 'CUSTOM_TABBAR_WITH_CACHE' `有缓存自定义 tabbar`
* 3: 'CUSTOM_TABBAR_WITHOUT_CACHE' `无缓存自定义 tabbar`
*
* 温馨提示：本文件的任何代码更改了之后，都需要重新运行，否则 pages.json 不会更新导致配置不生效
* tabbar 选择的策略
* 0: 'NO_TABBAR' 无 tabbar
* 1: 'NATIVE_TABBAR' 完全原生 tabbar
* 2: 'CUSTOM_TABBAR_WITH_CACHE' 有缓存自定义 tabbar
* 3: 'CUSTOM_TABBAR_WITHOUT_CACHE' 无缓存自定义 tabbar
*/
export const TABBAR_STRATEGY_MAP = {
NO_TABBAR: 0,
@@ -17,113 +15,143 @@ export const TABBAR_STRATEGY_MAP = {
CUSTOM_TABBAR_WITHOUT_CACHE: 3,
}
// TODO: 1/3. 通过这里切换使用tabbar的策略
// 如果是使用 NO_TABBAR(0)，nativeTabbarList 和 customTabbarList 都不生效(里面的配置不用管)
// 如果是使用 NATIVE_TABBAR(1)，只需要配置 nativeTabbarList，customTabbarList 不生效
// 如果是使用 CUSTOM_TABBAR(2,3)，只需要配置 不生效
export const selectedTabbarStrategy = TABBAR_STRATEGY_MAP.CUSTOM_TABBAR_WITH_CACHE
// TODO: 2/3. 使用 NATIVE_TABBAR 时，更新下面的 tabbar 配置
// 原生 tabbar 配置（备用）
export const nativeTabbarList: NativeTabBarItem[] = [
{
iconPath: 'static/tabbar/home.png',
selectedIconPath: 'static/tabbar/homeHL.png',
pagePath: 'pages/index/index',
text: '数字广东',
text: '首页',
},
{
iconPath: 'static/tabbar/personal.png',
selectedIconPath: 'static/tabbar/personalHL.png',
pagePath: 'pages/me/me',
text: '个人',
text: '我的',
},
]
// TODO: 3/3. 使用 CUSTOM_TABBAR(2,3) 时，更新下面的 tabbar 配置
// 如果需要配置鼓包，需要在 'tabbar/store.ts' 里面设置，最后在 `tabbar/index.vue` 里面更改鼓包的图片
export const customTabbarList: CustomTabBarItem[] = [
// ==================== 用户端 Tabbar 配置 ====================
export const userTabbarList: CustomTabBarItem[] = [
{
text: '数字广东',
text: '首页',
pagePath: 'pages/index/index',
// 注意 unocss 图标需要如下处理：（二选一）
// 1）在fg-tabbar.vue页面上引入一下并注释掉（见tabbar/index.vue代码第2行）
// 2）配置到 unocss.config.ts 的 safelist 中
iconType: 'image',
icon: '/static/logo2.png',
iconActive: '/static/logo1.png',
// badge: 'dot',
},
{
pagePath: 'pages/sort/index',
text: '分类',
// 1）在fg-tabbar.vue页面上引入一下并注释掉（见tabbar/index.vue代码第2行）
// 2）配置到 unocss.config.ts 的 safelist 中
iconType: 'unocss',
icon: 'i-carbon-view-mode-2',
// badge: 10,
},
{
pagePath: 'pages/goods/cart',
text: '购物车',
// 1）在fg-tabbar.vue页面上引入一下并注释掉（见tabbar/index.vue代码第2行）
// 2）配置到 unocss.config.ts 的 safelist 中
iconType: 'unocss',
icon: 'i-carbon-shopping-cart',
// badge: 10,
},
{
pagePath: 'pages/me/me',
text: '我的',
// 1）在fg-tabbar.vue页面上引入一下并注释掉（见tabbar/index.vue代码第2行）
// 2）配置到 unocss.config.ts 的 safelist 中
iconType: 'unocss',
icon: 'i-carbon-user',
// badge: 10,
},
// 其他类型演示
// 1、uiLib
// {
// pagePath: 'pages/index/index',
// text: '首页',
// iconType: 'uiLib',
// icon: 'home',
// },
// 2、iconfont
// {
// pagePath: 'pages/index/index',
// text: '首页',
// // 注意 iconfont 图标需要额外加上 'iconfont'，如下
// iconType: 'iconfont',
// icon: 'iconfont icon-my',
// },
// 3、image
// {
// pagePath: 'pages/index/index',
// text: '首页',
// // 使用 ‘image’时，需要配置 icon + iconActive 2张图片
// iconType: 'image',
// icon: '/static/tabbar/home.png',
// iconActive: '/static/tabbar/homeHL.png',
// },
]
// ==================== 商家端 Tabbar 配置 ====================
export const merchantTabbarList: CustomTabBarItem[] = [
{
text: '工作台',
pagePath: 'pagesMerchant/dashboard/index',
iconType: 'unocss',
icon: 'i-carbon-dashboard',
},
{
pagePath: 'pagesMerchant/order/list',
text: '订单',
iconType: 'unocss',
icon: 'i-carbon-document',
},
{
pagePath: 'pagesMerchant/goods/list',
text: '商品',
iconType: 'unocss',
icon: 'i-carbon-product',
},
{
pagePath: 'pagesMerchant/finance/index',
text: '财务',
iconType: 'unocss',
icon: 'i-carbon-wallet',
},
{
pagePath: 'pagesMerchant/me/index',
text: '我的',
iconType: 'unocss',
icon: 'i-carbon-user',
},
]
// ==================== 银行端 Tabbar 配置 ====================
export const bankTabbarList: CustomTabBarItem[] = [
{
text: '工作台',
pagePath: 'pagesBank/dashboard/index',
iconType: 'unocss',
icon: 'i-carbon-analytics',
},
{
pagePath: 'pagesBank/audit/list',
text: '审核',
iconType: 'unocss',
icon: 'i-carbon-task-approved',
},
{
pagePath: 'pagesBank/customer/list',
text: '客户',
iconType: 'unocss',
icon: 'i-carbon-group',
},
{
pagePath: 'pagesBank/me/index',
text: '我的',
iconType: 'unocss',
icon: 'i-carbon-user',
},
]
// 根据客户端类型获取对应的 tabbar 配置
export type ClientTypeKey = 'user' | 'merchant' | 'bank'
export function getTabbarListByClientType(clientType: ClientTypeKey): CustomTabBarItem[] {
const tabbarMap: Record<ClientTypeKey, CustomTabBarItem[]> = {
user: userTabbarList,
merchant: merchantTabbarList,
bank: bankTabbarList,
}
return tabbarMap[clientType] || userTabbarList
}
// 默认使用用户端配置
export const customTabbarList: CustomTabBarItem[] = userTabbarList
/**
* 是否启用 tabbar 缓存
* NATIVE_TABBAR(1) 和 CUSTOM_TABBAR_WITH_CACHE(2) 时，需要tabbar缓存
*/
export const tabbarCacheEnable
= [TABBAR_STRATEGY_MAP.NATIVE_TABBAR, TABBAR_STRATEGY_MAP.CUSTOM_TABBAR_WITH_CACHE].includes(selectedTabbarStrategy)
/**
* 是否启用自定义 tabbar
* CUSTOM_TABBAR(2,3) 时，启用自定义tabbar
*/
export const customTabbarEnable
= [TABBAR_STRATEGY_MAP.CUSTOM_TABBAR_WITH_CACHE, TABBAR_STRATEGY_MAP.CUSTOM_TABBAR_WITHOUT_CACHE].includes(selectedTabbarStrategy)
/**
* 是否需要隐藏原生 tabbar
* CUSTOM_TABBAR_WITH_CACHE(2) 时，需要隐藏原生tabbar
*/
export const needHideNativeTabbar = selectedTabbarStrategy === TABBAR_STRATEGY_MAP.CUSTOM_TABBAR_WITH_CACHE
@@ -131,7 +159,6 @@ const _tabbarList = customTabbarEnable ? customTabbarList.map(item => ({ text: i
export const tabbarList = customTabbarEnable ? customTabbarList : nativeTabbarList
const _tabbar: TabBar = {
// 只有微信小程序支持 custom。App 和 H5 不生效
custom: selectedTabbarStrategy === TABBAR_STRATEGY_MAP.CUSTOM_TABBAR_WITH_CACHE,
color: '#999999',
selectedColor: '#018d71',
@@ -145,3 +172,4 @@ const _tabbar: TabBar = {
}
export const tabBar = tabbarCacheEnable ? _tabbar : undefined

60
src/tabbar/store.ts
View File

@@ -1,25 +1,39 @@
import type { CustomTabBarItem, CustomTabBarItemBadge } from './types'
import { reactive } from 'vue'
import { tabbarList as _tabbarList, customTabbarEnable, selectedTabbarStrategy, TABBAR_STRATEGY_MAP } from './config'
import {
tabbarList as _tabbarList,
customTabbarEnable,
selectedTabbarStrategy,
TABBAR_STRATEGY_MAP,
getTabbarListByClientType,
type ClientTypeKey,
} from './config'
// TODO 1/2: 中间的鼓包tabbarItem的开关
// 中间的鼓包tabbarItem的开关
const BULGE_ENABLE = false
/** tabbarList 里面的 path 从 pages.config.ts 得到 */
/** tabbarList 动态列表，根据客户端类型切换 */
const tabbarList = reactive<CustomTabBarItem[]>(_tabbarList.map(item => ({
...item,
pagePath: item.pagePath.startsWith('/') ? item.pagePath : `/${item.pagePath}`,
})))
if (customTabbarEnable && BULGE_ENABLE) {
// 初始化鼓包
function initBulge() {
if (customTabbarEnable && BULGE_ENABLE) {
if (tabbarList.length % 2) {
console.error('有鼓包时 tabbar 数量必须是偶数，否则样式很奇怪！！')
console.error('有鼓包时 tabbar 数量必须是偶数')
}
const hasBulge = tabbarList.some(item => item.isBulge)
if (!hasBulge) {
tabbarList.splice(tabbarList.length / 2, 0, {
isBulge: true,
} as CustomTabBarItem)
}
}
}
initBulge()
export function isPageTabbar(path: string) {
if (selectedTabbarStrategy === TABBAR_STRATEGY_MAP.NO_TABBAR) {
@@ -30,33 +44,55 @@ export function isPageTabbar(path: string) {
}
/**
* 自定义 tabbar 的状态管理，原生 tabbar 无需关注本文件
* tabbar 状态，增加 storageSync 保证刷新浏览器时在正确的 tabbar 页面
* 使用reactive简单状态，而不是 pinia 全局状态
* 自定义 tabbar 的状态管理
*/
const tabbarStore = reactive({
curIdx: uni.getStorageSync('app-tabbar-index') || 0,
prevIdx: uni.getStorageSync('app-tabbar-index') || 0,
setCurIdx(idx: number) {
this.curIdx = idx
uni.setStorageSync('app-tabbar-index', idx)
},
setTabbarItemBadge(idx: number, badge: CustomTabBarItemBadge) {
if (tabbarList[idx]) {
tabbarList[idx].badge = badge
}
},
/**
* 根据客户端类型切换 tabbar 列表
*/
setTabbarByClientType(clientType: ClientTypeKey) {
const newList = getTabbarListByClientType(clientType)
// 清空现有列表
tabbarList.length = 0
// 填充新列表
newList.forEach(item => {
tabbarList.push({
...item,
pagePath: (item.pagePath.startsWith('/') ? item.pagePath : `/${item.pagePath}`) as any,
})
})
// 重新初始化鼓包
initBulge()
// 重置当前索引
this.setCurIdx(0)
},
setAutoCurIdx(path: string) {
// '/' 当做首页
if (path === '/') {
this.setCurIdx(0)
return
}
const index = tabbarList.findIndex(item => item.pagePath === path)
// console.log('tabbarList:', tabbarList)
if (index === -1) {
const pagesPathList = getCurrentPages().map(item => item.route.startsWith('/') ? item.route : `/${item.route}`)
// console.log(pagesPathList)
const flag = tabbarList.some(item => pagesPathList.includes(item.pagePath))
if (!flag) {
this.setCurIdx(0)
@@ -67,6 +103,7 @@ const tabbarStore = reactive({
this.setCurIdx(index)
}
},
restorePrevIdx() {
if (this.prevIdx === this.curIdx)
return
@@ -76,3 +113,4 @@ const tabbarStore = reactive({
})
export { tabbarList, tabbarStore }

19
uno.config.ts
View File

@@ -70,10 +70,21 @@ export default defineConfig({
center: 'flex justify-center items-center',
},
],
// 动态图标需要在这里配置，或者写在vue页面中注释掉
safelist: ['i-carbon-code', 'i-carbon-home', 'i-carbon-user','i-carbon-shopping-cart','i-carbon-view-mode-2','i-carbon-webhook',
'i-carbon-restaurant','i-carbon-crop','i-carbon-ibm-deployable-architecture',
'i-carbon-edge-device','i-carbon-ibm-cloud-direct-link-1-dedicated-hosting','i-carbon-face-satisfied','i-carbon-document-attachment'],
// 动态图标需要在这里配置
safelist: [
// 基础图标
'i-carbon-code', 'i-carbon-home', 'i-carbon-user', 'i-carbon-shopping-cart', 'i-carbon-view-mode-2', 'i-carbon-webhook',
'i-carbon-restaurant', 'i-carbon-crop', 'i-carbon-ibm-deployable-architecture',
'i-carbon-edge-device', 'i-carbon-ibm-cloud-direct-link-1-dedicated-hosting', 'i-carbon-face-satisfied', 'i-carbon-document-attachment',
// 商家端/银行端 tabbar 图标
'i-carbon-dashboard', 'i-carbon-document', 'i-carbon-product', 'i-carbon-wallet',
'i-carbon-analytics', 'i-carbon-task-approved', 'i-carbon-group', 'i-carbon-report',
// 登录页端类型选择图标
'i-carbon-store', 'i-carbon-bank', 'i-carbon-checkmark-filled',
// 菜单图标
'i-carbon-settings', 'i-carbon-customer-service', 'i-carbon-help', 'i-carbon-information',
'i-carbon-add', 'i-carbon-add-alt', 'i-carbon-document-add', 'i-carbon-chevron-right',
],
rules: [
[
'p-safe',