当前位置：首页 > news >正文

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

news 2025/6/27 15:43:06

技术栈

Appgallery connect

开发准备

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

功能分析

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

代码实现

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

import { PointsInfo } from '../../../entity/PointsInfo'@Component
export struct GetPoints {@Prop  pointsList:PointsInfo[]=[]@State flag:boolean=falseaboutToAppear(): void {this.pointsList=filterPointsByType(this.pointsList)this.flag=true}@BuilderrecordList(){List({ space: 10 }) {ForEach(this.pointsList, (item:PointsInfo) => {ListItem() {this.allItem(item)}})}.backgroundColor("#f7f7f7").padding({ top: 10 }).sticky(StickyStyle.Header)}@BuilderallItem(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组件中进行展示。接下来我们如法炮制，实现兑换积分列表

import { PointsInfo } from '../../../entity/PointsInfo'@Component
export struct OutPoints {@Prop  pointsList:PointsInfo[]=[]@State flag:boolean=falseaboutToAppear(): void {this.pointsList=filterPointsByType(this.pointsList)this.flag=true}@BuilderrecordList(){List({ space: 10 }) {ForEach(this.pointsList, (item:PointsInfo) => {ListItem() {this.allItem(item)}})}.backgroundColor("#f7f7f7").padding({ top: 10 }).sticky(StickyStyle.Header)}@BuilderallItem(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。

  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);}