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

技术栈

Appgallery connect

开发准备

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

功能分析

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

代码实现

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

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组件中进行展示。接下来我们如法炮制，实现兑换积分列表

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。

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

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