developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
wangliang_wd
0b85b5db 2 parents 8bb959fd 05a411e2

Merge branch 'main' of http://192.168.1.42/developOne/harmonyPool into main 

* 'main' of http://192.168.1.42/developOne/harmonyPool: (23 commits)
  feat: 滑动松手查看功能未实现
  fix:关注数处理 & 留白距离
  fix(17807)：功能缺陷-【uat】意见反馈-描述您的问题-输入框输入超过500字未提示“请输入 10-500 个字以内”且500数字未标红，框框缺标红了。并且输入框变成了圆角，看图
  电子报直板、折叠屏、pad适配
  feat:直播详情页面，播放器埋点事件
  feat:直播详情页面，播放器埋点事件
  fix:somebug
  fix:bug[17400] 号主页-关注列表_我的,已关注按钮底色较浅且四角未做圆角处理
  fix:somebug
  fix:bug[17399] 号主页-关注列表_向左滑动未露出展示当前展示页的tab
  fix:我的页面 适配 折叠屏
  fix:我的页面 适配 折叠屏
  埋点问题修复
  埋点
  fix：生产环境，点击直播，先黑屏，再露出直播内容。
  feat：规整为一，跳转直播详情页面方法
  删除老的顶导
  替换应用图标，两层图标叠加
  fix:  进入直播间，向右滑动简介，和向左滑动大家聊tab ，预期不支持滑动，实际可以滑动
  fix(18213)： 电子报-不该左右滑返回上一级页面
  ...
Inline Side-by-side
Showing 44 changed files with 867 additions and 905 deletions
... ... @@ -295,6 +295,10 @@ export class ProcessUtils {
Logger.debug(TAG, `gotoVod, ${content.objectId}`);
}
/**
* 进入直播详情页面
* @param content
*/
public static async gotoLive(content: ContentDTO) {
let taskAction: Action = {
type: 'JUMP_DETAIL_PAGE',
... ...
... ... @@ -4,6 +4,7 @@ import { TopNavDTO } from './TopNavDTO';
* 底导(包含顶导列表）数据
*/
export interface BottomNavDTO {
pageName: string;
backgroundUrl: string; // 迭代四：页面背景图
channelChooseActionUrl: string; // 迭代四：频道选中下划线动画
channelChooseCColor: string; // 迭代四：频道未选中颜色
... ...
... ... @@ -14,8 +14,6 @@ export { PageComponent } from "./src/main/ets/components/page/PageComponent"
export { LikeComponent } from "./src/main/ets/components/view/LikeComponent"
export { TopNavigationComponent } from "./src/main/ets/components/page/TopNavigationComponent"
export { TopNavigationComponentNew } from "./src/main/ets/components/page/TopNavigationComponentNew"
export { LabelComponent } from "./src/main/ets/components/view/LabelComponent"
... ...
... ... @@ -34,11 +34,10 @@ export struct ENewspaperItemComponent {
.visibility(this.isShowSkeleton ? Visibility.Visible : Visibility.None)
Image(this.newspaperListItemBean.pagePic)
.width('100%')
.aspectRatio(378 / 566)
.objectFit(ImageFit.Fill)
.onComplete(() => {
this.isShowSkeleton = false
})
.objectFit(ImageFit.Contain)
.visibility(this.isShowSkeleton ? Visibility.None : Visibility.Visible)
Canvas(this.context)
... ... @@ -49,7 +48,7 @@ export struct ENewspaperItemComponent {
})
}
.padding({ top: 16, right: 16, bottom: 16, left: 16 })
.padding({ top:14, right: 10, bottom: 14, left: 10 })
.margin({ left: 10, right: 10 })
.backgroundColor(Color.White)
.width('100%')
... ...
... ... @@ -28,6 +28,8 @@ export struct ENewspaperPageComponent {
@State swiperIndex: number = 0;
//当前选择的日期标记
@State selectDate: Date = new Date()
@State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
@State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
//watch监听报纸页码回调
onCurrentPageNumUpdated(): void {
... ... @@ -102,7 +104,10 @@ export struct ENewspaperPageComponent {
//获取宽高尺寸
this.screenWidth = this.displayTool.width
this.picWidth = this.screenWidth - vp2px(52)
this.picHeight = this.picWidth * 566 / 378
let screenHeight = this.displayTool.height;
// bottomSafeHeight 底导高度 topSafeHeight 顶导高度 44 顶部高度 60 底部高度
let height = screenHeight -this.bottomSafeHeight - this.topSafeHeight - vp2px(44) - vp2px(60)
this.picHeight = height
// 默认日期
const date = new Date()
const month = date.getMonth() + 1
... ... @@ -213,10 +218,11 @@ export struct ENewspaperPageComponent {
}
.index(this.swiperIndex)
.width('100%')
.height(px2vp(this.picHeight) + 32)
// newspaper_shadow 44 高度 e_newspaper_content 35 margin top
.height(px2vp(this.picHeight) - 44 - 35)
.vertical(true)
.autoPlay(false)
.cachedCount(3)
.cachedCount(1)
.indicator(false)
.loop(false)
.displayCount(1)
... ... @@ -234,6 +240,7 @@ export struct ENewspaperPageComponent {
Image($r('app.media.newspaper_shadow'))
.height($r('app.float.vp_12'))
.width('100%')
.margin({ left: 10, right: 10, top: -1 })
.objectFit(ImageFit.Contain)
.alignRules({
... ...
... ... @@ -11,6 +11,7 @@ import { router } from '@kit.ArkUI';
import { CommonConstants } from 'wdConstant/Index';
import { ProcessUtils } from 'wdRouter/Index';
import { TrackConstants, TrackingButton, TrackingPageBrowse } from 'wdTracking/Index';
import inputMethod from '@ohos.inputMethod';
const TAG = 'FeedBackActivity'
... ... @@ -23,14 +24,15 @@ const TAG = 'FeedBackActivity'
export struct FeedBackActivity {
pageShowTime:number = 0;
@State canSubmit: boolean = false;
@State textNumLabel: string = '0/500';
contact: string = "";
@State textNumLabel: number = 0;
email: string = "";
//UI
scroller: Scroller = new Scroller();
@State isNetConnected: boolean = true
@State editValue: FeedbackTypeBean = {classifyName:''} as FeedbackTypeBean
@State feedbackTypeBeans: FeedbackTypeBean[] = [] as FeedbackTypeBean[]
//添加图片
addPic: PhotoListBean = {itemType:1} as PhotoListBean
... ... @@ -65,16 +67,9 @@ export struct FeedBackActivity {
GridCol({
}) {
Row(){
Toggle({ type: ToggleType.Checkbox, isOn: feedbackTypeBean.isSelect })
.onChange((select) => {
feedbackTypeBean.isSelect = select
this.canSubmit = this.checkSubmit()
TrackingButton.click('submit_feedback',TrackConstants.PageName.FeedbackPage,TrackConstants.PageName.FeedbackPage,{
'feedback_type':feedbackTypeBean.id+''
})
})
Image(feedbackTypeBean.isSelect ? $r('app.media.checkbox_true') : $r('app.media.checkbox_false'))
.width(17)
.height(17)
Text(feedbackTypeBean.classifyName)
.fontColor($r('app.color.color_222222'))
.fontSize($r('app.float.font_size_14'))
... ... @@ -84,6 +79,21 @@ export struct FeedBackActivity {
.height($r('app.float.vp_22'))
.margin({bottom:$r('app.float.margin_16')})
.backgroundColor($r('app.color.color_fff'))
.onClick(() => {
let temp = {} as FeedbackTypeBean
temp.id = feedbackTypeBean.id
temp.classifyName = feedbackTypeBean.classifyName
if(feedbackTypeBean.isSelect){
temp.isSelect = false
}else{
temp.isSelect = true
}
this.feedbackTypeBeans[index] = temp
this.canSubmit = this.checkSubmit()
TrackingButton.click('submit_feedback',TrackConstants.PageName.FeedbackPage,TrackConstants.PageName.FeedbackPage,{
'feedback_type':feedbackTypeBean.id+''
})
})
}
})
}
... ... @@ -99,7 +109,7 @@ export struct FeedBackActivity {
.width(CommonConstants.FULL_WIDTH)
.margin({ left: 24, top: $r('app.float.vp_12') })
Stack({ alignContent: Alignment.BottomEnd }) {
TextArea({ placeholder: $r('app.string.feedback_comments') })
TextArea({ placeholder: $r('app.string.feedback_comments'),text: this.editValue.classifyName})
.width(CommonConstants.FULL_WIDTH)
.height(CommonConstants.FULL_HEIGHT)
.fontColor($r('app.color.color_222222'))
... ... @@ -108,12 +118,20 @@ export struct FeedBackActivity {
.placeholderFont({size:$r('app.float.font_size_13_2')})
.padding({bottom:96})
.backgroundColor($r('app.color.color_F5F5F5'))
.outlineColor($r('app.color.color_F5F5F5'))
.align(Alignment.TopStart)
.maxLength(500)
.onChange((value) => {
// Logger.debug(TAG, "onChange" + value + "/" + this.passwordContent)
this.contact = value
this.textNumLabel = value.length+"/500"
if(value.length> 500){
//隐藏键盘
inputMethod.getController().stopInputSession();
ToastUtils.shortToast($r('app.string.res_feedback_commentsFail'))
// Logger.debug(TAG, "onChange > 500 " + value)
this.editValue = {classifyName:value.substring(0,500)} as FeedbackTypeBean
}else{
this.editValue.classifyName = value
}
// Logger.debug(TAG, "onChange " + value)
this.textNumLabel = value.length
this.canSubmit = this.checkSubmit()
})
GridRow({
... ... @@ -177,9 +195,17 @@ export struct FeedBackActivity {
})
}
.margin({bottom: $r('app.float.vp_12'), right: $r('app.float.vp_12'),left: $r('app.float.vp_12')})
Text(this.textNumLabel)
Text(){
ContainerSpan(){
if(this.textNumLabel<500){
Span(this.textNumLabel+'/500').fontColor($r('app.color.color_999999'))
}else{
Span(this.textNumLabel+'').fontColor($r('app.color.color_ED2800'))
Span('/500').fontColor($r('app.color.color_999999'))
}
}
}
.margin({bottom: $r('app.float.vp_12'), right: $r('app.float.vp_11')})
.fontColor($r('app.color.color_999999'))
.fontSize($r('app.float.font_size_13_5'))
}
.height(200)
... ... @@ -271,7 +297,7 @@ export struct FeedBackActivity {
* */
checkSubmit(): boolean {
if(StringUtils.isEmpty(this.contact) || this.contact.length < 10){
if(StringUtils.isEmpty(this.editValue.classifyName) || this.editValue.classifyName.length < 10){
return false
}
... ... @@ -387,7 +413,7 @@ export struct FeedBackActivity {
return
}
//内容必填
if(StringUtils.isEmpty(this.contact) || this.contact.length < 10 || this.contact.length>500){
if(StringUtils.isEmpty(this.editValue.classifyName) || this.editValue.classifyName.length < 10 || this.editValue.classifyName.length>500){
ToastUtils.shortToast($r('app.string.res_feedback_commentsFail'))
return
}
... ... @@ -395,7 +421,7 @@ export struct FeedBackActivity {
try {
let feedBackParams: FeedBackParams = {
//反馈内容
"content": this.contact,
"content": this.editValue.classifyName,
//投诉类型 id
"classifyFlagIds": selectType,
//设备
... ...
... ... @@ -107,8 +107,6 @@ export struct CardMediaInfo {
.margin({
right: '2vp'
})
// Image($r('app.media.card_live'))
// .mediaLogo()
Text('直播中')
.mediaText()
} else if (this.contentDTO?.liveType === 'end' && this.contentDTO?.linkUrl) {
... ... @@ -116,10 +114,17 @@ export struct CardMediaInfo {
.mediaLogo()
Text('回看')
.mediaText()
}else if(this.contentDTO?.liveInfo?.liveState === 'end' && !this.contentDTO?.linkUrl){
}else if(this.contentDTO?.liveType === 'end' && !this.contentDTO?.linkUrl){
Text('已结束')
.mediaText()
}else if(!this.contentDTO?.liveType && this.contentDTO?.linkUrl){
// 加个防护，生产有出现这样的特例
Image($r('app.media.card_play'))
.mediaLogo()
Text('回看')
.mediaText()
}
}else {
// 当liveInfo存在时后
... ... @@ -129,6 +134,7 @@ export struct CardMediaInfo {
Text('预约')
.mediaText()
} else if (this.contentDTO?.liveInfo?.liveState === 'running') {
Row(){
LottieView({
name: 'live_status_wait',
path: "lottie/live_detail_living.json",
... ... @@ -136,14 +142,14 @@ export struct CardMediaInfo {
lottieHeight: 14,
autoplay: true,
loop: true,
})
.margin({
}).margin({
right: '2vp'
})
// Image($r('app.media.card_live'))
// .mediaLogo()
Text('直播中')
.mediaText()
}
} else if (this.contentDTO?.liveInfo?.liveState === 'end' && this.contentDTO?.liveInfo?.replayUri) {
Image($r('app.media.card_play'))
.mediaLogo()
... ... @@ -154,7 +160,6 @@ export struct CardMediaInfo {
Text('已结束')
.mediaText()
}
}
// 备注直播间观看人数在轮播图卡不显示
if(this.beused !== 'Zh_Carousel_Layout_01'){
... ... @@ -165,15 +170,6 @@ export struct CardMediaInfo {
.mediaText()
}
}
// } else if (this.contentDTO?.liveInfo?.liveState === 'end' && this.contentDTO?.liveInfo
// ?.replayUri) {
// // Image($r('app.media.card_live'))
// // .mediaLogo()
// Text('直播结束')
// .mediaText()
// }
}
} else if (this.contentDTO.objectType === '9') {
// 显示组图；图片数量
... ...
... ... @@ -19,14 +19,67 @@ export struct ZhSingleRow02 {
@State pageId: string = '';
@State pageName: string = '';
@State compDTO: CompDTO = {} as CompDTO
@State initMoreWidth: number = 16;
@State moreWidth:number = 16
@State moreTips: string = ''
scroller: Scroller = new Scroller()
resetMoreTips() {
console.log('resetMoreTips', this.moreWidth, this.initMoreWidth)
if (this.moreWidth < this.initMoreWidth * 2) {
this.moreTips = '查看更多';
}
}
edgeAnimation() {
if (this.moreWidth < this.initMoreWidth * 3) {
if (!this.moreTips) {
this.moreTips = '查看更多';
}
this.moreWidth = this.moreWidth + 2
}
if (this.moreWidth > this.initMoreWidth * 2) {
this.moreTips = '松手查看';
} else {
}
}
reverseEdgeAnimation() {
if (this.moreWidth > this.initMoreWidth) {
this.moreWidth = this.moreWidth - 2
}
this.resetMoreTips()
}
resetEdgeAnimation() {
if (this.moreWidth > this.initMoreWidth) {
this.moreWidth = this.moreWidth - 1
this.resetEdgeAnimation();
}
this.resetMoreTips()
}
toMore() {
if (this.moreWidth > this.initMoreWidth * 2) {
if (this.compDTO?.objectType === '11') {
ProcessUtils.jumpChannelTab(this.compDTO.objectId, this.compDTO.pageId as string, this.compDTO.objectTitle)
} else if (this.compDTO?.objectType === '5') {
ProcessUtils._gotoSpecialTopic(this.compDTO.linkUrl)
} else if (this.compDTO?.objectType === '6') {
ProcessUtils._gotoDefaultWeb(this.compDTO.linkUrl)
}
}
}
build() {
Column() {
//顶部
this.CompHeader(this.compDTO)
Row(){
// 列表内容
List() {
Scroll(this.scroller) {
Row() {
Row() {
ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
CreatorItem({
item,
... ... @@ -35,15 +88,52 @@ export struct ZhSingleRow02 {
pageId: this.pageId,
pageName: this.pageName
})
.margin({right: index === this.compDTO.operDataList.length - 1 ? $r('app.float.card_comp_pagePadding_lf') : 0})
.margin({ right: 8 })
})
}
.listDirection(Axis.Horizontal)
.scrollBar(BarState.Off)
.edgeEffect(EdgeEffect.None)
if (this.compDTO.operDataList.length > 2) {
Column() {
if (this.moreWidth > this.initMoreWidth + 2) {
Text(this.moreTips)
.fontSize(8)
.fontColor(0x858585)
.width(8)
}
}
.justifyContent(FlexAlign.Center)
.align(Alignment.Center)
.height('100%')
.width(this.moreWidth)
.backgroundColor(0xe9e9e9)
.borderRadius({ topLeft: 5, bottomLeft: 5 })
}
}
}
.width(CommonConstants.FULL_WIDTH)
.height(208)
.align(Alignment.Start)
.scrollable(this.compDTO.operDataList.length > 2 ? ScrollDirection.Horizontal : ScrollDirection.None)
.scrollBar(BarState.Off)
.edgeEffect(EdgeEffect.None)
.onReachEnd(() => {
this.edgeAnimation()
})
.onScrollStop(() => {
// this.resetEdgeAnimation();
})
.onScroll((xOffset: number, yOffset: number) => {
if (xOffset < 0) {
this.reverseEdgeAnimation();
}
})
.onTouch((event?: TouchEvent) => {
if(event) {
if (event.type === TouchType.Up) {
this.toMore();
this.resetEdgeAnimation();
}
}
})
}
.padding({
left: $r('app.float.card_comp_pagePadding_lf'),
... ... @@ -126,6 +216,7 @@ struct CreatorItem {
.width(156)
.height(208)
.backgroundColor(0xf5f5f5)
.borderRadius(5)
Row()
.width(156)
... ... @@ -134,6 +225,7 @@ struct CreatorItem {
direction: GradientDirection.Bottom,
colors: [['rgba(0, 0, 0, 0.0)', 0.0], ['rgba(0, 0, 0, 0.3)', 1.0]]
})
.borderRadius(5)
Text(this.item.newsTitle)
.fontColor(0xffffff)
.fontSize(14)
... ... @@ -145,7 +237,6 @@ struct CreatorItem {
}
.width(156)
.height(208)
.margin({ right: 11 })
.borderColor($r('app.color.color_EDEDED'))
.borderRadius($r('app.float.image_border_radius'))
}
... ...
... ... @@ -29,17 +29,61 @@ export struct ZhSingleRow03 {
@State pageId: string = '';
@State pageName: string = '';
@State compDTO: CompDTO = {} as CompDTO
@State isEndEdge: boolean = false;
// @State reserveStatus: reserveItem[] = []
@State reservedIds: string[] = [];
@State loadImg: boolean = false;
@State initMoreWidth: number = 16;
@State moreWidth:number = 16
@State moreTips: string = ''
scroller: Scroller = new Scroller()
resetMoreTips() {
console.log('resetMoreTips', this.moreWidth, this.initMoreWidth)
if (this.moreWidth < this.initMoreWidth * 2) {
this.moreTips = '查看更多';
}
}
edgeAnimation() {
if (this.moreWidth < this.initMoreWidth * 3) {
if (!this.moreTips) {
this.moreTips = '查看更多';
}
this.moreWidth = this.moreWidth + 2
}
if (this.moreWidth > this.initMoreWidth * 2) {
this.moreTips = '松手查看';
} else {
}
}
reverseEdgeAnimation() {
if (this.moreWidth > this.initMoreWidth) {
this.moreWidth = this.moreWidth - 2
}
this.resetMoreTips()
}
resetEdgeAnimation() {
if (this.moreWidth > this.initMoreWidth) {
this.moreWidth = this.moreWidth - 1
this.resetEdgeAnimation();
}
this.resetMoreTips()
}
toMore() {
if (this.moreWidth > this.initMoreWidth * 2) {
this.jumpToMore()
}
}
async aboutToAppear(): Promise<void> {
this.getReserveState();
this.loadImg = await onlyWifiLoadImg();
}
scroller: Scroller = new Scroller()
// 请求所有预约状态
async getReserveState() {
... ... @@ -106,25 +150,51 @@ export struct ZhSingleRow03 {
Scroll(this.scroller){
Row() {
Row() {
ForEach(this.compDTO.operDataList, (item: ContentDTO) => {
this.ItemCard(item)
})
}
if (this.compDTO.operDataList.length > 2) {
Column() {
if (this.moreWidth > this.initMoreWidth + 2) {
Text(this.moreTips)
.fontSize(8)
.fontColor(0x858585)
.width(8)
}
.scrollable(ScrollDirection.Horizontal)
.scrollBar(BarState.Off)
.onScrollEdge((side: Edge) => {
if (side === Edge.End) {
this.isEndEdge = true;
}
.justifyContent(FlexAlign.Center)
.align(Alignment.Center)
.width(this.moreWidth)
.backgroundColor(0xf9f9f9)
.borderRadius({ topLeft: 5, bottomLeft: 5 })
.height(116)
}
}
}
.align(Alignment.Start)
.scrollable(this.compDTO.operDataList.length > 2 ? ScrollDirection.Horizontal : ScrollDirection.None)
.scrollBar(BarState.Off)
.edgeEffect(EdgeEffect.None)
.onReachEnd(() => {
this.edgeAnimation()
})
.onScrollStop(() => {
if (this.isEndEdge) {
this.jumpToMore();
}
// this.resetEdgeAnimation();
})
.onScroll((xOffset: number, yOffset: number) => {
this.isEndEdge = false;
if (xOffset < 0) {
this.reverseEdgeAnimation();
}
})
.onTouch((event?: TouchEvent) => {
if(event) {
if (event.type === TouchType.Up) {
this.toMore();
this.resetEdgeAnimation();
}
}
})
}
.padding({
... ...
... ... @@ -6,24 +6,25 @@ import { TrackingButton, TrackConstants } from 'wdTracking/Index';
@Component
export default struct MinePageMoreFunctionUI {
@Link moreData: MinePageMoreFunctionModel[]
@Link percent:number
build() {
Column() {
Column() {
Text("更多功能")
.fontColor($r('app.color.color_222222'))
.fontSize('29lpx')
.margin({ left: "31lpx" })
.lineHeight('46lpx')
.fontSize(`${this.calcHeight(29)}lpx`)
.margin({ left: `${this.calcHeight(31)}lpx` })
.lineHeight(`${this.calcHeight(46)}lpx`)
.fontWeight(FontWeight.Bold)
}.height('92lpx')
}.height(`${this.calcHeight(92)}lpx`)
.width('100%')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Start)
Text().backgroundColor($r('app.color.color_F5F5F5'))
.width('100%')
.height('1lpx')
.height(`${this.calcHeight(1)}lpx`)
List() {
ForEach(this.moreData, (item: MinePageMoreFunctionModel, index: number) => {
... ... @@ -31,39 +32,42 @@ export default struct MinePageMoreFunctionUI {
Column() {
Column() {
Row() {
Row(){
if (item.imgSrc) {
Image(item.imgSrc)
.width('38lpx')
.height('38lpx')
.margin({ right: '15lpx' })
.width(`${this.calcHeight(38)}lpx`)
.height(`${this.calcHeight(38)}lpx`)
.margin({ right: `${this.calcHeight(15)}lpx` })
.objectFit(ImageFit.Auto)
.interpolation(ImageInterpolation.High)
}
Text(`${item.msg}`)
.width('456lpx')
.height('38lpx')
.height(`${this.calcHeight(38)}lpx`)
.fontColor($r('app.color.color_666666'))
.fontSize('29lpx')
.fontSize(`${this.calcHeight(29)}lpx`)
.fontWeight(400)
}.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Start)
Blank()
Image($r('app.media.mine_user_arrow_2'))
.width('27lpx')
.height('27lpx')
.width(`${this.calcHeight(27)}lpx`)
.height(`${this.calcHeight(27)}lpx`)
.objectFit(ImageFit.Auto)
.interpolation(ImageInterpolation.High)
.margin({ left: '81lpx', right: '29lpx' })
.margin({ left: `${this.calcHeight(81)}lpx`, right: `${this.calcHeight(29)}lpx` })
}.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.SpaceBetween)
.width("100%")
}.height(`${this.calcHeight(108)}lpx`)
.justifyContent(FlexAlign.Center)
}.height('108lpx')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Start)
.padding({ left: '27lpx' })
.padding({ left: `${this.calcHeight(27)}lpx` })
.width("100%")
if (index != this.moreData.length - 1) {
Text().backgroundColor($r('app.color.color_F5F5F5'))
.width('612lpx')
.height('1lpx')
.width(`612lpx`)
.height(`${this.calcHeight(1)}lpx`)
}
}
}
... ... @@ -83,15 +87,21 @@ export default struct MinePageMoreFunctionUI {
ProcessUtils.gotoFeedBackActivity()
}
})
.height('117lpx')
.height(`${this.calcHeight(117)}lpx`)
.width("100%")
})
}.onScrollFrameBegin((offset, state) => {
return { offsetRemain: 0 }
})
.width("100%")
}
.backgroundColor($r('app.color.white'))
.borderRadius(8)
.margin({ left: '23lpx', right: '23lpx', top: "19lpx" })
.margin({ left: `${this.calcHeight(23)}lpx`, right: `${this.calcHeight(23)}lpx`, top: `${this.calcHeight(19)}lpx` })
}
calcHeight(value:number): number{
return value * this.percent
}
}
... ...
... ... @@ -11,12 +11,13 @@ const TAG = "MinePagePersonFunctionUI"
export default struct MinePagePersonFunctionUI {
@Link personalData:MinePagePersonalFunctionsItem[]
@Prop isLogin:boolean
@Link percent:number
build() {
Grid(){
ForEach(this.personalData,(item:MinePagePersonalFunctionsItem,index:number)=>{
GridItem(){
PagePersonFunction({ item: item, noDivider : (index % 5 < 4 && index != this.personalData.length-1) ? false : true})
PagePersonFunction({ item: item, noDivider : (index % 5 < 4 && index != this.personalData.length-1) ? false : true,percent:$percent})
}.onClick(()=>{
console.log(index+"")
switch (item.msg){
... ... @@ -77,14 +78,14 @@ export default struct MinePagePersonFunctionUI {
break;
}
}
}).width('142lpx')
.height('117lpx')
})/*.width(`${this.calcHeight(142)}lpx`)*/
.height(`${this.calcHeight(117)}lpx`)
})
}
.rowsTemplate('1fr')
.columnsTemplate('1fr 1fr 1fr 1fr 1fr')
.height('117lpx')
.margin({top:'31lpx'})
.height(`${this.calcHeight(117)}lpx`)
.margin({top:`${this.calcHeight(31)}lpx`})
}
messageClick(){
... ... @@ -94,6 +95,10 @@ export default struct MinePagePersonFunctionUI {
console.log(TAG, JSON.stringify(err))
})
}
calcHeight(value:number): number{
return value * this.percent
}
}
function trackButtonClick(buttonName: string){
... ...
... ... @@ -13,6 +13,7 @@ export default struct MinePageUserSimpleInfoUI {
userType:string = "1"
@State levelHead:string = ""
@State levelId:number = 0
@Link percent:number
loginStateChange(){
if(this.isLogin){
... ... @@ -29,20 +30,20 @@ export default struct MinePageUserSimpleInfoUI {
Stack(){
Image(this.headPhotoUrl==""?$r('app.media.default_head'):this.headPhotoUrl)
.alt($r('app.media.default_head'))
.width('100lpx')
.height('100lpx')
.width(`${this.calcHeight(100)}lpx`)
.height(`${this.calcHeight(100)}lpx`)
.objectFit(ImageFit.Cover)
.borderRadius(50)
if(StringUtils.isNotEmpty(this.levelHead)){
Image(this.levelHead)
.width('130lpx')
.height('130lpx')
.width(`${this.calcHeight(130)}lpx`)
.height(`${this.calcHeight(130)}lpx`)
.objectFit(ImageFit.Cover)
.borderRadius(50)
}
}.width('130lpx')
.height('130lpx')
}.width(`${this.calcHeight(130)}lpx`)
.height(`${this.calcHeight(130)}lpx`)
.alignContent(Alignment.Center)
.onClick(()=>{
this.jumpLogin()
... ... @@ -58,13 +59,13 @@ export default struct MinePageUserSimpleInfoUI {
.maxLines(1)
.fontWeight(FontWeight.Bold)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.fontSize('33lpx')
.lineHeight("46lpx")
.fontSize(`${this.calcHeight(33)}lpx`)
.lineHeight(`${this.calcHeight(46)}lpx`)
Image($r('app.media.mine_user_edit'))
.width('27lpx')
.height('27lpx')
.margin({left:'15lpx'})
.width(`${this.calcHeight(27)}lpx`)
.height(`${this.calcHeight(27)}lpx`)
.margin({left:`${this.calcHeight(15)}lpx`})
.objectFit(ImageFit.Cover)
Blank()
}.width('100%')
... ... @@ -75,39 +76,39 @@ export default struct MinePageUserSimpleInfoUI {
Stack(){
Image($r('app.media.mine_grade_bg'))
.width('84lpx')
.height('29lpx')
.width(`${this.calcHeight(84)}lpx`)
.height(`${this.calcHeight(29)}lpx`)
.objectFit(ImageFit.Auto)
Text(`等级${this.levelId}`)
.textAlign(TextAlign.Center)
.fontColor($r('app.color.white'))
.fontSize('19lpx')
.width('50lpx')
.height('29lpx')
}.margin({top:'15lpx'})
.fontSize(`${this.calcHeight(19)}lpx`)
.width(`${this.calcHeight(50)}lpx`)
.height(`${this.calcHeight(29)}lpx`)
}.margin({top:'`${this.calcHeight(15)}lpx`'})
}.alignItems(HorizontalAlign.Start)
.margin({top:'12lpx',left:'23lpx'})
.width('352lpx')
.margin({top:`${this.calcHeight(12)}lpx`,left:`${this.calcHeight(23)}lpx`})
.width(`${this.calcHeight(352)}lpx`)
}else{
Row(){
Text("登录注册")
.fontColor($r('app.color.color_222222'))
.fontSize('38lpx')
.lineHeight("46lpx")
.fontSize(`${this.calcHeight(38)}lpx`)
.lineHeight(`${this.calcHeight(46)}lpx`)
.fontWeight(600)
Image($r('app.media.mine_user_edit'))
.width('11lpx')
.height('20lpx')
.margin({left:'15lpx'})
.width(`${this.calcHeight(11)}lpx`)
.height(`${this.calcHeight(20)}lpx`)
.margin({left:`${this.calcHeight(15)}lpx`})
.objectFit(ImageFit.Cover)
Blank()
}.onClick(()=>{
this.jumpLogin()
trackButtonClick("myPageUserLogin")
})
.margin({top:'11lpx',left:'23lpx'})
.width('352lpx')
.margin({top:`${this.calcHeight(11)}lpx`,left:`${this.calcHeight(23)}lpx`})
.width(`${this.calcHeight(352)}lpx`)
}
Blank()
... ... @@ -116,15 +117,15 @@ export default struct MinePageUserSimpleInfoUI {
Text("签到")
.textAlign(TextAlign.Start)
.width('108lpx')
.height('46lpx')
.height(`${this.calcHeight(46)}lpx`)
.fontColor($r('app.color.color_AD6000'))
.backgroundColor($r('app.color.color_FFC460'))
.fontWeight(500)
.position({x:'23lpx'})
.padding({left:'35lpx'})
Image($r("app.media.mine_sign_icon"))
.width('50lpx')
.height('50lpx')
.width(`${this.calcHeight(50)}lpx`)
.height(`${this.calcHeight(50)}lpx`)
}.width('131lpx')
.visibility(Visibility.Hidden)
}.backgroundColor($r('app.color.white'))
... ... @@ -201,6 +202,10 @@ export default struct MinePageUserSimpleInfoUI {
WDRouterRule.jumpWithPage(WDRouterPage.mineHomePage)
}
}
calcHeight(value:number): number{
return value * this.percent
}
}
function trackButtonClick(buttonName: string){
... ...
... ... @@ -4,6 +4,7 @@ import MinePagePersonalFunctionsItem from '../../viewmodel/MinePagePersonalFunct
export struct PagePersonFunction{
@ObjectLink item: MinePagePersonalFunctionsItem
@State noDivider:boolean = false
@Link percent:number
build() {
Row(){
... ... @@ -15,18 +16,18 @@ export struct PagePersonFunction{
if (this.item.isShowRedPoint) {
Button()
.type(ButtonType.Circle)
.width("12lpx")
.height("12lpx")
.width(`${this.calcHeight(12)}lpx`)
.height(`${this.calcHeight(12)}lpx`)
.backgroundColor($r('app.color.color_ED2800'))
}
}.width('46lpx')
.height('46lpx')
}.width(`${this.calcHeight(46)}lpx`)
.height(`${this.calcHeight(46)}lpx`)
Text(`${this.item.msg}`)
.margin({top:'8lpx'})
.height('23lpx')
.margin({top:`${this.calcHeight(8)}lpx`})
.height(`${this.calcHeight(23)}lpx`)
.fontColor($r('app.color.color_222222'))
.fontSize('23lpx')
.fontSize(`${this.calcHeight(23)}lpx`)
}
.alignItems(HorizontalAlign.Center)
.width('100%')
... ... @@ -35,10 +36,13 @@ export struct PagePersonFunction{
if(!this.noDivider){
Text().backgroundColor($r('app.color.color_222222'))
.opacity(0.1)
.width('2lpx')
.height('29lpx')
.width(`${this.calcHeight(2)}lpx`)
.height(`${this.calcHeight(29)}lpx`)
}
}
}
calcHeight(value:number): number{
return value * this.percent
}
}
\ No newline at end of file
... ...
... ... @@ -11,6 +11,14 @@ import { FollowOperationRequestItem } from '../../../viewmodel/FollowOperationRe
export struct FollowChildComponent{
@ObjectLink data: FollowListDetailItem
@State type:number = 0
@State columnHeight:number = 202
aboutToAppear(): void {
if(this.type == 0 && StringUtils.isEmpty(this.data.introduction)){
this.columnHeight = 202 - 31
}
}
build() {
if(this.type == 0 ){
... ... @@ -82,6 +90,7 @@ export struct FollowChildComponent{
.justifyContent(FlexAlign.Center)
.width('100lpx')
.backgroundColor($r("app.color.color_F5F5F5"))
.borderRadius("6lpx")
.height('46lpx')
.onClick(()=>{
this.followOperation()
... ... @@ -114,7 +123,7 @@ export struct FollowChildComponent{
.justifyContent(FlexAlign.SpaceBetween)
.alignItems(VerticalAlign.Top)
}.height('202lpx')
}.height(`${this.columnHeight}lpx`)
.justifyContent(FlexAlign.Start)
Divider()
... ... @@ -198,6 +207,7 @@ export struct FollowChildComponent{
}
.backgroundColor($r("app.color.color_F5F5F5"))
.justifyContent(FlexAlign.Center)
.borderRadius("6lpx")
.width('100lpx')
.height('46lpx')
.onClick(()=>{
... ...
... ... @@ -10,7 +10,10 @@ const TAG = "FollowFirstTabsComponent"
export struct FollowFirstTabsComponent{
@State currentIndex: number = 0
@Prop changeIndex: number
private controller: TabsController = new TabsController()
private swiperController: SwiperController = new SwiperController()
private listScroller: Scroller = new Scroller()
@State data:FollowListItem[] = []
fontColor: string = '#999999'
selectedFontColor: string = '#000000'
... ... @@ -20,7 +23,7 @@ export struct FollowFirstTabsComponent{
this.getFollowTabList()
EmitterUtils.receiveEvent(EmitterEventId.MY_FOLLOW_EMPTY, (() => {
if(this.controller != null && this.data.length>1 ){
if(this.swiperController != null && this.data.length>1 ){
this.jumpFollowNextPage()
}
}))
... ... @@ -33,7 +36,7 @@ export struct FollowFirstTabsComponent{
this.data.push(element)
})
if(this.controller != null && this.data.length>1 && this.changeIndex === 1){
if(this.swiperController != null && this.data.length>1 && this.changeIndex === 1){
this.jumpFollowNextPage()
}
}).catch((err:Error)=>{
... ... @@ -45,7 +48,7 @@ export struct FollowFirstTabsComponent{
//个人主页 跳转 关注页 tab 2
let intervalID = setInterval(() => {
this.currentIndex = 1
this.controller.changeIndex(this.currentIndex)
this.swiperController.changeIndex(this.currentIndex)
clearInterval(intervalID);
}, 500);
}
... ... @@ -70,7 +73,8 @@ export struct FollowFirstTabsComponent{
}
}.onClick(()=>{
this.currentIndex = index
this.controller.changeIndex(this.currentIndex)
this.swiperController.changeIndex(this.currentIndex)
this.listScroller.scrollToIndex(index, true, ScrollAlign.CENTER)
trackTabFirstClick(item.directoryName)
})
.height('100%')
... ... @@ -90,28 +94,38 @@ export struct FollowFirstTabsComponent{
.layoutWeight(1)
.width('100%')
}else{
Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
Column(){
List({ scroller: this.listScroller }){
ForEach(this.data, (item: FollowListItem, index: number ) => {
ListItem(){
this.TabBuilder(index,item)
}
}, (item: FollowListItem, index: number) => index.toString())
}.listDirection(Axis.Horizontal)
.backgroundColor($r('app.color.white'))
.width("100%")
.height("84lpx")
.edgeEffect(EdgeEffect.None)
.scrollBar(BarState.Off)
Swiper(this.swiperController){
ForEach(this.data, (item: FollowListItem, index: number ) => {
TabContent(){
FollowSecondTabsComponent({data:$data,firstIndex:index})
}.tabBar(this.TabBuilder(index,item))
.backgroundColor($r('app.color.white'))
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
}, (item: FollowListItem, index: number) => index.toString())
}
.vertical(false)
.barMode(BarMode.Scrollable)
.barWidth('100%')
.barBackgroundColor($r('app.color.white'))
.barHeight('84lpx')
.animationDuration(0)
.onChange((index: number) => {
this.currentIndex = index
trackTabFirstClick(this.data[index].directoryName)
this.listScroller.scrollToIndex(index, true, ScrollAlign.CENTER)
})
.width('100%')
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
.layoutWeight(1)
.loop(false)
.indicator(false)
.effectMode(EdgeEffect.None)
}.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
}
}.width('100%')
.height("100%")
... ...
... ... @@ -98,6 +98,7 @@ export struct FollowListDetailUI {
ListItem() {
ListHasNoMoreDataUI()
}
.margin({bottom:"40lpx"})
}
}
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
... ... @@ -143,13 +144,11 @@ export struct FollowListDetailUI {
value.list.forEach((value) => {
let fansNum: number = value.fansNum
let fansNumString = ""
if (fansNum > 10000) {
let temp = (fansNum / 10000) + ""
let index = temp.indexOf('.')
if (index != -1) {
temp = temp.substring(0, index + 2)
} else {
temp = temp
if (fansNum >= 10000) {
let temp = (fansNum / 10000) .toFixed(1)
if (Number(temp.substring(temp.length-1)) == 0) {
temp = temp.substring(0, temp.length-2)
}
fansNumString = temp + "万"
} else {
... ...
... ... @@ -7,7 +7,7 @@ export struct FollowSecondTabsComponent{
@Link data:FollowListItem[]
@State firstIndex:number = 0
@State currentIndex: number = 0
private controller: TabsController = new TabsController()
private swiperController: SwiperController = new SwiperController()
fontColor: string = '#000000'
selectedFontColor: string = '#ED2800'
... ... @@ -77,20 +77,16 @@ export struct FollowSecondTabsComponent{
.alignItems(VerticalAlign.Top)
.height('100%')
Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
Swiper(this.swiperController ) {
ForEach(this.data[this.firstIndex].children, (item: FollowSecondListItem, index: number ) => {
TabContent(){
FollowThirdTabsComponent({data:$data,firstIndex:$firstIndex,secondIndex:index})
}.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
}, (item: FollowListItem, index: number) => index.toString())
}
.loop(false)
.vertical(true)
.barMode(BarMode.Scrollable)
.animationDuration(0)
.onChange((index: number) => {
this.currentIndex = index
})
.barWidth(0)
.indicator(false)
.disableSwipe(true)
.effectMode(EdgeEffect.None)
.height('100%')
.layoutWeight(1)
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
... ... @@ -110,7 +106,7 @@ export struct FollowSecondTabsComponent{
}
.onClick(()=>{
this.currentIndex = index
this.controller.changeIndex(this.currentIndex)
this.swiperController.changeIndex(this.currentIndex)
})
.justifyContent(FlexAlign.Center)
.height('84lpx')
... ...
... ... @@ -10,8 +10,8 @@ export struct FollowThirdTabsComponent{
@Link firstIndex: number
@State secondIndex:number = -1
private controller: TabsController = new TabsController()
private swiperController: SwiperController = new SwiperController()
private listScroller: Scroller = new Scroller()
fontColor: string = '#666666'
selectedFontColor: string = '#222222'
... ... @@ -50,7 +50,8 @@ export struct FollowThirdTabsComponent{
}
.onClick(()=>{
this.currentIndex = index
this.controller.changeIndex(this.currentIndex)
this.swiperController.changeIndex(this.currentIndex)
this.listScroller.scrollToIndex(index, true, ScrollAlign.CENTER)
})
.offset({x:index === 0?"0lpx":"-5lpx"})
.height('80lpx')
... ... @@ -62,31 +63,47 @@ export struct FollowThirdTabsComponent{
@Builder FollowThirdUI(){
Column(){
Column() {
// 页签
Row() {
Scroll() {
Row() {
List({ scroller: this.listScroller }){
ForEach(this.data[this.firstIndex].children[this.secondIndex].children, (item: FollowThirdListItem, index: number ) => {
ListItem(){
this.TabBuilder(index,item)
})
}
.justifyContent(FlexAlign.Start)
})
}
.align(Alignment.Start)
.scrollable(ScrollDirection.Horizontal)
.backgroundColor($r('app.color.white'))
.edgeEffect(EdgeEffect.None)
.scrollBar(BarState.Off)
.listDirection(Axis.Horizontal)
.width('100%')
.height("84lpx")
.padding({left:'31lpx',right:'48lpx'})
}
.alignItems(VerticalAlign.Bottom)
.width('100%')
}
.backgroundColor($r('app.color.white'))
.alignItems(HorizontalAlign.Start)
.width('100%')
Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
// Column() {
// // 页签
// Row() {
// Scroll() {
// Row() {
// ForEach(this.data[this.firstIndex].children[this.secondIndex].children, (item: FollowThirdListItem, index: number ) => {
// this.TabBuilder(index,item)
// })
// }
// .justifyContent(FlexAlign.Start)
// }
// .align(Alignment.Start)
// .scrollable(ScrollDirection.Horizontal)
// .scrollBar(BarState.Off)
// .width('100%')
// .padding({left:'31lpx',right:'48lpx'})
// }
// .alignItems(VerticalAlign.Bottom)
// .width('100%')
// }
// .backgroundColor($r('app.color.white'))
// .alignItems(HorizontalAlign.Start)
// .width('100%')
Swiper(this.swiperController ) {
ForEach(this.data[this.firstIndex].children[this.secondIndex].children, (item: FollowThirdListItem, index: number ) => {
TabContent(){
Column(){
... ... @@ -96,12 +113,12 @@ export struct FollowThirdTabsComponent{
.backgroundColor($r('app.color.white'))
}, (item: FollowListItem, index: number) => index.toString())
}
.barHeight(0)
.vertical(false)
.barMode(BarMode.Scrollable)
.animationDuration(0)
.loop(false)
.indicator(false)
.disableSwipe(true)
.effectMode(EdgeEffect.None)
.onChange((index: number) => {
this.currentIndex = index
// this.currentIndex = index
})
.width('100%')
.layoutWeight(1)
... ...
... ... @@ -5,7 +5,7 @@ import MinePageDatasModel from '../../model/MinePageDatasModel'
import MinePageUserSimpleInfoUI from '../mine/MinePageUserSimpleInfoUI'
import MinePagePersonFunctionUI from '../mine/MinePagePersonFunctionUI'
import MinePageMoreFunctionUI from '../mine/MinePageMoreFunctionUI'
import { DateTimeUtils, SPHelper, StringUtils } from 'wdKit'
import { BreakpointSystem, DateTimeUtils, SPHelper, StringUtils } from 'wdKit'
import { SpConstants } from 'wdConstant'
import dataPreferences from '@ohos.data.preferences';
import { MergeRecordDialog } from '../../dialog/MergeRecordDialog'
... ... @@ -59,6 +59,20 @@ export struct MinePageComponent {
pageHideTime:number = 0;
pageFirstCreateTime:number = 0;
@Prop isMinePage:boolean = false;
@StorageProp('currentBreakpoint') @Watch("currentChanged")currentBreakpoint: string = 'sm';
private breakpointSystem = new BreakpointSystem();
@State percent:number = 1
currentChanged(){
if(this.currentBreakpoint == "md" || this.currentBreakpoint == "lg"){
//大屏幕 折叠屏 或者ipad
this.percent = 0.7
}else {
this.percent = 1
}
console.log(TAG,"currentBreakpoint==>"+this.percent)
}
//第一次还没创建时候 pageShow 接收不到监听
async pageShowForUpdateData() {
... ... @@ -85,11 +99,14 @@ export struct MinePageComponent {
}
aboutToAppear(){
this.breakpointSystem.register();
this.pageFirstCreateTime = DateTimeUtils.getTimeStamp()
this.getFunctionData()
this.getUserLogin()
this.addLoginStatusObserver()
console.log(TAG,"currentBreakpoint==>"+this.currentBreakpoint)
this.currentChanged()
}
getMessageData(){
... ... @@ -119,6 +136,7 @@ export struct MinePageComponent {
}
aboutToDisappear(): void {
this.breakpointSystem.unregister();
if(this.preferences){
this.preferences.off('change', this.observer);
}
... ... @@ -139,7 +157,7 @@ export struct MinePageComponent {
Stack(){
Image($r('app.media.mine_head_bg'))
.width('100%')
.height('657lpx')
.height(`${657 * this.percent}lpx`)
.objectFit(ImageFit.Auto)
this.MinePageUI()
}
... ... @@ -155,16 +173,16 @@ export struct MinePageComponent {
@Builder MinePageUI(){
Column(){
//头像层
MinePageUserSimpleInfoUI({isLogin:this.isLogin})
MinePageUserSimpleInfoUI({isLogin:this.isLogin,percent:$percent})
//Grid 区域
MinePagePersonFunctionUI({personalData:$personalData,isLogin:this.isLogin})
MinePagePersonFunctionUI({personalData:$personalData,isLogin:this.isLogin,percent:$percent})
//Card
//MinePageCardUI()
//创作者区域
//MinePageCreatorFunctionUI({creatorData:$creatorData})
//更多功能
MinePageMoreFunctionUI({moreData:$moreData})
MinePageMoreFunctionUI({moreData:$moreData,percent:$percent})
}.width('100%')
.height('100%')
.justifyContent(FlexAlign.Start)
... ...
import { BottomNavDTO, CompDTO, TopNavDTO } from 'wdBean';
import { SpConstants } from 'wdConstant';
import { DisplayUtils, LazyDataSource, Logger, NetworkUtil, SPHelper, ToastUtils } from 'wdKit';
import { ProcessUtils, WDRouterPage, WDRouterRule } from 'wdRouter';
import { PageComponent } from './PageComponent';
import { ChannelSubscriptionLayout } from './ChannelSubscriptionLayout';
import { FirstTabTopSearchComponent } from '../search/FirstTabTopSearchComponent';
import { AssignChannelParam } from 'wdRouter/src/main/ets/utils/HomeChannelUtils';
import { PeopleShipMainComponent } from '../peopleShip/PeopleShipMainComponent';
import { channelSkeleton } from '../skeleton/channelSkeleton';
import { TrackingButton, TrackConstants } from 'wdTracking/Index';
const TAG = 'TopNavigationComponent';
PersistentStorage.persistProp('channelIds', '');
PersistentStorage.persistProp('indexSettingChannelId', 2002);
const storage = LocalStorage.getShared();
/**
* 顶部页签导航栏/顶导
*/
@Entry(storage)
@Component
export struct TopNavigationComponent {
private groupId: number = 0
private currentBottomNavName: string = ''
private tabsController: TabsController = new TabsController()
@Consume isLayoutFullScreen: boolean
@Consume bottomRectHeight: number
@Consume topRectHeight: number
@Consume currentBottomNavInfo: BottomNavDTO // 当前底导信息
@Consume barBackgroundColor: Color
@State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
@State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
@Link _currentNavIndex?: number;
// 顶导当前选中/焦点下标
@State currentTopNavSelectedIndex: number = 0;
/**
* @deprecated TODO，没地方用到，是否弃用
*/
@State currentTopNavName: string = '';
@State currentTopNavItem: TopNavDTO = {} as TopNavDTO
// 顶导数据
@State @Watch('onTopNavigationDataUpdated') topNavList: TopNavDTO[] = []
@State compList: LazyDataSource<CompDTO> = new LazyDataSource();
@StorageProp('indexSettingChannelId') indexSettingChannelId: number = 2002
//我的频道id列表
@State channelIds: number[] = []
//本地缓存频道id列表
@StorageProp('channelIds') storageChannelIds: string = ''
@State homeChannelList: TopNavDTO[] = []
// 我的频道列表
@State myChannelList: TopNavDTO[] = []
// 更多频道列表
@State moreChannelList: TopNavDTO[] = []
// 地方频道列表
@State localChannelList: TopNavDTO[] = []
readonly MAX_LINE: number = 1;
@ObjectLink @Watch('onAssignChannelChange') assignChannel: AssignChannelParam
// 底导传递过来的自动刷新通知
@Prop @Watch('onAutoRefresh') autoRefresh: number = 0
// 传递给page的自动刷新通知
@State autoRefresh2Page: number = 0
// 当前底导index
@State navIndex: number = 0
@State animationDuration: number = 0
@State indicatorLeftMargin: number = 0
@State indicatorWidth: number = 0
private tabsWidth: number = 0
// 标识，是否为点击触发的tab切换，临时变量
private changeByClick: boolean = false
//处理新闻tab顶导频道数据
topNavListHandle() {
let cityName = SPHelper.default.getSync(SpConstants.LOCATION_CITY_NAME, '') as string
let _channelIds: number [] = []
let _myChannelList: TopNavDTO [] = []
let _storageChannelIds: string [] = [] //list1
let defaultMyChannelList: TopNavDTO[] = []
let defaultList = [...this.topNavList]
defaultList.sort((a, b) => {
return a.num - b.num;
});
//defaultMyChannelList
defaultList.forEach(item => {
if (item.defaultPermitted === 1 || item.movePermitted === 0 || item.delPermitted === 0 ||
item.headlinesOn === 1) {
defaultMyChannelList.push(item);
}
if (item.defaultPermitted === 1) {
this.homeChannelList.push(item)
}
})
//有缓存频道id
if (this.storageChannelIds) {
_storageChannelIds = this.storageChannelIds.split(',')
}
defaultMyChannelList.forEach(item => {
item.myChannel = '1'
if (item.defaultPermitted === 1) {
item.homeChannel = '1'
}
let index = defaultList.findIndex(_item => _item.channelId === item.channelId)
if (index !== -1) {
defaultList.splice(index, 1)
}
})
defaultList.unshift(...defaultMyChannelList)
defaultList.forEach((item, index) => {
if (this.storageChannelIds && _storageChannelIds.includes(String(item.channelId))) {
item.myChannel = '1'
}
if (item.channelType === 2) {
if (cityName.includes(item.name)) {
item.myChannel = '1'
}
item.localChannel = '1'
}
if (index >= 11) {
if (item.channelType === 1) {
item.moreChannel = '1'
}
} else {
if (item.channelType === 1 && item.myChannel !== '1') {
item.moreChannel = '1'
}
}
//频道分类
if (item.name !== '播报') { //暂时隐藏播报
if (item.myChannel === '1') {
_myChannelList.push(item)
_channelIds.push(item.channelId)
} else if (item.moreChannel === '1') {
this.moreChannelList.push(item)
} else if (item.localChannel === '1' && item.myChannel !== '1') {
this.localChannelList.push(item)
}
}
})
if (cityName) {
let index = _myChannelList.findIndex(ele => cityName.includes(ele.name))
const localChannelitem = _myChannelList.splice(index, 1)[0];
// 将当前地区频道插入到第四个
_myChannelList.splice(3, 0, localChannelitem);
}
this.channelIds = _channelIds
this.myChannelList = _myChannelList
// 崩溃
// this.currentTopNavName = this._currentNavIndex === 0 ? this.myChannelList[0].name : this.topNavList[0].name
if (this._currentNavIndex === 0 && this.myChannelList && this.myChannelList.length > 0 && this.myChannelList[0] &&
this.myChannelList[0].name) {
this.currentTopNavName = this.myChannelList[0].name
} else if (this._currentNavIndex != 0 && this.topNavList && this.topNavList.length > 0 && this.topNavList[0].name) {
this.currentTopNavName = this.topNavList[0].name
}
//缓存首页频道
let index = this.myChannelList.findIndex(_item => _item?.channelId === this.indexSettingChannelId)
if (index > -1) {
this.currentTopNavSelectedIndex = index
this.currentTopNavName = this.myChannelList[index].name
}
this.currentTopNavItem = this.myChannelList[this.currentTopNavSelectedIndex]
}
isBroadcast(item?: TopNavDTO) {
// TODO 用id channelId = '2066'
return item?.name === '播报'
}
isLayout(item?: TopNavDTO) {
// TODO 用id channelId = '2006'
return item?.name === '版面'
}
isSpecialChannel(item?: TopNavDTO) {
// 版面、播报，可以用这个判断
return item?.channelType === 3
}
build() {
Column() {
// 顶部搜索、日报logo、早晚报
Column() {
Row() {
FirstTabTopSearchComponent()
Image($r('app.media.icon_ren_min_ri_bao'))
.width(72)
.height(29)
.onClick(() => {
ProcessUtils.gotoENewsPaper()
})
Stack({ alignContent: Alignment.Center }) {
Image($r('app.media.background_read_paper_home'))
.width('100%')
.height('100%')
.objectFit(ImageFit.Contain)
Row() {
Image($r('app.media.icon_read_paper_home'))
.width(18)
.height(18)
Text('早晚报')
.fontColor("#666666")
.fontSize($r('app.float.font_size_13'))
}
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Center)
}
.height(30)
.width(124)
.onClick(() => {
if (NetworkUtil.isNetConnected()) {
ProcessUtils.gotoMorningEveningPaper()
} else {
ToastUtils.showToast('网络出小差了，请检查网络后重试', 1000)
}
})
}.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
}
.width('100%')
.height(40)
.padding({ top: 10 })
.backgroundColor($r('app.color.white'))
.visibility(this._currentNavIndex == 0 ? Visibility.Visible : Visibility.None)
// 频道分类list
Stack({ alignContent: Alignment.TopEnd }) {
Tabs({ index: this.currentTopNavSelectedIndex, controller: this.tabsController }) {
ForEach(this.currentBottomNavName === '新闻' ? this.myChannelList : this.topNavList,
(navItem: TopNavDTO, index: number) => {
TabContent() {
if (this.currentBottomNavName === '人民号' && navItem.name === '关注') {
PeopleShipMainComponent({
currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
navIndex: index,
pageId: navItem.pageId + '',
channelId: navItem.channelId + '',
})
} else
if (!this.isBroadcast(navItem) && !this.isLayout(navItem)) {
PageComponent({
currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
navIndex: index,
pageId: navItem.pageId + '',
channelId: navItem.channelId + '',
autoRefresh: this.autoRefresh2Page
})
} else {
channelSkeleton()
}
}
.tabBar(this.tabBarBuilder(navItem, index))
}, (navItem: TopNavDTO) => JSON.stringify(navItem));
}
.barHeight($r('app.float.top_tab_bar_height'))
.height(this._currentNavIndex == 0 ? DisplayUtils.getDeviceHeight() - vp2px(48.3) :
'100%')
.barMode(BarMode.Scrollable)
.vertical(false)
.barBackgroundColor(this.barBackgroundColor)
.onAreaChange((oldValue: Area, newValue: Area) => {
let width = Number.parseFloat(newValue.width.toString())
this.tabsWidth = Number.isNaN(width) ? 0 : width
})
.onChange((index: number) => {
this.currentTopNavName =
this._currentNavIndex === 0 ? this.myChannelList[index].name : this.topNavList[index].name
Logger.info(TAG, `onChange index : ${index}`);
if (!this.isBroadcast(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]) &&
!this.isLayout(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])
) {
//在 tab 切换之前意图共享
// this.topNavInsightIntentShare(this.currentTopNavItem)
this.currentTopNavSelectedIndex = index;
this.currentTopNavItem = this.myChannelList[index]
}
if (this.isBroadcast(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])) {
// 跳转到播报页面
ProcessUtils.gotoBroadcastPage(this.myChannelList[index].pageId)
this.tabsController.changeIndex(this.currentTopNavSelectedIndex)
}
if (this.isLayout(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])) {
ProcessUtils.gotoENewsPaper()
if (!this.changeByClick) {
// 识别左滑右滑，跳过版面，到下一个
let nextIndex = this.currentTopNavSelectedIndex > index ? index - 1 : index + 1
this.tabsController.changeIndex(nextIndex)
} else {
this.tabsController.changeIndex(this.currentTopNavSelectedIndex)
// 重置标识
this.changeByClick = false
}
}
})
// .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {
// if (!this.isBroadcast(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]) &&
// !this.isLayout(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])
// ) {
// return
// }
// this.currentTopNavSelectedIndex = targetIndex
// // 切换动画开始时触发该回调。下划线跟着页面一起滑动，同时宽度渐变。
// let targetIndexInfo = this.getTextInfo(targetIndex)
// this.startAnimateTo(this.animationDuration, targetIndexInfo.left, targetIndexInfo.width)
// })
// .onAnimationEnd((index: number, event: TabsAnimationEvent) => {
// if (!this.isBroadcast(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]) &&
// !this.isLayout(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])
// ) {
// return
// }
// // 切换动画结束时触发该回调。下划线动画停止。
// let currentIndicatorInfo = this.getCurrentIndicatorInfo(index, event)
// this.startAnimateTo(0, currentIndicatorInfo.left, currentIndicatorInfo.width)
// })
// .onGestureSwipe((index: number, event: TabsAnimationEvent) => {
// if (!this.isBroadcast(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]) &&
// !this.isLayout(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])
// ) {
// return
// }
// // 在页面跟手滑动过程中，逐帧触发该回调。
// let currentIndicatorInfo = this.getCurrentIndicatorInfo(index, event)
// this.currentTopNavSelectedIndex = currentIndicatorInfo.index
// this.indicatorLeftMargin = currentIndicatorInfo.left
// this.indicatorWidth = currentIndicatorInfo.width
// })
// 分类列表最右侧频道设置
if (this._currentNavIndex === 0) {
ChannelSubscriptionLayout({
currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
indexSettingChannelId: this.indexSettingChannelId,
homeChannelList: this.homeChannelList,
myChannelList: $myChannelList,
moreChannelList: $moreChannelList,
localChannelList: $localChannelList,
channelIds: $channelIds,
changeTab: (index) => {
this.tabsController.changeIndex(index)
}
})
} else {
Row() {
Image($r('app.media.icon_search'))
.width('24vp')
.height('24vp')
}
.height('40vp')
.width('40vp')
.margin({ right: 10 })
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Center)
.onClick(() => {
WDRouterRule.jumpWithPage(WDRouterPage.searchPage)
})
}
}
}
}
@Builder
tabBarBuilder(item: TopNavDTO, index: number) {
Column() {
Text(item?.name)
.fontSize($r('app.float.selected_text_size'))
.fontWeight(this.currentTopNavSelectedIndex === index ? FontWeight.Bold : FontWeight.Normal)
.fontColor(this.currentTopNavSelectedIndex === index ? Color.Black : "#999999")
.padding({ top: $r('app.float.top_tab_item_padding_top'), bottom: $r('app.float.top_tab_item_padding_bottom') })
.maxLines(this.MAX_LINE)
.id(index.toString())
.onAreaChange((oldValue: Area, newValue: Area) => {
if (this.currentTopNavSelectedIndex === index &&
(this.indicatorLeftMargin === 0 || this.indicatorWidth === 0)) {
if (newValue.position.x != undefined) {
let positionX = Number.parseFloat(newValue.position.x.toString())
this.indicatorLeftMargin = Number.isNaN(positionX) ? 0 : positionX
}
let width = Number.parseFloat(newValue.width.toString())
this.indicatorWidth = Number.isNaN(width) ? 0 : width
}
})
// .backgroundImage(this.currentTopNavSelectedIndex === index ? item.iconCUrl : item.iconUrl)
if (this.currentTopNavSelectedIndex === index) {
Row()
.width(20)
.height(3)
.backgroundImage($r('app.media.icon_channel_active'), ImageRepeat.NoRepeat)
.backgroundImageSize(ImageSize.Contain)
}
}
.hoverEffect(HoverEffect.Highlight)
.constraintSize({
minWidth: $r('app.float.top_tab_item_min_width'),
maxWidth: $r('app.float.top_tab_item_max_width')
})
// .backgroundColor(Color.Transparent)
.padding({
left: $r('app.float.top_tab_item_padding_horizontal'),
right: $r('app.float.top_tab_item_padding_horizontal'),
})
.id(`col_tabBar${index}`)
.margin({ right: this.myChannelList.length === index + 1 ? 36 : 0 })
.onClick(() => {
Logger.debug(TAG, `onClick, index: ${index}`);
if (this.currentTopNavSelectedIndex === index) {
// 当前tab，单击事件
this.doAutoRefresh()
} else {
this.changeByClick = true
this.tabsController.changeIndex(index)
}
})
}
aboutToAppear() {
//处理新闻tab顶导频道数据
this.topNavListHandle()
}
aboutToDisappear() {
AppStorage.set('channelIds', this.channelIds.join(','))
}
onTopNavigationDataUpdated() {
Logger.info(TAG,
`onTopNavigationDataUpdated currentTopNavIndex: ${this.currentTopNavSelectedIndex},topNavList.length:${this.topNavList.length}`);
}
onAutoRefresh() {
if (this.navIndex != this._currentNavIndex) {
return
}
// 通知page刷新
this.autoRefresh2Page++
}
private doAutoRefresh() {
// 通知page刷新
this.autoRefresh2Page++
}
/**
* 判断是否当前页面处理逻辑，如消息通知，只需要切换到当前底导的处理，过滤掉非当前。
*/
private isCurrentPage(): boolean {
return this._currentNavIndex === this.navIndex
}
/**
* 频道id变化，即指定频道跳转场景
*/
onAssignChannelChange() {
if (!this.isCurrentPage()) {
return
}
let channelId = this.assignChannel.channelId
let index = -1
if (this._currentNavIndex === 0) {
// 第一个，新闻，先拿我的，再拿其他
index = this.getChannelByMine(channelId)
if (index == -1) {
// 不在我的里，需要临时新增频道展示
let channel = this.getChannelByOthers(channelId)
if (channel) {
this.myChannelList.push(channel)
setTimeout(() => {
this.tabsController.changeIndex(this.myChannelList.length - 1)
}, 20)
}
} else {
// 直接切换
this.tabsController.changeIndex(index)
}
} else {
index = this.getChannelByTopNav(channelId)
if (index > -1) {
// 找到了，直接切换，否则不处理
this.tabsController.changeIndex(index)
}
}
}
/**
* 非新闻，从topNav里拿数据
*/
private getChannelByTopNav(channelId: string) {
for (let i = 0; i < this.topNavList.length; i++) {
let topNavDTO: TopNavDTO = this.topNavList[i]
if (topNavDTO.channelId.toString() === channelId) {
return i
}
}
return -1
}
/**
* 新闻，从myChannelList里拿数据
*/
private getChannelByMine(channelId: string) {
for (let i = 0; i < this.myChannelList.length; i++) {
let topNavDTO: TopNavDTO = this.myChannelList[i]
if (topNavDTO.channelId.toString() === channelId) {
return i
}
}
return -1
}
/**
* 新闻，从其他里拿数据
*/
private getChannelByOthers(channelId: string) {
for (let i = 0; i < this.moreChannelList.length; i++) {
let topNavDTO: TopNavDTO = this.moreChannelList[i]
if (topNavDTO.channelId.toString() === channelId) {
return topNavDTO
}
}
for (let j = 0; j < this.localChannelList.length; j++) {
let topNavDTO: TopNavDTO = this.localChannelList[j]
if (topNavDTO.channelId.toString() === channelId) {
return topNavDTO
}
}
return null
}
// private getTextInfo(index: number): Record<string, number> {
// let strJson = getInspectorByKey(index.toString())
// try {
// let obj: Record<string, string> = JSON.parse(strJson)
// let rectInfo: number[][] = JSON.parse('[' + obj.$rect + ']')
// return { 'left': px2vp(rectInfo[0][0]), 'width': px2vp(rectInfo[1][0] - rectInfo[0][0]) }
// } catch (error) {
// return { 'left': 0, 'width': 0 }
// }
// }
//
// private getCurrentIndicatorInfo(index: number, event: TabsAnimationEvent): Record<string, number> {
// let nextIndex = index
// if (index > 0 && event.currentOffset > 0) {
// nextIndex--
// } else if (index < 3 && event.currentOffset < 0) {
// nextIndex++
// }
// let indexInfo = this.getTextInfo(index)
// let nextIndexInfo = this.getTextInfo(nextIndex)
// let swipeRatio = Math.abs(event.currentOffset / this.tabsWidth)
// let currentIndex = swipeRatio > 0.5 ? nextIndex : index // 页面滑动超过一半，tabBar切换到下一页。
// let currentLeft = indexInfo.left + (nextIndexInfo.left - indexInfo.left) * swipeRatio
// let currentWidth = indexInfo.width + (nextIndexInfo.width - indexInfo.width) * swipeRatio
// return { 'index': currentIndex, 'left': currentLeft, 'width': currentWidth }
// }
// private startAnimateTo(duration: number, leftMargin: number, width: number) {
// animateTo({
// duration: duration, // 动画时长
// curve: Curve.Linear, // 动画曲线
// iterations: 1, // 播放次数
// playMode: PlayMode.Normal, // 动画模式
// onFinish: () => {
// console.info('play end')
// }
// }, () => {
// this.indicatorLeftMargin = leftMargin
// this.indicatorWidth = width
// })
// }
}
\ No newline at end of file
... ... @@ -10,6 +10,7 @@ import { PeopleShipMainComponent } from '../peopleShip/PeopleShipMainComponent';
import { channelSkeleton } from '../skeleton/channelSkeleton';
import { TrackConstants, TrackingButton } from 'wdTracking/Index';
import DailyPaperTopicModel from '../../model/DailyPaperTopicModel'
import { ParamType, Tracking } from 'wdTracking/Index';
const TAG = 'TopNavigationComponent';
... ... @@ -29,6 +30,8 @@ export struct TopNavigationComponentNew {
* @deprecated TODO type判断
*/
private currentBottomNavName: string = ''
private pageName: string = ''
private pageId: number = 0
private swiperController: SwiperController = new SwiperController()
private listScroller: Scroller = new Scroller()
@Consume barBackgroundColor: Color
... ... @@ -110,6 +113,21 @@ export struct TopNavigationComponentNew {
})
.onChange((index) => {
Logger.info(TAG, `onChange index : ${index}`);
// 顶部tab埋点
if(this.currentBottomNavName === '新闻') {
const tab = this.myChannelList[index]
Logger.info(TAG, `顶部tab : ${JSON.stringify(tab)}`);
const params: ParamType = {
"pageName": tab.name,
"tabName": tab.name,
"pageId": tab.pageId,
}
Tracking.event("home_page_tab_click ", params)
}
if (this.isBroadcastByIndex(index)) {
// 跳转到播报页面
ProcessUtils.gotoBroadcastPage(this.myChannelList[index].pageId)
... ... @@ -166,6 +184,14 @@ export struct TopNavigationComponentNew {
.height(30)
.width(124)
.onClick(() => {
// 早晚报埋点
const params: ParamType = {
"pageName": this.pageName,
"pageId": this.pageId,
}
Tracking.event("morning_evening_news_click", params)
this.clickMorningEveningPaper()
})
}.width('100%')
... ...
... ... @@ -8,6 +8,62 @@ export struct HorizontalStrokeCardThreeTwoRadioForMoreComponent {
@State compDTO: CompDTO = {} as CompDTO
@State pageId: string = '';
@State pageName: string = '';
@State initMoreWidth: number = 16;
@State moreWidth:number = 16
@State moreTips: string = ''
scroller: Scroller = new Scroller()
resetMoreTips() {
console.log('resetMoreTips', this.moreWidth, this.initMoreWidth)
if (this.moreWidth < this.initMoreWidth * 2) {
this.moreTips = '查看更多';
}
}
edgeAnimation() {
if (this.moreWidth < this.initMoreWidth * 3) {
if (!this.moreTips) {
this.moreTips = '查看更多';
}
this.moreWidth = this.moreWidth + 2
}
if (this.moreWidth > this.initMoreWidth * 2) {
this.moreTips = '松手查看';
} else {
}
}
reverseEdgeAnimation() {
if (this.moreWidth > this.initMoreWidth) {
this.moreWidth = this.moreWidth - 2
}
this.resetMoreTips()
}
resetEdgeAnimation() {
if (this.moreWidth > this.initMoreWidth) {
this.moreWidth = this.moreWidth - 1
this.resetEdgeAnimation();
}
this.resetMoreTips()
}
toMore() {
if (this.moreWidth > this.initMoreWidth * 2) {
if (this.compDTO.linkUrl) {
let taskAction: Action = {
type: 'JUMP_H5_BY_WEB_VIEW',
params: {
url: this.compDTO.linkUrl
} as Params,
};
WDRouterRule.jumpWithAction(taskAction)
} else {
this.jumpToLiveMorePage()
}
}
}
build() {
Column() {
... ... @@ -53,10 +109,10 @@ export struct HorizontalStrokeCardThreeTwoRadioForMoreComponent {
.width('100%')
// .backgroundColor($r("app.color.white"))
List({ space: 12 }) {
Scroll(this.scroller) {
Row() {
Row() {
ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
ListItem() {
Column() {
Image(item.coverUrl)
.aspectRatio(1.5)
... ... @@ -75,18 +131,56 @@ export struct HorizontalStrokeCardThreeTwoRadioForMoreComponent {
.width(150)
.lineHeight(19)
}
}
.padding({ left: (index == 0) ? 16 : 0, right: (index == this.compDTO.operDataList.length - 1) ? 16 : 0 })
.padding({ left: (index == 0) ? 16 : 0, right: 16 })
// .offset({x:16})
.onClick(() => {
InfomationCardClick.track(this.compDTO, item, this.pageId, this.pageName)
ProcessUtils.processPage(item)
})
})
}.listDirection(Axis.Horizontal)
}
if (this.compDTO.operDataList.length > 2) {
Column() {
if (this.moreWidth > this.initMoreWidth + 2) {
Text(this.moreTips)
.fontSize(8)
.fontColor(0x858585)
.width(8)
}
}
.justifyContent(FlexAlign.Center)
.align(Alignment.Center)
.width(this.moreWidth)
.backgroundColor(0xf1f3f4)
.borderRadius({ topLeft: 5, bottomLeft: 5 })
.height(this.compDTO.operDataList.length == 2 ? 180 : 146)
}
}
}
.align(Alignment.Start)
.scrollable(this.compDTO.operDataList.length > 2 ? ScrollDirection.Horizontal : ScrollDirection.None)
.scrollBar(BarState.Off)
.width('100%')
.edgeEffect(EdgeEffect.None)
.onReachEnd(() => {
this.edgeAnimation()
})
.onScrollStop(() => {
// this.resetEdgeAnimation();
})
.onScroll((xOffset: number, yOffset: number) => {
if (xOffset < 0) {
this.reverseEdgeAnimation();
}
})
.onTouch((event?: TouchEvent) => {
if(event) {
if (event.type === TouchType.Up) {
this.toMore();
this.resetEdgeAnimation();
}
}
})
// .width('100%')
// .backgroundColor($r("app.color.color_FE4B05"))
// .padding({left:16,right:16})
... ...
import { Action, CompDTO, ContentDTO, Params } from 'wdBean'
import { WDRouterRule } from 'wdRouter/Index'
import { ProcessUtils, WDRouterRule } from 'wdRouter/Index'
import { Logger } from 'wdKit/Index'
import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO'
import { LiveModel } from '../../viewmodel/LiveModel'
... ... @@ -69,24 +69,9 @@ export struct HorizontalStrokeCardThreeTwoRadioForOneComponent {
.onClick(() => {
InfomationCardClick.track(this.compDTO, this.compDTO.operDataList[0], this.pageId, this.pageName)
this.clicked = true;
this.gotoLive(this.compDTO?.operDataList[0])
ProcessUtils.gotoLive(this.compDTO?.operDataList[0])
})
}
async gotoLive(content: ContentDTO) {
let taskAction: Action = {
type: 'JUMP_DETAIL_PAGE',
params: {
detailPageType: 2,
contentID: content?.objectId,
extra: {
relType: content?.relType,
relId: content?.relId,
} as ExtraDTO
} as Params,
};
WDRouterRule.jumpWithAction(taskAction)
// Logger.debug(TAG, `gotoLive, ${content.objectId}`);
}
}
\ No newline at end of file
... ...
... ... @@ -18,6 +18,62 @@ export struct LiveHorizontalCardComponent {
@State pageName: string = '';
@State compDTO: CompDTO = {} as CompDTO
@State loadImg: boolean = false;
@State initMoreWidth: number = 16;
@State moreWidth:number = 16
@State moreTips: string = ''
scroller: Scroller = new Scroller()
resetMoreTips() {
console.log('resetMoreTips', this.moreWidth, this.initMoreWidth)
if (this.moreWidth < this.initMoreWidth * 2) {
this.moreTips = '查看更多';
}
}
edgeAnimation() {
if (this.moreWidth < this.initMoreWidth * 3) {
if (!this.moreTips) {
this.moreTips = '查看更多';
}
this.moreWidth = this.moreWidth + 2
}
if (this.moreWidth > this.initMoreWidth * 2) {
this.moreTips = '松手查看';
} else {
}
}
reverseEdgeAnimation() {
if (this.moreWidth > this.initMoreWidth) {
this.moreWidth = this.moreWidth - 2
}
this.resetMoreTips()
}
resetEdgeAnimation() {
if (this.moreWidth > this.initMoreWidth) {
this.moreWidth = this.moreWidth - 1
this.resetEdgeAnimation();
}
this.resetMoreTips()
}
toMore() {
if (this.moreWidth > this.initMoreWidth * 2) {
if (this.compDTO.linkUrl) {
let taskAction: Action = {
type: 'JUMP_H5_BY_WEB_VIEW',
params: {
url: this.compDTO.linkUrl
} as Params,
};
WDRouterRule.jumpWithAction(taskAction)
} else {
this.jumpToLiveMorePage()
}
}
}
async aboutToAppear(): Promise<void> {
this.loadImg = await onlyWifiLoadImg();
... ... @@ -69,9 +125,10 @@ export struct LiveHorizontalCardComponent {
// 多个
if (this.compDTO.operDataList.length >= 2) {
List({ space: 12 }) {
Scroll(this.scroller) {
Row() {
Row() {
ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
ListItem() {
Column() {
Stack({ alignContent: Alignment.BottomEnd }) {
Image(this.loadImg ? item.coverUrl : '')
... ... @@ -96,8 +153,7 @@ export struct LiveHorizontalCardComponent {
.margin({ top: 8 })
.width(this.compDTO.operDataList.length == 2 ? 210 : 150)
}
}
.padding({ left: (index == 0) ? 16 : 0, right: (index == this.compDTO.operDataList.length - 1) ? 16 : 0 })
.padding({ left: (index == 0) ? 16 : 0, right: 16 })
.onClick(() => {
InfomationCardClick.track(this.compDTO, item, this.pageId, this.pageName)
if (item.objectType != '0') {
... ... @@ -107,8 +163,47 @@ export struct LiveHorizontalCardComponent {
})
})
}
.listDirection(Axis.Horizontal)
if (this.compDTO.operDataList.length > 2) {
Column() {
if (this.moreWidth > this.initMoreWidth + 2) {
Text(this.moreTips)
.fontSize(8)
.fontColor(0x858585)
.width(8)
}
}
.justifyContent(FlexAlign.Center)
.align(Alignment.Center)
.width(this.moreWidth)
.backgroundColor(0xf1f3f4)
.borderRadius({ topLeft: 5, bottomLeft: 5 })
.height(this.compDTO.operDataList.length == 2 ? 180 : 146)
}
}
}
.align(Alignment.Start)
.scrollable(this.compDTO.operDataList.length > 2 ? ScrollDirection.Horizontal : ScrollDirection.None)
.scrollBar(BarState.Off)
.edgeEffect(EdgeEffect.None)
.onReachEnd(() => {
this.edgeAnimation()
})
.onScrollStop(() => {
// this.resetEdgeAnimation();
})
.onScroll((xOffset: number, yOffset: number) => {
if (xOffset < 0) {
this.reverseEdgeAnimation();
}
})
.onTouch((event?: TouchEvent) => {
if(event) {
if (event.type === TouchType.Up) {
this.toMore();
this.resetEdgeAnimation();
}
}
})
.width(CommonConstants.FULL_WIDTH)
.height(this.compDTO.operDataList.length == 2 ? 180 : 136)
} else if (this.compDTO.operDataList.length) {
... ...
... ... @@ -5,7 +5,7 @@ import { CommonConstants } from 'wdConstant'
import { StringUtils } from 'wdKit/Index'
import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO'
import { WDRouterPage, WDRouterRule } from 'wdRouter/Index'
import { ProcessUtils, WDRouterPage, WDRouterRule } from 'wdRouter/Index'
@Component
export struct LiveHorizontalReservationComponent {
... ... @@ -76,7 +76,7 @@ export struct LiveHorizontalReservationComponent {
.onClick(() => {
if (item.objectType != '0') {
console.log(item.objectId)
this.gotoLive(item)
ProcessUtils.gotoLive(item)
}
})
})
... ... @@ -107,20 +107,5 @@ export struct LiveHorizontalReservationComponent {
WDRouterRule.jumpWithPage(WDRouterPage.reserveMorePage)
}
async gotoLive(content: ContentDTO) {
let taskAction: Action = {
type: 'JUMP_DETAIL_PAGE',
params: {
detailPageType: 2,
contentID: content?.objectId,
extra: {
relType: content?.relType,
relId: content?.relId,
} as ExtraDTO
} as Params,
};
WDRouterRule.jumpWithAction(taskAction)
// Logger.debug(TAG, `gotoLive, ${content.objectId}`);
}
}
\ No newline at end of file
... ...
... ... @@ -15,6 +15,7 @@
"wdBean": "file:../../features/wdBean",
"wdConstant": "file:../../commons/wdConstant",
"wdDetailPlayApi": "file:../../features/wdDetailPlayApi",
"wdRouter": "file:../../commons/wdRouter"
"wdRouter": "file:../../commons/wdRouter",
"wdTracking": "file:../../features/wdTracking"
}
}
... ...
... ... @@ -4,8 +4,10 @@ import router from '@ohos.router';
import { DetailPlayLivePage } from './DetailPlayLivePage';
import { DetailPlayVLivePage } from './DetailPlayVLivePage';
import { Logger, ToastUtils } from 'wdKit/Index';
import { DateTimeUtils, Logger, ToastUtils } from 'wdKit/Index';
import { publishCommentModel } from 'wdComponent/src/main/ets/components/comment/model/PublishCommentModel';
import { PictureLoading } from '../widgets/vertical/PictureLoading';
import { TrackConstants, TrackingButton, TrackingPageBrowse } from 'wdTracking/Index';
const TAG = 'DetailPlayLiveCommon'
... ... @@ -21,6 +23,7 @@ const TAG = 'DetailPlayLiveCommon'
@Component
export struct DetailPlayLiveCommon {
private liveViewModel: LiveViewModel = new LiveViewModel()
pageShowTime:number = 0;
@Provide relId: string = ''
@Provide contentId: string = ''
@Provide relType: string = ''
... ... @@ -36,6 +39,8 @@ export struct DetailPlayLiveCommon {
// 横屏或竖屏 general-竖屏，news-横屏
@State liveLandscape: string = ''
@State isLoading: boolean = false
async aboutToAppear(): Promise<void> {
const par: Action = router.getParams() as Action;
const params = par?.params;
... ... @@ -46,6 +51,12 @@ export struct DetailPlayLiveCommon {
}
aboutToDisappear(): void {
console.error("XXXXZZZZ", '---aboutToDisappear------------')
}
build() {
Column() {
// 直播预约或横屏直播统一进横屏直播
... ... @@ -55,6 +66,8 @@ export struct DetailPlayLiveCommon {
} else if (this.liveLandscape === 'general') {
// 沉浸式直播
DetailPlayVLivePage()
}else {
PictureLoading().visibility(this.isLoading ? Visibility.None : Visibility.Visible)
}
}
.height('100%')
... ... @@ -115,12 +128,13 @@ export struct DetailPlayLiveCommon {
this.playUrl = detailData.liveInfo.vlive[0].replayUri
}
} else {
this.isLoading
ToastUtils.shortToast('内容不存在')
router.back()
}
},()=>{
this.isLoading
ToastUtils.shortToast('内容不存在')
router.back()
... ... @@ -132,11 +146,17 @@ export struct DetailPlayLiveCommon {
onPageShow() {
this.pageShow = Math.random()
Logger.info(TAG, 'onPageShow')
this.pageShowTime = DateTimeUtils.getTimeStamp()
}
onPageHide() {
this.pageHide = Math.random()
Logger.info(TAG, 'onPageHide')
console.error("XXXXZZZZ", '---onPageHide------------')
//页面浏览
TrackingPageBrowse.trackCommonPageExposureEnd(TrackConstants.PageName.Live_Detail,TrackConstants.PageName.Live_Detail
,Math.floor((DateTimeUtils.getTimeStamp() - this.pageShowTime)/1000))
}
onBackPress(): boolean | void {
... ...
... ... @@ -10,6 +10,7 @@ import { SpConstants } from 'wdConstant/Index';
const TAG = 'LiveModel'
export class LiveModel {
getContentDetail(contentId: string, relId: string, relType: string) {
return new Promise<Array<ContentDetailDTO>>((success, fail) => {
ContentDetailRequest.getContentDetail({
... ... @@ -19,9 +20,14 @@ export class LiveModel {
}).then(async (resDTO: ResponseDTO<ContentDetailDTO[]>) => {
console.log(TAG, 'getContentDetail:', JSON.stringify(resDTO.data))
if (resDTO.data) {
//console.error("XXXXZZZZ", '---getContentDetail-0---1------------')
success(resDTO.data)
}else {
// console.error("XXXXZZZZ", '---getContentDetail-0--2----1--------')
fail("数据为空")
}
}).catch(() => {
// console.error("XXXXZZZZ", '---getContentDetail-0--2----2--------')
fail("数据为空")
})
... ...
... ... @@ -22,8 +22,10 @@ export class LiveViewModel {
getContentDetail(contentId: string, relId: string, relType: string) {
return new Promise<Array<ContentDetailDTO>>((success, fail) => {
this.liveModel.getContentDetail(contentId, relId, relType).then((data) => {
//console.error("XXXXZZZZ", '---getContentDetail---1------------')
success(data)
}).catch((message: string) => {
// console.error("XXXXZZZZ", '----getContentDetail--2------------')
fail(message)
})
})
... ...
... ... @@ -12,7 +12,8 @@ export struct TabComponent {
@State fontColor: string = '#999999'
@State selectedFontColor: string = '#222222'
@State currentIndex: number = 0
private controller: TabsController = new TabsController()
// private controller: TabsController = new TabsController()
private swiperController: SwiperController = new SwiperController()
@Prop tabs: string[] = []
@Prop lastInputedLiveComment: LiveRoomItemBean // 上次输入的直播间消息
@Prop lastInputedChatComment: LiveRoomItemBean // 上次输入的大家聊消息
... ... @@ -20,48 +21,24 @@ export struct TabComponent {
aboutToAppear(): void {
}
/**
* 评论切换到大家聊
*/
changeToChart() {
const index = this.tabs.findIndex(item => item === '大家聊')
if (index !== -1) {
this.controller.changeIndex(index)
this.swiperController.changeIndex(index)
}
}
build() {
Stack({alignContent: Alignment.TopStart}) {
Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
ForEach(this.tabs, (item: string, index: number) => {
TabContent() {
if ('简介' === item) {
TabInfoComponent()
} else if ('直播间' === item) {
TabLiveComponent({lastInputedComment: this.lastInputedLiveComment})
} else if ('大家聊' === item) {
TabChatComponent({lastInputedComment: this.lastInputedChatComment})
}
}
.backgroundColor('#F5F5F5')
}, (item: string, index: number) => {
return item + index
})
}
.layoutWeight(1)
.vertical(false)
.barMode(BarMode.Fixed)
.barHeight(48)
.animationDuration(100)
.onChange((index: number) => {
this.currentIndex = index
})
.backgroundColor(Color.White)
Column() {
// 页签
Row() {
Scroll() {
Row({space: '24vp'}) {
Row({ space: '24vp' }) {
ForEach(this.tabs, (item: string, index: number) => {
this.tabBuilder(index, item)
})
... ... @@ -79,8 +56,33 @@ export struct TabComponent {
.height('48vp')
.alignItems(VerticalAlign.Bottom)
.width('100%')
}.layoutWeight(1)
Swiper(this.swiperController) {
ForEach(this.tabs, (item: string, index: number) => {
if ('简介' === item) {
TabInfoComponent().backgroundColor('#F5F5F5')
} else if ('直播间' === item) {
TabLiveComponent({ lastInputedComment: this.lastInputedLiveComment }).backgroundColor('#F5F5F5')
} else if ('大家聊' === item) {
TabChatComponent({ lastInputedComment: this.lastInputedChatComment }).backgroundColor('#F5F5F5')
}
}, (item: string, index: number) => {
return item + index
})
}
.layoutWeight(1)
.vertical(false)
.indicator(false)
.loop(false)
.alignSelf(ItemAlign.Start)
.effectMode(EdgeEffect.None)
.onChange((index: number) => {
this.currentIndex = index
})
.backgroundColor(Color.White)
}.layoutWeight(1)
}
... ... @@ -102,7 +104,7 @@ export struct TabComponent {
.constraintSize({ minWidth: 35 })
.height('48vp')
.onClick(() => {
this.controller.changeIndex(index)
this.swiperController.changeIndex(index)
this.currentIndex = index
})
}
... ...
... ... @@ -3,6 +3,7 @@ import { Logger, StringUtils } from 'wdKit/Index';
import { PlayerConstants, WDAliPlayerController, WDPlayerRenderLiveView } from 'wdPlayer/Index';
import { PlayUIComponent } from './PlayUIComponent';
import { PictureLoading } from '../../vertical/PictureLoading';
import { ParamType, TrackConstants } from 'wdTracking/Index';
const TAG: string = 'TopPlayComponent'
... ... @@ -31,11 +32,11 @@ export struct TopPlayComponent {
@Provide playSourceState: number = 0
private playUrl: string = ""
private xComponentIsLoaded: boolean = false
pageParam: ParamType = {}
aboutToAppear(): void {
if (this.playerController) {
this.playerController.onCanplay = () => {
Logger.debug(TAG, 'onCanplay==>')
this.isCanPlay = true
this.isLoading = true
this.playerController?.play()
... ... @@ -147,7 +148,16 @@ export struct TopPlayComponent {
Logger.debug(TAG, "播放地址为空")
return
}
this.playerController?.firstPlay(this.playUrl);
this.contentTrackingDict()
this.playerController?.firstPlay(this.playUrl, TrackConstants.PageName.Live_Detail, this.pageParam);
}
contentTrackingDict() {
this.pageParam = {
'contentType': `${this.contentDetailData.newsType}`,
'contentId': `${this.contentDetailData.newsId}`,
'contentName': `${this.contentDetailData.newsTitle || ''}`,
}
}
build() {
... ...
import { ContentDetailDTO } from 'wdBean/Index';
import { AliPlayerRenderView, WDAliPlayerController, WDPlayerRenderVLiveView } from 'wdPlayer/Index';
import { ParamType, TrackConstants } from 'wdTracking/Index';
import { PictureLoading } from './PictureLoading';
const TAG = 'PlayerComponent'
@Component
export struct PlayerComponent {
private playerController?: WDAliPlayerController
@Consume @Watch('updateData') contentDetailData: ContentDetailDTO
@Consume @Watch('pageShowChange') pageShow: number
... ... @@ -21,6 +21,7 @@ export struct PlayerComponent {
@State liveStreamType: number | null = -1
@State playUrl: string = ''
@State isCanplay: boolean = false
pageParam: ParamType = {}
pageShowChange() {
this.playerController?.play()
... ... @@ -76,8 +77,8 @@ export struct PlayerComponent {
playerController: this.playerController,
onLoad: () => {
this.isCanplay = true
console.error("XXXXZZZZ", '------2------------')
this.playerController?.firstPlay(this.playUrl);
this.contentTrackingDict()
this.playerController?.firstPlay(this.playUrl, TrackConstants.PageName.Live_Detail, this.pageParam);
}
})
} else if (this.liveStreamType == 0) {
... ... @@ -85,8 +86,8 @@ export struct PlayerComponent {
playerController: this.playerController,
onLoad: () => {
this.isCanplay = true
console.error('XXXXZZZZ', '------1------------')
this.playerController?.firstPlay(this.playUrl);
this.contentTrackingDict()
this.playerController?.firstPlay(this.playUrl, TrackConstants.PageName.Live_Detail, this.pageParam);
}
}).margin({ top: 195 }).height(211)
}
... ... @@ -108,4 +109,12 @@ export struct PlayerComponent {
.height('100%')
.width('100%')
}
contentTrackingDict() {
this.pageParam = {
'contentType': `${this.contentDetailData.newsType}`,
'contentId': `${this.contentDetailData.newsId}`,
'contentName': `${this.contentDetailData.newsTitle || ''}`,
}
}
}
\ No newline at end of file
... ...
import { WDAliPlayerController, WDPlayerController } from 'wdPlayer/Index'
import { WDAliPlayerController } from 'wdPlayer/Index'
import { PlayerUIComponent } from './PlayerUIComponent'
@Component
... ...
... ... @@ -292,12 +292,15 @@ export struct DetailPlayShortVideoPage {
playerCoverBuilder() {
// 问题：画面会闪一下
Image(this.contentDetailData?.firstFrameImageUri)
.width('100%')
.height(this.windowWidth / this.ratio + 'px')
.opacity(this.imageVisible ? 0.8 : 0)
.animation({
duration: 350, curve: Curve.EaseInOut
})
.width(this.playerWidth)
.height(this.playerHeight)// .opacity(this.imageVisible ? 0.7 : 0)
// .animation({
// // duration: 350,
// curve: Curve.EaseInOut,
// expectedFrameRateRange: { min: 30, max: 120, expected: 60 }
// })
.visibility(this.imageVisible ? Visibility.Visible : Visibility.None)
}
@Builder
... ...
... ... @@ -13,7 +13,8 @@ import {
import { initGlobalPlayerSettings, setupPlayerConfig } from '../utils/GlobalSetting';
import prompt from '@ohos.promptAction';
import { PlayerConstants, AVPlayerStatus, Events } from '../constants/PlayerConstants';
import { Logger, StringUtils } from 'wdKit/Index';
import { DateTimeUtils, Logger, StringUtils } from 'wdKit/Index';
import { ParamType, TrackingPlay } from 'wdTracking/Index';
const TAG = "WDAliPlayerController"
... ... @@ -50,6 +51,11 @@ export class WDAliPlayerController {
public onCanplay?: () => void;
public onStatusChange?: (status: number) => void;
public onFirstFrameDisplay?: () => void
// 埋点字段
private creatStartTime: number = 0; //开始加载时间
private creatEndTime: number = 0; //加载完成时间
private pageParam: ParamType = {}
private pageName: string = ''
constructor() {
Logger.info(TAG, "初始化")
... ... @@ -102,11 +108,29 @@ export class WDAliPlayerController {
if (this.onFirstFrameDisplay) {
this.onFirstFrameDisplay()
}
if (this.pageParam) {
console.log('播放视频pageParam', JSON.stringify(this.pageParam))
// 播放埋点
TrackingPlay.videoPositivePlay(Math.floor((DateTimeUtils.getTimeStamp() - this.creatStartTime) / 1000),
this.pageName, this.pageName, this.pageParam)
}
}
});
this.avPlayer?.setOnCompletionListener({
onCompletion: () => {
Logger.debug(TAG, "播放完成")
if (this.pageParam) {
let initDuration = Math.floor(Number(this.duration) / 1000)
let currentPlayTime: number = Math.floor((DateTimeUtils.getTimeStamp() - this.creatStartTime) / 1000) //当前播放时间
console.log('播放结束')
// 播放结束埋点
TrackingPlay.videoPlayEnd(currentPlayTime, initDuration, currentPlayTime, this.pageName, this.pageName,
this.pageParam)
}
}
});
this.avPlayer?.setOnInfoListener({
... ... @@ -197,6 +221,9 @@ export class WDAliPlayerController {
this.errorMesage = errorInfo.getMsg()
this.status = PlayerConstants.STATUS_ERROR;
this.watchStatus();
console.log('播放错误',JSON.stringify(error))
TrackingPlay.videoPlayError(errorInfo.getMsg(), this.pageName, this.pageName, this.pageParam)
}
});
this.avPlayer?.setOnLoadingStatusListener({
... ... @@ -265,12 +292,20 @@ export class WDAliPlayerController {
}
}
async firstPlay(url: string) {
async firstPlay(url: string, pageName?: string, pageParam?: ParamType) {
if (StringUtils.isEmpty(url)) {
Logger.error(TAG, "播放链接为空")
return
}
this.creatStartTime = DateTimeUtils.getTimeStamp()
if (pageName) {
this.pageName = pageName
}
if (pageParam) {
this.pageParam = pageParam
}
this.url = url;
if (this.avPlayer == null) {
Logger.info(TAG, "等待播放器初始化")
... ... @@ -457,11 +492,7 @@ export class WDAliPlayerController {
if (this.onStatusChange) {
this.onStatusChange(this.status)
}
// if (this.status === PlayConstants.STATUS_START) {
// globalThis.windowClass.setWindowKeepScreenOn(true);
// } else {
// globalThis.windowClass.setWindowKeepScreenOn(false);
// }
}
playError(msg?: string) {
... ...
... ... @@ -62,5 +62,6 @@ struct ENewspaper {
onBackPress() {
Logger.info(TAG, 'onBackPress');
return true
}
}
\ No newline at end of file
... ...
... ... @@ -4,10 +4,11 @@ import { EmitterEventId, EmitterUtils, Logger, StringUtils } from 'wdKit';
import { HttpUtils } from 'wdNetwork/Index';
import HomeChannelUtils, { AssignChannelParam } from 'wdRouter/Index';
import { MinePageComponent } from 'wdComponent/src/main/ets/components/page/MinePageComponent';
import { CompUtils, TopNavigationComponent, TopNavigationComponentNew } from 'wdComponent/Index';
import { CompUtils, TopNavigationComponentNew } from 'wdComponent/Index';
import { VideoChannelPage } from './VideoChannelPage';
import ChannelViewModel from 'wdComponent/src/main/ets/viewmodel/ChannelViewModel';
import { ALL, ImageKnifeComponent, ImageKnifeOption, NONE } from '@ohos/imageknife';
import { ParamType, Tracking } from 'wdTracking/Index';
const TAG = 'BottomNavigationComponent';
PersistentStorage.persistProp('channelIds', '');
... ... @@ -21,7 +22,6 @@ let storage = LocalStorage.getShared();
@Entry(storage)
@Component
export struct BottomNavigationComponent {
private isNewTopPage = true // TODO 顶导重构页面开关，false，则用原来的顶导
@Provide bottomRectHeight: number = 0
@Provide topRectHeight: number = 0
@Provide isLayoutFullScreen: boolean = false
... ... @@ -87,7 +87,6 @@ export struct BottomNavigationComponent {
autoRefresh: this.autoRefresh
})
} else {
if (this.isNewTopPage) {
TopNavigationComponentNew({
groupId: navItem.id,
topNavList: navItem.topNavChannelList.filter(item => item.channelId != 2073),
... ... @@ -97,18 +96,6 @@ export struct BottomNavigationComponent {
assignChannel: this.assignChannel,
autoRefresh: this.autoRefresh
})
} else {
TopNavigationComponent({
groupId: navItem.id,
topNavList: navItem.topNavChannelList.filter(item => item.channelId != 2073),
_currentNavIndex: $currentNavIndex,
navIndex: index,
currentBottomNavName: navItem.name,
assignChannel: this.assignChannel,
autoRefresh: this.autoRefresh
})
}
}
}
.tabBar(this.tabBarBuilder(navItem, index))
... ... @@ -171,6 +158,14 @@ export struct BottomNavigationComponent {
// .hitTestBehavior(HitTestMode.Block)
.onClick(() => {
Logger.info(TAG, `onChange, index: ${index}`);
Logger.info(TAG, `onChange, navItem: ${JSON.stringify(navItem)}`);
// 底部bar埋点
const params: ParamType = {
"pageName": navItem.pageName,
"pageId": navItem.id,
}
Tracking.event("bar_click", params)
this.onBottomNavigationIndexChange(navItem, index)
})
... ... @@ -368,6 +363,15 @@ export struct BottomNavigationComponent {
Logger.info(TAG, `setData, bottomNav.length: ${list.length}`);
// 使用filter方法移除name为'服务'的项
list = list.filter(item => item.name !== '服务');
list.forEach(item => {
switch (item.name) {
case '新闻': item.pageName = 'NEWS'; break;
case '人民号': item.pageName = 'PEOPLE'; break;
case '视频': item.pageName = 'VIDEOS'; break;
case '我的': item.pageName = 'MY'; break;
default : item.pageName = 'NEWS'; break;
}
})
this.bottomNavList = list
}
}
... ...
... ... @@ -30,7 +30,6 @@ export struct VideoChannelPage {
@State indicatorWidth: number = 0
// 传递给page的自动刷新通知
@State autoRefresh2Page: number = 0
aboutToAppear(): void {
this.setBarBackgroundColor()
console.log(TAG, 'aboutToAppear')
... ... @@ -131,14 +130,14 @@ export struct VideoChannelPage {
.onClick(() => {
TrackingButton.searchClick(TrackConstants.PageName.Search, "VIDEOS")
let params = { 'tabName': "VIDEOS" } as Record<string, string>
WDRouterRule.jumpWithPage(WDRouterPage.searchPage,params)
WDRouterRule.jumpWithPage(WDRouterPage.searchPage, params)
})
.backgroundColor(Color.Transparent)
}
.zIndex(20)
.height($r('app.float.top_tab_bar_height_common'))
.margin({top:10})
.margin({ top: 10 })
.visibility(this.displayDirection === DisplayDirection.VERTICAL ? Visibility.Visible : Visibility.None)
}
... ... @@ -174,6 +173,7 @@ export struct VideoChannelPage {
.width('100%')
.height('100%')
.cachedCount(-1)
.disableSwipe(this.displayDirection === DisplayDirection.VERTICAL ? false : true)
.displayCount(1, true)
.alignSelf(ItemAlign.Start)
.effectMode(EdgeEffect.None)
... ...
... ... @@ -17,7 +17,7 @@
"name": "EntryAbility", // 这里不能改动，和后台推送有绑定
"srcEntry": "./ets/entryability/EntryAbility.ets",
"description": "$string:EntryAbility_desc",
"icon": "$media:app_icon",
"icon": "$media:app_icon_layer",
"label": "$string:EntryAbility_label",
"startWindowIcon": "$media:app_icon",
"startWindowBackground": "$color:start_window_background",
... ...
{
"layered-image":
{
"background" : "$media:app_icon_background",
"foreground" : "$media:app_icon_foreground"
}
}
\ No newline at end of file
... ...