Merge remote-tracking branch 'origin/main' into main
Showing
37 changed files
with
868 additions
and
268 deletions
| @@ -34,11 +34,10 @@ export struct ENewspaperItemComponent { | @@ -34,11 +34,10 @@ export struct ENewspaperItemComponent { | ||
| 34 | .visibility(this.isShowSkeleton ? Visibility.Visible : Visibility.None) | 34 | .visibility(this.isShowSkeleton ? Visibility.Visible : Visibility.None) |
| 35 | Image(this.newspaperListItemBean.pagePic) | 35 | Image(this.newspaperListItemBean.pagePic) |
| 36 | .width('100%') | 36 | .width('100%') |
| 37 | - .aspectRatio(378 / 566) | ||
| 38 | - .objectFit(ImageFit.Fill) | ||
| 39 | .onComplete(() => { | 37 | .onComplete(() => { |
| 40 | this.isShowSkeleton = false | 38 | this.isShowSkeleton = false |
| 41 | }) | 39 | }) |
| 40 | + .objectFit(ImageFit.Fill) | ||
| 42 | .visibility(this.isShowSkeleton ? Visibility.None : Visibility.Visible) | 41 | .visibility(this.isShowSkeleton ? Visibility.None : Visibility.Visible) |
| 43 | 42 | ||
| 44 | Canvas(this.context) | 43 | Canvas(this.context) |
| @@ -49,7 +48,7 @@ export struct ENewspaperItemComponent { | @@ -49,7 +48,7 @@ export struct ENewspaperItemComponent { | ||
| 49 | 48 | ||
| 50 | }) | 49 | }) |
| 51 | } | 50 | } |
| 52 | - .padding({ top: 16, right: 16, bottom: 16, left: 16 }) | 51 | + .padding({ top:14, right: 10, bottom: 14, left: 10 }) |
| 53 | .margin({ left: 10, right: 10 }) | 52 | .margin({ left: 10, right: 10 }) |
| 54 | .backgroundColor(Color.White) | 53 | .backgroundColor(Color.White) |
| 55 | .width('100%') | 54 | .width('100%') |
| @@ -28,6 +28,8 @@ export struct ENewspaperPageComponent { | @@ -28,6 +28,8 @@ export struct ENewspaperPageComponent { | ||
| 28 | @State swiperIndex: number = 0; | 28 | @State swiperIndex: number = 0; |
| 29 | //当前选择的日期标记 | 29 | //当前选择的日期标记 |
| 30 | @State selectDate: Date = new Date() | 30 | @State selectDate: Date = new Date() |
| 31 | + @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0 | ||
| 32 | + @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0 | ||
| 31 | 33 | ||
| 32 | //watch监听报纸页码回调 | 34 | //watch监听报纸页码回调 |
| 33 | onCurrentPageNumUpdated(): void { | 35 | onCurrentPageNumUpdated(): void { |
| @@ -102,7 +104,10 @@ export struct ENewspaperPageComponent { | @@ -102,7 +104,10 @@ export struct ENewspaperPageComponent { | ||
| 102 | //获取宽高尺寸 | 104 | //获取宽高尺寸 |
| 103 | this.screenWidth = this.displayTool.width | 105 | this.screenWidth = this.displayTool.width |
| 104 | this.picWidth = this.screenWidth - vp2px(52) | 106 | this.picWidth = this.screenWidth - vp2px(52) |
| 105 | - this.picHeight = this.picWidth * 566 / 378 | 107 | + let screenHeight = this.displayTool.height; |
| 108 | + // bottomSafeHeight 底导高度 topSafeHeight 顶导高度 44 顶部高度 60 底部高度 | ||
| 109 | + let height = screenHeight -this.bottomSafeHeight - this.topSafeHeight - vp2px(44) - vp2px(60) | ||
| 110 | + this.picHeight = height | ||
| 106 | // 默认日期 | 111 | // 默认日期 |
| 107 | const date = new Date() | 112 | const date = new Date() |
| 108 | const month = date.getMonth() + 1 | 113 | const month = date.getMonth() + 1 |
| @@ -213,10 +218,11 @@ export struct ENewspaperPageComponent { | @@ -213,10 +218,11 @@ export struct ENewspaperPageComponent { | ||
| 213 | } | 218 | } |
| 214 | .index(this.swiperIndex) | 219 | .index(this.swiperIndex) |
| 215 | .width('100%') | 220 | .width('100%') |
| 216 | - .height(px2vp(this.picHeight) + 32) | 221 | + // newspaper_shadow 44 高度 e_newspaper_content 35 margin top |
| 222 | + .height(px2vp(this.picHeight) - 44 - 35) | ||
| 217 | .vertical(true) | 223 | .vertical(true) |
| 218 | .autoPlay(false) | 224 | .autoPlay(false) |
| 219 | - .cachedCount(3) | 225 | + .cachedCount(1) |
| 220 | .indicator(false) | 226 | .indicator(false) |
| 221 | .loop(false) | 227 | .loop(false) |
| 222 | .displayCount(1) | 228 | .displayCount(1) |
| @@ -234,6 +240,7 @@ export struct ENewspaperPageComponent { | @@ -234,6 +240,7 @@ export struct ENewspaperPageComponent { | ||
| 234 | 240 | ||
| 235 | Image($r('app.media.newspaper_shadow')) | 241 | Image($r('app.media.newspaper_shadow')) |
| 236 | .height($r('app.float.vp_12')) | 242 | .height($r('app.float.vp_12')) |
| 243 | + .width('100%') | ||
| 237 | .margin({ left: 10, right: 10, top: -1 }) | 244 | .margin({ left: 10, right: 10, top: -1 }) |
| 238 | .objectFit(ImageFit.Contain) | 245 | .objectFit(ImageFit.Contain) |
| 239 | .alignRules({ | 246 | .alignRules({ |
| @@ -11,6 +11,7 @@ import { router } from '@kit.ArkUI'; | @@ -11,6 +11,7 @@ import { router } from '@kit.ArkUI'; | ||
| 11 | import { CommonConstants } from 'wdConstant/Index'; | 11 | import { CommonConstants } from 'wdConstant/Index'; |
| 12 | import { ProcessUtils } from 'wdRouter/Index'; | 12 | import { ProcessUtils } from 'wdRouter/Index'; |
| 13 | import { TrackConstants, TrackingButton, TrackingPageBrowse } from 'wdTracking/Index'; | 13 | import { TrackConstants, TrackingButton, TrackingPageBrowse } from 'wdTracking/Index'; |
| 14 | +import inputMethod from '@ohos.inputMethod'; | ||
| 14 | 15 | ||
| 15 | const TAG = 'FeedBackActivity' | 16 | const TAG = 'FeedBackActivity' |
| 16 | 17 | ||
| @@ -23,14 +24,15 @@ const TAG = 'FeedBackActivity' | @@ -23,14 +24,15 @@ const TAG = 'FeedBackActivity' | ||
| 23 | export struct FeedBackActivity { | 24 | export struct FeedBackActivity { |
| 24 | pageShowTime:number = 0; | 25 | pageShowTime:number = 0; |
| 25 | @State canSubmit: boolean = false; | 26 | @State canSubmit: boolean = false; |
| 26 | - @State textNumLabel: string = '0/500'; | ||
| 27 | - contact: string = ""; | 27 | + @State textNumLabel: number = 0; |
| 28 | email: string = ""; | 28 | email: string = ""; |
| 29 | //UI | 29 | //UI |
| 30 | scroller: Scroller = new Scroller(); | 30 | scroller: Scroller = new Scroller(); |
| 31 | 31 | ||
| 32 | @State isNetConnected: boolean = true | 32 | @State isNetConnected: boolean = true |
| 33 | 33 | ||
| 34 | + @State editValue: FeedbackTypeBean = {classifyName:''} as FeedbackTypeBean | ||
| 35 | + | ||
| 34 | @State feedbackTypeBeans: FeedbackTypeBean[] = [] as FeedbackTypeBean[] | 36 | @State feedbackTypeBeans: FeedbackTypeBean[] = [] as FeedbackTypeBean[] |
| 35 | //添加图片 | 37 | //添加图片 |
| 36 | addPic: PhotoListBean = {itemType:1} as PhotoListBean | 38 | addPic: PhotoListBean = {itemType:1} as PhotoListBean |
| @@ -107,7 +109,7 @@ export struct FeedBackActivity { | @@ -107,7 +109,7 @@ export struct FeedBackActivity { | ||
| 107 | .width(CommonConstants.FULL_WIDTH) | 109 | .width(CommonConstants.FULL_WIDTH) |
| 108 | .margin({ left: 24, top: $r('app.float.vp_12') }) | 110 | .margin({ left: 24, top: $r('app.float.vp_12') }) |
| 109 | Stack({ alignContent: Alignment.BottomEnd }) { | 111 | Stack({ alignContent: Alignment.BottomEnd }) { |
| 110 | - TextArea({ placeholder: $r('app.string.feedback_comments') }) | 112 | + TextArea({ placeholder: $r('app.string.feedback_comments'),text: this.editValue.classifyName}) |
| 111 | .width(CommonConstants.FULL_WIDTH) | 113 | .width(CommonConstants.FULL_WIDTH) |
| 112 | .height(CommonConstants.FULL_HEIGHT) | 114 | .height(CommonConstants.FULL_HEIGHT) |
| 113 | .fontColor($r('app.color.color_222222')) | 115 | .fontColor($r('app.color.color_222222')) |
| @@ -116,12 +118,20 @@ export struct FeedBackActivity { | @@ -116,12 +118,20 @@ export struct FeedBackActivity { | ||
| 116 | .placeholderFont({size:$r('app.float.font_size_13_2')}) | 118 | .placeholderFont({size:$r('app.float.font_size_13_2')}) |
| 117 | .padding({bottom:96}) | 119 | .padding({bottom:96}) |
| 118 | .backgroundColor($r('app.color.color_F5F5F5')) | 120 | .backgroundColor($r('app.color.color_F5F5F5')) |
| 121 | + .outlineColor($r('app.color.color_F5F5F5')) | ||
| 119 | .align(Alignment.TopStart) | 122 | .align(Alignment.TopStart) |
| 120 | - .maxLength(500) | ||
| 121 | .onChange((value) => { | 123 | .onChange((value) => { |
| 122 | - // Logger.debug(TAG, "onChange" + value + "/" + this.passwordContent) | ||
| 123 | - this.contact = value | ||
| 124 | - this.textNumLabel = value.length+"/500" | 124 | + if(value.length> 500){ |
| 125 | + //隐藏键盘 | ||
| 126 | + inputMethod.getController().stopInputSession(); | ||
| 127 | + ToastUtils.shortToast($r('app.string.res_feedback_commentsFail')) | ||
| 128 | + // Logger.debug(TAG, "onChange > 500 " + value) | ||
| 129 | + this.editValue = {classifyName:value.substring(0,500)} as FeedbackTypeBean | ||
| 130 | + }else{ | ||
| 131 | + this.editValue.classifyName = value | ||
| 132 | + } | ||
| 133 | + // Logger.debug(TAG, "onChange " + value) | ||
| 134 | + this.textNumLabel = value.length | ||
| 125 | this.canSubmit = this.checkSubmit() | 135 | this.canSubmit = this.checkSubmit() |
| 126 | }) | 136 | }) |
| 127 | GridRow({ | 137 | GridRow({ |
| @@ -185,9 +195,17 @@ export struct FeedBackActivity { | @@ -185,9 +195,17 @@ export struct FeedBackActivity { | ||
| 185 | }) | 195 | }) |
| 186 | } | 196 | } |
| 187 | .margin({bottom: $r('app.float.vp_12'), right: $r('app.float.vp_12'),left: $r('app.float.vp_12')}) | 197 | .margin({bottom: $r('app.float.vp_12'), right: $r('app.float.vp_12'),left: $r('app.float.vp_12')}) |
| 188 | - Text(this.textNumLabel) | 198 | + Text(){ |
| 199 | + ContainerSpan(){ | ||
| 200 | + if(this.textNumLabel<500){ | ||
| 201 | + Span(this.textNumLabel+'/500').fontColor($r('app.color.color_999999')) | ||
| 202 | + }else{ | ||
| 203 | + Span(this.textNumLabel+'').fontColor($r('app.color.color_ED2800')) | ||
| 204 | + Span('/500').fontColor($r('app.color.color_999999')) | ||
| 205 | + } | ||
| 206 | + } | ||
| 207 | + } | ||
| 189 | .margin({bottom: $r('app.float.vp_12'), right: $r('app.float.vp_11')}) | 208 | .margin({bottom: $r('app.float.vp_12'), right: $r('app.float.vp_11')}) |
| 190 | - .fontColor($r('app.color.color_999999')) | ||
| 191 | .fontSize($r('app.float.font_size_13_5')) | 209 | .fontSize($r('app.float.font_size_13_5')) |
| 192 | } | 210 | } |
| 193 | .height(200) | 211 | .height(200) |
| @@ -279,7 +297,7 @@ export struct FeedBackActivity { | @@ -279,7 +297,7 @@ export struct FeedBackActivity { | ||
| 279 | * */ | 297 | * */ |
| 280 | checkSubmit(): boolean { | 298 | checkSubmit(): boolean { |
| 281 | 299 | ||
| 282 | - if(StringUtils.isEmpty(this.contact) || this.contact.length < 10){ | 300 | + if(StringUtils.isEmpty(this.editValue.classifyName) || this.editValue.classifyName.length < 10){ |
| 283 | return false | 301 | return false |
| 284 | } | 302 | } |
| 285 | 303 | ||
| @@ -395,7 +413,7 @@ export struct FeedBackActivity { | @@ -395,7 +413,7 @@ export struct FeedBackActivity { | ||
| 395 | return | 413 | return |
| 396 | } | 414 | } |
| 397 | //内容必填 | 415 | //内容必填 |
| 398 | - if(StringUtils.isEmpty(this.contact) || this.contact.length < 10 || this.contact.length>500){ | 416 | + if(StringUtils.isEmpty(this.editValue.classifyName) || this.editValue.classifyName.length < 10 || this.editValue.classifyName.length>500){ |
| 399 | ToastUtils.shortToast($r('app.string.res_feedback_commentsFail')) | 417 | ToastUtils.shortToast($r('app.string.res_feedback_commentsFail')) |
| 400 | return | 418 | return |
| 401 | } | 419 | } |
| @@ -403,7 +421,7 @@ export struct FeedBackActivity { | @@ -403,7 +421,7 @@ export struct FeedBackActivity { | ||
| 403 | try { | 421 | try { |
| 404 | let feedBackParams: FeedBackParams = { | 422 | let feedBackParams: FeedBackParams = { |
| 405 | //反馈内容 | 423 | //反馈内容 |
| 406 | - "content": this.contact, | 424 | + "content": this.editValue.classifyName, |
| 407 | //投诉类型 id | 425 | //投诉类型 id |
| 408 | "classifyFlagIds": selectType, | 426 | "classifyFlagIds": selectType, |
| 409 | //设备 | 427 | //设备 |
| @@ -224,7 +224,7 @@ export struct MorningEveningPaperComponent { | @@ -224,7 +224,7 @@ export struct MorningEveningPaperComponent { | ||
| 224 | if (imageSource) { | 224 | if (imageSource) { |
| 225 | const pixelMap: image.PixelMap = await imageNet2PixelMap(imageSource); | 225 | const pixelMap: image.PixelMap = await imageNet2PixelMap(imageSource); |
| 226 | effectKit.createColorPicker(pixelMap, (err, colorPicker) => { | 226 | effectKit.createColorPicker(pixelMap, (err, colorPicker) => { |
| 227 | - let color = colorPicker.getMainColorSync(); | 227 | + let color = colorPicker.getLargestProportionColor(); |
| 228 | Logger.debug(TAG, "compInfoBean compStyle = " + color) | 228 | Logger.debug(TAG, "compInfoBean compStyle = " + color) |
| 229 | // color = ColorUtils.getMorningEveningPaperRgb({red:color.red,green:color.green,blue:color.blue,alpha:color.alpha}) | 229 | // color = ColorUtils.getMorningEveningPaperRgb({red:color.red,green:color.green,blue:color.blue,alpha:color.alpha}) |
| 230 | // 将取色器选取的color示例转换为十六进制颜色代码 | 230 | // 将取色器选取的color示例转换为十六进制颜色代码 |
| @@ -273,6 +273,7 @@ export struct MorningEveningPaperComponent { | @@ -273,6 +273,7 @@ export struct MorningEveningPaperComponent { | ||
| 273 | } | 273 | } |
| 274 | } | 274 | } |
| 275 | // .height(`calc(100% - ${this.bottomSafeHeight + this.topSafeHeight + 'vp'})`) | 275 | // .height(`calc(100% - ${this.bottomSafeHeight + this.topSafeHeight + 'vp'})`) |
| 276 | + .edgeEffect(EdgeEffect.None) // 必须设置列表为滑动到边缘无效果 | ||
| 276 | .scrollBar(BarState.Off) | 277 | .scrollBar(BarState.Off) |
| 277 | .onWillScroll(scrollOffset =>{ | 278 | .onWillScroll(scrollOffset =>{ |
| 278 | this.scrollOffset = this.scrollOffset + scrollOffset as number | 279 | this.scrollOffset = this.scrollOffset + scrollOffset as number |
| @@ -152,11 +152,9 @@ export struct SingleColumn999Component { | @@ -152,11 +152,9 @@ export struct SingleColumn999Component { | ||
| 152 | scrollBackward: NestedScrollMode.SELF_FIRST | 152 | scrollBackward: NestedScrollMode.SELF_FIRST |
| 153 | }) | 153 | }) |
| 154 | } else { | 154 | } else { |
| 155 | - if (this.compListItem && this.compListItem?.operDataList) { | ||
| 156 | EmptyComponent({emptyType:WDViewDefaultType.WDViewDefaultType_NoListContent}) | 155 | EmptyComponent({emptyType:WDViewDefaultType.WDViewDefaultType_NoListContent}) |
| 157 | } | 156 | } |
| 158 | } | 157 | } |
| 159 | - } | ||
| 160 | 158 | ||
| 161 | // public buildLanes(): number { | 159 | // public buildLanes(): number { |
| 162 | // return new BreakPointType({ xs: 1, sm: 1, md: 2, lg: 3 }).getValue(this.currentBreakpoint) | 160 | // return new BreakPointType({ xs: 1, sm: 1, md: 2, lg: 3 }).getValue(this.currentBreakpoint) |
| @@ -176,6 +174,5 @@ export struct SingleColumn999Component { | @@ -176,6 +174,5 @@ export struct SingleColumn999Component { | ||
| 176 | index: index, | 174 | index: index, |
| 177 | }) | 175 | }) |
| 178 | } | 176 | } |
| 179 | - | ||
| 180 | } | 177 | } |
| 181 | } | 178 | } |
| @@ -107,8 +107,6 @@ export struct CardMediaInfo { | @@ -107,8 +107,6 @@ export struct CardMediaInfo { | ||
| 107 | .margin({ | 107 | .margin({ |
| 108 | right: '2vp' | 108 | right: '2vp' |
| 109 | }) | 109 | }) |
| 110 | - // Image($r('app.media.card_live')) | ||
| 111 | - // .mediaLogo() | ||
| 112 | Text('直播中') | 110 | Text('直播中') |
| 113 | .mediaText() | 111 | .mediaText() |
| 114 | } else if (this.contentDTO?.liveType === 'end' && this.contentDTO?.linkUrl) { | 112 | } else if (this.contentDTO?.liveType === 'end' && this.contentDTO?.linkUrl) { |
| @@ -116,10 +114,17 @@ export struct CardMediaInfo { | @@ -116,10 +114,17 @@ export struct CardMediaInfo { | ||
| 116 | .mediaLogo() | 114 | .mediaLogo() |
| 117 | Text('回看') | 115 | Text('回看') |
| 118 | .mediaText() | 116 | .mediaText() |
| 119 | - }else if(this.contentDTO?.liveInfo?.liveState === 'end' && !this.contentDTO?.linkUrl){ | 117 | + }else if(this.contentDTO?.liveType === 'end' && !this.contentDTO?.linkUrl){ |
| 120 | Text('已结束') | 118 | Text('已结束') |
| 121 | .mediaText() | 119 | .mediaText() |
| 120 | + }else if(!this.contentDTO?.liveType && this.contentDTO?.linkUrl){ | ||
| 121 | + // 加个防护,生产有出现这样的特例 | ||
| 122 | + Image($r('app.media.card_play')) | ||
| 123 | + .mediaLogo() | ||
| 124 | + Text('回看') | ||
| 125 | + .mediaText() | ||
| 122 | } | 126 | } |
| 127 | + | ||
| 123 | }else { | 128 | }else { |
| 124 | // 当liveInfo存在时后 | 129 | // 当liveInfo存在时后 |
| 125 | 130 | ||
| @@ -129,6 +134,7 @@ export struct CardMediaInfo { | @@ -129,6 +134,7 @@ export struct CardMediaInfo { | ||
| 129 | Text('预约') | 134 | Text('预约') |
| 130 | .mediaText() | 135 | .mediaText() |
| 131 | } else if (this.contentDTO?.liveInfo?.liveState === 'running') { | 136 | } else if (this.contentDTO?.liveInfo?.liveState === 'running') { |
| 137 | + Row(){ | ||
| 132 | LottieView({ | 138 | LottieView({ |
| 133 | name: 'live_status_wait', | 139 | name: 'live_status_wait', |
| 134 | path: "lottie/live_detail_living.json", | 140 | path: "lottie/live_detail_living.json", |
| @@ -136,14 +142,14 @@ export struct CardMediaInfo { | @@ -136,14 +142,14 @@ export struct CardMediaInfo { | ||
| 136 | lottieHeight: 14, | 142 | lottieHeight: 14, |
| 137 | autoplay: true, | 143 | autoplay: true, |
| 138 | loop: true, | 144 | loop: true, |
| 139 | - }) | ||
| 140 | - .margin({ | 145 | + }).margin({ |
| 141 | right: '2vp' | 146 | right: '2vp' |
| 142 | }) | 147 | }) |
| 143 | - // Image($r('app.media.card_live')) | ||
| 144 | - // .mediaLogo() | ||
| 145 | Text('直播中') | 148 | Text('直播中') |
| 146 | .mediaText() | 149 | .mediaText() |
| 150 | + | ||
| 151 | + } | ||
| 152 | + | ||
| 147 | } else if (this.contentDTO?.liveInfo?.liveState === 'end' && this.contentDTO?.liveInfo?.replayUri) { | 153 | } else if (this.contentDTO?.liveInfo?.liveState === 'end' && this.contentDTO?.liveInfo?.replayUri) { |
| 148 | Image($r('app.media.card_play')) | 154 | Image($r('app.media.card_play')) |
| 149 | .mediaLogo() | 155 | .mediaLogo() |
| @@ -154,7 +160,6 @@ export struct CardMediaInfo { | @@ -154,7 +160,6 @@ export struct CardMediaInfo { | ||
| 154 | Text('已结束') | 160 | Text('已结束') |
| 155 | .mediaText() | 161 | .mediaText() |
| 156 | } | 162 | } |
| 157 | - | ||
| 158 | } | 163 | } |
| 159 | // 备注直播间观看人数在轮播图卡不显示 | 164 | // 备注直播间观看人数在轮播图卡不显示 |
| 160 | if(this.beused !== 'Zh_Carousel_Layout_01'){ | 165 | if(this.beused !== 'Zh_Carousel_Layout_01'){ |
| @@ -165,15 +170,6 @@ export struct CardMediaInfo { | @@ -165,15 +170,6 @@ export struct CardMediaInfo { | ||
| 165 | .mediaText() | 170 | .mediaText() |
| 166 | } | 171 | } |
| 167 | } | 172 | } |
| 168 | - | ||
| 169 | - | ||
| 170 | - // } else if (this.contentDTO?.liveInfo?.liveState === 'end' && this.contentDTO?.liveInfo | ||
| 171 | - // ?.replayUri) { | ||
| 172 | - // // Image($r('app.media.card_live')) | ||
| 173 | - // // .mediaLogo() | ||
| 174 | - // Text('直播结束') | ||
| 175 | - // .mediaText() | ||
| 176 | - // } | ||
| 177 | } | 173 | } |
| 178 | } else if (this.contentDTO.objectType === '9') { | 174 | } else if (this.contentDTO.objectType === '9') { |
| 179 | // 显示组图;图片数量 | 175 | // 显示组图;图片数量 |
| @@ -19,14 +19,67 @@ export struct ZhSingleRow02 { | @@ -19,14 +19,67 @@ export struct ZhSingleRow02 { | ||
| 19 | @State pageId: string = ''; | 19 | @State pageId: string = ''; |
| 20 | @State pageName: string = ''; | 20 | @State pageName: string = ''; |
| 21 | @State compDTO: CompDTO = {} as CompDTO | 21 | @State compDTO: CompDTO = {} as CompDTO |
| 22 | + @State initMoreWidth: number = 16; | ||
| 23 | + @State moreWidth:number = 16 | ||
| 24 | + @State moreTips: string = '' | ||
| 25 | + scroller: Scroller = new Scroller() | ||
| 26 | + | ||
| 27 | + resetMoreTips() { | ||
| 28 | + console.log('resetMoreTips', this.moreWidth, this.initMoreWidth) | ||
| 29 | + if (this.moreWidth < this.initMoreWidth * 2) { | ||
| 30 | + this.moreTips = '查看更多'; | ||
| 31 | + } | ||
| 32 | + } | ||
| 33 | + | ||
| 34 | + edgeAnimation() { | ||
| 35 | + if (this.moreWidth < this.initMoreWidth * 3) { | ||
| 36 | + if (!this.moreTips) { | ||
| 37 | + this.moreTips = '查看更多'; | ||
| 38 | + } | ||
| 39 | + this.moreWidth = this.moreWidth + 2 | ||
| 40 | + } | ||
| 41 | + if (this.moreWidth > this.initMoreWidth * 2) { | ||
| 42 | + this.moreTips = '松手查看'; | ||
| 43 | + } else { | ||
| 44 | + | ||
| 45 | + } | ||
| 46 | + } | ||
| 47 | + | ||
| 48 | + reverseEdgeAnimation() { | ||
| 49 | + if (this.moreWidth > this.initMoreWidth) { | ||
| 50 | + this.moreWidth = this.moreWidth - 2 | ||
| 51 | + } | ||
| 52 | + this.resetMoreTips() | ||
| 53 | + } | ||
| 54 | + | ||
| 55 | + resetEdgeAnimation() { | ||
| 56 | + if (this.moreWidth > this.initMoreWidth) { | ||
| 57 | + this.moreWidth = this.moreWidth - 1 | ||
| 58 | + this.resetEdgeAnimation(); | ||
| 59 | + } | ||
| 60 | + this.resetMoreTips() | ||
| 61 | + } | ||
| 62 | + | ||
| 63 | + toMore() { | ||
| 64 | + if (this.moreWidth > this.initMoreWidth * 2) { | ||
| 65 | + if (this.compDTO?.objectType === '11') { | ||
| 66 | + ProcessUtils.jumpChannelTab(this.compDTO.objectId, this.compDTO.pageId as string, this.compDTO.objectTitle) | ||
| 67 | + } else if (this.compDTO?.objectType === '5') { | ||
| 68 | + ProcessUtils._gotoSpecialTopic(this.compDTO.linkUrl) | ||
| 69 | + } else if (this.compDTO?.objectType === '6') { | ||
| 70 | + ProcessUtils._gotoDefaultWeb(this.compDTO.linkUrl) | ||
| 71 | + } | ||
| 72 | + } | ||
| 73 | + } | ||
| 22 | 74 | ||
| 23 | build() { | 75 | build() { |
| 24 | Column() { | 76 | Column() { |
| 25 | //顶部 | 77 | //顶部 |
| 26 | this.CompHeader(this.compDTO) | 78 | this.CompHeader(this.compDTO) |
| 27 | - Row(){ | ||
| 28 | // 列表内容 | 79 | // 列表内容 |
| 29 | - List() { | 80 | + Scroll(this.scroller) { |
| 81 | + Row() { | ||
| 82 | + Row() { | ||
| 30 | ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => { | 83 | ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => { |
| 31 | CreatorItem({ | 84 | CreatorItem({ |
| 32 | item, | 85 | item, |
| @@ -35,15 +88,52 @@ export struct ZhSingleRow02 { | @@ -35,15 +88,52 @@ export struct ZhSingleRow02 { | ||
| 35 | pageId: this.pageId, | 88 | pageId: this.pageId, |
| 36 | pageName: this.pageName | 89 | pageName: this.pageName |
| 37 | }) | 90 | }) |
| 38 | - .margin({right: index === this.compDTO.operDataList.length - 1 ? $r('app.float.card_comp_pagePadding_lf') : 0}) | 91 | + .margin({ right: 8 }) |
| 39 | }) | 92 | }) |
| 40 | } | 93 | } |
| 41 | - .listDirection(Axis.Horizontal) | ||
| 42 | - .scrollBar(BarState.Off) | ||
| 43 | - .edgeEffect(EdgeEffect.None) | 94 | + if (this.compDTO.operDataList.length >= 2) { |
| 95 | + Column() { | ||
| 96 | + if (this.moreWidth > this.initMoreWidth + 2) { | ||
| 97 | + Text(this.moreTips) | ||
| 98 | + .fontSize(8) | ||
| 99 | + .fontColor(0x858585) | ||
| 100 | + .width(8) | ||
| 101 | + } | ||
| 102 | + } | ||
| 103 | + .justifyContent(FlexAlign.Center) | ||
| 104 | + .align(Alignment.Center) | ||
| 105 | + .height('100%') | ||
| 106 | + .width(this.moreWidth) | ||
| 107 | + .backgroundColor(0xe9e9e9) | ||
| 108 | + .borderRadius({ topLeft: 5, bottomLeft: 5 }) | ||
| 109 | + } | ||
| 110 | + } | ||
| 44 | } | 111 | } |
| 45 | .width(CommonConstants.FULL_WIDTH) | 112 | .width(CommonConstants.FULL_WIDTH) |
| 46 | .height(208) | 113 | .height(208) |
| 114 | + .align(Alignment.Start) | ||
| 115 | + .scrollable(this.compDTO.operDataList.length >= 2 ? ScrollDirection.Horizontal : ScrollDirection.None) | ||
| 116 | + .scrollBar(BarState.Off) | ||
| 117 | + .edgeEffect(EdgeEffect.None) | ||
| 118 | + .onReachEnd(() => { | ||
| 119 | + this.edgeAnimation() | ||
| 120 | + }) | ||
| 121 | + .onScrollStop(() => { | ||
| 122 | + // this.resetEdgeAnimation(); | ||
| 123 | + }) | ||
| 124 | + .onScroll((xOffset: number, yOffset: number) => { | ||
| 125 | + if (xOffset < 0) { | ||
| 126 | + this.reverseEdgeAnimation(); | ||
| 127 | + } | ||
| 128 | + }) | ||
| 129 | + .onTouch((event?: TouchEvent) => { | ||
| 130 | + if(event) { | ||
| 131 | + if (event.type === TouchType.Up) { | ||
| 132 | + this.toMore(); | ||
| 133 | + this.resetEdgeAnimation(); | ||
| 134 | + } | ||
| 135 | + } | ||
| 136 | + }) | ||
| 47 | } | 137 | } |
| 48 | .padding({ | 138 | .padding({ |
| 49 | left: $r('app.float.card_comp_pagePadding_lf'), | 139 | left: $r('app.float.card_comp_pagePadding_lf'), |
| @@ -126,6 +216,7 @@ struct CreatorItem { | @@ -126,6 +216,7 @@ struct CreatorItem { | ||
| 126 | .width(156) | 216 | .width(156) |
| 127 | .height(208) | 217 | .height(208) |
| 128 | .backgroundColor(0xf5f5f5) | 218 | .backgroundColor(0xf5f5f5) |
| 219 | + .borderRadius(5) | ||
| 129 | 220 | ||
| 130 | Row() | 221 | Row() |
| 131 | .width(156) | 222 | .width(156) |
| @@ -134,6 +225,7 @@ struct CreatorItem { | @@ -134,6 +225,7 @@ struct CreatorItem { | ||
| 134 | direction: GradientDirection.Bottom, | 225 | direction: GradientDirection.Bottom, |
| 135 | colors: [['rgba(0, 0, 0, 0.0)', 0.0], ['rgba(0, 0, 0, 0.3)', 1.0]] | 226 | colors: [['rgba(0, 0, 0, 0.0)', 0.0], ['rgba(0, 0, 0, 0.3)', 1.0]] |
| 136 | }) | 227 | }) |
| 228 | + .borderRadius(5) | ||
| 137 | Text(this.item.newsTitle) | 229 | Text(this.item.newsTitle) |
| 138 | .fontColor(0xffffff) | 230 | .fontColor(0xffffff) |
| 139 | .fontSize(14) | 231 | .fontSize(14) |
| @@ -145,7 +237,6 @@ struct CreatorItem { | @@ -145,7 +237,6 @@ struct CreatorItem { | ||
| 145 | } | 237 | } |
| 146 | .width(156) | 238 | .width(156) |
| 147 | .height(208) | 239 | .height(208) |
| 148 | - .margin({ right: 11 }) | ||
| 149 | .borderColor($r('app.color.color_EDEDED')) | 240 | .borderColor($r('app.color.color_EDEDED')) |
| 150 | .borderRadius($r('app.float.image_border_radius')) | 241 | .borderRadius($r('app.float.image_border_radius')) |
| 151 | } | 242 | } |
| @@ -40,17 +40,61 @@ export struct ZhSingleRow03 { | @@ -40,17 +40,61 @@ export struct ZhSingleRow03 { | ||
| 40 | @State pageId: string = ''; | 40 | @State pageId: string = ''; |
| 41 | @State pageName: string = ''; | 41 | @State pageName: string = ''; |
| 42 | @State compDTO: CompDTO = {} as CompDTO | 42 | @State compDTO: CompDTO = {} as CompDTO |
| 43 | - @State isEndEdge: boolean = false; | ||
| 44 | // @State reserveStatus: reserveItem[] = [] | 43 | // @State reserveStatus: reserveItem[] = [] |
| 45 | @State reservedIds: string[] = []; | 44 | @State reservedIds: string[] = []; |
| 46 | @State loadImg: boolean = false; | 45 | @State loadImg: boolean = false; |
| 46 | + @State initMoreWidth: number = 16; | ||
| 47 | + @State moreWidth:number = 16 | ||
| 48 | + @State moreTips: string = '' | ||
| 49 | + scroller: Scroller = new Scroller() | ||
| 50 | + | ||
| 51 | + resetMoreTips() { | ||
| 52 | + console.log('resetMoreTips', this.moreWidth, this.initMoreWidth) | ||
| 53 | + if (this.moreWidth < this.initMoreWidth * 2) { | ||
| 54 | + this.moreTips = '查看更多'; | ||
| 55 | + } | ||
| 56 | + } | ||
| 57 | + | ||
| 58 | + edgeAnimation() { | ||
| 59 | + if (this.moreWidth < this.initMoreWidth * 3) { | ||
| 60 | + if (!this.moreTips) { | ||
| 61 | + this.moreTips = '查看更多'; | ||
| 62 | + } | ||
| 63 | + this.moreWidth = this.moreWidth + 2 | ||
| 64 | + } | ||
| 65 | + if (this.moreWidth > this.initMoreWidth * 2) { | ||
| 66 | + this.moreTips = '松手查看'; | ||
| 67 | + } else { | ||
| 68 | + | ||
| 69 | + } | ||
| 70 | + } | ||
| 71 | + | ||
| 72 | + reverseEdgeAnimation() { | ||
| 73 | + if (this.moreWidth > this.initMoreWidth) { | ||
| 74 | + this.moreWidth = this.moreWidth - 2 | ||
| 75 | + } | ||
| 76 | + this.resetMoreTips() | ||
| 77 | + } | ||
| 78 | + | ||
| 79 | + resetEdgeAnimation() { | ||
| 80 | + if (this.moreWidth > this.initMoreWidth) { | ||
| 81 | + this.moreWidth = this.moreWidth - 1 | ||
| 82 | + this.resetEdgeAnimation(); | ||
| 83 | + } | ||
| 84 | + this.resetMoreTips() | ||
| 85 | + } | ||
| 86 | + | ||
| 87 | + toMore() { | ||
| 88 | + if (this.moreWidth > this.initMoreWidth * 2) { | ||
| 89 | + this.jumpToMore() | ||
| 90 | + } | ||
| 91 | + } | ||
| 47 | 92 | ||
| 48 | async aboutToAppear(): Promise<void> { | 93 | async aboutToAppear(): Promise<void> { |
| 49 | this.getReserveState(); | 94 | this.getReserveState(); |
| 50 | this.loadImg = await onlyWifiLoadImg(); | 95 | this.loadImg = await onlyWifiLoadImg(); |
| 51 | } | 96 | } |
| 52 | 97 | ||
| 53 | - scroller: Scroller = new Scroller() | ||
| 54 | 98 | ||
| 55 | // 请求所有预约状态 | 99 | // 请求所有预约状态 |
| 56 | async getReserveState() { | 100 | async getReserveState() { |
| @@ -117,25 +161,51 @@ export struct ZhSingleRow03 { | @@ -117,25 +161,51 @@ export struct ZhSingleRow03 { | ||
| 117 | 161 | ||
| 118 | Scroll(this.scroller){ | 162 | Scroll(this.scroller){ |
| 119 | Row() { | 163 | Row() { |
| 164 | + Row() { | ||
| 120 | ForEach(this.compDTO.operDataList, (item: ContentDTO) => { | 165 | ForEach(this.compDTO.operDataList, (item: ContentDTO) => { |
| 121 | this.ItemCard(item) | 166 | this.ItemCard(item) |
| 122 | }) | 167 | }) |
| 123 | } | 168 | } |
| 169 | + if (this.compDTO.operDataList.length >= 2) { | ||
| 170 | + Column() { | ||
| 171 | + if (this.moreWidth > this.initMoreWidth + 2) { | ||
| 172 | + Text(this.moreTips) | ||
| 173 | + .fontSize(8) | ||
| 174 | + .fontColor(0x858585) | ||
| 175 | + .width(8) | ||
| 124 | } | 176 | } |
| 125 | - .scrollable(ScrollDirection.Horizontal) | ||
| 126 | - .scrollBar(BarState.Off) | ||
| 127 | - .onScrollEdge((side: Edge) => { | ||
| 128 | - if (side === Edge.End) { | ||
| 129 | - this.isEndEdge = true; | ||
| 130 | } | 177 | } |
| 178 | + .justifyContent(FlexAlign.Center) | ||
| 179 | + .align(Alignment.Center) | ||
| 180 | + .width(this.moreWidth) | ||
| 181 | + .backgroundColor(0xf9f9f9) | ||
| 182 | + .borderRadius({ topLeft: 5, bottomLeft: 5 }) | ||
| 183 | + .height(116) | ||
| 184 | + } | ||
| 185 | + } | ||
| 186 | + } | ||
| 187 | + .align(Alignment.Start) | ||
| 188 | + .scrollable(this.compDTO.operDataList.length >= 2 ? ScrollDirection.Horizontal : ScrollDirection.None) | ||
| 189 | + .scrollBar(BarState.Off) | ||
| 190 | + .edgeEffect(EdgeEffect.None) | ||
| 191 | + .onReachEnd(() => { | ||
| 192 | + this.edgeAnimation() | ||
| 131 | }) | 193 | }) |
| 132 | .onScrollStop(() => { | 194 | .onScrollStop(() => { |
| 133 | - if (this.isEndEdge) { | ||
| 134 | - this.jumpToMore(); | ||
| 135 | - } | 195 | + // this.resetEdgeAnimation(); |
| 136 | }) | 196 | }) |
| 137 | .onScroll((xOffset: number, yOffset: number) => { | 197 | .onScroll((xOffset: number, yOffset: number) => { |
| 138 | - this.isEndEdge = false; | 198 | + if (xOffset < 0) { |
| 199 | + this.reverseEdgeAnimation(); | ||
| 200 | + } | ||
| 201 | + }) | ||
| 202 | + .onTouch((event?: TouchEvent) => { | ||
| 203 | + if(event) { | ||
| 204 | + if (event.type === TouchType.Up) { | ||
| 205 | + this.toMore(); | ||
| 206 | + this.resetEdgeAnimation(); | ||
| 207 | + } | ||
| 208 | + } | ||
| 139 | }) | 209 | }) |
| 140 | } | 210 | } |
| 141 | .padding({ | 211 | .padding({ |
| @@ -6,24 +6,25 @@ import { TrackingButton, TrackConstants } from 'wdTracking/Index'; | @@ -6,24 +6,25 @@ import { TrackingButton, TrackConstants } from 'wdTracking/Index'; | ||
| 6 | @Component | 6 | @Component |
| 7 | export default struct MinePageMoreFunctionUI { | 7 | export default struct MinePageMoreFunctionUI { |
| 8 | @Link moreData: MinePageMoreFunctionModel[] | 8 | @Link moreData: MinePageMoreFunctionModel[] |
| 9 | + @Link percent:number | ||
| 9 | 10 | ||
| 10 | build() { | 11 | build() { |
| 11 | Column() { | 12 | Column() { |
| 12 | Column() { | 13 | Column() { |
| 13 | Text("更多功能") | 14 | Text("更多功能") |
| 14 | .fontColor($r('app.color.color_222222')) | 15 | .fontColor($r('app.color.color_222222')) |
| 15 | - .fontSize('29lpx') | ||
| 16 | - .margin({ left: "31lpx" }) | ||
| 17 | - .lineHeight('46lpx') | 16 | + .fontSize(`${this.calcHeight(29)}lpx`) |
| 17 | + .margin({ left: `${this.calcHeight(31)}lpx` }) | ||
| 18 | + .lineHeight(`${this.calcHeight(46)}lpx`) | ||
| 18 | .fontWeight(FontWeight.Bold) | 19 | .fontWeight(FontWeight.Bold) |
| 19 | - }.height('92lpx') | 20 | + }.height(`${this.calcHeight(92)}lpx`) |
| 20 | .width('100%') | 21 | .width('100%') |
| 21 | .justifyContent(FlexAlign.Center) | 22 | .justifyContent(FlexAlign.Center) |
| 22 | .alignItems(HorizontalAlign.Start) | 23 | .alignItems(HorizontalAlign.Start) |
| 23 | 24 | ||
| 24 | Text().backgroundColor($r('app.color.color_F5F5F5')) | 25 | Text().backgroundColor($r('app.color.color_F5F5F5')) |
| 25 | .width('100%') | 26 | .width('100%') |
| 26 | - .height('1lpx') | 27 | + .height(`${this.calcHeight(1)}lpx`) |
| 27 | 28 | ||
| 28 | List() { | 29 | List() { |
| 29 | ForEach(this.moreData, (item: MinePageMoreFunctionModel, index: number) => { | 30 | ForEach(this.moreData, (item: MinePageMoreFunctionModel, index: number) => { |
| @@ -31,39 +32,42 @@ export default struct MinePageMoreFunctionUI { | @@ -31,39 +32,42 @@ export default struct MinePageMoreFunctionUI { | ||
| 31 | Column() { | 32 | Column() { |
| 32 | Column() { | 33 | Column() { |
| 33 | Row() { | 34 | Row() { |
| 35 | + Row(){ | ||
| 34 | if (item.imgSrc) { | 36 | if (item.imgSrc) { |
| 35 | Image(item.imgSrc) | 37 | Image(item.imgSrc) |
| 36 | - .width('38lpx') | ||
| 37 | - .height('38lpx') | ||
| 38 | - .margin({ right: '15lpx' }) | 38 | + .width(`${this.calcHeight(38)}lpx`) |
| 39 | + .height(`${this.calcHeight(38)}lpx`) | ||
| 40 | + .margin({ right: `${this.calcHeight(15)}lpx` }) | ||
| 39 | .objectFit(ImageFit.Auto) | 41 | .objectFit(ImageFit.Auto) |
| 40 | .interpolation(ImageInterpolation.High) | 42 | .interpolation(ImageInterpolation.High) |
| 41 | } | 43 | } |
| 42 | Text(`${item.msg}`) | 44 | Text(`${item.msg}`) |
| 43 | - .width('456lpx') | ||
| 44 | - .height('38lpx') | 45 | + .height(`${this.calcHeight(38)}lpx`) |
| 45 | .fontColor($r('app.color.color_666666')) | 46 | .fontColor($r('app.color.color_666666')) |
| 46 | - .fontSize('29lpx') | 47 | + .fontSize(`${this.calcHeight(29)}lpx`) |
| 47 | .fontWeight(400) | 48 | .fontWeight(400) |
| 49 | + }.alignItems(VerticalAlign.Center) | ||
| 50 | + .justifyContent(FlexAlign.Start) | ||
| 48 | 51 | ||
| 49 | - Blank() | ||
| 50 | Image($r('app.media.mine_user_arrow_2')) | 52 | Image($r('app.media.mine_user_arrow_2')) |
| 51 | - .width('27lpx') | ||
| 52 | - .height('27lpx') | 53 | + .width(`${this.calcHeight(27)}lpx`) |
| 54 | + .height(`${this.calcHeight(27)}lpx`) | ||
| 53 | .objectFit(ImageFit.Auto) | 55 | .objectFit(ImageFit.Auto) |
| 54 | .interpolation(ImageInterpolation.High) | 56 | .interpolation(ImageInterpolation.High) |
| 55 | - .margin({ left: '81lpx', right: '29lpx' }) | 57 | + .margin({ left: `${this.calcHeight(81)}lpx`, right: `${this.calcHeight(29)}lpx` }) |
| 56 | }.alignItems(VerticalAlign.Center) | 58 | }.alignItems(VerticalAlign.Center) |
| 59 | + .justifyContent(FlexAlign.SpaceBetween) | ||
| 60 | + .width("100%") | ||
| 61 | + | ||
| 62 | + }.height(`${this.calcHeight(108)}lpx`) | ||
| 57 | .justifyContent(FlexAlign.Center) | 63 | .justifyContent(FlexAlign.Center) |
| 58 | - }.height('108lpx') | ||
| 59 | - .justifyContent(FlexAlign.Center) | ||
| 60 | - .alignItems(HorizontalAlign.Start) | ||
| 61 | - .padding({ left: '27lpx' }) | 64 | + .padding({ left: `${this.calcHeight(27)}lpx` }) |
| 65 | + .width("100%") | ||
| 62 | 66 | ||
| 63 | if (index != this.moreData.length - 1) { | 67 | if (index != this.moreData.length - 1) { |
| 64 | Text().backgroundColor($r('app.color.color_F5F5F5')) | 68 | Text().backgroundColor($r('app.color.color_F5F5F5')) |
| 65 | - .width('612lpx') | ||
| 66 | - .height('1lpx') | 69 | + .width(`612lpx`) |
| 70 | + .height(`${this.calcHeight(1)}lpx`) | ||
| 67 | } | 71 | } |
| 68 | } | 72 | } |
| 69 | } | 73 | } |
| @@ -83,15 +87,21 @@ export default struct MinePageMoreFunctionUI { | @@ -83,15 +87,21 @@ export default struct MinePageMoreFunctionUI { | ||
| 83 | ProcessUtils.gotoFeedBackActivity() | 87 | ProcessUtils.gotoFeedBackActivity() |
| 84 | } | 88 | } |
| 85 | }) | 89 | }) |
| 86 | - .height('117lpx') | 90 | + .height(`${this.calcHeight(117)}lpx`) |
| 91 | + .width("100%") | ||
| 87 | }) | 92 | }) |
| 88 | }.onScrollFrameBegin((offset, state) => { | 93 | }.onScrollFrameBegin((offset, state) => { |
| 89 | return { offsetRemain: 0 } | 94 | return { offsetRemain: 0 } |
| 90 | }) | 95 | }) |
| 96 | + .width("100%") | ||
| 91 | } | 97 | } |
| 92 | .backgroundColor($r('app.color.white')) | 98 | .backgroundColor($r('app.color.white')) |
| 93 | .borderRadius(8) | 99 | .borderRadius(8) |
| 94 | - .margin({ left: '23lpx', right: '23lpx', top: "19lpx" }) | 100 | + .margin({ left: `${this.calcHeight(23)}lpx`, right: `${this.calcHeight(23)}lpx`, top: `${this.calcHeight(19)}lpx` }) |
| 101 | + } | ||
| 102 | + | ||
| 103 | + calcHeight(value:number): number{ | ||
| 104 | + return value * this.percent | ||
| 95 | } | 105 | } |
| 96 | } | 106 | } |
| 97 | 107 |
| @@ -11,12 +11,13 @@ const TAG = "MinePagePersonFunctionUI" | @@ -11,12 +11,13 @@ const TAG = "MinePagePersonFunctionUI" | ||
| 11 | export default struct MinePagePersonFunctionUI { | 11 | export default struct MinePagePersonFunctionUI { |
| 12 | @Link personalData:MinePagePersonalFunctionsItem[] | 12 | @Link personalData:MinePagePersonalFunctionsItem[] |
| 13 | @Prop isLogin:boolean | 13 | @Prop isLogin:boolean |
| 14 | + @Link percent:number | ||
| 14 | 15 | ||
| 15 | build() { | 16 | build() { |
| 16 | Grid(){ | 17 | Grid(){ |
| 17 | ForEach(this.personalData,(item:MinePagePersonalFunctionsItem,index:number)=>{ | 18 | ForEach(this.personalData,(item:MinePagePersonalFunctionsItem,index:number)=>{ |
| 18 | GridItem(){ | 19 | GridItem(){ |
| 19 | - PagePersonFunction({ item: item, noDivider : (index % 5 < 4 && index != this.personalData.length-1) ? false : true}) | 20 | + PagePersonFunction({ item: item, noDivider : (index % 5 < 4 && index != this.personalData.length-1) ? false : true,percent:$percent}) |
| 20 | }.onClick(()=>{ | 21 | }.onClick(()=>{ |
| 21 | console.log(index+"") | 22 | console.log(index+"") |
| 22 | switch (item.msg){ | 23 | switch (item.msg){ |
| @@ -77,14 +78,14 @@ export default struct MinePagePersonFunctionUI { | @@ -77,14 +78,14 @@ export default struct MinePagePersonFunctionUI { | ||
| 77 | break; | 78 | break; |
| 78 | } | 79 | } |
| 79 | } | 80 | } |
| 80 | - }).width('142lpx') | ||
| 81 | - .height('117lpx') | 81 | + })/*.width(`${this.calcHeight(142)}lpx`)*/ |
| 82 | + .height(`${this.calcHeight(117)}lpx`) | ||
| 82 | }) | 83 | }) |
| 83 | } | 84 | } |
| 84 | .rowsTemplate('1fr') | 85 | .rowsTemplate('1fr') |
| 85 | .columnsTemplate('1fr 1fr 1fr 1fr 1fr') | 86 | .columnsTemplate('1fr 1fr 1fr 1fr 1fr') |
| 86 | - .height('117lpx') | ||
| 87 | - .margin({top:'31lpx'}) | 87 | + .height(`${this.calcHeight(117)}lpx`) |
| 88 | + .margin({top:`${this.calcHeight(31)}lpx`}) | ||
| 88 | } | 89 | } |
| 89 | 90 | ||
| 90 | messageClick(){ | 91 | messageClick(){ |
| @@ -94,6 +95,10 @@ export default struct MinePagePersonFunctionUI { | @@ -94,6 +95,10 @@ export default struct MinePagePersonFunctionUI { | ||
| 94 | console.log(TAG, JSON.stringify(err)) | 95 | console.log(TAG, JSON.stringify(err)) |
| 95 | }) | 96 | }) |
| 96 | } | 97 | } |
| 98 | + | ||
| 99 | + calcHeight(value:number): number{ | ||
| 100 | + return value * this.percent | ||
| 101 | + } | ||
| 97 | } | 102 | } |
| 98 | 103 | ||
| 99 | function trackButtonClick(buttonName: string){ | 104 | function trackButtonClick(buttonName: string){ |
| @@ -13,6 +13,7 @@ export default struct MinePageUserSimpleInfoUI { | @@ -13,6 +13,7 @@ export default struct MinePageUserSimpleInfoUI { | ||
| 13 | userType:string = "1" | 13 | userType:string = "1" |
| 14 | @State levelHead:string = "" | 14 | @State levelHead:string = "" |
| 15 | @State levelId:number = 0 | 15 | @State levelId:number = 0 |
| 16 | + @Link percent:number | ||
| 16 | 17 | ||
| 17 | loginStateChange(){ | 18 | loginStateChange(){ |
| 18 | if(this.isLogin){ | 19 | if(this.isLogin){ |
| @@ -29,20 +30,20 @@ export default struct MinePageUserSimpleInfoUI { | @@ -29,20 +30,20 @@ export default struct MinePageUserSimpleInfoUI { | ||
| 29 | Stack(){ | 30 | Stack(){ |
| 30 | Image(this.headPhotoUrl==""?$r('app.media.default_head'):this.headPhotoUrl) | 31 | Image(this.headPhotoUrl==""?$r('app.media.default_head'):this.headPhotoUrl) |
| 31 | .alt($r('app.media.default_head')) | 32 | .alt($r('app.media.default_head')) |
| 32 | - .width('100lpx') | ||
| 33 | - .height('100lpx') | 33 | + .width(`${this.calcHeight(100)}lpx`) |
| 34 | + .height(`${this.calcHeight(100)}lpx`) | ||
| 34 | .objectFit(ImageFit.Cover) | 35 | .objectFit(ImageFit.Cover) |
| 35 | .borderRadius(50) | 36 | .borderRadius(50) |
| 36 | 37 | ||
| 37 | if(StringUtils.isNotEmpty(this.levelHead)){ | 38 | if(StringUtils.isNotEmpty(this.levelHead)){ |
| 38 | Image(this.levelHead) | 39 | Image(this.levelHead) |
| 39 | - .width('130lpx') | ||
| 40 | - .height('130lpx') | 40 | + .width(`${this.calcHeight(130)}lpx`) |
| 41 | + .height(`${this.calcHeight(130)}lpx`) | ||
| 41 | .objectFit(ImageFit.Cover) | 42 | .objectFit(ImageFit.Cover) |
| 42 | .borderRadius(50) | 43 | .borderRadius(50) |
| 43 | } | 44 | } |
| 44 | - }.width('130lpx') | ||
| 45 | - .height('130lpx') | 45 | + }.width(`${this.calcHeight(130)}lpx`) |
| 46 | + .height(`${this.calcHeight(130)}lpx`) | ||
| 46 | .alignContent(Alignment.Center) | 47 | .alignContent(Alignment.Center) |
| 47 | .onClick(()=>{ | 48 | .onClick(()=>{ |
| 48 | this.jumpLogin() | 49 | this.jumpLogin() |
| @@ -58,13 +59,13 @@ export default struct MinePageUserSimpleInfoUI { | @@ -58,13 +59,13 @@ export default struct MinePageUserSimpleInfoUI { | ||
| 58 | .maxLines(1) | 59 | .maxLines(1) |
| 59 | .fontWeight(FontWeight.Bold) | 60 | .fontWeight(FontWeight.Bold) |
| 60 | .textOverflow({ overflow: TextOverflow.Ellipsis }) | 61 | .textOverflow({ overflow: TextOverflow.Ellipsis }) |
| 61 | - .fontSize('33lpx') | ||
| 62 | - .lineHeight("46lpx") | 62 | + .fontSize(`${this.calcHeight(33)}lpx`) |
| 63 | + .lineHeight(`${this.calcHeight(46)}lpx`) | ||
| 63 | 64 | ||
| 64 | Image($r('app.media.mine_user_edit')) | 65 | Image($r('app.media.mine_user_edit')) |
| 65 | - .width('27lpx') | ||
| 66 | - .height('27lpx') | ||
| 67 | - .margin({left:'15lpx'}) | 66 | + .width(`${this.calcHeight(27)}lpx`) |
| 67 | + .height(`${this.calcHeight(27)}lpx`) | ||
| 68 | + .margin({left:`${this.calcHeight(15)}lpx`}) | ||
| 68 | .objectFit(ImageFit.Cover) | 69 | .objectFit(ImageFit.Cover) |
| 69 | Blank() | 70 | Blank() |
| 70 | }.width('100%') | 71 | }.width('100%') |
| @@ -75,39 +76,39 @@ export default struct MinePageUserSimpleInfoUI { | @@ -75,39 +76,39 @@ export default struct MinePageUserSimpleInfoUI { | ||
| 75 | 76 | ||
| 76 | Stack(){ | 77 | Stack(){ |
| 77 | Image($r('app.media.mine_grade_bg')) | 78 | Image($r('app.media.mine_grade_bg')) |
| 78 | - .width('84lpx') | ||
| 79 | - .height('29lpx') | 79 | + .width(`${this.calcHeight(84)}lpx`) |
| 80 | + .height(`${this.calcHeight(29)}lpx`) | ||
| 80 | .objectFit(ImageFit.Auto) | 81 | .objectFit(ImageFit.Auto) |
| 81 | Text(`等级${this.levelId}`) | 82 | Text(`等级${this.levelId}`) |
| 82 | .textAlign(TextAlign.Center) | 83 | .textAlign(TextAlign.Center) |
| 83 | .fontColor($r('app.color.white')) | 84 | .fontColor($r('app.color.white')) |
| 84 | - .fontSize('19lpx') | ||
| 85 | - .width('50lpx') | ||
| 86 | - .height('29lpx') | ||
| 87 | - }.margin({top:'15lpx'}) | 85 | + .fontSize(`${this.calcHeight(19)}lpx`) |
| 86 | + .width(`${this.calcHeight(50)}lpx`) | ||
| 87 | + .height(`${this.calcHeight(29)}lpx`) | ||
| 88 | + }.margin({top:'`${this.calcHeight(15)}lpx`'}) | ||
| 88 | }.alignItems(HorizontalAlign.Start) | 89 | }.alignItems(HorizontalAlign.Start) |
| 89 | - .margin({top:'12lpx',left:'23lpx'}) | ||
| 90 | - .width('352lpx') | 90 | + .margin({top:`${this.calcHeight(12)}lpx`,left:`${this.calcHeight(23)}lpx`}) |
| 91 | + .width(`${this.calcHeight(352)}lpx`) | ||
| 91 | }else{ | 92 | }else{ |
| 92 | Row(){ | 93 | Row(){ |
| 93 | Text("登录注册") | 94 | Text("登录注册") |
| 94 | .fontColor($r('app.color.color_222222')) | 95 | .fontColor($r('app.color.color_222222')) |
| 95 | - .fontSize('38lpx') | ||
| 96 | - .lineHeight("46lpx") | 96 | + .fontSize(`${this.calcHeight(38)}lpx`) |
| 97 | + .lineHeight(`${this.calcHeight(46)}lpx`) | ||
| 97 | .fontWeight(600) | 98 | .fontWeight(600) |
| 98 | 99 | ||
| 99 | Image($r('app.media.mine_user_edit')) | 100 | Image($r('app.media.mine_user_edit')) |
| 100 | - .width('11lpx') | ||
| 101 | - .height('20lpx') | ||
| 102 | - .margin({left:'15lpx'}) | 101 | + .width(`${this.calcHeight(11)}lpx`) |
| 102 | + .height(`${this.calcHeight(20)}lpx`) | ||
| 103 | + .margin({left:`${this.calcHeight(15)}lpx`}) | ||
| 103 | .objectFit(ImageFit.Cover) | 104 | .objectFit(ImageFit.Cover) |
| 104 | Blank() | 105 | Blank() |
| 105 | }.onClick(()=>{ | 106 | }.onClick(()=>{ |
| 106 | this.jumpLogin() | 107 | this.jumpLogin() |
| 107 | trackButtonClick("myPageUserLogin") | 108 | trackButtonClick("myPageUserLogin") |
| 108 | }) | 109 | }) |
| 109 | - .margin({top:'11lpx',left:'23lpx'}) | ||
| 110 | - .width('352lpx') | 110 | + .margin({top:`${this.calcHeight(11)}lpx`,left:`${this.calcHeight(23)}lpx`}) |
| 111 | + .width(`${this.calcHeight(352)}lpx`) | ||
| 111 | } | 112 | } |
| 112 | 113 | ||
| 113 | Blank() | 114 | Blank() |
| @@ -116,15 +117,15 @@ export default struct MinePageUserSimpleInfoUI { | @@ -116,15 +117,15 @@ export default struct MinePageUserSimpleInfoUI { | ||
| 116 | Text("签到") | 117 | Text("签到") |
| 117 | .textAlign(TextAlign.Start) | 118 | .textAlign(TextAlign.Start) |
| 118 | .width('108lpx') | 119 | .width('108lpx') |
| 119 | - .height('46lpx') | 120 | + .height(`${this.calcHeight(46)}lpx`) |
| 120 | .fontColor($r('app.color.color_AD6000')) | 121 | .fontColor($r('app.color.color_AD6000')) |
| 121 | .backgroundColor($r('app.color.color_FFC460')) | 122 | .backgroundColor($r('app.color.color_FFC460')) |
| 122 | .fontWeight(500) | 123 | .fontWeight(500) |
| 123 | .position({x:'23lpx'}) | 124 | .position({x:'23lpx'}) |
| 124 | .padding({left:'35lpx'}) | 125 | .padding({left:'35lpx'}) |
| 125 | Image($r("app.media.mine_sign_icon")) | 126 | Image($r("app.media.mine_sign_icon")) |
| 126 | - .width('50lpx') | ||
| 127 | - .height('50lpx') | 127 | + .width(`${this.calcHeight(50)}lpx`) |
| 128 | + .height(`${this.calcHeight(50)}lpx`) | ||
| 128 | }.width('131lpx') | 129 | }.width('131lpx') |
| 129 | .visibility(Visibility.Hidden) | 130 | .visibility(Visibility.Hidden) |
| 130 | }.backgroundColor($r('app.color.white')) | 131 | }.backgroundColor($r('app.color.white')) |
| @@ -201,6 +202,10 @@ export default struct MinePageUserSimpleInfoUI { | @@ -201,6 +202,10 @@ export default struct MinePageUserSimpleInfoUI { | ||
| 201 | WDRouterRule.jumpWithPage(WDRouterPage.mineHomePage) | 202 | WDRouterRule.jumpWithPage(WDRouterPage.mineHomePage) |
| 202 | } | 203 | } |
| 203 | } | 204 | } |
| 205 | + | ||
| 206 | + calcHeight(value:number): number{ | ||
| 207 | + return value * this.percent | ||
| 208 | + } | ||
| 204 | } | 209 | } |
| 205 | 210 | ||
| 206 | function trackButtonClick(buttonName: string){ | 211 | function trackButtonClick(buttonName: string){ |
| @@ -4,6 +4,7 @@ import MinePagePersonalFunctionsItem from '../../viewmodel/MinePagePersonalFunct | @@ -4,6 +4,7 @@ import MinePagePersonalFunctionsItem from '../../viewmodel/MinePagePersonalFunct | ||
| 4 | export struct PagePersonFunction{ | 4 | export struct PagePersonFunction{ |
| 5 | @ObjectLink item: MinePagePersonalFunctionsItem | 5 | @ObjectLink item: MinePagePersonalFunctionsItem |
| 6 | @State noDivider:boolean = false | 6 | @State noDivider:boolean = false |
| 7 | + @Link percent:number | ||
| 7 | 8 | ||
| 8 | build() { | 9 | build() { |
| 9 | Row(){ | 10 | Row(){ |
| @@ -15,18 +16,18 @@ export struct PagePersonFunction{ | @@ -15,18 +16,18 @@ export struct PagePersonFunction{ | ||
| 15 | if (this.item.isShowRedPoint) { | 16 | if (this.item.isShowRedPoint) { |
| 16 | Button() | 17 | Button() |
| 17 | .type(ButtonType.Circle) | 18 | .type(ButtonType.Circle) |
| 18 | - .width("12lpx") | ||
| 19 | - .height("12lpx") | 19 | + .width(`${this.calcHeight(12)}lpx`) |
| 20 | + .height(`${this.calcHeight(12)}lpx`) | ||
| 20 | .backgroundColor($r('app.color.color_ED2800')) | 21 | .backgroundColor($r('app.color.color_ED2800')) |
| 21 | } | 22 | } |
| 22 | - }.width('46lpx') | ||
| 23 | - .height('46lpx') | 23 | + }.width(`${this.calcHeight(46)}lpx`) |
| 24 | + .height(`${this.calcHeight(46)}lpx`) | ||
| 24 | 25 | ||
| 25 | Text(`${this.item.msg}`) | 26 | Text(`${this.item.msg}`) |
| 26 | - .margin({top:'8lpx'}) | ||
| 27 | - .height('23lpx') | 27 | + .margin({top:`${this.calcHeight(8)}lpx`}) |
| 28 | + .height(`${this.calcHeight(23)}lpx`) | ||
| 28 | .fontColor($r('app.color.color_222222')) | 29 | .fontColor($r('app.color.color_222222')) |
| 29 | - .fontSize('23lpx') | 30 | + .fontSize(`${this.calcHeight(23)}lpx`) |
| 30 | } | 31 | } |
| 31 | .alignItems(HorizontalAlign.Center) | 32 | .alignItems(HorizontalAlign.Center) |
| 32 | .width('100%') | 33 | .width('100%') |
| @@ -35,10 +36,13 @@ export struct PagePersonFunction{ | @@ -35,10 +36,13 @@ export struct PagePersonFunction{ | ||
| 35 | if(!this.noDivider){ | 36 | if(!this.noDivider){ |
| 36 | Text().backgroundColor($r('app.color.color_222222')) | 37 | Text().backgroundColor($r('app.color.color_222222')) |
| 37 | .opacity(0.1) | 38 | .opacity(0.1) |
| 38 | - .width('2lpx') | ||
| 39 | - .height('29lpx') | 39 | + .width(`${this.calcHeight(2)}lpx`) |
| 40 | + .height(`${this.calcHeight(29)}lpx`) | ||
| 40 | } | 41 | } |
| 41 | } | 42 | } |
| 42 | } | 43 | } |
| 43 | 44 | ||
| 45 | + calcHeight(value:number): number{ | ||
| 46 | + return value * this.percent | ||
| 47 | + } | ||
| 44 | } | 48 | } |
| @@ -11,6 +11,14 @@ import { FollowOperationRequestItem } from '../../../viewmodel/FollowOperationRe | @@ -11,6 +11,14 @@ import { FollowOperationRequestItem } from '../../../viewmodel/FollowOperationRe | ||
| 11 | export struct FollowChildComponent{ | 11 | export struct FollowChildComponent{ |
| 12 | @ObjectLink data: FollowListDetailItem | 12 | @ObjectLink data: FollowListDetailItem |
| 13 | @State type:number = 0 | 13 | @State type:number = 0 |
| 14 | + @State columnHeight:number = 202 | ||
| 15 | + | ||
| 16 | + | ||
| 17 | + aboutToAppear(): void { | ||
| 18 | + if(this.type == 0 && StringUtils.isEmpty(this.data.introduction)){ | ||
| 19 | + this.columnHeight = 202 - 31 | ||
| 20 | + } | ||
| 21 | + } | ||
| 14 | 22 | ||
| 15 | build() { | 23 | build() { |
| 16 | if(this.type == 0 ){ | 24 | if(this.type == 0 ){ |
| @@ -82,6 +90,7 @@ export struct FollowChildComponent{ | @@ -82,6 +90,7 @@ export struct FollowChildComponent{ | ||
| 82 | .justifyContent(FlexAlign.Center) | 90 | .justifyContent(FlexAlign.Center) |
| 83 | .width('100lpx') | 91 | .width('100lpx') |
| 84 | .backgroundColor($r("app.color.color_F5F5F5")) | 92 | .backgroundColor($r("app.color.color_F5F5F5")) |
| 93 | + .borderRadius("6lpx") | ||
| 85 | .height('46lpx') | 94 | .height('46lpx') |
| 86 | .onClick(()=>{ | 95 | .onClick(()=>{ |
| 87 | this.followOperation() | 96 | this.followOperation() |
| @@ -114,7 +123,7 @@ export struct FollowChildComponent{ | @@ -114,7 +123,7 @@ export struct FollowChildComponent{ | ||
| 114 | .justifyContent(FlexAlign.SpaceBetween) | 123 | .justifyContent(FlexAlign.SpaceBetween) |
| 115 | .alignItems(VerticalAlign.Top) | 124 | .alignItems(VerticalAlign.Top) |
| 116 | 125 | ||
| 117 | - }.height('202lpx') | 126 | + }.height(`${this.columnHeight}lpx`) |
| 118 | .justifyContent(FlexAlign.Start) | 127 | .justifyContent(FlexAlign.Start) |
| 119 | 128 | ||
| 120 | Divider() | 129 | Divider() |
| @@ -198,6 +207,7 @@ export struct FollowChildComponent{ | @@ -198,6 +207,7 @@ export struct FollowChildComponent{ | ||
| 198 | } | 207 | } |
| 199 | .backgroundColor($r("app.color.color_F5F5F5")) | 208 | .backgroundColor($r("app.color.color_F5F5F5")) |
| 200 | .justifyContent(FlexAlign.Center) | 209 | .justifyContent(FlexAlign.Center) |
| 210 | + .borderRadius("6lpx") | ||
| 201 | .width('100lpx') | 211 | .width('100lpx') |
| 202 | .height('46lpx') | 212 | .height('46lpx') |
| 203 | .onClick(()=>{ | 213 | .onClick(()=>{ |
| @@ -10,7 +10,10 @@ const TAG = "FollowFirstTabsComponent" | @@ -10,7 +10,10 @@ const TAG = "FollowFirstTabsComponent" | ||
| 10 | export struct FollowFirstTabsComponent{ | 10 | export struct FollowFirstTabsComponent{ |
| 11 | @State currentIndex: number = 0 | 11 | @State currentIndex: number = 0 |
| 12 | @Prop changeIndex: number | 12 | @Prop changeIndex: number |
| 13 | - private controller: TabsController = new TabsController() | 13 | + |
| 14 | + private swiperController: SwiperController = new SwiperController() | ||
| 15 | + private listScroller: Scroller = new Scroller() | ||
| 16 | + | ||
| 14 | @State data:FollowListItem[] = [] | 17 | @State data:FollowListItem[] = [] |
| 15 | fontColor: string = '#999999' | 18 | fontColor: string = '#999999' |
| 16 | selectedFontColor: string = '#000000' | 19 | selectedFontColor: string = '#000000' |
| @@ -20,7 +23,7 @@ export struct FollowFirstTabsComponent{ | @@ -20,7 +23,7 @@ export struct FollowFirstTabsComponent{ | ||
| 20 | this.getFollowTabList() | 23 | this.getFollowTabList() |
| 21 | 24 | ||
| 22 | EmitterUtils.receiveEvent(EmitterEventId.MY_FOLLOW_EMPTY, (() => { | 25 | EmitterUtils.receiveEvent(EmitterEventId.MY_FOLLOW_EMPTY, (() => { |
| 23 | - if(this.controller != null && this.data.length>1 ){ | 26 | + if(this.swiperController != null && this.data.length>1 ){ |
| 24 | this.jumpFollowNextPage() | 27 | this.jumpFollowNextPage() |
| 25 | } | 28 | } |
| 26 | })) | 29 | })) |
| @@ -33,7 +36,7 @@ export struct FollowFirstTabsComponent{ | @@ -33,7 +36,7 @@ export struct FollowFirstTabsComponent{ | ||
| 33 | this.data.push(element) | 36 | this.data.push(element) |
| 34 | }) | 37 | }) |
| 35 | 38 | ||
| 36 | - if(this.controller != null && this.data.length>1 && this.changeIndex === 1){ | 39 | + if(this.swiperController != null && this.data.length>1 && this.changeIndex === 1){ |
| 37 | this.jumpFollowNextPage() | 40 | this.jumpFollowNextPage() |
| 38 | } | 41 | } |
| 39 | }).catch((err:Error)=>{ | 42 | }).catch((err:Error)=>{ |
| @@ -45,7 +48,7 @@ export struct FollowFirstTabsComponent{ | @@ -45,7 +48,7 @@ export struct FollowFirstTabsComponent{ | ||
| 45 | //个人主页 跳转 关注页 tab 2 | 48 | //个人主页 跳转 关注页 tab 2 |
| 46 | let intervalID = setInterval(() => { | 49 | let intervalID = setInterval(() => { |
| 47 | this.currentIndex = 1 | 50 | this.currentIndex = 1 |
| 48 | - this.controller.changeIndex(this.currentIndex) | 51 | + this.swiperController.changeIndex(this.currentIndex) |
| 49 | clearInterval(intervalID); | 52 | clearInterval(intervalID); |
| 50 | }, 500); | 53 | }, 500); |
| 51 | } | 54 | } |
| @@ -70,7 +73,8 @@ export struct FollowFirstTabsComponent{ | @@ -70,7 +73,8 @@ export struct FollowFirstTabsComponent{ | ||
| 70 | } | 73 | } |
| 71 | }.onClick(()=>{ | 74 | }.onClick(()=>{ |
| 72 | this.currentIndex = index | 75 | this.currentIndex = index |
| 73 | - this.controller.changeIndex(this.currentIndex) | 76 | + this.swiperController.changeIndex(this.currentIndex) |
| 77 | + this.listScroller.scrollToIndex(index, true, ScrollAlign.CENTER) | ||
| 74 | trackTabFirstClick(item.directoryName) | 78 | trackTabFirstClick(item.directoryName) |
| 75 | }) | 79 | }) |
| 76 | .height('100%') | 80 | .height('100%') |
| @@ -90,28 +94,38 @@ export struct FollowFirstTabsComponent{ | @@ -90,28 +94,38 @@ export struct FollowFirstTabsComponent{ | ||
| 90 | .layoutWeight(1) | 94 | .layoutWeight(1) |
| 91 | .width('100%') | 95 | .width('100%') |
| 92 | }else{ | 96 | }else{ |
| 93 | - Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { | 97 | + Column(){ |
| 98 | + List({ scroller: this.listScroller }){ | ||
| 99 | + ForEach(this.data, (item: FollowListItem, index: number ) => { | ||
| 100 | + ListItem(){ | ||
| 101 | + this.TabBuilder(index,item) | ||
| 102 | + } | ||
| 103 | + }, (item: FollowListItem, index: number) => index.toString()) | ||
| 104 | + }.listDirection(Axis.Horizontal) | ||
| 105 | + .backgroundColor($r('app.color.white')) | ||
| 106 | + .width("100%") | ||
| 107 | + .height("84lpx") | ||
| 108 | + .edgeEffect(EdgeEffect.None) | ||
| 109 | + .scrollBar(BarState.Off) | ||
| 110 | + | ||
| 111 | + Swiper(this.swiperController){ | ||
| 94 | ForEach(this.data, (item: FollowListItem, index: number ) => { | 112 | ForEach(this.data, (item: FollowListItem, index: number ) => { |
| 95 | - TabContent(){ | ||
| 96 | FollowSecondTabsComponent({data:$data,firstIndex:index}) | 113 | FollowSecondTabsComponent({data:$data,firstIndex:index}) |
| 97 | - }.tabBar(this.TabBuilder(index,item)) | ||
| 98 | .backgroundColor($r('app.color.white')) | 114 | .backgroundColor($r('app.color.white')) |
| 99 | - .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]) | ||
| 100 | }, (item: FollowListItem, index: number) => index.toString()) | 115 | }, (item: FollowListItem, index: number) => index.toString()) |
| 101 | } | 116 | } |
| 102 | - .vertical(false) | ||
| 103 | - .barMode(BarMode.Scrollable) | ||
| 104 | - .barWidth('100%') | ||
| 105 | - .barBackgroundColor($r('app.color.white')) | ||
| 106 | - .barHeight('84lpx') | ||
| 107 | - .animationDuration(0) | ||
| 108 | .onChange((index: number) => { | 117 | .onChange((index: number) => { |
| 109 | this.currentIndex = index | 118 | this.currentIndex = index |
| 110 | trackTabFirstClick(this.data[index].directoryName) | 119 | trackTabFirstClick(this.data[index].directoryName) |
| 120 | + this.listScroller.scrollToIndex(index, true, ScrollAlign.CENTER) | ||
| 111 | }) | 121 | }) |
| 112 | .width('100%') | 122 | .width('100%') |
| 113 | .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]) | 123 | .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]) |
| 114 | .layoutWeight(1) | 124 | .layoutWeight(1) |
| 125 | + .loop(false) | ||
| 126 | + .indicator(false) | ||
| 127 | + .effectMode(EdgeEffect.None) | ||
| 128 | + }.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]) | ||
| 115 | } | 129 | } |
| 116 | }.width('100%') | 130 | }.width('100%') |
| 117 | .height("100%") | 131 | .height("100%") |
| @@ -98,6 +98,7 @@ export struct FollowListDetailUI { | @@ -98,6 +98,7 @@ export struct FollowListDetailUI { | ||
| 98 | ListItem() { | 98 | ListItem() { |
| 99 | ListHasNoMoreDataUI() | 99 | ListHasNoMoreDataUI() |
| 100 | } | 100 | } |
| 101 | + .margin({bottom:"40lpx"}) | ||
| 101 | } | 102 | } |
| 102 | } | 103 | } |
| 103 | .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]) | 104 | .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]) |
| @@ -143,13 +144,11 @@ export struct FollowListDetailUI { | @@ -143,13 +144,11 @@ export struct FollowListDetailUI { | ||
| 143 | value.list.forEach((value) => { | 144 | value.list.forEach((value) => { |
| 144 | let fansNum: number = value.fansNum | 145 | let fansNum: number = value.fansNum |
| 145 | let fansNumString = "" | 146 | let fansNumString = "" |
| 146 | - if (fansNum > 10000) { | ||
| 147 | - let temp = (fansNum / 10000) + "" | ||
| 148 | - let index = temp.indexOf('.') | ||
| 149 | - if (index != -1) { | ||
| 150 | - temp = temp.substring(0, index + 2) | ||
| 151 | - } else { | ||
| 152 | - temp = temp | 147 | + |
| 148 | + if (fansNum >= 10000) { | ||
| 149 | + let temp = (fansNum / 10000) .toFixed(1) | ||
| 150 | + if (Number(temp.substring(temp.length-1)) == 0) { | ||
| 151 | + temp = temp.substring(0, temp.length-2) | ||
| 153 | } | 152 | } |
| 154 | fansNumString = temp + "万" | 153 | fansNumString = temp + "万" |
| 155 | } else { | 154 | } else { |
sight_harmony/features/wdComponent/src/main/ets/components/mine/follow/FollowSecondTabsComponent.ets
| @@ -7,7 +7,7 @@ export struct FollowSecondTabsComponent{ | @@ -7,7 +7,7 @@ export struct FollowSecondTabsComponent{ | ||
| 7 | @Link data:FollowListItem[] | 7 | @Link data:FollowListItem[] |
| 8 | @State firstIndex:number = 0 | 8 | @State firstIndex:number = 0 |
| 9 | @State currentIndex: number = 0 | 9 | @State currentIndex: number = 0 |
| 10 | - private controller: TabsController = new TabsController() | 10 | + private swiperController: SwiperController = new SwiperController() |
| 11 | fontColor: string = '#000000' | 11 | fontColor: string = '#000000' |
| 12 | selectedFontColor: string = '#ED2800' | 12 | selectedFontColor: string = '#ED2800' |
| 13 | 13 | ||
| @@ -77,20 +77,16 @@ export struct FollowSecondTabsComponent{ | @@ -77,20 +77,16 @@ export struct FollowSecondTabsComponent{ | ||
| 77 | .alignItems(VerticalAlign.Top) | 77 | .alignItems(VerticalAlign.Top) |
| 78 | .height('100%') | 78 | .height('100%') |
| 79 | 79 | ||
| 80 | - Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { | 80 | + Swiper(this.swiperController ) { |
| 81 | ForEach(this.data[this.firstIndex].children, (item: FollowSecondListItem, index: number ) => { | 81 | ForEach(this.data[this.firstIndex].children, (item: FollowSecondListItem, index: number ) => { |
| 82 | - TabContent(){ | ||
| 83 | FollowThirdTabsComponent({data:$data,firstIndex:$firstIndex,secondIndex:index}) | 82 | FollowThirdTabsComponent({data:$data,firstIndex:$firstIndex,secondIndex:index}) |
| 84 | - }.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]) | ||
| 85 | }, (item: FollowListItem, index: number) => index.toString()) | 83 | }, (item: FollowListItem, index: number) => index.toString()) |
| 86 | } | 84 | } |
| 85 | + .loop(false) | ||
| 87 | .vertical(true) | 86 | .vertical(true) |
| 88 | - .barMode(BarMode.Scrollable) | ||
| 89 | - .animationDuration(0) | ||
| 90 | - .onChange((index: number) => { | ||
| 91 | - this.currentIndex = index | ||
| 92 | - }) | ||
| 93 | - .barWidth(0) | 87 | + .indicator(false) |
| 88 | + .disableSwipe(true) | ||
| 89 | + .effectMode(EdgeEffect.None) | ||
| 94 | .height('100%') | 90 | .height('100%') |
| 95 | .layoutWeight(1) | 91 | .layoutWeight(1) |
| 96 | .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]) | 92 | .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]) |
| @@ -110,7 +106,7 @@ export struct FollowSecondTabsComponent{ | @@ -110,7 +106,7 @@ export struct FollowSecondTabsComponent{ | ||
| 110 | } | 106 | } |
| 111 | .onClick(()=>{ | 107 | .onClick(()=>{ |
| 112 | this.currentIndex = index | 108 | this.currentIndex = index |
| 113 | - this.controller.changeIndex(this.currentIndex) | 109 | + this.swiperController.changeIndex(this.currentIndex) |
| 114 | }) | 110 | }) |
| 115 | .justifyContent(FlexAlign.Center) | 111 | .justifyContent(FlexAlign.Center) |
| 116 | .height('84lpx') | 112 | .height('84lpx') |
| @@ -10,8 +10,8 @@ export struct FollowThirdTabsComponent{ | @@ -10,8 +10,8 @@ export struct FollowThirdTabsComponent{ | ||
| 10 | @Link firstIndex: number | 10 | @Link firstIndex: number |
| 11 | @State secondIndex:number = -1 | 11 | @State secondIndex:number = -1 |
| 12 | 12 | ||
| 13 | - | ||
| 14 | - private controller: TabsController = new TabsController() | 13 | + private swiperController: SwiperController = new SwiperController() |
| 14 | + private listScroller: Scroller = new Scroller() | ||
| 15 | fontColor: string = '#666666' | 15 | fontColor: string = '#666666' |
| 16 | selectedFontColor: string = '#222222' | 16 | selectedFontColor: string = '#222222' |
| 17 | 17 | ||
| @@ -50,7 +50,8 @@ export struct FollowThirdTabsComponent{ | @@ -50,7 +50,8 @@ export struct FollowThirdTabsComponent{ | ||
| 50 | } | 50 | } |
| 51 | .onClick(()=>{ | 51 | .onClick(()=>{ |
| 52 | this.currentIndex = index | 52 | this.currentIndex = index |
| 53 | - this.controller.changeIndex(this.currentIndex) | 53 | + this.swiperController.changeIndex(this.currentIndex) |
| 54 | + this.listScroller.scrollToIndex(index, true, ScrollAlign.CENTER) | ||
| 54 | }) | 55 | }) |
| 55 | .offset({x:index === 0?"0lpx":"-5lpx"}) | 56 | .offset({x:index === 0?"0lpx":"-5lpx"}) |
| 56 | .height('80lpx') | 57 | .height('80lpx') |
| @@ -62,31 +63,47 @@ export struct FollowThirdTabsComponent{ | @@ -62,31 +63,47 @@ export struct FollowThirdTabsComponent{ | ||
| 62 | @Builder FollowThirdUI(){ | 63 | @Builder FollowThirdUI(){ |
| 63 | 64 | ||
| 64 | Column(){ | 65 | Column(){ |
| 65 | - Column() { | ||
| 66 | - // 页签 | ||
| 67 | - Row() { | ||
| 68 | - Scroll() { | ||
| 69 | - Row() { | 66 | + |
| 67 | + List({ scroller: this.listScroller }){ | ||
| 70 | ForEach(this.data[this.firstIndex].children[this.secondIndex].children, (item: FollowThirdListItem, index: number ) => { | 68 | ForEach(this.data[this.firstIndex].children[this.secondIndex].children, (item: FollowThirdListItem, index: number ) => { |
| 69 | + ListItem(){ | ||
| 71 | this.TabBuilder(index,item) | 70 | this.TabBuilder(index,item) |
| 72 | - }) | ||
| 73 | } | 71 | } |
| 74 | - .justifyContent(FlexAlign.Start) | 72 | + }) |
| 75 | } | 73 | } |
| 76 | - .align(Alignment.Start) | ||
| 77 | - .scrollable(ScrollDirection.Horizontal) | 74 | + .backgroundColor($r('app.color.white')) |
| 75 | + .edgeEffect(EdgeEffect.None) | ||
| 78 | .scrollBar(BarState.Off) | 76 | .scrollBar(BarState.Off) |
| 77 | + .listDirection(Axis.Horizontal) | ||
| 79 | .width('100%') | 78 | .width('100%') |
| 79 | + .height("84lpx") | ||
| 80 | .padding({left:'31lpx',right:'48lpx'}) | 80 | .padding({left:'31lpx',right:'48lpx'}) |
| 81 | - } | ||
| 82 | - .alignItems(VerticalAlign.Bottom) | ||
| 83 | - .width('100%') | ||
| 84 | - } | ||
| 85 | - .backgroundColor($r('app.color.white')) | ||
| 86 | - .alignItems(HorizontalAlign.Start) | ||
| 87 | - .width('100%') | ||
| 88 | 81 | ||
| 89 | - Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { | 82 | + // Column() { |
| 83 | + // // 页签 | ||
| 84 | + // Row() { | ||
| 85 | + // Scroll() { | ||
| 86 | + // Row() { | ||
| 87 | + // ForEach(this.data[this.firstIndex].children[this.secondIndex].children, (item: FollowThirdListItem, index: number ) => { | ||
| 88 | + // this.TabBuilder(index,item) | ||
| 89 | + // }) | ||
| 90 | + // } | ||
| 91 | + // .justifyContent(FlexAlign.Start) | ||
| 92 | + // } | ||
| 93 | + // .align(Alignment.Start) | ||
| 94 | + // .scrollable(ScrollDirection.Horizontal) | ||
| 95 | + // .scrollBar(BarState.Off) | ||
| 96 | + // .width('100%') | ||
| 97 | + // .padding({left:'31lpx',right:'48lpx'}) | ||
| 98 | + // } | ||
| 99 | + // .alignItems(VerticalAlign.Bottom) | ||
| 100 | + // .width('100%') | ||
| 101 | + // } | ||
| 102 | + // .backgroundColor($r('app.color.white')) | ||
| 103 | + // .alignItems(HorizontalAlign.Start) | ||
| 104 | + // .width('100%') | ||
| 105 | + | ||
| 106 | + Swiper(this.swiperController ) { | ||
| 90 | ForEach(this.data[this.firstIndex].children[this.secondIndex].children, (item: FollowThirdListItem, index: number ) => { | 107 | ForEach(this.data[this.firstIndex].children[this.secondIndex].children, (item: FollowThirdListItem, index: number ) => { |
| 91 | TabContent(){ | 108 | TabContent(){ |
| 92 | Column(){ | 109 | Column(){ |
| @@ -96,12 +113,12 @@ export struct FollowThirdTabsComponent{ | @@ -96,12 +113,12 @@ export struct FollowThirdTabsComponent{ | ||
| 96 | .backgroundColor($r('app.color.white')) | 113 | .backgroundColor($r('app.color.white')) |
| 97 | }, (item: FollowListItem, index: number) => index.toString()) | 114 | }, (item: FollowListItem, index: number) => index.toString()) |
| 98 | } | 115 | } |
| 99 | - .barHeight(0) | ||
| 100 | - .vertical(false) | ||
| 101 | - .barMode(BarMode.Scrollable) | ||
| 102 | - .animationDuration(0) | 116 | + .loop(false) |
| 117 | + .indicator(false) | ||
| 118 | + .disableSwipe(true) | ||
| 119 | + .effectMode(EdgeEffect.None) | ||
| 103 | .onChange((index: number) => { | 120 | .onChange((index: number) => { |
| 104 | - this.currentIndex = index | 121 | + // this.currentIndex = index |
| 105 | }) | 122 | }) |
| 106 | .width('100%') | 123 | .width('100%') |
| 107 | .layoutWeight(1) | 124 | .layoutWeight(1) |
| @@ -5,7 +5,7 @@ import MinePageDatasModel from '../../model/MinePageDatasModel' | @@ -5,7 +5,7 @@ import MinePageDatasModel from '../../model/MinePageDatasModel' | ||
| 5 | import MinePageUserSimpleInfoUI from '../mine/MinePageUserSimpleInfoUI' | 5 | import MinePageUserSimpleInfoUI from '../mine/MinePageUserSimpleInfoUI' |
| 6 | import MinePagePersonFunctionUI from '../mine/MinePagePersonFunctionUI' | 6 | import MinePagePersonFunctionUI from '../mine/MinePagePersonFunctionUI' |
| 7 | import MinePageMoreFunctionUI from '../mine/MinePageMoreFunctionUI' | 7 | import MinePageMoreFunctionUI from '../mine/MinePageMoreFunctionUI' |
| 8 | -import { DateTimeUtils, SPHelper, StringUtils } from 'wdKit' | 8 | +import { BreakpointSystem, DateTimeUtils, SPHelper, StringUtils } from 'wdKit' |
| 9 | import { SpConstants } from 'wdConstant' | 9 | import { SpConstants } from 'wdConstant' |
| 10 | import dataPreferences from '@ohos.data.preferences'; | 10 | import dataPreferences from '@ohos.data.preferences'; |
| 11 | import { MergeRecordDialog } from '../../dialog/MergeRecordDialog' | 11 | import { MergeRecordDialog } from '../../dialog/MergeRecordDialog' |
| @@ -59,6 +59,20 @@ export struct MinePageComponent { | @@ -59,6 +59,20 @@ export struct MinePageComponent { | ||
| 59 | pageHideTime:number = 0; | 59 | pageHideTime:number = 0; |
| 60 | pageFirstCreateTime:number = 0; | 60 | pageFirstCreateTime:number = 0; |
| 61 | @Prop isMinePage:boolean = false; | 61 | @Prop isMinePage:boolean = false; |
| 62 | + @StorageProp('currentBreakpoint') @Watch("currentChanged")currentBreakpoint: string = 'sm'; | ||
| 63 | + private breakpointSystem = new BreakpointSystem(); | ||
| 64 | + @State percent:number = 1 | ||
| 65 | + | ||
| 66 | + currentChanged(){ | ||
| 67 | + if(this.currentBreakpoint == "md" || this.currentBreakpoint == "lg"){ | ||
| 68 | + //大屏幕 折叠屏 或者ipad | ||
| 69 | + this.percent = 0.7 | ||
| 70 | + }else { | ||
| 71 | + this.percent = 1 | ||
| 72 | + } | ||
| 73 | + console.log(TAG,"currentBreakpoint==>"+this.percent) | ||
| 74 | + } | ||
| 75 | + | ||
| 62 | 76 | ||
| 63 | //第一次还没创建时候 pageShow 接收不到监听 | 77 | //第一次还没创建时候 pageShow 接收不到监听 |
| 64 | async pageShowForUpdateData() { | 78 | async pageShowForUpdateData() { |
| @@ -85,11 +99,14 @@ export struct MinePageComponent { | @@ -85,11 +99,14 @@ export struct MinePageComponent { | ||
| 85 | } | 99 | } |
| 86 | 100 | ||
| 87 | aboutToAppear(){ | 101 | aboutToAppear(){ |
| 102 | + this.breakpointSystem.register(); | ||
| 88 | this.pageFirstCreateTime = DateTimeUtils.getTimeStamp() | 103 | this.pageFirstCreateTime = DateTimeUtils.getTimeStamp() |
| 89 | 104 | ||
| 90 | this.getFunctionData() | 105 | this.getFunctionData() |
| 91 | this.getUserLogin() | 106 | this.getUserLogin() |
| 92 | this.addLoginStatusObserver() | 107 | this.addLoginStatusObserver() |
| 108 | + console.log(TAG,"currentBreakpoint==>"+this.currentBreakpoint) | ||
| 109 | + this.currentChanged() | ||
| 93 | } | 110 | } |
| 94 | 111 | ||
| 95 | getMessageData(){ | 112 | getMessageData(){ |
| @@ -119,6 +136,7 @@ export struct MinePageComponent { | @@ -119,6 +136,7 @@ export struct MinePageComponent { | ||
| 119 | } | 136 | } |
| 120 | 137 | ||
| 121 | aboutToDisappear(): void { | 138 | aboutToDisappear(): void { |
| 139 | + this.breakpointSystem.unregister(); | ||
| 122 | if(this.preferences){ | 140 | if(this.preferences){ |
| 123 | this.preferences.off('change', this.observer); | 141 | this.preferences.off('change', this.observer); |
| 124 | } | 142 | } |
| @@ -139,7 +157,7 @@ export struct MinePageComponent { | @@ -139,7 +157,7 @@ export struct MinePageComponent { | ||
| 139 | Stack(){ | 157 | Stack(){ |
| 140 | Image($r('app.media.mine_head_bg')) | 158 | Image($r('app.media.mine_head_bg')) |
| 141 | .width('100%') | 159 | .width('100%') |
| 142 | - .height('657lpx') | 160 | + .height(`${657 * this.percent}lpx`) |
| 143 | .objectFit(ImageFit.Auto) | 161 | .objectFit(ImageFit.Auto) |
| 144 | this.MinePageUI() | 162 | this.MinePageUI() |
| 145 | } | 163 | } |
| @@ -155,16 +173,16 @@ export struct MinePageComponent { | @@ -155,16 +173,16 @@ export struct MinePageComponent { | ||
| 155 | @Builder MinePageUI(){ | 173 | @Builder MinePageUI(){ |
| 156 | Column(){ | 174 | Column(){ |
| 157 | //头像层 | 175 | //头像层 |
| 158 | - MinePageUserSimpleInfoUI({isLogin:this.isLogin}) | 176 | + MinePageUserSimpleInfoUI({isLogin:this.isLogin,percent:$percent}) |
| 159 | //Grid 区域 | 177 | //Grid 区域 |
| 160 | - MinePagePersonFunctionUI({personalData:$personalData,isLogin:this.isLogin}) | 178 | + MinePagePersonFunctionUI({personalData:$personalData,isLogin:this.isLogin,percent:$percent}) |
| 161 | //Card | 179 | //Card |
| 162 | //MinePageCardUI() | 180 | //MinePageCardUI() |
| 163 | //创作者区域 | 181 | //创作者区域 |
| 164 | 182 | ||
| 165 | //MinePageCreatorFunctionUI({creatorData:$creatorData}) | 183 | //MinePageCreatorFunctionUI({creatorData:$creatorData}) |
| 166 | //更多功能 | 184 | //更多功能 |
| 167 | - MinePageMoreFunctionUI({moreData:$moreData}) | 185 | + MinePageMoreFunctionUI({moreData:$moreData,percent:$percent}) |
| 168 | }.width('100%') | 186 | }.width('100%') |
| 169 | .height('100%') | 187 | .height('100%') |
| 170 | .justifyContent(FlexAlign.Start) | 188 | .justifyContent(FlexAlign.Start) |
| @@ -8,6 +8,62 @@ export struct HorizontalStrokeCardThreeTwoRadioForMoreComponent { | @@ -8,6 +8,62 @@ export struct HorizontalStrokeCardThreeTwoRadioForMoreComponent { | ||
| 8 | @State compDTO: CompDTO = {} as CompDTO | 8 | @State compDTO: CompDTO = {} as CompDTO |
| 9 | @State pageId: string = ''; | 9 | @State pageId: string = ''; |
| 10 | @State pageName: string = ''; | 10 | @State pageName: string = ''; |
| 11 | + @State initMoreWidth: number = 16; | ||
| 12 | + @State moreWidth:number = 16 | ||
| 13 | + @State moreTips: string = '' | ||
| 14 | + scroller: Scroller = new Scroller() | ||
| 15 | + | ||
| 16 | + resetMoreTips() { | ||
| 17 | + console.log('resetMoreTips', this.moreWidth, this.initMoreWidth) | ||
| 18 | + if (this.moreWidth < this.initMoreWidth * 2) { | ||
| 19 | + this.moreTips = '查看更多'; | ||
| 20 | + } | ||
| 21 | + } | ||
| 22 | + | ||
| 23 | + edgeAnimation() { | ||
| 24 | + if (this.moreWidth < this.initMoreWidth * 3) { | ||
| 25 | + if (!this.moreTips) { | ||
| 26 | + this.moreTips = '查看更多'; | ||
| 27 | + } | ||
| 28 | + this.moreWidth = this.moreWidth + 2 | ||
| 29 | + } | ||
| 30 | + if (this.moreWidth > this.initMoreWidth * 2) { | ||
| 31 | + this.moreTips = '松手查看'; | ||
| 32 | + } else { | ||
| 33 | + | ||
| 34 | + } | ||
| 35 | + } | ||
| 36 | + | ||
| 37 | + reverseEdgeAnimation() { | ||
| 38 | + if (this.moreWidth > this.initMoreWidth) { | ||
| 39 | + this.moreWidth = this.moreWidth - 2 | ||
| 40 | + } | ||
| 41 | + this.resetMoreTips() | ||
| 42 | + } | ||
| 43 | + | ||
| 44 | + resetEdgeAnimation() { | ||
| 45 | + if (this.moreWidth > this.initMoreWidth) { | ||
| 46 | + this.moreWidth = this.moreWidth - 1 | ||
| 47 | + this.resetEdgeAnimation(); | ||
| 48 | + } | ||
| 49 | + this.resetMoreTips() | ||
| 50 | + } | ||
| 51 | + | ||
| 52 | + toMore() { | ||
| 53 | + if (this.moreWidth > this.initMoreWidth * 2) { | ||
| 54 | + if (this.compDTO.linkUrl) { | ||
| 55 | + let taskAction: Action = { | ||
| 56 | + type: 'JUMP_H5_BY_WEB_VIEW', | ||
| 57 | + params: { | ||
| 58 | + url: this.compDTO.linkUrl | ||
| 59 | + } as Params, | ||
| 60 | + }; | ||
| 61 | + WDRouterRule.jumpWithAction(taskAction) | ||
| 62 | + } else { | ||
| 63 | + this.jumpToLiveMorePage() | ||
| 64 | + } | ||
| 65 | + } | ||
| 66 | + } | ||
| 11 | 67 | ||
| 12 | build() { | 68 | build() { |
| 13 | Column() { | 69 | Column() { |
| @@ -48,15 +104,15 @@ export struct HorizontalStrokeCardThreeTwoRadioForMoreComponent { | @@ -48,15 +104,15 @@ export struct HorizontalStrokeCardThreeTwoRadioForMoreComponent { | ||
| 48 | }) | 104 | }) |
| 49 | 105 | ||
| 50 | }.justifyContent(FlexAlign.SpaceBetween) | 106 | }.justifyContent(FlexAlign.SpaceBetween) |
| 51 | - .padding({ left: 16, right: 16 }) | 107 | + // .padding({ left: 16, right: 16 }) |
| 52 | .margin({ top: 8, bottom: 8 }) | 108 | .margin({ top: 8, bottom: 8 }) |
| 53 | .width('100%') | 109 | .width('100%') |
| 54 | 110 | ||
| 55 | // .backgroundColor($r("app.color.white")) | 111 | // .backgroundColor($r("app.color.white")) |
| 56 | - List({ space: 12 }) { | ||
| 57 | - | 112 | + Scroll(this.scroller) { |
| 113 | + Row() { | ||
| 114 | + Row() { | ||
| 58 | ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => { | 115 | ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => { |
| 59 | - ListItem() { | ||
| 60 | Column() { | 116 | Column() { |
| 61 | Image(item.coverUrl) | 117 | Image(item.coverUrl) |
| 62 | .aspectRatio(1.5) | 118 | .aspectRatio(1.5) |
| @@ -75,30 +131,68 @@ export struct HorizontalStrokeCardThreeTwoRadioForMoreComponent { | @@ -75,30 +131,68 @@ export struct HorizontalStrokeCardThreeTwoRadioForMoreComponent { | ||
| 75 | .width(150) | 131 | .width(150) |
| 76 | .lineHeight(19) | 132 | .lineHeight(19) |
| 77 | } | 133 | } |
| 78 | - } | ||
| 79 | - .padding({ left: (index == 0) ? 16 : 0, right: (index == this.compDTO.operDataList.length - 1) ? 16 : 0 }) | 134 | + .padding({ right: 16 }) |
| 80 | // .offset({x:16}) | 135 | // .offset({x:16}) |
| 81 | .onClick(() => { | 136 | .onClick(() => { |
| 82 | InfomationCardClick.track(this.compDTO, item, this.pageId, this.pageName) | 137 | InfomationCardClick.track(this.compDTO, item, this.pageId, this.pageName) |
| 83 | ProcessUtils.processPage(item) | 138 | ProcessUtils.processPage(item) |
| 84 | }) | 139 | }) |
| 85 | }) | 140 | }) |
| 86 | - | ||
| 87 | - }.listDirection(Axis.Horizontal) | 141 | + } |
| 142 | + if (this.compDTO.operDataList.length > 2) { | ||
| 143 | + Column() { | ||
| 144 | + if (this.moreWidth > this.initMoreWidth + 2) { | ||
| 145 | + Text(this.moreTips) | ||
| 146 | + .fontSize(8) | ||
| 147 | + .fontColor(0x858585) | ||
| 148 | + .width(8) | ||
| 149 | + } | ||
| 150 | + } | ||
| 151 | + .justifyContent(FlexAlign.Center) | ||
| 152 | + .align(Alignment.Center) | ||
| 153 | + .width(this.moreWidth) | ||
| 154 | + .backgroundColor(0xf1f3f4) | ||
| 155 | + .borderRadius({ topLeft: 5, bottomLeft: 5 }) | ||
| 156 | + .height(this.compDTO.operDataList.length == 2 ? 180 : 146) | ||
| 157 | + } | ||
| 158 | + } | ||
| 159 | + } | ||
| 160 | + .align(Alignment.Start) | ||
| 161 | + .scrollable(this.compDTO.operDataList.length > 2 ? ScrollDirection.Horizontal : ScrollDirection.None) | ||
| 88 | .scrollBar(BarState.Off) | 162 | .scrollBar(BarState.Off) |
| 89 | - .width('100%') | 163 | + .edgeEffect(EdgeEffect.None) |
| 164 | + .onReachEnd(() => { | ||
| 165 | + this.edgeAnimation() | ||
| 166 | + }) | ||
| 167 | + .onScrollStop(() => { | ||
| 168 | + // this.resetEdgeAnimation(); | ||
| 169 | + }) | ||
| 170 | + .onScroll((xOffset: number, yOffset: number) => { | ||
| 171 | + if (xOffset < 0) { | ||
| 172 | + this.reverseEdgeAnimation(); | ||
| 173 | + } | ||
| 174 | + }) | ||
| 175 | + .onTouch((event?: TouchEvent) => { | ||
| 176 | + if(event) { | ||
| 177 | + if (event.type === TouchType.Up) { | ||
| 178 | + this.toMore(); | ||
| 179 | + this.resetEdgeAnimation(); | ||
| 180 | + } | ||
| 181 | + } | ||
| 182 | + }) | ||
| 183 | + // .width('100%') | ||
| 90 | 184 | ||
| 91 | // .backgroundColor($r("app.color.color_FE4B05")) | 185 | // .backgroundColor($r("app.color.color_FE4B05")) |
| 92 | // .padding({left:16,right:16}) | 186 | // .padding({left:16,right:16}) |
| 93 | // .margin({left:16,right:16}) | 187 | // .margin({left:16,right:16}) |
| 94 | 188 | ||
| 95 | } | 189 | } |
| 96 | - .width("100%") | 190 | + // .width("100%") |
| 97 | .padding({ | 191 | .padding({ |
| 98 | - top: 14, | ||
| 99 | - left: 0, | ||
| 100 | - right: 0, | ||
| 101 | - bottom: 14 | 192 | + left: $r('app.float.card_comp_pagePadding_lf'), |
| 193 | + right: $r('app.float.card_comp_pagePadding_lf'), | ||
| 194 | + top: $r('app.float.card_comp_pagePadding_tb'), | ||
| 195 | + bottom: $r('app.float.card_comp_pagePadding_tb') | ||
| 102 | }) | 196 | }) |
| 103 | .backgroundColor($r("app.color.white")) | 197 | .backgroundColor($r("app.color.white")) |
| 104 | // .backgroundColor($r("app.color.color_FE4B05")) | 198 | // .backgroundColor($r("app.color.color_FE4B05")) |
| @@ -18,6 +18,62 @@ export struct LiveHorizontalCardComponent { | @@ -18,6 +18,62 @@ export struct LiveHorizontalCardComponent { | ||
| 18 | @State pageName: string = ''; | 18 | @State pageName: string = ''; |
| 19 | @State compDTO: CompDTO = {} as CompDTO | 19 | @State compDTO: CompDTO = {} as CompDTO |
| 20 | @State loadImg: boolean = false; | 20 | @State loadImg: boolean = false; |
| 21 | + @State initMoreWidth: number = 16; | ||
| 22 | + @State moreWidth:number = 16 | ||
| 23 | + @State moreTips: string = '' | ||
| 24 | + scroller: Scroller = new Scroller() | ||
| 25 | + | ||
| 26 | + resetMoreTips() { | ||
| 27 | + console.log('resetMoreTips', this.moreWidth, this.initMoreWidth) | ||
| 28 | + if (this.moreWidth < this.initMoreWidth * 2) { | ||
| 29 | + this.moreTips = '查看更多'; | ||
| 30 | + } | ||
| 31 | + } | ||
| 32 | + | ||
| 33 | + edgeAnimation() { | ||
| 34 | + if (this.moreWidth < this.initMoreWidth * 3) { | ||
| 35 | + if (!this.moreTips) { | ||
| 36 | + this.moreTips = '查看更多'; | ||
| 37 | + } | ||
| 38 | + this.moreWidth = this.moreWidth + 2 | ||
| 39 | + } | ||
| 40 | + if (this.moreWidth > this.initMoreWidth * 2) { | ||
| 41 | + this.moreTips = '松手查看'; | ||
| 42 | + } else { | ||
| 43 | + | ||
| 44 | + } | ||
| 45 | + } | ||
| 46 | + | ||
| 47 | + reverseEdgeAnimation() { | ||
| 48 | + if (this.moreWidth > this.initMoreWidth) { | ||
| 49 | + this.moreWidth = this.moreWidth - 2 | ||
| 50 | + } | ||
| 51 | + this.resetMoreTips() | ||
| 52 | + } | ||
| 53 | + | ||
| 54 | + resetEdgeAnimation() { | ||
| 55 | + if (this.moreWidth > this.initMoreWidth) { | ||
| 56 | + this.moreWidth = this.moreWidth - 1 | ||
| 57 | + this.resetEdgeAnimation(); | ||
| 58 | + } | ||
| 59 | + this.resetMoreTips() | ||
| 60 | + } | ||
| 61 | + | ||
| 62 | + toMore() { | ||
| 63 | + if (this.moreWidth > this.initMoreWidth * 2) { | ||
| 64 | + if (this.compDTO.linkUrl) { | ||
| 65 | + let taskAction: Action = { | ||
| 66 | + type: 'JUMP_H5_BY_WEB_VIEW', | ||
| 67 | + params: { | ||
| 68 | + url: this.compDTO.linkUrl | ||
| 69 | + } as Params, | ||
| 70 | + }; | ||
| 71 | + WDRouterRule.jumpWithAction(taskAction) | ||
| 72 | + } else { | ||
| 73 | + this.jumpToLiveMorePage() | ||
| 74 | + } | ||
| 75 | + } | ||
| 76 | + } | ||
| 21 | 77 | ||
| 22 | async aboutToAppear(): Promise<void> { | 78 | async aboutToAppear(): Promise<void> { |
| 23 | this.loadImg = await onlyWifiLoadImg(); | 79 | this.loadImg = await onlyWifiLoadImg(); |
| @@ -63,15 +119,16 @@ export struct LiveHorizontalCardComponent { | @@ -63,15 +119,16 @@ export struct LiveHorizontalCardComponent { | ||
| 63 | }) | 119 | }) |
| 64 | } | 120 | } |
| 65 | }.justifyContent(FlexAlign.SpaceBetween) | 121 | }.justifyContent(FlexAlign.SpaceBetween) |
| 66 | - .padding({ left: 16, right: 16 }) | 122 | + // .padding({ left: 16, right: 16 }) |
| 67 | .margin({ top: 8, bottom: 8 }) | 123 | .margin({ top: 8, bottom: 8 }) |
| 68 | .width(CommonConstants.FULL_WIDTH) | 124 | .width(CommonConstants.FULL_WIDTH) |
| 69 | 125 | ||
| 70 | // 多个 | 126 | // 多个 |
| 71 | if (this.compDTO.operDataList.length >= 2) { | 127 | if (this.compDTO.operDataList.length >= 2) { |
| 72 | - List({ space: 12 }) { | 128 | + Scroll(this.scroller) { |
| 129 | + Row() { | ||
| 130 | + Row() { | ||
| 73 | ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => { | 131 | ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => { |
| 74 | - ListItem() { | ||
| 75 | Column() { | 132 | Column() { |
| 76 | Stack({ alignContent: Alignment.BottomEnd }) { | 133 | Stack({ alignContent: Alignment.BottomEnd }) { |
| 77 | Image(this.loadImg ? item.coverUrl : '') | 134 | Image(this.loadImg ? item.coverUrl : '') |
| @@ -96,8 +153,7 @@ export struct LiveHorizontalCardComponent { | @@ -96,8 +153,7 @@ export struct LiveHorizontalCardComponent { | ||
| 96 | .margin({ top: 8 }) | 153 | .margin({ top: 8 }) |
| 97 | .width(this.compDTO.operDataList.length == 2 ? 210 : 150) | 154 | .width(this.compDTO.operDataList.length == 2 ? 210 : 150) |
| 98 | } | 155 | } |
| 99 | - } | ||
| 100 | - .padding({ left: (index == 0) ? 16 : 0, right: (index == this.compDTO.operDataList.length - 1) ? 16 : 0 }) | 156 | + .padding({ right: 16 }) |
| 101 | .onClick(() => { | 157 | .onClick(() => { |
| 102 | InfomationCardClick.track(this.compDTO, item, this.pageId, this.pageName) | 158 | InfomationCardClick.track(this.compDTO, item, this.pageId, this.pageName) |
| 103 | if (item.objectType != '0') { | 159 | if (item.objectType != '0') { |
| @@ -107,8 +163,47 @@ export struct LiveHorizontalCardComponent { | @@ -107,8 +163,47 @@ export struct LiveHorizontalCardComponent { | ||
| 107 | }) | 163 | }) |
| 108 | }) | 164 | }) |
| 109 | } | 165 | } |
| 110 | - .listDirection(Axis.Horizontal) | 166 | + if (this.compDTO.operDataList.length >= 2) { |
| 167 | + Column() { | ||
| 168 | + if (this.moreWidth > this.initMoreWidth + 2) { | ||
| 169 | + Text(this.moreTips) | ||
| 170 | + .fontSize(8) | ||
| 171 | + .fontColor(0x858585) | ||
| 172 | + .width(8) | ||
| 173 | + } | ||
| 174 | + } | ||
| 175 | + .justifyContent(FlexAlign.Center) | ||
| 176 | + .align(Alignment.Center) | ||
| 177 | + .width(this.moreWidth) | ||
| 178 | + .backgroundColor(0xf1f3f4) | ||
| 179 | + .borderRadius({ topLeft: 5, bottomLeft: 5 }) | ||
| 180 | + .height(this.compDTO.operDataList.length == 2 ? 180 : 146) | ||
| 181 | + } | ||
| 182 | + } | ||
| 183 | + } | ||
| 184 | + .align(Alignment.Start) | ||
| 185 | + .scrollable(this.compDTO.operDataList.length >= 2 ? ScrollDirection.Horizontal : ScrollDirection.None) | ||
| 111 | .scrollBar(BarState.Off) | 186 | .scrollBar(BarState.Off) |
| 187 | + .edgeEffect(EdgeEffect.None) | ||
| 188 | + .onReachEnd(() => { | ||
| 189 | + this.edgeAnimation() | ||
| 190 | + }) | ||
| 191 | + .onScrollStop(() => { | ||
| 192 | + // this.resetEdgeAnimation(); | ||
| 193 | + }) | ||
| 194 | + .onScroll((xOffset: number, yOffset: number) => { | ||
| 195 | + if (xOffset < 0) { | ||
| 196 | + this.reverseEdgeAnimation(); | ||
| 197 | + } | ||
| 198 | + }) | ||
| 199 | + .onTouch((event?: TouchEvent) => { | ||
| 200 | + if(event) { | ||
| 201 | + if (event.type === TouchType.Up) { | ||
| 202 | + this.toMore(); | ||
| 203 | + this.resetEdgeAnimation(); | ||
| 204 | + } | ||
| 205 | + } | ||
| 206 | + }) | ||
| 112 | .width(CommonConstants.FULL_WIDTH) | 207 | .width(CommonConstants.FULL_WIDTH) |
| 113 | .height(this.compDTO.operDataList.length == 2 ? 180 : 136) | 208 | .height(this.compDTO.operDataList.length == 2 ? 180 : 136) |
| 114 | } else if (this.compDTO.operDataList.length) { | 209 | } else if (this.compDTO.operDataList.length) { |
| @@ -116,9 +211,12 @@ export struct LiveHorizontalCardComponent { | @@ -116,9 +211,12 @@ export struct LiveHorizontalCardComponent { | ||
| 116 | LiveHorizontalCardForOneComponent({ contentDTO: this.compDTO.operDataList[0] }) | 211 | LiveHorizontalCardForOneComponent({ contentDTO: this.compDTO.operDataList[0] }) |
| 117 | } | 212 | } |
| 118 | } | 213 | } |
| 119 | - .width(CommonConstants.FULL_WIDTH) | 214 | + // .width(CommonConstants.FULL_WIDTH) |
| 120 | .padding({ | 215 | .padding({ |
| 121 | - top: 14, | 216 | + left: $r('app.float.card_comp_pagePadding_lf'), |
| 217 | + right: $r('app.float.card_comp_pagePadding_lf'), | ||
| 218 | + top: $r('app.float.card_comp_pagePadding_tb'), | ||
| 219 | + bottom: $r('app.float.card_comp_pagePadding_tb') | ||
| 122 | }) | 220 | }) |
| 123 | .backgroundColor($r("app.color.white")) | 221 | .backgroundColor($r("app.color.white")) |
| 124 | } | 222 | } |
| @@ -4,9 +4,7 @@ import { WDRouterPage, WDRouterRule } from 'wdRouter/Index'; | @@ -4,9 +4,7 @@ import { WDRouterPage, WDRouterRule } from 'wdRouter/Index'; | ||
| 4 | import { SpConstants } from 'wdConstant/Index'; | 4 | import { SpConstants } from 'wdConstant/Index'; |
| 5 | import measure from '@ohos.measure' | 5 | import measure from '@ohos.measure' |
| 6 | import { ParamType, TrackConstants, TrackingContent } from 'wdTracking/Index'; | 6 | import { ParamType, TrackConstants, TrackingContent } from 'wdTracking/Index'; |
| 7 | -import { | ||
| 8 | - ContentDetailDTO, | ||
| 9 | -} from 'wdBean'; | 7 | +import { ContentDetailDTO, } from 'wdBean'; |
| 10 | import { LiveModel } from '../../viewmodel/LiveModel'; | 8 | import { LiveModel } from '../../viewmodel/LiveModel'; |
| 11 | import { HttpUtils } from 'wdNetwork/Index'; | 9 | import { HttpUtils } from 'wdNetwork/Index'; |
| 12 | import vibrator from '@ohos.vibrator'; | 10 | import vibrator from '@ohos.vibrator'; |
| @@ -47,6 +45,7 @@ export struct LiveLikeComponent { | @@ -47,6 +45,7 @@ export struct LiveLikeComponent { | ||
| 47 | this.onDetailUpdated() | 45 | this.onDetailUpdated() |
| 48 | this.contentTrackingDict() | 46 | this.contentTrackingDict() |
| 49 | } | 47 | } |
| 48 | + | ||
| 50 | async onDetailUpdated() { | 49 | async onDetailUpdated() { |
| 51 | // 2:竖屏直播页 4:横屏直播页 | 50 | // 2:竖屏直播页 4:横屏直播页 |
| 52 | // 点赞样式 love爱心型 thumb点赞手势 mourning 蜡烛(默哀) pray 祈福 | 51 | // 点赞样式 love爱心型 thumb点赞手势 mourning 蜡烛(默哀) pray 祈福 |
| @@ -61,13 +60,13 @@ export struct LiveLikeComponent { | @@ -61,13 +60,13 @@ export struct LiveLikeComponent { | ||
| 61 | this.getLikeCount() | 60 | this.getLikeCount() |
| 62 | } | 61 | } |
| 63 | 62 | ||
| 64 | - contentTrackingDict(){ | 63 | + contentTrackingDict() { |
| 65 | this.pageParam = { | 64 | this.pageParam = { |
| 66 | 'contentType': `${this.contentDetailData.newsType}`, | 65 | 'contentType': `${this.contentDetailData.newsType}`, |
| 67 | 'contentId': `${this.contentDetailData.newsId}`, | 66 | 'contentId': `${this.contentDetailData.newsId}`, |
| 68 | 'contentName': `${this.contentDetailData.newsTitle || ''}`, | 67 | 'contentName': `${this.contentDetailData.newsTitle || ''}`, |
| 69 | } | 68 | } |
| 70 | - if(this.contentDetailData.newsType == 2) { | 69 | + if (this.contentDetailData.newsType == 2) { |
| 71 | this.PageName = TrackConstants.PageName.Live_Detail // 直播 | 70 | this.PageName = TrackConstants.PageName.Live_Detail // 直播 |
| 72 | } | 71 | } |
| 73 | } | 72 | } |
| @@ -118,7 +117,9 @@ export struct LiveLikeComponent { | @@ -118,7 +117,9 @@ export struct LiveLikeComponent { | ||
| 118 | .width(36) | 117 | .width(36) |
| 119 | .height(36) | 118 | .height(36) |
| 120 | .borderRadius(18) | 119 | .borderRadius(18) |
| 121 | - .backgroundColor((this.pageComponentType === 4 || this.pageComponentType === 2) ? '#4D000000' : this.pageComponentType === 8 ? Color.Transparent : '#FFF5F5F5') | 120 | + .backgroundColor((this.pageComponentType === 4 || this.pageComponentType === 2) ? '#4D000000' : |
| 121 | + this.pageComponentType === 8 ? Color.Transparent : '#FFF5F5F5') | ||
| 122 | + | ||
| 122 | if (this.likeCount != 0) { | 123 | if (this.likeCount != 0) { |
| 123 | RelativeContainer() { | 124 | RelativeContainer() { |
| 124 | Image(this.styleType == 1 ? $r('app.media.comment_icon_number_bg') : $r('app.media.ic_like_back_Select')) | 125 | Image(this.styleType == 1 ? $r('app.media.comment_icon_number_bg') : $r('app.media.ic_like_back_Select')) |
| @@ -211,6 +212,16 @@ export struct LiveLikeComponent { | @@ -211,6 +212,16 @@ export struct LiveLikeComponent { | ||
| 211 | console.error(`An unexpected error occurred. Code: ${e.code}, message: ${e.message}`); | 212 | console.error(`An unexpected error occurred. Code: ${e.code}, message: ${e.message}`); |
| 212 | } | 213 | } |
| 213 | this.likeCount++ | 214 | this.likeCount++ |
| 215 | + this.likeStatus = true | ||
| 216 | + | ||
| 217 | + //内容点赞、取消点赞Tracking 1点赞 0取消点赞 | ||
| 218 | + TrackingContent.like(true, TrackConstants.PageName.DynamicDetail, TrackConstants.PageName.DynamicDetail, | ||
| 219 | + { | ||
| 220 | + 'contentType': `${this.contentDetailData.newsType}`, | ||
| 221 | + 'contentId': `${this.contentDetailData.newsId}`, | ||
| 222 | + 'contentName': `${this.contentDetailData.newsTitle || ''}`, | ||
| 223 | + }) | ||
| 224 | + | ||
| 214 | 225 | ||
| 215 | }).catch(() => { | 226 | }).catch(() => { |
| 216 | }) | 227 | }) |
| @@ -245,6 +256,7 @@ export struct LiveLikeComponent { | @@ -245,6 +256,7 @@ export struct LiveLikeComponent { | ||
| 245 | this.likeCount = 0 | 256 | this.likeCount = 0 |
| 246 | }) | 257 | }) |
| 247 | } | 258 | } |
| 259 | + | ||
| 248 | private getMeasureText(text: string) { | 260 | private getMeasureText(text: string) { |
| 249 | let width = measure.measureText({ | 261 | let width = measure.measureText({ |
| 250 | textContent: text, | 262 | textContent: text, |
| @@ -15,6 +15,7 @@ | @@ -15,6 +15,7 @@ | ||
| 15 | "wdBean": "file:../../features/wdBean", | 15 | "wdBean": "file:../../features/wdBean", |
| 16 | "wdConstant": "file:../../commons/wdConstant", | 16 | "wdConstant": "file:../../commons/wdConstant", |
| 17 | "wdDetailPlayApi": "file:../../features/wdDetailPlayApi", | 17 | "wdDetailPlayApi": "file:../../features/wdDetailPlayApi", |
| 18 | - "wdRouter": "file:../../commons/wdRouter" | 18 | + "wdRouter": "file:../../commons/wdRouter", |
| 19 | + "wdTracking": "file:../../features/wdTracking" | ||
| 19 | } | 20 | } |
| 20 | } | 21 | } |
| @@ -4,9 +4,10 @@ import router from '@ohos.router'; | @@ -4,9 +4,10 @@ import router from '@ohos.router'; | ||
| 4 | 4 | ||
| 5 | import { DetailPlayLivePage } from './DetailPlayLivePage'; | 5 | import { DetailPlayLivePage } from './DetailPlayLivePage'; |
| 6 | import { DetailPlayVLivePage } from './DetailPlayVLivePage'; | 6 | import { DetailPlayVLivePage } from './DetailPlayVLivePage'; |
| 7 | -import { Logger, ToastUtils } from 'wdKit/Index'; | 7 | +import { DateTimeUtils, Logger, ToastUtils } from 'wdKit/Index'; |
| 8 | import { publishCommentModel } from 'wdComponent/src/main/ets/components/comment/model/PublishCommentModel'; | 8 | import { publishCommentModel } from 'wdComponent/src/main/ets/components/comment/model/PublishCommentModel'; |
| 9 | import { PictureLoading } from '../widgets/vertical/PictureLoading'; | 9 | import { PictureLoading } from '../widgets/vertical/PictureLoading'; |
| 10 | +import { TrackConstants, TrackingButton, TrackingPageBrowse } from 'wdTracking/Index'; | ||
| 10 | 11 | ||
| 11 | const TAG = 'DetailPlayLiveCommon' | 12 | const TAG = 'DetailPlayLiveCommon' |
| 12 | 13 | ||
| @@ -22,6 +23,7 @@ const TAG = 'DetailPlayLiveCommon' | @@ -22,6 +23,7 @@ const TAG = 'DetailPlayLiveCommon' | ||
| 22 | @Component | 23 | @Component |
| 23 | export struct DetailPlayLiveCommon { | 24 | export struct DetailPlayLiveCommon { |
| 24 | private liveViewModel: LiveViewModel = new LiveViewModel() | 25 | private liveViewModel: LiveViewModel = new LiveViewModel() |
| 26 | + pageShowTime: number = 0; | ||
| 25 | @Provide relId: string = '' | 27 | @Provide relId: string = '' |
| 26 | @Provide contentId: string = '' | 28 | @Provide contentId: string = '' |
| 27 | @Provide relType: string = '' | 29 | @Provide relType: string = '' |
| @@ -36,7 +38,6 @@ export struct DetailPlayLiveCommon { | @@ -36,7 +38,6 @@ export struct DetailPlayLiveCommon { | ||
| 36 | @Provide publishCommentModel: publishCommentModel = new publishCommentModel() | 38 | @Provide publishCommentModel: publishCommentModel = new publishCommentModel() |
| 37 | // 横屏或竖屏 general-竖屏,news-横屏 | 39 | // 横屏或竖屏 general-竖屏,news-横屏 |
| 38 | @State liveLandscape: string = '' | 40 | @State liveLandscape: string = '' |
| 39 | - | ||
| 40 | @State isLoading: boolean = false | 41 | @State isLoading: boolean = false |
| 41 | 42 | ||
| 42 | async aboutToAppear(): Promise<void> { | 43 | async aboutToAppear(): Promise<void> { |
| @@ -49,6 +50,11 @@ export struct DetailPlayLiveCommon { | @@ -49,6 +50,11 @@ export struct DetailPlayLiveCommon { | ||
| 49 | 50 | ||
| 50 | } | 51 | } |
| 51 | 52 | ||
| 53 | + aboutToDisappear(): void { | ||
| 54 | + console.error("XXXXZZZZ", '---aboutToDisappear------------') | ||
| 55 | + | ||
| 56 | + } | ||
| 57 | + | ||
| 52 | build() { | 58 | build() { |
| 53 | Column() { | 59 | Column() { |
| 54 | // 直播预约或横屏直播统一进横屏直播 | 60 | // 直播预约或横屏直播统一进横屏直播 |
| @@ -58,7 +64,7 @@ export struct DetailPlayLiveCommon { | @@ -58,7 +64,7 @@ export struct DetailPlayLiveCommon { | ||
| 58 | } else if (this.liveLandscape === 'general') { | 64 | } else if (this.liveLandscape === 'general') { |
| 59 | // 沉浸式直播 | 65 | // 沉浸式直播 |
| 60 | DetailPlayVLivePage() | 66 | DetailPlayVLivePage() |
| 61 | - }else { | 67 | + } else { |
| 62 | PictureLoading().visibility(this.isLoading ? Visibility.None : Visibility.Visible) | 68 | PictureLoading().visibility(this.isLoading ? Visibility.None : Visibility.Visible) |
| 63 | } | 69 | } |
| 64 | } | 70 | } |
| @@ -78,12 +84,12 @@ export struct DetailPlayLiveCommon { | @@ -78,12 +84,12 @@ export struct DetailPlayLiveCommon { | ||
| 78 | if (data) { | 84 | if (data) { |
| 79 | let detailData = data[0] | 85 | let detailData = data[0] |
| 80 | //人民号类型单独获取直播地址 | 86 | //人民号类型单独获取直播地址 |
| 81 | - if (detailData.rmhPlatform === 1) { | 87 | + if (detailData.rmhPlatform === 1 && detailData.liveInfo?.liveState === 'running') { |
| 82 | 88 | ||
| 83 | let vliveId = detailData.liveInfo.vlive[0].vliveId as string | 89 | let vliveId = detailData.liveInfo.vlive[0].vliveId as string |
| 84 | console.error(TAG, 'vliveId==' + vliveId) | 90 | console.error(TAG, 'vliveId==' + vliveId) |
| 85 | let pullStreamAddressData = await this.liveViewModel.getLiveRoomPullAddress(vliveId) as GetPullAddressBean | 91 | let pullStreamAddressData = await this.liveViewModel.getLiveRoomPullAddress(vliveId) as GetPullAddressBean |
| 86 | - | 92 | + console.error(TAG, 'vliveId==' + vliveId) |
| 87 | if (pullStreamAddressData) { | 93 | if (pullStreamAddressData) { |
| 88 | console.log(TAG, ' GetPullAddressBean:', JSON.stringify(pullStreamAddressData)) | 94 | console.log(TAG, ' GetPullAddressBean:', JSON.stringify(pullStreamAddressData)) |
| 89 | let m3u8uUrl = pullStreamAddressData.transCode[0].m3u8Url | 95 | let m3u8uUrl = pullStreamAddressData.transCode[0].m3u8Url |
| @@ -120,13 +126,12 @@ export struct DetailPlayLiveCommon { | @@ -120,13 +126,12 @@ export struct DetailPlayLiveCommon { | ||
| 120 | this.playUrl = detailData.liveInfo.vlive[0].replayUri | 126 | this.playUrl = detailData.liveInfo.vlive[0].replayUri |
| 121 | } | 127 | } |
| 122 | 128 | ||
| 123 | - | ||
| 124 | } else { | 129 | } else { |
| 125 | this.isLoading | 130 | this.isLoading |
| 126 | ToastUtils.shortToast('内容不存在') | 131 | ToastUtils.shortToast('内容不存在') |
| 127 | router.back() | 132 | router.back() |
| 128 | } | 133 | } |
| 129 | - },()=>{ | 134 | + }, () => { |
| 130 | this.isLoading | 135 | this.isLoading |
| 131 | ToastUtils.shortToast('内容不存在') | 136 | ToastUtils.shortToast('内容不存在') |
| 132 | router.back() | 137 | router.back() |
| @@ -134,16 +139,21 @@ export struct DetailPlayLiveCommon { | @@ -134,16 +139,21 @@ export struct DetailPlayLiveCommon { | ||
| 134 | }) | 139 | }) |
| 135 | } | 140 | } |
| 136 | 141 | ||
| 137 | - | ||
| 138 | - | ||
| 139 | onPageShow() { | 142 | onPageShow() { |
| 140 | this.pageShow = Math.random() | 143 | this.pageShow = Math.random() |
| 141 | Logger.info(TAG, 'onPageShow') | 144 | Logger.info(TAG, 'onPageShow') |
| 145 | + this.pageShowTime = DateTimeUtils.getTimeStamp() | ||
| 142 | } | 146 | } |
| 143 | 147 | ||
| 144 | onPageHide() { | 148 | onPageHide() { |
| 145 | this.pageHide = Math.random() | 149 | this.pageHide = Math.random() |
| 146 | Logger.info(TAG, 'onPageHide') | 150 | Logger.info(TAG, 'onPageHide') |
| 151 | + console.error("XXXXZZZZ", '---onPageHide------------') | ||
| 152 | + //页面浏览 | ||
| 153 | + TrackingPageBrowse.trackCommonPageExposureEnd(TrackConstants.PageName.Live_Detail, | ||
| 154 | + TrackConstants.PageName.Live_Detail | ||
| 155 | + , Math.floor((DateTimeUtils.getTimeStamp() - this.pageShowTime) / 1000)) | ||
| 156 | + | ||
| 147 | } | 157 | } |
| 148 | 158 | ||
| 149 | onBackPress(): boolean | void { | 159 | onBackPress(): boolean | void { |
| @@ -9,6 +9,7 @@ import { router, window } from '@kit.ArkUI'; | @@ -9,6 +9,7 @@ import { router, window } from '@kit.ArkUI'; | ||
| 9 | import { WDAliPlayerController } from 'wdPlayer/Index'; | 9 | import { WDAliPlayerController } from 'wdPlayer/Index'; |
| 10 | import { LiveOperRowListView } from 'wdComponent'; | 10 | import { LiveOperRowListView } from 'wdComponent'; |
| 11 | import { publishCommentModel } from 'wdComponent/src/main/ets/components/comment/model/PublishCommentModel'; | 11 | import { publishCommentModel } from 'wdComponent/src/main/ets/components/comment/model/PublishCommentModel'; |
| 12 | +import { TrackConstants, TrackingContent } from 'wdTracking/Index'; | ||
| 12 | 13 | ||
| 13 | let TAG: string = 'DetailPlayLivePage'; | 14 | let TAG: string = 'DetailPlayLivePage'; |
| 14 | 15 | ||
| @@ -34,7 +35,6 @@ export struct DetailPlayLivePage { | @@ -34,7 +35,6 @@ export struct DetailPlayLivePage { | ||
| 34 | @Consume @Watch('onBackPressCus') pageBackPress: number | 35 | @Consume @Watch('onBackPressCus') pageBackPress: number |
| 35 | @Consume contentDetailData: ContentDetailDTO | 36 | @Consume contentDetailData: ContentDetailDTO |
| 36 | @Consume publishCommentModel: publishCommentModel | 37 | @Consume publishCommentModel: publishCommentModel |
| 37 | - | ||
| 38 | // 尽量不要动属性。用来作为输入了评论之后,值传递 | 38 | // 尽量不要动属性。用来作为输入了评论之后,值传递 |
| 39 | @State lastInputedLiveComment: LiveRoomItemBean = {} as LiveRoomItemBean // 上次输入的直播间消息 | 39 | @State lastInputedLiveComment: LiveRoomItemBean = {} as LiveRoomItemBean // 上次输入的直播间消息 |
| 40 | @State lastInputedChatComment: LiveRoomItemBean = {} as LiveRoomItemBean // 上次输入的大家聊消息 | 40 | @State lastInputedChatComment: LiveRoomItemBean = {} as LiveRoomItemBean // 上次输入的大家聊消息 |
| @@ -69,10 +69,12 @@ export struct DetailPlayLivePage { | @@ -69,10 +69,12 @@ export struct DetailPlayLivePage { | ||
| 69 | TopPlayComponent({ playerController: this.playerController }) | 69 | TopPlayComponent({ playerController: this.playerController }) |
| 70 | .height(this.displayDirection == DisplayDirection.VERTICAL ? 211 : '100%') | 70 | .height(this.displayDirection == DisplayDirection.VERTICAL ? 211 : '100%') |
| 71 | 71 | ||
| 72 | - TabComponent({ tabs: this.tabs, | 72 | + TabComponent({ |
| 73 | + tabs: this.tabs, | ||
| 73 | changeToTab: this.changeToTab, | 74 | changeToTab: this.changeToTab, |
| 74 | lastInputedLiveComment: this.lastInputedLiveComment, | 75 | lastInputedLiveComment: this.lastInputedLiveComment, |
| 75 | - lastInputedChatComment: this.lastInputedChatComment}) | 76 | + lastInputedChatComment: this.lastInputedChatComment |
| 77 | + }) | ||
| 76 | .layoutWeight(1) | 78 | .layoutWeight(1) |
| 77 | .visibility(this.displayDirection == DisplayDirection.VERTICAL ? Visibility.Visible : Visibility.None) | 79 | .visibility(this.displayDirection == DisplayDirection.VERTICAL ? Visibility.Visible : Visibility.None) |
| 78 | 80 | ||
| @@ -95,6 +97,13 @@ export struct DetailPlayLivePage { | @@ -95,6 +97,13 @@ export struct DetailPlayLivePage { | ||
| 95 | } else { | 97 | } else { |
| 96 | this.lastInputedChatComment = result | 98 | this.lastInputedChatComment = result |
| 97 | } | 99 | } |
| 100 | + // 发布评论埋点 | ||
| 101 | + TrackingContent.commentClick(TrackConstants.PageName.DynamicDetail, TrackConstants.PageName.DynamicDetail, | ||
| 102 | + { | ||
| 103 | + 'contentType': `${this.contentDetailData.newsType}`, | ||
| 104 | + 'contentId': `${this.contentDetailData.newsId}`, | ||
| 105 | + 'contentName': `${this.contentDetailData.newsTitle || ''}`, | ||
| 106 | + }); | ||
| 98 | }) | 107 | }) |
| 99 | } | 108 | } |
| 100 | } | 109 | } |
| @@ -7,6 +7,7 @@ import { WDAliPlayerController } from 'wdPlayer/Index'; | @@ -7,6 +7,7 @@ import { WDAliPlayerController } from 'wdPlayer/Index'; | ||
| 7 | import { DisplayDirection } from 'wdConstant/Index'; | 7 | import { DisplayDirection } from 'wdConstant/Index'; |
| 8 | import { LiveEmptyComponent, WDLiveViewDefaultType } from 'wdComponent/Index'; | 8 | import { LiveEmptyComponent, WDLiveViewDefaultType } from 'wdComponent/Index'; |
| 9 | import { PlayerEndView } from '../widgets/vertical/PlayerEndView'; | 9 | import { PlayerEndView } from '../widgets/vertical/PlayerEndView'; |
| 10 | +import { TrackConstants, TrackingButton } from 'wdTracking/Index'; | ||
| 10 | 11 | ||
| 11 | const storage = LocalStorage.getShared(); | 12 | const storage = LocalStorage.getShared(); |
| 12 | const TAG = 'DetailPlayVLivePage' | 13 | const TAG = 'DetailPlayVLivePage' |
| @@ -96,6 +97,9 @@ export struct DetailPlayVLivePage { | @@ -96,6 +97,9 @@ export struct DetailPlayVLivePage { | ||
| 96 | .markAnchor({ x: 56, y: this.bottomSafeHeight }) | 97 | .markAnchor({ x: 56, y: this.bottomSafeHeight }) |
| 97 | .onClick(() => { | 98 | .onClick(() => { |
| 98 | this.swiperController.showNext() | 99 | this.swiperController.showNext() |
| 100 | + // 埋点 | ||
| 101 | + TrackingButton.click('clearScreen', TrackConstants.PageName.Live_Detail, | ||
| 102 | + TrackConstants.PageName.Live_Detail) | ||
| 99 | }) | 103 | }) |
| 100 | 104 | ||
| 101 | } | 105 | } |
| @@ -116,7 +120,5 @@ export struct DetailPlayVLivePage { | @@ -116,7 +120,5 @@ export struct DetailPlayVLivePage { | ||
| 116 | console.error(TAG, 'getLiveDetails catch', message) | 120 | console.error(TAG, 'getLiveDetails catch', message) |
| 117 | }) | 121 | }) |
| 118 | } | 122 | } |
| 119 | - | ||
| 120 | - | ||
| 121 | } | 123 | } |
| 122 | 124 |
| @@ -39,6 +39,8 @@ export class LiveViewModel { | @@ -39,6 +39,8 @@ export class LiveViewModel { | ||
| 39 | console.log(TAG, 'getContentDetail:', JSON.stringify(resDTO.data)) | 39 | console.log(TAG, 'getContentDetail:', JSON.stringify(resDTO.data)) |
| 40 | if (resDTO.data) { | 40 | if (resDTO.data) { |
| 41 | success(resDTO.data) | 41 | success(resDTO.data) |
| 42 | + }else { | ||
| 43 | + fail("数据为空") | ||
| 42 | } | 44 | } |
| 43 | }).catch(() => { | 45 | }).catch(() => { |
| 44 | fail("数据为空") | 46 | fail("数据为空") |
| @@ -4,6 +4,7 @@ import { DateTimeUtils, StringUtils, ToastUtils } from 'wdKit/Index' | @@ -4,6 +4,7 @@ import { DateTimeUtils, StringUtils, ToastUtils } from 'wdKit/Index' | ||
| 4 | import { LiveViewModel } from '../../viewModel/LiveViewModel' | 4 | import { LiveViewModel } from '../../viewModel/LiveViewModel' |
| 5 | import { HttpUtils } from 'wdNetwork/Index' | 5 | import { HttpUtils } from 'wdNetwork/Index' |
| 6 | import { WDRouterPage, WDRouterRule } from 'wdRouter/Index' | 6 | import { WDRouterPage, WDRouterRule } from 'wdRouter/Index' |
| 7 | +import { ParamType, TrackConstants, TrackingContent } from 'wdTracking/Index' | ||
| 7 | 8 | ||
| 8 | @Component | 9 | @Component |
| 9 | export struct LiveCountdownComponent { | 10 | export struct LiveCountdownComponent { |
| @@ -19,6 +20,7 @@ export struct LiveCountdownComponent { | @@ -19,6 +20,7 @@ export struct LiveCountdownComponent { | ||
| 19 | //是否预约过直播 | 20 | //是否预约过直播 |
| 20 | @State isAppointmentLive: boolean = false | 21 | @State isAppointmentLive: boolean = false |
| 21 | liveViewModel: LiveViewModel = new LiveViewModel() | 22 | liveViewModel: LiveViewModel = new LiveViewModel() |
| 23 | + pageParam: ParamType = {} | ||
| 22 | 24 | ||
| 23 | aboutToAppear(): void { | 25 | aboutToAppear(): void { |
| 24 | //注册字体 | 26 | //注册字体 |
| @@ -30,6 +32,15 @@ export struct LiveCountdownComponent { | @@ -30,6 +32,15 @@ export struct LiveCountdownComponent { | ||
| 30 | this.textTimerController.start() | 32 | this.textTimerController.start() |
| 31 | }, 0) | 33 | }, 0) |
| 32 | this.updateData() | 34 | this.updateData() |
| 35 | + this.contentTrackingDict() | ||
| 36 | + } | ||
| 37 | + | ||
| 38 | + contentTrackingDict() { | ||
| 39 | + this.pageParam = { | ||
| 40 | + 'contentType': `${this.liveDetailsBean.newsType}`, | ||
| 41 | + 'contentId': `${this.liveDetailsBean.newsId}`, | ||
| 42 | + 'contentName': `${this.liveDetailsBean.newsTitle || ''}`, | ||
| 43 | + } | ||
| 33 | } | 44 | } |
| 34 | 45 | ||
| 35 | build() { | 46 | build() { |
| @@ -141,7 +152,7 @@ export struct LiveCountdownComponent { | @@ -141,7 +152,7 @@ export struct LiveCountdownComponent { | ||
| 141 | } | 152 | } |
| 142 | //2024-04-01 19:44:00-trim->2024-04-0119:44:00 | 153 | //2024-04-01 19:44:00-trim->2024-04-0119:44:00 |
| 143 | if (StringUtils.isNotEmpty(this.liveDetailsBean.liveInfo?.planStartTime)) { | 154 | if (StringUtils.isNotEmpty(this.liveDetailsBean.liveInfo?.planStartTime)) { |
| 144 | - let playStartTimeTmp = this.liveDetailsBean.liveInfo?.planStartTime+'' | 155 | + let playStartTimeTmp = this.liveDetailsBean.liveInfo?.planStartTime + '' |
| 145 | this.month = Number(playStartTimeTmp.substring(5, 7)).toString() | 156 | this.month = Number(playStartTimeTmp.substring(5, 7)).toString() |
| 146 | this.day = playStartTimeTmp.substring(8, 10) | 157 | this.day = playStartTimeTmp.substring(8, 10) |
| 147 | this.hour = playStartTimeTmp.substring(11, 13) | 158 | this.hour = playStartTimeTmp.substring(11, 13) |
| @@ -152,7 +163,7 @@ export struct LiveCountdownComponent { | @@ -152,7 +163,7 @@ export struct LiveCountdownComponent { | ||
| 152 | getLiveAppointmentStatus() { | 163 | getLiveAppointmentStatus() { |
| 153 | this.liveViewModel.getLiveAppointmentStatus( | 164 | this.liveViewModel.getLiveAppointmentStatus( |
| 154 | this.liveDetailsBean.reLInfo ? this.liveDetailsBean.reLInfo.relId : '', | 165 | this.liveDetailsBean.reLInfo ? this.liveDetailsBean.reLInfo.relId : '', |
| 155 | - this.liveDetailsBean.newsId+'' | 166 | + this.liveDetailsBean.newsId + '' |
| 156 | ).then( | 167 | ).then( |
| 157 | (data) => { | 168 | (data) => { |
| 158 | this.isAppointmentLive = data | 169 | this.isAppointmentLive = data |
| @@ -165,15 +176,19 @@ export struct LiveCountdownComponent { | @@ -165,15 +176,19 @@ export struct LiveCountdownComponent { | ||
| 165 | liveAppointment() { | 176 | liveAppointment() { |
| 166 | this.liveViewModel.liveAppointment( | 177 | this.liveViewModel.liveAppointment( |
| 167 | this.liveDetailsBean.reLInfo ? this.liveDetailsBean.reLInfo.relId : '', | 178 | this.liveDetailsBean.reLInfo ? this.liveDetailsBean.reLInfo.relId : '', |
| 168 | - this.liveDetailsBean.newsId+'', | 179 | + this.liveDetailsBean.newsId + '', |
| 169 | !this.isAppointmentLive).then( | 180 | !this.isAppointmentLive).then( |
| 170 | (data) => { | 181 | (data) => { |
| 171 | if (data.success) { | 182 | if (data.success) { |
| 172 | this.isAppointmentLive = !this.isAppointmentLive | 183 | this.isAppointmentLive = !this.isAppointmentLive |
| 173 | if (this.isAppointmentLive) { | 184 | if (this.isAppointmentLive) { |
| 174 | ToastUtils.showToast('预约成功', 1000) | 185 | ToastUtils.showToast('预约成功', 1000) |
| 186 | + TrackingContent.subscribeClick(true, TrackConstants.PageName.Live_Detail, | ||
| 187 | + TrackConstants.PageName.Live_Detail, this.pageParam) | ||
| 175 | } else { | 188 | } else { |
| 176 | ToastUtils.showToast('取消预约成功', 1000) | 189 | ToastUtils.showToast('取消预约成功', 1000) |
| 190 | + TrackingContent.subscribeClick(false, TrackConstants.PageName.Live_Detail, | ||
| 191 | + TrackConstants.PageName.Live_Detail, this.pageParam) | ||
| 177 | } | 192 | } |
| 178 | } | 193 | } |
| 179 | }, | 194 | }, |
| @@ -3,6 +3,7 @@ import { Logger, StringUtils } from 'wdKit/Index'; | @@ -3,6 +3,7 @@ import { Logger, StringUtils } from 'wdKit/Index'; | ||
| 3 | import { PlayerConstants, WDAliPlayerController, WDPlayerRenderLiveView } from 'wdPlayer/Index'; | 3 | import { PlayerConstants, WDAliPlayerController, WDPlayerRenderLiveView } from 'wdPlayer/Index'; |
| 4 | import { PlayUIComponent } from './PlayUIComponent'; | 4 | import { PlayUIComponent } from './PlayUIComponent'; |
| 5 | import { PictureLoading } from '../../vertical/PictureLoading'; | 5 | import { PictureLoading } from '../../vertical/PictureLoading'; |
| 6 | +import { ParamType, TrackConstants } from 'wdTracking/Index'; | ||
| 6 | 7 | ||
| 7 | const TAG: string = 'TopPlayComponent' | 8 | const TAG: string = 'TopPlayComponent' |
| 8 | 9 | ||
| @@ -31,15 +32,15 @@ export struct TopPlayComponent { | @@ -31,15 +32,15 @@ export struct TopPlayComponent { | ||
| 31 | @Provide playSourceState: number = 0 | 32 | @Provide playSourceState: number = 0 |
| 32 | private playUrl: string = "" | 33 | private playUrl: string = "" |
| 33 | private xComponentIsLoaded: boolean = false | 34 | private xComponentIsLoaded: boolean = false |
| 35 | + pageParam: ParamType = {} | ||
| 34 | 36 | ||
| 35 | aboutToAppear(): void { | 37 | aboutToAppear(): void { |
| 36 | if (this.playerController) { | 38 | if (this.playerController) { |
| 39 | + | ||
| 37 | this.playerController.onCanplay = () => { | 40 | this.playerController.onCanplay = () => { |
| 38 | - Logger.debug(TAG, 'onCanplay==>') | ||
| 39 | this.isCanPlay = true | 41 | this.isCanPlay = true |
| 40 | this.isLoading = true | 42 | this.isLoading = true |
| 41 | this.playerController?.play() | 43 | this.playerController?.play() |
| 42 | - | ||
| 43 | } | 44 | } |
| 44 | 45 | ||
| 45 | this.playerController.onStatusChange = (status: number) => { | 46 | this.playerController.onStatusChange = (status: number) => { |
| @@ -147,7 +148,16 @@ export struct TopPlayComponent { | @@ -147,7 +148,16 @@ export struct TopPlayComponent { | ||
| 147 | Logger.debug(TAG, "播放地址为空") | 148 | Logger.debug(TAG, "播放地址为空") |
| 148 | return | 149 | return |
| 149 | } | 150 | } |
| 150 | - this.playerController?.firstPlay(this.playUrl); | 151 | + this.contentTrackingDict() |
| 152 | + this.playerController?.firstPlay(this.playUrl, TrackConstants.PageName.Live_Detail, this.pageParam); | ||
| 153 | + } | ||
| 154 | + | ||
| 155 | + contentTrackingDict() { | ||
| 156 | + this.pageParam = { | ||
| 157 | + 'contentType': `${this.contentDetailData.newsType}`, | ||
| 158 | + 'contentId': `${this.contentDetailData.newsId}`, | ||
| 159 | + 'contentName': `${this.contentDetailData.newsTitle || ''}`, | ||
| 160 | + } | ||
| 151 | } | 161 | } |
| 152 | 162 | ||
| 153 | build() { | 163 | build() { |
| @@ -11,6 +11,7 @@ import { ChartItemCompereComponent } from './ChartItemCompereComponent' | @@ -11,6 +11,7 @@ import { ChartItemCompereComponent } from './ChartItemCompereComponent' | ||
| 11 | import { ChatItemComponent } from './ChartItemComponent' | 11 | import { ChatItemComponent } from './ChartItemComponent' |
| 12 | import { router } from '@kit.ArkUI' | 12 | import { router } from '@kit.ArkUI' |
| 13 | import { EmitterEventId, EmitterUtils, Logger, SPHelper, WindowModel } from 'wdKit/Index' | 13 | import { EmitterEventId, EmitterUtils, Logger, SPHelper, WindowModel } from 'wdKit/Index' |
| 14 | +import { TrackConstants, TrackingContent } from 'wdTracking/Index' | ||
| 14 | 15 | ||
| 15 | const TAG = "PlayerCommentComponent" | 16 | const TAG = "PlayerCommentComponent" |
| 16 | /** | 17 | /** |
| @@ -105,6 +106,7 @@ export struct PlayerCommentComponent { | @@ -105,6 +106,7 @@ export struct PlayerCommentComponent { | ||
| 105 | contentDetailData: this.contentDetailData, | 106 | contentDetailData: this.contentDetailData, |
| 106 | onCommentInputFocus: () => { | 107 | onCommentInputFocus: () => { |
| 107 | 108 | ||
| 109 | + | ||
| 108 | }, | 110 | }, |
| 109 | onCommentInputed: (content) => { | 111 | onCommentInputed: (content) => { |
| 110 | if (content.comment) { | 112 | if (content.comment) { |
| @@ -116,6 +118,14 @@ export struct PlayerCommentComponent { | @@ -116,6 +118,14 @@ export struct PlayerCommentComponent { | ||
| 116 | this.liveChatList.push(result) | 118 | this.liveChatList.push(result) |
| 117 | this.scroller.scrollEdge(Edge.Bottom) | 119 | this.scroller.scrollEdge(Edge.Bottom) |
| 118 | }) | 120 | }) |
| 121 | + | ||
| 122 | + // 发布评论埋点 | ||
| 123 | + TrackingContent.commentClick(TrackConstants.PageName.DynamicDetail, TrackConstants.PageName.DynamicDetail, | ||
| 124 | + { | ||
| 125 | + 'contentType': `${this.contentDetailData.newsType}`, | ||
| 126 | + 'contentId': `${this.contentDetailData.newsId}`, | ||
| 127 | + 'contentName': `${this.contentDetailData.newsTitle || ''}`, | ||
| 128 | + }); | ||
| 119 | } | 129 | } |
| 120 | }, | 130 | }, |
| 121 | onBack: () => { | 131 | onBack: () => { |
| 1 | import { ContentDetailDTO } from 'wdBean/Index'; | 1 | import { ContentDetailDTO } from 'wdBean/Index'; |
| 2 | import { AliPlayerRenderView, WDAliPlayerController, WDPlayerRenderVLiveView } from 'wdPlayer/Index'; | 2 | import { AliPlayerRenderView, WDAliPlayerController, WDPlayerRenderVLiveView } from 'wdPlayer/Index'; |
| 3 | +import { ParamType, TrackConstants } from 'wdTracking/Index'; | ||
| 3 | import { PictureLoading } from './PictureLoading'; | 4 | import { PictureLoading } from './PictureLoading'; |
| 4 | 5 | ||
| 5 | const TAG = 'PlayerComponent' | 6 | const TAG = 'PlayerComponent' |
| 6 | 7 | ||
| 7 | @Component | 8 | @Component |
| 8 | export struct PlayerComponent { | 9 | export struct PlayerComponent { |
| 9 | - | ||
| 10 | private playerController?: WDAliPlayerController | 10 | private playerController?: WDAliPlayerController |
| 11 | @Consume @Watch('updateData') contentDetailData: ContentDetailDTO | 11 | @Consume @Watch('updateData') contentDetailData: ContentDetailDTO |
| 12 | @Consume @Watch('pageShowChange') pageShow: number | 12 | @Consume @Watch('pageShowChange') pageShow: number |
| @@ -21,6 +21,7 @@ export struct PlayerComponent { | @@ -21,6 +21,7 @@ export struct PlayerComponent { | ||
| 21 | @State liveStreamType: number | null = -1 | 21 | @State liveStreamType: number | null = -1 |
| 22 | @State playUrl: string = '' | 22 | @State playUrl: string = '' |
| 23 | @State isCanplay: boolean = false | 23 | @State isCanplay: boolean = false |
| 24 | + pageParam: ParamType = {} | ||
| 24 | 25 | ||
| 25 | pageShowChange() { | 26 | pageShowChange() { |
| 26 | this.playerController?.play() | 27 | this.playerController?.play() |
| @@ -76,7 +77,8 @@ export struct PlayerComponent { | @@ -76,7 +77,8 @@ export struct PlayerComponent { | ||
| 76 | playerController: this.playerController, | 77 | playerController: this.playerController, |
| 77 | onLoad: () => { | 78 | onLoad: () => { |
| 78 | this.isCanplay = true | 79 | this.isCanplay = true |
| 79 | - this.playerController?.firstPlay(this.playUrl); | 80 | + this.contentTrackingDict() |
| 81 | + this.playerController?.firstPlay(this.playUrl, TrackConstants.PageName.Live_Detail, this.pageParam); | ||
| 80 | } | 82 | } |
| 81 | }) | 83 | }) |
| 82 | } else if (this.liveStreamType == 0) { | 84 | } else if (this.liveStreamType == 0) { |
| @@ -84,7 +86,8 @@ export struct PlayerComponent { | @@ -84,7 +86,8 @@ export struct PlayerComponent { | ||
| 84 | playerController: this.playerController, | 86 | playerController: this.playerController, |
| 85 | onLoad: () => { | 87 | onLoad: () => { |
| 86 | this.isCanplay = true | 88 | this.isCanplay = true |
| 87 | - this.playerController?.firstPlay(this.playUrl); | 89 | + this.contentTrackingDict() |
| 90 | + this.playerController?.firstPlay(this.playUrl, TrackConstants.PageName.Live_Detail, this.pageParam); | ||
| 88 | } | 91 | } |
| 89 | }).margin({ top: 195 }).height(211) | 92 | }).margin({ top: 195 }).height(211) |
| 90 | } | 93 | } |
| @@ -106,4 +109,12 @@ export struct PlayerComponent { | @@ -106,4 +109,12 @@ export struct PlayerComponent { | ||
| 106 | .height('100%') | 109 | .height('100%') |
| 107 | .width('100%') | 110 | .width('100%') |
| 108 | } | 111 | } |
| 112 | + | ||
| 113 | + contentTrackingDict() { | ||
| 114 | + this.pageParam = { | ||
| 115 | + 'contentType': `${this.contentDetailData.newsType}`, | ||
| 116 | + 'contentId': `${this.contentDetailData.newsId}`, | ||
| 117 | + 'contentName': `${this.contentDetailData.newsTitle || ''}`, | ||
| 118 | + } | ||
| 119 | + } | ||
| 109 | } | 120 | } |
| @@ -7,8 +7,8 @@ struct GuidePages { | @@ -7,8 +7,8 @@ struct GuidePages { | ||
| 7 | // guideImage = [$r('app.media.guide_static1'), $r('app.media.guide_static2'), $r('app.media.guide_static3'), $r('app.media.guide_static4'),$r('app.media.guide_static5')] | 7 | // guideImage = [$r('app.media.guide_static1'), $r('app.media.guide_static2'), $r('app.media.guide_static3'), $r('app.media.guide_static4'),$r('app.media.guide_static5')] |
| 8 | // guideTitle = [$r('app.media.guide_title1'), $r('app.media.guide_title2'), $r('app.media.guide_title3'), $r('app.media.guide_title4'),$r('app.media.guide_title5')] | 8 | // guideTitle = [$r('app.media.guide_title1'), $r('app.media.guide_title2'), $r('app.media.guide_title3'), $r('app.media.guide_title4'),$r('app.media.guide_title5')] |
| 9 | // guideIndex = [$r('app.media.guide_index1'), $r('app.media.guide_index2'), $r('app.media.guide_index3'),$r('app.media.guide_index4'), $r('app.media.guide_button')] | 9 | // guideIndex = [$r('app.media.guide_index1'), $r('app.media.guide_index2'), $r('app.media.guide_index3'),$r('app.media.guide_index4'), $r('app.media.guide_button')] |
| 10 | - guideImage = [$r('app.media.guide_Static')] | ||
| 11 | - guideIndex = [$r('app.media.guide_button')] | 10 | + guideImage = [$r('app.media.guide_Static'),''] |
| 11 | + guideIndex = [$r('app.media.guide_button'),''] | ||
| 12 | 12 | ||
| 13 | build() { | 13 | build() { |
| 14 | Column() { | 14 | Column() { |
| @@ -17,10 +17,16 @@ struct GuidePages { | @@ -17,10 +17,16 @@ struct GuidePages { | ||
| 17 | this.ChildItem(index) | 17 | this.ChildItem(index) |
| 18 | 18 | ||
| 19 | }, (item: number) => JSON.stringify(item)) | 19 | }, (item: number) => JSON.stringify(item)) |
| 20 | - }.loop(false).disableSwipe(true) | 20 | + }.loop(false) |
| 21 | .indicator(false) | 21 | .indicator(false) |
| 22 | .width('100%') | 22 | .width('100%') |
| 23 | .height('100%') | 23 | .height('100%') |
| 24 | + .effectMode(EdgeEffect.None) | ||
| 25 | + .onChange(index => { | ||
| 26 | + if (index == 1) { | ||
| 27 | + WDRouterRule.jumpWithReplacePage(WDRouterPage.launchInterestsPage) | ||
| 28 | + } | ||
| 29 | + }) | ||
| 24 | }.width('100%') | 30 | }.width('100%') |
| 25 | .height('100%') | 31 | .height('100%') |
| 26 | 32 |
| @@ -13,7 +13,8 @@ import { | @@ -13,7 +13,8 @@ import { | ||
| 13 | import { initGlobalPlayerSettings, setupPlayerConfig } from '../utils/GlobalSetting'; | 13 | import { initGlobalPlayerSettings, setupPlayerConfig } from '../utils/GlobalSetting'; |
| 14 | import prompt from '@ohos.promptAction'; | 14 | import prompt from '@ohos.promptAction'; |
| 15 | import { PlayerConstants, AVPlayerStatus, Events } from '../constants/PlayerConstants'; | 15 | import { PlayerConstants, AVPlayerStatus, Events } from '../constants/PlayerConstants'; |
| 16 | -import { Logger, StringUtils } from 'wdKit/Index'; | 16 | +import { DateTimeUtils, Logger, StringUtils } from 'wdKit/Index'; |
| 17 | +import { ParamType, TrackingPlay } from 'wdTracking/Index'; | ||
| 17 | 18 | ||
| 18 | const TAG = "WDAliPlayerController" | 19 | const TAG = "WDAliPlayerController" |
| 19 | 20 | ||
| @@ -50,6 +51,11 @@ export class WDAliPlayerController { | @@ -50,6 +51,11 @@ export class WDAliPlayerController { | ||
| 50 | public onCanplay?: () => void; | 51 | public onCanplay?: () => void; |
| 51 | public onStatusChange?: (status: number) => void; | 52 | public onStatusChange?: (status: number) => void; |
| 52 | public onFirstFrameDisplay?: () => void | 53 | public onFirstFrameDisplay?: () => void |
| 54 | + // 埋点字段 | ||
| 55 | + private creatStartTime: number = 0; //开始加载时间 | ||
| 56 | + private creatEndTime: number = 0; //加载完成时间 | ||
| 57 | + private pageParam: ParamType = {} | ||
| 58 | + private pageName: string = '' | ||
| 53 | 59 | ||
| 54 | constructor() { | 60 | constructor() { |
| 55 | Logger.info(TAG, "初始化") | 61 | Logger.info(TAG, "初始化") |
| @@ -102,11 +108,29 @@ export class WDAliPlayerController { | @@ -102,11 +108,29 @@ export class WDAliPlayerController { | ||
| 102 | if (this.onFirstFrameDisplay) { | 108 | if (this.onFirstFrameDisplay) { |
| 103 | this.onFirstFrameDisplay() | 109 | this.onFirstFrameDisplay() |
| 104 | } | 110 | } |
| 111 | + | ||
| 112 | + | ||
| 113 | + if (this.pageParam) { | ||
| 114 | + console.log('播放视频pageParam', JSON.stringify(this.pageParam)) | ||
| 115 | + // 播放埋点 | ||
| 116 | + TrackingPlay.videoPositivePlay(Math.floor((DateTimeUtils.getTimeStamp() - this.creatStartTime) / 1000), | ||
| 117 | + this.pageName, this.pageName, this.pageParam) | ||
| 118 | + } | ||
| 119 | + | ||
| 105 | } | 120 | } |
| 106 | }); | 121 | }); |
| 107 | this.avPlayer?.setOnCompletionListener({ | 122 | this.avPlayer?.setOnCompletionListener({ |
| 108 | onCompletion: () => { | 123 | onCompletion: () => { |
| 109 | Logger.debug(TAG, "播放完成") | 124 | Logger.debug(TAG, "播放完成") |
| 125 | + | ||
| 126 | + if (this.pageParam) { | ||
| 127 | + let initDuration = Math.floor(Number(this.duration) / 1000) | ||
| 128 | + let currentPlayTime: number = Math.floor((DateTimeUtils.getTimeStamp() - this.creatStartTime) / 1000) //当前播放时间 | ||
| 129 | + console.log('播放结束') | ||
| 130 | + // 播放结束埋点 | ||
| 131 | + TrackingPlay.videoPlayEnd(currentPlayTime, initDuration, currentPlayTime, this.pageName, this.pageName, | ||
| 132 | + this.pageParam) | ||
| 133 | + } | ||
| 110 | } | 134 | } |
| 111 | }); | 135 | }); |
| 112 | this.avPlayer?.setOnInfoListener({ | 136 | this.avPlayer?.setOnInfoListener({ |
| @@ -197,6 +221,9 @@ export class WDAliPlayerController { | @@ -197,6 +221,9 @@ export class WDAliPlayerController { | ||
| 197 | this.errorMesage = errorInfo.getMsg() | 221 | this.errorMesage = errorInfo.getMsg() |
| 198 | this.status = PlayerConstants.STATUS_ERROR; | 222 | this.status = PlayerConstants.STATUS_ERROR; |
| 199 | this.watchStatus(); | 223 | this.watchStatus(); |
| 224 | + | ||
| 225 | + console.log('播放错误',JSON.stringify(error)) | ||
| 226 | + TrackingPlay.videoPlayError(errorInfo.getMsg(), this.pageName, this.pageName, this.pageParam) | ||
| 200 | } | 227 | } |
| 201 | }); | 228 | }); |
| 202 | this.avPlayer?.setOnLoadingStatusListener({ | 229 | this.avPlayer?.setOnLoadingStatusListener({ |
| @@ -265,12 +292,20 @@ export class WDAliPlayerController { | @@ -265,12 +292,20 @@ export class WDAliPlayerController { | ||
| 265 | } | 292 | } |
| 266 | } | 293 | } |
| 267 | 294 | ||
| 268 | - async firstPlay(url: string) { | 295 | + async firstPlay(url: string, pageName?: string, pageParam?: ParamType) { |
| 269 | if (StringUtils.isEmpty(url)) { | 296 | if (StringUtils.isEmpty(url)) { |
| 270 | Logger.error(TAG, "播放链接为空") | 297 | Logger.error(TAG, "播放链接为空") |
| 271 | return | 298 | return |
| 272 | } | 299 | } |
| 273 | 300 | ||
| 301 | + this.creatStartTime = DateTimeUtils.getTimeStamp() | ||
| 302 | + if (pageName) { | ||
| 303 | + this.pageName = pageName | ||
| 304 | + } | ||
| 305 | + if (pageParam) { | ||
| 306 | + this.pageParam = pageParam | ||
| 307 | + } | ||
| 308 | + | ||
| 274 | this.url = url; | 309 | this.url = url; |
| 275 | if (this.avPlayer == null) { | 310 | if (this.avPlayer == null) { |
| 276 | Logger.info(TAG, "等待播放器初始化") | 311 | Logger.info(TAG, "等待播放器初始化") |
| @@ -457,11 +492,7 @@ export class WDAliPlayerController { | @@ -457,11 +492,7 @@ export class WDAliPlayerController { | ||
| 457 | if (this.onStatusChange) { | 492 | if (this.onStatusChange) { |
| 458 | this.onStatusChange(this.status) | 493 | this.onStatusChange(this.status) |
| 459 | } | 494 | } |
| 460 | - // if (this.status === PlayConstants.STATUS_START) { | ||
| 461 | - // globalThis.windowClass.setWindowKeepScreenOn(true); | ||
| 462 | - // } else { | ||
| 463 | - // globalThis.windowClass.setWindowKeepScreenOn(false); | ||
| 464 | - // } | 495 | + |
| 465 | } | 496 | } |
| 466 | 497 | ||
| 467 | playError(msg?: string) { | 498 | playError(msg?: string) { |
| @@ -113,6 +113,29 @@ export class TrackingContent { | @@ -113,6 +113,29 @@ export class TrackingContent { | ||
| 113 | 113 | ||
| 114 | } | 114 | } |
| 115 | 115 | ||
| 116 | + | ||
| 117 | + /** | ||
| 118 | + * 直播预约埋点 | ||
| 119 | + * @param isSubscribeFlag | ||
| 120 | + * @param pageId | ||
| 121 | + * @param pageName | ||
| 122 | + * @param extParams | ||
| 123 | + */ | ||
| 124 | + static subscribeClick(isSubscribeFlag:boolean ,pageId: string, pageName: string,extParams?: ParamType){ | ||
| 125 | + let params = TrackingUtils.generateParams(extParams) | ||
| 126 | + if (pageId.length) { | ||
| 127 | + params["pageId"] = pageId | ||
| 128 | + } | ||
| 129 | + if (pageName.length) { | ||
| 130 | + params["pageName"] = pageName | ||
| 131 | + } | ||
| 132 | + | ||
| 133 | + let event = isSubscribeFlag?'live_subscribe_click':'cancel_live_subscribe_click' | ||
| 134 | + TrackingUtils.fillPositionWith(params) | ||
| 135 | + Tracking.event(event, params) | ||
| 136 | + } | ||
| 137 | + | ||
| 138 | + | ||
| 116 | // 内容下载点击事件 1.图片 2.音频 3.视频 | 139 | // 内容下载点击事件 1.图片 2.音频 3.视频 |
| 117 | static download(donwloadContentType: number, pageId: string, pageName: string, extParams?: ParamType) { | 140 | static download(donwloadContentType: number, pageId: string, pageName: string, extParams?: ParamType) { |
| 118 | let params = TrackingUtils.generateParams(extParams) | 141 | let params = TrackingUtils.generateParams(extParams) |
| @@ -103,8 +103,8 @@ struct LaunchAdvertisingPage { | @@ -103,8 +103,8 @@ struct LaunchAdvertisingPage { | ||
| 103 | .fontSize('24lpx') | 103 | .fontSize('24lpx') |
| 104 | .width('72lpx') | 104 | .width('72lpx') |
| 105 | .height('36lpx') | 105 | .height('36lpx') |
| 106 | - .borderRadius(5) | ||
| 107 | - .margin({top:'10lpx',left:'19lpx'}) | 106 | + .borderRadius(2) |
| 107 | + .margin({top:'15lpx',left:'19lpx'}) | ||
| 108 | .backgroundColor('#80000000') | 108 | .backgroundColor('#80000000') |
| 109 | } | 109 | } |
| 110 | .width('100%') | 110 | .width('100%') |
| @@ -191,7 +191,7 @@ struct LaunchAdvertisingPage { | @@ -191,7 +191,7 @@ struct LaunchAdvertisingPage { | ||
| 191 | this.trackingLaunchClick() | 191 | this.trackingLaunchClick() |
| 192 | 192 | ||
| 193 | if(this.defaultModel.linkUrl.length > 0){ | 193 | if(this.defaultModel.linkUrl.length > 0){ |
| 194 | - if (this.defaultModel.objectType == '2') { | 194 | + if (this.defaultModel.openType == '2') { |
| 195 | //端外打开 | 195 | //端外打开 |
| 196 | ProcessUtils.jumpExternalWebPage(this.defaultModel.linkUrl) | 196 | ProcessUtils.jumpExternalWebPage(this.defaultModel.linkUrl) |
| 197 | }else { | 197 | }else { |
| @@ -3,8 +3,9 @@ import { WDRouterRule } from 'wdRouter'; | @@ -3,8 +3,9 @@ import { WDRouterRule } from 'wdRouter'; | ||
| 3 | import { WDRouterPage } from 'wdRouter'; | 3 | import { WDRouterPage } from 'wdRouter'; |
| 4 | import { SPHelper } from 'wdKit/Index'; | 4 | import { SPHelper } from 'wdKit/Index'; |
| 5 | import { SpConstants } from 'wdConstant/Index'; | 5 | import { SpConstants } from 'wdConstant/Index'; |
| 6 | -import { ButtonOptions, promptAction } from '@kit.ArkUI'; | 6 | +import { ButtonOptions, promptAction, window } from '@kit.ArkUI'; |
| 7 | import { ParamType, TrackConstants, TrackingContent } from 'wdTracking/Index'; | 7 | import { ParamType, TrackConstants, TrackingContent } from 'wdTracking/Index'; |
| 8 | +import { ImageKnifeComponent } from '@ohos/imageknife'; | ||
| 8 | 9 | ||
| 9 | @Entry | 10 | @Entry |
| 10 | @Component | 11 | @Component |
| @@ -13,7 +14,6 @@ struct LaunchInterestsHobbiesPage { | @@ -13,7 +14,6 @@ struct LaunchInterestsHobbiesPage { | ||
| 13 | @State selectCount: number = 0 | 14 | @State selectCount: number = 0 |
| 14 | @State interestsArray: InterestsList[] = [] | 15 | @State interestsArray: InterestsList[] = [] |
| 15 | 16 | ||
| 16 | - | ||
| 17 | aboutToAppear(){ | 17 | aboutToAppear(){ |
| 18 | //请求接口,获取兴趣偏好数据 | 18 | //请求接口,获取兴趣偏好数据 |
| 19 | this.requestInterestsData() | 19 | this.requestInterestsData() |
| @@ -21,6 +21,8 @@ struct LaunchInterestsHobbiesPage { | @@ -21,6 +21,8 @@ struct LaunchInterestsHobbiesPage { | ||
| 21 | 21 | ||
| 22 | build() { | 22 | build() { |
| 23 | Column() { | 23 | Column() { |
| 24 | + Stack(){ | ||
| 25 | + Column(){ | ||
| 24 | Row(){ | 26 | Row(){ |
| 25 | Blank() | 27 | Blank() |
| 26 | Text('跳过') | 28 | Text('跳过') |
| @@ -28,7 +30,7 @@ struct LaunchInterestsHobbiesPage { | @@ -28,7 +30,7 @@ struct LaunchInterestsHobbiesPage { | ||
| 28 | .fontColor('#333333') | 30 | .fontColor('#333333') |
| 29 | .width('54lpx') | 31 | .width('54lpx') |
| 30 | .height('35lpx') | 32 | .height('35lpx') |
| 31 | - .margin({top:'27lpx',right:'46lpx'}) | 33 | + .margin({right:'46lpx'}) |
| 32 | .onClick(()=>{ | 34 | .onClick(()=>{ |
| 33 | //直接跳过到首页 | 35 | //直接跳过到首页 |
| 34 | //跳转首页 | 36 | //跳转首页 |
| @@ -60,12 +62,16 @@ struct LaunchInterestsHobbiesPage { | @@ -60,12 +62,16 @@ struct LaunchInterestsHobbiesPage { | ||
| 60 | ForEach(this.interestsArray,(item:InterestsList,index:number)=>{ | 62 | ForEach(this.interestsArray,(item:InterestsList,index:number)=>{ |
| 61 | GridItem(){ | 63 | GridItem(){ |
| 62 | Stack({alignContent:Alignment.TopStart}){ | 64 | Stack({alignContent:Alignment.TopStart}){ |
| 63 | - | ||
| 64 | - Image(item.pic) | 65 | + ImageKnifeComponent({imageKnifeOption:{loadSrc:item.pic}}) |
| 65 | .width('100%') | 66 | .width('100%') |
| 66 | .height('100%') | 67 | .height('100%') |
| 67 | .backgroundColor(Color.White) | 68 | .backgroundColor(Color.White) |
| 68 | .borderRadius(5) | 69 | .borderRadius(5) |
| 70 | + // Image(item.pic) | ||
| 71 | + // .width('100%') | ||
| 72 | + // .height('100%') | ||
| 73 | + // .backgroundColor(Color.White) | ||
| 74 | + // .borderRadius(5) | ||
| 69 | Stack(){ | 75 | Stack(){ |
| 70 | Image('') | 76 | Image('') |
| 71 | .width('100%') | 77 | .width('100%') |
| @@ -74,7 +80,6 @@ struct LaunchInterestsHobbiesPage { | @@ -74,7 +80,6 @@ struct LaunchInterestsHobbiesPage { | ||
| 74 | .opacity(item.choose?0.5:0) | 80 | .opacity(item.choose?0.5:0) |
| 75 | .borderRadius(5) | 81 | .borderRadius(5) |
| 76 | } | 82 | } |
| 77 | - | ||
| 78 | Stack(){ | 83 | Stack(){ |
| 79 | Column({}){ | 84 | Column({}){ |
| 80 | Text(item.name) | 85 | Text(item.name) |
| @@ -111,16 +116,21 @@ struct LaunchInterestsHobbiesPage { | @@ -111,16 +116,21 @@ struct LaunchInterestsHobbiesPage { | ||
| 111 | }) | 116 | }) |
| 112 | 117 | ||
| 113 | }) | 118 | }) |
| 114 | - | ||
| 115 | } | 119 | } |
| 116 | .width('90%') | 120 | .width('90%') |
| 117 | - .height('70%') | ||
| 118 | - .margin({top:'61lpx'}) | 121 | + // .height('70%') |
| 122 | + .margin({top:'61lpx',bottom:'240lpx'}) | ||
| 119 | .columnsTemplate('1fr 1fr 1fr') | 123 | .columnsTemplate('1fr 1fr 1fr') |
| 120 | - // .rowsTemplate('1fr 1fr 1fr 1fr') | ||
| 121 | .columnsGap('23lpx') | 124 | .columnsGap('23lpx') |
| 122 | .rowsGap('23lpx') | 125 | .rowsGap('23lpx') |
| 123 | .scrollBar(BarState.Off) | 126 | .scrollBar(BarState.Off) |
| 127 | + } | ||
| 128 | + .width('100%') | ||
| 129 | + .height('100%') | ||
| 130 | + } | ||
| 131 | + .width('100%') | ||
| 132 | + .height(`calc(100% - ${108 + 'lpx'})`) | ||
| 133 | + // .backgroundColor(Color.Red) | ||
| 124 | 134 | ||
| 125 | Stack({alignContent:Alignment.Center}){ | 135 | Stack({alignContent:Alignment.Center}){ |
| 126 | Button(this.selectCount == 0?'选好了':'选好了(' + this.selectCount + ')') | 136 | Button(this.selectCount == 0?'选好了':'选好了(' + this.selectCount + ')') |
| @@ -131,9 +141,11 @@ struct LaunchInterestsHobbiesPage { | @@ -131,9 +141,11 @@ struct LaunchInterestsHobbiesPage { | ||
| 131 | .borderRadius('10lpx') | 141 | .borderRadius('10lpx') |
| 132 | .width('662lpx') | 142 | .width('662lpx') |
| 133 | .height('84lpx') | 143 | .height('84lpx') |
| 144 | + .margin({top:'10lpx'}) | ||
| 134 | Image('') | 145 | Image('') |
| 135 | .width('662lpx') | 146 | .width('662lpx') |
| 136 | .height('84lpx') | 147 | .height('84lpx') |
| 148 | + .margin({top:'10lpx'}) | ||
| 137 | .backgroundColor(Color.White) | 149 | .backgroundColor(Color.White) |
| 138 | .opacity(this.selectCount == 0 ? 0.6 : 0) | 150 | .opacity(this.selectCount == 0 ? 0.6 : 0) |
| 139 | .borderRadius('10lpx') | 151 | .borderRadius('10lpx') |
| @@ -156,10 +168,8 @@ struct LaunchInterestsHobbiesPage { | @@ -156,10 +168,8 @@ struct LaunchInterestsHobbiesPage { | ||
| 156 | } | 168 | } |
| 157 | .width('100%') | 169 | .width('100%') |
| 158 | .height('108lpx') | 170 | .height('108lpx') |
| 159 | - // .position({y:}) | ||
| 160 | - // .margin({bottom:'1',top:'1'}) | ||
| 161 | - .backgroundColor('#FFFFFF') | ||
| 162 | - | 171 | + .margin({top:0}) |
| 172 | + // .backgroundColor(Color.Orange) | ||
| 163 | } | 173 | } |
| 164 | .width('100%') | 174 | .width('100%') |
| 165 | .height('100%') | 175 | .height('100%') |
-
Please register or login to post a comment