小视频横划卡

+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-02
+ */
+const TAG = 'Zh_Single_Row-02'
+
+@Entry
+@Component
+export struct ZhSingleRow02 {
+  @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.redLine"))
+          .width(3)
+          .height(16)
+          .margin({ right: 4 })
+        Text(item.objectTitle)
+          .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() {
+        Stack({ alignContent: Alignment.Bottom }) {
+          Image('')
+            .width(156)
+            .height(208)
+          Row()
+            .width(156)
+            .height(80)
+            .linearGradient({
+              direction: GradientDirection.Bottom,
+              colors: [[0xffffff, 0.0], [0x000000, 1.0]]
+            })
+            .opacity(0.3)
+          Text('这里显示卡片标题这里显示卡片标题这里显示卡片标题这里显示卡片标题这里显示卡片标题')
+            .fontColor(0xffffff)
+            .fontSize(14)
+            .maxLines(2)
+            .textOverflow({overflow: TextOverflow.Ellipsis})
+            .width(140)
+            .height(40)
+            .margin({bottom: 8})
+        }
+
+      }
+      .width(156)
+      .height(208)
+      .margin({ right: 11 })
+      .borderWidth(1)
+      .borderColor($r('app.color.color_EDEDED'))
+      .borderRadius($r('app.float.image_border_radius'))
+    }
+    .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
+      }
+    })
+  }
+}