收支明细界面0.6
实现日期和类型picker
This commit is contained in:
WindowBird
parent
e3e4a7f7ae
commit
2914e4f8fa
|
|
@ -28,5 +28,6 @@ export const commonEnum = {
|
|||
INVITE: 'https://api.ccttiot.com/image-1755330435656.png', //邀请有礼
|
||||
//收支明细
|
||||
ALL_TYPE: 'https://api.ccttiot.com/image-1755479846357.png', //全部类型
|
||||
DOWN_ICON: 'https://api.ccttiot.com/image-1755484170012.png',
|
||||
}
|
||||
export default commonEnum
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<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"></image>
|
||||
<image :src="commonEnum.ALL_TYPE" class="all-type-img" @click="openPopup"></image>
|
||||
</view>
|
||||
<view class="cash-flow">
|
||||
<view class="date">
|
||||
|
|
@ -27,6 +27,7 @@
|
|||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
<image :src="commonEnum.DOWN_ICON"></image>
|
||||
</view>
|
||||
<view class="cash-flow-detail"></view>
|
||||
</view>
|
||||
|
|
@ -35,24 +36,66 @@
|
|||
<!-- 主要内容区域 -->
|
||||
<view class="body">666</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
;
|
||||
<!-- 底部弹窗 -->
|
||||
<uni-popup ref="popup" :mask-click="true" type="bottom">
|
||||
<view class="popup-content">
|
||||
<!-- 弹窗标题栏 -->
|
||||
<view class="popup-header">
|
||||
<text class="close-icon" @click="closePopup">✕</text>
|
||||
<text class="title">请选择类型</text>
|
||||
</view>
|
||||
|
||||
<!-- “全部类型”按钮 -->
|
||||
<button class="all-types-btn">全部类型</button>
|
||||
|
||||
<!-- 支出分类网格 -->
|
||||
<view class="type-grid">
|
||||
<view
|
||||
v-for="(type, index) in expenseTypes"
|
||||
:key="index"
|
||||
class="type-item"
|
||||
@click="selectType(type)"
|
||||
>
|
||||
{{ type }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import commonEnum from '../../enum/commonEnum'
|
||||
import { getNavBarHeight } from '../../utils/system'
|
||||
import uniPopup from '../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
|
||||
|
||||
export default {
|
||||
name: 'AgentsPage',
|
||||
|
||||
name: 'CashFlowPage',
|
||||
components: { uniPopup },
|
||||
data() {
|
||||
const currentDate = this.getDate({
|
||||
format: true,
|
||||
})
|
||||
const currentDate = this.getDate()
|
||||
return {
|
||||
getNavBarHeight,
|
||||
date: currentDate,
|
||||
startDate: this.getDate('start'),
|
||||
endDate: this.getDate('end'),
|
||||
expenseTypes: [
|
||||
'餐饮',
|
||||
'交通',
|
||||
'服饰',
|
||||
'购物',
|
||||
'服务',
|
||||
'教育',
|
||||
'娱乐',
|
||||
'运动',
|
||||
'生活缴费',
|
||||
'旅行',
|
||||
'宠物',
|
||||
'医疗',
|
||||
'保险',
|
||||
'公益',
|
||||
'发红包',
|
||||
],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -64,7 +107,7 @@ export default {
|
|||
// 页面加载时的逻辑
|
||||
},
|
||||
methods: {
|
||||
// 保存分享海报
|
||||
// 日期选择变化处理
|
||||
bindDateChange: function (e) {
|
||||
this.date = e.detail.value
|
||||
},
|
||||
|
|
@ -77,12 +120,24 @@ export default {
|
|||
if (type === 'start') {
|
||||
year = year - 10
|
||||
} else if (type === 'end') {
|
||||
year = year + 10
|
||||
}
|
||||
month = month > 9 ? month : '0' + month
|
||||
day = day > 9 ? day : '0' + day
|
||||
return `${year}-${month}-${day}`
|
||||
},
|
||||
// 打开弹窗
|
||||
openPopup() {
|
||||
this.$refs.popup.open()
|
||||
},
|
||||
// 关闭弹窗
|
||||
closePopup() {
|
||||
this.$refs.popup.close()
|
||||
},
|
||||
// 选择类型
|
||||
selectType(type) {
|
||||
console.log('选择的类型：', type)
|
||||
this.closePopup()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -107,9 +162,19 @@ export default {
|
|||
}
|
||||
|
||||
.cash-flow {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.date {
|
||||
display: flex;
|
||||
color: white;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 19px;
|
||||
height: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.cash-flow-detail {
|
||||
|
|
@ -133,4 +198,67 @@ export default {
|
|||
view {
|
||||
// border: #16ff00 1px solid;
|
||||
}
|
||||
|
||||
/* 弹窗内容样式 */
|
||||
.popup-content {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
/* 弹窗标题栏 */
|
||||
.popup-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
position: absolute;
|
||||
left: 20rpx;
|
||||
font-size: 32rpx;
|
||||
color: #999;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* “全部类型”按钮 */
|
||||
.all-types-btn {
|
||||
background-color: rgba(204, 67, 67, 0.95);
|
||||
color: #fff;
|
||||
//border-radius: 50rpx;
|
||||
margin: 20rpx 0;
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
/* 支出分类网格 */
|
||||
.type-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.type-item {
|
||||
width: 30%;
|
||||
height: 100rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user