技術棧

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

我們通過時間對比再篩選列表，就完成了我們的業務優化