会员页面适配主题色

entry/src/main/ets/common/constants/CommonConstants.ets

@@ -36,6 +36,8 @@ export class CommonConstants {
   static readonly NEW_YS_HW: string = "http://xgplayer.com/yszc/ttmusic/yszc.html";
 
   static readonly NEW_FIRST: string = "http://xgplayer.com/yszc/ttmusic/first.html";
+  //会员协议
+  static readonly NEW_MEMBER_AGREEMENTS: string="http://xgplayer.com/yszc/ttmusic/member.html";
 
   static readonly LRC_API: string = 'https://lrc.ss5.xyz/jsonapi';//https://lrc.ss5.xyz/jsonapi?title=%E7%A8%BB%E9%A6%99&artist=%E5%91%A8%E6%9D%B0%E4%BC%A6
 

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

@@ -1,17 +1,16 @@
 import { router } from '@kit.ArkUI';
-import { AppUtil, DeviceUtil, DisplayUtil, LogUtil, ToastUtil, PreferencesUtil, StrUtil } from '@pura/harmony-utils';
-import { resourceManager } from '@kit.LocalizationKit';
+import { AppUtil, ToastUtil, PreferencesUtil, StrUtil } from '@pura/harmony-utils';
 import { BreakpointTypeEnum } from '../common/util/BreakpointSystem';
 import * as wxopensdk from '@tencent/wechat_open_sdk';
 import { OnWXResp, WXApi, WXEventHandler } from '../common/util/WXApiWrap';
-import { bundleManager, common, ConfigurationConstant, UIAbility } from '@kit.AbilityKit';
+import { bundleManager, common, ConfigurationConstant } from '@kit.AbilityKit';
 import { ErrCode } from '@tencent/wechat_open_sdk';
 import { http } from '@kit.NetworkKit';
 import { authentication } from '@kit.AccountKit';
 import { hilog } from '@kit.PerformanceAnalysisKit';
 import { BusinessError } from '@kit.BasicServicesKit';
 import { util } from '@kit.ArkTS';
-import { AnimationHelper, DialogHelper } from '@pura/harmony-dialog';
+import { DialogHelper } from '@pura/harmony-dialog';
 import { Pay } from '@cashier_alipay/cashiersdk';
 import { OrderInfoUtil } from '../alipay/OrderInfoUtil';
 import { RandomUtil, Base64Util } from '@pura/harmony-utils';
@@ -100,6 +99,19 @@ async function rsaSign2048(message: string): Promise<Uint8Array> {
   }
 }
 
+// 1. 工具函数：将 #RRGGBB 字符串和透明度转为 'rgba(r,g,b,a)' 字符串，深色模式下可返回深色变体
+function themeColorWithAlpha(themeColor: string, alpha: number, isDarkMode: boolean = false): string {
+  if (isDarkMode) {
+    // 深色模式下返回更深的灰色或半透明黑色
+    return `rgba(34,34,34,${alpha + 0.2 > 1 ? 1 : alpha + 0.2})`;
+  }
+  const color = themeColor.replace('#', '');
+  const r = parseInt(color.substring(0, 2), 16);
+  const g = parseInt(color.substring(2, 4), 16);
+  const b = parseInt(color.substring(4, 6), 16);
+  return `rgba(${r},${g},${b},${alpha})`;
+}
+
 @Component
 @Entry
 export struct UserCenter {
@@ -132,7 +144,7 @@ export struct UserCenter {
   @State payType: number = 0; // 0: 微信, 1: 支付宝
   @StorageProp('themeColor') themeColor: string = CommonConstants.DEFAULT_THEME_COLOR;
   @State isDarkMode: boolean = false
-  @State webUrl: string = CommonConstants.NEW_DUTY
+  @State webUrl: string = CommonConstants.NEW_MEMBER_AGREEMENTS
   @StorageProp('topRectHeight') topRectHeight: number = px2vp(AppUtil.getStatusBarHeight());
   @StorageProp('currentColorMode') @Watch('onColorModeChange') currentMode: number =
     ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;
@@ -255,7 +267,7 @@ export struct UserCenter {
         }
         .height(48)
         .width('100%')
-        .backgroundColor(this.isDarkMode?$r('app.color.title_bar_bg'):this.themeColor)
+        .backgroundColor(this.isDarkMode?$r('app.color.user_center_card_background'):this.themeColor)
       }
 
       Scroll() {
@@ -275,7 +287,7 @@ export struct UserCenter {
         bottom:45
       })
     }
-    .backgroundColor(0xFFF6F7FA)
+    .backgroundColor($r('app.color.index_background'))
     .width('100%')
     .height('100%')
     .layoutWeight(1)
@@ -293,14 +305,14 @@ export struct UserCenter {
           .height(56)
           .borderRadius('50%')
           .clip(true)
-          .backgroundColor(Color.White)
+          .backgroundColor(this.isDarkMode ? Color.Black : Color.White)
           .shadow({ radius: 8, color: 0x11000000, offsetX: 0, offsetY: 2 })
         Column() {
           Row() {
             Text(this.isLogin ? this.userName : '未登录用户')
               .fontSize(17)
               .fontWeight(FontWeight.Bold)
-              .fontColor(Color.Black)
+              .fontColor(this.isDarkMode ? Color.White : Color.Black)
               .textAlign(TextAlign.Start)
               .maxLines(1)
               .width(110)
@@ -312,16 +324,16 @@ export struct UserCenter {
             if (this.hasActiveSubscription) {
               Text(this.subscriptionName)
                 .fontSize(13)
-                .fontColor("#CA5010")
+                .fontColor( themeColorWithAlpha(this.themeColor, 0.8, false))
                 .textAlign(TextAlign.Start)
               Text('到期：' + this.subscriptionEndDate)
                 .fontSize(11)
-                .fontColor(Color.Gray)
+                .fontColor(this.isDarkMode ? Color.White : Color.Gray)
                 .textAlign(TextAlign.Start)
             } else {
               Text('普通用户')
                 .fontSize(12)
-                .fontColor(Color.Grey)
+                .fontColor(this.isDarkMode ? Color.White : Color.Grey)
                 .textAlign(TextAlign.Start)
             }
           }
@@ -332,8 +344,8 @@ export struct UserCenter {
         Column(){
           if (this.isLogin) {
             Button('退出')
-              .fontColor(Color.Black)
-              .backgroundColor($r('app.color.vip_button_color'))
+              .fontColor( Color.White)
+              .backgroundColor(this.isDarkMode ? $r('app.color.title_bar_bg') : this.themeColor)
               .height(36)
               .width(66)
               .fontSize(13)
@@ -359,8 +371,8 @@ export struct UserCenter {
               })
           }else {
             Button('登录')
-              .fontColor(Color.Black)
-              .backgroundColor($r('app.color.vip_button_color'))
+              .fontColor( Color.White)
+              .backgroundColor(this.isDarkMode ? $r('app.color.title_bar_bg') : this.themeColor)
               .height(36)
               .width(66)
               .fontSize(13)
@@ -379,7 +391,7 @@ export struct UserCenter {
       .width('100%')
       .padding(10)
     }
-    .backgroundColor(Color.White)
+    .backgroundColor($r('app.color.user_center_card_background'))
     .borderRadius(24)
     .margin({ left: 14, right: 14, top: 15 })
     .shadow({ radius: 8, color: 0x11000000, offsetX: 0, offsetY: 2 })
@@ -481,7 +493,7 @@ export struct UserCenter {
         .fontSize(18)
         .fontWeight(FontWeight.Bold)
         .padding({ top: 24, bottom: 16 })
-        .fontColor('#191919')
+        .fontColor(this.isDarkMode ? Color.White : '#191919')
         .textAlign(TextAlign.Center);
 
       Grid() {
@@ -493,16 +505,16 @@ export struct UserCenter {
                 if (feature.hasCome === false) {
                   Text('开发中')
                     .fontSize(10)
-                    .fontColor('#FF5722')
-                    .backgroundColor('#FFF3E0')
+                    .fontColor(themeColorWithAlpha(this.themeColor, 0.9, false))
+                    .backgroundColor(themeColorWithAlpha(this.themeColor, 0.15, this.isDarkMode))
                     .borderRadius(8)
                     .padding({ left: 6, right: 6, top: 2, bottom: 2 })
                     .margin({ top: 2, right: 2 })
                 }else {
                   Text('已开发')
                     .fontSize(10)
-                    .fontColor('#FFFDF7')
-                    .backgroundColor('#FFFDF7')
+                    .fontColor(themeColorWithAlpha(this.themeColor, 0.9, false))
+                    .backgroundColor(themeColorWithAlpha(this.themeColor, 0.15, this.isDarkMode))
                     .borderRadius(8)
                     .padding({ left: 6, right: 6, top: 2, bottom: 2 })
                     .margin({ top: 2, right: 2 })
@@ -513,7 +525,7 @@ export struct UserCenter {
                 Image(feature.icon)
                   .width(32)
                   .height(32)
-                  .fillColor('#B8860B')
+                  .fillColor(this.themeColor)
                 Blank().layoutWeight(1)
               }
               .margin({ bottom: 8 })
@@ -521,12 +533,12 @@ export struct UserCenter {
               Text(feature.title)
                 .fontSize(15)
                 .fontWeight(FontWeight.Bold)
-                .fontColor('#191919')
+                .fontColor(this.isDarkMode ? Color.White : '#191919')
                 .margin({ bottom: 2 })
 
               Text(feature.description)
                 .fontSize(12)
-                .fontColor('#888')
+                .fontColor(this.isDarkMode ? Color.Gray : '#888')
                 .textAlign(TextAlign.Center)
                 .maxLines(2)
                 .margin({ bottom: 4 })
@@ -534,16 +546,18 @@ export struct UserCenter {
               if (feature.isVipOnly) {
                 Text('VIP专享')
                   .fontSize(10)
-                  .fontColor('#6D4C41')
-                  .backgroundColor('#FFE0B2')
+                  .fontColor(this.isDarkMode ? Color.White : this.themeColor)
+                  .backgroundColor(this.isDarkMode?$r('app.color.user_center_button_background'):themeColorWithAlpha(this.themeColor, 0.15, false))
                   .borderRadius(8)
                   .padding({ left: 6, right: 6, top: 2, bottom: 2 })
                   .margin({ top: 2,bottom:6 })
               }
             }
-            .backgroundColor('#FFFDF7')
+            .backgroundColor($r('app.color.user_center_card_background'))
             .borderRadius(16)
             .shadow({ radius: 8, color: 0x11000000, offsetX: 0, offsetY: 2 })
+            .border({ color:(this.isDarkMode?$r('app.color.user_center_button_background') :themeColorWithAlpha(this.themeColor, 0.08, false))//未选中时的边框颜色
+            , width: 2 })
             .padding(12)
             .width('100%')
             .height(145)
@@ -555,7 +569,7 @@ export struct UserCenter {
       .rowsGap(16)
       .margin({ left: 16, right: 16,top:0, bottom: 15 })
     }
-    .backgroundColor(Color.White)
+    .backgroundColor(this.isDarkMode ? Color.Black : Color.White)
     .borderRadius(24)
     .margin({ left: 16, right: 16,top:15, bottom: 15 })
   }
@@ -640,7 +654,7 @@ export struct UserCenter {
         .textAlign(TextAlign.Start)
         .padding({ left: 16, bottom: 15, top: 18 })
         .fontSize(18)
-        .fontColor('#191919')
+        .fontColor(this.isDarkMode ? Color.White : '#191919')
         .fontWeight(FontWeight.Bold)
         .fontFamily('鸿蒙黑体');
 
@@ -652,7 +666,7 @@ export struct UserCenter {
               Text(plan.name)
                 .fontSize(15)
                 .fontWeight(FontWeight.Bold)
-                .fontColor('#191919')
+                .fontColor($r('app.color.user_center_font'))
                 .margin({ top: 18, bottom: 8 })
                 .textAlign(TextAlign.Center)
 
@@ -661,14 +675,14 @@ export struct UserCenter {
                 Text('￥' + plan.price)
                   .fontSize(24)
                   .fontWeight(FontWeight.Bold)
-                  .fontColor('#B8860B')
+                  .fontColor(this.themeColor)
                   .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' })
+                    .fontColor(themeColorWithAlpha(this.themeColor, 0.7,false))
+                    .decoration({ type: TextDecorationType.LineThrough, color: themeColorWithAlpha(this.themeColor, 0.7, false) })
                     .fontStyle(FontStyle.Italic)
                     .textAlign(TextAlign.Center)
                 }
@@ -678,14 +692,18 @@ export struct UserCenter {
 
               Text(plan.duration === '0' ? '永久会员' : (plan.duration + '天会员'))
                 .fontSize(13)
-                .fontColor('#888')
+                .fontColor(this.isDarkMode ? Color.White : Color.Grey)
                 .maxLines(1)
                 .textAlign(TextAlign.Center)
             }
-            .backgroundColor(this.selectedPayPlan && this.selectedPayPlan.id === plan.id ? '#FFF9E1' : '#F7F7F7')
+            .backgroundColor(this.selectedPayPlan && this.selectedPayPlan.id === plan.id ? themeColorWithAlpha(this.themeColor, 0.08, false) : (this.isDarkMode ? Color.Black : '#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 })
+            .border({ color: this.selectedPayPlan && this.selectedPayPlan.id === plan.id ?
+              (this.isDarkMode ? Color.White :themeColorWithAlpha(this.themeColor, 0.3, this.isDarkMode))//选中时的边框颜色
+              :
+              (this.isDarkMode?$r('app.color.user_center_button_background') :themeColorWithAlpha(this.themeColor, 0.08, this.isDarkMode))//未选中时的边框颜色
+            , width: 2 })
             .width(125)
             .height(125)
             .margin({ left: index === 0 ? 16 : 8, right: index === this.vipPlans.length - 1 ? 16 : 8 })
@@ -704,9 +722,9 @@ export struct UserCenter {
 
       Button(this.isVip ? '升级会员' : '立即开通')
         .borderRadius(24)
-        .backgroundColor($r('app.color.vip_button_color'))
+        .backgroundColor(this.isDarkMode ? $r('app.color.user_center_button_background') : this.themeColor)
         .width('90%')
-        .fontColor('#222')
+        .fontColor(Color.White)
         .fontSize(18)
         .fontWeight(FontWeight.Bold)
         .margin({ top: 8, bottom: 8 })
@@ -745,10 +763,10 @@ export struct UserCenter {
       Row() {
         Text('购买前请阅读')
           .fontSize(12)
-          .fontColor('#888')
+          .fontColor(this.isDarkMode ? Color.White : '#888')
         Text('《会员协议》')
           .fontSize(12)
-          .fontColor('#B8860B')
+          .fontColor(this.isDarkMode ? Color.Blue : this.themeColor)
           .onClick(() => {
             router.pushUrl({
               url: 'pages/WebIndex',
@@ -762,7 +780,7 @@ export struct UserCenter {
       .padding({ bottom: 16 });
     }
     .margin({ left: 14, right: 14, top: 15 })
-    .backgroundColor(Color.White)
+    .backgroundColor($r('app.color.user_center_card_background'))
     .borderRadius(24)
   }
 

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

@@ -159,6 +159,22 @@
     {
       "name": "vip_button_color",
       "value": "#FFD700"
+    },
+    {
+      "name": "user_center_font",
+      "value": "#191919"
+    },
+    {
+      "name": "user_center_font_second",
+      "value": "#ffffff"
+    },
+    {
+      "name": "user_center_main_index_background",
+      "value": "#F1F3F5"
+    },
+    {
+      "name": "user_center_card_background",
+      "value": "#FFFFFF"
     }
   ]
 }

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

@@ -173,6 +173,25 @@
     {
       "name": "timeColor_bg",
       "value": "#FF373737"
+    },{
+      "name": "user_center_font",
+      "value": "#ffffff"
+    },
+    {
+      "name": "user_center_font_second",
+      "value": "#999999"
+    },
+    {
+      "name": "user_center_main_index_background",
+      "value": "#FF373737"
+    },
+    {
+      "name": "user_center_card_background",
+      "value": "#000000"
+    },
+    {
+      "name": "user_center_button_background",
+      "value": "#1E1E1E"
     }
   ]
 }