《仿盒马》app开发技术分享-- 逻辑优化第三弹（83）

## 技术栈

Appgallery connect

## 开发准备

现在我们的app功能已经趋近完善，bug和缺失的细节也越来越少了，我们继续对app进行优化，首先是我们的积分页面，我们只实现了全部的积分展示内容，对收入和支出的积分明细并没有进行展示，这里我们要实现一下，然后就是我们的优惠券，我们已过期的优惠券并没有修改状态为已过期。

## 功能分析

要实现积分列表的细分展示，首先我们就要从获取的全部数据中筛选出对应type的数据，在对应的自定义组件和列表中展示，针对已经过期的优惠券，在进入页面时，我们先查询出所有的数据，再根据日期对优惠券的类型进行修改，把修改后的数据展示到列表上

## 代码实现

首先我们实现积分获取展示列表

```css

import { PointsInfo } from '../../../entity/PointsInfo'

@Component

export struct GetPoints {

@Prop pointsList:PointsInfo[]=[]

@State flag:boolean=false

aboutToAppear(): void {

this.pointsList=filterPointsByType(this.pointsList)

this.flag=true

}

@Builder

recordList(){

List({ space: 10 }) {

ForEach(this.pointsList, (item:PointsInfo) => {

ListItem() {

this.allItem(item)

}

})

}

.backgroundColor("#f7f7f7").padding({ top: 10 })

.sticky(StickyStyle.Header)

}

@Builder

allItem(item:PointsInfo){

Row({space:10}){

Image(item.points_type=='0'?$r('app.media.shouru'):$r('app.media.duihuan'))

.height(35)

.width(35)

.objectFit(ImageFit.Contain)

.interpolation(ImageInterpolation.High)

.borderRadius(25)

Column({space:10}){

Text(item.points_type=='0'?"获得":"兑换")

.fontColor("#333333")

.fontSize(16)

Text(item.address)

.fontColor("#999999")

.fontSize(14)

}

.alignItems(HorizontalAlign.Start)

Blank()

Column({space:10}){

Text(item.points_type=='0'?"$"+item.points:"-$"+item.points)

.fontColor(item.points_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() {

if (this.flag){

this.recordList()

}

}

.height('100%')

.layoutWeight(1)

.width('100%')

}

}

function filterPointsByType(pointsList: PointsInfo[]): PointsInfo[] {

return pointsList.filter(item => item.points_type === '0');

}

```

我们实现了一个筛选方法，在进入页面的时候把筛选的数据添加到list组件中进行展示。接下来我们如法炮制，实现兑换积分列表

```css

import { PointsInfo } from '../../../entity/PointsInfo'

@Component

export struct OutPoints {

@Prop pointsList:PointsInfo[]=[]

@State flag:boolean=false

aboutToAppear(): void {

this.pointsList=filterPointsByType(this.pointsList)

this.flag=true

}

@Builder

recordList(){

List({ space: 10 }) {

ForEach(this.pointsList, (item:PointsInfo) => {

ListItem() {

this.allItem(item)

}

})

}

.backgroundColor("#f7f7f7").padding({ top: 10 })

.sticky(StickyStyle.Header)

}

@Builder

allItem(item:PointsInfo){

Row({space:10}){

Image(item.points_type=='0'?$r('app.media.shouru'):$r('app.media.duihuan'))

.height(35)

.width(35)

.objectFit(ImageFit.Contain)

.interpolation(ImageInterpolation.High)

.borderRadius(25)

Column({space:10}){

Text(item.points_type=='0'?"获得":"兑换")

.fontColor("#333333")

.fontSize(16)

Text(item.address)

.fontColor("#999999")

.fontSize(14)

}

.alignItems(HorizontalAlign.Start)

Blank()

Column({space:10}){

Text(item.points_type=='0'?"$"+item.points:"-$"+item.points)

.fontColor(item.points_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() {

if (this.flag){

this.recordList()

}

}

.height('100%')

.layoutWeight(1)

.width('100%')

}

}

function filterPointsByType(pointsList: PointsInfo[]): PointsInfo[] {

return pointsList.filter(item => item.points_type === '1');

}

```

接下来我们实现优惠券过期条目的优化逻辑,我们根据优惠券的截止日期与当前日期进行对比，然后修改过期优惠券的type。

```css

thisTime(): string {

const now = new Date();

const year = now.getFullYear();

const month = String(now.getMonth() + 1).padStart(2, '0');

const day = String(now.getDate()).padStart(2, '0');

const hours = String(now.getHours()).padStart(2, '0');

const minutes = String(now.getMinutes()).padStart(2, '0');

const seconds = String(now.getSeconds()).padStart(2, '0');

return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

}

compareDateTime(time1: string, time2: string): 1 | -1 | 0 {

const date1 = new Date(time1.replace(' ', 'T')); // 转换为ISO格式

const date2 = new Date(time2.replace(' ', 'T'));

const timestamp1 = date1.getTime();

const timestamp2 = date2.getTime();

if (timestamp1 > timestamp2) return 1;

if (timestamp1 < timestamp2) return -1;

return 0;

}

async aboutToAppear(): Promise<void> {

const value = await StorageUtils.getAll('user');

if (value != "") {

this.user=JSON.parse(value)

}

let databaseZone = cloudDatabase.zone('default');

let condition = new cloudDatabase.DatabaseQuery(coupon_mall);

condition.equalTo("user_id",this.user?.user_id)

let listData = await databaseZone.query(condition);

let json = JSON.stringify(listData)

let data:CouponMall[]= JSON.parse(json)

this.couponList = data.filter(item =>

this.compareDateTime(this.thisTime(), item.end_time) !== 1

);

}

```

我们通过时间对比再筛选列表，就完成了我们的业务优化