diff --git a/scenario/arkui/MyShopping/README.md b/scenario/arkui/MyShopping/README.md new file mode 100644 index 0000000000000000000000000000000000000000..d45737a0eb5cff43b97e569c182ab032e52eb348 --- /dev/null +++ b/scenario/arkui/MyShopping/README.md @@ -0,0 +1,28 @@ +# 购物app + +## 介绍 + +本示例主要模拟主流购物应用，使用 ArkUI 的组件实现应用的布局、动效等，复制应用的界面及交互，以此测试 ArkUI +是否足够支持主流购物应用的 UX 实现，以及是否存在问题; + +## 效果预览 + +![img.png](screenshots/shoppingApp.jpg) + +## 工程目录 + +```text +./entry/src/main/ +├─ets +│ ├─entryability +│ │ EntryAbility.ets // 入口 +│ ├─pages +│ │ │─components +│ │ │ │─classification // 自定义组件:分类 +│ │ │ │─contentPlate // 自定义组件：内容板块 +│ │ │ │─homeTab // 自定义组件：主页tab +│ │ Index.ets +``` + +## TODO + diff --git a/scenario/arkui/MyShopping/entry/src/main/ets/data/WaterFlowDataSource.ets b/scenario/arkui/MyShopping/entry/src/main/ets/data/WaterFlowDataSource.ets index 28deb522bfc04dfca147ebd67a9953d216158112..e9dbd957bb124a528b12c3b736dbcd0a2507bc79 100644 --- a/scenario/arkui/MyShopping/entry/src/main/ets/data/WaterFlowDataSource.ets +++ b/scenario/arkui/MyShopping/entry/src/main/ets/data/WaterFlowDataSource.ets @@ -12,25 +12,16 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - -export class DataInfo { - type!:string - src!:string[] -} +import { merchandise } from '../data/merchandise' +import { MerchandiseList } from '../dataModel/merchandise' // 实现IDataSource接口的对象，用于瀑布流组件加载数据 export class WaterFlowDataSource implements IDataSource { private listeners: DataChangeListener[] = [] // 获取索引对应的数据 - public getData(index: number): DataInfo { - if (index === 0) { - return { type: "video", src: ["H264_AAC.mp4"] } - } else if (index === 10) { - return { type: "swiper", src: ["autoimage0.jpg", "autoimage1.jpg"] } - } else { - return { type: "img", src: ["autoimage" + index + ".jpg"] } - } + public getData(index: number): MerchandiseList { + return merchandise[index] } // 获取数据总数 diff --git a/scenario/arkui/MyShopping/entry/src/main/ets/data/merchandise.ets b/scenario/arkui/MyShopping/entry/src/main/ets/data/merchandise.ets new file mode 100644 index 0000000000000000000000000000000000000000..803f7a0797c1e80abeeb853e2b81fb80094b6502 --- /dev/null +++ b/scenario/arkui/MyShopping/entry/src/main/ets/data/merchandise.ets @@ -0,0 +1,110 @@ +/* + * Copyright (c) 2023-2024 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { MerchandiseList } from '../dataModel/merchandise' + +export const merchandise:MerchandiseList[] = [ + { + type:'image', + img:$r('app.media.flower'), + title:"电视机", + price:'￥20' + }, + { + type:'image', + img:$r('app.media.flower'), + title:"电视机", + price:'￥20' + }, + { + type:'image', + img:$r('app.media.flower'), + title:"电视机", + price:'￥20' + }, + { + type:'image', + img:$r('app.media.flower'), + title:"电视机", + price:'￥20' + }, + { + type:'image', + img:$r('app.media.flower'), + title:"电视机", + price:'￥20' + }, + { + type:'image', + img:$r('app.media.flower'), + title:"电视机", + price:'￥20' + }, + { + type:'image', + img:$r('app.media.flower'), + title:"电视机", + price:'￥20' + }, + { + type:'image', + img:$r('app.media.flower'), + title:"电视机", + price:'￥20' + }, + { + type:'image', + img:$r('app.media.flower'), + title:"电视机", + price:'￥20' + }, + { + type:'image', + img:$r('app.media.flower'), + title:"电视机", + price:'￥20' + }, + { + type:'image', + img:$r('app.media.flower'), + title:"电视机", + price:'￥20' + }, + { + type:'image', + img:$r('app.media.flower'), + title:"电视机", + price:'￥20' + }, + { + type:'image', + img:$r('app.media.flower'), + title:"电视机", + price:'￥20' + }, + { + type:'image', + img:$r('app.media.flower'), + title:"电视机", + price:'￥20' + }, + { + type:'image', + img:$r('app.media.flower'), + title:"电视机", + price:'￥20' + }, + +] \ No newline at end of file diff --git a/scenario/arkui/MyShopping/entry/src/main/ets/dataModel/merchandise.ets b/scenario/arkui/MyShopping/entry/src/main/ets/dataModel/merchandise.ets new file mode 100644 index 0000000000000000000000000000000000000000..e869991d5774413d7f4bb6852de9bcc3ddfd5bea --- /dev/null +++ b/scenario/arkui/MyShopping/entry/src/main/ets/dataModel/merchandise.ets @@ -0,0 +1,25 @@ +/* + * Copyright (c) 2023-2024 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * Type definition for the merchandise in `Home - content`. + * `首页-内容板块` 中商品的类型定义。 + */ +export interface MerchandiseList { + type:string + img:Resource + title:string + price:string +} \ No newline at end of file diff --git a/scenario/arkui/MyShopping/entry/src/main/ets/pages/Index.ets b/scenario/arkui/MyShopping/entry/src/main/ets/pages/Index.ets index ed2d147fb935ac82b3d7a5e34614e098911c05cc..4dfc063d10db5f56a6016e0fb7e529eb30fbf250 100644 --- a/scenario/arkui/MyShopping/entry/src/main/ets/pages/Index.ets +++ b/scenario/arkui/MyShopping/entry/src/main/ets/pages/Index.ets @@ -13,45 +13,42 @@ * limitations under the License. */ -import { Home } from './components/myapp/Home'; +import { Home } from './components/homeTab/Home'; import matrix4 from '@ohos.matrix4' + @Entry @Component struct Index { @State tabsIndex: number = 0 + private homeTab: Array> = [ + [$r('app.media.ic_tabbar_home'), $r('app.media.ic_tabbar_home'), $r('app.string.tabbar_home')], + [$r('app.media.ic_web'), $r('app.media.ic_web'), $r('app.string.tabbar_guang')], + [$r('app.media.ic_select_component'), $r('app.media.ic_select_component'), $r('app.string.tabbar_new')], + [$r('app.media.ic_select_universal'), $r('app.media.ic_select_universal'), $r('app.string.tabbar_cart')], + [$r('app.media.ic_user'), $r('app.media.ic_user'), $r('app.string.tabbar_mine')] + ] build() { - Tabs({ barPosition: BarPosition.End }) { - TabContent() { - Home({ title: $r('app.string.tabbar_home') }) - }.tabBar(this.TabBarBuilder(0, $r('app.media.ic_tabbar_home'), $r('app.media.ic_tabbar_home'), $r('app.string.tabbar_home'))) - - TabContent() { - Home({ title: $r('app.string.tabbar_home') }) - }.tabBar(this.TabBarBuilder(1, $r('app.media.ic_web'), $r('app.media.ic_web'), $r('app.string.tabbar_guang'))) - - TabContent() { - Home({ title: $r('app.string.tabbar_home') }) - }.tabBar(this.TabBarBuilder(2, $r('app.media.ic_select_component'), $r('app.media.ic_select_component'), $r('app.string.tabbar_new'))) - - TabContent() { - Home({ title: $r('app.string.tabbar_home') }) - }.tabBar(this.TabBarBuilder(3, $r('app.media.ic_select_universal'), $r('app.media.ic_select_universal'), $r('app.string.tabbar_cart'))) - - TabContent() { - Home({ title: $r('app.string.tabbar_home') }) - }.tabBar(this.TabBarBuilder(4, $r('app.media.ic_user'), $r('app.media.ic_user'), $r('app.string.tabbar_mine'))) + Column() { + Tabs({ barPosition: BarPosition.End }) { + ForEach(this.homeTab, (item: Array, index: number) => { + TabContent() { + Home({ title: $r('app.string.tabbar_home') }) + }.tabBar(this.TabBarBuilder(index, item[0], item[1], item[2])) + }, (item: string) => item) + } + .barHeight(56) + .barWidth('100%') + .vertical(false) + .backgroundColor($r('app.color.background_shallow_grey')) + .onChange((index: number) => { + this.tabsIndex = index + }) } - .barHeight(56) - .barWidth('100%') - .vertical(false) - .backgroundColor($r('app.color.background_shallow_grey')) - .onChange((index: number) => { - this.tabsIndex = index - }) } - @Builder TabBarBuilder(index: number, selectedImage: Resource, unselectedImage: Resource, tabBarName: Resource) { + @Builder + TabBarBuilder(index: number, selectedImage: Resource, unselectedImage: Resource, tabBarName: Resource) { Column() { if (this.tabsIndex === index) { Image(selectedImage) diff --git a/scenario/arkui/MyShopping/entry/src/main/ets/pages/components/classification/classification.ets b/scenario/arkui/MyShopping/entry/src/main/ets/pages/components/classification/classification.ets new file mode 100644 index 0000000000000000000000000000000000000000..8e0719ef66121171909bee14685a8547887830ee --- /dev/null +++ b/scenario/arkui/MyShopping/entry/src/main/ets/pages/components/classification/classification.ets @@ -0,0 +1,36 @@ +/* + * Copyright (c) 2023-2024 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Component +export struct Classification { + @State fontColor: string = '#182431' + + build() { + // 推荐商品滚动banner + Row() { + Image($r('app.media.ic_list_and_grid')) + .width(20) + .height(20) + .objectFit(ImageFit.Fill) + Text('分类') + .fontColor(this.fontColor) + .fontSize(16) + .fontWeight(500) + }.width('13%') + .zIndex(2) + .margin({ bottom: 620, left: 285 }) + .backgroundColor('#F1F3F5') + } +} \ No newline at end of file diff --git a/scenario/arkui/MyShopping/entry/src/main/ets/pages/components/contentPlate/banner.ets b/scenario/arkui/MyShopping/entry/src/main/ets/pages/components/contentPlate/banner.ets new file mode 100644 index 0000000000000000000000000000000000000000..378c7ec6e7f4b702f59f5bf90c805558ab76fa2e --- /dev/null +++ b/scenario/arkui/MyShopping/entry/src/main/ets/pages/components/contentPlate/banner.ets @@ -0,0 +1,37 @@ +/* + * Copyright (c) 2023-2024 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Component +export struct Banner { + + build() { + // 推荐商品滚动banner + Row() { + Column() { + Image($r('app.media.test01'))//.margin({ left: 9 }) + .objectFit(ImageFit.Contain) + }.width('25%') + + Column() { + Image($r('app.media.ic_scenery3')).objectFit(ImageFit.Contain) + }.width('50%') + + Column() { + Image($r('app.media.test02'))//.margin({ left: 9 }) + .objectFit(ImageFit.Contain) + }.width('25%') + }.height(80) + } +} \ No newline at end of file diff --git a/scenario/arkui/MyShopping/entry/src/main/ets/pages/components/contentPlate/content.ets b/scenario/arkui/MyShopping/entry/src/main/ets/pages/components/contentPlate/content.ets new file mode 100644 index 0000000000000000000000000000000000000000..70635f5ae955c1e21bbc6a5d9908a4a2c7721159 --- /dev/null +++ b/scenario/arkui/MyShopping/entry/src/main/ets/pages/components/contentPlate/content.ets @@ -0,0 +1,232 @@ +/* + * Copyright (c) 2023-2024 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { WaterFlowDataSource } from '../../../data/WaterFlowDataSource' +import { MerchandiseList } from '../../../dataModel/merchandise' + +@Component +export struct Content { + datasource: WaterFlowDataSource = new WaterFlowDataSource() + private verbTab: Array> = [ + [$r('app.media.ic_event_area_change'), $r('app.string.app_market')], + [$r('app.media.ic_event_area_change'), $r('app.string.app_medicine')], + [$r('app.media.ic_event_area_change'), $r('app.string.app_secKill')], + [$r('app.media.ic_event_area_change'), $r('app.string.app_voucher')], + [$r('app.media.ic_event_area_change'), $r('app.string.app_home')], + [$r('app.media.ic_event_area_change'), $r('app.string.app_dress_and_make_up')], + [$r('app.media.ic_event_area_change'), $r('app.string.app_domestic_appliance')], + [$r('app.media.ic_event_area_change'), $r('app.string.app_charge_center')], + [$r('app.media.ic_event_area_change'), $r('app.string.app_borrow_money')], + [$r('app.media.ic_event_area_change'), $r('app.string.app_electric_appliance')], + ] + private verbTabId:Array = [ + 'content_image_001', + 'content_image_002', + 'content_image_003', + 'content_image_004', + 'content_image_005', + 'content_image_006', + 'content_image_007', + 'content_image_008', + 'content_image_009', + 'content_image_010', + ] + + build() { + // 功能栏 （领红包、汪汪乐园、签到提现、1分抽奖、充值中心） + Column() { + Column() { + Row({space:20}) { + ForEach(this.verbTab.slice(0,5), (item: Array, index: number) => { + Column() { + Image(item[0]) + .height(40) + .objectFit(ImageFit.Contain) + .id(this.verbTabId[index]) + Text(item[1]).fontSize(12) + }.margin({ left: 10 }) + }, (item: string) => item) + } + .margin({ top: 5 }) + .width('100%') + .height('60') + .backgroundColor(Color.White) + .borderRadius(10) + .justifyContent(FlexAlign.SpaceEvenly) + + Row({space:20}) { + ForEach(this.verbTab.slice(5,this.verbTab.length), (item: Array, index: number) => { + Column() { + Image(item[0]) + .height(40) + .objectFit(ImageFit.Contain) + .id(this.verbTabId[index]) + Text(item[1]).fontSize(12) + }.margin({ left: 10 }) + }, (item: string) => item) + } + .width('100%') + .height('60') + .backgroundColor(Color.White) + .borderRadius(10) + .justifyContent(FlexAlign.SpaceEvenly) + + // 中部banner 活动跳转banner + Row() { + Image($r('app.media.banner')) + .width('100%') + .objectFit(ImageFit.Contain) + }.margin({ top: 5 }) + + // 低价商品推荐栏 + Row() { + // 9.9包邮活动页入口 + Column() { + Image($r('app.media.ic_99baoyou')) + .height(80) + .objectFit(ImageFit.Contain) + Row() { + Text('去抢购').fontSize(14).margin({ left: 5 }) + Blank() + Column() { + Image($r('app.media.ic_right_arrow')).height(20) + }.width(20).backgroundColor(Color.Red).borderRadius('50').margin({ right: 5 }) + }.backgroundColor(Color.White).borderRadius(16).height(30).width('100%') + }.width('25%').padding({ left: 5, right: 5 }) + + // 低价商品推荐位 + Column() { + Row() { + Column() { + Image($r('app.media.ic_99_notebook')) + .objectFit(ImageFit.Contain) + + Text('¥1337').fontSize(20).fontColor(Color.Red).margin({ bottom: 5 }) + }.width('25%') + + Column() { + Image($r('app.media.ic_99_paper')) + .objectFit(ImageFit.Contain) + + Text('¥1').fontSize(20).fontColor(Color.Red).margin({ bottom: 5 }) + }.width('25%') + + Column() { + Image($r('app.media.ic_99_toy')) + .objectFit(ImageFit.Contain) + + Text('¥24.6').fontSize(20).fontColor(Color.Red).margin({ bottom: 5 }) + }.width('25%') + + Column() { + Image($r('app.media.ic_99_water')) + .objectFit(ImageFit.Contain) + + Text('¥9').fontSize(20).fontColor(Color.Red).margin({ bottom: 5 }) + }.width('25%') + }.height('70%').width('100%').justifyContent(FlexAlign.SpaceEvenly) + }.width('75%').borderRadius(24).backgroundColor(Color.White).height('100%') + } + .height(130) + .borderRadius(24) + .backgroundColor(Color.Red) + .margin({ top: 5 }) + .padding(1) + + // 活动栏 + Row() { + Column() { + Row() { + Text('百亿补贴').fontSize(17).margin({ right: 8 }) + Text('买贵双倍赚').fontColor(Color.Red) + }.width('100%').padding({ left: 10, top: 10 }).alignItems(VerticalAlign.Bottom) + + Row() { + Column() { + Image($r('app.media.ic_butie1')) + .objectFit(ImageFit.Contain) + + Text('¥1').fontSize(20).fontColor(Color.Red).margin({ bottom: 3 }) + }.width('48%').height('60%') + + Blank() + Column() { + Image($r('app.media.ic_butie2')) + .objectFit(ImageFit.Contain) + + Text('¥1').fontSize(20).fontColor(Color.Red).margin({ bottom: 3 }) + }.width('48%').height('60%').padding({ left: 5, right: 5 }) + } + }.width('49%').height('100%').borderRadius(16).backgroundColor(Color.White) + + Blank() + Column() { + Row() { + Text('京东秒杀').fontSize(17) + }.width('100%').padding({ left: 10, top: 10 }) + + Row() { + Column() { + Image($r('app.media.ic_miaosha1')) + .objectFit(ImageFit.Contain) + + Text('¥1').fontSize(20).fontColor(Color.Red).margin({ bottom: 3 }) + }.width('48%').height('60%') + + Blank() + Column() { + Image($r('app.media.ic_miaosha2')) + .objectFit(ImageFit.Contain) + + Text('¥1').fontSize(20).fontColor(Color.Red).margin({ bottom: 3 }) + }.width('48%').height('60%').padding({ left: 5, right: 5 }) + } + }.width('49%').height('100%').borderRadius(16).backgroundColor(Color.White) + }.height(160).margin({ top: 5 }).width('100%') + + Column({ space: 2 }) { + WaterFlow({}) { + LazyForEach(this.datasource, (item: MerchandiseList, idx: number) => { + FlowItem() { + Column() { + Image(item.img).objectFit(ImageFit.Fill).height(100).width('100%') + Row(){ + Text(item.title).fontSize(12).height('16') + Text(item.price).fontSize(12).height('16') + }.justifyContent(FlexAlign.SpaceBetween) + } + } + .width('100%') + .border({width:1}) + }) + } + .alignSelf(ItemAlign.Center) + .columnsTemplate('1fr 1fr') + .layoutDirection(FlexDirection.Column) + .columnsGap(12) + .rowsGap(12) + .height('100%') + .width('100%') + .padding({ left: 12, right: 12, top: 12, bottom: 12 }) + .backgroundColor(Color.White) + .nestedScroll({ + scrollForward: NestedScrollMode.PARENT_FIRST, + scrollBackward: NestedScrollMode.SELF_FIRST + }) + }.width('100%') + }.width('95%') + }.width('100%').backgroundColor($r('app.color.background_shallow_grey')) + } +} \ No newline at end of file diff --git a/scenario/arkui/MyShopping/entry/src/main/ets/pages/components/homeTab/Home.ets b/scenario/arkui/MyShopping/entry/src/main/ets/pages/components/homeTab/Home.ets new file mode 100644 index 0000000000000000000000000000000000000000..fbbd5d574a71379e42af0a41433435308fe72416 --- /dev/null +++ b/scenario/arkui/MyShopping/entry/src/main/ets/pages/components/homeTab/Home.ets @@ -0,0 +1,187 @@ +/* + * Copyright (c) 2023-2024 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import promptAction from '@ohos.promptAction' +import { WaterFlowDataSource } from '../../../data/WaterFlowDataSource' +import { Banner } from '../contentPlate/banner' +import { Content } from '../contentPlate/content' +import { Classification } from '../Classification/classification' + +@Component +export struct Home { + private title!: Resource; + @State scroll_direction: ScrollDirection = ScrollDirection.Horizontal + private menumargin: number = 10 + private controller: TabsController = new TabsController() + @State fontColor: string = '#182431' + @State selectedFontColor: string = '#007DFF' + @State currentIndex: number = 0 + + @Builder + tabBuilder(index: number, name: string) { + Column() { + Text(name) + .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor) + .fontSize(16) + .fontWeight(this.currentIndex === index ? 500 : 400) + .lineHeight(22) + .margin({ left: 5, top: 17, bottom: 10, right: 5 }) + } + } + + datasource: WaterFlowDataSource = new WaterFlowDataSource() + + build() { + Column() { + Column() { + // 顶部 用户头像 消息图标 + Row() { + Image($r('app.media.flower')) + .id("home_image_01") + .height(30) + .objectFit(ImageFit.Contain) + .onClick(() => { + promptAction.showToast({ + message: 'click on banner', + duration: 2000, + }) + }) + Blank() + Image($r('app.media.ic_public_community_messages')) + .height(30) + .margin({ right: 6 }) + .id("home_image_02") + } + .height(56) + .width('95%') + + // 搜索功能框 + Row() { + Image($r('app.media.ic_public_scan')) + .height(30) + .margin({ left: 9 }) + .objectFit(ImageFit.Contain) + .id("home_image_03") + Divider() + .margin({ left: 9 }) + .vertical(true) + .height(26) + .color(Color.Grey) + .width(3) + Image($r('app.media.ic_public_camera')) + .height(30) + .margin({ left: 9 }) + .objectFit(ImageFit.Contain) + .id("home_image_04") + TextInput({ placeholder: '遥遥领先' }) + .backgroundColor(Color.White) + .width(135) + .defaultFocus(false) + Blank() + Column() { + Text('搜索').fontColor(Color.White).fontSize(24) + } + .width(110) + .height(50) + .borderRadius(24) + .backgroundColor(Color.Red) + .justifyContent(FlexAlign.Center) + .margin({ right: 3 }) + } + .height(56) + .width('95%') + .backgroundColor(Color.White) + .borderRadius(24) + .padding({ right: 4 }) + + // 内容板块 + Column() { + Stack() { + Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) { + TabContent() { + Scroll() { + Column() { + // 推荐商品滚动banner + Banner() + // 功能栏 （领红包、汪汪乐园、签到提现、1分抽奖、充值中心） + Content() + } + } + }.tabBar(this.tabBuilder(0, '推荐')) + + TabContent() { + Column() { + // 推荐商品滚动banner + Banner() + // 功能栏 （领红包、汪汪乐园、签到提现、1分抽奖、充值中心） + Content() + } + }.tabBar(this.tabBuilder(1, '酒水饮料')) + + TabContent() { + Column().width('100%').height('100%').backgroundColor('#FFBF00') + }.tabBar(this.tabBuilder(2, '母婴童装')) + + TabContent() { + Column().width('100%').height('100%').backgroundColor('#E67C92') + }.tabBar(this.tabBuilder(3, '推荐')) + + TabContent() { + Column().width('100%').height('100%').backgroundColor('#E67C92') + }.tabBar(this.tabBuilder(4, '食品')) + + TabContent() { + Column().width('100%').height('100%').backgroundColor('#E67C92') + }.tabBar(this.tabBuilder(5, '手机')) + + TabContent() { + Column().width('100%').height('100%').backgroundColor('#E67C92') + }.tabBar(this.tabBuilder(6, '生鲜')) + + TabContent() { + Column().width('100%').height('100%').backgroundColor('#E67C92') + }.tabBar(this.tabBuilder(7, '电脑')) + + TabContent() { + Column().width('100%').height('100%').backgroundColor('#E67C92') + }.tabBar(this.tabBuilder(8, '女装')) + + TabContent() { + Column().width('100%').height('100%').backgroundColor('#E67C92') + }.tabBar(this.tabBuilder(9, '数码')) + } + .scrollable(true) + .vertical(false) + .barMode(BarMode.Scrollable) + .barWidth(320) + .barHeight(56) + .animationDuration(400) + .onChange((index: number) => { + this.currentIndex = index + }) + .fadingEdge(true) + .width('100%') + .margin({ top: 20 }) + .backgroundColor('#F1F3F5') + .zIndex(1) + + Classification() + + }.width('100%') + }.width('98%') + } + }.width('100%').backgroundColor($r('app.color.home_banner_color')) + } +} \ No newline at end of file diff --git a/scenario/arkui/MyShopping/entry/src/main/ets/pages/components/myapp/Home.ets b/scenario/arkui/MyShopping/entry/src/main/ets/pages/components/myapp/Home.ets deleted file mode 100644 index 59b692cffb2f0c0f9a3f6b025c6c281cb5dfa5a4..0000000000000000000000000000000000000000 --- a/scenario/arkui/MyShopping/entry/src/main/ets/pages/components/myapp/Home.ets +++ /dev/null @@ -1,344 +0,0 @@ -/* - * Copyright (c) 2023-2024 Shenzhen Kaihong Digital Industry Development Co., Ltd. - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import promptAction from '@ohos.promptAction' -import { WaterFlowDataSource, DataInfo } from '../../../data/WaterFlowDataSource' - -@Component -export struct Home { - private title!: Resource; - @State scroll_direction: ScrollDirection = ScrollDirection.Horizontal - private menumargin: number = 10 - - datasource: WaterFlowDataSource = new WaterFlowDataSource() - - build() { - Column() { - Column() { - Row() { - Image($r('app.media.flower')) - .height(30) - .objectFit(ImageFit.Contain) - .id('backBtn') - .onClick(()=>{ - promptAction.showToast({ - message: 'click on banner', - duration: 2000, - }) - }) - Blank() - Image($r('app.media.ic_public_community_messages')) - .height(30) - .margin({right:6}) - } - .height(56) - .width('95%') - - Row() { - Image($r('app.media.ic_public_scan')) - .height(30) - .margin({ left: 9}) - .objectFit(ImageFit.Contain) - Divider().margin({left:9}).vertical(true).height(26).color(Color.Grey).width(3) - Image($r('app.media.ic_public_camera')) - .height(30) - .margin({ left: 9 }) - .objectFit(ImageFit.Contain) - TextInput({placeholder:'遥遥领先'}) - .backgroundColor(Color.White) - .width(135) - .defaultFocus(false) - Blank() - Column() { - Text('搜索').fontColor(Color.White).fontSize(24) - }.width(110).height(50).borderRadius(24).backgroundColor(Color.Red).justifyContent(FlexAlign.Center).margin({right:3}) - }.height(56).width('95%').backgroundColor(Color.White).borderRadius(24).padding({right:4}) - - Scroll() { - Column() { - Row() { - Column() { - Scroll() { - Row() { - Text('精选').fontSize(28) - Text('酒水饮料').margin({left:this.menumargin}) - Text('母婴童装').margin({left:this.menumargin}) - Text('推荐').margin({left:this.menumargin}) - Text('食品').margin({left:this.menumargin}) - Text('手机').margin({left:this.menumargin}) - Text('生鲜').margin({left:this.menumargin}) - Text('电脑').margin({left:this.menumargin}) - Text('女装').margin({left:this.menumargin}) - Text('数码').margin({left:this.menumargin}) - } - }.width('100%').scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off) - }.width('80%') - Column(){ - Row() { - Image($r('app.media.ic_list_and_grid')) - .width(20) - .height(20) - .objectFit(ImageFit.Fill) - Text('分类') - } - }.width('20%') - }.height(50).width('95%') - - Row() { - Column(){ - Image($r('app.media.test01')) - //.margin({ left: 9 }) - .objectFit(ImageFit.Contain) - }.width('25%') - Column(){ - Image($r('app.media.ic_scenery3')).objectFit(ImageFit.Contain) - }.width('50%') - Column(){ - Image($r('app.media.test02')) - //.margin({ left: 9 }) - .objectFit(ImageFit.Contain) - }.width('25%') - }.height(80) - - Column() { - Column() { - Row() { - Column() { - Image($r('app.media.ic_event_area_change')) - .height(40) - //.margin({ left: 9 }) - .objectFit(ImageFit.Contain) - Text('领红包 ').fontSize(12) - }.margin({ left: 10 }) - - Column() { - Image($r('app.media.ic_event_drag')) - .height(40) - //.margin({ left: 9 }) - .objectFit(ImageFit.Contain) - - Text('汪汪乐园').fontSize(12) - } - - Column() { - Image($r('app.media.ic_event_focus')) - .height(40) - //.margin({ left: 9 }) - .objectFit(ImageFit.Contain) - - Text('签到提现').fontSize(12) - } - - Column() { - Image($r('app.media.ic_event_load_and_hide')) - .height(40) - //.margin({ left: 9 }) - .objectFit(ImageFit.Contain) - - Text('1分抽奖').fontSize(12) - } - - Column() { - Image($r('app.media.ic_event_mouse')) - .height(40) - //.margin({ left: 9 }) - .objectFit(ImageFit.Contain) - - Text('充值中心').fontSize(12) - }.margin({ right: 10 }) - } - .margin({ top: 5 }) - .width('100%') - .height('60') - .backgroundColor(Color.White) - .borderRadius(10) - .justifyContent(FlexAlign.SpaceEvenly) - - Row() { - Image($r('app.media.banner')) - .width('100%') - //.margin({ left: 9 }) - .objectFit(ImageFit.Contain) - }.margin({top:5}) - - Row() { - Column() { - Image($r('app.media.ic_99baoyou')) - .height(80) - //.margin({ left: 9 }) - .objectFit(ImageFit.Contain) - Row() { - Text('去抢购').fontSize(14).margin({ left: 5 }) - Blank() - Column() { - Image($r('app.media.ic_right_arrow')).height(20) - }.width(20).backgroundColor(Color.Red).borderRadius('50').margin({ right: 5 }) - }.backgroundColor(Color.White).borderRadius(16).height(30).width('100%') - }.width('25%').padding({ left: 5, right: 5 }) - - Column() { - Row() { - Column() { - Image($r('app.media.ic_99_notebook')) - //.width('25%') - //.margin({ left: 9 }) - .objectFit(ImageFit.Contain) - - Text('¥1337').fontSize(20).fontColor(Color.Red).margin({ bottom: 5 }) - }.width('25%') - - Column() { - Image($r('app.media.ic_99_paper')) - - //.margin({ left: 9 }) - .objectFit(ImageFit.Contain) - - Text('¥1').fontSize(20).fontColor(Color.Red).margin({ bottom: 5 }) - }.width('25%') - - Column() { - Image($r('app.media.ic_99_toy')) - - //.margin({ left: 9 }) - .objectFit(ImageFit.Contain) - - Text('¥24.6').fontSize(20).fontColor(Color.Red).margin({ bottom: 5 }) - }.width('25%') - - Column() { - Image($r('app.media.ic_99_water')) - - //.margin({ left: 9 }) - .objectFit(ImageFit.Contain) - - Text('¥9').fontSize(20).fontColor(Color.Red).margin({ bottom: 5 }) - }.width('25%') - }.height('70%').width('100%').justifyContent(FlexAlign.SpaceEvenly) - }.width('75%').borderRadius(24).backgroundColor(Color.White).height('100%') - } - .height(130) - .borderRadius(24) - .backgroundColor(Color.Red) - .margin({top:5}) - .padding(1) - - Row() { - Column() { - Row() { - Text('百亿补贴').fontSize(17).margin({ right: 8 }) - Text('买贵双倍赚').fontColor(Color.Red) - }.width('100%').padding({ left: 10, top: 10 }).alignItems(VerticalAlign.Bottom) - - Row() { - Column() { - Image($r('app.media.ic_butie1')) - - //.margin({ left: 9 }) - .objectFit(ImageFit.Contain) - - Text('¥1').fontSize(20).fontColor(Color.Red).margin({ bottom: 3 }) - }.width('48%').height('60%') - - Blank() - Column() { - Image($r('app.media.ic_butie2')) - - //.margin({ left: 9 }) - .objectFit(ImageFit.Contain) - - Text('¥1').fontSize(20).fontColor(Color.Red).margin({ bottom: 3 }) - }.width('48%').height('60%').padding({ left: 5, right: 5 }) - } - }.width('49%').height('100%').borderRadius(16).backgroundColor(Color.White) - - Blank() - Column() { - Row() { - Text('京东秒杀').fontSize(17) - }.width('100%').padding({ left: 10, top: 10 }) - - Row() { - Column() { - Image($r('app.media.ic_miaosha1')) - - //.margin({ left: 9 }) - .objectFit(ImageFit.Contain) - - Text('¥1').fontSize(20).fontColor(Color.Red).margin({ bottom: 3 }) - }.width('48%').height('60%') - - Blank() - Column() { - Image($r('app.media.ic_miaosha2')) - - //.margin({ left: 9 }) - .objectFit(ImageFit.Contain) - - Text('¥1').fontSize(20).fontColor(Color.Red).margin({ bottom: 3 }) - }.width('48%').height('60%').padding({ left: 5, right: 5 }) - } - }.width('49%').height('100%').borderRadius(16).backgroundColor(Color.White) - }.height(160).margin({ top: 5 }).width('100%') - - Row() { - WaterFlow({}) { - LazyForEach(this.datasource, (item:DataInfo, idx:number) => { - FlowItem() { - Column() { - Text(`${item.type}${idx}`).fontSize(12).height('16') - if (item.type === "video") { - Video({src:$rawfile(item.src[0])}) - .autoPlay(true) - .height(100) - .loop(true) - } else if (item.type === "swiper") { - Swiper(){ - ForEach(item.src, (img:string)=>{ - Image($rawfile(img)).objectFit(ImageFit.Fill).height(200) - }) - }.autoPlay(true) - } else if (idx % 4 == 0) { - Image($rawfile(item.src[0])).objectFit(ImageFit.Fill).height(100) - } else if (idx % 4 == 1) { - Image($rawfile(item.src[0])).objectFit(ImageFit.Fill).height(200) - } else if (idx % 4 == 2) { - Image($rawfile(item.src[0])).objectFit(ImageFit.Fill).height(240) - } else if (idx % 4 == 3) { - Image($rawfile(item.src[0])).objectFit(ImageFit.Fill).height(280) - } - }.backgroundColor(idx % 2 == 0 ? $r('app.color.background_green') : $r('app.color.font_color_red')) - } - .width('100%') - }) - } - .alignSelf(ItemAlign.Center) - .columnsTemplate('1fr 1fr 1fr') - .layoutDirection(FlexDirection.Column) - .columnsGap(12) - .rowsGap(12) - .height('100%') - .width('100%') - .padding({ left: 12, right: 12, top: 12, bottom: 12 }) - .backgroundColor(Color.White) - .nestedScroll({scrollForward:NestedScrollMode.PARENT_FIRST, scrollBackward:NestedScrollMode.SELF_FIRST}) - }.width('100%') - }.width('95%') - }.width('100%').backgroundColor($r('app.color.background_shallow_grey')) - } - }.width('100%').scrollBar(BarState.Off) - } - }.width('100%').backgroundColor($r('app.color.home_banner_color')) - } -} \ No newline at end of file diff --git a/scenario/arkui/MyShopping/entry/src/main/resources/base/element/string.json b/scenario/arkui/MyShopping/entry/src/main/resources/base/element/string.json index 4a3a37e23dcdba040a6390c5725a7fcd31d156c1..6603b7917ed0121d151efb0d02b8042c4853e423 100644 --- a/scenario/arkui/MyShopping/entry/src/main/resources/base/element/string.json +++ b/scenario/arkui/MyShopping/entry/src/main/resources/base/element/string.json @@ -31,6 +31,46 @@ { "name": "tabbar_mine", "value": "Mine" + }, { + "name": "app_market", + "value": "market" + }, + { + "name": "app_medicine", + "value": "medicine" + }, + { + "name": "app_secKill", + "value": "secKill" + }, + { + "name": "app_voucher", + "value": "voucher" + }, + { + "name": "app_home", + "value": "home" + }, + { + "name": "app_dress_and_make_up", + "value": "dress_and_make_up" + }, + { + "name": "app_domestic_appliance", + "value": "domestic_appliance" + }, + { + "name": "app_charge_center", + "value": "charge_center" + }, + { + "name": "app_borrow_money", + "value": "borrow_money" + }, + { + "name": "app_electric_appliance", + "value": "electric_appliance" } + ] } \ No newline at end of file diff --git a/scenario/arkui/MyShopping/entry/src/main/resources/en_US/element/string.json b/scenario/arkui/MyShopping/entry/src/main/resources/en_US/element/string.json index f10f9d169665d08d7576d68425977e509e6371c6..a81ca9be964a66bf68b8111cbc354e7e3839f479 100644 --- a/scenario/arkui/MyShopping/entry/src/main/resources/en_US/element/string.json +++ b/scenario/arkui/MyShopping/entry/src/main/resources/en_US/element/string.json @@ -39,6 +39,46 @@ { "name": "tabbar_mine", "value": "Mine" + }, + { + "name": "app_market", + "value": "market" + }, + { + "name": "app_medicine", + "value": "medicine" + }, + { + "name": "app_secKill", + "value": "secKill" + }, + { + "name": "app_voucher", + "value": "voucher" + }, + { + "name": "app_home", + "value": "home" + }, + { + "name": "app_dress_and_make_up", + "value": "dress_and_make_up" + }, + { + "name": "app_domestic_appliance", + "value": "domestic_appliance" + }, + { + "name": "app_charge_center", + "value": "charge_center" + }, + { + "name": "app_borrow_money", + "value": "borrow_money" + }, + { + "name": "app_electric_appliance", + "value": "electric_appliance" } ] } \ No newline at end of file diff --git a/scenario/arkui/MyShopping/entry/src/main/resources/zh_CN/element/string.json b/scenario/arkui/MyShopping/entry/src/main/resources/zh_CN/element/string.json index 610f62ce90c2a92229d54eef69041d5b8d0f863f..da7288a81bf368f9fbb68a903e75b491bc78a165 100644 --- a/scenario/arkui/MyShopping/entry/src/main/resources/zh_CN/element/string.json +++ b/scenario/arkui/MyShopping/entry/src/main/resources/zh_CN/element/string.json @@ -31,6 +31,46 @@ { "name": "tabbar_mine", "value": "我的" + }, + { + "name": "app_market", + "value": "超市" + }, + { + "name": "app_medicine", + "value": "买药" + }, + { + "name": "app_secKill", + "value": "秒杀" + }, + { + "name": "app_voucher", + "value": "领券" + }, + { + "name": "app_home", + "value": "到家" + }, + { + "name": "app_dress_and_make_up", + "value": "服饰美妆" + }, + { + "name": "app_domestic_appliance", + "value": "家电家居" + }, + { + "name": "app_charge_center", + "value": "充值中心" + }, + { + "name": "app_borrow_money", + "value": "借钱" + }, + { + "name": "app_electric_appliance", + "value": "电器" } ] } \ No newline at end of file diff --git a/scenario/arkui/MyShopping/entry/src/ohosTest/ets/test/uiTestSuites/home.test.ets b/scenario/arkui/MyShopping/entry/src/ohosTest/ets/test/uiTestSuites/home.test.ets new file mode 100644 index 0000000000000000000000000000000000000000..423b84c69eed20b5feddeffc49a08906b821bfe0 --- /dev/null +++ b/scenario/arkui/MyShopping/entry/src/ohosTest/ets/test/uiTestSuites/home.test.ets @@ -0,0 +1,61 @@ +/* + * Copyright (c) 2023-2024 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium'; +import abilityDelegatorRegistry from '@ohos.app.ability.abilityDelegatorRegistry'; +import { Component, Driver, ON } from '@ohos.UiTest'; +import Want from '@ohos.app.ability.Want'; + +let delegator: abilityDelegatorRegistry.AbilityDelegator = abilityDelegatorRegistry.getAbilityDelegator() +let driver: Driver = Driver.create() + +export default function homePageTest() { + let tag = '[scenario_myShops_home]' + + describe('homePageTest', ()=> { + + beforeAll(async (done: Function) => { + console.log(`${tag}homePageTest begin`) + const want: Want = { + bundleName: 'com.samples.myshopping', + abilityName: 'EntryAbility' + } + try { + await delegator.startAbility(want) + await driver.delayMs(1000) + done() + } catch (exception) { + expect().assertFail() + done() + } + }) + + /** + * 拉起应用，进入首页 + */ + it('startAbility_001', 0, async (done: Function) => { + try { + //判断是否存在以下组件 + await driver.assertComponentExist(ON.id('home_image_01')) + + done() + } catch (err) { + console.log(`${tag}startAbility_001 catch err,err is: ${err.message}`) + expect().assertFail() + done() + } + }) + }) +} \ No newline at end of file diff --git a/scenario/arkui/MyShopping/screenshots/shoppingApp.jpg b/scenario/arkui/MyShopping/screenshots/shoppingApp.jpg new file mode 100644 index 0000000000000000000000000000000000000000..22ffe450cd2b62f6da8baec7d74fee7097b5949d Binary files /dev/null and b/scenario/arkui/MyShopping/screenshots/shoppingApp.jpg differ