人民号横划卡开发

@@ -4,7 +4,7 @@ import { VideoInfoDTO } from '../detail/VideoInfoDTO';
 import { InteractDataDTO } from './InteractDataDTO';
 import { InteractDataDTO } from './InteractDataDTO';
 import { slideShows } from '../morningevening/slideShows';
 import { slideShows } from '../morningevening/slideShows';
 import { VoiceInfoDTO } from '../detail/VoiceInfoDTO';
 import { VoiceInfoDTO } from '../detail/VoiceInfoDTO';
-
+import { RmhInfoDTO } from '../detail/RmhInfoDTO'
 export interface ContentDTO {
 export interface ContentDTO {
   appStyle: string;
   appStyle: string;
   cityCode: string;
   cityCode: string;
@@ -66,4 +66,5 @@ export interface ContentDTO {
   slideShows: slideShows[],
   slideShows: slideShows[],
   voiceInfo: VoiceInfoDTO,
   voiceInfo: VoiceInfoDTO,
   tagWord: number,
   tagWord: number,
+  rmhInfo: RmhInfoDTO, // 人民号信息
 }
 }

@@ -15,13 +15,29 @@ export struct ZhSingleColumn05 {
 
 
   build() {
   build() {
     Row() {
     Row() {
-      Image($r('app.media.rmh_join_log'))
-        .height(18)
-        .margin({ right: 10 })
-      Text('快速入住通道')
-      Image($r('app.media.arrow_icon_right'))
-        .width(16)
-        .height(16)
+      Row(){
+        Image($r('app.media.rmh_join_log'))
+          .height(18)
+          .margin({ right: 10 })
+        Text('快速入住通道')
+        Image($r('app.media.arrow_icon_right'))
+          .width(16)
+          .height(16)
+      }
+      .padding(10)
+      .width(CommonConstants.FULL_WIDTH)
+      .backgroundColor($r('app.color.color_F9F9F9'))
+      .justifyContent(FlexAlign.Center)
+      .borderRadius($r('app.float.button_border_radius'))
+      .onClick(() => {
+        let taskAction: Action = {
+          type: 'JUMP_H5_BY_WEB_VIEW',
+          params: {
+            url: this.compDTO.linkUrl
+          } as Params,
+        };
+        WDRouterRule.jumpWithAction(taskAction)
+      })
     }
     }
     .width(CommonConstants.FULL_WIDTH)
     .width(CommonConstants.FULL_WIDTH)
     .padding({
     .padding({
@@ -30,17 +46,7 @@ export struct ZhSingleColumn05 {
       top: $r('app.float.card_comp_pagePadding_tb'),
       top: $r('app.float.card_comp_pagePadding_tb'),
       bottom: $r('app.float.card_comp_pagePadding_tb')
       bottom: $r('app.float.card_comp_pagePadding_tb')
     })
     })
-    .backgroundColor($r('app.color.color_fff'))
-    .justifyContent(FlexAlign.Center)
-    .onClick(() => {
-      let taskAction: Action = {
-        type: 'JUMP_H5_BY_WEB_VIEW',
-        params: {
-          url: this.compDTO.linkUrl
-        } as Params,
-      };
-      WDRouterRule.jumpWithAction(taskAction)
-    })
+
   }
   }
 }
 }
 
 

+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-05
+ */
+const TAG = 'Zh_Single_Row-05'
+
+@Entry
+@Component
+export struct ZhSingleRow05 {
+  @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'
+    //     }
+    //   },
+    // ]
+  } as CompDTO
+
+  build() {
+    Column() {
+      //顶部
+      this.CompHeader(this.compDTO)
+      Row(){
+        // 列表内容
+        List({ space: 8 }) {
+          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(170)
+    }
+    .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() {
+        Image(this.item.rmhInfo.rmhHeadUrl)
+          .width(44)
+          .height(44)
+          .margin({ top: 12, bottom: 8 })
+        Text(this.item.rmhInfo.rmhName)
+          .fontColor($r('app.color.color_222222'))
+          .fontSize($r('app.float.font_size_14'))
+          .fontWeight(500)
+          .textOverflowStyle(1)
+        Text(this.item.rmhInfo.rmhDesc)
+          .fontColor($r('app.color.color_B0B0B0'))
+          .fontSize($r('app.float.font_size_12'))
+          .margin({ top: 8, bottom: 14 })
+          .textOverflowStyle(2)
+        if (!this.rmhIsAttention) {
+          Text('关注')
+            .width(60)
+            .height(24)
+            .textAlign(TextAlign.Center)
+            .fontSize($r('app.float.font_size_12'))
+            .borderRadius($r('app.float.button_border_radius'))
+            .backgroundColor($r('app.color.color_ED2800'))
+            .fontColor($r('app.color.color_fff'))
+            .onClick(() => {
+              this.handleAccention(this.item, 1)
+            })
+        } else {
+          Text('已关注')
+            .width(60)
+            .height(24)
+            .borderWidth(1)
+            .textAlign(TextAlign.Center)
+            .fontSize($r('app.float.font_size_12'))
+            .borderRadius($r('app.float.button_border_radius'))
+            .borderColor($r('app.color.color_CCCCCC'))
+            .fontColor($r('app.color.color_CCCCCC'))
+            .onClick(() => {
+              this.handleAccention(this.item, 0)
+            })
+        }
+
+      }
+      .width(100)
+      .height(170)
+      .padding({ left: 6, right: 6 })
+      .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
+      }
+    })
+  }
+}