Harmonyos Cangjie Language Development Practical Tutorial: Personal Center Page of Mall Application

It's the day of the college entrance examination again. Here, You LAN Jun wishes all the examinees to answer the questions calmly and perform exceptionally well.
The content to be shared today is the personal center page of the Cangjie Language Mall application. First, let's take a look at the effect picture:

The following introduces the implementation process of this page.
We can first analyze the layout structure of the entire page. It can be seen that it is a vertical layout. The entire page is composed of several parts, including the navigation bar, personal profile, vip horizontal bar and my orders.
We have encountered the navigation bar many times. The point to note is to center the title and move the return icon to the left. The simplest way is to make the two not on the same level and not affect each other. Therefore, we use a stacked layout to achieve this:

Stack {
     Text('个人中心')
    .fontSize(16)
    .fontWeight(FontWeight.Bold)
    .fontColor(Color.BLACK)
    Row{
         Image(@r(app.media.back))
    .width(27)
    .height(27)
     .onClick({evet => Router.back()})
    }.width(100.percent).justifyContent(FlexAlign.Start).padding(left:5)
}
.width(100.percent)
.height(60)
.backgroundColor(Color.WHITE)

The avatar and nickname sections are also relatively simple and can be handled with just one Row container:

Row(8){
    Image(@r(app.media.chaofu))
    .width(60.vp)
    .height(60)
    .borderRadius(30)
    Text('幽蓝计划')
    .fontSize(16)
    .fontColor(Color.BLACK)
    .fontWeight(FontWeight.Bold)
 }
 .width(100.percent)
 .height(60.vp)

When it comes to the part of opening a membership, there are some points to note. First of all, only the upper part of it has rounded corners, while the lower two have no rounded corners. In the Cangjie language, the border-radius property provides a method to set rounded corners separately. However, I wonder if you have ever seen the Length type parameter:

.borderRadius(topLeft: Length(12, unitType: LengthType.vp), topRight: Length(12, unitType: LengthType.vp))

Finally, there is my order section, which can be further divided into two parts: the title and the order type content. Both parts use the SpaceBetween layout. I won't list the code for each part one by one. I'll directly attach the complete code for the entire page:

package ohos_app_cangjie_entry.page
import ohos.base.*
import ohos.component.*
import ohos.state_manage.*
import ohos.state_macro_manage.*
import ohos.router.Router
import cj_res_entry.app
import std.collection.ArrayList
@Entry
@Component
public class mine  {
    func build() {
        Column{
            Stack {
                 Text('个人中心')
                .fontSize(16)
                .fontWeight(FontWeight.Bold)
                .fontColor(Color.BLACK)
                Row{
                     Image(@r(app.media.back))
                .width(27)
                .height(27)
                 .onClick({evet => Router.back()})
                }.width(100.percent).justifyContent(FlexAlign.Start).padding(left:5)
            }
            .width(100.percent)
            .height(60)
            .backgroundColor(Color.WHITE)

            Column{
                Row(8){
                    Image(@r(app.media.chaofu))
                    .width(60.vp)
                    .height(60)
                    .borderRadius(30)
                    Text('幽蓝计划')
                    .fontSize(16)
                    .fontColor(Color.BLACK)
                    .fontWeight(FontWeight.Bold)
                 }
                 .width(100.percent)
                 .height(60.vp)
                Row{
                    Row{
                        Text('开通会员')
                        .fontColor(Color.WHITE)
                        .fontSize(14)
                        Image(@r(app.media.right))
                        .width(13)
                        .height(13)
                    }
                    .padding(left:12,right:12)
                    .width(100.percent)
                    .height(43)
                    .backgroundColor(Color(41, 41, 41, alpha:1.0))
                    .alignItems(VerticalAlign.Center)
                    .justifyContent(FlexAlign.SpaceBetween)
                    .borderRadius(topLeft: Length(12, unitType: LengthType.vp), topRight: Length(12, unitType: LengthType.vp))
                }
                .width(100.percent)
                .padding(left:15,right:15)
                .margin(top:40)
                Column{
                    Row{
                        Text('我的订单')
                        .fontSize(14)
                        .fontColor(Color.BLACK)
                        Row(3){
                            Text('全部')
                            .fontSize(0x666666)
                            .fontSize(12)
                            Image(@r(app.media.icon_arrow_right))
                            .width(12)
                            .height(13)
                            .objectFit(ImageFit.Contain)
                        }
                        .alignItems(VerticalAlign.Center)
                    }
                    .justifyContent(FlexAlign.SpaceBetween)
                    .alignItems(VerticalAlign.Center)
                    .width(100.percent)
                    Row{
                        Column(5){
                            Image(@r(app.media.zhifu))
                            .width(34)
                            .height(34)
                            Text('待支付')
                            .fontSize(12)
                            .fontColor(Color.BLACK)
                        }
                        Column(5){
                            Image(@r(app.media.shouhuo))
                            .width(34)
                            .height(34)
                            Text('待收货')
                            .fontSize(12)
                            .fontColor(Color.BLACK)
                        }
                        Column(5){
                            Image(@r(app.media.wancheng))
                            .width(34)
                            .height(34)
                            Text('已完成')
                            .fontSize(12)
                            .fontColor(Color.BLACK)
                        }
                        Column(5){
                            Image(@r(app.media.shouhou))
                            .width(34)
                            .height(34)
                            Text('售后')
                            .fontSize(12)
                            .fontColor(Color.BLACK)
                        }
                    }
                    .width(100.percent)
                    .justifyContent(FlexAlign.SpaceBetween)
                }
                .width(100.percent)
                .height(120)
                .borderRadius(12)
                .backgroundColor(0xF5F5F5)
                .padding(left:10,right:10,top:15,bottom:15)
                .justifyContent(FlexAlign.SpaceBetween)
            }
            .width(100.percent)
            .padding(left:12,right:12)
        }
        .width(100.percent)
        .height(100.percent)
    }
}

Thank you for reading. Wish everyone a pleasant weekend. #HarmonyOS language # Cangjie # Shopping #