feat: UniApp移动端项目初始化及核心页面开发

新增:
- fund-mobile/: UniApp移动端项目(Vue3 + TypeScript)
- manifest.json: 应用配置(支持H5/小程序/App)
- pages.json: 页面路由及TabBar配置
- App.vue: 应用入口,登录状态检查

核心页面:
- login/index.vue: 登录页面(193行)
  * 渐变背景设计
  * JWT登录集成
  * 本地存储token

- index/index.vue: 首页(338行)
  * 数据概览卡片(今日收支/待收付款)
  * 快捷操作入口
  * 最近收支列表

- expense/add.vue: 支出录入(339行)
  * 表单验证
  * 图片上传(拍照/相册)
  * 关联项目选择

配置:
- config/api.ts: API接口地址配置
- utils/request.ts: 请求拦截封装

技术栈:
- Vue 3 Composition API
- TypeScript
- UniApp跨端框架
- SCSS样式

支持平台:
- H5
- 微信小程序
- App(Android/iOS)
This commit is contained in:
zhangjf 2026-02-16 11:26:16 +08:00
parent 67832bd108
commit 515590477b
28 changed files with 18976 additions and 0 deletions

21
fund-mobile/.gitignore vendored Normal file
View File

@ -0,0 +1,21 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
*.local
# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

3
fund-mobile/.npmrc Normal file
View File

@ -0,0 +1,3 @@
strict-peer-dependencies=false
auto-install-peers=true
shamefully-hoist=true

12
fund-mobile/.vscode/extensions.json vendored Normal file
View File

@ -0,0 +1,12 @@
{
"recommendations": [
"vue.volar",
"mrmaoddxxaa.create-uniapp-view",
"uni-helper.uni-helper-vscode",
"uni-helper.uni-app-schemas-vscode",
"uni-helper.uni-highlight-vscode",
"uni-helper.uni-ui-snippets-vscode",
"uni-helper.uni-app-snippets-vscode",
"uni-helper.uni-cloud-snippets-vscode"
]
}

6
fund-mobile/.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,6 @@
{
"files.associations": {
"pages.json": "jsonc",
"manifest.json": "jsonc"
}
}

21
fund-mobile/index.html Normal file
View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="icon" href="static/logo.svg">
<script>
const coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)')
|| CSS.supports('top: constant(a)'))
document.write(
`<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0${
coverSupport ? ', viewport-fit=cover' : ''}" />`)
</script>
<title></title>
<!--preload-links-->
<!--app-context-->
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

18
fund-mobile/jsconfig.json Normal file
View File

@ -0,0 +1,18 @@
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
},
"types": [
"vite/client",
"@dcloudio/types",
"@mini-types/alipay",
"miniprogram-api-typings",
"@uni-helper/uni-types"
]
},
"vueCompilerOptions": {
"plugins": ["@uni-helper/uni-types/volar-plugin"]
}
}

17340
fund-mobile/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

48
fund-mobile/package.json Normal file
View File

@ -0,0 +1,48 @@
{
"name": "fund-mobile",
"type": "module",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "unh dev",
"build": "unh build",
"about": "unh info"
},
"dependencies": {
"@dcloudio/uni-app": "3.0.0-4080720251210001",
"@dcloudio/uni-app-harmony": "3.0.0-4080720251210001",
"@dcloudio/uni-app-plus": "3.0.0-4080720251210001",
"@dcloudio/uni-components": "3.0.0-4080720251210001",
"@dcloudio/uni-h5": "3.0.0-4080720251210001",
"@dcloudio/uni-mp-alipay": "3.0.0-4080720251210001",
"@dcloudio/uni-mp-baidu": "3.0.0-4080720251210001",
"@dcloudio/uni-mp-harmony": "3.0.0-4080720251210001",
"@dcloudio/uni-mp-jd": "3.0.0-4080720251210001",
"@dcloudio/uni-mp-kuaishou": "3.0.0-4080720251210001",
"@dcloudio/uni-mp-lark": "3.0.0-4080720251210001",
"@dcloudio/uni-mp-qq": "3.0.0-4080720251210001",
"@dcloudio/uni-mp-toutiao": "3.0.0-4080720251210001",
"@dcloudio/uni-mp-weixin": "3.0.0-4080720251210001",
"@dcloudio/uni-mp-xhs": "3.0.0-4080720251210001",
"@dcloudio/uni-quickapp-webview": "3.0.0-4080720251210001",
"uview-plus": "^3.7.13",
"vue": "3.4.21",
"vue-i18n": "9.6.2",
"vue-router": "4.5.1"
},
"devDependencies": {
"@dcloudio/types": "3.4.19",
"@dcloudio/uni-automator": "3.0.0-4080720251210001",
"@dcloudio/uni-cli-shared": "3.0.0-4080720251210001",
"@dcloudio/uni-stacktracey": "3.0.0-4080720251210001",
"@dcloudio/vite-plugin-uni": "3.0.0-4080720251210001",
"@mini-types/alipay": "^3.0.14",
"@uni-helper/plugin-uni": "0.1.0",
"@uni-helper/unh": "^0.2.10",
"@uni-helper/uni-types": "^1.0.0-alpha.7",
"@vue/runtime-core": "3.4.21",
"miniprogram-api-typings": "^5.0.0",
"sass": "1.64.2",
"vite": "5.2.8"
}
}

38
fund-mobile/src/App.vue Normal file
View File

@ -0,0 +1,38 @@
<script setup lang="ts">
import { onLaunch, onShow } from '@dcloudio/uni-app'
onLaunch(() => {
console.log('App Launch')
//
const token = uni.getStorageSync('token')
if (!token) {
uni.reLaunch({
url: '/pages/login/index'
})
}
})
onShow(() => {
console.log('App Show')
})
</script>
<style>
/* 全局样式 */
page {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
/* 重置按钮样式 */
button {
margin: 0;
padding: 0;
background: none;
border: none;
line-height: inherit;
}
button::after {
border: none;
}
</style>

View File

@ -0,0 +1,34 @@
<script setup>
function handleClickGithub() {
if (window?.open) {
window.open('https://github.com/uni-helper/create-uni')
}
else {
uni.showToast({
icon: 'none',
title: '请使用浏览器打开',
})
}
}
</script>
<template>
<view class="footer" @click="handleClickGithub">
<image class="uni-helper-github__image" src="/static/github.svg" />
</view>
</template>
<style>
.footer{
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
color: #888;
}
.uni-helper-github__image {
display: inline-block;
height: 1em;
width: 1em;
}
</style>

View File

@ -0,0 +1,59 @@
<script setup>
</script>
<template>
<view class="container">
<view class="uni-helper-logo">
<image class="uni-helper-logo__image" src="/static/logo.svg" />
<text class="uni-helper-logo__label green">
uni-helper
</text>
</view>
<text class="link-bar">
+
</text>
<view class="uni-helper-logo">
<image class="uni-helper-logo__image" src="/static/vite.png" />
<text class="uni-helper-logo__label purple">
Vite
</text>
</view>
</view>
</template>
<style scoped lang="scss">
.container {
display: inline-flex;
font-size: 1.5rem;
font-weight: 300;
&:hover {
.link-bar {
transform: rotate(135deg);
}
}
}
.uni-helper-logo {
display: flex;
flex-direction: column;
align-items: center;
.uni-helper-logo__image {
display: inline-block;
height: 4.5rem;
width: 4.5rem;
}
.uni-helper-logo__label {
margin-top: -0.5rem;
}
.green {
color: #22c55e;
};
.purple {
color: #a855f7;
}
}
.link-bar {
color: #9ca3af;
margin: auto 1em;
transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
</style>

View File

@ -0,0 +1,52 @@
<script setup>
import { ref } from 'vue'
const name = ref('')
const show = ref(false)
function handleClick() {
show.value = true
setTimeout(() => {
show.value = false
}, 3000)
}
</script>
<template>
<view class="input-box">
<input
v-model="name"
placeholder="What's your name?"
>
</view>
<view>
<button :disabled="!name" @click="handleClick">
Hello
</button>
</view>
<view v-show="show" class="popup">
<text class="popup_label">
Hello{{ ` ${name}` }} 👏
</text>
</view>
</template>
<style scoped lang="scss">
.input-box {
margin: 1rem;
padding: 0.5rem;
border-bottom: 1px solid gray;
}
.popup {
position: fixed;
top: 2rem;
left: 0px;
right: 0px;
.popup_label {
padding: 0.5rem 2rem;
background: gray;
border-radius: 8px;
}
}
</style>

View File

@ -0,0 +1,30 @@
// API配置
const API_BASE_URL = 'http://localhost:8080'
export const API_URLS = {
// 认证
login: `${API_BASE_URL}/api/v1/auth/login`,
refreshToken: `${API_BASE_URL}/api/v1/auth/refresh`,
// 首页数据
dashboard: `${API_BASE_URL}/api/v1/dashboard`,
// 客户
customerList: `${API_BASE_URL}/api/v1/customer/list`,
customerDetail: (id: number) => `${API_BASE_URL}/api/v1/customer/${id}`,
// 项目
projectList: `${API_BASE_URL}/api/v1/project/list`,
projectDetail: (id: number) => `${API_BASE_URL}/api/v1/project/${id}`,
// 收支
expenseList: `${API_BASE_URL}/api/v1/expense/list`,
expenseSave: `${API_BASE_URL}/api/v1/expense`,
receiptList: `${API_BASE_URL}/api/v1/receipt/list`,
receiptSave: `${API_BASE_URL}/api/v1/receipt`,
// 文件上传
upload: `${API_BASE_URL}/api/v1/file/upload`,
}
export default API_URLS

9
fund-mobile/src/main.js Normal file
View File

@ -0,0 +1,9 @@
import { createSSRApp } from 'vue'
import App from './App.vue'
export function createApp() {
const app = createSSRApp(App)
return {
app,
}
}

View File

@ -0,0 +1,63 @@
{
"name" : "资金服务平台",
"appid" : "__UNI__FUNDPLATFORM",
"description" : "资金服务平台移动端",
"versionName" : "1.0.0",
"versionCode" : "100",
"transformPx" : false,
"app-plus" : {
"usingComponents" : true,
"nvueStyleCompiler" : "uni-app",
"compilerVersion" : 3,
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
"modules" : {},
"distribute" : {
"android" : {
"permissions" : [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\" />",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\" />",
"<uses-permission android:name=\"android.permission.VIBRATE\" />",
"<uses-permission android:name=\"android.permission.READ_LOGS\" />",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\" />",
"<uses-feature android:name=\"android.hardware.camera.autofocus\" />",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\" />",
"<uses-permission android:name=\"android.permission.CAMERA\" />",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\" />",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\" />",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\" />",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\" />",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\" />",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\" />"
]
},
"ios" : {},
"sdkConfigs" : {}
}
},
"quickapp" : {},
"mp-weixin" : {
"appid" : "",
"setting" : {
"urlCheck" : false
},
"usingComponents" : true
},
"mp-alipay" : {
"usingComponents" : true
},
"mp-baidu" : {
"usingComponents" : true
},
"mp-toutiao" : {
"usingComponents" : true
},
"uniStatistics" : {
"enable" : false
},
"vueVersion" : "3"
}

View File

@ -0,0 +1,97 @@
{
"pages": [
{
"path": "pages/login/index",
"style": {
"navigationBarTitleText": "登录",
"navigationStyle": "custom"
}
},
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/expense/add",
"style": {
"navigationBarTitleText": "支出录入"
}
},
{
"path": "pages/receipt/add",
"style": {
"navigationBarTitleText": "收款录入"
}
},
{
"path": "pages/customer/list",
"style": {
"navigationBarTitleText": "客户列表"
}
},
{
"path": "pages/customer/detail",
"style": {
"navigationBarTitleText": "客户详情"
}
},
{
"path": "pages/project/list",
"style": {
"navigationBarTitleText": "项目列表"
}
},
{
"path": "pages/project/detail",
"style": {
"navigationBarTitleText": "项目详情"
}
},
{
"path": "pages/my/index",
"style": {
"navigationBarTitleText": "我的"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "资金服务平台",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"color": "#999999",
"selectedColor": "#667eea",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "static/tabbar/home.png",
"selectedIconPath": "static/tabbar/home-active.png",
"text": "首页"
},
{
"pagePath": "pages/customer/list",
"iconPath": "static/tabbar/customer.png",
"selectedIconPath": "static/tabbar/customer-active.png",
"text": "客户"
},
{
"pagePath": "pages/project/list",
"iconPath": "static/tabbar/project.png",
"selectedIconPath": "static/tabbar/project-active.png",
"text": "项目"
},
{
"pagePath": "pages/my/index",
"iconPath": "static/tabbar/my.png",
"selectedIconPath": "static/tabbar/my-active.png",
"text": "我的"
}
]
}
}

View File

@ -0,0 +1,338 @@
<template>
<view class="container">
<view class="form-card">
<view class="form-title">支出录入</view>
<view class="form-item">
<text class="label">支出金额 <text class="required">*</text></text>
<input
class="input"
v-model="form.amount"
placeholder="请输入金额"
type="digit"
/>
</view>
<view class="form-item">
<text class="label">支出类型 <text class="required">*</text></text>
<picker mode="selector" :range="expenseTypes" :value="typeIndex" @change="onTypeChange">
<view class="picker">
{{ form.expenseTypeName || '请选择支出类型' }}
<text class="arrow">></text>
</view>
</picker>
</view>
<view class="form-item">
<text class="label">支出日期 <text class="required">*</text></text>
<picker mode="date" :value="form.expenseDate" @change="onDateChange">
<view class="picker">
{{ form.expenseDate || '请选择日期' }}
<text class="arrow">></text>
</view>
</picker>
</view>
<view class="form-item">
<text class="label">关联项目</text>
<picker mode="selector" :range="projects" range-key="projectName" :value="projectIndex" @change="onProjectChange">
<view class="picker">
{{ form.projectName || '请选择项目(可选)' }}
<text class="arrow">></text>
</view>
</picker>
</view>
<view class="form-item">
<text class="label">支出说明</text>
<textarea
class="textarea"
v-model="form.remark"
placeholder="请输入支出说明"
maxlength="200"
/>
</view>
<view class="form-item">
<text class="label">上传凭证</text>
<view class="upload-box" @click="chooseImage">
<image v-if="form.voucherUrl" :src="form.voucherUrl" mode="aspectFit" class="preview-img"></image>
<view v-else class="upload-placeholder">
<text class="icon">📷</text>
<text>点击拍照或选择图片</text>
</view>
</view>
</view>
</view>
<button class="submit-btn" @click="handleSubmit" :loading="loading">
提交
</button>
</view>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { API_URLS } from '@/config/api'
const form = ref({
amount: '',
expenseType: '',
expenseTypeName: '',
expenseDate: getToday(),
projectId: '',
projectName: '',
remark: '',
voucherUrl: ''
})
const loading = ref(false)
const expenseTypes = ['办公用品', '差旅费', '招待费', '交通费', '通讯费', '其他']
const typeIndex = ref(0)
const projects = ref<any[]>([])
const projectIndex = ref(0)
onMounted(() => {
loadProjects()
})
function getToday() {
const date = new Date()
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}
const loadProjects = async () => {
try {
const res: any = await uni.request({
url: API_URLS.projectList,
method: 'GET',
data: { current: 1, size: 100 }
})
if (res.statusCode === 200 && res.data.code === 200) {
projects.value = res.data.data.records || []
}
} catch (error) {
console.error('加载项目列表失败', error)
}
}
const onTypeChange = (e: any) => {
typeIndex.value = e.detail.value
form.value.expenseType = String(e.detail.value + 1)
form.value.expenseTypeName = expenseTypes[e.detail.value]
}
const onDateChange = (e: any) => {
form.value.expenseDate = e.detail.value
}
const onProjectChange = (e: any) => {
const index = e.detail.value
projectIndex.value = index
const project = projects.value[index]
if (project) {
form.value.projectId = project.projectId
form.value.projectName = project.projectName
}
}
const chooseImage = () => {
uni.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['camera', 'album'],
success: (res: any) => {
const tempFilePath = res.tempFilePaths[0]
uploadImage(tempFilePath)
}
})
}
const uploadImage = async (filePath: string) => {
try {
uni.showLoading({ title: '上传中...' })
const uploadRes: any = await uni.uploadFile({
url: API_URLS.upload,
filePath: filePath,
name: 'file'
})
const data = JSON.parse(uploadRes.data)
if (data.code === 200) {
form.value.voucherUrl = data.data.url
uni.showToast({ title: '上传成功', icon: 'success' })
} else {
uni.showToast({ title: '上传失败', icon: 'none' })
}
} catch (error) {
uni.showToast({ title: '上传失败', icon: 'none' })
} finally {
uni.hideLoading()
}
}
const handleSubmit = async () => {
if (!form.value.amount) {
uni.showToast({ title: '请输入金额', icon: 'none' })
return
}
if (!form.value.expenseType) {
uni.showToast({ title: '请选择支出类型', icon: 'none' })
return
}
loading.value = true
try {
const res: any = await uni.request({
url: API_URLS.expenseSave,
method: 'POST',
data: form.value
})
if (res.statusCode === 200 && res.data.code === 200) {
uni.showToast({
title: '提交成功',
icon: 'success'
})
setTimeout(() => {
uni.navigateBack()
}, 1500)
} else {
uni.showToast({
title: res.data.message || '提交失败',
icon: 'none'
})
}
} catch (error) {
uni.showToast({ title: '网络错误', icon: 'none' })
} finally {
loading.value = false
}
}
</script>
<style lang="scss" scoped>
.container {
min-height: 100vh;
background: #f5f7fa;
padding: 20rpx;
}
.form-card {
background: #fff;
border-radius: 16rpx;
padding: 30rpx;
margin-bottom: 30rpx;
}
.form-title {
font-size: 36rpx;
font-weight: bold;
color: #333;
margin-bottom: 30rpx;
padding-bottom: 20rpx;
border-bottom: 1rpx solid #f0f0f0;
}
.form-item {
margin-bottom: 30rpx;
.label {
display: block;
font-size: 28rpx;
color: #333;
margin-bottom: 16rpx;
font-weight: 500;
.required {
color: #ff4d4f;
}
}
.input {
width: 100%;
height: 88rpx;
background: #f5f5f5;
border-radius: 12rpx;
padding: 0 24rpx;
font-size: 28rpx;
box-sizing: border-box;
}
.picker {
width: 100%;
height: 88rpx;
background: #f5f5f5;
border-radius: 12rpx;
padding: 0 24rpx;
font-size: 28rpx;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
color: #333;
.arrow {
color: #999;
}
}
.textarea {
width: 100%;
height: 200rpx;
background: #f5f5f5;
border-radius: 12rpx;
padding: 24rpx;
font-size: 28rpx;
box-sizing: border-box;
}
.upload-box {
width: 200rpx;
height: 200rpx;
background: #f5f5f5;
border-radius: 12rpx;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
.preview-img {
width: 100%;
height: 100%;
}
.upload-placeholder {
display: flex;
flex-direction: column;
align-items: center;
color: #999;
font-size: 24rpx;
.icon {
font-size: 48rpx;
margin-bottom: 8rpx;
}
}
}
}
.submit-btn {
width: 100%;
height: 96rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
font-size: 32rpx;
font-weight: 500;
border-radius: 48rpx;
margin-top: 40rpx;
&:active {
opacity: 0.9;
}
}
</style>

View File

@ -0,0 +1,20 @@
<script setup>
import AppFooter from '@/components/AppFooter.vue'
import AppLogos from '@/components/AppLogos.vue'
import InputEntry from '@/components/InputEntry.vue'
</script>
<template>
<view class="root-container">
<AppLogos />
<InputEntry />
<AppFooter />
</view>
</template>
<style scoped>
.root-container {
padding: 5rem 2.5rem;
text-align: center;
}
</style>

View File

@ -0,0 +1,337 @@
<template>
<view class="container">
<!-- 数据概览卡片 -->
<view class="dashboard-cards">
<view class="card income">
<view class="card-icon">💰</view>
<view class="card-info">
<text class="label">今日收入</text>
<text class="value">¥{{ dashboard.todayIncome || '0.00' }}</text>
</view>
</view>
<view class="card expense">
<view class="card-icon">💸</view>
<view class="card-info">
<text class="label">今日支出</text>
<text class="value">¥{{ dashboard.todayExpense || '0.00' }}</text>
</view>
</view>
<view class="card receivable">
<view class="card-icon">📥</view>
<view class="card-info">
<text class="label">待收款</text>
<text class="value">¥{{ dashboard.pendingReceipt || '0.00' }}</text>
</view>
</view>
<view class="card payable">
<view class="card-icon">📤</view>
<view class="card-info">
<text class="label">待付款</text>
<text class="value">¥{{ dashboard.pendingPayment || '0.00' }}</text>
</view>
</view>
</view>
<!-- 快捷入口 -->
<view class="quick-actions">
<view class="section-title">快捷操作</view>
<view class="action-grid">
<view class="action-item" @click="navigateTo('/pages/expense/add')">
<view class="action-icon expense-icon"></view>
<text>记支出</text>
</view>
<view class="action-item" @click="navigateTo('/pages/receipt/add')">
<view class="action-icon income-icon"></view>
<text>记收款</text>
</view>
<view class="action-item" @click="navigateTo('/pages/customer/list')">
<view class="action-icon customer-icon">👥</view>
<text>客户</text>
</view>
<view class="action-item" @click="navigateTo('/pages/project/list')">
<view class="action-icon project-icon">📁</view>
<text>项目</text>
</view>
</view>
</view>
<!-- 最近收支 -->
<view class="recent-list">
<view class="section-title">最近收支</view>
<view class="list-content">
<view
class="list-item"
v-for="(item, index) in recentList"
:key="index"
@click="viewDetail(item)"
>
<view class="item-left">
<view class="type-tag" :class="item.type">{{ item.typeName }}</view>
<view class="item-info">
<text class="title">{{ item.title }}</text>
<text class="time">{{ item.time }}</text>
</view>
</view>
<text class="amount" :class="item.type">
{{ item.type === 'income' ? '+' : '-' }}¥{{ item.amount }}
</text>
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { API_URLS } from '@/config/api'
const dashboard = ref<any>({})
const recentList = ref<any[]>([])
onMounted(() => {
loadDashboard()
loadRecentList()
})
const loadDashboard = async () => {
try {
const res: any = await uni.request({
url: API_URLS.dashboard,
method: 'GET'
})
if (res.statusCode === 200 && res.data.code === 200) {
dashboard.value = res.data.data
}
} catch (error) {
console.error('加载仪表盘数据失败', error)
}
}
const loadRecentList = () => {
//
recentList.value = [
{ type: 'expense', typeName: '支出', title: '办公用品采购', amount: '1,250.00', time: '今天 14:30' },
{ type: 'income', typeName: '收款', title: '项目A首付款', amount: '50,000.00', time: '今天 10:15' },
{ type: 'expense', typeName: '支出', title: '差旅费报销', amount: '3,680.00', time: '昨天 16:45' },
{ type: 'income', typeName: '收款', title: '客户B尾款', amount: '28,000.00', time: '昨天 09:20' },
]
}
const navigateTo = (url: string) => {
uni.navigateTo({ url })
}
const viewDetail = (item: any) => {
uni.showToast({
title: '查看详情:' + item.title,
icon: 'none'
})
}
</script>
<style lang="scss" scoped>
.container {
min-height: 100vh;
background: #f5f7fa;
padding: 20rpx;
}
.dashboard-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20rpx;
margin-bottom: 30rpx;
}
.card {
background: #fff;
border-radius: 16rpx;
padding: 30rpx;
display: flex;
align-items: center;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
&.income {
border-left: 6rpx solid #52c41a;
}
&.expense {
border-left: 6rpx solid #ff4d4f;
}
&.receivable {
border-left: 6rpx solid #1890ff;
}
&.payable {
border-left: 6rpx solid #faad14;
}
.card-icon {
font-size: 48rpx;
margin-right: 20rpx;
}
.card-info {
flex: 1;
.label {
display: block;
font-size: 24rpx;
color: #999;
margin-bottom: 8rpx;
}
.value {
display: block;
font-size: 32rpx;
font-weight: bold;
color: #333;
}
}
}
.quick-actions {
background: #fff;
border-radius: 16rpx;
padding: 30rpx;
margin-bottom: 30rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
.section-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
margin-bottom: 24rpx;
}
.action-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20rpx;
}
.action-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 20rpx 0;
&:active {
opacity: 0.7;
}
.action-icon {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 48rpx;
margin-bottom: 12rpx;
&.expense-icon {
background: #fff1f0;
}
&.income-icon {
background: #f6ffed;
}
&.customer-icon {
background: #e6f7ff;
}
&.project-icon {
background: #fff7e6;
}
}
text {
font-size: 24rpx;
color: #666;
}
}
.recent-list {
background: #fff;
border-radius: 16rpx;
padding: 30rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
.list-content {
.list-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24rpx 0;
border-bottom: 1rpx solid #f0f0f0;
&:last-child {
border-bottom: none;
}
&:active {
background: #f5f5f5;
}
.item-left {
display: flex;
align-items: center;
flex: 1;
.type-tag {
padding: 8rpx 16rpx;
border-radius: 8rpx;
font-size: 22rpx;
margin-right: 20rpx;
&.income {
background: #f6ffed;
color: #52c41a;
}
&.expense {
background: #fff1f0;
color: #ff4d4f;
}
}
.item-info {
.title {
display: block;
font-size: 28rpx;
color: #333;
margin-bottom: 8rpx;
}
.time {
display: block;
font-size: 22rpx;
color: #999;
}
}
}
.amount {
font-size: 32rpx;
font-weight: bold;
&.income {
color: #52c41a;
}
&.expense {
color: #ff4d4f;
}
}
}
}
</style>

View File

@ -0,0 +1,192 @@
<template>
<view class="login-container">
<view class="login-header">
<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
<text class="title">资金服务平台</text>
<text class="subtitle">移动办公助手</text>
</view>
<view class="login-form">
<view class="form-item">
<text class="label">用户名</text>
<input
class="input"
v-model="form.username"
placeholder="请输入用户名"
type="text"
/>
</view>
<view class="form-item">
<text class="label">密码</text>
<input
class="input"
v-model="form.password"
placeholder="请输入密码"
type="password"
/>
</view>
<button class="login-btn" @click="handleLogin" :loading="loading">
登录
</button>
<view class="tips">
<text>演示账号admin / admin123</text>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { API_URLS } from '@/config/api'
const form = ref({
username: '',
password: ''
})
const loading = ref(false)
const handleLogin = async () => {
if (!form.value.username) {
uni.showToast({ title: '请输入用户名', icon: 'none' })
return
}
if (!form.value.password) {
uni.showToast({ title: '请输入密码', icon: 'none' })
return
}
loading.value = true
try {
const res: any = await uni.request({
url: API_URLS.login,
method: 'POST',
data: form.value
})
if (res.statusCode === 200 && res.data.code === 200) {
const { token, userInfo } = res.data.data
//
uni.setStorageSync('token', token)
uni.setStorageSync('userInfo', userInfo)
uni.showToast({
title: '登录成功',
icon: 'success'
})
//
setTimeout(() => {
uni.switchTab({
url: '/pages/index/index'
})
}, 1500)
} else {
uni.showToast({
title: res.data.message || '登录失败',
icon: 'none'
})
}
} catch (error) {
uni.showToast({
title: '网络错误',
icon: 'none'
})
} finally {
loading.value = false
}
}
</script>
<style lang="scss" scoped>
.login-container {
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 60rpx 40rpx;
box-sizing: border-box;
}
.login-header {
text-align: center;
margin-bottom: 80rpx;
.logo {
width: 160rpx;
height: 160rpx;
margin-bottom: 30rpx;
}
.title {
display: block;
font-size: 48rpx;
font-weight: bold;
color: #fff;
margin-bottom: 16rpx;
}
.subtitle {
display: block;
font-size: 28rpx;
color: rgba(255, 255, 255, 0.8);
}
}
.login-form {
background: #fff;
border-radius: 20rpx;
padding: 60rpx 40rpx;
box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
}
.form-item {
margin-bottom: 40rpx;
.label {
display: block;
font-size: 28rpx;
color: #333;
margin-bottom: 16rpx;
font-weight: 500;
}
.input {
width: 100%;
height: 88rpx;
background: #f5f5f5;
border-radius: 12rpx;
padding: 0 24rpx;
font-size: 28rpx;
box-sizing: border-box;
}
}
.login-btn {
width: 100%;
height: 96rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
font-size: 32rpx;
font-weight: 500;
border-radius: 48rpx;
margin-top: 40rpx;
&:active {
opacity: 0.9;
}
}
.tips {
text-align: center;
margin-top: 40rpx;
text {
font-size: 24rpx;
color: #999;
}
}
</style>

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="currentColor" fill-rule="evenodd" d="M16 2a14 14 0 0 0-4.43 27.28c.7.13 1-.3 1-.67v-2.38c-3.89.84-4.71-1.88-4.71-1.88a3.71 3.71 0 0 0-1.62-2.05c-1.27-.86.1-.85.1-.85a2.94 2.94 0 0 1 2.14 1.45a3 3 0 0 0 4.08 1.16a2.93 2.93 0 0 1 .88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4 5.4 0 0 1 1.44-3.76a5 5 0 0 1 .14-3.7s1.17-.38 3.85 1.43a13.3 13.3 0 0 1 7 0c2.67-1.81 3.84-1.43 3.84-1.43a5 5 0 0 1 .14 3.7a5.4 5.4 0 0 1 1.44 3.76c0 5.38-3.27 6.56-6.39 6.91a3.33 3.33 0 0 1 .95 2.59v3.84c0 .46.25.81 1 .67A14 14 0 0 0 16 2"/></svg>

After

Width:  |  Height:  |  Size: 614 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="512" height="512" viewBox="0 0 512 512"><defs><clipPath id="master_svg0_25_97"><rect x="0" y="0" width="512" height="512" rx="0"/></clipPath><clipPath id="master_svg1_25_11"><rect x="11" y="39" width="490" height="435" rx="0"/></clipPath></defs><g style="mix-blend-mode:passthrough" clip-path="url(#master_svg0_25_97)"><g clip-path="url(#master_svg1_25_11)"><g><path d="M51.4931,294.222767578125L205.214,437.551767578125C211.594,443.498767578125,220.016,446.812767578125,228.778,446.812767578125C237.54,446.812767578125,245.962,443.498767578125,252.342,437.551767578125L254.554,435.512767578125C238.306,411.638767578125,228.778,382.751767578125,228.778,351.655767578125C228.778,269.073767578125,295.812,202.124767578125,378.5,202.124767578125C402.575,202.124767578125,425.288,207.817767578125,445.45,217.842767578125C446.215,212.320767578125,446.556,206.797767578125,446.556,201.19076757812502L446.556,196.262767578125C446.556,136.874967578125,403.595,86.238267578125,344.983,76.467747578125C306.191,70.010717578125,266.719,82.669897578125,238.986,110.36716757812499L228.778,120.562467578125L218.569,110.36716757812499C190.837,82.669897578125,151.365,70.010717578125,112.573,76.467747578125C53.9601,86.238267578125,11,136.874967578125,11,196.262767578125L11,201.19076757812502C11,236.448767578125,25.6319,270.17876757812496,51.4931,294.222767578125ZM378.5,473.999767578125C446.13,473.999767578125,501,419.199767578125,501,351.655767578125C501,284.112767578125,446.13,229.312767578125,378.5,229.312767578125C310.87,229.312767578125,256,284.112767578125,256,351.655767578125C256,419.199767578125,310.87,473.999767578125,378.5,473.999767578125Z" fill="#2B9939" fill-opacity="1"/></g><g style="mix-blend-mode:passthrough"><path d="M322,415L441,415L441,293.5L419,293.5L419,393L344.5,393L344.5,293.5L322,293.5L322,415Z" fill="#FFFFFF" fill-opacity="1"/></g></g></g></svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.5 KiB

View File

@ -0,0 +1,26 @@
{
"light": {
"bgColor": "#fcfcfc",
"bgColorBottom": "#fcfcfc",
"bgColorTop": "#ff6b00",
"bgTxtStyle": "dark",
"navBgColor": "#ff6b00",
"navTxtStyle": "white",
"tabBgColor": "#fcfcfc",
"tabBorderStyle": "black",
"tabFontColor": "#1f2937",
"tabSelectedColor": "#ff6b00"
},
"dark": {
"bgColor": "#181818",
"bgColorBottom": "#181818",
"bgColorTop": "#ff6b00",
"bgTxtStyle": "light",
"navBgColor": "#ff6b00",
"navTxtStyle": "white",
"tabBgColor": "#181818",
"tabBorderStyle": "white",
"tabFontColor": "#f3f4f6",
"tabSelectedColor": "#ff6b00"
}
}

76
fund-mobile/src/uni.scss Normal file
View File

@ -0,0 +1,76 @@
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场https://ext.dcloud.net.cn上很多三方插件均使用了这些样式变量
* 如果你是插件开发者建议你使用scss预处理并在插件代码中直接使用这些变量无需 import 这个文件方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/**
* 如果你是App开发者插件使用者你可以通过修改这些变量来定制自己的插件主题实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理你也可以直接在你的 scss 代码中使用如下变量同时无需 import 这个文件
*/
/* 颜色变量 */
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
/* 文字基本颜色 */
$uni-text-color: #333; // 基本色
$uni-text-color-inverse: #fff; // 反色
$uni-text-color-grey: #999; // 辅助灰色如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable: #c0c0c0;
/* 背景颜色 */
$uni-bg-color: #fff;
$uni-bg-color-grey: #f8f8f8;
$uni-bg-color-hover: #f1f1f1; // 点击状态颜色
$uni-bg-color-mask: rgba(0, 0, 0, 0.4); // 遮罩颜色
/* 边框颜色 */
$uni-border-color: #c8c7cc;
/* 尺寸变量 */
/* 文字尺寸 */
$uni-font-size-sm: 12px;
$uni-font-size-base: 14px;
$uni-font-size-lg: 16px;
/* 图片尺寸 */
$uni-img-size-sm: 20px;
$uni-img-size-base: 26px;
$uni-img-size-lg: 40px;
/* Border Radius */
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;
/* 水平间距 */
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;
/* 垂直间距 */
$uni-spacing-col-sm: 4px;
$uni-spacing-col-base: 8px;
$uni-spacing-col-lg: 12px;
/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
/* 文章场景相关 */
$uni-color-title: #2c405a; // 文章标题颜色
$uni-font-size-title: 20px;
$uni-color-subtitle: #555; // 二级标题颜色
$uni-font-size-subtitle: 18px;
$uni-color-paragraph: #3f536e; // 文章段落颜色
$uni-font-size-paragraph: 15px;

View File

@ -0,0 +1,98 @@
import API_URLS from '@/config/api'
// 请求拦截
const request = (options: any) => {
return new Promise((resolve, reject) => {
const token = uni.getStorageSync('token')
uni.request({
url: options.url,
method: options.method || 'GET',
data: options.data,
header: {
'Content-Type': 'application/json',
'Authorization': token ? `Bearer ${token}` : '',
...options.header
},
success: (res: any) => {
if (res.statusCode === 200) {
if (res.data.code === 200) {
resolve(res.data.data)
} else {
uni.showToast({
title: res.data.message || '请求失败',
icon: 'none'
})
reject(res.data)
}
} else if (res.statusCode === 401) {
// Token过期跳转到登录
uni.removeStorageSync('token')
uni.removeStorageSync('userInfo')
uni.reLaunch({
url: '/pages/login/index'
})
reject(new Error('登录已过期'))
} else {
uni.showToast({
title: '网络错误',
icon: 'none'
})
reject(res)
}
},
fail: (err: any) => {
uni.showToast({
title: '网络请求失败',
icon: 'none'
})
reject(err)
}
})
})
}
// GET请求
export const get = (url: string, params?: any) => {
return request({
url,
method: 'GET',
data: params
})
}
// POST请求
export const post = (url: string, data?: any) => {
return request({
url,
method: 'POST',
data
})
}
// 上传文件
export const upload = (url: string, filePath: string) => {
return new Promise((resolve, reject) => {
const token = uni.getStorageSync('token')
uni.uploadFile({
url,
filePath,
name: 'file',
header: {
'Authorization': token ? `Bearer ${token}` : ''
},
success: (res: any) => {
const data = JSON.parse(res.data)
if (data.code === 200) {
resolve(data.data)
} else {
reject(data)
}
},
fail: reject
})
})
}
export default request

17
fund-mobile/unh.config.js Normal file
View File

@ -0,0 +1,17 @@
import { defineConfig } from '@uni-helper/unh'
/**
* unh 配置文件
* 更多配置请参考https://uni-helper.js.org/unh/
*/
export default defineConfig({
platform: {
// 默认平台
default: 'h5',
// 平台别名
alias: {
'h5': ['w', 'h'],
'mp-weixin': 'wx',
},
},
})

View File

@ -0,0 +1,19 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import Uni from '@uni-helper/plugin-uni'
export default defineConfig({
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
plugins: [
// https://uni-helper.js.org/plugin-uni
Uni(),
],
})