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

收支明细界面，card的view结构设计

Browse Source
This commit is contained in:
WindowBird 2025-08-18 14:01:52 +08:00
parent 7dad8a3b3a
commit e47b0eeb37
2 changed files with 60 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
enum/commonEnum.js
View File

@ -29,5 +29,7 @@ export const commonEnum = {
//收支明细
TYPE_SELECT: 'https://api.ccttiot.com/image-1755487673678.png', //类型
DOWN_ICON: 'https://api.ccttiot.com/image-1755484170012.png',
WITHDRAW: 'https://api.ccttiot.com/image-1755496777724.png', //提现
ORDER_NUMBER: 'https://api.ccttiot.com/image-1755496809579.png', //订单
}
export default commonEnum

66
pages/cashFlow/cashFlow.vue
View File

@ -1,7 +1,7 @@
<template>
<view
:style="{
background: `linear-gradient(to bottom, #ff803a 0, #ff803a ${getNavBarHeight() * 2}px, transparent ${getNavBarHeight() * 2}px, transparent 100%)`,
background: `linear-gradient(to bottom, #ff803a 0, #ff803a ${getNavBarHeight() * 2}px, #F7F7F7 ${getNavBarHeight() * 2}px, #F7F7F7 100%)`,
}"
class="page"
>
@ -35,10 +35,34 @@
</view>
</view>
<!-- 主要内容区域 -->
<view class="body">666</view>
<!-- 卡片区域 -->
<view v-for="(item, index) in billList" :key="index" class="card">
<view class="card-head">
<view class="card-date">428</view>
<view class="card-flow">
<view class="card-out">200</view>
<view class="card-in">201</view>
</view>
</view>
<view class="card-item">
<view class="card-item-cash-info">
<view class="card-icon"></view>
<view class="card-item-detail">
<view class="card-item-title">
<text class="left">1</text>
<text class="right">2</text>
</view>
<view class="card-item-body">
<text class="card-time">3</text>
<text class="order-number">4</text>
</view>
</view>
</view>
<view class="number">2222</view>
</view>
{{ item.date }}
</view>
</view>
<!-- 底部弹窗 -->
<uni-popup ref="popup" :mask-click="true" type="bottom">
<view class="popup-content">
@ -101,6 +125,32 @@ export default {
'公益',
'发红包',
],
billList: [
{
date: '5月31日 星期六',
type: '支出',
category: '购物',
time: '22:08',
merchant: '京东商城平台商户',
amount: '-11.40',
},
{
date: '5月31日 星期六',
type: '支出',
category: '购物',
time: '22:08',
merchant: '京东商城平台商户',
amount: '-11.40',
},
{
date: '5月31日 星期六',
type: '支出',
category: '购物',
time: '22:08',
merchant: '京东商城平台商户',
amount: '-11.40',
},
],
}
},
computed: {
@ -211,15 +261,15 @@ export default {
}
// 主要内容区域
.body {
.card {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
//background: #ca3232;
border-radius: 40rpx;
margin: 0 30rpx;
background: #ffffff;
border-radius: 20rpx;
margin: 12rpx 22rpx 12rpx 22rpx;
padding: 40rpx;
}