yangchenggong1_wd

desc:4.0 搜索默认滚动

... ... @@ -169,6 +169,10 @@ export class HttpUrlUtils {
*/
static readonly FOLLOW_OPERATION_PATH: string = "/api/rmrb-interact/interact/zh/c/attention/operation";
/**
* 首页 搜索提示
*/
static readonly SEARCH_HINT_DATA_PATH: string = "/api/rmrb-search-api/zh/c/hints";
/**
* 早晚报列表
* 根据页面id获取页面楼层列表
* https://pdapis.pdnews.cn/api/rmrb-bff-display-zh/display/zh/c/pageInfo?pageId=28927
... ... @@ -510,6 +514,12 @@ export class HttpUrlUtils {
return url
}
static getSearchHintDataUrl() {
let url = HttpUrlUtils._hostUrl + HttpUrlUtils.SEARCH_HINT_DATA_PATH
return url
}
// static getYcgCommonHeaders(): HashMap<string, string> {
// let headers: HashMap<string, string> = new HashMap<string, string>()
... ...
... ... @@ -58,3 +58,5 @@ export { AudioDetailComponent } from "./src/main/ets/components/AudioDetailCompo
export { BroadcastPageComponent } from "./src/main/ets/components/broadcast/BroadcastPageComponent"
export { FirstTabTopSearchComponent } from "./src/main/ets/components/search/FirstTabTopSearchComponent"
... ...
... ... @@ -3,6 +3,7 @@ import { LazyDataSource, Logger } from 'wdKit';
import { WDRouterRule } from 'wdRouter';
import { PageComponent } from './PageComponent';
import { ChannelSubscriptionLayout } from './ChannelSubscriptionLayout'
import { FirstTabTopSearchComponent } from '../search/FirstTabTopSearchComponent';
const TAG = 'TopNavigationComponent';
... ... @@ -121,90 +122,56 @@ export struct TopNavigationComponent {
build() {
Column() {
// 顶部搜索、日报logo、早晚报
RelativeContainer() {
Stack({ alignContent: Alignment.Center }) {
Column(){
Row(){
FirstTabTopSearchComponent()
Image($r('app.media.background_search'))
.width('100%')
.height('100%')
.objectFit(ImageFit.Contain)
Image($r('app.media.icon_ren_min_ri_bao'))
.width(72)
.height(29)
.onClick((event: ClickEvent) => {
let taskAction: Action = {
type: 'JUMP_INNER_NEW_PAGE',
params: {
pageID: 'E_NEWSPAPER'
} as Params,
};
WDRouterRule.jumpWithAction(taskAction)
})
Row() {
Image($r('app.media.icon_search'))
.width(18)
.height(18)
Text('河南大雪')
.fontColor($r('app.color.color_B0B0B0'))
.fontSize($r('app.float.font_size_13'))
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($r('app.color.color_B0B0B0'))
.fontSize($r('app.float.font_size_13'))
}
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Center)
}
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Center)
}
.height(30)
.width(123)
.id('search')
.alignRules({
left: { anchor: "__container__", align: HorizontalAlign.Start },
center: { anchor: "__container__", align: VerticalAlign.Center }
})
Image($r('app.media.icon_ren_min_ri_bao'))
.width(72)
.height(29)
.height(30)
.width(124)
.onClick(() => {
let taskAction: Action = {
type: 'JUMP_INNER_NEW_PAGE',
params: {
pageID: 'E_NEWSPAPER'
pageID: 'MorningEveningPaper'
} as Params,
};
WDRouterRule.jumpWithAction(taskAction)
})
.id('ren_min')
.alignRules({
middle: { anchor: "__container__", align: HorizontalAlign.Center },
center: { anchor: "__container__", align: VerticalAlign.Center }
})
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($r('app.color.color_B0B0B0'))
.fontSize($r('app.float.font_size_13'))
}
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Center)
}
.height(30)
.width(124)
.id('read')
.alignRules({
right: { anchor: "__container__", align: HorizontalAlign.End },
center: { anchor: "__container__", align: VerticalAlign.Center }
})
.onClick(() => {
let taskAction: Action = {
type: 'JUMP_INNER_NEW_PAGE',
params: {
pageID: 'MorningEveningPaper'
} as Params,
};
WDRouterRule.jumpWithAction(taskAction)
})
}
}.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
}.height('73lpx')
.width('100%')
.height(40)
.visibility(this._currentNavIndex == 0 ? Visibility.Visible : Visibility.None)
.justifyContent(FlexAlign.End)
.backgroundColor($r('app.color.white'))
// 频道分类list
Stack({ alignContent: Alignment.TopEnd }) {
... ...
/**
* 首页顶部搜索导航栏
* 竖向滚动实现方案
* 方案一 使用动画 + 定时器
* 方案二 使用容器组件Swiper(当前)
*/
import SearcherAboutDataModel from '../../model/SearcherAboutDataModel'
const TAG = "FirstTabTopSearchComponent"
@Component
export struct FirstTabTopSearchComponent{
@State searchTextData :string[] = []
private swiperController: SwiperController = new SwiperController()
aboutToAppear(){
this.getSearchHint()
}
getSearchHint(){
SearcherAboutDataModel.getSearchHintData(getContext(this)).then((value)=>{
if(value!=null){
this.searchTextData = value
}
}).catch((err:Error)=>{
console.log(TAG,JSON.stringify(err))
})
}
build(){
Row(){
Image($r('app.media.icon_search'))
.objectFit(ImageFit.Cover)
.height('23lpx')
.width('23lpx')
.margin({right:'13lpx'})
.interpolation(ImageInterpolation.Medium)
if(this.searchTextData!=null && this.searchTextData.length>0){
Swiper(this.swiperController) {
ForEach(this.searchTextData, (item: string, index: number ) => {
Text(item)
.fontWeight('400lpx')
.fontSize('25lpx')
.fontColor($r('app.color.color_666666'))
.lineHeight('35lpx')
.textAlign(TextAlign.Start)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Clip})
})
}
.loop(true)
.autoPlay(true)
.interval(3000)
.indicator(false)
.vertical(true)
}
}.width('257lpx')
.height('61lpx')
.padding({left:'31lpx'})
.backgroundImage($r('app.media.background_search'))
.backgroundImageSize(ImageSize.Cover)
.alignItems(VerticalAlign.Center)
}
}
\ No newline at end of file
... ...
import { Logger, ResourcesUtils } from 'wdKit';
import { HttpUrlUtils, ResponseDTO, WDHttp } from 'wdNetwork';
import HashMap from '@ohos.util.HashMap';
const TAG = "SearcherAboutDataModel"
/**
* 我的页面 所有数据 获取封装类
*/
class SearcherAboutDataModel{
private static instance: SearcherAboutDataModel;
private constructor() { }
/**
* 单例模式
* @returns
*/
public static getInstance(): SearcherAboutDataModel {
if (!SearcherAboutDataModel.instance) {
SearcherAboutDataModel.instance = new SearcherAboutDataModel();
}
return SearcherAboutDataModel.instance;
}
/**
* 首页 搜索提示滚动内容
*/
getSearchHintData(context: Context): Promise<string[]> {
return new Promise<string[]>((success, error) => {
Logger.info(TAG, `getSearchHintData start`);
this.fetchSearchHintData().then((navResDTO: ResponseDTO<string[]>) => {
if (!navResDTO || navResDTO.code != 0) {
success(this.getSearchHintDataLocal(context))
return
}
Logger.info(TAG, "getSearchHintData then,SearchHintDataResDTO.timeStamp:" + navResDTO.timestamp);
let navigationBean = navResDTO.data as string[]
success(navigationBean);
}).catch((err: Error) => {
Logger.error(TAG, `fetchSearchHintData catch, error.name : ${err.name}, error.message:${err.message}`);
success(this.getSearchHintDataLocal(context))
})
})
}
fetchSearchHintData() {
let url = HttpUrlUtils.getSearchHintDataUrl()
let headers: HashMap<string, string> = HttpUrlUtils.getCommonHeaders();
return WDHttp.get<ResponseDTO<string[]>>(url, headers)
};
async getSearchHintDataLocal(context: Context): Promise<string[]> {
Logger.info(TAG, `getSearchHintDataLocal start`);
let compRes: ResponseDTO<string[]> | null = await ResourcesUtils.getResourcesJson<ResponseDTO<string[]>>(context,'search_hint_data.json' );
if (!compRes || !compRes.data) {
Logger.info(TAG, `getSearchHintDataLocal compRes is empty`);
return []
}
Logger.info(TAG, `getSearchHintDataLocal compRes : ${JSON.stringify(compRes)}`);
return compRes.data
}
}
const searcherAboutDataModel = SearcherAboutDataModel.getInstance()
export default searcherAboutDataModel as SearcherAboutDataModel
\ No newline at end of file
... ...
{
"code": "0",
"data": [
"习语",
"党史学习",
"高考倒计时"
],
"message": "Success",
"success": true,
"timestamp": 1712562841885
}
\ No newline at end of file
... ...