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-19 12:29:33 +08:00
parent f661373824
commit 7d9599b582
14 changed files with 522 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
resources/mobile/components/pages/pages.vue
View File

@@ -9,9 +9,7 @@
<!-- 中间内容区域 -->
<scroll-view class="content-scroll" scroll-y :style="{ height: scrollHeight }" :show-scrollbar="showScrollbar">
<view class="content-wrapper">
<slot></slot>
</view>
<slot></slot>
</scroll-view>
<!-- 底部tabbar -->
@@ -160,9 +158,4 @@ export default {
width: 100%;
overflow-y: auto;
}
.content-wrapper {
width: 100%;
min-height: 100%;
}
</style>

5
resources/mobile/components/tab-bar/tab-bar.vue
View File

@@ -211,11 +211,6 @@ export default {
<style lang="scss" scoped>
.tab-bar-container {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
display: flex;
align-items: center;
justify-content: space-around;

3
resources/mobile/pages.json
View File

@@ -9,6 +9,9 @@
{
"path": "pages/account/bill/add"
},
{
"path": "pages/account/bill/detail"
},
{
"path": "pages/account/statistics/index"
},

6
resources/mobile/pages/account/bill/add.vue
View File

@@ -160,9 +160,6 @@ export default {
]
}
},
selectPaymentMethod(payment) {
this.form.paymentMethod = payment.id
},
computed: {
currentCategories() {
return this.form.type === 'expense' ? this.expenseCategories : this.incomeCategories
@@ -273,6 +270,9 @@ export default {
selectCategory(category) {
this.form.categoryId = category.id
},
selectPaymentMethod(payment) {
this.form.paymentMethod = payment.id
},
onDateChange(e) {
this.form.date = e.detail.value
},

467
resources/mobile/pages/account/bill/detail.vue Normal file
View File

@@ -0,0 +1,467 @@
<template>
<un-pages
:show-nav-bar="true"
nav-bar-title="账单详情"
:show-back="true"
>
<view class="page-content" v-if="billDetail">
<!-- 金额卡片 -->
<view class="amount-card" :class="billDetail.type">
<view class="amount-icon" :style="{background: getCategoryColor(billDetail.category_id)}">
<text>{{ getCategoryIcon(billDetail.category_id) }}</text>
</view>
<view class="amount-info">
<text class="amount-label">{{ billDetail.type === 'expense' ? '支出' : '收入' }}</text>
<text class="amount-value">{{ billDetail.type === 'expense' ? '-' : '+' }}¥{{ parseFloat(billDetail.amount).toFixed(2) }}</text>
</view>
</view>
<!-- 分类和支付方式 -->
<view class="info-section">
<view class="info-item">
<text class="info-label">分类</text>
<text class="info-value">{{ billDetail.category }}</text>
</view>
<view class="info-item" v-if="billDetail.payment_method">
<text class="info-label">支付方式</text>
<view class="payment-badge">
<uni-icons :type="getPaymentIcon(billDetail.payment_method)" size="14" :color="getPaymentColor(billDetail.payment_method)"></uni-icons>
<text>{{ getPaymentName(billDetail.payment_method) }}</text>
</view>
</view>
</view>
<!-- 详细信息 -->
<view class="detail-section">
<view class="section-title">详细信息</view>
<view class="detail-item">
<view class="detail-icon">
<uni-icons type="calendar" size="18" color="#667eea"></uni-icons>
</view>
<view class="detail-content">
<text class="detail-label">记账日期</text>
<text class="detail-value">{{ formatDetailDate(billDetail.bill_date) }}</text>
</view>
</view>
<view class="detail-item">
<view class="detail-icon">
<uni-icons type="person" size="18" color="#667eea"></uni-icons>
</view>
<view class="detail-content">
<text class="detail-label">创建者</text>
<text class="detail-value">{{ billDetail.user_name || (billDetail.user?.nickname || billDetail.user?.username || '未知') }}</text>
</view>
</view>
<view class="detail-item" v-if="billDetail.remark">
<view class="detail-icon">
<uni-icons type="compose" size="18" color="#667eea"></uni-icons>
</view>
<view class="detail-content">
<text class="detail-label">备注</text>
<text class="detail-value">{{ billDetail.remark }}</text>
</view>
</view>
<view class="detail-item">
<view class="detail-icon">
<uni-icons type="notification-filled" size="18" color="#667eea"></uni-icons>
</view>
<view class="detail-content">
<text class="detail-label">创建时间</text>
<text class="detail-value">{{ formatDateTime(billDetail.created_at) }}</text>
</view>
</view>
</view>
<!-- 操作按钮 -->
<view class="action-buttons" v-if="canEdit">
<button class="action-btn edit-btn" @tap="handleEdit" :loading="loading">
<uni-icons type="compose" size="18" color="#fff"></uni-icons>
<text>编辑</text>
</button>
<button class="action-btn delete-btn" @tap="handleDelete" :loading="loading">
<uni-icons type="trash" size="18" color="#fff"></uni-icons>
<text>删除</text>
</button>
</view>
</view>
<!-- 加载状态 -->
<view class="loading-container" v-else-if="loading">
<uni-load-more status="loading"></uni-load-more>
</view>
</un-pages>
</template>
<script>
import tool from '@/utils/tool'
export default {
data() {
return {
loading: false,
billId: null,
billDetail: null,
categoryMap: {
// 支出分类
1: { name: '餐饮', icon: '🍜', color: '#FF6B6B' },
2: { name: '交通', icon: '🚗', color: '#4ECDC4' },
3: { name: '购物', icon: '🛒', color: '#45B7D1' },
4: { name: '娱乐', icon: '🎮', color: '#96CEB4' },
5: { name: '医疗', icon: '💊', color: '#FFEAA7' },
6: { name: '教育', icon: '📚', color: '#DDA0DD' },
7: { name: '居住', icon: '🏠', color: '#98D8C8' },
8: { name: '其他', icon: '📦', color: '#BDC3C7' },
// 收入分类
101: { name: '工资', icon: '💰', color: '#2ECC71' },
102: { name: '奖金', icon: '🎁', color: '#E74C3C' },
103: { name: '投资', icon: '📈', color: '#3498DB' },
104: { name: '兼职', icon: '💼', color: '#9B59B6' },
105: { name: '其他', icon: '💎', color: '#1ABC9C' }
},
paymentMap: {
'微信': { name: '微信', icon: 'weixin', color: '#07C160' },
'支付宝': { name: '支付宝', icon: 'redo', color: '#1677FF' },
'银行卡': { name: '银行卡', icon: 'bankcard', color: '#FF6B6B' },
'现金': { name: '现金', icon: 'wallet', color: '#FFA500' },
'其他': { name: '其他', icon: 'more', color: '#999999' }
}
}
},
computed: {
currentUserId() {
return this.$store.state.user.userInfo?.uid
},
canEdit() {
if (!this.billDetail || !this.currentUserId) return false
return this.billDetail.user?.uid === this.currentUserId
}
},
onLoad(options) {
if (options.id) {
this.billId = parseInt(options.id)
this.loadBillDetail()
} else {
uni.showToast({
title: '账单ID不能为空',
icon: 'none'
})
setTimeout(() => {
uni.navigateBack()
}, 1500)
}
},
methods: {
async loadBillDetail() {
this.loading = true
try {
const res = await this.$api.bill.detail.get({ id: this.billId })
if (res && res.code === 1 && res.data) {
this.billDetail = res.data
} else {
uni.showToast({
title: res?.message || '加载失败',
icon: 'none'
})
setTimeout(() => {
uni.navigateBack()
}, 1500)
}
} catch (error) {
console.error('加载账单详情失败', error)
uni.showToast({
title: error?.message || '加载失败',
icon: 'none'
})
setTimeout(() => {
uni.navigateBack()
}, 1500)
} finally {
this.loading = false
}
},
handleEdit() {
uni.navigateTo({
url: `/pages/account/bill/add?id=${this.billId}`
})
},
handleDelete() {
uni.showModal({
title: '删除确认',
content: '确定要删除这条账单记录吗？删除后无法恢复。',
confirmColor: '#FF6B6B',
success: async (res) => {
if (res.confirm) {
await this.performDelete()
}
}
})
},
async performDelete() {
this.loading = true
try {
const res = await this.$api.bill.delete.post({
id: this.billId
})
if (res && res.code === 1) {
uni.showToast({
title: '删除成功',
icon: 'success',
duration: 1500
})
setTimeout(() => {
uni.navigateBack()
}, 1500)
} else {
uni.showToast({
title: res?.message || '删除失败',
icon: 'none'
})
}
} catch (error) {
console.error('删除账单失败', error)
uni.showToast({
title: error?.message || '删除失败，请重试',
icon: 'none'
})
} finally {
this.loading = false
}
},
getCategoryName(categoryId) {
return this.categoryMap[categoryId]?.name || '未知'
},
getCategoryIcon(categoryId) {
return this.categoryMap[categoryId]?.icon || '📦'
},
getCategoryColor(categoryId) {
return this.categoryMap[categoryId]?.color || '#BDC3C7'
},
getPaymentName(paymentMethod) {
return this.paymentMap[paymentMethod]?.name || '其他'
},
getPaymentIcon(paymentMethod) {
return this.paymentMap[paymentMethod]?.icon || 'more'
},
getPaymentColor(paymentMethod) {
return this.paymentMap[paymentMethod]?.color || '#999999'
},
formatDetailDate(date) {
return tool.dateFormat(date, 'yyyy-MM-dd')
},
formatDateTime(date) {
return tool.dateFormat(date, 'yyyy-MM-dd hh:mm:ss')
}
}
}
</script>
<style lang="scss" scoped>
.page-content {
padding: 30rpx;
padding-bottom: 40rpx;
}
.loading-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.amount-card {
background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%);
border-radius: 24rpx;
padding: 40rpx 30rpx;
margin-bottom: 30rpx;
display: flex;
align-items: center;
box-shadow: 0 8rpx 24rpx rgba(255, 107, 107, 0.3);
&.income {
background: linear-gradient(135deg, #2ECC71 0%, #58D68D 100%);
box-shadow: 0 8rpx 24rpx rgba(46, 204, 113, 0.3);
}
.amount-icon {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.2);
margin-right: 30rpx;
text {
font-size: 48rpx;
}
}
.amount-info {
flex: 1;
display: flex;
flex-direction: column;
.amount-label {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 12rpx;
}
.amount-value {
font-size: 56rpx;
font-weight: bold;
color: #fff;
}
}
}
.info-section {
background: #fff;
border-radius: 20rpx;
padding: 30rpx;
margin-bottom: 20rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
.info-item {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1rpx solid #f5f5f5;
&:last-child {
border-bottom: none;
padding-bottom: 0;
}
.info-label {
font-size: 28rpx;
color: #666;
}
.info-value {
font-size: 28rpx;
color: #333;
font-weight: bold;
}
.payment-badge {
display: flex;
align-items: center;
background: rgba(0, 0, 0, 0.05);
border-radius: 20rpx;
padding: 6rpx 16rpx;
uni-icons {
margin-right: 6rpx;
}
text {
font-size: 24rpx;
color: #333;
}
}
}
}
.detail-section {
background: #fff;
border-radius: 20rpx;
padding: 30rpx;
margin-bottom: 30rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
.section-title {
font-size: 28rpx;
color: #333;
font-weight: bold;
margin-bottom: 20rpx;
padding-left: 8rpx;
border-left: 4rpx solid #667eea;
}
.detail-item {
display: flex;
align-items: flex-start;
padding: 24rpx 0;
border-bottom: 1rpx solid #f5f5f5;
&:last-child {
border-bottom: none;
padding-bottom: 0;
}
.detail-icon {
width: 48rpx;
height: 48rpx;
background: rgba(102, 126, 234, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
flex-shrink: 0;
}
.detail-content {
flex: 1;
display: flex;
flex-direction: column;
.detail-label {
font-size: 24rpx;
color: #999;
margin-bottom: 8rpx;
}
.detail-value {
font-size: 28rpx;
color: #333;
line-height: 1.6;
}
}
}
}
.action-buttons {
display: flex;
gap: 20rpx;
.action-btn {
flex: 1;
height: 88rpx;
border-radius: 44rpx;
display: flex;
align-items: center;
justify-content: center;
border: none;
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.1);
transition: all 0.3s;
&::after {
border: none;
}
uni-icons {
margin-right: 10rpx;
}
&:active {
transform: scale(0.98);
}
&.edit-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.3);
}
&.delete-btn {
background: #FF6B6B;
color: #fff;
box-shadow: 0 6rpx 20rpx rgba(255, 107, 107, 0.3);
}
}
}
</style>

190
resources/mobile/pages/account/bill/index.vue
View File

@@ -62,7 +62,7 @@
group.income.toFixed(2) }}</text>
</view>
<view class="bill-item" v-for="bill in group.bills" :key="bill.id" @tap="editBill(bill)">
<view class="bill-item" v-for="bill in group.bills" :key="bill.id" @tap="viewBillDetail(bill)">
<view class="bill-icon" :style="{ background: getCategoryColor(bill.category_id) }">
<text>{{ getCategoryIcon(bill.category_id) }}</text>
</view>
@@ -96,28 +96,7 @@
<uni-icons type="plus" size="24" color="#fff"></uni-icons>
</view>
<!-- 操作弹窗 -->
<uni-popup ref="actionPopup" type="bottom">
<view class="action-sheet">
<view class="action-header">
<text class="action-title">选择操作</text>
<uni-icons type="close" size="20" color="#999" @tap="closeActionSheet"></uni-icons>
</view>
<view class="action-list">
<view class="action-item edit" @tap="editCurrentBill">
<uni-icons type="compose" size="20" color="#667eea"></uni-icons>
<text>编辑</text>
</view>
<view class="action-item delete" @tap="deleteCurrentBill" v-if="canDeleteBill">
<uni-icons type="trash" size="20" color="#FF6B6B"></uni-icons>
<text>删除</text>
</view>
</view>
<view class="action-cancel" @tap="closeActionSheet">
<text>取消</text>
</view>
</view>
</uni-popup>
</view>
</un-pages>
</template>
@@ -176,12 +155,12 @@ export default {
return this.$store.getters.hasFamily
},
currentUserId() {
return this.$store.state.user.userInfo?.id
return this.$store.state.user.userInfo?.uid
},
canDeleteBill() {
if (!this.currentBill || !this.currentUserId) return false
// 只能删除自己创建的账单
return this.currentBill.user_id === this.currentUserId
return this.currentBill.user?.uid === this.currentUserId
},
groupedBills() {
const groups = {}
@@ -312,82 +291,11 @@ export default {
url: '/pages/account/bill/add'
})
},
editBill(bill) {
this.currentBill = bill
// 如果是自己的账单，显示操作菜单
if (bill.user_id === this.currentUserId) {
this.$refs.actionPopup.open()
} else {
// 不是自己的账单，直接查看详情或提示
uni.navigateTo({
url: `/pages/account/bill/add?id=${bill.id}`
})
}
},
closeActionSheet() {
this.$refs.actionPopup.close()
this.currentBill = null
},
editCurrentBill() {
if (!this.currentBill) return
this.closeActionSheet()
viewBillDetail(bill) {
uni.navigateTo({
url: `/pages/account/bill/add?id=${this.currentBill.id}`
url: `/pages/account/bill/detail?id=${bill.id}`
})
},
deleteCurrentBill() {
if (!this.currentBill) return
uni.showModal({
title: '删除确认',
content: '确定要删除这条账单记录吗？删除后无法恢复。',
confirmColor: '#FF6B6B',
success: async (res) => {
if (res.confirm) {
await this.performDelete()
}
}
})
},
async performDelete() {
if (!this.currentBill) return
this.loading = true
try {
const res = await this.$api.bill.delete.post({
id: this.currentBill.id
})
if (res && res.code === 1) {
uni.showToast({
title: '删除成功',
icon: 'success',
duration: 1500
})
// 关闭弹窗
this.closeActionSheet()
// 刷新列表
setTimeout(() => {
this.loadBillList(true)
}, 1500)
} else {
uni.showToast({
title: res?.message || '删除失败',
icon: 'none'
})
}
} catch (error) {
console.error('删除账单失败', error)
uni.showToast({
title: error?.message || '删除失败，请重试',
icon: 'none'
})
} finally {
this.loading = false
}
},
getCategoryName(categoryId) {
return this.categoryMap[categoryId]?.name || '未知'
},
@@ -415,15 +323,15 @@ export default {
<style lang="scss" scoped>
.page-content {
height: 100vh;
display: flex;
flex-direction: column;
padding: 30rpx;
padding-bottom: 150rpx;
box-sizing: border-box;
}
.bill-scroll {
flex: 1;
height: 0;
overflow-y: auto;
}
@@ -688,86 +596,4 @@ export default {
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.5);
z-index: 100;
}
.action-sheet {
background: #f8f8f8;
border-radius: 24rpx 24rpx 0 0;
overflow: hidden;
.action-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx;
border-bottom: 1rpx solid #eee;
.action-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
}
}
.action-list {
padding: 20rpx 0;
.action-item {
display: flex;
align-items: center;
padding: 30rpx 40rpx;
background: #fff;
border-bottom: 1rpx solid #f5f5f5;
transition: all 0.3s;
&:active {
background: #f8f8f8;
}
uni-icons {
margin-right: 20rpx;
}
text {
font-size: 28rpx;
color: #333;
}
&.edit {
uni-icons {
color: #667eea;
}
}
&.delete {
uni-icons {
color: #FF6B6B;
}
text {
color: #FF6B6B;
}
}
}
}
.action-cancel {
display: flex;
align-items: center;
justify-content: center;
padding: 30rpx;
background: #fff;
margin-top: 10rpx;
transition: all 0.3s;
&:active {
background: #f8f8f8;
}
text {
font-size: 28rpx;
color: #666;
font-weight: bold;
}
}
}
</style>

1
resources/mobile/pages/account/statistics/index.vue
View File

@@ -338,7 +338,6 @@ export default {
<style lang="scss" scoped>
.page-content {
padding: 30rpx;
padding-bottom: 150rpx;
}
.data-type-switch {

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

@@ -276,7 +276,6 @@ export default {
<style lang="scss" scoped>
.page-content {
padding: 30rpx;
padding-bottom: 100rpx;
background: linear-gradient(180deg, #F5F7FA 0%, #FFFFFF 100%);
position: relative;

2
resources/mobile/pages/ucenter/index/index.vue
View File

@@ -321,9 +321,7 @@ export default {
<style lang="scss" scoped>
.page-content {
padding: 30rpx;
padding-bottom: 150rpx;
background: linear-gradient(180deg, #F5F7FA 0%, #FFFFFF 100%);
min-height: 100vh;
position: relative;
&::before {