新增-人民号冷启动卡

+import { RmhInfoDTO, 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';
+
+/**
+ * 人民号--推荐---没有关注的情况下，推荐的优质号主---ui称为：人民号冷启动卡
+ * RecommendAttentionRmh
+ */
+const TAG = 'RecommendAttentionRmh'
+
+interface RmhInfo extends RmhInfoDTO {
+  isSelected: boolean;
+  headPhotoUrl: string;
+  introduction: string;
+  userName: string;
+}
+
+@Entry
+@Component
+export struct RecommendAttentionRmh {
+  @State recommendRmhList: RmhInfo[] = [
+    // {
+    //   authIcon: 'https://cdnjdphoto.aikan.pdnews.cn/creator-category/icon/auth/blue.png',
+    //   headPhotoUrl: 'https://uatjdcdnphoto.aikan.pdnews.cn/vod/content/202302/202302Sa121448724/TUw.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg',
+    //   introduction: '1。',
+    //   userName: '中国'
+    // } as RmhInfo,
+  ]
+  @State selectedCount: number = 0
+
+  @Builder
+  buildItemCard(item: RmhInfo) {
+    Column() {
+      Image(item.headPhotoUrl)
+        .width(44)
+        .aspectRatio(1 / 1)
+        .margin(16)
+      Text(item.userName)
+        .fontSize(13)
+        .maxLines(1)
+        .textOverflow({ overflow: TextOverflow.Ellipsis })
+    }
+    .width('100%')
+  }
+
+  build() {
+    Column() {
+      //顶部
+      this.CompHeader()
+      GridRow({
+        gutter: 10,
+        columns: { sm: 3, md: 4, lg: 8 },
+        breakpoints: {
+          value: ['320vp', '520vp', '840vp'],
+          reference: BreakpointsReference.WindowSize
+        }
+      }) {
+        ForEach(this.recommendRmhList, (item: RmhInfo, index: number) => {
+          GridCol() {
+            CreatorItem({ item, index, list: $recommendRmhList, selectedCount: $selectedCount })
+          }
+        })
+      }
+
+      Button(`一键关注(${this.selectedCount})`, { type: ButtonType.Normal })
+        .borderRadius($r('app.float.button_border_radius'))
+        .height(36)
+        .backgroundColor($r('app.color.color_ED2800'))
+        .margin({ top: 20 })
+        .onClick(() => {
+          // TODO 调用一键关注的接口
+          const selectedLists = this.recommendRmhList.filter(item => {
+            console.log(`选中状态：${item.isSelected}`)
+            return item.isSelected !== false
+          })
+          console.log(JSON.stringify(selectedLists))
+        })
+    }
+    .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() {
+    Row() {
+      Row() {
+        Image($r("app.media.redLine"))
+          .width(3)
+          .height(16)
+          .margin({ right: 4 })
+        Text('为你推荐优质号主')
+          .fontSize($r("app.float.font_size_17"))
+          .fontColor($r("app.color.color_222222"))
+          .fontWeight(600)
+      }
+
+      Row() {
+        Text("换一换")
+          .fontSize($r("app.float.font_size_14"))
+          .fontColor($r("app.color.color_999999"))
+          .margin({ right: 1 })
+        Image($r("app.media.ic_refresh"))
+          .width(14)
+          .height(14)
+          .onClick(() => {
+            // TODO 通知父组件，重新查询推荐数据
+          })
+      }
+      .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: RmhInfo
+  @Prop index: number
+  @Link list: RmhInfo[]
+  @Link selectedCount: number;
+  @State isSelected: boolean = true;
+
+  getSelectedCount() {
+    const selected = this.list.filter(item => {
+      return item.isSelected !== false
+    })
+    this.selectedCount = selected.length
+  }
+
+  aboutToAppear(): void {
+    this.getSelectedCount()
+  }
+
+  build() {
+    Column() {
+      Stack() {
+        Image(this.item.headPhotoUrl)
+          .width(44)
+          .height(44)
+        if (this.isSelected) {
+          Image($r('app.media.MyCollection_selected_icon'))
+            .width(16)
+            .height(16)
+        } else {
+          Image($r('app.media.ic_succeed_refresh'))
+            .width(16)
+            .height(16)
+        }
+      }
+      .margin({ top: 2, bottom: 5 })
+      .alignContent(Alignment.BottomEnd)
+
+      Flex({ justifyContent: FlexAlign.Center }) {
+        Text(this.item.userName)
+          .fontColor($r('app.color.color_222222'))
+          .fontSize($r('app.float.font_size_14'))
+          .fontWeight(500)
+          .textOverflowStyle(1)
+          .textAlign(TextAlign.Center)
+        Image(this.item.authIcon)
+          .width(14)
+          .height(14)
+          .borderRadius(50)
+          .flexShrink(0)
+      }
+      .width(CommonConstants.FULL_WIDTH)
+
+      Text(this.item.introduction)
+        .fontColor($r('app.color.color_B0B0B0'))
+        .fontSize($r('app.float.font_size_12'))
+        .margin({ top: 8, bottom: 14 })
+        .textOverflowStyle(2)
+        .textAlign(TextAlign.Center)
+    }
+    .padding({ left: 6, right: 6 })
+    .width('100%')
+    .onClick(() => {
+      // 选中或者取消选中
+      this.isSelected = !this.isSelected
+      this.list[this.index].isSelected = this.isSelected
+      this.getSelectedCount()
+    })
+  }
+}