feat：直播预告和直播列表，默认图

liyubing
Commit e1c14eb6a301042bb1cc81dcaae36f54af8652ee e1c14eb6 1 parent fe57160c
Showing 5 changed files with 129 additions and 81 deletions
sight_harmony/features/wdComponent/src/main/ets/components/mine/appointment/AppointmentListChildComponent.ets
sight_harmony/features/wdComponent/src/main/ets/components/page/LiveMorePage.ets
sight_harmony/features/wdComponent/src/main/ets/components/reserveMore/ReserveMorePage.ets
sight_harmony/features/wdComponent/src/main/ets/viewmodel/PageHelper.ets
sight_harmony/features/wdComponent/src/main/resources/base/element/color.json
--- a/sight_harmony/features/wdComponent/src/main/ets/components/mine/appointment/AppointmentListChildComponent.ets
View file @e1c14eb
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/mine/appointment/AppointmentListChildComponent.ets
View file @e1c14eb
 import MinePageDatasModel from '../../../model/MinePageDatasModel'
+import { onlyWifiLoadImg } from '../../../utils/lazyloadImg'
 import { AppointmentOperationRequestItem } from '../../../viewmodel/AppointmentOperationRequestItem'
 import { MineAppointmentItem } from '../../../viewmodel/MineAppointmentItem'
 import { MyCustomDialog } from '../../reusable/MyCustomDialog'
 @Component
-export struct AppointmentListChildComponent{
+export struct AppointmentListChildComponent {
   @ObjectLink item: MineAppointmentItem
+  @State loadImg: boolean = false;
+
+  async aboutToAppear(): Promise<void> {
+    this.loadImg = await onlyWifiLoadImg();
+  }
+
   dialogController: CustomDialogController = new CustomDialogController({
     builder: MyCustomDialog({
       cancel: this.onCancel,
@@ -20,18 +27,20 @@ export struct AppointmentListChildComponent{
     customStyle: true
   })
-
   build() {
-    Column(){
-      Stack(){
-        Image(this.item?.imageUrl[0])
+    Column() {
+      Stack() {
+        Image(this.loadImg ? this.item?.imageUrl[0] : '')
+          .backgroundColor(this.loadImg ? $r('app.color.color_B0B0B0') : 0xf5f5f5)
+          .width('100%')
+          .aspectRatio(16 / 9)
           .objectFit(ImageFit.Auto)
           .interpolation(ImageInterpolation.High)
-        if(this.item.relType === 1){
-          Row(){
-            Row(){
+        if (this.item.relType === 1) {
+          Row() {
+            Row() {
               Image($r('app.media.reserve_icon'))
                 .width('42lpx')
                 .height('35lpx')
@@ -47,7 +56,7 @@ export struct AppointmentListChildComponent{
                 .layoutWeight(1)
                 .textAlign(TextAlign.Center)
             }.width('94lpx')
-            .margin({bottom:'15lpx',right:'15lpx'})
+            .margin({ bottom: '15lpx', right: '15lpx' })
           }.width('100%')
           .height('100%')
           .alignItems(VerticalAlign.Bottom)
@@ -56,7 +65,7 @@ export struct AppointmentListChildComponent{
       }.width('100%')
       .height('376lpx')
-      Column(){
+      Column() {
         Text(this.item.title)
           .fontWeight('400lpx')
           .fontSize('33lpx')
@@ -64,28 +73,28 @@ export struct AppointmentListChildComponent{
           .lineHeight('48lpx')
           .maxLines(2)
           .textOverflow({ overflow: TextOverflow.Ellipsis })
-          .margin({bottom:'23lpx'})
+          .margin({ bottom: '23lpx' })
           .textAlign(TextAlign.Start)
           .width('100%')
-        Row(){
-          Row(){
-            if(this.item.relType === 2){
+        Row() {
+          Row() {
+            if (this.item.relType === 2) {
               Image($r('app.media.play_status_history_icon'))
                 .objectFit(ImageFit.Auto)
                 .interpolation(ImageInterpolation.High)
                 .width('38lpx')
                 .height('38lpx')
-                .margin({right:'12lpx'})
+                .margin({ right: '12lpx' })
               Text('已结束').fontColor($r('app.color.color_999999'))
                 .fontWeight('500lpx')
                 .fontSize('23lpx')
-            }else {
+            } else {
               Image($r('app.media.play_status_icon'))
                 .objectFit(ImageFit.Auto)
                 .interpolation(ImageInterpolation.High)
                 .width('38lpx')
                 .height('38lpx')
-                .margin({right:'12lpx'})
+                .margin({ right: '12lpx' })
               Text(this.item.timePre).fontColor($r('app.color.color_ED2800'))
                 .fontWeight('500lpx')
                 .fontSize('23lpx')
@@ -94,35 +103,37 @@ export struct AppointmentListChildComponent{
                 .interpolation(ImageInterpolation.High)
                 .width('12lpx')
                 .height('31lpx')
-                .margin({right:'4lpx'})
+                .margin({ right: '4lpx' })
               Text(`${this.item.timeBack}开始`).fontColor($r('app.color.color_ED2800'))
                 .fontWeight('500lpx')
                 .fontSize('23lpx')
                 .lineHeight('31lpx')
             }
-          }.padding({left:'19lpx',right:'19lpx'})
+          }
+          .padding({ left: '19lpx', right: '19lpx' })
           .height('46lpx')
           .alignItems(VerticalAlign.Center)
           .backgroundColor($r('app.color.color_F5F5F5'))
           .borderRadius('4lpx')
+
           Blank()
-          .layoutWeight(1)
-          if(this.item.relType === 1){
-              Text(this.item.isAppointment?"已预约":"预约")
-                .fontWeight(400)
-                .fontSize('23lpx')
-                .backgroundColor(this.item.isAppointment?$r('app.color.color_F5F5F5'):$r('app.color.color_ED2800'))
-                .fontColor(this.item.isAppointment?$r('app.color.color_CCCCCC'):$r('app.color.white'))
-                .lineHeight('31lpx')
-                .textAlign(TextAlign.Center)
-                .width('100lpx')
-                .height('46lpx')
-                .borderRadius('6lpx')
-                .onClick(()=>{
-                  this.dialogController.open()
-                })
-          }else {
-            Text(this.item.relType === 2?"去观看":"看回放")
+            .layoutWeight(1)
+          if (this.item.relType === 1) {
+            Text(this.item.isAppointment ? "已预约" : "预约")
+              .fontWeight(400)
+              .fontSize('23lpx')
+              .backgroundColor(this.item.isAppointment ? $r('app.color.color_F5F5F5') : $r('app.color.color_ED2800'))
+              .fontColor(this.item.isAppointment ? $r('app.color.color_CCCCCC') : $r('app.color.white'))
+              .lineHeight('31lpx')
+              .textAlign(TextAlign.Center)
+              .width('100lpx')
+              .height('46lpx')
+              .borderRadius('6lpx')
+              .onClick(() => {
+                this.dialogController.open()
+              })
+          } else {
+            Text(this.item.relType === 2 ? "去观看" : "看回放")
               .fontWeight(400)
               .fontSize('23lpx')
               .backgroundColor($r('app.color.color_ED2800'))
@@ -135,7 +146,12 @@ export struct AppointmentListChildComponent{
           }
         }
       }
-      .padding({left:'23lpx',right:'23lpx',top:'15lpx',bottom:'23lpx'})
+      .padding({
+        left: '23lpx',
+        right: '23lpx',
+        top: '15lpx',
+        bottom: '23lpx'
+      })
     }.margin({ left: 10, right: 10 })
     .backgroundColor($r('app.color.white'))
     .borderRadius('8lpx')
@@ -145,20 +161,19 @@ export struct AppointmentListChildComponent{
     console.info('Callback when the first button is clicked')
   }
-  onAccept(){
+  onAccept() {
     console.info('Callback when the second button is clicked')
     this.appointmentOperation()
   }
-  appointmentOperation(){
-    let item = new AppointmentOperationRequestItem(this.item.relId,this.item.liveId+"",!this.item.isAppointment)
-    MinePageDatasModel.getAppointmentOperation(item,getContext(this)).then((value)=>{
-      if(value!=null){
+  appointmentOperation() {
+    let item = new AppointmentOperationRequestItem(this.item.relId, this.item.liveId + "", !this.item.isAppointment)
+    MinePageDatasModel.getAppointmentOperation(item, getContext(this)).then((value) => {
+      if (value != null) {
         if (value.code === 0 || value.code.toString() === "0") {
           this.item.isAppointment = !this.item.isAppointment
         }
       }
     })
   }
-
 }
--- a/sight_harmony/features/wdComponent/src/main/ets/components/page/LiveMorePage.ets
View file @e1c14eb
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/page/LiveMorePage.ets
View file @e1c14eb
@@ -12,6 +12,7 @@ import LoadMoreLayout from '../page/LoadMoreLayout';
 import { LottieView } from '../../components/lottie/LottieView';
 import dataPreferences from '@ohos.data.preferences';
 import { BusinessError } from '@ohos.base';
+import { onlyWifiLoadImg } from '../../utils/lazyloadImg';
 const TAG: string = 'LiveMorePage';
@@ -45,8 +46,12 @@ struct LiveMorePage {
   // 点击过的数据
   @State clickDatas: Array<string> = []
-  async aboutToAppear() {
+  @State loadImg: boolean = false;
+
+
+  async aboutToAppear() : Promise<void>{
     await this.getPreferencesFromStorage()
+    this.loadImg = await onlyWifiLoadImg();
     this.getLivMoreClickPreference()
     Logger.debug(TAG, '数据：' + JSON.stringify(this.clickDatas))
     this.currentPage = 1
@@ -155,9 +160,10 @@ struct LiveMorePage {
         .fontColor(this.isClicked(item.objectId) ? $r('app.color.color_848484') : $r('app.color.color_222222'))
       Stack() {
         if (item.fullColumnImgUrls && item.fullColumnImgUrls.length > 0) {
-          Image(item.fullColumnImgUrls[0].url)
+          Image(this.loadImg?item.fullColumnImgUrls[0].url:'')
+            .backgroundColor(this.loadImg ? $r('app.color.color_B0B0B0') : 0xf5f5f5)
             .width('100%')
-            .height(196)
+            .aspectRatio(16 / 9)
             .borderRadius(4)
         }
         this.LiveImage(item)
--- a/sight_harmony/features/wdComponent/src/main/ets/components/reserveMore/ReserveMorePage.ets
View file @e1c14eb
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/reserveMore/ReserveMorePage.ets
View file @e1c14eb
 import { ContentDTO, ReserveBean, ReserveItemBean } from 'wdBean/Index';
 import { ProcessUtils } from 'wdRouter/Index';
 import PageViewModel from '../../viewmodel/PageViewModel';
-import {  Logger, EmitterEventId, EmitterUtils, ToastUtils } from 'wdKit/Index';
+import { Logger, EmitterEventId, EmitterUtils, ToastUtils } from 'wdKit/Index';
 import { router } from '@kit.ArkUI';
 import { LiveModel } from '../../viewmodel/LiveModel';
 import { ViewType } from 'wdConstant/src/main/ets/enum/ViewType';
@@ -9,10 +9,11 @@ import { EmptyComponent } from '../view/EmptyComponent';
 import { ErrorComponent } from '../view/ErrorComponent';
 import { CustomPullToRefresh } from '../reusable/CustomPullToRefresh';
 import { PeopleShipNoMoreData } from '../reusable/PeopleShipNoMoreData';
-import {  HttpUtils } from 'wdNetwork/Index';
+import { HttpUtils } from 'wdNetwork/Index';
 import { WDRouterPage, WDRouterRule } from 'wdRouter'
-import {  LazyDataSource } from 'wdKit/Index';
+import { LazyDataSource } from 'wdKit/Index';
 import LoadMoreLayout from '../page/LoadMoreLayout'
+import { onlyWifiLoadImg } from '../../utils/lazyloadImg';
 const TAG: string = 'ReserveMorePage';
@@ -43,11 +44,12 @@ struct ReserveMorePage {
   private scroller: Scroller = new Scroller()
   @State reservedIds: string[] = []
   @State isShow: boolean = false
-  @State private  liveId: string = ''
+  @State private liveId: string = ''
   @State isLoadingAttention: boolean = false
+  @State loadImg: boolean = false;
   build() {
-    Column(){
+    Column() {
       this.TabbarNormal()
       if (this.viewType == ViewType.LOADING) {
         this.LoadingLayout()
@@ -85,7 +87,7 @@ struct ReserveMorePage {
   @Builder
   ListLayout() {
-    List({scroller: this.scroller}) {
+    List({ scroller: this.scroller }) {
       // 下拉刷新
       LazyForEach(this.data, (contentDTO: ContentDTO, index: number) => {
         ListItem() {
@@ -110,7 +112,7 @@ struct ReserveMorePage {
     .height('calc(100% - 44vp)')
     .onReachEnd(() => {
       Logger.debug(TAG, "触底了");
-      if(!this.isLoading && this.hasMore){
+      if (!this.isLoading && this.hasMore) {
         //加载分页数据
         this.currentPage++;
         this.getData()
@@ -127,9 +129,13 @@ struct ReserveMorePage {
   buildItem(item: ContentDTO, index: number) {
     Column() {
       Stack() {
-        Image(item.fullColumnImgUrls[0]?.url)
+        Image(this.loadImg ? item.fullColumnImgUrls[0]?.url : '')
           .width('100%')
+          .aspectRatio(16 / 9)
+          .backgroundColor(this.loadImg ? $r('app.color.color_B0B0B0') : $r('app.color.color_33A3A3A3'))
           .objectFit(ImageFit.Contain)
+          .borderWidth(0.5)
+          .borderColor($r('app.color.color_0D000000'))
           .borderRadius({
             topLeft: '4vp',
             topRight: '4vp'
@@ -152,7 +158,12 @@ struct ReserveMorePage {
             Image($r('app.media.reserve_play_icon'))
               .width(20)
               .height(20)
-              .margin({ left: 10, top: 2, bottom: 2, right: 6 })
+              .margin({
+                left: 10,
+                top: 2,
+                bottom: 2,
+                right: 6
+              })
             Text(this.getReserveDate(item.liveInfo.liveStartTime, 1))
               .fontSize(12)
@@ -190,7 +201,8 @@ struct ReserveMorePage {
             .width(20)
             .height(20)
             .color(!this.isReserved(item) ? $r('app.color.color_fff') : $r('app.color.color_CCCCCC'))
-            .visibility((this.isLoadingAttention && this.liveId == item.objectId) ? Visibility.Visible : Visibility.None)
+            .visibility((this.isLoadingAttention && this.liveId == item.objectId) ? Visibility.Visible :
+            Visibility.None)
           Text(!this.isReserved(item) ? '预约' : '已预约')
             .fontSize($r('app.float.vp_12'))
@@ -199,14 +211,21 @@ struct ReserveMorePage {
             .width('100%')
             .height('100%')
             .textAlign(TextAlign.Center)
-            .visibility((this.isLoadingAttention && this.liveId == item.objectId)  ? Visibility.None : Visibility.Visible)
+            .visibility((this.isLoadingAttention && this.liveId == item.objectId) ? Visibility.None :
+            Visibility.Visible)
             .margin({
               right: '10vp'
             })
+            .textShadow({
+              radius: 2,
+              color: 'rgba(0,0,0,0.3)',
+              offsetY: 2
+            })
             .backgroundColor(!this.isReserved(item) ? $r('app.color.color_ED2800') : $r('app.color.color_F5F5F5'))
             .borderRadius(3)
-        }.onClick(() => {
+        }
+        .onClick(() => {
           this.bookAndCancel(item)
         })
         .justifyContent(FlexAlign.Center)
@@ -214,7 +233,7 @@ struct ReserveMorePage {
         .borderRadius(3)
         .width('52vp')
         .height('24vp')
-        .margin({right: 12})
+        .margin({ right: 12 })
       }
       .width('100%')
@@ -285,12 +304,18 @@ struct ReserveMorePage {
         .fontSize('12vp')
         .fontWeight(400)
         .fontColor(Color.White)
+        .textShadow({
+          radius: 2,
+          color: 'rgba(0,0,0,0.3)',
+          offsetY: 2
+        })
     }
     .backgroundColor(Color.Transparent)
     .margin({ right: 8, bottom: 8 })
   }
   async aboutToAppear(): Promise<void> {
+    this.loadImg = await onlyWifiLoadImg();
     // PageViewModel.get
     this.currentPage = 1
     this.getData()
@@ -301,24 +326,24 @@ struct ReserveMorePage {
     })
     // 获取预约
-    EmitterUtils.receiveEvent(EmitterEventId.LIVE_ROOM_SUBSCRIBE,  (str?: string) => {
+    EmitterUtils.receiveEvent(EmitterEventId.LIVE_ROOM_SUBSCRIBE, (str?: string) => {
       Logger.debug(TAG, 'receiveEvent LIVE_ROOM_SUBSCRIBE: ' + str)
       if (str) {
         // 跳转指定频道场景，传参底导id、频道id
         const model: ReserveItemBean = JSON.parse(str)
-        Logger.debug(TAG,'是否关注元数据0：' +` ${model.liveId}`)
-        if (model &&  model.liveId && this.reserveList) {
+        Logger.debug(TAG, '是否关注元数据0：' + ` ${model.liveId}`)
+        if (model && model.liveId && this.reserveList) {
           // 修改源数据
           this.reserveList.forEach((element) => {
             if (element.liveId == model.liveId) {
               if (element && element.subscribe != model.subscribe) {
-                Logger.debug(TAG,'是否关注元数据2：' +` ${JSON.stringify(element.subscribe)}`)
+                Logger.debug(TAG, '是否关注元数据2：' + ` ${JSON.stringify(element.subscribe)}`)
                 element.subscribe = !element.subscribe
-                Logger.debug(TAG,'是否关注元数据3：' +` ${JSON.stringify(element.subscribe)}`)
+                Logger.debug(TAG, '是否关注元数据3：' + ` ${JSON.stringify(element.subscribe)}`)
                 this.isShow = true
                 if (element.subscribe) {
                   this.reservedIds.push(element.liveId.toString())
-                }else {
+                } else {
                   const num = this.reservedIds.indexOf(element.liveId.toString())
                   if (num >= 0 && num < this.reservedIds.length) {
                     this.reservedIds.splice(num, 1)
@@ -364,14 +389,14 @@ struct ReserveMorePage {
         this.data.push(...liveReviewDTO.list)
         //批量查询关注状态
         this.getAppointmentInfo(liveReviewDTO.list)
-      } else  {
+      } else {
         this.hasMore = false;
       }
       this.resolveEnd(true, resolve)
       if (liveReviewDTO.list.length == 0 && this.currentPage == 1) {
         this.viewType = ViewType.EMPTY
       }
-    }catch (exception) {
+    } catch (exception) {
       this.resolveEnd(false, resolve)
     }
     // PageViewModel.getLiveMoreUrl(this.type, this.currentPage, this.pageSize).then(async (liveReviewDTO) => {
@@ -387,7 +412,7 @@ struct ReserveMorePage {
     if (resolve) {
       if (this.currentPage == 1 && isTop) {
         resolve('已更新至最新')
-      }else  {
+      } else {
         resolve('')
       }
     }
@@ -402,9 +427,9 @@ struct ReserveMorePage {
   async getAppointmentInfo(list: ContentDTO[]) {
     if (HttpUtils.getUserId()) {
       const reserveBean = this.transformToLiveDetailsBeans(list)
-      Logger.debug(TAG,'是否预约数据：' +` ${JSON.stringify(reserveBean)}`)
+      Logger.debug(TAG, '是否预约数据：' + ` ${JSON.stringify(reserveBean)}`)
       LiveModel.getAppointmentStatus(reserveBean).then((result) => {
-        Logger.debug(TAG,'是否预约数据：' +` ${JSON.stringify(result)}`)
+        Logger.debug(TAG, '是否预约数据：' + ` ${JSON.stringify(result)}`)
         if (result && result.length > 0) {
           this.reserveList.push(...result)
           // this.reserveStatus = res;
@@ -414,10 +439,10 @@ struct ReserveMorePage {
             }
           })
         }
-      }).catch(() =>{
+      }).catch(() => {
         // this.data.push(...list)
       })
-    }else {
+    } else {
       // this.data.push(...list)
     }
@@ -463,18 +488,19 @@ struct ReserveMorePage {
         this.isLoadingAttention = true
         this.liveId = reserveItem.liveId.toString()
         try {
-          const res = await LiveModel.liveAppointment(reserveItem.relationId, reserveItem.liveId.toString(),  !reserveItem.subscribe);
+          const res = await LiveModel.liveAppointment(reserveItem.relationId, reserveItem.liveId.toString(),
+            !reserveItem.subscribe);
           if (res.code == 0) {
             ToastUtils.shortToast(!reserveItem.subscribe ? '预约成功' : '取消预约成功')
             // 修改源数据
             this.reserveList.forEach((element) => {
               if (element.liveId.toString() == item.objectId) {
-                Logger.debug(TAG,'是否关注元数据：' +` ${JSON.stringify(element.subscribe)}`)
+                Logger.debug(TAG, '是否关注元数据：' + ` ${JSON.stringify(element.subscribe)}`)
                 element.subscribe = !element.subscribe
-                Logger.debug(TAG,'是否关注元数据1：' +` ${JSON.stringify(element.subscribe)}`)
+                Logger.debug(TAG, '是否关注元数据1：' + ` ${JSON.stringify(element.subscribe)}`)
                 if (element.subscribe) {
                   this.reservedIds.push(element.liveId.toString())
-                }else {
+                } else {
                   const num = this.reservedIds.indexOf(element.liveId.toString())
                   if (num >= 0 && num < this.reservedIds.length) {
                     this.reservedIds.splice(num, 1)
@@ -490,7 +516,7 @@ struct ReserveMorePage {
           this.liveId = ''
           this.isLoadingAttention = false
         }
-      }else {
+      } else {
         this.liveId = ''
         this.isLoadingAttention = false
       }
@@ -509,7 +535,7 @@ struct ReserveMorePage {
     if (type === 1) {
       // 如果是今天
-      if (eventDateTime.setHours(0,0,0,0) === currentDateTime.setHours(0,0,0,0)) {
+      if (eventDateTime.setHours(0, 0, 0, 0) === currentDateTime.setHours(0, 0, 0, 0)) {
         return `今天`;
       } else {
         // 如果事件不在今天
@@ -521,6 +547,4 @@ struct ReserveMorePage {
       return `${eventTimeStr}`;
     }
   }
-
-
 }
--- a/sight_harmony/features/wdComponent/src/main/ets/viewmodel/PageHelper.ets
View file @e1c14eb
+++ b/sight_harmony/features/wdComponent/src/main/ets/viewmodel/PageHelper.ets
View file @e1c14eb
@@ -409,6 +409,8 @@ export class PageHelper {
     // 批查直播观看人数
     this.getLiveRoomDataInfo(compList)
+    //
+
     // 测试数据
     // setTimeout(() => {
--- a/sight_harmony/features/wdComponent/src/main/resources/base/element/color.json
View file @e1c14eb
+++ b/sight_harmony/features/wdComponent/src/main/resources/base/element/color.json
View file @e1c14eb
@@ -177,6 +177,7 @@
     {
       "name": "color_848484",
       "value": "#848484"
-    }
+    },
+    {"name": "color_33A3A3A3","value": "#33A3A3A3"}
   ]
 }