调整会员页面

entry/src/main/ets/pages/UserCenter.ets

@@ -253,7 +253,7 @@ export struct UserCenter {
           this.buildUserInfoCard()
           this.buildVipFeatures()
           this.buildVipPlans()
-          this.buildFunctionMenu()
+          // this.buildFunctionMenu()
           this.buildLoginButton()
         }
         .width('100%')
@@ -325,44 +325,59 @@ export struct UserCenter {
         .fontSize(18)
         .fontWeight(FontWeight.Bold)
         .margin({ top: 24, bottom: 16 })
+        .fontColor('#B8860B')
+        .textAlign(TextAlign.Center);
+
       Grid() {
         ForEach(this.vipFeatures, (feature: VipFeature) => {
           GridItem() {
             Column() {
-              Image(feature.icon)
-                .width(32)
-                .height(32)
-                .margin({ bottom: 8 })
-                .fillColor(this.themeColor)
+              Row() {
+                Blank().layoutWeight(1)
+                Image(feature.icon)
+                  .width(32)
+                  .height(32)
+                  .fillColor('#B8860B')
+                Blank().layoutWeight(1)
+              }
+              .margin({ bottom: 8 })
+
               Text(feature.title)
-                .fontSize(16)
-                .fontWeight(FontWeight.Medium)
+                .fontSize(15)
+                .fontWeight(FontWeight.Bold)
+                .fontColor('#795548')
+                .margin({ bottom: 2 })
+
               Text(feature.description)
                 .fontSize(12)
-                .fontColor(Color.Gray)
-                .margin({ top: 4 })
+                .fontColor('#888')
+                .textAlign(TextAlign.Center)
+                .maxLines(2)
+                .margin({ bottom: 4 })
+
               if (feature.isVipOnly) {
                 Text('VIP专享')
                   .fontSize(10)
-                  .fontColor(Color.Red)
-                  .backgroundColor('#FFF0F0')
+                  .fontColor('#6D4C41')
+                  .backgroundColor('#FFE0B2')
                   .borderRadius(8)
                   .padding({ left: 6, right: 6, top: 2, bottom: 2 })
-                  .margin({ top: 4 })
+                  .margin({ top: 2 })
               }
             }
-            .width('100%')
-            .height(120)
-            .backgroundColor(Color.White)
-            .borderRadius(12)
+            .backgroundColor('#FFFDF7')
+            .borderRadius(16)
+            .shadow({ radius: 8, color: 0x11000000, offsetX: 0, offsetY: 2 })
             .padding(12)
+            .width('100%')
+            .height(140)
           }
         })
       }
       .columnsTemplate('1fr 1fr')
-      .columnsGap(12)
-      .rowsGap(12)
-      .margin({ left: 20, right: 20 })
+      .columnsGap(16)
+      .rowsGap(16)
+      .margin({ left: 16, right: 16, bottom: 8 })
     }
   }
 
@@ -443,79 +458,105 @@ export struct UserCenter {
   buildVipPlans(): void {
     Column() {
       Text('会员套餐')
+        .textAlign(TextAlign.Start)
+        .padding({ left: 16, bottom: 15, top: 18 })
         .fontSize(18)
+        .fontColor('#191919')
         .fontWeight(FontWeight.Bold)
-        .margin({ top: 24, bottom: 16 })
-      ForEach(this.vipPlans, (plan: VipPlanApi) => {
-        Row() {
+        .fontFamily('鸿蒙黑体');
+
+      Row() {
+        ForEach(this.vipPlans, (plan: VipPlanApi, index: number) => {
           Column() {
             Text(plan.name)
-              .fontSize(16)
+              .fontSize(15)
               .fontWeight(FontWeight.Bold)
-            Text(plan.duration === '0' ? '永久' : plan.duration + '天')
-              .fontSize(12)
-              .fontColor(Color.Gray)
-              .margin({ top: 4 })
-          }
-          .layoutWeight(1)
-          Column() {
+              .fontColor('#B8860B')
+              .margin({ top: 12, bottom: 2 })
+
             Text('￥' + plan.price)
-              .fontSize(20)
+              .fontSize(22)
               .fontWeight(FontWeight.Bold)
-              .fontColor(Color.Red)
+              .fontColor('#222')
+              .margin({ bottom: 2 })
+
+            Text(plan.duration === '0' ? '永久会员' : (plan.duration + '天会员'))
+              .fontSize(12)
+              .fontColor('#888')
+              .margin({ bottom: 8 })
           }
-          Button('立即开通')
-            .fontSize(14)
-            .fontColor(Color.White)
-            .backgroundColor(this.themeColor)
-            .borderRadius(16)
-            .height(32)
-            .width(120)
-            .margin({ left: 16 })
-            .onClick(() => {
-              if (!this.isLogin) {
-                ToastUtil.showToast('请先登录')
-                return
+          .backgroundColor(this.selectedPayPlan && this.selectedPayPlan.id === plan.id ? '#FFF2CC' : '#F7F7F7')
+          .borderRadius(16)
+          .shadow({ radius: 8, color: 0x11000000, offsetX: 0, offsetY: 2 })
+          .border({ color: this.selectedPayPlan && this.selectedPayPlan.id === plan.id ? '#FFD700' : '#EEE', width: 2 })
+          .width('28%')
+          .height(120)
+          .margin({ left: index === 0 ? 0 : 12 })
+          .onClick(() => {
+            this.selectedPayPlan = plan;
+          })
+        })
+      }
+      .justifyContent(FlexAlign.Center)
+      .margin({ left: 16, right: 16, bottom: 24 })
+
+      Button(this.isVip ? '升级会员' : '立即开通')
+        .borderRadius(24)
+        .backgroundColor('#FFD700')
+        .width('90%')
+        .fontColor('#222')
+        .fontSize(18)
+        .fontWeight(FontWeight.Bold)
+        .margin({ top: 8, bottom: 8 })
+        .alignSelf(ItemAlign.Center)
+        .onClick(() => {
+          if (!this.isLogin) {
+            ToastUtil.showToast('请先登录');
+            return;
+          }
+          if (!this.selectedPayPlan) {
+            ToastUtil.showToast('请选择套餐');
+            return;
+          }
+          DialogHelper.showCustomContentDialog({
+            dialogId: 'payDialog',
+            title: '请选择支付方式',
+            autoCancel: true,
+            contentBuilder: () => {
+              this.payDialogContentBuilder();
+            },
+            buttons: [
+              { value: '取消' },
+              {
+                value: '确认支付',
+                action: () => {
+                  if (this.selectedPayPlan) {
+                    void this.doPay(this.selectedPayPlan);
+                  }
+                  DialogHelper.closeDialog('payDialog');
+                }
               }
-              this.selectedPayPlan = plan;
-              DialogHelper.showCustomContentDialog({
-                // backgroundColor:$r('app.color.xpopup_bg'),
-                dialogId: 'payDialog',
-                title: '请选择支付方式',
-                backgroundColor: Color.Grey,
-                transition: AnimationHelper.transitionInUp(555),
-                autoCancel: true,
-                contentBuilder: () => {
-                  this.payDialogContentBuilder();
-                },
-                buttons: [
-                  {
-                    value:"取消",
-                    // background: $r('app.color.button_click'),
-                  },
-                  {
-                    value: '确认支付',
-                    // background: $r('app.color.button_click'),
-                    // background:this.themeColor,
-                    action:()=>{
-                      if (this.selectedPayPlan) {
-                        void this.doPay(this.selectedPayPlan);
-                      }
-                      DialogHelper.closeDialog('payDialog');
-                    }
-                  },
-                ]
-              });
-            })
-        }
-        .width('100%')
-        .padding(16)
-        .backgroundColor(Color.White)
-        .borderRadius(12)
-        .margin({ bottom: 12 })
-      })
+            ]
+          });
+        });
+
+      Row() {
+        Text('购买前请阅读')
+          .fontSize(12)
+          .fontColor('#888')
+        Text('《会员协议》')
+          .fontSize(12)
+          .fontColor('#B8860B')
+          .onClick(() => {
+            router.pushUrl({ url: 'pages/PrivacyAgreement' });
+          });
+      }
+      .justifyContent(FlexAlign.Center)
+      .width('100%')
+      .padding({ bottom: 16 });
     }
-    .margin({ left: 20, right: 20 })
+    .margin({ left: 0, right: 0 })
+    .backgroundColor(Color.White)
   }
 
   // 功能菜单