精选评论卡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 = {
+    objectTitle: '大标题',
+    operDataList: [
+      {
+        rmhInfo: {
+          rmhId: '2489729',
+          rmhName: '陕西青年职业学院',
+          rmhDesc: '陕西青年职业学院陕西青年职业学院是经陕西省人民政陕西青年职业学院是经陕西省人民政是经陕西省人民政',
+          rmhHeadUrl: 'https://cdnjdphoto.aikan.pdnews.cn//upload/ueditor/image/20210113/a_533807397399949312' +
+            '.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg'
+        }
+      },
+      {
+        rmhInfo: {
+          rmhId: '2489729',
+          rmhName: '陕西青年职业学院',
+          rmhDesc: '陕西青年职业学院陕西青年职业学院是经陕西省人民政陕西青年职业学院是经陕西省人民政是经陕西省人民政',
+          rmhHeadUrl: 'https://cdnjdphoto.aikan.pdnews.cn//upload/ueditor/image/20210113/a_533807397399949312' +
+            '.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg'
+        }
+      },
+      {
+        rmhInfo: {
+          rmhId: '2489729',
+          rmhName: '陕西青年职业学院',
+          rmhDesc: '陕西青年职业学院陕西青年职业学院是经陕西省人民政陕西青年职业学院是经陕西省人民政是经陕西省人民政',
+          rmhHeadUrl: 'https://cdnjdphoto.aikan.pdnews.cn//upload/ueditor/image/20210113/a_533807397399949312' +
+            '.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg'
+        }
+      },
+      {
+        rmhInfo: {
+          rmhId: '2489729',
+          rmhName: '陕西青年职业学院',
+          rmhDesc: '陕西青年职业学院陕西青年职业学院是经陕西省人民政陕西青年职业学院是经陕西省人民政是经陕西省人民政',
+          rmhHeadUrl: 'https://cdnjdphoto.aikan.pdnews.cn//upload/ueditor/image/20210113/a_533807397399949312' +
+            '.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg'
+        }
+      },
+      {
+        rmhInfo: {
+          rmhId: '2489729',
+          rmhName: '陕西青年职业学院',
+          rmhDesc: '陕西青年职业学院陕西青年职业学院是经陕西省人民政陕西青年职业学院是经陕西省人民政是经陕西省人民政',
+          rmhHeadUrl: 'https://cdnjdphoto.aikan.pdnews.cn//upload/ueditor/image/20210113/a_533807397399949312' +
+            '.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg'
+        }
+      },
+    ]
+  } as CompDTO
+
+  build() {
+    Column() {
+      //顶部
+      this.CompHeader(this.compDTO)
+      Row(){
+        // 列表内容
+        List() {
+          ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
+            CreatorItem({
+              item
+            })
+              .margin({right: index === this.compDTO.operDataList.length - 1 ? $r('app.float.card_comp_pagePadding_lf') : 0})
+          })
+        }
+        .listDirection(Axis.Horizontal)
+      }
+      .width(CommonConstants.FULL_WIDTH)
+      .height(208)
+    }
+    .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_elite_comment"))
+          .width(24)
+          .height(24)
+          .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.more"))
+          .width(14)
+          .height(14)
+          .onClick(() => {
+            // TODO 跳转的页面，定义的入参可能不合理。推荐id: 41
+            let params: Params = {
+              pageID: "1"
+            }
+            WDRouterRule.jumpWithPage(WDRouterPage.followListPage, params)
+          })
+      }
+      .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
+      }
+    })
+  }
+}