兴趣卡篇交互

@@ -15,8 +15,14 @@ const TAG = 'Zh_Single_Column-09'
 @Component
 export struct ZhSingleColumn09 {
   @State compDTO: CompDTO = {} as CompDTO
-  @State list: Array<string> = ['社会', '三个字', '是四个字', '时事', '社会', '三个字', '是四个字', '时事']
   @State activeIndexs: Array<number> = []
+  @State operDataList: ContentDTO[] = this.compDTO?.operDataList || []
+  @State selfClosed: Boolean = false;
+
+  aboutToAppear(): void {
+    this.operDataList = this.shuffleArray(this.compDTO?.operDataList)
+  }
+
 
   getItemWidth(index: number) {
     if (index % 4 === 0 || index % 4 === 3) {
@@ -26,12 +32,56 @@ export struct ZhSingleColumn09 {
     }
   }
 
+  shuffleArray(array: ContentDTO[]) {
+    for(let i = array.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      const tempArray = array[i];
+      array[i] = array[j];
+      array[j] = tempArray
+    }
+    return array
+  }
+
   build() {
     Column() {
       //顶部
-      this.CompHeader(this.compDTO)
+      Row() {
+        Column() {
+          Text('以下是否有您感兴趣？')
+            .fontSize(18)
+            .fontColor(0x000000)
+            .fontWeight(600)
+            .width('70%')
+            .margin({bottom: 4})
+
+          Text('选中标签，为您推荐更多您感兴趣的内容')
+            .fontSize(12)
+            .fontColor(0xB0B0B0)
+            .margin({bottom: 10})
+            .width('70%')
+        }
+
+        Button('选好了', { type: ButtonType.Normal, stateEffect: false })
+          .fontColor(this.activeIndexs.length > 0 ? 0xed2800 : 0xB0B0B0)
+          .fontSize(14)
+          .width(62)
+          .height(26)
+          .backgroundColor(this.activeIndexs.length > 0 ? 0xfdf0ed : 0xf5f5f5)
+            // .lineHeight(26)
+          .borderRadius(4)
+          .margin({top: -10})
+          .padding({top: 0, bottom: 0, left: 0, right: 0})
+          .onClick(() => {
+            if (this.activeIndexs.length > 0) {
+              this.selfClosed = true;
+            }
+          })
+      }
+      .justifyContent(FlexAlign.SpaceBetween)
+      .width('100%')
+
       Grid() {
-        ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
+        ForEach(this.operDataList, (item: ContentDTO, index: number) => {
           GridItem() {
             Stack({alignContent: Alignment.TopEnd}) {
               Image(item.coverUrl)
@@ -73,17 +123,24 @@ export struct ZhSingleColumn09 {
         Row() {
           Text('换一换')
             .fontSize(14)
-            .fontColor(0xed2800)
+            .fontColor(this.compDTO?.operDataList.length > 8 ? 0xed2800 : 0xB0B0B0)
             .margin({right: 4})
-          Image($r('app.media.icon_refresh'))
+          Image(this.compDTO?.operDataList.length > 8 ? $r('app.media.icon_refresh') : $r('app.media.ic_refresh'))
             .width(14)
             .height(14)
         }
+        .onClick(() => {
+          if (this.compDTO?.operDataList.length > 8) {
+            this.operDataList = this.shuffleArray(this.operDataList)
+            this.activeIndexs = [];
+          }
+        })
 
         Image($r("app.media.close_button"))
           .width(14)
           .height(14)
           .onClick(() => {
+            this.selfClosed = true;
           })
       }
       .height(40)
@@ -98,42 +155,7 @@ export struct ZhSingleColumn09 {
       bottom: $r('app.float.card_comp_pagePadding_tb')
     })
     .backgroundColor($r('app.color.white'))
-    .margin({ bottom: 8 })
-
-  }
-
-  @Builder
-  CompHeader(item: CompDTO) {
-    Row() {
-      Column() {
-        Text('以下是否有您感兴趣？')
-          .fontSize(18)
-          .fontColor(0x000000)
-          .fontWeight(600)
-          .width('70%')
-          .margin({bottom: 4})
-
-        Text('选中标签，为您推荐更多您感兴趣的内容')
-          .fontSize(12)
-          .fontColor(0xB0B0B0)
-          .margin({bottom: 10})
-          .width('70%')
-      }
-
-      Text('选好了')
-        .fontColor(0xed2800)
-        .fontSize(14)
-        .width(62)
-        .height(26)
-        .backgroundColor(0xfdf0ed)
-        .textAlign(TextAlign.Center)
-        // .lineHeight(26)
-        .borderRadius(4)
-        .margin({top: -10})
-
-    }
-    .justifyContent(FlexAlign.SpaceBetween)
-    .width('100%')
+    .visibility(this.selfClosed ? Visibility.None : Visibility.Visible)
   }
 }