调整会员页面

entry/src/main/ets/common/util/UserUtil.ets

@@ -84,6 +84,7 @@ export interface VipFeature {
   title: string;
   description: string;
   isVipOnly: boolean;
+  hasCome: boolean;
 }
 
 export interface VipPlanApi {
@@ -91,6 +92,8 @@ export interface VipPlanApi {
   name: string;
   description: string;
   price: string;
+  original_price:string;
+  discount_percent:number;
   duration: string;
   features: string;
   sort_order: string;
@@ -332,17 +335,17 @@ export default class UserUtil {
         LogUtil.debug("fetchUserInfo res =" + res);
         let json: UserInfoApiResponse = JSON.parse(res) as UserInfoApiResponse;
         if (json.code === 0 && json.data) {
-          const userInfo = json.data.user_info;
-          const systemInfo = json.data.system_info;
-          const subInfo = json.data.subscription_info;
-          let hasActiveSubscription = false;
-          let subscriptionName = '';
-          let subscriptionEndDate = '';
-          if (subInfo && subInfo.has_active_subscription && subInfo.subscriptions && subInfo.subscriptions.length > 0) {
-            hasActiveSubscription = true;
-            subscriptionName = subInfo.subscriptions[0].plan_name;
-            subscriptionEndDate = subInfo.subscriptions[0].end_date;
-          }
+          // const userInfo = json.data.user_info;
+          // const systemInfo = json.data.system_info;
+          // const subInfo = json.data.subscription_info;
+          // let hasActiveSubscription = false;
+          // let subscriptionName = '';
+          // let subscriptionEndDate = '';
+          // if (subInfo && subInfo.has_active_subscription && subInfo.subscriptions && subInfo.subscriptions.length > 0) {
+            // hasActiveSubscription = true;
+            // subscriptionName = subInfo.subscriptions[0].plan_name;
+            // subscriptionEndDate = subInfo.subscriptions[0].end_date;
+          // }
           // ToastUtil.showToast('用户信息已更新');
           return json.data;
         } else {

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

@@ -118,12 +118,12 @@ export struct UserCenter {
   private wxEventHandler = WXEventHandler
   @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointTypeEnum.MD;
   @State vipFeatures: VipFeature[] = [
-    { icon: $r('app.media.wusunyinzhi'), title: '无损音质', description: '专享无损音乐支持，让每个音符都完美呈现', isVipOnly: true },
+    { icon: $r('app.media.wusunyinzhi'), title: '无损音质', description: '专享无损音乐支持，让每个音符都完美呈现', isVipOnly: true,hasCome:true },
     // { icon: $r('app.media.lrc'), title: '歌词下载', description: '支持歌词API在线下载LRC歌词，实现完美同步', isVipOnly: true },
     // { icon: $r('app.media.cover'), title: '封面API', description: '支持设置自动下载封面', isVipOnly: true },
-    { icon: $r('app.media.theme'), title: '主题定制', description: '自定义播放器主题，打造独一无二的个性风格', isVipOnly: true },
-    { icon: $r('app.media.car'), title: 'HiCAR播放', description: '专为驾车体验优化的音乐播放模式', isVipOnly: true },
-    { icon: $r('app.media.music_wave'), title: '参数均衡', description: '精准定制音效，带来极致听觉体验', isVipOnly: true },
+    { icon: $r('app.media.theme'), title: '主题定制', description: '自定义播放器主题，打造独一无二的个性风格', isVipOnly: true,hasCome:true },
+    { icon: $r('app.media.car'), title: 'HiCAR播放', description: '专为驾车体验优化的音乐播放模式', isVipOnly: true ,hasCome:false},
+    { icon: $r('app.media.music_wave'), title: '参数均衡', description: '精准定制音效，带来极致听觉体验', isVipOnly: true ,hasCome:true},
   ];
   @State vipPlans: VipPlanApi[] = [];
   @State selectedPayPlan: VipPlanApi | null = null;
@@ -154,7 +154,7 @@ export struct UserCenter {
         ToastUtil.showToast('支付成功！');
         // 可在此处刷新会员状态或其他支付成功后的业务逻辑
         // this.fetchVipPlans(); // 刷新会员套餐信息
-        void this.fetchUserInfo(this.userToken);
+        this.fetchUserInfo(this.userToken);
       } else {
         // 其他类型的成功回调
         ToastUtil.showToast('操作成功！');
@@ -169,7 +169,6 @@ export struct UserCenter {
         ToastUtil.showToast('操作失败！');
       }
     }
-    console.log('微信回调结果：' + JSON.stringify(resp ?? {}, null, 2));
   }
 
   // 通过code换取用户信息
@@ -181,11 +180,16 @@ export struct UserCenter {
 
   // 通过华为账号信息换取用户信息和会员状态
   async getUserInfoByHuawei(openID: string, unionID: string, nickname: string, avatarUri: string) {
-    await UserUtil.getUserInfoByHuawei(openID, unionID, nickname, avatarUri);
+    await UserUtil.getUserInfoByHuawei(openID, unionID, nickname, avatarUri).then((data)=>{
+      this.userToken = PreferencesUtil.getStringSync('userToken', '');
+        this.showUserInfo();
+    })
+
   }
 
   aboutToAppear(): void {
     let themeColor = PreferencesUtil.getStringSync('THEME_COLOR', '#FF4081');
+    this.isDarkMode = this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK
     AppStorage.setOrCreate('themeColor', themeColor);
     this.themeColor = themeColor;
     this.showUserInfo()
@@ -245,7 +249,7 @@ export struct UserCenter {
         }
         .height(48)
         .width('100%')
-        .backgroundColor(this.themeColor)
+        .backgroundColor(this.isDarkMode?$r('app.color.title_bar_bg'):this.themeColor)
       }
 
       Scroll() {
@@ -254,7 +258,6 @@ export struct UserCenter {
           this.buildVipFeatures()
           this.buildVipPlans()
           // this.buildFunctionMenu()
-          this.buildLoginButton()
         }
         .width('100%')
       }
@@ -279,42 +282,188 @@ export struct UserCenter {
     Column() {
       Row() {
         Image(this.userAvatarUrl && this.userAvatarUrl.length > 0 ? this.userAvatarUrl : this.userAvatar)
-          .width(80)
-          .height(80)
+          .width(56)
+          .height(56)
           .borderRadius('50%')
           .clip(true)
           .backgroundColor(Color.White)
           .shadow({ radius: 8, color: 0x11000000, offsetX: 0, offsetY: 2 })
         Column() {
-          Text(this.isLogin ? this.userName : '未登录用户')
-            .fontSize(22)
-            .fontWeight(FontWeight.Bold)
-            .fontColor(Color.Black)
+          Row() {
+            Text(this.isLogin ? this.userName : '未登录用户')
+              .fontSize(17)
+              .fontWeight(FontWeight.Bold)
+              .fontColor(Color.Black)
+              .textAlign(TextAlign.Start)
+              .maxLines(1)
+              .width(110)
+              .margin({ right: 12 })
+          }
+          .justifyContent(FlexAlign.Start)
+          .margin({ top: 2 })
           if (this.isLogin) {
             if (this.hasActiveSubscription) {
               Text(this.subscriptionName)
-                .fontSize(16)
+                .fontSize(13)
                 .fontColor(Color.Red)
+                .textAlign(TextAlign.Start)
               Text('到期：' + this.subscriptionEndDate)
-                .fontSize(14)
+                .fontSize(11)
                 .fontColor(Color.Gray)
+                .textAlign(TextAlign.Start)
             } else {
               Text('普通用户')
-                .fontSize(15)
+                .fontSize(12)
                 .fontColor(Color.Grey)
+                .textAlign(TextAlign.Start)
             }
           }
         }
         .alignItems(HorizontalAlign.Start)
-        .margin({ left: 16 })
+        .width(155)
+        .margin({ left: 10 })
+        Column(){
+          if (this.isLogin) {
+            Button('退出')
+              .fontColor(Color.Black)
+              .backgroundColor($r('app.color.vip_button_color'))
+              .height(36)
+              .width(66)
+              .fontSize(13)
+              .borderRadius(13)
+              .margin({ left: 0 })
+              .onClick(() => {
+                this.isLogin = false
+                this.userName = '未登录用户'
+                this.userAvatar = $r('app.media.icon_person2')
+                this.userAvatarUrl = ''
+                this.isVip = false
+                this.vipExpire = ''
+                this.hasActiveSubscription = false;
+                this.subscriptionName = '';
+                this.subscriptionEndDate = '';
+                PreferencesUtil.putSync('isLogin', false);
+                PreferencesUtil.putSync('userName', '未登录用户');
+                PreferencesUtil.putSync('userAvatarUrl', '');
+                PreferencesUtil.putSync('subscriptionName', '');
+                PreferencesUtil.putSync('subscriptionEndDate', '');
+                PreferencesUtil.putSync('hasActiveSubscription', false);
+                ToastUtil.showToast('已退出登录')
+              })
+          }else {
+            Button('登录')
+              .fontColor(Color.Black)
+              .backgroundColor($r('app.color.vip_button_color'))
+              .height(36)
+              .width(66)
+              .fontSize(13)
+              .borderRadius(13)
+              .margin({ left: 0 })
+          }
+        }
+        .alignItems(HorizontalAlign.End)
+        .margin({left:30, right: 10 })
       }
+      .onClick(() => {
+        if (!this.isLogin) {
+          this.showLoginDialog();
+        }
+      })
       .width('100%')
-      .padding(16)
+      .padding(10)
     }
     .backgroundColor(Color.White)
     .borderRadius(24)
-    .margin({ left: 20, right: 20, top: 20 })
-    .shadow({ radius: 12, color: 0x11000000, offsetX: 0, offsetY: 2 })
+    .margin({ left: 14, right: 14, top: 12 })
+    .shadow({ radius: 8, color: 0x11000000, offsetX: 0, offsetY: 2 })
+  }
+
+  // 登录方式选择弹窗内容
+  @Builder
+  loginDialogContentBuilder(): void {
+    Column() {
+      Row() {
+        // 微信登录图标按钮
+        Column() {
+          Button({ type: ButtonType.Normal, stateEffect: true }) {
+            Column() {
+              Image($r('app.media.wx_logo'))
+                .width(56)
+                .height(56)
+                .margin({ bottom: 8 })
+              Text('微信登录')
+                .fontSize(15)
+                .fontWeight(FontWeight.Bold)
+                .fontColor('#333')
+            }
+            .alignItems(HorizontalAlign.Center)
+          }
+          .width(100)
+          .height(100)
+          .backgroundColor(Color.White)
+          // .border({ color: this.themeColor, width: 2 })
+          .borderRadius(20)
+          .onClick(async () => {
+            this.payType = 0;
+            // 微信登录
+            let req = new wxopensdk.SendAuthReq
+            req.isOption1 = false
+            req.nonAutomatic = true
+            req.scope = 'snsapi_userinfo,snsapi_friend,snsapi_message,snsapi_contact'
+            req.state = 'none'
+            req.transaction = 'test123'
+            let finished = await this.wxApi.sendReq(getContext(this) as common.UIAbilityContext, req)
+            console.log('send request finished: ', finished)
+            DialogHelper.closeDialog('loginDialog');
+          })
+        }
+        .margin({ right: 24 })
+
+        // 华为账号登录图标按钮
+        Column() {
+          Button({ type: ButtonType.Normal, stateEffect: true }) {
+            Column() {
+              Image($r('app.media.huawei'))
+                .width(56)
+                .height(56)
+                .margin({ bottom: 8 })
+              Text('华为登录')
+                .fontSize(15)
+                .fontWeight(FontWeight.Bold)
+                .fontColor('#333')
+            }
+            .alignItems(HorizontalAlign.Center)
+          }
+          .width(100)
+          .height(100)
+          .backgroundColor(Color.White)
+          // .border({ color: this.themeColor, width: 2 })
+          .borderRadius(20)
+          .onClick(() => {
+            this.payType = 1;
+            this.huaweiQuickLogin();
+            DialogHelper.closeDialog('loginDialog');
+          })
+        }
+      }
+      .justifyContent(FlexAlign.Center)
+      .width('100%')
+    }
+    .padding({ left: 24, right: 24, top: 8, bottom: 24 })
+    .width('100%')
+  }
+
+  showLoginDialog() {
+    DialogHelper.showCustomContentDialog({
+      dialogId: 'loginDialog',
+      title: '',
+      autoCancel: true,
+      contentBuilder: () => {
+        this.loginDialogContentBuilder();
+      },
+      buttons: [
+      ]
+    });
   }
 
   // 会员权益展示
@@ -325,13 +474,33 @@ export struct UserCenter {
         .fontSize(18)
         .fontWeight(FontWeight.Bold)
         .margin({ top: 24, bottom: 16 })
-        .fontColor('#B8860B')
+        .fontColor('#191919')
         .textAlign(TextAlign.Center);
 
       Grid() {
         ForEach(this.vipFeatures, (feature: VipFeature) => {
           GridItem() {
             Column() {
+              Row() {
+                Blank().layoutWeight(1)
+                if (feature.hasCome === false) {
+                  Text('开发中')
+                    .fontSize(10)
+                    .fontColor('#FF5722')
+                    .backgroundColor('#FFF3E0')
+                    .borderRadius(8)
+                    .padding({ left: 6, right: 6, top: 2, bottom: 2 })
+                    .margin({ top: 2, right: 2 })
+                }else {
+                  Text('已开发')
+                    .fontSize(10)
+                    .fontColor('#FFFDF7')
+                    .backgroundColor('#FFFDF7')
+                    .borderRadius(8)
+                    .padding({ left: 6, right: 6, top: 2, bottom: 2 })
+                    .margin({ top: 2, right: 2 })
+                }
+              }
               Row() {
                 Blank().layoutWeight(1)
                 Image(feature.icon)
@@ -345,7 +514,7 @@ export struct UserCenter {
               Text(feature.title)
                 .fontSize(15)
                 .fontWeight(FontWeight.Bold)
-                .fontColor('#795548')
+                .fontColor('#191919')
                 .margin({ bottom: 2 })
 
               Text(feature.description)
@@ -362,7 +531,7 @@ export struct UserCenter {
                   .backgroundColor('#FFE0B2')
                   .borderRadius(8)
                   .padding({ left: 6, right: 6, top: 2, bottom: 2 })
-                  .margin({ top: 2 })
+                  .margin({ top: 2,bottom:6 })
               }
             }
             .backgroundColor('#FFFDF7')
@@ -370,7 +539,7 @@ export struct UserCenter {
             .shadow({ radius: 8, color: 0x11000000, offsetX: 0, offsetY: 2 })
             .padding(12)
             .width('100%')
-            .height(140)
+            .height(145)
           }
         })
       }
@@ -465,44 +634,67 @@ export struct UserCenter {
         .fontWeight(FontWeight.Bold)
         .fontFamily('鸿蒙黑体');
 
-      Row() {
+      // 横向滑动卡片区
+      List() {
         ForEach(this.vipPlans, (plan: VipPlanApi, index: number) => {
-          Column() {
-            Text(plan.name)
-              .fontSize(15)
-              .fontWeight(FontWeight.Bold)
-              .fontColor('#B8860B')
-              .margin({ top: 12, bottom: 2 })
+          ListItem() {
+            Column() {
+              Text(plan.name)
+                .fontSize(15)
+                .fontWeight(FontWeight.Bold)
+                .fontColor('#B8860B')
+                .margin({ top: 18, bottom: 8 })
+                .textAlign(TextAlign.Center)
 
-            Text('￥' + plan.price)
-              .fontSize(22)
-              .fontWeight(FontWeight.Bold)
-              .fontColor('#222')
-              .margin({ bottom: 2 })
+              // 价格上下排列
+              Column() {
+                Text('￥' + plan.price)
+                  .fontSize(24)
+                  .fontWeight(FontWeight.Bold)
+                  .fontColor('#B8860B')
+                  .margin({ bottom: (plan.original_price && plan.discount_percent > 0) ? 2 : 0 })
+                  .textAlign(TextAlign.Center)
+                if (plan.original_price && plan.discount_percent && plan.discount_percent > 0) {
+                  Text('￥' + plan.original_price)
+                    .fontSize(14)
+                    .fontColor('#FF3B30')
+                    .decoration({ type: TextDecorationType.LineThrough, color: '#FF3B30' })
+                    .fontStyle(FontStyle.Italic)
+                    .textAlign(TextAlign.Center)
+                }
+              }
+              .alignItems(HorizontalAlign.Center)
+              .margin({ bottom: 6 })
 
-            Text(plan.duration === '0' ? '永久会员' : (plan.duration + '天会员'))
-              .fontSize(12)
-              .fontColor('#888')
-              .margin({ bottom: 8 })
+              Text(plan.duration === '0' ? '永久会员' : (plan.duration + '天会员'))
+                .fontSize(13)
+                .fontColor('#888')
+                .maxLines(1)
+                .textAlign(TextAlign.Center)
+            }
+            .backgroundColor(this.selectedPayPlan && this.selectedPayPlan.id === plan.id ? '#FFF9E1' : '#F7F7F7')
+            .borderRadius(18)
+            .shadow({ radius: 8, color: 0x11000000, offsetX: 0, offsetY: 2 })
+            .border({ color: this.selectedPayPlan && this.selectedPayPlan.id === plan.id ? '#FFE0B2' : '#EEE', width: 2 })
+            .width(125)
+            .height(125)
+            .margin({ left: index === 0 ? 16 : 8, right: index === this.vipPlans.length - 1 ? 16 : 8 })
+            .onClick(() => {
+              this.selectedPayPlan = plan;
+            })
+            .alignItems(HorizontalAlign.Center)
           }
-          .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 })
+      .listDirection(Axis.Horizontal)
+      .height(130)
+      .edgeEffect(EdgeEffect.None)
+      .scrollBar(BarState.Off)
+      .margin({ bottom: 18 })
 
       Button(this.isVip ? '升级会员' : '立即开通')
         .borderRadius(24)
-        .backgroundColor('#FFD700')
+        .backgroundColor($r('app.color.vip_button_color'))
         .width('90%')
         .fontColor('#222')
         .fontSize(18)
@@ -556,7 +748,7 @@ export struct UserCenter {
       .padding({ bottom: 16 });
     }
     .margin({ left: 0, right: 0 })
-    .backgroundColor(Color.White)
+    // .backgroundColor(Color.White)
   }
 
   // 功能菜单
@@ -593,69 +785,6 @@ export struct UserCenter {
     .margin({ left: 20, right: 20, top: 24 })
   }
 
-  // 登录/退出按钮
-  @Builder
-  buildLoginButton(): void {
-    Row() {
-      Blank().layoutWeight(1)
-      if (this.isLogin) {
-        Button('退出登录')
-          .fontColor(Color.White)
-          .backgroundColor(Color.Red)
-          .height(48)
-          .width('70%')
-          .borderRadius(24)
-          .onClick(() => {
-            this.isLogin = false
-            this.userName = '未登录用户'
-            this.userAvatar = $r('app.media.icon_person2')
-            this.userAvatarUrl = ''
-            this.isVip = false
-            this.vipExpire = ''
-            this.hasActiveSubscription = false;
-            this.subscriptionName = '';
-            this.subscriptionEndDate = '';
-            PreferencesUtil.putSync('isLogin', false);
-            PreferencesUtil.putSync('userName', '未登录用户');
-            PreferencesUtil.putSync('userAvatarUrl', '');
-            PreferencesUtil.putSync('subscriptionName', '');
-            PreferencesUtil.putSync('subscriptionEndDate', '');
-            PreferencesUtil.putSync('hasActiveSubscription', false);
-            ToastUtil.showToast('已退出登录')
-          })
-      } else {
-        Row() {
-          Button('微信登录')
-            .height(48)
-            .width('45%')
-            .borderRadius(24)
-            .onClick(async () => {
-              let req = new wxopensdk.SendAuthReq
-              req.isOption1 = false
-              req.nonAutomatic = true
-              req.scope = 'snsapi_userinfo,snsapi_friend,snsapi_message,snsapi_contact'
-              req.state = 'none'
-              req.transaction = 'test123'
-              let finished = await this.wxApi.sendReq(getContext(this) as common.UIAbilityContext, req)
-              console.log('send request finished: ', finished)
-            })
-          Blank().width(16)
-          Button('华为登录')
-            .height(48)
-            .width('45%')
-            .borderRadius(24)
-            .onClick(() => {
-              this.huaweiQuickLogin();
-            })
-        }
-        .width('70%')
-      }
-      Blank().layoutWeight(1)
-    }
-    .margin({ top: 48, bottom: 0 })
-    .layoutWeight(1)
-  }
-
   // 华为一键登录
   async huaweiQuickLogin() {
     const logTag = 'UserCenter';
@@ -760,6 +889,9 @@ export struct UserCenter {
         let json: VipPlanListApiResponse = JSON.parse(res) as VipPlanListApiResponse;
         if (json.code === 0 && json.data && json.data.plans) {
           this.vipPlans = json.data.plans;
+          if (this.vipPlans.length > 0) {
+            this.selectedPayPlan = this.vipPlans[0]; // 默认选中第一个套餐
+          }
         } else {
           ToastUtil.showToast('套餐数据解析失败');
         }

entry/src/main/resources/base/element/color.json

@@ -155,6 +155,10 @@
     {
       "name": "timeColor_bg",
       "value": "#f0f8ff"
+    },
+    {
+      "name": "vip_button_color",
+      "value": "#FFD700"
     }
   ]
 }