## 技术栈
Appgallery connect
## 开发准备
上一节我们实现了回收金页面的部分布局填充和内容展示，并且实现了当前订单收益总金额的展示，以及金额的隐藏，这一节我们来实现当前用户收支列表的展示，在这之前，我们先要修改一下我们recycleinfo表，我们把规格相关的内容添加上去，方便我们后续的逻辑编写，不然每次都根据weightid查询确实有一点点不方便
## 功能分析
我们已经通过tab实现了标题的切换，但是我们现在并没有操作列表的内容，所以我们还需要创建一个moneyinfo表，通过绑定userid，我们进行表的操作，然后通过查询出moneyinfo的列表信息，然后根据moneytype字段去筛选出我们想要的数据在列表中展示。同时根据不同的状态我们要展示出当前记录是收入还是支出，要更直观的给用户进行展示。
## 代码实现
首先我们把修改过的recycleinfo表结构展示一下
```css
{
"CloudDBZoneName": "default",
"objectTypeName": "recycle_info",
"fields": [
{"fieldName": "id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true},
{"fieldName": "user_id", "fieldType": "Integer", "notNull": true, "defaultValue": 0},
{"fieldName": "nike_name", "fieldType": "String"},
{"fieldName": "phone", "fieldType": "String"},
{"fieldName": "address", "fieldType": "String"},
{"fieldName": "day", "fieldType": "String"},
{"fieldName": "start_time", "fieldType": "String"},
{"fieldName": "end_time", "fieldType": "String"},
{"fieldName": "msg", "fieldType": "String"},
{"fieldName": "weight_id", "fieldType": "String"},
{"fieldName": "weight", "fieldType": "String"},
{"fieldName": "txt", "fieldType": "String"},
{"fieldName": "integral", "fieldType": "Double"},
{"fieldName": "money", "fieldType": "Double"},
{"fieldName": "create_time", "fieldType": "String"},
{"fieldName": "express_code", "fieldType": "String"},
{"fieldName": "express_people", "fieldType": "String"},
{"fieldName": "express_company", "fieldType": "String"},
{"fieldName": "order_type", "fieldType": "Integer"},
{"fieldName": "logistics_id", "fieldType": "Integer"}
],
"indexes": [
{"indexName": "fieldIndexId", "indexList": [{"fieldName":"id","sortType":"DESC"}]}
],
"permissions": [
{"role": "World", "rights": ["Read", "Upsert", "Delete"]},
{"role": "Authenticated", "rights": ["Read", "Upsert", "Delete"]},
{"role": "Creator", "rights": ["Read", "Upsert", "Delete"]},
{"role": "Administrator", "rights": ["Read", "Upsert", "Delete"]}
]
}
```
后续的操作我们都用这个结构的表来进行增删改查
然后我们创建对应的moneyinfo表，在内部添加我们需要的字段
```css
{
"objectTypeName": "money_info",
"fields": [
{"fieldName": "id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true},
{"fieldName": "user_id", "fieldType": "Integer", "notNull": true, "defaultValue": 0},
{"fieldName": "money", "fieldType": "String"},
{"fieldName": "all_money", "fieldType": "String"},
{"fieldName": "create_time", "fieldType": "String"},
{"fieldName": "money_type", "fieldType": "String"},
{"fieldName": "address", "fieldType": "String"},
{"fieldName": "year", "fieldType": "String"},
{"fieldName": "month", "fieldType": "String"},
{"fieldName": "day", "fieldType": "String"},
{"fieldName": "time", "fieldType": "String"}
],
"indexes": [
{"indexName": "field1Id", "indexList": [{"fieldName":"id","sortType":"ASC"}]}
],
"permissions": [
{"role": "World", "rights": ["Read", "Upsert", "Delete"]},
{"role": "Authenticated", "rights": ["Read", "Upsert", "Delete"]},
{"role": "Creator", "rights": ["Read", "Upsert", "Delete"]},
{"role": "Administrator", "rights": ["Read", "Upsert", "Delete"]}
]
}
```
然后我们生成Server Client 的Model，因为我们的现金奖励以及积分是只有在回收订完完成之后才会添加数据所以我们要在订单完成的点击事件中添加数据的提交，同时把状态改为收入
```css
Text("订单完成")
.fontColor(Color.Black)
.fontSize(12)
.padding(5)
.borderRadius(10)
.backgroundColor(Color.Pink)
.onClick(async ()=>{
let data=new recycle_info()
data.id=item.id
data.user_id=item.user_id
data.nike_name=item.nike_name
data.phone=item.phone
data.address=item.address
data.day=item.day
data.start_time=item.start_time
data.end_time=item.end_time
data.msg=item.msg
data.weight_id=item.weight_id
data.weight=item.weight
data.txt=item.txt
data.money=item.money
data.integral=item.integral
data.create_time=item.create_time
data.express_code=item.express_code
data.express_people=item.express_people
data.express_company=item.express_company
data.order_type=3
data.logistics_id=item.logistics_id
let num = await databaseZone.upsert(data);
hilog.info(0x0000, 'testTag', `Succeeded in upserting data, result: ${num}`);
if (num>0) {
this.onRefresh()
showToast("订单已完成")
let money=new money_info
money.id=Math.floor(Math.random() * 1000000)
money.user_id=this.user!.user_id
money.money=String(item.money)
money.all_money=''
money.money_type='0'
money.address='客户端下单奖励'
money.year=this.year
money.month=this.month
money.day=this.day
money.time=this.time
money.create_time=this.year+"-"+this.month+"-"+this.day+" "+this.time
let nums = await databaseZone.upsert(money);
}
})
```
提交订单后，我们的数据就已经添加到云数据库中，接下来我们回到回收金展示页开始实现数据展示，这里我们拿全部订单展示为例
先创建对应的列表展示组件
```css
import { MoneyInfo } from '../../../entity/money_info'
@Component
export struct RecordList {
@Prop recodeList:MoneyInfo[]=[]
@Builder
recordList(){
List({ space: 10 }) {
ForEach(this.recodeList, (item:MoneyInfo) => {
ListItem() {
this.allItem(item)
}
})
}
.backgroundColor("#f7f7f7").padding({ top: 10 })
.sticky(StickyStyle.Header)
}
@Builder
allItem(item:MoneyInfo){
Row({space:10}){
Image(item.money_type=='0'?$r('app.media.shouru'):$r('app.media.tixian'))
.height(35)
.width(35)
.objectFit(ImageFit.Contain)
.interpolation(ImageInterpolation.High)
.borderRadius(25)
Column({space:10}){
Text(item.money_type=='0'?"收入":"提现")
.fontColor("#333333")
.fontSize(16)
Text(item.address)
.fontColor("#999999")
.fontSize(14)
}
.alignItems(HorizontalAlign.Start)
Blank()
Column({space:10}){
Text(item.money_type=='0'?"¥"+item.money:"-¥"+item.money)
.fontColor(item.money_type=='0'?"#00B644":"#EC2400")
.fontSize(16)
.margin({top:1})
Text(item.create_time)
.fontColor("#999999")
.fontSize(14)
.margin({top:1})
}
.alignItems(HorizontalAlign.End)
}
.justifyContent(FlexAlign.SpaceBetween)
.padding({left:12,right:12})
.width('100%')
.alignItems(VerticalAlign.Center)
.height(71)
.backgroundColor(Color.White)
}
build() {
Column() {
this.recordList()
}
.height('100%')
.layoutWeight(1)
.width('100%')
}
}
```
然后在页面的tabs中引用
```css
Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
ForEach(this.arr,(item:string,index)=>{
TabContent() {
Column(){
if (item=='全部') {
RecordList({recodeList:this.moneyList})
}
}
}
.tabBar(this.TabBuilder(index, item))
.borderRadius(10)
.backgroundColor(Color.White)
})
}
```
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/70046889/viewspace-3089296/ ，如需转载，请注明出处，否则将追究法律责任。
