技术栈
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
);
}
我们通过时间对比再筛选列表，就完成了我们的业务优化
