developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
liyubing
95c44efd 2 parents 65533739 4f099143

Merge remote-tracking branch 'origin/main'

Inline Side-by-side
Showing 14 changed files with 329 additions and 216 deletions
... ... @@ -4,6 +4,7 @@ import { TopNavDTO } from './TopNavDTO';
* 底导(包含顶导列表）数据
*/
export interface BottomNavDTO {
pageName: string;
backgroundUrl: string; // 迭代四：页面背景图
channelChooseActionUrl: string; // 迭代四：频道选中下划线动画
channelChooseCColor: string; // 迭代四：频道未选中颜色
... ...
... ... @@ -89,72 +89,77 @@ export struct CardMediaInfo {
Row() {
// 搜索接口没有返回liveInfo字段所以得做个区分
if (this.contentDTO && this.contentDTO.liveInfo && JSON.stringify(this.contentDTO.liveInfo) === '{}') {
// 当liveInfo不存在的时候
if (this.contentDTO?.liveType === 'wait') {
Image($r('app.media.card_wait'))
.mediaLogo()
Text('预约')
.mediaText()
} else if (this.contentDTO?.liveType === 'running') {
LottieView({
name: 'live_status_wait',
path: "lottie/live_detail_living.json",
lottieWidth: 14,
lottieHeight: 14,
autoplay: true,
loop: true,
})
.margin({
right: '2vp'
// 当liveInfo不存在的时候
if (this.contentDTO?.liveType === 'wait') {
Image($r('app.media.card_wait'))
.mediaLogo()
Text('预约')
.mediaText()
} else if (this.contentDTO?.liveType === 'running') {
LottieView({
name: 'live_status_wait',
path: "lottie/live_detail_living.json",
lottieWidth: 14,
lottieHeight: 14,
autoplay: true,
loop: true,
})
// Image($r('app.media.card_live'))
// .mediaLogo()
Text('直播中')
.mediaText()
} else if (this.contentDTO?.liveType === 'end' && this.contentDTO?.linkUrl) {
Image($r('app.media.card_play'))
.mediaLogo()
Text('回看')
.mediaText()
}else if(this.contentDTO?.liveInfo?.liveState === 'end' && !this.contentDTO?.linkUrl){
Text('已结束')
.mediaText()
}
.margin({
right: '2vp'
})
Text('直播中')
.mediaText()
} else if (this.contentDTO?.liveType === 'end' && this.contentDTO?.linkUrl) {
Image($r('app.media.card_play'))
.mediaLogo()
Text('回看')
.mediaText()
}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存在时后
if (this.contentDTO?.liveInfo?.liveState === 'wait') {
Image($r('app.media.card_wait'))
.mediaLogo()
Text('预约')
.mediaText()
} else if (this.contentDTO?.liveInfo?.liveState === 'running') {
LottieView({
name: 'live_status_wait',
path: "lottie/live_detail_living.json",
lottieWidth: 14,
lottieHeight: 14,
autoplay: true,
loop: true,
})
.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()
Text('回看')
.mediaText()
}else if(this.contentDTO?.liveInfo?.liveState === 'end' && !this.contentDTO?.liveInfo
?.replayUri){
Text('已结束')
.mediaText()
}
if (this.contentDTO?.liveInfo?.liveState === 'wait') {
Image($r('app.media.card_wait'))
.mediaLogo()
Text('预约')
.mediaText()
} else if (this.contentDTO?.liveInfo?.liveState === 'running') {
Row(){
LottieView({
name: 'live_status_wait',
path: "lottie/live_detail_living.json",
lottieWidth: 14,
lottieHeight: 14,
autoplay: true,
loop: true,
}).margin({
right: '2vp'
})
Text('直播中')
.mediaText()
}
} else if (this.contentDTO?.liveInfo?.liveState === 'end' && this.contentDTO?.liveInfo?.replayUri) {
Image($r('app.media.card_play'))
.mediaLogo()
Text('回看')
.mediaText()
}else if(this.contentDTO?.liveInfo?.liveState === 'end' && !this.contentDTO?.liveInfo
?.replayUri){
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') {
// 显示组图；图片数量
... ...
... ... @@ -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() {
if (item.imgSrc) {
Image(item.imgSrc)
.width('38lpx')
.height('38lpx')
.margin({ right: '15lpx' })
.objectFit(ImageFit.Auto)
.interpolation(ImageInterpolation.High)
}
Text(`${item.msg}`)
.width('456lpx')
.height('38lpx')
.fontColor($r('app.color.color_666666'))
.fontSize('29lpx')
.fontWeight(400)
Row(){
if (item.imgSrc) {
Image(item.imgSrc)
.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}`)
.height(`${this.calcHeight(38)}lpx`)
.fontColor($r('app.color.color_666666'))
.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.Center)
}.height('108lpx')
.justifyContent(FlexAlign.SpaceBetween)
.width("100%")
}.height(`${this.calcHeight(108)}lpx`)
.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
... ...
... ... @@ -82,6 +82,7 @@ export struct FollowChildComponent{
.justifyContent(FlexAlign.Center)
.width('100lpx')
.backgroundColor($r("app.color.color_F5F5F5"))
.borderRadius("6lpx")
.height('46lpx')
.onClick(()=>{
this.followOperation()
... ... @@ -198,6 +199,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 }) {
ForEach(this.data, (item: FollowListItem, index: number ) => {
TabContent(){
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 ) => {
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)
})
.width('100%')
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
.layoutWeight(1)
.backgroundColor($r('app.color.white'))
}, (item: FollowListItem, index: number) => index.toString())
}
.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])
... ...
... ... @@ -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])
FollowThirdTabsComponent({data:$data,firstIndex:$firstIndex,secondIndex:index})
}, (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() {
ForEach(this.data[this.firstIndex].children[this.secondIndex].children, (item: FollowThirdListItem, index: number ) => {
this.TabBuilder(index,item)
})
}
.justifyContent(FlexAlign.Start)
List({ scroller: this.listScroller }){
ForEach(this.data[this.firstIndex].children[this.secondIndex].children, (item: FollowThirdListItem, index: number ) => {
ListItem(){
this.TabBuilder(index,item)
}
.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)
.edgeEffect(EdgeEffect.None)
.scrollBar(BarState.Off)
.listDirection(Axis.Horizontal)
.width('100%')
.height("84lpx")
.padding({left:'31lpx',right:'48lpx'})
// 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%')
Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
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)
... ...
... ... @@ -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,7 @@ 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', '');
... ... @@ -157,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)
})
... ... @@ -354,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
}
}
... ...