molong/account
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
molong
2026-01-18 17:42:46 +08:00
parent 836bdc9409
commit f038dbab41
42 changed files with 3068 additions and 575 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
resources/mobile/pages/account/bill/index.vue Normal file
View File

@@ -0,0 +1,46 @@
<template>
<un-pages
:show-nav-bar="true"
nav-bar-title="账单"
:show-back="false"
:show-tab-bar="true"
@tab-change="handleTabChange"
>
<view class="page-content">
<view class="empty-state">
<uni-icons type="list" size="100" color="#ddd"></uni-icons>
<text class="empty-text">账单功能开发中</text>
</view>
</view>
</un-pages>
</template>
<script>
export default {
methods: {
handleTabChange(path) {
console.log('Tab changed to:', path)
}
}
}
</script>
<style lang="scss" scoped>
.page-content {
padding: 40rpx 30rpx;
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 200rpx 0;
.empty-text {
font-size: 28rpx;
color: #999;
margin-top: 40rpx;
}
}
</style>

46
resources/mobile/pages/account/statistics/index.vue Normal file
View File

@@ -0,0 +1,46 @@
<template>
<un-pages
:show-nav-bar="true"
nav-bar-title="统计"
:show-back="false"
:show-tab-bar="true"
@tab-change="handleTabChange"
>
<view class="page-content">
<view class="empty-state">
<uni-icons type="chart" size="100" color="#ddd"></uni-icons>
<text class="empty-text">统计功能开发中</text>
</view>
</view>
</un-pages>
</template>
<script>
export default {
methods: {
handleTabChange(path) {
console.log('Tab changed to:', path)
}
}
}
</script>
<style lang="scss" scoped>
.page-content {
padding: 40rpx 30rpx;
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 200rpx 0;
.empty-text {
font-size: 28rpx;
color: #999;
margin-top: 40rpx;
}
}
</style>

163
resources/mobile/pages/index/index.vue
View File

@@ -1,52 +1,151 @@
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
<un-pages
:show-nav-bar="true"
nav-bar-title="首页"
:show-back="false"
:show-tab-bar="true"
@tab-change="handleTabChange"
>
<view class="page-content">
<view class="welcome-section">
<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
<text class="welcome-title">欢迎使用家庭记账</text>
<text class="welcome-desc">简单好用的家庭记账助手</text>
</view>
<view class="quick-actions">
<view class="action-card" @tap="navigateTo('/pages/account/bill/add')">
<uni-icons type="plus" size="40" color="#667eea"></uni-icons>
<text class="action-title">记一笔</text>
</view>
<view class="action-card" @tap="navigateTo('/pages/account/bill/index')">
<uni-icons type="list" size="40" color="#f093fb"></uni-icons>
<text class="action-title">账单</text>
</view>
</view>
<view class="recent-section">
<view class="section-header">
<text class="section-title">最近记录</text>
<text class="section-more" @tap="navigateTo('/pages/account/bill/index')">查看更多 ></text>
</view>
<view class="empty-list">
<text class="empty-text">暂无记录</text>
</view>
</view>
</view>
</view>
</un-pages>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
export default {
methods: {
handleTabChange(path) {
console.log('Tab changed to:', path)
// tabbar组件已经处理了跳转，这里不需要额外处理
},
onLoad() {
},
methods: {
navigateTo(url) {
uni.showToast({
title: '功能开发中',
icon: 'none',
duration: 2000
})
}
}
}
</script>
<style>
.content {
<style lang="scss" scoped>
.page-content {
padding: 40rpx 30rpx;
}
.welcome-section {
display: flex;
flex-direction: column;
align-items: center;
padding: 60rpx 0;
.logo {
width: 160rpx;
height: 160rpx;
margin-bottom: 30rpx;
border-radius: 20rpx;
background: rgba(255, 255, 255, 0.9);
padding: 20rpx;
}
.welcome-title {
font-size: 44rpx;
font-weight: bold;
color: #333;
margin-bottom: 16rpx;
}
.welcome-desc {
font-size: 28rpx;
color: #999;
}
}
.quick-actions {
display: flex;
justify-content: space-between;
margin: 60rpx 0;
.action-card {
flex: 1;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 20rpx;
padding: 40rpx 20rpx;
margin: 0 10rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
&:last-child {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.text-area {
.action-title {
font-size: 28rpx;
color: #fff;
margin-top: 20rpx;
}
}
}
.recent-section {
margin-top: 40rpx;
.section-header {
display: flex;
justify-content: center;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
.section-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.section-more {
font-size: 26rpx;
color: #667eea;
}
}
.title {
font-size: 36rpx;
color: #8f8f94;
.empty-list {
background: #fff;
border-radius: 20rpx;
padding: 80rpx 40rpx;
text-align: center;
.empty-text {
font-size: 28rpx;
color: #999;
}
}
}
</style>

356
resources/mobile/pages/ucenter/agreement/privacy.vue Normal file
View File

@@ -0,0 +1,356 @@
<template>
<view class="agreement-container">
<!-- 顶部导航栏 -->
<view class="nav-bar">
<view class="nav-back" @tap="goBack">
<uni-icons type="left" size="24" color="#333"></uni-icons>
</view>
<view class="nav-title">隐私政策</view>
<view class="nav-placeholder"></view>
</view>
<!-- 内容区域 -->
<scroll-view class="content-scroll" scroll-y>
<view class="agreement-content">
<view class="agreement-title">家庭记账隐私政策</view>
<view class="agreement-intro">
<text class="intro-text">
我们非常重视您的隐私保护。本隐私政策旨在向您说明我们如何收集、使用、存储和保护您的个人信息。使用我们的服务即表示您同意本隐私政策的条款。
</text>
</view>
<view class="agreement-section">
<text class="section-title">1. 信息收集</text>
<text class="section-text">
1.1 我们收集的信息包括：
</text>
<text class="section-text">
（1）账户信息：您在注册时提供的用户名、密码、昵称等；
</text>
<text class="section-text">
（2）使用信息：您使用应用的功能、频率、偏好等使用数据；
</text>
<text class="section-text">
（3）设备信息：设备型号、操作系统版本、唯一设备标识符等；
</text>
<text class="section-text">
（4）日志信息：访问时间、页面浏览记录、错误日志等。
</text>
<text class="section-text">
1.2 我们仅在为您提供服务和改进产品时收集必要的信息，绝不会收集与提供服务无关的信息。
</text>
</view>
<view class="agreement-section">
<text class="section-title">2. 信息使用</text>
<text class="section-text">
2.1 我们可能使用收集的信息用于：
</text>
<text class="section-text">
（1）提供、维护和改进我们的服务；
</text>
<text class="section-text">
（2）处理您的请求和交易；
</text>
<text class="section-text">
（3）向您发送与服务相关的通知和更新；
</text>
<text class="section-text">
（4）分析使用情况，优化用户体验；
</text>
<text class="section-text">
（5）防止欺诈、滥用和安全威胁；
</text>
<text class="section-text">
（6）遵守法律法规要求。
</text>
</view>
<view class="agreement-section">
<text class="section-title">3. 信息共享</text>
<text class="section-text">
3.1 除以下情况外，我们不会与第三方共享您的个人信息：
</text>
<text class="section-text">
（1）获得您的明确同意；
</text>
<text class="section-text">
（2）履行法律义务或响应法律要求；
</text>
<text class="section-text">
（3）保护我们的权利、财产或安全；
</text>
<text class="section-text">
（4）与提供服务的合作伙伴共享，但仅限于必要范围；
</text>
<text class="section-text">
（5）业务转让或合并时，涉及用户信息转移。
</text>
<text class="section-text">
3.2 所有共享的信息都会受到严格的保密协议和隐私保护。
</text>
</view>
<view class="agreement-section">
<text class="section-title">4. 信息存储与安全</text>
<text class="section-text">
4.1 我们采取合理的技术措施保护您的信息安全，包括但不限于：
</text>
<text class="section-text">
（1）数据加密传输和存储；
</text>
<text class="section-text">
（2）访问权限控制；
</text>
<text class="section-text">
（3）定期安全审计和风险评估；
</text>
<text class="section-text">
（4）员工保密培训和责任制度。
</text>
<text class="section-text">
4.2 我们在中华人民共和国境内存储您的个人信息。
</text>
<text class="section-text">
4.3 如发生信息泄露，我们将及时采取补救措施并通知您。
</text>
</view>
<view class="agreement-section">
<text class="section-title">5. Cookie和类似技术</text>
<text class="section-text">
5.1 我们可能使用Cookie和类似技术来收集和存储信息，以改善用户体验。
</text>
<text class="section-text">
5.2 您可以通过浏览器设置管理Cookie，但这可能影响某些功能的使用。
</text>
</view>
<view class="agreement-section">
<text class="section-title">6. 您的权利</text>
<text class="section-text">
6.1 您对个人信息享有以下权利：
</text>
<text class="section-text">
（1）访问、更正、删除您的个人信息；
</text>
<text class="section-text">
（2）撤回对信息处理的同意；
</text>
<text class="section-text">
（3）获取个人信息副本；
</text>
<text class="section-text">
（4）限制信息处理；
</text>
<text class="section-text">
（5）数据可携带权；
</text>
<text class="section-text">
（6）反对信息处理；
</text>
<text class="section-text">
（7）向监管机构投诉。
</text>
<text class="section-text">
6.2 您可以通过应用内设置或联系我们来行使这些权利。
</text>
</view>
<view class="agreement-section">
<text class="section-title">7. 信息保留</text>
<text class="section-text">
7.1 我们仅在实现收集目的所必需的期间内保留您的个人信息。
</text>
<text class="section-text">
7.2 当账户注销或收集目的实现后，我们将删除或匿名化处理您的信息，法律法规另有规定的除外。
</text>
</view>
<view class="agreement-section">
<text class="section-title">8. 未成年人保护</text>
<text class="section-text">
8.1 我们的服务主要面向成年人。如果您未满18周岁，请在监护人的陪同下使用本服务。
</text>
<text class="section-text">
8.2 如发现未经未成年人监护人同意收集未成年人信息的情况，请立即联系我们，我们将及时删除相关信息。
</text>
</view>
<view class="agreement-section">
<text class="section-title">9. 隐私政策的变更</text>
<text class="section-text">
9.1 我们可能不时更新本隐私政策。
</text>
<text class="section-text">
9.2 更新后的政策将在应用内公布，重大变更时我们会通过适当方式通知您。
</text>
<text class="section-text">
9.3 继续使用服务即表示您接受更新后的隐私政策。
</text>
</view>
<view class="agreement-section">
<text class="section-title">10. 联系我们</text>
<text class="section-text">
如对本隐私政策有任何疑问、意见或请求，请通过以下方式联系我们：
</text>
<text class="section-text">
邮箱：privacy@familyaccount.com
</text>
<text class="section-text">
电话：400-XXX-XXXX
</text>
<text class="section-text">
地址：中国XX省XX市XX区XX路XX号
</text>
</view>
<view class="agreement-section">
<text class="section-title">11. 适用法律</text>
<text class="section-text">
11.1 本隐私政策的订立、执行和解释均适用中华人民共和国法律。
</text>
<text class="section-text">
11.2 我们严格遵守《中华人民共和国个人信息保护法》、《网络安全法》等相关法律法规的规定。
</text>
</view>
<view class="agreement-footer">
<text class="footer-text">更新日期：2024年1月</text>
<text class="footer-text">生效日期：2024年1月1日</text>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
// 不需要登录验证
needLogin: false
}
},
methods: {
// 返回上一页
goBack() {
uni.navigateBack()
}
}
}
</script>
<style lang="scss" scoped>
.agreement-container {
min-height: 100vh;
background: #F8F8F8;
display: flex;
flex-direction: column;
}
.nav-bar {
display: flex;
align-items: center;
justify-content: space-between;
height: 88rpx;
padding: 0 30rpx;
background: #fff;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
position: sticky;
top: 0;
z-index: 100;
}
.nav-back {
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
}
.nav-title {
font-size: 36rpx;
font-weight: bold;
color: #333;
}
.nav-placeholder {
width: 60rpx;
}
.content-scroll {
flex: 1;
height: calc(100vh - 88rpx);
}
.agreement-content {
padding: 40rpx 30rpx;
background: #fff;
}
.agreement-title {
font-size: 40rpx;
font-weight: bold;
color: #333;
text-align: center;
margin-bottom: 40rpx;
}
.agreement-intro {
background: #f5f5f5;
padding: 30rpx;
border-radius: 10rpx;
margin-bottom: 40rpx;
}
.intro-text {
display: block;
font-size: 28rpx;
color: #666;
line-height: 1.8;
text-align: justify;
}
.agreement-section {
margin-bottom: 50rpx;
}
.section-title {
display: block;
font-size: 32rpx;
font-weight: bold;
color: #333;
margin-bottom: 20rpx;
}
.section-text {
display: block;
font-size: 28rpx;
color: #666;
line-height: 1.8;
margin-bottom: 20rpx;
text-align: justify;
}
.agreement-footer {
margin-top: 60rpx;
padding-top: 30rpx;
border-top: 1rpx solid #eee;
text-align: center;
}
.footer-text {
display: block;
font-size: 24rpx;
color: #999;
margin-bottom: 10rpx;
&:last-child {
margin-bottom: 0;
}
}
</style>

252
resources/mobile/pages/ucenter/agreement/user.vue Normal file
View File

@@ -0,0 +1,252 @@
<template>
<view class="agreement-container">
<!-- 顶部导航栏 -->
<view class="nav-bar">
<view class="nav-back" @tap="goBack">
<uni-icons type="left" size="24" color="#333"></uni-icons>
</view>
<view class="nav-title">用户协议</view>
<view class="nav-placeholder"></view>
</view>
<!-- 内容区域 -->
<scroll-view class="content-scroll" scroll-y>
<view class="agreement-content">
<view class="agreement-title">家庭记账用户协议</view>
<view class="agreement-section">
<text class="section-title">1. 服务条款的接受</text>
<text class="section-text">
欢迎使用家庭记账应用。通过下载、安装或使用本应用，即表示您同意遵守本用户协议的所有条款和条件。如果您不同意这些条款，请不要使用本应用。
</text>
</view>
<view class="agreement-section">
<text class="section-title">2. 服务说明</text>
<text class="section-text">
2.1 家庭记账是一款为用户提供记账、账单管理等服务的移动应用程序。
</text>
<text class="section-text">
2.2 我们保留随时修改或中断服务而不需通知用户的权利。
</text>
<text class="section-text">
2.3 用户需自行承担使用本服务所产生的风险，包括但不限于因使用本服务而导致的计算机系统损坏或数据丢失。
</text>
</view>
<view class="agreement-section">
<text class="section-title">3. 用户账号</text>
<text class="section-text">
3.1 用户注册成功后，将获得一个账号和密码。用户应妥善保管账号和密码，并对使用该账号和密码进行的所有活动承担责任。
</text>
<text class="section-text">
3.2 用户不得将账号转让、出借或以其他方式提供给他人使用。
</text>
<text class="section-text">
3.3 如发现任何非法使用账号的情况，应立即通知我们。
</text>
</view>
<view class="agreement-section">
<text class="section-title">4. 用户行为规范</text>
<text class="section-text">
4.1 用户在使用本服务时，必须遵守相关法律法规，不得利用本服务从事任何违法或不当行为。
</text>
<text class="section-text">
4.2 禁止用户：
</text>
<text class="section-text">
（1）发布或传输任何违法、有害、威胁、辱骂、骚扰、诽谤、侵犯隐私的信息；
</text>
<text class="section-text">
（2）侵犯他人的知识产权、商业秘密或其他合法权利；
</text>
<text class="section-text">
（3）干扰或破坏本服务的正常运行；
</text>
<text class="section-text">
（4）传播病毒、木马或其他恶意代码。
</text>
</view>
<view class="agreement-section">
<text class="section-title">5. 隐私保护</text>
<text class="section-text">
我们重视用户的隐私保护。关于个人信息收集、使用和保护的具体内容，请参阅我们的《隐私政策》。
</text>
</view>
<view class="agreement-section">
<text class="section-title">6. 知识产权</text>
<text class="section-text">
6.1 本应用的所有内容，包括但不限于文字、图片、音频、视频、软件、程序、版面设计等，均受知识产权法保护。
</text>
<text class="section-text">
6.2 用户在使用本服务过程中产生的内容，用户保留其知识产权，但授权我们在服务范围内使用该内容。
</text>
</view>
<view class="agreement-section">
<text class="section-title">7. 免责声明</text>
<text class="section-text">
7.1 本服务按"现状"提供，不提供任何明示或暗示的保证。
</text>
<text class="section-text">
7.2 我们不对以下情况承担责任：
</text>
<text class="section-text">
（1）因用户使用本服务而产生的任何直接或间接损失；
</text>
<text class="section-text">
（2）因不可抗力、网络故障、系统维护等原因导致的服务中断；
</text>
<text class="section-text">
（3）第三方提供的内容或服务。
</text>
</view>
<view class="agreement-section">
<text class="section-title">8. 协议的修改</text>
<text class="section-text">
我们有权随时修改本协议的条款。修改后的协议一旦公布即代替原协议。用户如不同意修改后的协议，可以停止使用本服务。继续使用本服务即视为用户接受修改后的协议。
</text>
</view>
<view class="agreement-section">
<text class="section-title">9. 法律适用与争议解决</text>
<text class="section-text">
9.1 本协议的订立、执行和解释均适用中华人民共和国法律。
</text>
<text class="section-text">
9.2 如发生争议，双方应友好协商解决；协商不成的，任何一方均可向被告所在地人民法院提起诉讼。
</text>
</view>
<view class="agreement-section">
<text class="section-title">10. 联系我们</text>
<text class="section-text">
如对本协议有任何疑问或建议，请通过以下方式联系我们：
</text>
<text class="section-text">
邮箱：support@familyaccount.com
</text>
<text class="section-text">
电话：400-XXX-XXXX
</text>
</view>
<view class="agreement-footer">
<text class="footer-text">更新日期：2024年1月</text>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
// 不需要登录验证
needLogin: false
}
},
methods: {
// 返回上一页
goBack() {
uni.navigateBack()
}
}
}
</script>
<style lang="scss" scoped>
.agreement-container {
min-height: 100vh;
background: #F8F8F8;
display: flex;
flex-direction: column;
}
.nav-bar {
display: flex;
align-items: center;
justify-content: space-between;
height: 88rpx;
padding: 0 30rpx;
background: #fff;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
position: sticky;
top: 0;
z-index: 100;
}
.nav-back {
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
}
.nav-title {
font-size: 36rpx;
font-weight: bold;
color: #333;
}
.nav-placeholder {
width: 60rpx;
}
.content-scroll {
flex: 1;
height: calc(100vh - 88rpx);
}
.agreement-content {
padding: 40rpx 30rpx;
background: #fff;
}
.agreement-title {
font-size: 40rpx;
font-weight: bold;
color: #333;
text-align: center;
margin-bottom: 50rpx;
}
.agreement-section {
margin-bottom: 50rpx;
}
.section-title {
display: block;
font-size: 32rpx;
font-weight: bold;
color: #333;
margin-bottom: 20rpx;
}
.section-text {
display: block;
font-size: 28rpx;
color: #666;
line-height: 1.8;
margin-bottom: 20rpx;
text-align: justify;
}
.agreement-footer {
margin-top: 60rpx;
padding-top: 30rpx;
border-top: 1rpx solid #eee;
text-align: center;
}
.footer-text {
font-size: 24rpx;
color: #999;
}
</style>

204
resources/mobile/pages/ucenter/index/index.vue Normal file
View File

@@ -0,0 +1,204 @@
<template>
<un-pages
:show-nav-bar="true"
nav-bar-title="我的"
:show-back="false"
:show-tab-bar="true"
@tab-change="handleTabChange"
>
<view class="page-content">
<!-- 用户信息头部 -->
<view class="user-header">
<view class="user-avatar">
<uni-icons type="person-filled" size="60" color="#fff"></uni-icons>
</view>
<view class="user-info">
<text class="user-name">{{ userInfo.nickname || '未登录' }}</text>
<text class="user-desc">{{ userInfo.username || '点击登录' }}</text>
</view>
</view>
<!-- 功能菜单 -->
<view class="menu-section">
<view class="menu-item" @tap="navigateTo('/pages/ucenter/profile')">
<view class="menu-left">
<uni-icons type="gear" size="20" color="#667eea"></uni-icons>
<text class="menu-text">个人设置</text>
</view>
<uni-icons type="right" size="16" color="#ccc"></uni-icons>
</view>
<view class="menu-item" @tap="navigateTo('/pages/ucenter/help')">
<view class="menu-left">
<uni-icons type="help" size="20" color="#667eea"></uni-icons>
<text class="menu-text">帮助中心</text>
</view>
<uni-icons type="right" size="16" color="#ccc"></uni-icons>
</view>
<view class="menu-item" @tap="navigateTo('/pages/ucenter/about')">
<view class="menu-left">
<uni-icons type="info" size="20" color="#667eea"></uni-icons>
<text class="menu-text">关于我们</text>
</view>
<uni-icons type="right" size="16" color="#ccc"></uni-icons>
</view>
</view>
<!-- 退出登录按钮 -->
<view class="logout-section" v-if="isLogin">
<button class="logout-btn" @tap="handleLogout">退出登录</button>
</view>
</view>
</un-pages>
</template>
<script>
import { isLogin, logout } from '@/utils/auth.js'
export default {
data() {
return {
userInfo: {},
isLogin: false
}
},
onLoad() {
this.checkLoginStatus()
},
onShow() {
this.checkLoginStatus()
},
methods: {
// 检查登录状态
checkLoginStatus() {
this.isLogin = isLogin()
this.userInfo = uni.getStorageSync('userInfo') || {}
},
// 页面跳转
navigateTo(url) {
if (!this.isLogin) {
uni.navigateTo({
url: '/pages/ucenter/login/index'
})
return
}
uni.showToast({
title: '功能开发中',
icon: 'none',
duration: 2000
})
},
// 退出登录
handleLogout() {
uni.showModal({
title: '提示',
content: '确定要退出登录吗？',
success: (res) => {
if (res.confirm) {
logout()
}
}
})
},
// Tab切换
handleTabChange(path) {
console.log('Tab changed to:', path)
}
}
}
</script>
<style lang="scss" scoped>
.page-content {
padding: 40rpx 30rpx;
}
.user-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 20rpx;
padding: 60rpx 40rpx;
margin: 40rpx 0;
display: flex;
align-items: center;
.user-avatar {
width: 120rpx;
height: 120rpx;
background: rgba(255, 255, 255, 0.3);
border-radius: 60rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 30rpx;
}
.user-info {
flex: 1;
display: flex;
flex-direction: column;
.user-name {
font-size: 36rpx;
font-weight: bold;
color: #fff;
margin-bottom: 16rpx;
}
.user-desc {
font-size: 28rpx;
color: rgba(255, 255, 255, 0.9);
}
}
}
.menu-section {
background: #fff;
border-radius: 20rpx;
overflow: hidden;
.menu-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx 40rpx;
border-bottom: 1rpx solid #f5f5f5;
&:last-child {
border-bottom: none;
}
.menu-left {
display: flex;
align-items: center;
.menu-text {
font-size: 32rpx;
color: #333;
margin-left: 20rpx;
}
}
}
}
.logout-section {
margin-top: 60rpx;
.logout-btn {
width: 100%;
height: 90rpx;
line-height: 90rpx;
border-radius: 45rpx;
background: #fff;
color: #f56c6c;
font-size: 32rpx;
border: 2rpx solid #f56c6c;
&::after {
border: none;
}
}
}
</style>

407
resources/mobile/pages/ucenter/login/index.vue Normal file
View File

@@ -0,0 +1,407 @@
<template>
<view class="login-container">
<view class="login-content">
<!-- Logo 区域 -->
<view class="logo-section">
<image src="/static/logo.png" class="logo" mode="aspectFit"></image>
<text class="app-name">家庭记账</text>
<text class="welcome-text">欢迎使用家庭记账</text>
</view>
<!-- 表单区域 -->
<view class="form-section">
<view class="form-item">
<uni-icons type="person" size="20" color="#999"></uni-icons>
<input class="input" type="text" v-model="formData.username" placeholder="请输入用户名"
placeholder-class="input-placeholder" maxlength="30" />
</view>
<view class="form-item">
<uni-icons type="locked" size="20" color="#999"></uni-icons>
<input class="input" :type="showPassword ? 'text' : 'password'" v-model="formData.password"
placeholder="请输入密码" placeholder-class="input-placeholder" />
<uni-icons :type="showPassword ? 'eye-slash' : 'eye'" size="20" color="#999"
@tap="togglePassword"></uni-icons>
</view>
<view class="form-options">
<view class="checkbox-item" @tap="toggleRemember">
<uni-icons :type="formData.remember ? 'checkbox-filled' : 'circle'"
:color="formData.remember ? '#4CAF50' : '#999'" size="20"></uni-icons>
<text class="checkbox-text">记住密码</text>
</view>
<text class="forget-password" @tap="handleForgetPassword">忘记密码?</text>
</view>
<button class="login-btn" type="primary" @tap="handleLogin" :loading="loading">
{{ loading ? '登录中...' : '登录' }}
</button>
<view class="register-tip">
<text class="tip-text">还没有账号？</text>
<text class="register-link" @tap="goToRegister">立即注册</text>
</view>
</view>
<!-- 其他登录方式 -->
<view class="other-login" v-if="false">
<view class="divider">
<text class="divider-text">其他登录方式</text>
</view>
<view class="social-login">
<view class="social-item" @tap="handleWechatLogin">
<uni-icons type="weixin" size="32" color="#07C160"></uni-icons>
<text class="social-text">微信登录</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import authApi from '@/api/modules/auth'
export default {
data() {
return {
// 不需要登录验证
needLogin: false,
formData: {
username: '',
password: '',
remember: false
},
showPassword: false,
loading: false
}
},
onLoad() {
// 检查是否有记住的密码
const savedUsername = uni.getStorageSync('savedUsername')
const savedPassword = uni.getStorageSync('savedPassword')
if (savedUsername && savedPassword) {
this.formData.username = savedUsername
this.formData.password = savedPassword
this.formData.remember = true
}
},
methods: {
// 切换密码显示/隐藏
togglePassword() {
this.showPassword = !this.showPassword
},
// 切换记住密码
toggleRemember() {
this.formData.remember = !this.formData.remember
},
// 登录
async handleLogin() {
// 表单验证
if (!this.validateForm()) {
return
}
try {
this.loading = true
// 调用登录接口
const result = await authApi.login.post({
username: this.formData.username,
password: this.formData.password
})
// 保存 token 和用户信息
if (result.code == 1) {
this.$store.commit('setUserLogin', result.data)
const user = await authApi.info.get()
this.$store.commit('setUserInfo', user.data)
// 记住密码
if (this.formData.remember) {
uni.setStorageSync('savedUsername', this.formData.username)
uni.setStorageSync('savedPassword', this.formData.password)
} else {
uni.removeStorageSync('savedUsername')
uni.removeStorageSync('savedPassword')
}
uni.showToast({
title: '登录成功',
icon: 'success',
duration: 1500
})
// 跳转到首页
setTimeout(() => {
uni.switchTab({
url: '/pages/index/index'
})
}, 1500)
} else {
uni.showToast({
title: result.message,
icon: 'success',
duration: 1500
})
}
} catch (error) {
console.error('登录失败:', error)
} finally {
this.loading = false
}
},
// 表单验证
validateForm() {
const { username, password } = this.formData
if (!username) {
uni.showToast({
title: '请输入用户名',
icon: 'none',
duration: 2000
})
return false
}
if (username.length < 3) {
uni.showToast({
title: '用户名至少3个字符',
icon: 'none',
duration: 2000
})
return false
}
if (!password) {
uni.showToast({
title: '请输入密码',
icon: 'none',
duration: 2000
})
return false
}
if (password.length < 6) {
uni.showToast({
title: '密码长度不能少于6位',
icon: 'none',
duration: 2000
})
return false
}
return true
},
// 忘记密码
handleForgetPassword() {
uni.showToast({
title: '功能开发中',
icon: 'none',
duration: 2000
})
},
// 跳转到注册页
goToRegister() {
uni.navigateTo({
url: '/pages/ucenter/register/index'
})
},
// 微信登录
handleWechatLogin() {
uni.showToast({
title: '微信登录功能开发中',
icon: 'none',
duration: 2000
})
}
}
}
</script>
<style lang="scss" scoped>
.login-container {
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 0 60rpx;
box-sizing: border-box;
}
.login-content {
padding-top: 120rpx;
}
.logo-section {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 80rpx;
.logo {
width: 160rpx;
height: 160rpx;
margin-bottom: 30rpx;
border-radius: 20rpx;
background: rgba(255, 255, 255, 0.9);
padding: 20rpx;
}
.app-name {
font-size: 48rpx;
font-weight: bold;
color: #fff;
margin-bottom: 20rpx;
}
.welcome-text {
font-size: 28rpx;
color: rgba(255, 255, 255, 0.9);
}
}
.form-section {
.form-item {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.95);
border-radius: 16rpx;
padding: 30rpx 40rpx;
margin-bottom: 30rpx;
.input {
flex: 1;
margin-left: 20rpx;
margin-right: 20rpx;
font-size: 32rpx;
color: #333;
}
.input-placeholder {
color: #999;
}
}
.form-options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40rpx;
padding: 0 10rpx;
.checkbox-item {
display: flex;
align-items: center;
.checkbox-text {
font-size: 28rpx;
color: rgba(255, 255, 255, 0.9);
margin-left: 10rpx;
}
}
.forget-password {
font-size: 28rpx;
color: rgba(255, 255, 255, 0.9);
}
}
.login-btn {
width: 100%;
height: 100rpx;
line-height: 100rpx;
border-radius: 50rpx;
background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
color: #fff;
font-size: 36rpx;
font-weight: bold;
border: none;
box-shadow: 0 8rpx 20rpx rgba(245, 87, 108, 0.4);
margin-bottom: 40rpx;
&::after {
border: none;
}
}
.register-tip {
display: flex;
justify-content: center;
align-items: center;
.tip-text {
font-size: 28rpx;
color: rgba(255, 255, 255, 0.9);
}
.register-link {
font-size: 28rpx;
color: #fff;
font-weight: bold;
margin-left: 10rpx;
text-decoration: underline;
}
}
}
.other-login {
margin-top: 100rpx;
.divider {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 60rpx;
position: relative;
&::before,
&::after {
content: '';
position: absolute;
width: 200rpx;
height: 1rpx;
background: rgba(255, 255, 255, 0.3);
}
&::before {
left: 0;
}
&::after {
right: 0;
}
.divider-text {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.6);
padding: 0 20rpx;
}
}
.social-login {
display: flex;
justify-content: center;
.social-item {
display: flex;
flex-direction: column;
align-items: center;
.social-text {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.9);
margin-top: 20rpx;
}
}
}
}
</style>

401
resources/mobile/pages/ucenter/register/index.vue Normal file
View File

@@ -0,0 +1,401 @@
<template>
<view class="register-container">
<view class="register-content">
<!-- Logo 区域 -->
<view class="logo-section">
<image src="/static/logo.png" class="logo" mode="aspectFit"></image>
<text class="app-name">用户注册</text>
<text class="welcome-text">创建您的家庭记账账号</text>
</view>
<!-- 表单区域 -->
<view class="form-section">
<view class="form-item">
<uni-icons type="person" size="20" color="#999"></uni-icons>
<input
class="input"
type="text"
v-model="formData.username"
placeholder="请输入用户名"
placeholder-class="input-placeholder"
maxlength="30"
/>
</view>
<view class="form-item">
<uni-icons type="locked" size="20" color="#999"></uni-icons>
<input
class="input"
:type="showPassword ? 'text' : 'password'"
v-model="formData.password"
placeholder="请设置密码（6-20位）"
placeholder-class="input-placeholder"
/>
<uni-icons
:type="showPassword ? 'eye-slash' : 'eye'"
size="20"
color="#999"
@tap="togglePassword"
></uni-icons>
</view>
<view class="form-item">
<uni-icons type="locked" size="20" color="#999"></uni-icons>
<input
class="input"
:type="showConfirmPassword ? 'text' : 'password'"
v-model="formData.confirmPassword"
placeholder="请再次输入密码"
placeholder-class="input-placeholder"
/>
<uni-icons
:type="showConfirmPassword ? 'eye-slash' : 'eye'"
size="20"
color="#999"
@tap="toggleConfirmPassword"
></uni-icons>
</view>
<view class="form-item">
<uni-icons type="info" size="20" color="#999"></uni-icons>
<input
class="input"
type="text"
v-model="formData.nickname"
placeholder="请设置昵称"
placeholder-class="input-placeholder"
maxlength="20"
/>
</view>
<view class="agreement-item">
<uni-icons
:type="formData.agreed ? 'checkbox-filled' : 'circle'"
:color="formData.agreed ? '#4CAF50' : '#999'"
size="20"
@tap="toggleAgreement"
></uni-icons>
<text class="agreement-text">
我已阅读并同意
<text class="agreement-link" @tap="handleAgreement('user')">《用户协议》</text>
和
<text class="agreement-link" @tap="handleAgreement('privacy')">《隐私政策》</text>
</text>
</view>
<button class="register-btn" type="primary" @tap="handleRegister" :loading="loading">
{{ loading ? '注册中...' : '立即注册' }}
</button>
<view class="login-tip">
<text class="tip-text">已有账号？</text>
<text class="login-link" @tap="goToLogin">立即登录</text>
</view>
</view>
</view>
</view>
</template>
<script>
import authApi from '@/api/modules/auth'
export default {
data() {
return {
// 不需要登录验证
needLogin: false,
formData: {
username: '',
password: '',
confirmPassword: '',
nickname: '',
agreed: false
},
showPassword: false,
showConfirmPassword: false,
loading: false
}
},
methods: {
// 切换密码显示/隐藏
togglePassword() {
this.showPassword = !this.showPassword
},
toggleConfirmPassword() {
this.showConfirmPassword = !this.showConfirmPassword
},
// 切换协议同意
toggleAgreement() {
this.formData.agreed = !this.formData.agreed
},
// 注册
async handleRegister() {
// 表单验证
if (!this.validateForm()) {
return
}
try {
this.loading = true
// 调用注册接口
const result = await authApi.register.post({
username: this.formData.username,
password: this.formData.password,
nickname: this.formData.nickname
})
uni.showToast({
title: '注册成功',
icon: 'success',
duration: 1500
})
// 跳转到登录页
setTimeout(() => {
uni.redirectTo({
url: '/pages/ucenter/login/index'
})
}, 1500)
} catch (error) {
console.error('注册失败:', error)
} finally {
this.loading = false
}
},
// 表单验证
validateForm() {
const { username, password, confirmPassword, nickname, agreed } = this.formData
// 验证用户名
if (!username) {
uni.showToast({
title: '请输入用户名',
icon: 'none',
duration: 2000
})
return false
}
if (username.length < 3) {
uni.showToast({
title: '用户名至少3个字符',
icon: 'none',
duration: 2000
})
return false
}
// 验证密码
if (!password) {
uni.showToast({
title: '请设置密码',
icon: 'none',
duration: 2000
})
return false
}
if (password.length < 6 || password.length > 20) {
uni.showToast({
title: '密码长度为6-20位',
icon: 'none',
duration: 2000
})
return false
}
// 验证确认密码
if (!confirmPassword) {
uni.showToast({
title: '请再次输入密码',
icon: 'none',
duration: 2000
})
return false
}
if (password !== confirmPassword) {
uni.showToast({
title: '两次输入的密码不一致',
icon: 'none',
duration: 2000
})
return false
}
// 验证昵称
if (!nickname) {
uni.showToast({
title: '请设置昵称',
icon: 'none',
duration: 2000
})
return false
}
// 验证协议
if (!agreed) {
uni.showToast({
title: '请阅读并同意用户协议和隐私政策',
icon: 'none',
duration: 2000
})
return false
}
return true
},
// 查看协议
handleAgreement(type) {
let url = ''
if (type === 'user') {
url = '/pages/ucenter/agreement/user'
} else if (type === 'privacy') {
url = '/pages/ucenter/agreement/privacy'
}
if (url) {
uni.navigateTo({
url: url
})
}
},
// 跳转到登录页
goToLogin() {
uni.navigateBack()
}
}
}
</script>
<style lang="scss" scoped>
.register-container {
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 0 60rpx;
box-sizing: border-box;
}
.register-content {
padding-top: 80rpx;
}
.logo-section {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 60rpx;
.logo {
width: 140rpx;
height: 140rpx;
margin-bottom: 30rpx;
border-radius: 20rpx;
background: rgba(255, 255, 255, 0.9);
padding: 20rpx;
}
.app-name {
font-size: 44rpx;
font-weight: bold;
color: #fff;
margin-bottom: 16rpx;
}
.welcome-text {
font-size: 28rpx;
color: rgba(255, 255, 255, 0.9);
}
}
.form-section {
.form-item {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.95);
border-radius: 16rpx;
padding: 30rpx 40rpx;
margin-bottom: 24rpx;
.input {
flex: 1;
margin-left: 20rpx;
margin-right: 20rpx;
font-size: 32rpx;
color: #333;
}
.input-placeholder {
color: #999;
}
}
.agreement-item {
display: flex;
align-items: flex-start;
margin-bottom: 30rpx;
padding: 0 10rpx;
.agreement-text {
flex: 1;
font-size: 26rpx;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin-left: 10rpx;
.agreement-link {
color: #fff;
font-weight: bold;
text-decoration: underline;
}
}
}
.register-btn {
width: 100%;
height: 100rpx;
line-height: 100rpx;
border-radius: 50rpx;
background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
color: #fff;
font-size: 36rpx;
font-weight: bold;
border: none;
box-shadow: 0 8rpx 20rpx rgba(245, 87, 108, 0.4);
margin-bottom: 40rpx;
&::after {
border: none;
}
}
.login-tip {
display: flex;
justify-content: center;
align-items: center;
.tip-text {
font-size: 28rpx;
color: rgba(255, 255, 255, 0.9);
}
.login-link {
font-size: 28rpx;
color: #fff;
font-weight: bold;
margin-left: 10rpx;
text-decoration: underline;
}
}
}
</style>