更新功能
This commit is contained in:
@@ -2,11 +2,11 @@
|
||||
|
||||
namespace Modules\Account\Models;
|
||||
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
use App\Models\BaseModel;
|
||||
use Illuminate\Database\Eloquent\SoftDeletes;
|
||||
use Illuminate\Database\Eloquent\Casts\Attribute;
|
||||
|
||||
class Bill extends Model
|
||||
class Bill extends BaseModel
|
||||
{
|
||||
use SoftDeletes;
|
||||
|
||||
@@ -17,6 +17,7 @@ class Bill extends Model
|
||||
'type',
|
||||
'amount',
|
||||
'category',
|
||||
'payment_method',
|
||||
'remark',
|
||||
'bill_date'
|
||||
];
|
||||
@@ -25,7 +26,8 @@ class Bill extends Model
|
||||
protected function casts(): array
|
||||
{
|
||||
return [
|
||||
'bill_date' => 'date',
|
||||
'date' => 'datetime:Y-m-d',
|
||||
'bill_date' => 'datetime:Y-m-d',
|
||||
'created_at' => 'datetime:Y-m-d H:i:s',
|
||||
'updated_at' => 'datetime:Y-m-d H:i:s',
|
||||
'deleted_at' => 'datetime:Y-m-d H:i:s',
|
||||
|
||||
@@ -99,10 +99,11 @@ class BillService
|
||||
'amount' => (float)$bill->amount,
|
||||
'category' => $bill->category,
|
||||
'category_id' => $this->getCategoryId($bill->category, $bill->type),
|
||||
'payment_method' => $bill->payment_method,
|
||||
'remark' => $bill->remark,
|
||||
'date' => $bill->bill_date,
|
||||
'bill_date' => $bill->bill_date,
|
||||
'created_at' => $bill->created_at->format('Y-m-d H:i:s'),
|
||||
'created_at' => $bill->created_at,
|
||||
'user' => $bill->user,
|
||||
'family' => $bill->family
|
||||
];
|
||||
@@ -162,6 +163,7 @@ class BillService
|
||||
'type' => 'required|in:income,expense',
|
||||
'amount' => 'required|numeric|min:0.01',
|
||||
'category_id' => 'required|integer',
|
||||
'payment_method' => 'nullable|string|in:微信,支付宝,银行卡,现金,其他',
|
||||
'remark' => 'nullable|string|max:255',
|
||||
'date' => 'required|date',
|
||||
'family_id' => 'nullable|integer|exists:account_families,id'
|
||||
@@ -241,6 +243,7 @@ class BillService
|
||||
'type' => 'required|in:income,expense',
|
||||
'amount' => 'required|numeric|min:0.01',
|
||||
'category_id' => 'required|integer',
|
||||
'payment_method' => 'nullable|string|in:微信,支付宝,银行卡,现金,其他',
|
||||
'remark' => 'nullable|string|max:255',
|
||||
'date' => 'required|date',
|
||||
'family_id' => 'nullable|integer|exists:account_families,id'
|
||||
@@ -303,19 +306,8 @@ class BillService
|
||||
}
|
||||
|
||||
// 转换数据格式以匹配前端
|
||||
return [
|
||||
'id' => $bill->id,
|
||||
'type' => $bill->type,
|
||||
'amount' => (float)$bill->amount,
|
||||
'category' => $bill->category,
|
||||
'category_id' => $this->getCategoryId($bill->category, $bill->type),
|
||||
'remark' => $bill->remark,
|
||||
'date' => $bill->bill_date,
|
||||
'bill_date' => $bill->bill_date,
|
||||
'created_at' => $bill->created_at->format('Y-m-d H:i:s'),
|
||||
'user' => $bill->user,
|
||||
'family' => $bill->family
|
||||
];
|
||||
$bill->category_id = $this->getCategoryId($bill->category, $bill->type);
|
||||
return $bill;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
<?php
|
||||
|
||||
use Illuminate\Database\Migrations\Migration;
|
||||
use Illuminate\Database\Schema\Blueprint;
|
||||
use Illuminate\Support\Facades\Schema;
|
||||
|
||||
return new class extends Migration
|
||||
{
|
||||
/**
|
||||
* Run the migrations.
|
||||
*/
|
||||
public function up(): void
|
||||
{
|
||||
Schema::table('account_bills', function (Blueprint $table) {
|
||||
$table->string('payment_method', 20)->nullable()->after('category')->comment('支付方式:微信、支付宝、银行卡、现金、其他');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Reverse the migrations.
|
||||
*/
|
||||
public function down(): void
|
||||
{
|
||||
Schema::table('account_bills', function (Blueprint $table) {
|
||||
$table->dropColumn('payment_method');
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -14,7 +14,7 @@ use Modules\Account\Controllers\Api\StatisticsController;
|
||||
|
|
||||
*/
|
||||
|
||||
Route::middleware(['auth:api'])->group(function () {
|
||||
Route::name('account.')->prefix('account')->middleware(['auth.check:api'])->group(function () {
|
||||
// 账单路由
|
||||
Route::prefix('bill')->group(function () {
|
||||
Route::get('list', [BillController::class, 'index']);
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -9,6 +9,9 @@
|
||||
{
|
||||
"path": "pages/account/bill/add"
|
||||
},
|
||||
{
|
||||
"path": "pages/account/bill/detail"
|
||||
},
|
||||
{
|
||||
"path": "pages/account/statistics/index"
|
||||
},
|
||||
|
||||
@@ -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
467
resources/mobile/pages/account/bill/detail.vue
Normal 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>
|
||||
@@ -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>
|
||||
|
||||
@@ -338,7 +338,6 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.page-content {
|
||||
padding: 30rpx;
|
||||
padding-bottom: 150rpx;
|
||||
}
|
||||
|
||||
.data-type-switch {
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -20,8 +20,3 @@ Route::name('system.')->prefix('system')->middleware(['auth.check:api'])->group(
|
||||
Route::post('/jssdk', 'jssdk')->name('jssdk');
|
||||
});
|
||||
});
|
||||
|
||||
// 记账相关路由
|
||||
Route::middleware(['auth:api'])->prefix('account')->group(function () {
|
||||
require base_path('modules/Account/routes/api.php');
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user