限制会员功能

entry/src/main/ets/pages/SettingPage.ets

@@ -9,18 +9,9 @@ import { photoAccessHelper } from '@kit.MediaLibraryKit'
 import { fileIo, fileUri } from '@kit.CoreFileKit'
 import { BusinessError, emitter } from '@kit.BasicServicesKit'
 import { BreakpointTypeEnum } from '../common/util/BreakpointSystem'
-import { resourceManager } from '@kit.LocalizationKit'
-// import {
-//   IBestButton,
-//   IBestColorPicker,
-//   IBestField,
-//   IBestIcon,
-//   IBestPopup,
-//   IBestRadio,
-//   IBestRadioGroup
-// } from '@ibestservices/ibest-ui'
 import { Utility } from '../common/util/Utility'
 import { HSBColorPicker } from '@keke/color-picker'
+import { DialogHelper } from '@pura/harmony-dialog'
 
 @Preview
 @Entry
@@ -52,22 +43,22 @@ export struct SettingPage {
   public static THEME_COLOR_KEY: string = 'THEME_COLOR';
   public static TWO_FINGER_TYPE: string = 'twoFingerType';
   public static THEME_COLOR_LIST: Array<ThemeColorItem> = [
-    { name: '经典蓝', color: '#0A59F7' },
-    { name: '活力黄', color: '#FFC107' },
-    { name: '枫叶红', color: '#F44336' },
-    { name: '玫瑰粉', color: '#FF4081' },
-    { name: '幻影紫', color: '#9C27B0' },
-    { name: '翡翠绿', color: '#64BB5C' },
-    { name: '竹青蓝', color: '#00BCD4' },
-    { name: '深空灰', color: '#607D8B' },
-    { name: '橙霞橙', color: '#FF9800' },
-    { name: '湖水蓝', color: '#00BFFF' },
-    { name: '柠檬绿', color: '#C6FF00' },
-    { name: '樱花粉', color: '#FF69B4' },
-    { name: '暮夜蓝', color: '#283593' },
-    { name: '薄荷青', color: '#1DE9B6' },
-    { name: '银沙灰', color: '#B0BEC5' },
-    { name: '自定义', color: '#ffecec' }
+    { name: '经典蓝', color: '#0A59F7', isVip: false },
+    { name: '活力黄', color: '#FFC107', isVip: true },
+    { name: '枫叶红', color: '#F44336', isVip: true },
+    { name: '玫瑰粉', color: '#FF4081', isVip: false },
+    { name: '幻影紫', color: '#9C27B0', isVip: true },
+    { name: '翡翠绿', color: '#64BB5C', isVip: true },
+    { name: '竹青蓝', color: '#00BCD4', isVip: true },
+    { name: '深空灰', color: '#607D8B', isVip: true },
+    { name: '橙霞橙', color: '#FF9800', isVip: true },
+    { name: '湖水蓝', color: '#00BFFF', isVip: true },
+    { name: '柠檬绿', color: '#C6FF00', isVip: true },
+    { name: '樱花粉', color: '#FF69B4', isVip: true },
+    { name: '暮夜蓝', color: '#283593', isVip: true },
+    { name: '薄荷青', color: '#1DE9B6', isVip: true },
+    { name: '银沙灰', color: '#B0BEC5', isVip: true },
+    { name: '自定义', color: '#ffecec', isVip: true }
   ];
   static readonly iS_START_AUTO_PLAY: string = 'isStartAutoPlay';
   static readonly iS_MEMORY_LAST_PLAY: string = 'isMemoryLastPlay';
@@ -111,7 +102,8 @@ export struct SettingPage {
   /** 当前断点类型（如大屏/小屏） */
   @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointTypeEnum.MD;
   @State verName: string = ''
-  @StorageProp('themeColor') themeColor: string = PreferencesUtil.getStringSync('THEME_COLOR', CommonConstants.DEFAULT_THEME_COLOR);
+  @StorageProp('themeColor') themeColor: string =
+    PreferencesUtil.getStringSync('THEME_COLOR', CommonConstants.DEFAULT_THEME_COLOR);
   @State showColorPicker: boolean = false
   @State customColor: string = PreferencesUtil.getStringSync('THEME_COLOR', CommonConstants.DEFAULT_THEME_COLOR);
   @State isThemeSheet: boolean = false // 主题设置弹窗显示状态
@@ -386,10 +378,20 @@ export struct SettingPage {
                         item.color)
                         .border({ width: 2, color: $r('app.color.text_color') })
                         .borderRadius(11)
+
                       Text(item.name)
                         .fontSize(15)
                         .fontColor($r('app.color.text_color'))
                         .margin({ left: 10 })
+
+                        // Text(item.isVip?'VIP':"Free")
+                        //   .fontSize(10)
+                        //   .fontColor(item.isVip?'#FFD700':"#000000") // 金色
+                        //   .backgroundColor('#FFF9E3')
+                        //   .borderRadius(6)
+                        //   .padding({ left: 4, right: 4, top: 1, bottom: 1 })
+                        //   .margin({ left: 4 })
+
                     }
                     .alignItems(VerticalAlign.Center)
                     .justifyContent(FlexAlign.Start)
@@ -404,6 +406,12 @@ export struct SettingPage {
                   )
                   .borderRadius(20)
                   .onClick(() => {
+                    if (item.isVip) {
+                      if (!Utility.isNoble()) {
+                        this.showVipDialog();
+                        return;
+                      }
+                    }
                     if (item.name === '自定义') {
                       this.showColorPicker = true
                     } else {
@@ -413,7 +421,6 @@ export struct SettingPage {
                       this.sendChangeEvent()
                     }
                   })
-
                   .margin({ right: colIdx === 0 ? '4%' : 20, bottom: 10, left: 20 })
                 })
               }
@@ -540,7 +547,7 @@ export struct SettingPage {
             }
             .backgroundColor(Color.Transparent)
             .height(55)
-            .clickEffect({level:ClickEffectLevel.HEAVY})
+            .clickEffect({ level: ClickEffectLevel.HEAVY })
             .onClick(() => {
               this.showColorPicker = false;
               this.isThemeSheet = true;
@@ -588,9 +595,13 @@ export struct SettingPage {
                   .align(Alignment.Center)
               }
             }
-            .clickEffect({level:ClickEffectLevel.HEAVY})
+            .clickEffect({ level: ClickEffectLevel.HEAVY })
             .height(55)
             .onClick(() => {
+              if (!Utility.isNoble()) {
+                this.showVipDialog();
+                return;
+              }
               this.isCustomizeBgSheet = !this.isCustomizeBgSheet;
             })
             .backgroundColor(Color.Transparent)
@@ -618,7 +629,7 @@ export struct SettingPage {
                 .height(30);
             }
             .height(55)
-            .clickEffect({level:ClickEffectLevel.HEAVY})
+            .clickEffect({ level: ClickEffectLevel.HEAVY })
 
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
 
@@ -643,7 +654,7 @@ export struct SettingPage {
                 .height(30);
             }
             .height(55)
-            .clickEffect({level:ClickEffectLevel.HEAVY})
+            .clickEffect({ level: ClickEffectLevel.HEAVY })
 
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
 
@@ -657,22 +668,22 @@ export struct SettingPage {
                 .layoutWeight(1)
               Select([
                 { value: CommonConstants.TWO_FINGER_TYPE[0] },
-                { value:CommonConstants.TWO_FINGER_TYPE[1]},
+                { value: CommonConstants.TWO_FINGER_TYPE[1] },
                 { value: CommonConstants.TWO_FINGER_TYPE[2] }])
                 .font({ size: 15, weight: FontWeight.Medium })
                 .fontColor(Color.Gray)
                 .margin({ right: 18 })
-                .selected(this.twoFingerType-1)
+                .selected(this.twoFingerType - 1)
                 .value(CommonConstants.TWO_FINGER_TYPE[this.twoFingerType-1])
                 .onSelect(async (_index: number, text?: string | undefined) => {
-                  _index ++;
+                  _index++;
                   this.twoFingerType = _index
                   PreferencesUtil.put(SettingPage.TWO_FINGER_TYPE, this.twoFingerType)
                   this.sendChangeEvent()
                 })
             }
             .height(55)
-            .clickEffect({level:ClickEffectLevel.HEAVY})
+            .clickEffect({ level: ClickEffectLevel.HEAVY })
 
 
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
@@ -698,13 +709,13 @@ export struct SettingPage {
                 .height(30);
             }
             .height(55)
-            .clickEffect({level:ClickEffectLevel.HEAVY})
+            .clickEffect({ level: ClickEffectLevel.HEAVY })
 
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
 
           }
           .transition(TransitionEffect.move(TransitionEdge.BOTTOM)
-            .animation({ duration: 500, curve: Curve.Ease,delay:200 }))
+            .animation({ duration: 500, curve: Curve.Ease, delay: 200 }))
           .backgroundColor($r('app.color.settings_background_main'))
           .borderRadius(20)
           .margin({
@@ -749,7 +760,7 @@ export struct SettingPage {
                 .height(30);
             }
             .height(55)
-            .clickEffect({level:ClickEffectLevel.HEAVY})
+            .clickEffect({ level: ClickEffectLevel.HEAVY })
 
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
             // 记住播放进度
@@ -773,7 +784,7 @@ export struct SettingPage {
                 .height(30);
             }
             .height(55)
-            .clickEffect({level:ClickEffectLevel.HEAVY})
+            .clickEffect({ level: ClickEffectLevel.HEAVY })
 
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
             // 记忆播放
@@ -797,7 +808,7 @@ export struct SettingPage {
                 .height(30);
             }
             .height(55)
-            .clickEffect({level:ClickEffectLevel.HEAVY})
+            .clickEffect({ level: ClickEffectLevel.HEAVY })
 
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
             // 默认排序模式
@@ -829,7 +840,7 @@ export struct SettingPage {
                 })
             }
             .height(55)
-            .clickEffect({level:ClickEffectLevel.HEAVY})
+            .clickEffect({ level: ClickEffectLevel.HEAVY })
 
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
             // 保存播放模式
@@ -852,7 +863,7 @@ export struct SettingPage {
                 .height(30);
             }
             .height(55)
-            .clickEffect({level:ClickEffectLevel.HEAVY})
+            .clickEffect({ level: ClickEffectLevel.HEAVY })
 
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
               .visibility(Visibility.None)
@@ -874,7 +885,7 @@ export struct SettingPage {
                 .width(50)
                 .height(30);
             }
-            .height(55).clickEffect({level:ClickEffectLevel.HEAVY})
+            .height(55).clickEffect({ level: ClickEffectLevel.HEAVY })
 
             .visibility(Visibility.None)
 
@@ -899,10 +910,10 @@ export struct SettingPage {
                 .height(30);
             }
             .height(55)
-            .clickEffect({level:ClickEffectLevel.HEAVY})
+            .clickEffect({ level: ClickEffectLevel.HEAVY })
           }
           .transition(TransitionEffect.move(TransitionEdge.BOTTOM)
-            .animation({ duration: 500, curve: Curve.Ease ,delay:400}))
+            .animation({ duration: 500, curve: Curve.Ease, delay: 400 }))
           .backgroundColor($r('app.color.settings_background_main'))
           .borderRadius(20)
           .margin({
@@ -983,7 +994,7 @@ export struct SettingPage {
           .height(30);
       }
       .height(55)
-      .clickEffect({level:ClickEffectLevel.HEAVY})
+      .clickEffect({ level: ClickEffectLevel.HEAVY })
 
       Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
 
@@ -1007,7 +1018,7 @@ export struct SettingPage {
           .height(30);
       }
       .height(55)
-      .clickEffect({level:ClickEffectLevel.HEAVY})
+      .clickEffect({ level: ClickEffectLevel.HEAVY })
 
       Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
       // 显示私密音频
@@ -1031,7 +1042,7 @@ export struct SettingPage {
           .height(30);
       }
       .height(55)
-      .clickEffect({level:ClickEffectLevel.HEAVY})
+      .clickEffect({ level: ClickEffectLevel.HEAVY })
 
       Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
       // 显示我的收藏
@@ -1055,7 +1066,7 @@ export struct SettingPage {
           .height(30);
       }
       .height(55)
-      .clickEffect({level:ClickEffectLevel.HEAVY})
+      .clickEffect({ level: ClickEffectLevel.HEAVY })
 
       Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
       // 显示最近播放
@@ -1079,11 +1090,11 @@ export struct SettingPage {
           .height(30);
       }
       .height(55)
-      .clickEffect({level:ClickEffectLevel.HEAVY})
+      .clickEffect({ level: ClickEffectLevel.HEAVY })
 
     }
     .transition(TransitionEffect.move(TransitionEdge.BOTTOM)
-      .animation({ duration: 500, curve: Curve.Ease ,delay:600}))
+      .animation({ duration: 500, curve: Curve.Ease, delay: 600 }))
     .backgroundColor($r('app.color.settings_background_main'))
     .borderRadius(20)
     .margin({
@@ -1210,7 +1221,7 @@ export struct SettingPage {
 
     }
     .transition(TransitionEffect.move(TransitionEdge.BOTTOM)
-      .animation({ duration: 500, curve: Curve.Ease ,delay:600}))
+      .animation({ duration: 500, curve: Curve.Ease, delay: 600 }))
     .backgroundColor($r('app.color.settings_background_main'))
     .borderRadius(20)
     .margin({
@@ -1287,7 +1298,7 @@ export struct SettingPage {
         .objectFit(ImageFit.Contain)
         .borderRadius(20)
         .clip(true)
-        .clickEffect({level:ClickEffectLevel.HEAVY})
+        .clickEffect({ level: ClickEffectLevel.HEAVY })
         .blur(this.blurValue)
         .brightness(this.bgBrightness + 0.8)
         .margin({ left: 30, right: 30, bottom: 20 })
@@ -1301,7 +1312,7 @@ export struct SettingPage {
             .fontSize(12)
             .height(48)
             .width(100)
-            .clickEffect({level:ClickEffectLevel.HEAVY})
+            .clickEffect({ level: ClickEffectLevel.HEAVY })
             .backgroundColor(this.themeColor)
             .stateEffect(true)
             .onClick(async () => {
@@ -1332,7 +1343,7 @@ export struct SettingPage {
           Toggle({ type: ToggleType.Switch, isOn: this.isCustomizeBg })
             .selectedColor(this.themeColor)
             .switchPointColor(Color.White)
-            .clickEffect({level:ClickEffectLevel.HEAVY})
+            .clickEffect({ level: ClickEffectLevel.HEAVY })
             .margin({ right: 18 })
             .onChange((checked: boolean) => {
               this.isCustomizeBg = checked;
@@ -1443,12 +1454,66 @@ export struct SettingPage {
     }
     return true;
   }
+
+  // 会员功能弹窗
+  showVipDialog() {
+    DialogHelper.showCustomContentDialog({
+      dialogId: 'vip',
+      title: "友情提示",
+      autoCancel: false,
+      backCancel: true,
+      contentBuilder: () => {
+        this.customVipBuilder("该功能需开通赞助功能，非常感谢您的支持！")
+      },
+      buttons: [],
+    })
+  }
+
+  @Builder
+  customVipBuilder(content: string) {
+    Column() {
+      Text(content)
+        .fontColor(Color.Gray)
+        .fontSize(16)
+        .alignSelf(ItemAlign.Start)
+        .margin({ bottom: 15 })
+      Row() {
+        Button('取消')
+          .fontColor(Color.White)
+          .backgroundColor(this.themeColor)
+          .height(50)
+          .layoutWeight(1)
+          .stateEffect(true)
+          .margin({ right: 6 })
+          .onClick(() => {
+            DialogHelper.closeDialog('vip');
+          })
+        Button('开通')
+          .fontColor(Color.White)
+          .layoutWeight(1)
+          .height(50)
+          .backgroundColor(this.themeColor)
+          .stateEffect(true)
+          .margin({ left: 6 })
+          .onClick(() => {
+            this.isThemeSheet = false;
+            DialogHelper.closeDialog('vip');
+            router.pushUrl({
+              url: 'pages/UserCenter'
+            }, router.RouterMode.Single);
+          })
+      }
+    }
+    .width("100%")
+    .padding(10)
+  }
 }
 
 // 主题色类型声明
 export interface ThemeColorItem {
   name: string;
   color: string;
+  isVip: boolean;
 }
 
 // 工具函数：将一维数组分成每行2个的二维数组