兴趣询问卡ui

+import { CompDTO, ContentDTO, Params } from 'wdBean';
+import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
+import { HttpUrlUtils } from 'wdNetwork/Index';
+import { postInteractAccentionOperateParams } from 'wdBean';
+import { PageRepository } from '../repository/PageRepository';
+import { CommonConstants } from 'wdConstant/Index';
+
+/**
+ * 精选评论卡
+ * Zh_Single_Row-06
+ */
+const TAG = 'Zh_Single_Row-06'
+
+@Entry
+@Component
+export struct ZhSingleRow06 {
+  @State compDTO: CompDTO = {} as CompDTO
+  @State list: Array<string> = ['社会', '三个字', '是四个字', '时事', '社会', '三个字', '是四个字', '时事']
+  @State activeIndexs: Array<number> = []
+
+  getItemWidth(index: number) {
+    if (index % 4 === 0 || index % 4 === 3) {
+      return 80
+    } else {
+      return 96
+    }
+  }
+
+  build() {
+    Column() {
+      //顶部
+      this.CompHeader(this.compDTO)
+      Grid() {
+        ForEach(this.list, (item: string, index: number) => {
+          GridItem() {
+            Text(item)
+              .fontSize(14)
+              .fontColor(this.activeIndexs.includes(index) ? 0x222222 : 0x666666)
+              .fontWeight(this.activeIndexs.includes(index) ? 600 : 400)
+              .textAlign(TextAlign.Center)
+          }
+          .onClick(() => {
+            if (this.activeIndexs.includes(index)) {
+              const ind = this.activeIndexs.indexOf(index);
+              this.activeIndexs.splice(ind, 1)
+            } else {
+              this.activeIndexs.push(index)
+            }
+          })
+        })
+      }
+      .height(70)
+      .columnsTemplate('1fr 1fr 1fr 1fr')
+      .rowsTemplate('1fr 1fr')
+      .margin({bottom: 10})
+
+
+      Text('选中标签，为您推荐更多您感兴趣的内容')
+        .fontSize(12)
+        .fontColor(0xB0B0B0)
+        .textAlign(TextAlign.Center)
+        .margin({bottom: 10})
+
+      Row() {
+        Text('选好了')
+          .fontSize(14)
+          .fontColor(0x000000)
+          .width('100%')
+          .textAlign(TextAlign.Center)
+      }
+      .height(40)
+      .backgroundColor(0xf9f9f9)
+      .width('100%')
+      .borderRadius(3)
+    }
+    .padding({
+      left: $r('app.float.card_comp_pagePadding_lf'),
+      right: $r('app.float.card_comp_pagePadding_lf'),
+      top: $r('app.float.card_comp_pagePadding_tb'),
+      bottom: $r('app.float.card_comp_pagePadding_tb')
+    })
+    .backgroundColor($r('app.color.white'))
+    .margin({ bottom: 8 })
+
+  }
+
+  @Builder
+  CompHeader(item: CompDTO) {
+    Row() {
+      Row() {
+        Image($r("app.media.icon_interest_ask"))
+          .width(24)
+          .height(24)
+          .margin({ right: 4 })
+        Text('以下是否有您感兴趣？')
+          .fontSize($r("app.float.font_size_17"))
+          .fontColor(0x000000)
+          .fontWeight(600)
+      }
+
+      Row() {
+        Image($r("app.media.close_button"))
+          .width(14)
+          .height(14)
+          .onClick(() => {
+          })
+      }
+      .padding({
+        right: $r('app.float.card_comp_pagePadding_lf'),
+      })
+    }
+    .justifyContent(FlexAlign.SpaceBetween)
+    .margin({ top: 8, bottom: 8 })
+    .width('100%')
+  }
+}
+
+@Extend(Text)
+function textOverflowStyle(maxLine: number) {
+  .maxLines(maxLine)
+  .textOverflow({ overflow: TextOverflow.Ellipsis })
+}
+
+@Component
+struct CreatorItem {
+  @Prop item: ContentDTO
+  @State rmhIsAttention: number = 0
+  build() {
+    ListItem() {
+      Column() {
+        Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween}) {
+          Column() {
+            Row() {
+              Image('')
+                .width(20)
+                .height(20)
+                .margin({right: 4})
+                .border({width: 1, color: 0xcccccc, radius: 10})
+              Text('立志之间')
+                .fontColor(0x212228)
+                .fontSize(12)
+            }
+          }
+
+          Column() {
+            Row() {
+              Image($r('app.media.icon_like_no'))
+                .width(16)
+                .height(16)
+                .margin({right: 4})
+              Text('3835')
+                .fontSize(14)
+                .fontColor(0x999999)
+            }
+          }
+        }
+        .margin({top: 10, left: 10, right: 10, bottom: 8})
+
+        Text('就业不仅是民生问题，也是发展问题，就业不仅是民生问题，也是发展问题，就业不仅是民生问题，也是发展问题，')
+          .maxLines(2)
+          .textOverflow({overflow: TextOverflow.Ellipsis})
+          .margin({left: 10, right: 10, bottom: 8})
+          .fontSize(17)
+          .fontColor(0x212228)
+          .lineHeight(25)
+
+        Row() {
+          Image('')
+            .width(66)
+            .height(44)
+            .borderRadius({topLeft: 3, topRight: 0, bottomLeft: 3, bottomRight: 0})
+          Text('原文｜强化就业优先政策 健全就业促进机制原文｜强化就业优先政策 健全就业促进机制原文｜强化就业优先政策 健全就业促进机制')
+            .margin({left: 8})
+            .width(172)
+            .maxLines(2)
+            .textOverflow({overflow: TextOverflow.Ellipsis})
+        }
+        .linearGradient({
+          direction: GradientDirection.Right,
+          colors: [[0xffffff, 0.0],[0xffffff, 0.8], [0xf9f9f9, 1.0]]
+        })
+      }
+      .width(276)
+      .height(150)
+      .margin({ right: 10 })
+      .borderWidth(1)
+      .borderColor($r('app.color.color_EDEDED'))
+      .borderRadius($r('app.float.image_border_radius'))
+      .backgroundColor(0xf9f9f9)
+    }
+    .onClick(() => {
+      console.log('跳转到rmh');
+    })
+  }
+
+  /**
+   * 关注号主 TODO 这里后面需要抽离
+   */
+  handleAccention(item: ContentDTO, status: number) {
+    this.rmhIsAttention = this.rmhIsAttention ? 0 : 1
+    return
+    // 未登录，跳转登录
+    if (!HttpUrlUtils.getUserId()) {
+      WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
+      return
+    }
+
+    const params: postInteractAccentionOperateParams = {
+      attentionUserType: item.rmhInfo?.userType || '', //被关注用户类型（1 普通用户 2 视频号 3 矩阵号）
+      attentionUserId: item.rmhInfo?.userId || '', // 被关注用户号主id
+      attentionCreatorId: item.rmhInfo?.rmhId || '', // 被关注用户号主id
+      // userType: 1,
+      // userId: '1', // TODO 用户id需要从本地获取
+      status: status,
+    }
+    PageRepository.postInteractAccentionOperate(params).then(res => {
+      console.log(TAG, '关注号主==', JSON.stringify(res.data))
+      if (status === 1) {
+        this.rmhIsAttention = 0
+      } else {
+        this.rmhIsAttention = 1
+      }
+    })
+  }
+}