WindowBird/HomeLease
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

收支明细界面0.8

Browse Source 
实现日期和类型picker
This commit is contained in:
WindowBird 2025-08-18 11:54:38 +08:00
parent 2914e4f8fa
commit 7dad8a3b3a
2 changed files with 48 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
enum/commonEnum.js
View File

@ -27,7 +27,7 @@ export const commonEnum = {
BACK: 'https://api.ccttiot.com/image-1755328282735.png', //返回
INVITE: 'https://api.ccttiot.com/image-1755330435656.png', //邀请有礼
//收支明细
ALL_TYPE: 'https://api.ccttiot.com/image-1755479846357.png', //全部类型
TYPE_SELECT: 'https://api.ccttiot.com/image-1755487673678.png', //类型
DOWN_ICON: 'https://api.ccttiot.com/image-1755484170012.png',
}
export default commonEnum

58
pages/cashFlow/cashFlow.vue
View File

@ -10,7 +10,9 @@
<view :style="{ height: getNavBarHeight() + 'px' }" class="fill"></view>
<view :style="{ height: getNavBarHeight() + 'px' }" class="header">
<view class="all-type">
<image :src="commonEnum.ALL_TYPE" class="all-type-img" @click="openPopup"></image>
<image :src="commonEnum.TYPE_SELECT" class="all-type-img" @click="openPopup">
<text>{{ expenseType }}</text>
</image>
</view>
<view class="cash-flow">
<view class="date">
@ -29,7 +31,7 @@
</view>
<image :src="commonEnum.DOWN_ICON"></image>
</view>
<view class="cash-flow-detail"></view>
<view class="cash-flow-detail">支出￥{{ expenditures }} 入账￥{{ Recorded }}</view>
</view>
</view>
@ -47,7 +49,7 @@
</view>
<!-- “全部类型”按钮 -->
<button class="all-types-btn">全部类型</button>
<button class="all-types-btn" @click="selectType('全部类型')">全部类型</button>
<!-- 支出分类网格 -->
<view class="type-grid">
@ -76,6 +78,9 @@ export default {
const currentDate = this.getDate()
return {
getNavBarHeight,
expenseType: '全部类型',
expenditures: '',
Recorded: '',
date: currentDate,
startDate: this.getDate('start'),
endDate: this.getDate('end'),
@ -136,6 +141,7 @@ export default {
// 选择类型
selectType(type) {
console.log('选择的类型：', type)
this.expenseType = type
this.closePopup()
},
},
@ -155,14 +161,34 @@ export default {
padding-left: 40rpx;
.all-type {
position: relative;
display: flex;
width: 138px;
height: 40px;
&-img {
width: 138px;
height: 40px;
width: 100%;
height: 100%;
display: flex;
text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40px;
color: #ffffff;
line-height: 40px;
//border: red 1px solid;
align-items: center;
justify-content: center;
padding-left: 40rpx;
}
}
}
.cash-flow {
height: 100%;
height: 84rpx;
display: flex;
align-items: center;
@ -178,6 +204,8 @@ export default {
}
.cash-flow-detail {
margin-left: 22rpx;
color: white;
}
}
}
@ -213,6 +241,8 @@ view {
justify-content: center;
position: relative;
padding: 20rpx 0;
border-bottom: #b8bed1 solid 1px;
margin-bottom: 20rpx;
}
.close-icon {
@ -235,11 +265,16 @@ view {
/* “全部类型”按钮 */
.all-types-btn {
background-color: rgba(204, 67, 67, 0.95);
color: #fff;
background-color: #ff803a;
color: #f5f5f5;
//border-radius: 50rpx;
margin: 20rpx 0;
width: 33%;
margin: 0 0;
width: 30%;
height: 100rpx;
font-size: 28rpx;
display: flex;
align-items: center;
justify-content: center;
}
/* 支出分类网格 */
@ -253,12 +288,13 @@ view {
.type-item {
width: 30%;
height: 100rpx;
background-color: #f5f5f5;
background-color: #fff;
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20rpx;
font-size: 28rpx;
box-shadow: #ff803a 0 2rpx 8rpx;
}
</style>