Showing
6 changed files
with
196 additions
and
72 deletions
| @@ -169,6 +169,10 @@ export class HttpUrlUtils { | @@ -169,6 +169,10 @@ export class HttpUrlUtils { | ||
| 169 | */ | 169 | */ |
| 170 | static readonly FOLLOW_OPERATION_PATH: string = "/api/rmrb-interact/interact/zh/c/attention/operation"; | 170 | static readonly FOLLOW_OPERATION_PATH: string = "/api/rmrb-interact/interact/zh/c/attention/operation"; |
| 171 | /** | 171 | /** |
| 172 | + * 首页 搜索提示 | ||
| 173 | + */ | ||
| 174 | + static readonly SEARCH_HINT_DATA_PATH: string = "/api/rmrb-search-api/zh/c/hints"; | ||
| 175 | + /** | ||
| 172 | * 早晚报列表 | 176 | * 早晚报列表 |
| 173 | * 根据页面id获取页面楼层列表 | 177 | * 根据页面id获取页面楼层列表 |
| 174 | * https://pdapis.pdnews.cn/api/rmrb-bff-display-zh/display/zh/c/pageInfo?pageId=28927 | 178 | * https://pdapis.pdnews.cn/api/rmrb-bff-display-zh/display/zh/c/pageInfo?pageId=28927 |
| @@ -510,6 +514,12 @@ export class HttpUrlUtils { | @@ -510,6 +514,12 @@ export class HttpUrlUtils { | ||
| 510 | return url | 514 | return url |
| 511 | } | 515 | } |
| 512 | 516 | ||
| 517 | + static getSearchHintDataUrl() { | ||
| 518 | + let url = HttpUrlUtils._hostUrl + HttpUrlUtils.SEARCH_HINT_DATA_PATH | ||
| 519 | + return url | ||
| 520 | + } | ||
| 521 | + | ||
| 522 | + | ||
| 513 | 523 | ||
| 514 | // static getYcgCommonHeaders(): HashMap<string, string> { | 524 | // static getYcgCommonHeaders(): HashMap<string, string> { |
| 515 | // let headers: HashMap<string, string> = new HashMap<string, string>() | 525 | // let headers: HashMap<string, string> = new HashMap<string, string>() |
| @@ -58,3 +58,5 @@ export { AudioDetailComponent } from "./src/main/ets/components/AudioDetailCompo | @@ -58,3 +58,5 @@ export { AudioDetailComponent } from "./src/main/ets/components/AudioDetailCompo | ||
| 58 | 58 | ||
| 59 | export { BroadcastPageComponent } from "./src/main/ets/components/broadcast/BroadcastPageComponent" | 59 | export { BroadcastPageComponent } from "./src/main/ets/components/broadcast/BroadcastPageComponent" |
| 60 | 60 | ||
| 61 | +export { FirstTabTopSearchComponent } from "./src/main/ets/components/search/FirstTabTopSearchComponent" | ||
| 62 | + |
| @@ -3,6 +3,7 @@ import { LazyDataSource, Logger } from 'wdKit'; | @@ -3,6 +3,7 @@ import { LazyDataSource, Logger } from 'wdKit'; | ||
| 3 | import { WDRouterRule } from 'wdRouter'; | 3 | import { WDRouterRule } from 'wdRouter'; |
| 4 | import { PageComponent } from './PageComponent'; | 4 | import { PageComponent } from './PageComponent'; |
| 5 | import { ChannelSubscriptionLayout } from './ChannelSubscriptionLayout' | 5 | import { ChannelSubscriptionLayout } from './ChannelSubscriptionLayout' |
| 6 | +import { FirstTabTopSearchComponent } from '../search/FirstTabTopSearchComponent'; | ||
| 6 | 7 | ||
| 7 | const TAG = 'TopNavigationComponent'; | 8 | const TAG = 'TopNavigationComponent'; |
| 8 | 9 | ||
| @@ -121,90 +122,56 @@ export struct TopNavigationComponent { | @@ -121,90 +122,56 @@ export struct TopNavigationComponent { | ||
| 121 | build() { | 122 | build() { |
| 122 | Column() { | 123 | Column() { |
| 123 | // 顶部搜索、日报logo、早晚报 | 124 | // 顶部搜索、日报logo、早晚报 |
| 124 | - RelativeContainer() { | ||
| 125 | - Stack({ alignContent: Alignment.Center }) { | 125 | + Column(){ |
| 126 | + Row(){ | ||
| 127 | + FirstTabTopSearchComponent() | ||
| 126 | 128 | ||
| 127 | - Image($r('app.media.background_search')) | ||
| 128 | - .width('100%') | ||
| 129 | - .height('100%') | ||
| 130 | - .objectFit(ImageFit.Contain) | 129 | + Image($r('app.media.icon_ren_min_ri_bao')) |
| 130 | + .width(72) | ||
| 131 | + .height(29) | ||
| 132 | + .onClick((event: ClickEvent) => { | ||
| 133 | + let taskAction: Action = { | ||
| 134 | + type: 'JUMP_INNER_NEW_PAGE', | ||
| 135 | + params: { | ||
| 136 | + pageID: 'E_NEWSPAPER' | ||
| 137 | + } as Params, | ||
| 138 | + }; | ||
| 139 | + WDRouterRule.jumpWithAction(taskAction) | ||
| 140 | + }) | ||
| 131 | 141 | ||
| 132 | - Row() { | ||
| 133 | - Image($r('app.media.icon_search')) | ||
| 134 | - .width(18) | ||
| 135 | - .height(18) | ||
| 136 | - | ||
| 137 | - Text('河南大雪') | ||
| 138 | - .fontColor($r('app.color.color_B0B0B0')) | ||
| 139 | - .fontSize($r('app.float.font_size_13')) | 142 | + Stack({ alignContent: Alignment.Center }) { |
| 143 | + Image($r('app.media.background_read_paper_home')) | ||
| 144 | + .width('100%') | ||
| 145 | + .height('100%') | ||
| 146 | + .objectFit(ImageFit.Contain) | ||
| 147 | + Row() { | ||
| 148 | + Image($r('app.media.icon_read_paper_home')) | ||
| 149 | + .width(18) | ||
| 150 | + .height(18) | ||
| 151 | + Text('早晚报') | ||
| 152 | + .fontColor($r('app.color.color_B0B0B0')) | ||
| 153 | + .fontSize($r('app.float.font_size_13')) | ||
| 154 | + } | ||
| 155 | + .alignItems(VerticalAlign.Center) | ||
| 156 | + .justifyContent(FlexAlign.Center) | ||
| 140 | } | 157 | } |
| 141 | - .alignItems(VerticalAlign.Center) | ||
| 142 | - .justifyContent(FlexAlign.Center) | ||
| 143 | - } | ||
| 144 | - .height(30) | ||
| 145 | - .width(123) | ||
| 146 | - .id('search') | ||
| 147 | - .alignRules({ | ||
| 148 | - left: { anchor: "__container__", align: HorizontalAlign.Start }, | ||
| 149 | - center: { anchor: "__container__", align: VerticalAlign.Center } | ||
| 150 | - }) | ||
| 151 | - | ||
| 152 | - Image($r('app.media.icon_ren_min_ri_bao')) | ||
| 153 | - .width(72) | ||
| 154 | - .height(29) | 158 | + .height(30) |
| 159 | + .width(124) | ||
| 155 | .onClick(() => { | 160 | .onClick(() => { |
| 156 | let taskAction: Action = { | 161 | let taskAction: Action = { |
| 157 | type: 'JUMP_INNER_NEW_PAGE', | 162 | type: 'JUMP_INNER_NEW_PAGE', |
| 158 | params: { | 163 | params: { |
| 159 | - pageID: 'E_NEWSPAPER' | 164 | + pageID: 'MorningEveningPaper' |
| 160 | } as Params, | 165 | } as Params, |
| 161 | }; | 166 | }; |
| 162 | WDRouterRule.jumpWithAction(taskAction) | 167 | WDRouterRule.jumpWithAction(taskAction) |
| 163 | }) | 168 | }) |
| 164 | - .id('ren_min') | ||
| 165 | - .alignRules({ | ||
| 166 | - middle: { anchor: "__container__", align: HorizontalAlign.Center }, | ||
| 167 | - center: { anchor: "__container__", align: VerticalAlign.Center } | ||
| 168 | - }) | ||
| 169 | - | ||
| 170 | - Stack({ alignContent: Alignment.Center }) { | ||
| 171 | - Image($r('app.media.background_read_paper_home')) | ||
| 172 | - .width('100%') | ||
| 173 | - .height('100%') | ||
| 174 | - .objectFit(ImageFit.Contain) | ||
| 175 | - Row() { | ||
| 176 | - Image($r('app.media.icon_read_paper_home')) | ||
| 177 | - .width(18) | ||
| 178 | - .height(18) | ||
| 179 | - Text('早晚报') | ||
| 180 | - .fontColor($r('app.color.color_B0B0B0')) | ||
| 181 | - .fontSize($r('app.float.font_size_13')) | ||
| 182 | - } | ||
| 183 | - .alignItems(VerticalAlign.Center) | ||
| 184 | - .justifyContent(FlexAlign.Center) | ||
| 185 | - | ||
| 186 | - } | ||
| 187 | - .height(30) | ||
| 188 | - .width(124) | ||
| 189 | - .id('read') | ||
| 190 | - .alignRules({ | ||
| 191 | - right: { anchor: "__container__", align: HorizontalAlign.End }, | ||
| 192 | - center: { anchor: "__container__", align: VerticalAlign.Center } | ||
| 193 | - }) | ||
| 194 | - .onClick(() => { | ||
| 195 | - | ||
| 196 | - let taskAction: Action = { | ||
| 197 | - type: 'JUMP_INNER_NEW_PAGE', | ||
| 198 | - params: { | ||
| 199 | - pageID: 'MorningEveningPaper' | ||
| 200 | - } as Params, | ||
| 201 | - }; | ||
| 202 | - WDRouterRule.jumpWithAction(taskAction) | ||
| 203 | - }) | ||
| 204 | - } | 169 | + }.width('100%') |
| 170 | + .justifyContent(FlexAlign.SpaceBetween) | ||
| 171 | + }.height('73lpx') | ||
| 205 | .width('100%') | 172 | .width('100%') |
| 206 | - .height(40) | ||
| 207 | - .visibility(this._currentNavIndex == 0 ? Visibility.Visible : Visibility.None) | 173 | + .justifyContent(FlexAlign.End) |
| 174 | + .backgroundColor($r('app.color.white')) | ||
| 208 | 175 | ||
| 209 | // 频道分类list | 176 | // 频道分类list |
| 210 | Stack({ alignContent: Alignment.TopEnd }) { | 177 | Stack({ alignContent: Alignment.TopEnd }) { |
sight_harmony/features/wdComponent/src/main/ets/components/search/FirstTabTopSearchComponent.ets
0 → 100644
| 1 | +/** | ||
| 2 | + * 首页顶部搜索导航栏 | ||
| 3 | + * 竖向滚动实现方案 | ||
| 4 | + * 方案一 使用动画 + 定时器 | ||
| 5 | + * 方案二 使用容器组件Swiper(当前) | ||
| 6 | + */ | ||
| 7 | +import SearcherAboutDataModel from '../../model/SearcherAboutDataModel' | ||
| 8 | + | ||
| 9 | +const TAG = "FirstTabTopSearchComponent" | ||
| 10 | +@Component | ||
| 11 | +export struct FirstTabTopSearchComponent{ | ||
| 12 | + @State searchTextData :string[] = [] | ||
| 13 | + private swiperController: SwiperController = new SwiperController() | ||
| 14 | + | ||
| 15 | + aboutToAppear(){ | ||
| 16 | + this.getSearchHint() | ||
| 17 | + } | ||
| 18 | + | ||
| 19 | + getSearchHint(){ | ||
| 20 | + SearcherAboutDataModel.getSearchHintData(getContext(this)).then((value)=>{ | ||
| 21 | + if(value!=null){ | ||
| 22 | + this.searchTextData = value | ||
| 23 | + } | ||
| 24 | + }).catch((err:Error)=>{ | ||
| 25 | + console.log(TAG,JSON.stringify(err)) | ||
| 26 | + }) | ||
| 27 | + } | ||
| 28 | + | ||
| 29 | + build(){ | ||
| 30 | + Row(){ | ||
| 31 | + Image($r('app.media.icon_search')) | ||
| 32 | + .objectFit(ImageFit.Cover) | ||
| 33 | + .height('23lpx') | ||
| 34 | + .width('23lpx') | ||
| 35 | + .margin({right:'13lpx'}) | ||
| 36 | + .interpolation(ImageInterpolation.Medium) | ||
| 37 | + | ||
| 38 | + if(this.searchTextData!=null && this.searchTextData.length>0){ | ||
| 39 | + Swiper(this.swiperController) { | ||
| 40 | + ForEach(this.searchTextData, (item: string, index: number ) => { | ||
| 41 | + Text(item) | ||
| 42 | + .fontWeight('400lpx') | ||
| 43 | + .fontSize('25lpx') | ||
| 44 | + .fontColor($r('app.color.color_666666')) | ||
| 45 | + .lineHeight('35lpx') | ||
| 46 | + .textAlign(TextAlign.Start) | ||
| 47 | + .maxLines(1) | ||
| 48 | + .textOverflow({ overflow: TextOverflow.Clip}) | ||
| 49 | + }) | ||
| 50 | + } | ||
| 51 | + .loop(true) | ||
| 52 | + .autoPlay(true) | ||
| 53 | + .interval(3000) | ||
| 54 | + .indicator(false) | ||
| 55 | + .vertical(true) | ||
| 56 | + } | ||
| 57 | + }.width('257lpx') | ||
| 58 | + .height('61lpx') | ||
| 59 | + .padding({left:'31lpx'}) | ||
| 60 | + .backgroundImage($r('app.media.background_search')) | ||
| 61 | + .backgroundImageSize(ImageSize.Cover) | ||
| 62 | + .alignItems(VerticalAlign.Center) | ||
| 63 | + } | ||
| 64 | + | ||
| 65 | +} |
| 1 | + | ||
| 2 | +import { Logger, ResourcesUtils } from 'wdKit'; | ||
| 3 | +import { HttpUrlUtils, ResponseDTO, WDHttp } from 'wdNetwork'; | ||
| 4 | +import HashMap from '@ohos.util.HashMap'; | ||
| 5 | +const TAG = "SearcherAboutDataModel" | ||
| 6 | + | ||
| 7 | +/** | ||
| 8 | + * 我的页面 所有数据 获取封装类 | ||
| 9 | + */ | ||
| 10 | +class SearcherAboutDataModel{ | ||
| 11 | + private static instance: SearcherAboutDataModel; | ||
| 12 | + | ||
| 13 | + private constructor() { } | ||
| 14 | + | ||
| 15 | + /** | ||
| 16 | + * 单例模式 | ||
| 17 | + * @returns | ||
| 18 | + */ | ||
| 19 | + public static getInstance(): SearcherAboutDataModel { | ||
| 20 | + if (!SearcherAboutDataModel.instance) { | ||
| 21 | + SearcherAboutDataModel.instance = new SearcherAboutDataModel(); | ||
| 22 | + } | ||
| 23 | + return SearcherAboutDataModel.instance; | ||
| 24 | + } | ||
| 25 | + | ||
| 26 | + /** | ||
| 27 | + * 首页 搜索提示滚动内容 | ||
| 28 | + */ | ||
| 29 | + getSearchHintData(context: Context): Promise<string[]> { | ||
| 30 | + return new Promise<string[]>((success, error) => { | ||
| 31 | + Logger.info(TAG, `getSearchHintData start`); | ||
| 32 | + this.fetchSearchHintData().then((navResDTO: ResponseDTO<string[]>) => { | ||
| 33 | + if (!navResDTO || navResDTO.code != 0) { | ||
| 34 | + success(this.getSearchHintDataLocal(context)) | ||
| 35 | + return | ||
| 36 | + } | ||
| 37 | + Logger.info(TAG, "getSearchHintData then,SearchHintDataResDTO.timeStamp:" + navResDTO.timestamp); | ||
| 38 | + let navigationBean = navResDTO.data as string[] | ||
| 39 | + success(navigationBean); | ||
| 40 | + }).catch((err: Error) => { | ||
| 41 | + Logger.error(TAG, `fetchSearchHintData catch, error.name : ${err.name}, error.message:${err.message}`); | ||
| 42 | + success(this.getSearchHintDataLocal(context)) | ||
| 43 | + }) | ||
| 44 | + }) | ||
| 45 | + } | ||
| 46 | + | ||
| 47 | + fetchSearchHintData() { | ||
| 48 | + let url = HttpUrlUtils.getSearchHintDataUrl() | ||
| 49 | + let headers: HashMap<string, string> = HttpUrlUtils.getCommonHeaders(); | ||
| 50 | + return WDHttp.get<ResponseDTO<string[]>>(url, headers) | ||
| 51 | + }; | ||
| 52 | + | ||
| 53 | + async getSearchHintDataLocal(context: Context): Promise<string[]> { | ||
| 54 | + Logger.info(TAG, `getSearchHintDataLocal start`); | ||
| 55 | + let compRes: ResponseDTO<string[]> | null = await ResourcesUtils.getResourcesJson<ResponseDTO<string[]>>(context,'search_hint_data.json' ); | ||
| 56 | + if (!compRes || !compRes.data) { | ||
| 57 | + Logger.info(TAG, `getSearchHintDataLocal compRes is empty`); | ||
| 58 | + return [] | ||
| 59 | + } | ||
| 60 | + Logger.info(TAG, `getSearchHintDataLocal compRes : ${JSON.stringify(compRes)}`); | ||
| 61 | + return compRes.data | ||
| 62 | + } | ||
| 63 | + | ||
| 64 | + | ||
| 65 | + | ||
| 66 | +} | ||
| 67 | + | ||
| 68 | +const searcherAboutDataModel = SearcherAboutDataModel.getInstance() | ||
| 69 | +export default searcherAboutDataModel as SearcherAboutDataModel |
-
Please register or login to post a comment