更新功能
This commit is contained in:
@@ -2,11 +2,11 @@
|
|||||||
|
|
||||||
namespace Modules\Account\Models;
|
namespace Modules\Account\Models;
|
||||||
|
|
||||||
use Illuminate\Database\Eloquent\Model;
|
use App\Models\BaseModel;
|
||||||
use Illuminate\Database\Eloquent\SoftDeletes;
|
use Illuminate\Database\Eloquent\SoftDeletes;
|
||||||
use Illuminate\Database\Eloquent\Casts\Attribute;
|
use Illuminate\Database\Eloquent\Casts\Attribute;
|
||||||
|
|
||||||
class Bill extends Model
|
class Bill extends BaseModel
|
||||||
{
|
{
|
||||||
use SoftDeletes;
|
use SoftDeletes;
|
||||||
|
|
||||||
@@ -17,6 +17,7 @@ class Bill extends Model
|
|||||||
'type',
|
'type',
|
||||||
'amount',
|
'amount',
|
||||||
'category',
|
'category',
|
||||||
|
'payment_method',
|
||||||
'remark',
|
'remark',
|
||||||
'bill_date'
|
'bill_date'
|
||||||
];
|
];
|
||||||
@@ -25,7 +26,8 @@ class Bill extends Model
|
|||||||
protected function casts(): array
|
protected function casts(): array
|
||||||
{
|
{
|
||||||
return [
|
return [
|
||||||
'bill_date' => 'date',
|
'date' => 'datetime:Y-m-d',
|
||||||
|
'bill_date' => 'datetime:Y-m-d',
|
||||||
'created_at' => 'datetime:Y-m-d H:i:s',
|
'created_at' => 'datetime:Y-m-d H:i:s',
|
||||||
'updated_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',
|
'deleted_at' => 'datetime:Y-m-d H:i:s',
|
||||||
|
|||||||
@@ -99,10 +99,11 @@ class BillService
|
|||||||
'amount' => (float)$bill->amount,
|
'amount' => (float)$bill->amount,
|
||||||
'category' => $bill->category,
|
'category' => $bill->category,
|
||||||
'category_id' => $this->getCategoryId($bill->category, $bill->type),
|
'category_id' => $this->getCategoryId($bill->category, $bill->type),
|
||||||
|
'payment_method' => $bill->payment_method,
|
||||||
'remark' => $bill->remark,
|
'remark' => $bill->remark,
|
||||||
'date' => $bill->bill_date,
|
'date' => $bill->bill_date,
|
||||||
'bill_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,
|
'user' => $bill->user,
|
||||||
'family' => $bill->family
|
'family' => $bill->family
|
||||||
];
|
];
|
||||||
@@ -162,6 +163,7 @@ class BillService
|
|||||||
'type' => 'required|in:income,expense',
|
'type' => 'required|in:income,expense',
|
||||||
'amount' => 'required|numeric|min:0.01',
|
'amount' => 'required|numeric|min:0.01',
|
||||||
'category_id' => 'required|integer',
|
'category_id' => 'required|integer',
|
||||||
|
'payment_method' => 'nullable|string|in:微信,支付宝,银行卡,现金,其他',
|
||||||
'remark' => 'nullable|string|max:255',
|
'remark' => 'nullable|string|max:255',
|
||||||
'date' => 'required|date',
|
'date' => 'required|date',
|
||||||
'family_id' => 'nullable|integer|exists:account_families,id'
|
'family_id' => 'nullable|integer|exists:account_families,id'
|
||||||
@@ -241,6 +243,7 @@ class BillService
|
|||||||
'type' => 'required|in:income,expense',
|
'type' => 'required|in:income,expense',
|
||||||
'amount' => 'required|numeric|min:0.01',
|
'amount' => 'required|numeric|min:0.01',
|
||||||
'category_id' => 'required|integer',
|
'category_id' => 'required|integer',
|
||||||
|
'payment_method' => 'nullable|string|in:微信,支付宝,银行卡,现金,其他',
|
||||||
'remark' => 'nullable|string|max:255',
|
'remark' => 'nullable|string|max:255',
|
||||||
'date' => 'required|date',
|
'date' => 'required|date',
|
||||||
'family_id' => 'nullable|integer|exists:account_families,id'
|
'family_id' => 'nullable|integer|exists:account_families,id'
|
||||||
@@ -303,19 +306,8 @@ class BillService
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 转换数据格式以匹配前端
|
// 转换数据格式以匹配前端
|
||||||
return [
|
$bill->category_id = $this->getCategoryId($bill->category, $bill->type);
|
||||||
'id' => $bill->id,
|
return $bill;
|
||||||
'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
|
|
||||||
];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -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::prefix('bill')->group(function () {
|
||||||
Route::get('list', [BillController::class, 'index']);
|
Route::get('list', [BillController::class, 'index']);
|
||||||
|
|||||||
@@ -9,9 +9,7 @@
|
|||||||
|
|
||||||
<!-- 中间内容区域 -->
|
<!-- 中间内容区域 -->
|
||||||
<scroll-view class="content-scroll" scroll-y :style="{ height: scrollHeight }" :show-scrollbar="showScrollbar">
|
<scroll-view class="content-scroll" scroll-y :style="{ height: scrollHeight }" :show-scrollbar="showScrollbar">
|
||||||
<view class="content-wrapper">
|
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</view>
|
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
|
|
||||||
<!-- 底部tabbar -->
|
<!-- 底部tabbar -->
|
||||||
@@ -160,9 +158,4 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-wrapper {
|
|
||||||
width: 100%;
|
|
||||||
min-height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -211,11 +211,6 @@ export default {
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.tab-bar-container {
|
.tab-bar-container {
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: 999;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
|||||||
@@ -9,6 +9,9 @@
|
|||||||
{
|
{
|
||||||
"path": "pages/account/bill/add"
|
"path": "pages/account/bill/add"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/account/bill/detail"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/account/statistics/index"
|
"path": "pages/account/statistics/index"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -160,9 +160,6 @@ export default {
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
selectPaymentMethod(payment) {
|
|
||||||
this.form.paymentMethod = payment.id
|
|
||||||
},
|
|
||||||
computed: {
|
computed: {
|
||||||
currentCategories() {
|
currentCategories() {
|
||||||
return this.form.type === 'expense' ? this.expenseCategories : this.incomeCategories
|
return this.form.type === 'expense' ? this.expenseCategories : this.incomeCategories
|
||||||
@@ -273,6 +270,9 @@ export default {
|
|||||||
selectCategory(category) {
|
selectCategory(category) {
|
||||||
this.form.categoryId = category.id
|
this.form.categoryId = category.id
|
||||||
},
|
},
|
||||||
|
selectPaymentMethod(payment) {
|
||||||
|
this.form.paymentMethod = payment.id
|
||||||
|
},
|
||||||
onDateChange(e) {
|
onDateChange(e) {
|
||||||
this.form.date = e.detail.value
|
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>
|
group.income.toFixed(2) }}</text>
|
||||||
</view>
|
</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) }">
|
<view class="bill-icon" :style="{ background: getCategoryColor(bill.category_id) }">
|
||||||
<text>{{ getCategoryIcon(bill.category_id) }}</text>
|
<text>{{ getCategoryIcon(bill.category_id) }}</text>
|
||||||
</view>
|
</view>
|
||||||
@@ -96,28 +96,7 @@
|
|||||||
<uni-icons type="plus" size="24" color="#fff"></uni-icons>
|
<uni-icons type="plus" size="24" color="#fff"></uni-icons>
|
||||||
</view>
|
</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>
|
</view>
|
||||||
</un-pages>
|
</un-pages>
|
||||||
</template>
|
</template>
|
||||||
@@ -176,12 +155,12 @@ export default {
|
|||||||
return this.$store.getters.hasFamily
|
return this.$store.getters.hasFamily
|
||||||
},
|
},
|
||||||
currentUserId() {
|
currentUserId() {
|
||||||
return this.$store.state.user.userInfo?.id
|
return this.$store.state.user.userInfo?.uid
|
||||||
},
|
},
|
||||||
canDeleteBill() {
|
canDeleteBill() {
|
||||||
if (!this.currentBill || !this.currentUserId) return false
|
if (!this.currentBill || !this.currentUserId) return false
|
||||||
// 只能删除自己创建的账单
|
// 只能删除自己创建的账单
|
||||||
return this.currentBill.user_id === this.currentUserId
|
return this.currentBill.user?.uid === this.currentUserId
|
||||||
},
|
},
|
||||||
groupedBills() {
|
groupedBills() {
|
||||||
const groups = {}
|
const groups = {}
|
||||||
@@ -312,81 +291,10 @@ export default {
|
|||||||
url: '/pages/account/bill/add'
|
url: '/pages/account/bill/add'
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
editBill(bill) {
|
viewBillDetail(bill) {
|
||||||
this.currentBill = bill
|
|
||||||
// 如果是自己的账单,显示操作菜单
|
|
||||||
if (bill.user_id === this.currentUserId) {
|
|
||||||
this.$refs.actionPopup.open()
|
|
||||||
} else {
|
|
||||||
// 不是自己的账单,直接查看详情或提示
|
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pages/account/bill/add?id=${bill.id}`
|
url: `/pages/account/bill/detail?id=${bill.id}`
|
||||||
})
|
})
|
||||||
}
|
|
||||||
},
|
|
||||||
closeActionSheet() {
|
|
||||||
this.$refs.actionPopup.close()
|
|
||||||
this.currentBill = null
|
|
||||||
},
|
|
||||||
editCurrentBill() {
|
|
||||||
if (!this.currentBill) return
|
|
||||||
this.closeActionSheet()
|
|
||||||
uni.navigateTo({
|
|
||||||
url: `/pages/account/bill/add?id=${this.currentBill.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) {
|
getCategoryName(categoryId) {
|
||||||
return this.categoryMap[categoryId]?.name || '未知'
|
return this.categoryMap[categoryId]?.name || '未知'
|
||||||
@@ -415,15 +323,15 @@ export default {
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.page-content {
|
.page-content {
|
||||||
height: 100vh;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 30rpx;
|
padding: 30rpx;
|
||||||
padding-bottom: 150rpx;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bill-scroll {
|
.bill-scroll {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
height: 0;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -688,86 +596,4 @@ export default {
|
|||||||
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.5);
|
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.5);
|
||||||
z-index: 100;
|
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>
|
</style>
|
||||||
|
|||||||
@@ -338,7 +338,6 @@ export default {
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.page-content {
|
.page-content {
|
||||||
padding: 30rpx;
|
padding: 30rpx;
|
||||||
padding-bottom: 150rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.data-type-switch {
|
.data-type-switch {
|
||||||
|
|||||||
@@ -276,7 +276,6 @@ export default {
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.page-content {
|
.page-content {
|
||||||
padding: 30rpx;
|
padding: 30rpx;
|
||||||
padding-bottom: 100rpx;
|
|
||||||
background: linear-gradient(180deg, #F5F7FA 0%, #FFFFFF 100%);
|
background: linear-gradient(180deg, #F5F7FA 0%, #FFFFFF 100%);
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
|||||||
@@ -321,9 +321,7 @@ export default {
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.page-content {
|
.page-content {
|
||||||
padding: 30rpx;
|
padding: 30rpx;
|
||||||
padding-bottom: 150rpx;
|
|
||||||
background: linear-gradient(180deg, #F5F7FA 0%, #FFFFFF 100%);
|
background: linear-gradient(180deg, #F5F7FA 0%, #FFFFFF 100%);
|
||||||
min-height: 100vh;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
|
|||||||
@@ -20,8 +20,3 @@ Route::name('system.')->prefix('system')->middleware(['auth.check:api'])->group(
|
|||||||
Route::post('/jssdk', 'jssdk')->name('jssdk');
|
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