更新
This commit is contained in:
@@ -31,7 +31,7 @@
|
||||
</view>
|
||||
<view class="overview-data">
|
||||
<text class="overview-label">收入</text>
|
||||
<text class="overview-amount">¥0.00</text>
|
||||
<text class="overview-amount">¥{{ overview.income.toFixed(2) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="overview-divider"></view>
|
||||
@@ -41,7 +41,7 @@
|
||||
</view>
|
||||
<view class="overview-data">
|
||||
<text class="overview-label">支出</text>
|
||||
<text class="overview-amount">¥0.00</text>
|
||||
<text class="overview-amount">¥{{ overview.expense.toFixed(2) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -81,7 +81,12 @@
|
||||
<uni-icons type="right" size="14" color="#667eea"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="empty-list">
|
||||
|
||||
<view v-if="loading" class="loading-state">
|
||||
<uni-load-more status="loading"></uni-load-more>
|
||||
</view>
|
||||
|
||||
<view v-else-if="recentBills.length === 0" class="empty-list">
|
||||
<view class="empty-icon">
|
||||
<uni-icons type="list" size="80" color="#ddd"></uni-icons>
|
||||
</view>
|
||||
@@ -91,6 +96,21 @@
|
||||
<text>记一笔</text>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view v-else class="bill-list">
|
||||
<view class="bill-item" v-for="bill in recentBills" :key="bill.id" @tap="viewBill(bill)">
|
||||
<view class="bill-icon" :style="{background: getCategoryColor(bill.category_id)}">
|
||||
<text>{{ getCategoryIcon(bill.category_id) }}</text>
|
||||
</view>
|
||||
<view class="bill-info">
|
||||
<text class="bill-category">{{ getCategoryName(bill.category_id) }}</text>
|
||||
<text class="bill-date">{{ formatDate(bill.date, 'MM/dd') }}</text>
|
||||
</view>
|
||||
<view class="bill-amount" :class="bill.type">
|
||||
<text>{{ bill.type === 'expense' ? '-' : '+' }}¥{{ bill.amount.toFixed(2) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 家庭管理 -->
|
||||
@@ -120,11 +140,34 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tool from '@/utils/tool'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentDate: '',
|
||||
currentMonth: ''
|
||||
currentMonth: '',
|
||||
overview: {
|
||||
income: 0,
|
||||
expense: 0
|
||||
},
|
||||
recentBills: [],
|
||||
loading: false,
|
||||
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' }
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -132,7 +175,7 @@ export default {
|
||||
if (!this.$store || !this.$store.getters) {
|
||||
return false
|
||||
}
|
||||
return this.$store.getters['family/hasFamily'] || false
|
||||
return this.$store.getters.hasFamily || false
|
||||
},
|
||||
userName() {
|
||||
if (!this.$store || !this.$store.state || !this.$store.state.user || !this.$store.state.user.userInfo) {
|
||||
@@ -143,9 +186,18 @@ export default {
|
||||
},
|
||||
onLoad() {
|
||||
this.updateDate()
|
||||
this.loadFamilyInfo()
|
||||
this.loadData()
|
||||
},
|
||||
onShow() {
|
||||
this.updateDate()
|
||||
this.loadFamilyInfo()
|
||||
this.loadData()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.loadData().then(() => {
|
||||
uni.stopPullDownRefresh()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
updateDate() {
|
||||
@@ -158,6 +210,39 @@ export default {
|
||||
this.currentDate = `${month}月${date}日 ${day}`
|
||||
this.currentMonth = `${month}月`
|
||||
},
|
||||
async loadFamilyInfo() {
|
||||
try {
|
||||
await this.$store.dispatch('getFamilyInfo')
|
||||
} catch (error) {
|
||||
console.error('获取家庭信息失败', error)
|
||||
}
|
||||
},
|
||||
async loadData() {
|
||||
this.loading = true
|
||||
try {
|
||||
const now = new Date()
|
||||
const year = now.getFullYear()
|
||||
const month = now.getMonth() + 1
|
||||
|
||||
// 并行加载数据
|
||||
const [overviewRes, billsRes] = await Promise.all([
|
||||
this.$api.statistics.overview.get({ year, month }),
|
||||
this.$api.bill.list.get({ year, month, limit: 5 })
|
||||
])
|
||||
|
||||
if (overviewRes && overviewRes.code === 1) {
|
||||
this.overview = overviewRes.data || { income: 0, expense: 0 }
|
||||
}
|
||||
|
||||
if (billsRes && billsRes.code === 1) {
|
||||
this.recentBills = billsRes.data?.list || []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载数据失败', error)
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
handleTabChange(path) {
|
||||
console.log('Tab changed to:', path)
|
||||
},
|
||||
@@ -165,6 +250,24 @@ export default {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
},
|
||||
viewBill(bill) {
|
||||
// TODO: 实现查看账单详情
|
||||
uni.navigateTo({
|
||||
url: `/pages/account/bill/detail?id=${bill.id}`
|
||||
})
|
||||
},
|
||||
getCategoryName(categoryId) {
|
||||
return this.categoryMap[categoryId]?.name || '未知'
|
||||
},
|
||||
getCategoryIcon(categoryId) {
|
||||
return this.categoryMap[categoryId]?.icon || '📦'
|
||||
},
|
||||
getCategoryColor(categoryId) {
|
||||
return this.categoryMap[categoryId]?.color || '#BDC3C7'
|
||||
},
|
||||
formatDate(date, fmt) {
|
||||
return tool.dateFormat(date, fmt)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -173,9 +276,8 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.page-content {
|
||||
padding: 30rpx;
|
||||
padding-bottom: 150rpx;
|
||||
padding-bottom: 100rpx;
|
||||
background: linear-gradient(180deg, #F5F7FA 0%, #FFFFFF 100%);
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
@@ -563,6 +665,10 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
padding: 60rpx 0;
|
||||
}
|
||||
|
||||
.empty-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -607,6 +713,64 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.bill-list {
|
||||
.bill-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24rpx 0;
|
||||
border-bottom: 2rpx solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.bill-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20rpx;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bill-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.bill-category {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.bill-date {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.bill-amount {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
|
||||
&.expense {
|
||||
color: #FF6B6B;
|
||||
}
|
||||
|
||||
&.income {
|
||||
color: #2ECC71;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.family-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user