DEV Community: Lin

Imitation Box Horse - Optimization of Unfinished Order List Logic (61)

Lin — Sat, 28 Jun 2025 17:02:23 +0000

Technical Stack
Appgallery connect

Preface
In the previous section, when we implemented the joint submission of orders and coupons, we checked the generated order information on the order list page and found that there were issues with both the information display and price calculations for the orders. Therefore, we need to urgently fix these corresponding issues.
Source of the Problem

async aboutToAppear(): Promise {
const value = await StorageUtils.getAll('user');
if (value != "") {
this.user = JSON.parse(value)
}
if (this.currentIndexCheck==this.currentIndex) {
let databaseZone = cloudDatabase.zone('default');
let condition = new cloudDatabase.DatabaseQuery(order_list);
condition.equalTo("user_id",this.user?.user_id).and().equalTo("order_status",0)
let listData = await databaseZone.query(condition);
let json = JSON.stringify(listData)
let data1:OrderList[]= JSON.parse(json)
this.orderInfo=data1

  // The problematic code
  let condition1 = new cloudDatabase.DatabaseQuery(order_product_list);
  condition1.equalTo("order_product_id",data1[0].order_product_id)
  let listData1 = await databaseZone.query(condition1);
  let json1 = JSON.stringify(listData1)
  this.productList=JSON.parse(json1)

  this.flag=true
}

}

As we can see, when entering the "To Be Shipped" page, we request all orders from the orderlist, which is correct. However, when we continue down and query the data with conditions:

condition1.equalTo("order_product_id",data1[0].order_product_id)

Here we directly take the first piece of data and use it in the list logic. This causes all items in the list to display the products and prices from the first order. The displayed images and prices are all the same.
Solution
After identifying the problem, we decided to use a Map to store the data corresponding to different order_product_ids. This way, when looping through the orders, we can use the order_product_id as the key to retrieve the corresponding data. Now let's make the modifications:

// First, define a global Map to receive the content
@State mapList: Map | null = null;

// Replace the original logic that only requested the first item with code that stores data in the Map
async aboutToAppear(): Promise {
const value = await StorageUtils.getAll('user');
if (value != "") {
this.user = JSON.parse(value)
}
if (this.currentIndexCheck == this.currentIndex) {
let databaseZone = cloudDatabase.zone('default');
let condition = new cloudDatabase.DatabaseQuery(order_list);
condition.equalTo("user_id", this.user?.user_id).and().equalTo("order_status", 0);
let listData = await databaseZone.query(condition);
let json = JSON.stringify(listData);
let data1: OrderList[] = JSON.parse(json);
this.orderInfo = data1;

  // New code to populate the Map with product data for each order
  const myMap = new Map<string, OrderProductList[]>();
  for (let i = 0; i < data1.length; i++) {
    let condition1 = new cloudDatabase.DatabaseQuery(order_product_list);
    condition1.equalTo("order_product_id", data1[i].order_product_id);
    let listData1 = await databaseZone.query(condition1);
    let json1 = JSON.stringify(listData1);
    myMap.set(data1[i].order_product_id, JSON.parse(json1));
  }
  this.mapList = myMap;

  this.flag = true;
}

}

// Calculate the price for each order by retrieving the correct product data from the Map
price(item: OrderList): number {
const money = this.mapList!.get(String(item.order_product_id));
if (!money || money.length === 0) return 0;
return money[0].buyAmount * money[0].price;
}

// Update the List component to use the correct product data from the Map
List({ space: 10 }) {
ForEach(this.mapList?.get(item.order_product_id) || [], (pos: OrderProductList) => {
ListItem() {
Column() {
Image(pos.img)
.height(60)
.width(60)
.borderRadius(5)
}
}
})
}
.padding({ left: 10 })
.width('100%')
.listDirection(Axis.Horizontal)
.height(80)

With these changes, the logic on the order list page has been optimized and now functions correctly.

Imitation Box Horse - Order Discount Settlement (60)

Lin — Sat, 28 Jun 2025 17:02:00 +0000

Technical Stack
Appgallery connect

Development Preparation
In the previous section, we implemented coupon selection and successfully displayed the post-coupon price to users. We also informed users in a user-friendly way about coupons that cannot be used. In this section, we will take the next step with coupon functionality, integrating coupon content with order settlement.

Functional Analysis
Since our previous order list separated order-related and product-related information, we will similarly separate coupon content, storing only the ID for subsequent querying of the coupon amount. First, we need to modify the order table. When selecting a coupon, we retrieve relevant coupon information and submit it along with the order, facilitating querying of the post-coupon price in order details.

Code Implementation
First, modify the orderlist table content:

{
"CloudDBZoneName": "default",
"objectTypeName": "order_list",
"fields": [
{"fieldName": "id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true},
{"fieldName": "user_id", "fieldType": "Integer", "notNull": true, "defaultValue": 0},
{"fieldName": "order_code", "fieldType": "String"},
{"fieldName": "order_status", "fieldType": "Integer"},
{"fieldName": "order_product_id", "fieldType": "String"},
{"fieldName": "coupon_id", "fieldType": "Integer"},
{"fieldName": "address", "fieldType": "String"},
{"fieldName": "nickname", "fieldType": "String"},
{"fieldName": "phone", "fieldType": "String"},
{"fieldName": "order_remark", "fieldType": "String"},
{"fieldName": "pay_type", "fieldType": "String"},
{"fieldName": "order_create_time", "fieldType": "String"},
{"fieldName": "order_pay_time", "fieldType": "String"},
{"fieldName": "order_delivery_time", "fieldType": "String"},
{"fieldName": "order_over_time", "fieldType": "String"}
],
"indexes": [
{"indexName": "field1Index", "indexList": [{"fieldName":"id","sortType":"ASC"}]}
],
"permissions": [
{"role": "World", "rights": ["Read", "Upsert", "Delete"]},
{"role": "Authenticated", "rights": ["Read", "Upsert", "Delete"]},
{"role": "Creator", "rights": ["Read", "Upsert", "Delete"]},
{"role": "Administrator", "rights": ["Read", "Upsert", "Delete"]}
]
}

Then, retrieve the coupon ID when selecting a coupon, implemented via callback:

// Custom pop-up window page
onItemSelected: (coupon_id:number) => void= () => {
};

// Checkout page
@State coupon_id:number=0

couponController: CustomDialogController| null = new CustomDialogController({
builder: CouponCheckDialog({
couponPrice:this.couponPrice,
price:this.price(),
onItemSelected:(coupon_id:number)=>{
this.coupon_id=coupon_id
}
}),
alignment: DialogAlignment.Bottom,
customStyle:true
});

Merge and submit information when settling the order:

Text("Submit Order")
.fontColor(Color.White)
.padding(10)
.borderRadius(10)
.backgroundColor("#d81e06")
.fontSize(14)
.onClick(async ()=>{
if (this.addressInfo!=null) {
let databaseZone = cloudDatabase.zone('default');
try {
for (let i = 0; i < this.productList.length; i++) {
let productPush = new order_product_list();
productPush.id=this.codeId+i
productPush.order_product_id=this.codeId
productPush.img=this.productList[i].productImgAddress
productPush.price=this.productList[i].productPrice
productPush.name=this.productList[i].productName
productPush.originalPrice=this.productList[i].productOriginalPrice
productPush.spec=this.productList[i].productSpecName
productPush.buyAmount=this.productList[i].buyAmount
let num = await databaseZone.upsert(productPush);
hilog.info(0x0000, 'testTag', Succeeded in upserting data, result: ${num});
}
} catch (e) {
hilog.info(0x0000, 'testTag', Failed to upsert data, error: ${e});
}

  let orderPush = new order_list();
  orderPush.id=Math.floor(Math.random() * 1000000)
  orderPush.user_id=this.user!.user_id
  orderPush.order_product_id=String(this.codeId)
  orderPush.order_code=this.generateOrderNo(10)
  orderPush.order_status=0
  if (this.remark!='') {
    orderPush.order_remark=this.remark
  }
  orderPush.coupon_id=this.coupon_id
  orderPush.address=this.addressInfo.address
  orderPush.nickname=this.addressInfo.nikeName
  orderPush.phone=this.addressInfo.phone
  orderPush.order_create_time=this.formatCurrentDate()
  orderPush.order_pay_time=this.formatCurrentDate()
  let num = await databaseZone.upsert(orderPush);
  hilog.info(0x0000, 'testTag', `Succeeded in upserting order data, result: ${num}`);
  if (num>0) {
    for (let i = 0; i < this.productList.length; i++) {
      if (this.productList[i].isNeedPay) {
        let item = new cart_product_list();
        item.id=this.productList[i].id
        let listData = await databaseZone.delete(item);
        hilog.info(0x0000, 'testTag', `Succeeded in deleting cart item, result: ${listData}`);
      }
    }
    let eventData: emitter.EventData = {
      data: {}
    };
    let innerEvent: emitter.InnerEvent = {
      eventId: 1012,
      priority: emitter.EventPriority.HIGH
    };
    emitter.emit(innerEvent, eventData);
    router.replaceUrl({url:'pages/view/OrderSuccessPage',params:orderPush})
  }
} else {
  showToast("Please select an address first")
}

})

This implements the association between order settlement and coupons.

Imitation Hema - Choose Coupon (59)

Lin — Sat, 28 Jun 2025 17:00:50 +0000

Technical Stack
Appgallery connect

Development Preparation
In the previous section, we implemented coupon query on the order confirmation page, but lacked other coupon-related logic. Our goal is to use corresponding coupons during order settlement. Now, we need to enable coupon selection on the order confirmation page, presenting it in a pop-up window for user convenience.

Functional Analysis
To display coupons in a pop-up window:

Create a custom pop-up dialog.
Query all coupon data to show both usable and unusable coupons.
Inform users of usable coupon amounts and the remaining amount needed for unusable coupons to be valid.
Allow clicking on usable coupons to modify the settlement amount and display the selected coupon amount.

Code Implementation
First, create the pop-up window with two-way binding for coupon amount:

@Preview
@CustomDialog
export struct CouponCheckDialog {
@State user: User | null = null
@State couponList: CouponMall[] = []
controller: CustomDialogController;
@State lessThanLimit: CouponMall[] = []
@State greaterOrEqualLimit: CouponMall[] = []
@prop price: number
@link couponPrice: number

async aboutToAppear(): Promise {
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

this.splitCouponsByLimit(data, this.price)

}

@builder
Header(type: number) {
Text(type == 0 ? "Usable Coupons" : "Unusable Coupons")
.width('100%')
.padding(10)
.textAlign(TextAlign.Start)
.fontColor(Color.Black)
.fontSize(16)
}

@builder
Item(item: CouponMall) {
Column({ space: 10 }) {
Row({ space: 10 }) {
Column() {
Text("¥" + item.price)
.fontSize(30)
.fontColor(Color.Red)
.fontWeight(FontWeight.Bold)
Text("Valid for orders over ¥" + item.limit_amount)
.fontColor(Color.Red)
.fontWeight(FontWeight.Bold)
.fontSize(12)
}

    Column({ space: 10 }) {
      Text(item.type_str)
        .fontColor(Color.Black)
        .fontWeight(FontWeight.Bold)
        .fontSize(16)

      Text(item.txt)
        .fontColor(Color.Grey)
        .fontSize(12)
    }

    Blank()
    Text("Ready to Use")
      .width(80)
      .height(80)
      .borderRadius(40)
      .fontSize(14)
      .textAlign(TextAlign.Center)
      .fontColor(Color.White)
      .backgroundColor(Color.Red)
  }
  .width('100%')
  .justifyContent(FlexAlign.SpaceBetween)

  Divider().width('100%').height(0.8)
    .color("#e6e6e6")
  Text("Valid from " + item.start_time + " to " + item.end_time)
    .fontSize(12)
    .fontColor(Color.Grey)
}
.margin({ top: 10 })
.padding(10)
.backgroundColor(Color.White)
.borderRadius(10)
.onClick(() => {
  this.couponPrice = item.price
  this.controller.close()
})

}

@builder
NotItem(item: CouponMall) {
Column({ space: 10 }) {
Row({ space: 10 }) {
Column() {
Text("¥" + item.price)
.fontSize(30)
.fontColor(Color.Grey)
.fontWeight(FontWeight.Bold)
Text("Valid for orders over ¥" + item.limit_amount)
.fontColor(Color.Grey)
.fontWeight(FontWeight.Bold)
.fontSize(12)
}

    Column({ space: 10 }) {
      Text(item.type_str)
        .fontColor(Color.Grey)
        .fontWeight(FontWeight.Bold)
        .fontSize(16)

      Text(item.txt)
        .fontColor(Color.Grey)
        .fontSize(12)
    }

    Blank()
    Text("Unusable")
      .width(80)
      .height(80)
      .borderRadius(40)
      .fontSize(14)
      .textAlign(TextAlign.Center)
      .fontColor(Color.White)
      .backgroundColor(Color.Grey)
  }
  .width('100%')
  .justifyContent(FlexAlign.SpaceBetween)

  Divider().width('100%').height(0.8)
    .color("#e6e6e6")

  Text("Valid from " + item.start_time + " to " + item.end_time)
    .fontSize(12)
    .fontColor(Color.Grey)
  Text() {
    Span("Reason for unavailability: ")
      .fontColor(Color.Red)
      .fontSize(12)
    Span("Order amount needs ¥")
      .fontColor(Color.Gray)
      .fontSize(12)
    Span("" + (item.limit_amount - this.price))
      .fontColor(Color.Red)
      .fontSize(12)
    Span(" more to meet the threshold")
      .fontColor(Color.Gray)
      .fontSize(12)
  }
  .backgroundColor("#fffacfcf")
  .padding(5)
  .borderRadius(5)
}
.margin({ top: 10 })
.padding(10)
.backgroundColor(Color.White)
.borderRadius(10)
.onClick(() => {
  showToast("Coupon is not usable")
})

}

build() {
Column() {
Text("Select Coupon")
.fontSize(18)
.fontColor(Color.Black)
.fontWeight(FontWeight.Bold)
.width('100%')
.textAlign(TextAlign.Center)
.padding(10)
.backgroundColor(Color.White)

  List({ space: 10 }) {
    ListItemGroup({ header: this.Header(0) }) {
      ForEach(this.lessThanLimit, (item: CouponMall, index: number) => {
        ListItem() {
          this.Item(item)
        }
      })
    }
    ListItemGroup({ header: this.Header(1) }) {
      ForEach(this.greaterOrEqualLimit, (item: CouponMall, index: number) => {
        ListItem() {
          this.NotItem(item)
        }
      })
    }
  }
  .padding(10)

  Button("Confirm Selection", { type: ButtonType.Normal })
    .width('90%')
    .height(50)
    .backgroundColor(Color.Red)
    .fontColor(Color.White)
    .borderRadius(25)
    .margin({ top: 20, bottom: 30 })
    .onClick(() => {
      this.controller.close()
    })
}
.width('100%')
.backgroundColor(Color.White)

}

splitCouponsByLimit(coupons: CouponMall[], price: number) {
const lessThanLimit = coupons.filter(coupon =>
coupon.limit_amount <= price
);
this.lessThanLimit = lessThanLimit;

const greaterOrEqualLimit = coupons.filter(coupon =>
  coupon.limit_amount > price
);
this.greaterOrEqualLimit = greaterOrEqualLimit;

}
}

Reference the pop-up in the order confirmation page:

couponController: CustomDialogController | null = new CustomDialogController({
builder: CouponCheckDialog({
couponPrice: this.couponPrice,
price: this.price()
}),
alignment: DialogAlignment.Bottom,
customStyle: true
});

Modify the coupon display component logic:

Row() {
Text("Coupons")
.fontSize(14)
.fontColor(Color.Black)

if (this.getCoupon() > 0) {
if (this.couponPrice > 0) {
Text("Selected: -¥" + this.couponPrice + " >")
.fontSize(14)
.fontColor(Color.Red)
.onClick(() => {
this.couponController?.open()
})
} else {
Text(this.getCoupon() + " available >")
.fontSize(14)
.fontColor(Color.Red)
.onClick(() => {
this.couponController?.open()
})
}
} else {
Text("No available coupons")
.fontSize(14)
.fontColor(Color.Black)
}
}
.padding(10)
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)

Imitation Hema - Coupon Logic Optimization (58)

Lin — Sat, 28 Jun 2025 16:58:42 +0000

Technical Stack
Appgallery connect

Development Preparation
We have successfully implemented coupon redemption and display features, bringing our application closer to a complete e-commerce platform. However, a new issue arises: after users redeem their new user coupons, the new user coupon module remains visible. Since our data is queried from the cloud database, we need to find a corresponding field to control the visibility of this module. Specifically, the module should hide after the user redeems the coupons, remain hidden when the user is not logged in, and display only when the user is logged in and eligible for new user coupons. Additionally, during checkout, we need to determine how many coupons are applicable based on the order amount.

Functional Analysis
Our coupon display uses a component-based approach. When the user is not logged in, the component does not destroy, and the aboutToAppear lifecycle method does not execute again, preventing updates to the user information. To solve this, we need to ensure user information is fetched in real-time. We'll use the isvip field, 预留 during table creation, to determine if a user is a new user. On the order confirmation page, we'll filter applicable coupons based on the minimum spend requirement.

Code Implementation
First, after redeeming coupons, update the isvip status via callback and receive user information after login:

@link user: User|null
private callback?: () => void

Button('Redeem Now', { type: ButtonType.Normal })
.width(240)
.height(40)
.backgroundColor('#FF0000')
.fontColor(Color.White)
.borderRadius(20)
.margin({ bottom: 16 })
.onClick(async () => {
try {
for (const item of this.couponList) {
const coupon = new coupon_mall();
coupon.id = Math.floor(Math.random() * 1000000);
coupon.user_id = this.user!.user_id;
coupon.coupon_id = item.coupon_id;
coupon.price = Number(item.price);
coupon.type = 0;
coupon.limit_amount = item.limit_amount;
coupon.start_time = this.creatTime();
coupon.end_time = this.endTime();
coupon.type_str = item.type;
coupon.txt = "Valid for all products";
const databaseZone = cloudDatabase.zone('default');
await databaseZone.upsert(coupon); // Wait for each upsert to complete
}

  // Execute after all loops complete
  showToast("Coupons redeemed successfully");
  this.callback!();
} catch (error) {
  hilog.error(0x0000, 'testTag', `Insertion failed: ${error}`);
  showToast("Failed to redeem coupons");
}

})

Implement the callback:

CouponComponent({
home_activity: this.home_new_people_coupon,
couponList: this.couponList,
callback: async () => {
let users = new user();
users.id = this.user!.id;
users.user_id = this.user!.user_id;
users.user_name = this.user!.user_name;
users.psw = this.user!.psw;
users.is_vip = false;
users.user_code = this.user!.user_code;
users.is_log_off = this.user!.is_vip;

let num = await databaseZone.upsert(users);
StorageUtils.set("user", JSON.stringify(users));

if (num > 0) {
  let condition3 = new cloudDatabase.DatabaseQuery(user);
  condition3
    .equalTo("user_name", this.user?.user_name)
    .and()
    .equalTo("psw", this.user?.psw);

  let listData3 = await databaseZone.query(condition3);
  let json3 = JSON.stringify(listData3);
  let data3: User[] = JSON.parse(json3);
  this.user = data3[0];
}

},
user: this.user
})
.visibility(this.user?.is_vip ? Visibility.Visible : Visibility.None)

Control visibility using isvip and handle post-login user information:

let innerEvent2: emitter.InnerEvent = {
eventId: 2001
};

let callback2: Callback = async (eventData: emitter.EventData) => {
console.info(eventData: ${JSON.stringify(eventData)});
const value = await StorageUtils.getAll('user');
if (value != "") {
this.user = JSON.parse(value);
} else {
this.userInfo = null;
this.user = null;
}
};

emitter.on(innerEvent2, callback2);

On the order confirmation page, query available coupons:

let databaseZone = cloudDatabase.zone('default');
let condition = new cloudDatabase.DatabaseQuery(coupon_mall);
condition
.equalTo("user_id", this.user?.user_id)
.and()
.equalTo("type", 0);

let listData = await databaseZone.query(condition);
let json = JSON.stringify(listData);
let data: CouponMall[] = JSON.parse(json);
this.couponList = data;

Filter applicable coupons based on the order amount:

getCoupon(): number {
let eligibleCoupons = this.couponList.filter(coupon =>
coupon.limit_amount <= this.price()
).length;
return eligibleCoupons;
}

Update the UI:

Row() {
Text("Coupons")
.fontSize(14)
.fontColor(Color.Black);

if (this.getCoupon() > 0) {
Text(${this.getCoupon()} available)
.fontSize(14)
.fontColor(Color.Red);
} else {
Text("No available coupons")
.fontSize(14)
.fontColor(Color.Black);
}
}
.padding(10)
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)

With these changes, our coupon logic is becoming more comprehensive.

Imitation Hema - Coupon Display Page (57)

Lin — Sat, 28 Jun 2025 16:57:50 +0000

Technical Stack
Appgallery connect

Development Preparation
In the previous section, we implemented the coupon redemption function and successfully queried coupon information from the cloud. Now we need to create a coupon display page to show users the coupons under their current account, helping them make better purchasing decisions. Since coupons can have multiple statuses, we also need to handle the distinction between different statuses during display.

Functional Analysis
To implement the coupon display, we first need to get the currently logged-in user. Since we recorded the user ID when redeeming coupons, we'll query coupons based on this user ID. When the page loads, we'll fetch the corresponding coupon data from the cloud and display it in a list.

Code Implementation
First, add a top bar to the newly created coupon display page:

CommonTopBar({ title: "Coupons", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})

Retrieve the currently stored user information:

@State user: User|null=null
const value = await StorageUtils.getAll('user');
if (value != "") {
this.user=JSON.parse(value)
}

Query the corresponding coupon list based on the current user ID:

@State couponList:CouponMall[]=[]

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

After retrieving the data, add a list component:

List({space:10}){
ForEach(this.couponList,(item:CouponMall,index:number)=>{
ListItem(){
// Item content will be defined using @builder
}
})
}
.padding(10)

Define the item layout using @builder:

@builder
Item(item:CouponMall){
Column({space:10}){
Row({space:10}){
Column(){
Text("¥"+item.price)
.fontSize(30)
.fontColor(Color.Red)
.fontWeight(FontWeight.Bold)
Text("Minimum spend: ¥"+item.limit_amount)
.fontColor(Color.Red)
.fontWeight(FontWeight.Bold)
.fontSize(12)
}

  Column({space:10}){
    Text(item.type_str)
      .fontColor(Color.Black)
      .fontWeight(FontWeight.Bold)
      .fontSize(16)

    Text(item.txt)
      .fontColor(Color.Grey)
      .fontSize(12)
  }
  Blank()
  Text(this.getStatusText(item))
    .width(80)
    .height(80)
    .borderRadius(40)
    .fontSize(14)
    .textAlign(TextAlign.Center)
    .fontColor(this.getStatusColor(item))
    .backgroundColor(this.getStatusBgColor(item))
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
Divider().width('100%').height(0.8)
  .color("#e6e6e6")
Text("Valid from "+item.start_time+" to "+item.end_time)
  .fontSize(12)
  .fontColor(Color.Grey)

}.padding(10)
.backgroundColor(Color.White)
.borderRadius(10)
}

// Helper methods to determine status text and colors
getStatusText(item: CouponMall): string {
const now = new Date();
const endDate = new Date(item.end_time);
const startDate = new Date(item.start_time);

if (now < startDate) {
return "Upcoming";
} else if (now > endDate) {
return "Expired";
} else {
return "Available";
}
}

getStatusColor(item: CouponMall): ResourceStr {
const now = new Date();
const endDate = new Date(item.end_time);
const startDate = new Date(item.start_time);

if (now < startDate) {
return "#007DFF"; // Blue for upcoming
} else if (now > endDate) {
return "#888888"; // Grey for expired
} else {
return Color.White; // White for available (on red background)
}
}

getStatusBgColor(item: CouponMall): ResourceStr {
const now = new Date();
const endDate = new Date(item.end_time);
const startDate = new Date(item.start_time);

if (now < startDate) {
return "#E6F4FF"; // Light blue for upcoming
} else if (now > endDate) {
return "#F5F5F5"; // Light grey for expired
} else {
return Color.Red; // Red for available
}
}

Reference the item layout in the ListItem:

List({space:10}){
ForEach(this.couponList,(item:CouponMall,index:number)=>{
ListItem(){
this.Item(item)
}
})
}
.padding(10)

Execute the code to view the display effect of the current coupon list.

Imitation Hema - Get Coupons (56)

Lin — Sat, 28 Jun 2025 16:55:32 +0000

Technical Stack
Appgallery connect

Development Preparation
In previous feature developments, some functions only had display capabilities without any interaction with the cloud. Through subsequent iterations, more functionalities have gained interactive capabilities. In this section, we will start adding business logic to those static display modules, beginning with implementing the new user coupon redemption feature on the home page.

Functional Analysis
For new user coupons, we have defined fields during creation, including coupon ID, denomination, minimum applicable amount, etc. Since we need to bind coupons with users, we need to create a new coupon table, populate it with existing coupon data, and add a user ID field to facilitate user-based querying.

Code Implementation
First, create the corresponding coupon table and define fields:

{
"objectTypeName": "coupon_mall",
"fields": [
{"fieldName": "id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true},
{"fieldName": "user_id", "fieldType": "Integer"},
{"fieldName": "coupon_id", "fieldType": "Integer", "notNull": true, "defaultValue": 0},
{"fieldName": "price", "fieldType": "Double"},
{"fieldName": "type", "fieldType": "Integer"},
{"fieldName": "limit_amount", "fieldType": "Double"},
{"fieldName": "start_time", "fieldType": "String"},
{"fieldName": "end_time", "fieldType": "String"},
{"fieldName": "type_str", "fieldType": "String"},
{"fieldName": "txt", "fieldType": "String"}
],
"indexes": [
{"indexName": "field1Index", "indexList": [{"fieldName":"id","sortType":"ASC"}]}
],
"permissions": [
{"role": "World", "rights": ["Read", "Upsert", "Delete"]},
{"role": "Authenticated", "rights": ["Read", "Upsert", "Delete"]},
{"role": "Creator", "rights": ["Read", "Upsert", "Delete"]},
{"role": "Administrator", "rights": ["Read", "Upsert", "Delete"]}
]
}

After adding the required fields, generate corresponding entities and database classes:

import { cloudDatabase } from '@kit.CloudFoundationKit';

class coupon_mall extends cloudDatabase.DatabaseObject {
public id: number;
public user_id: number;
public coupon_id = 0;
public price: number;
public type: number;
public limit_amount: number;
public start_time: string;
public end_time: string;
public type_str: string;
public txt: string;

public naturalbase_ClassName(): string {
return 'coupon_mall';
}
}

export { coupon_mall };

class CouponMall {
id: number;
user_id: number;
coupon_id: number = 0;
price: number;
type: number;
limit_amount: number;
start_time: string;
end_time: string;
type_str: string;
txt: string;

constructor() {
}


setId(id: number): void {
    this.id = id;
}

getId(): number  {
    return this.id;
}

setUser_id(user_id: number): void {
    this.user_id = user_id;
}

getUser_id(): number  {
    return this.user_id;
}

setCoupon_id(coupon_id: number): void {
    this.coupon_id = coupon_id;
}

getCoupon_id(): number  {
    return this.coupon_id;
}

setPrice(price: number): void {
    this.price = price;
}

getPrice(): number  {
    return this.price;
}

setType(type: number): void {
    this.type = type;
}

getType(): number  {
    return this.type;
}

setLimit_amount(limit_amount: number): void {
    this.limit_amount = limit_amount;
}

getLimit_amount(): number  {
    return this.limit_amount;
}

setStart_time(start_time: string): void {
    this.start_time = start_time;
}

getStart_time(): string  {
    return this.start_time;
}

setEnd_time(end_time: string): void {
    this.end_time = end_time;
}

getEnd_time(): string  {
    return this.end_time;
}

setType_str(type_str: string): void {
    this.type_str = type_str;
}

getType_str(): string  {
    return this.type_str;
}

setTxt(txt: string): void {
    this.txt = txt;
}

getTxt(): string  {
    return this.txt;
}

}

export { CouponMall };

After generating the files, add corresponding logic to the "Redeem Now" button in the new user coupon module on the home page. Since there are multiple coupons, we need to loop through and upload them to the cloud database:

import { coupon_mall } from "../clouddb/coupon_mall"
import { couponInfo } from "../entity/couponInfo"
import { homeNewPeopleCoupon } from "../entity/homeNewPeopleCoupon"
import { cloudDatabase } from "@kit.CloudFoundationKit"
import { hilog } from "@kit.PerformanceAnalysisKit"
import showToast from "../utils/ToastUtils"
import { StorageUtils } from "../utils/StorageUtils"
import { User } from "../entity/User"

@Component
@Preview
export struct CouponComponent {
@link home_activity:homeNewPeopleCoupon|null
@link couponList:couponInfo[]
@State user: User|null=null

async aboutToAppear(): Promise {
const value = await StorageUtils.getAll('user');
if (value!='') {
this.user=JSON.parse(value)
}
}

build() {
Column() {
Row() {
Text(this.home_activity?.title)
.fontSize(20)
.fontColor('#FF0000')

    Text(this.home_activity?.msg)
      .fontSize(14)
      .fontColor('#888888')
      .margin({left:10})
  }
  .width('100%')
  .padding(16)

  List({ space: 10 }) {
    ForEach(this.couponList, (item:couponInfo) => {
      ListItem() {
        Column() {
          Text(item.price)
            .fontSize(22)
            .fontColor('#FF4444')
            .margin({ bottom: 8 })

          Text(item.type)
            .fontSize(12)
            .fontColor('#FF4444')
        }
        .padding(10)
        .backgroundColor("#ffffff")
        .borderRadius(8)
      }
    })
  }
  .margin({left:50})
  .listDirection(Axis.Horizontal)
  .width('100%')
  .height(80)

  Button('Redeem Now', { type: ButtonType.Normal })
    .width(240)
    .height(40)
    .backgroundColor('#FF0000')
    .fontColor(Color.White)
    .borderRadius(20)
    .margin({ bottom: 16 })
    .onClick(async ()=>{
      for (let i = 0; i < this.couponList.length; i++) {
        let coupon=new coupon_mall()
        coupon.id=Math.floor(Math.random() * 1000000);
        coupon.user_id=this.user!.user_id
        coupon.coupon_id=this.couponList[i].coupon_id
        coupon.price=Number(this.couponList[i].price)
        coupon.type=0
        coupon.limit_amount=this.couponList[i].limit_amount
        coupon.start_time=this.creatTime()
        coupon.end_time=this.endTime()
        coupon.type_str=this.couponList[i].type
        coupon.txt="Valid for all products"
        let databaseZone = cloudDatabase.zone('default');
        let num = await databaseZone.upsert(coupon);
        hilog.info(0x0000, 'testTag', `Succeeded in upserting data, result: ${num}`);
        if (num>0) {
          showToast("Coupon redeemed successfully")
        }
      }
    })
}
.backgroundColor("#fffce2be")
.width('95%')
.margin({top:10})
.borderRadius(20)

}

creatTime(): 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}`;

}

endTime(): 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}-${parseInt(day)+7} ${hours}:${minutes}:${seconds}`;

}
}

After completing the implementation, execute the code and click the coupon redemption button to test the functionality.

Imitation Box Horse - Safety Lock Verification (55)

Lin — Sat, 28 Jun 2025 16:54:43 +0000

Technical Stack
Appgallery connect

Development Preparation
In the previous section, we implemented the display function for recycling fund withdrawal records, enriching the content related to recycling funds. In the previous business logic, we added a security lock setting function. Although we successfully set up the security lock and submitted the corresponding table information to the cloud, we haven't used the security lock in the withdrawal process. In this section, we will integrate the security lock with the withdrawal process to enhance the security of our functions.

Functional Analysis
First, when entering the withdrawal page, we need to check if there is data in the security lock table under the current user ID. If there is data, we obtain the current security lock status. If the security lock is enabled, a pop-up verification will be triggered when the user clicks the withdrawal button. The value drawn by the user in the pop-up will be matched against the security lock value set in the system. If the match is successful, the record addition operation will be executed; if not, the user will be prompted that the security lock verification failed.

Code Implementation
First, query the corresponding table content on the withdrawal page:

let databaseZone = cloudDatabase.zone('default');
let condition3 = new cloudDatabase.DatabaseQuery(verify_info);
condition3.equalTo("user_id", this.user?.user_id);
let listData3 = await databaseZone.query(condition3);
let json3 = JSON.stringify(listData3);
let data3: VerifyInfo[] = JSON.parse(json3);
this.verifyInfo = data3;

Then perform non-null judgment on the data source and check the security lock status:

if (this.verifyInfo.length > 0) {
if (this.verifyInfo[0].open_lock) {
// Security lock is enabled, proceed with withdrawal logic
}
}

After confirming the above checks, we need to create a verification pop-up:

import showToast from '../utils/ToastUtils';

@Preview
@CustomDialog
export struct WithdrawalLockDialog {
@State passwords: Number[] = [];
public callback: (passwords: string) => void = (): void => {};
private patternLockController: PatternLockController = new PatternLockController();
controller: CustomDialogController;

build() {
Column({ space: 10 }) {
Text("Please verify your security password!")
.fontColor(Color.White)
.fontWeight(FontWeight.Bold)
.fontSize(16)
.width('100%')
.textAlign(TextAlign.Center)
.padding(10)
.backgroundColor('#FF6363');

  PatternLock(this.patternLockController)
    .sideLength(300)
    .circleRadius(9)
    .pathStrokeWidth(5)
    .borderRadius(10)
    .activeColor('#707070')
    .selectedColor('#707070')
    .pathColor('#707070')
    .backgroundColor('#F5F5F5')
    .autoReset(true)
    .onDotConnect((index: number) => {
      console.log("onDotConnect index: " + index);
    })
    .onPatternComplete((input: Array<number>) => {
      if (input.length < 5) {
        showToast("Pattern must connect at least 5 dots");
        return;
      }

      const str: string = JSON.stringify(input);
      this.callback(str);
      this.controller.close();
    });
}
.width('100%')
.height(400)
.backgroundColor(Color.White);

}
}

Reference the pop-up on the withdrawal page and pass the input value via callback:

private dialogController: CustomDialogController = new CustomDialogController({
builder: WithdrawalLockDialog({
callback: async (str: string) => {
// Process security lock verification result
}
}),
alignment: DialogAlignment.Bottom,
customStyle: false
});

Verify the input value against the stored value in the table and submit corresponding records upon successful verification:

if (str === this.verifyInfo[0].lock_str) {
showToast("Verification successful");

let record = new withdrawal_record();
record.id = Math.floor(Math.random() * 1000000);
record.user_id = this.user!.user_id;
record.bank_name = this.bankList[0].bank_name;
record.bank_num = this.bankList[0].bank_card;
record.creat_time = this.year + "-" + this.month + "-" + this.day + " " + this.time;
record.type_str = '0';
record.money = this.moneyNum;
let status = await databaseZone.upsert(record);

let money = new money_info();
money.id = Math.floor(Math.random() * 1000000);
money.user_id = this.user!.user_id;
money.money = String(this.moneyNum);
money.all_money = '';
money.money_type = '1';
money.address = 'Bank card withdrawal';
money.year = this.year;
money.month = this.month;
money.day = this.day;
money.time = this.time;
money.create_time = this.year + "-" + this.month + "-" + this.day + " " + this.time;
let nums = await databaseZone.upsert(money);

let userData = new user_info();
userData.id = this.userInfo!.id;
userData.user_id = this.userInfo!.user_id;
userData.sex = this.userInfo!.sex;
userData.bind_phone = this.userInfo!.bind_phone;
userData.create_time = this.userInfo!.create_time;
userData.nickname = this.userInfo!.nickname;
userData.head_img = this.userInfo!.head_img;

if (this.userInfo?.money != null) {
userData.money = this.userInfo!.money - this.moneyNum;
} else {
userData.money = 0;
}

if (this.userInfo?.points != null) {
userData.points = this.userInfo!.points;
} else {
userData.points = 0;
}

let s = await databaseZone.upsert(userData);

if (s > 0) {
router.pushUrl({ url: 'pages/recycle/money/SuccessPage' });
}

this.dialogController.close();
} else {
showToast("Security lock verification failed!");
}

Execute the code to check the withdrawal effect with the security lock enable

Imitation Box Horse - Retrieval and Withdrawal Record Query (54)

Lin — Sat, 28 Jun 2025 16:54:20 +0000

Technical Stack
Appgallery connect

Development Preparation
In the previous section, we implemented the function of recycling fund withdrawal and successfully displayed the current account's expenditure list. However, the withdrawal-related records were not well presented to users. Users only know that their account has been debited for withdrawal but are unaware of where the recycling funds go. In this section, we will implement the query, addition, and display of recycling fund records.

Functional Analysis
To implement these functions, we need to create a new table, populate it with corresponding information based on the currently bound user information, including the withdrawal bank card, withdrawal status, withdrawal time, and withdrawal amount. After users enter the withdrawal record page, query the current user's records via their userid and display them in a list.

Code Implementation
First, create the corresponding withdrawal record table:

{
"objectTypeName": "withdrawal_record",
"fields": [
{"fieldName": "id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true},
{"fieldName": "user_id", "fieldType": "Integer", "notNull": true, "defaultValue": 0},
{"fieldName": "bank_name", "fieldType": "String"},
{"fieldName": "bank_num", "fieldType": "String"},
{"fieldName": "creat_time", "fieldType": "String"},
{"fieldName": "type_str", "fieldType": "String"},
{"fieldName": "money", "fieldType": "Double"}
],
"indexes": [
{"indexName": "field1Index", "indexList": [{"fieldName":"id","sortType":"ASC"}]}
],
"permissions": [
{"role": "World", "rights": ["Read", "Upsert", "Delete"]},
{"role": "Authenticated", "rights": ["Read", "Upsert", "Delete"]},
{"role": "Creator", "rights": ["Read", "Upsert", "Delete"]},
{"role": "Administrator", "rights": ["Read", "Upsert", "Delete"]}
]
}

After generating the corresponding entity and database classes, add the required information to the table when submitting a successful withdrawal record:

let record=new withdrawal_record()
record.id=Math.floor(Math.random() * 1000000)
record.user_id=this.user!.user_id
record.bank_name=this.bankList[0].bank_name
record.bank_num=this.bankList[0].bank_card
record.creat_time=this.year+"-"+this.month+"-"+this.day+" "+this.time
record.type_str='0'
record.money=this.moneyNum
let status = await databaseZone.upsert(record);

Next, create a new page to display withdrawal records:

@Entry
@Component
struct WithdrawalRecordPage {
@State user: User|null=null

build() {
Column() {
CommonTopBar({ title: "Withdrawal Records", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})
}
.backgroundColor("#F1F3F5")
.height('100%')
.width('100%')
}
}

First, query the data:

@State user: User|null=null
@State withdrawalRecordList:WithdrawalRecord[]=[]
async aboutToAppear(): Promise {
const value = await StorageUtils.getAll('user');
if (value != "") {
this.user = JSON.parse(value)
}
let databaseZone = cloudDatabase.zone('default');
let condition = new cloudDatabase.DatabaseQuery(withdrawal_record);
condition.equalTo("user_id", this.user?.user_id)
let listData = await databaseZone.query(condition);
let json = JSON.stringify(listData)
let data: WithdrawalRecord[] = JSON.parse(json)
if (data.length>0) {
this.withdrawalRecordList=data
}
}

Then, display the queried data in a list component:

List({space:10}){
ForEach(this.withdrawalRecordList,(item:WithdrawalRecord,index:number)=>{
ListItem(){
Column({space:10}){
Row(){
Text(item.type_str=='0'?"Withdrawal Successful":"Processing")
.fontColor(item.type_str=='0'?Color.Green:Color.Black)
.fontSize(16)
.fontWeight(FontWeight.Bold)

      Text("¥"+item.money+"")
        .fontSize(16)
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.Black)
    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceBetween)
    Row(){
      Text(item.bank_name+" ("+item.bank_num+")")
        .fontColor(Color.Black)
        .fontSize(14)
        .fontWeight(FontWeight.Bold)

      Text(item.creat_time+"")
        .fontSize(14)
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.Grey)
    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceBetween)
  }
  .padding(10)
  .width('100%')
  .borderRadius(10)
  .backgroundColor(Color.White)
}

})
}
.padding(10)

Now, let's run the code to see the results.

Imitation Box Horse - Withdrawal of Recycled Gold (53)

Lin — Sat, 28 Jun 2025 16:43:27 +0000

Technical Stack
Appgallery connect

Development Preparation
In the previous section, we implemented the binding and echo of the bank card. In this section, we will truly implement the function of bank card withdrawal. Before that, we need to further optimize the business logic of the withdrawal page. At the same time, to facilitate the interaction between data, we have added amount and points fields in the personal information module to facilitate the display and hiding of other pages.

Functional Analysis
To implement these functions, we first need to obtain the total amount of recycling funds under the current account, so that we can judge whether the user overfills the amount based on this when entering the amount, which reduces a request to the cloud database and avoids resource waste. At the same time, when withdrawing, we also need to generate corresponding records, operate the moneyinfo table, and since we have added fields in userinfo, we also need to operate the userinfo table.

Code Implementation
First, obtain the total account amount in the userinfo table of the current user on the withdrawal page.

let condition1=new cloudDatabase.DatabaseQuery(user_info)
condition1.equalTo("user_id", this.user?.user_id)
let listData1 = await databaseZone.query(condition1)
let json1=JSON.stringify(listData1)
let data1:UserInfo[] = JSON.parse(json1)
this.userInfo=data1[0]

After obtaining it, pass it to the custom component for amount filling.

// Define in the component first
@link userInfo:UserInfo|null

// Pass in data
InputItem({userInfo:this.userInfo})

Modify the corresponding verification logic to display the total amount of recycling funds in the current account.

TextInput({ text: this.text, placeholder: 'Enter withdrawal amount', controller: this.controller })
.placeholderColor("#999999")
.placeholderFont({ size: 28, weight: 400 })
.caretColor("#FCDB29")
.width(400)
.height(50)
.backgroundColor(null)
.type(InputType.Number)
.margin(20)
.fontSize(14)
.fontColor(Color.Black)
.onChange((value: string) => {

        this.moneyNum=Number(value)
        this.text = value
        if (this.moneyNum>0&&this.moneyNum<=300) {
          if (this.moneyNum>this.userInfo!.money) {
            this.isPost=false
          }else {
            this.isPost=true
          }
        }else {
          this.isPost=false
        }
      })
  }
  Divider().width('100%').height(1)
  Text("Withdrawable amount ¥" + this.userInfo?.money + " (Maximum single withdrawal amount: 300)")
    .fontSize(15)
    .fontColor("#333333")

Add a reminder to the user at the submit button.

if (this.moneyNum>this.userInfo!.money) {
showToast('Exceeds the maximum withdrawable amount, please re-enter')

In this way, we first handle the logic, and then operate our two tables at the confirm withdrawal button, input the obtained data and the filled withdrawal amount, we need to subtract the current withdrawal amount from the account total and generate a record.

Text("Confirm Withdrawal")
.width('100%')
.fontColor(Color.White)
.borderRadius(15)
.padding(10)
.textAlign(TextAlign.Center)
.fontColor(this.isPost?Color.Black:Color.White)
.backgroundColor(this.isPost?"#ffff6363":$r('app.color.color_999'))
.onClick(async ()=>{
if (this.isPost) {
let money=new money_info()
money.id=Math.floor(Math.random() * 1000000)
money.user_id=this.user!.user_id
money.money=String(this.moneyNum)
money.all_money=''
money.money_type='1'
money.address='Bank card withdrawal'
money.year=this.year
money.month=this.month
money.day=this.day
money.time=this.time
money.create_time=this.year+"-"+this.month+"-"+this.day+" "+this.time
let nums = await databaseZone.upsert(money);

              let userData=new user_info()
              userData.id=this.userInfo!.id
              userData.user_id=this.userInfo!.user_id
              userData.sex=this.userInfo!.sex
              userData.bind_phone=this.userInfo!.bind_phone
              userData.create_time=this.userInfo!.create_time
              userData.nickname=this.userInfo!.nickname
              userData.head_img=this.userInfo!.head_img
              if (this.userInfo?.money!=null) {
                userData.money=this.userInfo!.money-this.moneyNum
              }else {
                userData.money=0
              }
              if (this.userInfo?.points!=null) {
                userData.points=this.userInfo!.points
              }else {
                userData.points=0
              }
              let s= await databaseZone.upsert(userData);

              if (s>0) {
                router.pushUrl({url:'pages/recycle/money/SuccessPage'})
              }
            }else {
              if (this.moneyNum==0){
                showToast("Minimum withdrawal amount is 1 yuan per transaction")
              }
              if (this.moneyNum>300) {
                showToast('Daily limit is 300 yuan, please re-enter')
              }
              if (this.moneyNum>this.userInfo!.money) {
                showToast('Exceeds the maximum withdrawable amount, please re-enter')

              }
            }
          })

After a successful withdrawal, we need to give the user feedback. At this time, we add a simple page to display the status.

import { CommonTopBar } from '../../widget/CommonTopBar';
import { router } from '@kit.ArkUI';

@Entry
@Component
struct SuccessPage {
@State message: string = 'Hello World';

build() {
Column() {
CommonTopBar({ title: "Withdrawal Status", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})
Text("Withdrawal Successful")
.textAlign(TextAlign.Center)
.fontColor(Color.Black)
.fontSize(20)
.fontWeight(FontWeight.Bold)
.margin({top:100})

  Image($r('app.media.success_money'))
    .height(100)
    .width(100)
    .margin({top:20})



  Text("Confirm")
    .textAlign(TextAlign.Center)
    .width('95%')
    .padding(10)
    .fontColor(Color.White)
    .borderRadius(10)
    .backgroundColor("#fffa4444")
    .margin({top:100})
    .onClick(()=>{
      router.back()
    })
}
.backgroundColor(Color.White)
.height('100%')
.width('100%')

}
}

When we execute the code and click the withdrawal button, we can see that the withdrawal is successful. Next, we return to the recycling fund page to view the total amount and withdrawal records, and we can see that both the total amount and records are displayed on the page.

The complete code is as follows.

import { BindBank } from "../../entity/BindBank"
import showToast from "../../utils/ToastUtils"
import { CommonTopBar } from "../../widget/CommonTopBar"
import { BindAlipay } from "./BindAlipay"
import { InputItem } from "./InputItem"
import { router } from "@kit.ArkUI"
import { StorageUtils } from "../../utils/StorageUtils"
import { cloudDatabase } from "@kit.CloudFoundationKit"
import { bind_bank } from "../../clouddb/bind_bank"
import { User } from "../../entity/User"
import { user_info } from "../../clouddb/user_info"
import { UserInfo } from "../../entity/UserInfo"
import { money_info } from "../../clouddb/MoneyInfo"
let databaseZone = cloudDatabase.zone('default');

@Entry
@Component
export default struct WithdrawMoneyPage {
@State fontColor: string = '#182431'
@State selectedFontColor: string = '#007DFF'
@State currentIndex: number = 0
@State alipayAcc:string=''
@State bindAlipayName:string=''
@State phoneCode:string=''
@State user: User|null=null
@State allMoney:number=0
@Provide
isPost:boolean=false

@Provide
moneyNum:number=0

@State bankList:BindBank[]=[]
@State userInfo:UserInfo|null=null
@State flag:boolean=false

@State year:string=''
@State month:string=''
@State day:string=''
@State time:string=''

async onPageShow(): Promise {
const value = await StorageUtils.getAll('user');
if (value != "") {
this.user = JSON.parse(value)
}
let databaseZone = cloudDatabase.zone('default');
let condition = new cloudDatabase.DatabaseQuery(bind_bank);
condition.equalTo("user_id", this.user?.user_id)
let listData = await databaseZone.query(condition);
let json = JSON.stringify(listData)
let data: BindBank[] = JSON.parse(json)
if (data.length>0) {
this.bankList=data
}

let condition1=new cloudDatabase.DatabaseQuery(user_info)
condition1.equalTo("user_id", this.user?.user_id)
let listData1 = await databaseZone.query(condition1)
let json1=JSON.stringify(listData1)
let data1:UserInfo[] = JSON.parse(json1)
this.userInfo=data1[0]


this.formatCurrent()

this.flag=true

}

build() {
if (this.flag){
Column() {
CommonTopBar({ title: "Withdrawal", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})
Column(){
BindAlipay({bankList:this.bankList,
callback:()=>{
router.pushUrl({url:'pages/recycle/card/BindCardPage'})
},
postCallback:()=>{

        }})
      InputItem({userInfo:this.userInfo})

      Column({space:15}){
        Text("Confirm Withdrawal")
          .width('100%')
          .fontColor(Color.White)
          .borderRadius(15)
          .padding(10)
          .textAlign(TextAlign.Center)
          .fontColor(this.isPost?Color.Black:Color.White)
          .backgroundColor(this.isPost?"#ffff6363":$r('app.color.color_999'))
          .onClick(async ()=>{
            if (this.isPost) {
              let money=new money_info()
              money.id=Math.floor(Math.random() * 1000000)
              money.user_id=this.user!.user_id
              money.money=String(this.moneyNum)
              money.all_money=''
              money.money_type='1'
              money.address='Bank card withdrawal'
              money.year=this.year
              money.month=this.month
              money.day=this.day
              money.time=this.time
              money.create_time=this.year+"-"+this.month+"-"+this.day+" "+this.time
              let nums =  await databaseZone.upsert(money);



              let userData=new user_info()
              userData.id=this.userInfo!.id
              userData.user_id=this.userInfo!.user_id
              userData.sex=this.userInfo!.sex
              userData.bind_phone=this.userInfo!.bind_phone
              userData.create_time=this.userInfo!.create_time
              userData.nickname=this.userInfo!.nickname
              userData.head_img=this.userInfo!.head_img
              if (this.userInfo?.money!=null) {
                userData.money=this.userInfo!.money-this.moneyNum
              }else {
                userData.money=0
              }
              if (this.userInfo?.points!=null) {
                userData.points=this.userInfo!.points
              }else {
                userData.points=0
              }
              let s= await databaseZone.upsert(userData);

              if (s>0) {
                router.pushUrl({url:'pages/recycle/money/SuccessPage'})
              }
            }else {
              if (this.moneyNum==0){
                showToast("Minimum withdrawal amount is 1 yuan per transaction")
              }
              if (this.moneyNum>300) {
                showToast('Daily limit is 300 yuan, please re-enter')
              }
              if (this.moneyNum>this.userInfo!.money) {
                showToast('Exceeds the maximum withdrawable amount, please re-enter')

              }
            }
          })
      }
      .margin({top:50})
    }
    .backgroundColor('#F1F3F5')
    .height('100%')
    .justifyContent(FlexAlign.Start)
    .padding(10)
  }

}

}

formatCurrent() {
const now = new Date();

const years = now.getFullYear();
const months = String(now.getMonth() + 1).padStart(2, '0');
const days = String(now.getDate()).padStart(2, '0');
const m_hours = String(now.getHours()).padStart(2, '0');
const m_minutes = String(now.getMinutes()).padStart(2, '0');
const m_seconds = String(now.getSeconds()).padStart(2, '0');
this.year=String(years)
this.month=months
this.day=days
this.time=m_hours+":"+m_minutes+":"+m_seconds

}

Imitation Hema - Binding Bank Card Echo (52)

Lin — Sat, 28 Jun 2025 16:41:20 +0000

Technical Stack
Appgallery connect

Development Preparation
In the previous section, we implemented the binding of the security lock, all aimed at helping users have a better and safer experience in the withdrawal process. Now we start to formally focus on the withdrawal-related process. First, we perform the binding of the withdrawal bank card. After successful binding, we close the page and echo the data to the withdrawal page.

Functional Analysis
First, we need to implement the entry of corresponding information. We need to create a corresponding bank card binding page to fill in the information. After the information is filled, the bank card data is submitted to the bindbank table in the cloud. Then, we query the corresponding data in the onPageShow method of the withdrawal page and display it in the card information display module. When operating, it must be associated with our userid.

Code Implementation
First, we create the corresponding card information entry page.

import { bind_bank } from '../../clouddb/bind_bank';
import { User } from '../../entity/User';
import { StorageUtils } from '../../utils/StorageUtils';
import { cloudDatabase } from '@kit.CloudFoundationKit';
import showToast from '../../utils/ToastUtils';
import { router, Router } from '@kit.ArkUI';
import { CommonTopBar } from '../../widget/CommonTopBar';

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

@Entry
@Component
struct BindCardPage {
@State cardNum: string = '';
@State bankName: string = '';
@State peopleName: string = '';
@State user: User|null=null

async aboutToAppear(): Promise {

const value = await StorageUtils.getAll('user');
if (value != "") {
  this.user = JSON.parse(value)
}

}

build() {
Column({space:5}) {
CommonTopBar({ title: "Add Bank Card", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})

  Row() {
    Text("Card Number")
      .fontColor(Color.Black)
      .fontSize(16)
      .fontWeight(FontWeight.Bold)
    TextInput({ text: this.cardNum, placeholder: 'Please enter bank card number' })
      .placeholderColor("#999999")
      .placeholderFont({ size: 16, weight: 400 })
      .caretColor("#FCDB29")
      .width(400)
      .height(50)
      .backgroundColor(null)
      .type(InputType.Number)
      .margin(20)
      .fontSize(14)
      .fontColor(Color.Black)
      .onChange((value: string) => {
        this.cardNum = value
      })
  }
  Divider().width('100%').height(0.8)
    .color("#e6e6e6")
    .width('100%')
  Row() {
    Text("Bank")
      .fontColor(Color.Black)
      .fontSize(16)
      .fontWeight(FontWeight.Bold)
    TextInput({ text: this.bankName, placeholder: 'Please enter the bank name' })
      .placeholderColor("#999999")
      .placeholderFont({ size: 16, weight: 400 })
      .caretColor("#FCDB29")
      .width(400)
      .height(50)
      .backgroundColor(null)
      .margin(20)
      .fontSize(14)
      .fontColor(Color.Black)
      .onChange((value: string) => {
        this.bankName = value
      })
  }
  Divider().width('100%').height(0.8)
    .color("#e6e6e6")
    .width('100%')
  Row() {
    Text("Account Name")
      .fontColor(Color.Black)
      .fontSize(16)
      .fontWeight(FontWeight.Bold)
    TextInput({ text: this.peopleName, placeholder: 'Please enter the account name' })
      .placeholderColor("#999999")
      .placeholderFont({ size: 16, weight: 400 })
      .caretColor("#FCDB29")
      .width(400)
      .height(50)
      .backgroundColor(null)
      .margin(20)
      .fontSize(14)
      .fontColor(Color.Black)
      .onChange((value: string) => {
        this.peopleName = value
      })
  }
  Text("Bind")

    .width('95%')
    .padding(10)
    .borderRadius(10)
    .textAlign(TextAlign.Center)
    .fontColor(Color.White)
    .backgroundColor("#ffe03636")

}
.height('100%')
.backgroundColor(Color.White)

}
}

After adding, we write the submission method to the binding event.

Text("Bind")

    .width('95%')
    .padding(10)
    .borderRadius(10)
    .textAlign(TextAlign.Center)
    .fontColor(Color.White)
    .backgroundColor("#ffe03636")
    .onClick(async ()=>{
      let cardInfo=new bind_bank()
      cardInfo.id=Math.floor(Math.random() * 1000000)
      cardInfo.user_id=this.user!.user_id
      cardInfo.bank_name=this.bankName
      cardInfo.bank_card=this.cardNum
      cardInfo.bank_people=this.peopleName
      let num = await databaseZone.upsert(cardInfo);
      if (num>0) {
        showToast("Binding successful")
        router.back()
      }
    })

After successful binding, we close the current page and return to the withdrawal page for data query.

@State bankList:BindBank[]=[]

}
Here we have implemented the binding and echo of the bank card.

Imitation Box Horse - Set Safety Lock (51)

Lin — Sat, 28 Jun 2025 16:40:58 +0000

Technical Stack
Appgallery connect

Development Preparation
In the previous section, we implemented the withdrawal page and business logic for some components. For security reasons, we've added a security lock feature. When enabled, users must verify their locally stored password with the cloud before any withdrawal can proceed. This additional layer of security better protects user assets by ensuring that only authorized users can initiate withdrawals.

Function Analysis
To implement this feature:

Add a security entry on the personal profile page.
Create a security lock settings page with an enable/disable toggle.
When enabling the lock for the first time, show a dialog prompting the user to set a pattern password.
Save the encrypted password to the cloud database for future verification.
When disabling the lock, delete the stored password from the cloud.

Code Implementation
Add Security Entry to Personal Profile Page

new SectionLine("Security",
"Set Security Lock",
$r('app.media.anquan'),
false),

Add Click Event Handler

if (item.title === 'Security') {
if (this.user != null) {
router.pushUrl({ url: 'pages/view/LockPage' });
} else {
showToast("Please log in first");
}
}

Create Security Lock Database Table

{
"objectTypeName": "verify_info",
"fields": [
{"fieldName": "id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true},
{"fieldName": "open_lock", "fieldType": "Boolean"},
{"fieldName": "lock_str", "fieldType": "String"},
{"fieldName": "user_id", "fieldType": "Integer"}
],
"indexes": [
{"indexName": "field1Index", "indexList": [{"fieldName": "id", "sortType": "ASC"}]}
],
"permissions": [
{"role": "World", "rights": ["Read", "Upsert", "Delete"]},
{"role": "Authenticated", "rights": ["Read", "Upsert", "Delete"]},
{"role": "Creator", "rights": ["Read", "Upsert", "Delete"]},
{"role": "Administrator", "rights": ["Read", "Upsert", "Delete"]}
]
}

Create Security Lock Page

@State user: User | null = null;
@State flag: boolean = false;
@State lockInfo: VerifyInfo | null = null;
@State lock_ui_visibility: boolean = false;

Column({ space: 10 }) {
CommonTopBar({ title: "Security Lock", alpha: 0, titleAlignment: TextAlign.Center, backButton: true });
Row() {
Text("Security Lock")
.fontColor(Color.Black)
.fontSize(16);
Image(this.lock_ui_visibility ? $r('app.media.kai') : $r('app.media.guan'))
.width(60)
.height(30)
.onClick(() => {
// Handle toggle logic
});
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
.padding({ left: 10, right: 10 });
Divider().width('100%').height(0.8)
.color("#e6e6e6")
.width('100%');
}
.width('100%').height('100%').backgroundColor(Color.White);

Create Security Lock Dialog

import { LengthUnit } from '@kit.ArkUI';

@Preview
@CustomDialog
export struct LockDialog {
@State passwords: Number[] = [];
@link lock_ui_visibility: boolean;
@State message: string = 'Draw your password pattern!';
public callback: (passwords: string) => void = (): void => { };
private patternLockController: PatternLockController = new PatternLockController();
controller: CustomDialogController;

build() {
Column({ space: 20 }) {
Text(this.message).textAlign(TextAlign.Center).margin(20).fontSize(20)
.fontColor(Color.Black);
PatternLock(this.patternLockController)
.sideLength(300)
.circleRadius(9)
.pathStrokeWidth(5)
.activeColor('#707070')
.selectedColor('#707070')
.pathColor('#707070')
.backgroundColor('#F5F5F5')
.autoReset(true)
.activateCircleStyle({
color: '#707070',
radius: { value: 16, unit: LengthUnit.VP },
enableWaveEffect: true
})
.onDotConnect((index: number) => {
console.log("onDotConnect index: " + index);
})
.onPatternComplete((input: Array) => {
if (input.length < 5) {
this.message = 'Pattern must connect at least 5 dots';
return;
}
if (this.passwords.length > 0) {
if (this.passwords.toString() === input.toString()) {
this.passwords = input;
this.message = 'Pattern password set successfully';
this.patternLockController.setChallengeResult(PatternLockChallengeResult.CORRECT);
const str: string = JSON.stringify(this.passwords);
this.callback(str);
this.controller.close();
} else {
this.message = 'Pattern mismatch. Please try again.';
this.patternLockController.setChallengeResult(PatternLockChallengeResult.WRONG);
}
} else {
this.passwords = input;
this.message = "Please redraw the pattern to confirm.";
}
});
}
.borderRadius({ topLeft: 20, topRight: 20 })
.justifyContent(FlexAlign.Start)
.backgroundColor(Color.White)
.height(500)
.width('100%');
}
}

Integrate Dialog into Page

private dialogController: CustomDialogController = new CustomDialogController({
builder: LockDialog({
lock_ui_visibility: this.lock_ui_visibility,
callback: async (str: string) => {
let info = new verify_info();
info.id = Math.floor(Math.random() * 1000000);
info.open_lock = true;
info.lock_str = str;
info.user_id = this.user!.user_id;
let num = await databaseZone.upsert(info);
if (num > 0) {
this.lock_ui_visibility = true;
this.initLockInfo();
showToast("Security lock enabled successfully");
}
}
}),
alignment: DialogAlignment.Bottom,
customStyle: false
});

Load User Data and Security Lock Status

async initLockInfo() {
const value = await StorageUtils.getAll('user');
if (value != "") {
this.user = JSON.parse(value);
}
let databaseZone = cloudDatabase.zone('default');
let condition = new cloudDatabase.DatabaseQuery(verify_info);
condition.equalTo("user_id", this.user?.user_id);
let listData = await databaseZone.query(condition);
let json = JSON.stringify(listData);
let data: VerifyInfo[] = JSON.parse(json);
if (data.length > 0) {
this.lock_ui_visibility = true;
this.lockInfo = data[0];
} else {
this.lock_ui_visibility = false;
}
}

async aboutToAppear(): Promise {
this.initLockInfo();
}

Implement Toggle Logic

build() {
Column({ space: 10 }) {
CommonTopBar({ title: "Security Lock", alpha: 0, titleAlignment: TextAlign.Center, backButton: true });
Row() {
Text("Security Lock")
.fontColor(Color.Black)
.fontSize(16);
Image(this.lock_ui_visibility ? $r('app.media.kai') : $r('app.media.guan'))
.width(60)
.height(30)
.onClick(async () => {
if (this.lock_ui_visibility) {
// Disable lock
if (this.lockInfo) {
let info = new verify_info();
info.id = this.lockInfo.id;
let num = await databaseZone.delete(info);
if (num > 0) {
this.lock_ui_visibility = false;
showToast("Security lock disabled");
}
}
} else {
// Enable lock
this.dialogController.open();
}
});
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
.padding({ left: 10, right: 10 });
Divider().width('100%').height(0.8)
.color("#e6e6e6")
.width('100%');
}
.width('100%').height('100%').backgroundColor(Color.White);
}

Execute the code to test the security lock functionality. Users can now enable/disable the security lock, set a pattern password, and the system will securely store and verify the password during withdrawals.

Imitation Box Horse - Recycling Gold Withdrawal Page (50)

Lin — Sat, 28 Jun 2025 16:36:32 +0000

Technical Stack
Appgallery connect

Development Preparation
In the previous section, we implemented the query for recycling fund income and expenditure records, and successfully created corresponding income and expenditure records after order completion. However, we currently only have income records and no expenditure records. In this section, we will implement the recycling fund withdrawal function for accounts to achieve the positive cycle of the app from a business perspective.

Function Analysis
To implement the withdrawal function, we first need corresponding bank card information binding, withdrawal amount, and the total recycling fund of the current account. From a business perspective, we should also limit the total amount of recycling funds that can be withdrawn within a day to avoid unnecessary losses in certain situations. First, we need to determine whether the current account has bound corresponding information, then use conditional judgments on input components to restrict incorrect user operations, and finally add confirmation withdrawal and withdrawal record buttons.

Code Implementation
First, create the corresponding binding information table:

{
"objectTypeName": "bind_bank",
"fields": [
{"fieldName": "id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true},
{"fieldName": "user_id", "fieldType": "Integer"},
{"fieldName": "bank_name", "fieldType": "String"},
{"fieldName": "bank_card", "fieldType": "String"},
{"fieldName": "bank_people", "fieldType": "String"},
{"fieldName": "is_verify", "fieldType": "Boolean"},
{"fieldName": "verify_id", "fieldType": "Integer"}
],
"indexes": [
{"indexName": "field1Index", "indexList": [{"fieldName":"id","sortType":"ASC"}]}
],
"permissions": [
{"role": "World", "rights": ["Read", "Upsert", "Delete"]},
{"role": "Authenticated", "rights": ["Read", "Upsert", "Delete"]},
{"role": "Creator", "rights": ["Read", "Upsert", "Delete"]},
{"role": "Administrator", "rights": ["Read", "Upsert", "Delete"]}
]
}

Implement the bank card binding module using component import, handling the display logic for bound and unbound states:

import { BindBank } from "../../entity/BindBank"

@Component
export struct BindAlipay {
@link bankList:BindBank[]
public callback:()=>void=():void=>{}
public postCallback:()=>void=():void=>{}

@builder
notAlipay(){
Row(){
Image($r('app.media.tv_card'))
.height(17)
.width(17)
.margin({left:14})

  Text("You haven't bound a bank card account yet, click to bind")
    .fontColor("#FF4242")
    .fontSize(16)
}
.backgroundColor(Color.White)
.padding(10)
.margin({bottom:50})
.onClick(e=>{
  this.callback()
})
.height(48)
.width('100%')

}

@builder bindAlipay(){
Row(){
Column(){
Row(){
Image($r('app.media.tv_card'))
.height(17)
.width(17)
.margin({left:14})
Text("12212")
.fontColor("#333333")
.fontSize(16)
}
Text("Expected to arrive within 2 hours (subject to actual arrival time)")
.fontColor("#999999")
.fontSize(15)
}
Image($r('app.media.back_right_recycle'))
.height(30)
.width(30)
}
}
build() {
Column() {
if (this.bankList.length>0){
this.bindAlipay()

  }else {
    this.notAlipay()
  }

}

}
}

Implement the withdrawal amount input module:

@Component
export struct InputItem {
@Consume
moneyNum:number
@State text: string = ''
controller: TextInputController = new TextInputController()
@Consume
isPost:boolean

build() {
Column() {
Row() {
Text("Withdrawal Amount")
.fontSize(16)
.fontColor("#333333")
Text("Minimum withdrawal per transaction is 1 yuan")
.fontSize(14)
.fontColor("#FF4242")
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
Row() {
Text("¥")
.fontSize(28)
.fontColor("#333333")
TextInput({ text: this.text, placeholder: 'Enter withdrawal amount', controller: this.controller })
.placeholderColor("#999999")
.placeholderFont({ size: 28, weight: 400 })
.caretColor("#FCDB29")
.width(400)
.height(50)
.backgroundColor(null)
.type(InputType.Number)
.margin(20)
.fontSize(14)
.fontColor(Color.Black)
.onChange((value: string) => {
this.moneyNum=Number(value)
this.text = value
if (this.moneyNum>0&&this.moneyNum<=300) {
this.isPost=true
}else {
this.isPost=false
}
})
}
Divider().width('100%').height(1)
Text("Withdrawable amount ¥1500.00 (Daily maximum withdrawal limit: 300)")
.fontSize(15)
.fontColor("#333333")
}
.padding(10)
.backgroundColor(Color.White)
.alignItems(HorizontalAlign.Start)
}
}

Use @Provide and @Consume to facilitate cross-component value acquisition for better logical judgment:

Column({space:15}){
Text("Confirm Withdrawal")
.width('100%')
.fontColor(Color.White)
.borderRadius(15)
.padding(10)
.textAlign(TextAlign.Center)
.fontColor(this.isPost?Color.Black:Color.White)
.backgroundColor(this.isPost?"#ffff6363":$r('app.color.color_999'))
.onClick(()=>{
if (this.isPost) {
// Launch pop-up window
}else {
if (this.moneyNum==0){
showToast("Minimum withdrawal amount is 1 yuan per transaction")
}
if (this.moneyNum>300) {
showToast('Daily limit is 300 yuan, please re-enter')
}
}
})

          Text("View Withdrawal Records")
            .width('100%')
            .fontColor(Color.Black)
            .textAlign(TextAlign.Center)
            .backgroundColor("#ffffff")
            .padding(10)
            .borderRadius(15)
        }
        .margin({top:50})

Call the component on the main page:

@Provide
isPost:boolean=false

@Provide
moneyNum:number=0

@State bankList:BindBank[]=[]

@builder TabBuilder(index: number, name: string) {
Row() {
Image($r('app.media.tv_card'))
.height(17)
.width(17)
.margin({left:15})
Text(name)
.fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
.fontSize(16)
.fontWeight(this.currentIndex === index ? 500 : 400)
.lineHeight(22)
}
.height(55)
.width('100%')
.alignItems(VerticalAlign.Center)
}

build() {
Column() {
CommonTopBar({ title: "Withdraw", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})
Column(){
BindAlipay({bankList:this.bankList,
callback:()=>{},
postCallback:()=>{}})
InputItem()

        Column({space:15}){
          Text("Confirm Withdrawal")
            .width('100%')
            .fontColor(Color.White)
            .borderRadius(15)
            .padding(10)
            .textAlign(TextAlign.Center)
            .fontColor(this.isPost?Color.Black:Color.White)
            .backgroundColor(this.isPost?"#ffff6363":$r('app.color.color_999'))
            .onClick(()=>{
              if (this.isPost) {
                // Launch pop-up window
              }else {
                if (this.moneyNum==0){
                  showToast("Minimum withdrawal amount is 1 yuan per transaction")
                }
                if (this.moneyNum>300) {
                  showToast('Daily limit is 300 yuan, please re-enter')
                }
              }
            })

          Text("View Withdrawal Records")
            .width('100%')
            .fontColor(Color.Black)
            .textAlign(TextAlign.Center)
            .backgroundColor("#ffffff")
            .padding(10)
            .borderRadius(15)
        }
        .margin({top:50})
      }
      .backgroundColor('#F1F3F5')
      .height('100%')
      .justifyContent(FlexAlign.Start)
      .padding(10)
}

}
}

After completing the implementation, execute the code to view the effect.