add OrangeShopping

Signed-off-by: gwx1199412 <guojin30@huawei.com>

On branch guojin_feature

ETSUI/OrangeShopping/AppScope/app.json5

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2022 Huawei Device 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.
+ */
+
+{
+  "app": {
+    "bundleName": "ohos.samples.orangeshopping",
+    "vendor": "samples",
+    "versionCode": 1000000,
+    "versionName": "1.0.0",
+    "icon": "$media:app_icon",
+    "label": "$string:app_name",
+    "distributedNotificationEnabled": true,
+    "singleton": true
+  }
+}

ETSUI/OrangeShopping/AppScope/resources/base/element/string.json

@@ -0,0 +1,8 @@
+{
+  "string": [
+    {
+      "name": "app_name",
+      "value": "橘子购物"
+    }
+  ]
+}

ETSUI/OrangeShopping/AppScope/resources/en/element/string.json

@@ -0,0 +1,8 @@
+{
+  "string": [
+    {
+      "name": "app_name",
+      "value": "OrangeShopping"
+    }
+  ]
+}

ETSUI/OrangeShopping/AppScope/resources/zh/element/string.json

@@ -0,0 +1,8 @@
+{
+  "string": [
+    {
+      "name": "app_name",
+      "value": "橘子购物"
+    }
+  ]
+}

ETSUI/OrangeShopping/README_zh.md

@@ -0,0 +1,79 @@
+# 购物实例应用
+
+### 介绍
+
+本实例展示在进场时加载进场动画，整体使用**Tabs**容器设计应用框架，通过**TabContent**组件设置分页面，在子页面中绘制界面。在详情页中通过**Video**组件加载视频资源，使用**CustomDialogController**弹窗选择位置信息，点击首页及购物车返回主页面。
+
+本实例使用[Tabs容器](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md)实现通过页签进行内容视图切换。使用[自定义弹窗](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md)设置位置信息。使用[Swiper](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md)组件实现页面展示图轮播。使用[Grid](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md)容器组件设置展示的商品信息。
+
+使用说明：
+
+1、启动应用进入进场动画，然后进入首页的时候会有升级弹窗的提示，判断应用需不需要升级，整个应用分四部分，首页、新品、购物车、我的。可以点击进行切换。
+
+2、“首页”页面具有扫一扫功能、搜索框、轮播图、tabs、商品列表。
+
+3、“首页”页面的扫一扫点击可以进行二维码扫描，点击商品可以跳转到详情页。
+
+4、“商品详情页”上部分是视频，点击视频进行播放，也可以点击进入全屏模式，向下滑动详情页视频可以变成小窗口模式。点击右侧悬浮的直播按钮，可进入直播页面，在有网络的情况下，可进行视频播放。
+
+5.“商品详情页”有个分享功能，点击可进行分享。点击选择收货地址可弹出选择地址的选项，可进行选择地址。
+
+6.断开网络链接，“商品详情页”中点击降价通知后，重新连接网络后通知栏有降价通知。
+
+6.新品、购物车、我的目前是静态页面。
+
+效果预览：
+
+![](screenshots/device/shopping.gif)
+
+### 相关权限
+
+允许使用Internet网络: [ohos.permission.INTERNET](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/permission-list.md)
+
+允许应用控制马达振动：[ohos.permission.VIBRATE](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/permission-list.md)
+
+允许应用使用相机拍摄照片和录制视频：[ohos.permission.CAMERA](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/permission-list.md)
+
+允许应用获取设备位置信息：[ohos.permission.LOCATION](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/permission-list.md)
+
+允许应用在后台运行时获取设备位置信息：[ohos.permission.LOCATION_IN_BACKGROUND](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/permission-list.md)
+
+ 允许应用截取屏幕图像 ：[ohos.permission.CAPTURE_SCREEN ](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/permission-list.md)
+
+ 允许应用读取用户外部存储中的媒体文件信息：[ohos.permission.READ_MEDIA](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/permission-list.md)
+
+ 允许应用访问用户媒体文件中的地理位置信息 ：[ohos.permission.MEDIA_LOCATION](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/permission-list.md)
+
+ 允许应用读写用户外部存储中的媒体文件信息  ：[ohos.permission.WRITE_MEDIA](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/permission-list.md)
+
+### 依赖
+
+[转场动画](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/TransitionAnimation) 本示例的进场动画依赖此示例。
+
+[数据请求](https://gitee.com/openharmony/app_samples/tree/master/Network/Http) 本示例的网络配置服务依赖此示例。
+
+[扫一扫](https://gitee.com/openharmony/app_samples/tree/master/media/Scan) 本示例详情页中的扫一扫功能依赖此示例。
+
+[位置服务](https://gitee.com/openharmony/app_samples/tree/master/device/Location) 本示例的详情页中的位置服务功能依赖此示例。
+
+[自定义弹窗](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/UpgradePopup) 本示例的升级弹窗功能依赖此示例。
+
+[媒体库视频](https://gitee.com/openharmony/app_samples/tree/master/media/VideoShow) 本示例的详情页中的视频功能依赖此示例。
+
+[分享](https://gitee.com/openharmony/applications_app_samples/tree/master/Share/Share) 本示例的详情页中的分享功能依赖此示例。
+
+[事件通知](https://gitee.com/openharmony/applications_app_samples/tree/master/Ntification/CustomNotification) 本示例详情页中的降价通知功能依赖此示例。
+
+### 约束与限制
+1.本示例仅支持标准系统上运行，支持设备：RK3568。
+
+2.本示例仅支持API9版本SDK，版本号：3.2.7.5 Beta3。
+
+3.本示例需要使用DevEco Studio 3.0 Release (Build Version: 3.0.0.993, built on September 4, 2022)才可编译运行。
+
+4.本示例需要使用系统权限的系统接口。使用Full SDK时需要手动从镜像站点获取，并在DevEco Studio中替换，具体操作可参考[替换指南](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/quick-start/full-sdk-switch-guide.md)。
+
+5.本示例需联网运行。
+
+6.弹窗升级需配置服务器后触发。
+

ETSUI/OrangeShopping/build-profile.json5

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2022 Huawei Device 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.
+ */
+
+{
+  "app": {
+    "compileSdkVersion": 9,
+    "compatibleSdkVersion": 9,
+    "products": [
+      {
+        "name": "default",
+        "signingConfig": "default"
+      }
+    ],
+    "signingConfigs": []
+  },
+  "modules": [
+    {
+      "name": "entry",
+      "srcPath": "./entry",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    },
+    {
+      "name": "navigationHome",
+      "srcPath": "./feature/navigationHome"
+    },
+    {
+      "name": "detailPage",
+      "srcPath": "./feature/detailPage"
+    }
+  ]
+}

ETSUI/OrangeShopping/entry/build-profile.json5

@@ -0,0 +1,26 @@
+/*
+* Copyright (c) 2022 Huawei Device 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.
+*/
+
+{
+  "apiType": 'stageMode',
+  "targets": [
+    {
+      "name": "default"
+    },
+    {
+      "name": "ohosTest"
+    }
+  ]
+}

ETSUI/OrangeShopping/entry/hvigorfile.js

@@ -0,0 +1,2 @@
+// Script for compiling build behavior. It is built in the build plug-in and cannot be modified currently.
+module.exports = require('@ohos/hvigor-ohos-plugin').hapTasks

ETSUI/OrangeShopping/entry/package.json

@@ -0,0 +1,24 @@
+{
+  "license": "ISC",
+  "devDependencies": {},
+  "name": "product",
+  "ohos": {
+    "org": "huawei",
+    "directoryLevel": "module",
+    "buildTool": "hvigor"
+  },
+  "description": "example description",
+  "repository": {},
+  "version": "1.0.0",
+  "dependencies": {
+    "@ohos/http": "file:../libs/ohos-http-1.0.0.tgz",
+    "@ohos/video-component": "file:../libs/ohos-video-component-1.0.4.tgz",
+    "@ohos/details-page-component": "file:../feature/DetailPage",
+    "@ohos/notification": "file:../libs/ohos-notification-1.0.0.tgz",
+    "@ohos/scan-component": "file:../libs/ohos-scan-component-1.0.0.tgz",
+    "@ohos/updatedialog": "file:../libs/ohos-updatedialog-1.0.1.tgz",
+    "@ohos/enter-animation": "file:../libs/ohos-enter-animation-1.0.1.tgz",
+    "@ohos/share-component": "file:../libs/ohos-sharecomponent-1.0.1.tgz",
+    "@ohos/navigation-component": "file:../feature/navigationHome"
+  }
+}

ETSUI/OrangeShopping/entry/src/main/ets/Application/MyAbilityStage.ts

@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2022 Huawei Device 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 AbilityStage from '@ohos.application.AbilityStage'
+import { logger } from '@ohos/details-page-component'
+
+const TAG: string = 'MyAbilityStage'
+
+export default class MyAbilityStage extends AbilityStage {
+  onCreate() {
+    logger.info(TAG, 'onCreate')
+  }
+}

ETSUI/OrangeShopping/entry/src/main/ets/MainAbility/MainAbility.ts

@@ -0,0 +1,71 @@
+/*
+ * Copyright (c) 2022 Huawei Device 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 Ability from '@ohos.application.Ability'
+import { logger } from '@ohos/details-page-component'
+import { notificationUtil } from '@ohos/notification'
+
+const TAG: string = 'MainAbility'
+const PERMISSIONS: Array<string> = [
+  'ohos.permission.CAMERA',
+  'ohos.permission.MICROPHONE',
+  'ohos.permission.READ_MEDIA',
+  'ohos.permission.WRITE_MEDIA',
+  'ohos.permission.MEDIA_LOCATION',
+  'ohos.permission.INTERNET'
+]
+
+export default class MainAbility extends Ability {
+  onCreate(want, launchParam) {
+    logger.info(TAG, 'onCreate')
+    const that = this
+    this.context.eventHub.on("getAbilityData", (data) => {
+      data.context = that.context
+      data.launchWant = want
+    })
+    this.requestPermission()
+  }
+
+  requestPermission = async () => {
+    await this.context.requestPermissionsFromUser(PERMISSIONS)
+    await notificationUtil.enableNotification()
+  }
+
+  onDestroy() {
+    logger.info(TAG, 'onDestroy')
+  }
+
+  onWindowStageCreate(windowStage) {
+    // Main window is created, set main page for this ability
+    logger.info(TAG, 'onWindowStageCreate')
+
+    windowStage.setUIContent(this.context, 'pages/Index', null)
+  }
+
+  onWindowStageDestroy() {
+    // Main window is destroyed, release UI related resources
+    logger.info(TAG, 'onWindowStageDestroy')
+  }
+
+  onForeground() {
+    // Ability has brought to foreground
+    logger.info(TAG, 'MainAbility onForeground')
+  }
+
+  onBackground() {
+    // Ability has back to background
+    logger.info(TAG, 'onBackground')
+  }
+}

ETSUI/OrangeShopping/entry/src/main/ets/WorkAbility/WorkAbility.ts

@@ -0,0 +1,63 @@
+/*
+ * Copyright (c) 2022 Huawei Device 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 WorkSchedulerExtensionAbility from '@ohos.WorkSchedulerExtensionAbility'
+import { notificationUtil, notificationContentUtil, notificationRequestUtil, wantAgentUtil } from '@ohos/notification'
+import { logger } from '@ohos/details-page-component'
+
+const TAG: string = 'WorkAbility'
+const BUNDLE_NAME = 'ohos.samples.orangeshopping'
+const ABILITY_NAME = 'MainAbility'
+const NOTIFICATION_ID = 1 // 定义发送通知的id,默认1
+
+export default class WorkAbility extends WorkSchedulerExtensionAbility {
+  onWorkStart(workInfo) {
+    logger.info(TAG, `onWorkStart ${JSON.stringify(workInfo)}`)
+    if (workInfo.parameters) {
+      this.publishNotification(workInfo.parameters)
+    }
+  }
+
+  onWorkStop(workInfo) {
+    logger.info(TAG, `onWorkStop ${JSON.stringify(workInfo)}`)
+    notificationUtil.cancelNotificationById(1)
+  }
+
+  publishNotification = async (parameters: any) => {
+    let parametersObject = JSON.parse(parameters)
+    logger.info(TAG, `publishNotification parametersObject= ${parametersObject}`)
+    let basicContent = {
+      title: parametersObject.title,
+      text: ''
+    }
+    let actionButtons = [
+      {
+        title: parametersObject.firstButton,
+        wantAgent: await wantAgentUtil.createWantAgentForCommonEvent('')
+      },
+      {
+        title: parametersObject.secondButton,
+        wantAgent: await wantAgentUtil.createWantAgentForStartAbility(BUNDLE_NAME, ABILITY_NAME)
+      }
+    ]
+    try {
+      let notificationContent = notificationContentUtil.initBasicNotificationContent(basicContent)
+      let notificationRequest = notificationRequestUtil.initButtonNotificationRequest(notificationContent, actionButtons)
+      notificationUtil.publishNotification(notificationRequest, NOTIFICATION_ID)
+    } catch (error) {
+      logger.info(TAG, `publish notification error ${JSON.stringify(error)}`)
+    }
+  }
+}

ETSUI/OrangeShopping/entry/src/main/ets/pages/Detail.ets

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2022 Huawei Device 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 { DetailPage } from '@ohos/details-page-component'
+
+@Entry
+@Component
+struct Detail {
+  build() {
+    Column() {
+      DetailPage()
+    }
+  }
+}

ETSUI/OrangeShopping/entry/src/main/ets/pages/FullPage.ets

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2022 Huawei Device 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 { FullPage } from '@ohos/video-component'
+
+@Entry
+@Component
+struct Detail {
+  build() {
+    Column() {
+      FullPage()
+    }
+  }
+}

ETSUI/OrangeShopping/entry/src/main/ets/pages/Home.ets

@@ -0,0 +1,78 @@
+/*
+ * Copyright (c) 2022 Huawei Device 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 mediaquery from '@ohos.mediaquery'
+import window from '@ohos.window'
+import { NavigationHomePage } from '@ohos/navigation-component'
+import { UpdateDialog } from '@ohos/updatedialog'
+
+@Entry
+@Component
+struct HomePage {
+  @State url: string = ''
+  @State option: object = undefined
+  @State curBp: string = 'md' // curBp指当前窗口断点，sm代表小屏，md代表中屏，lg代表大屏
+  private smListener: any
+  private mdListener: any
+  private lgListener: any
+  UpdateDialogController: CustomDialogController = new CustomDialogController({
+    builder: UpdateDialog(),
+    customStyle: true
+  })
+
+  build() {
+    Column() {
+      NavigationHomePage({ url: this.url })
+    }
+  }
+
+  aboutToAppear() {
+    this.smListener = mediaquery.matchMediaSync('(320vp<=width<520vp)')
+    this.smListener.on('change', this.isBreakpointSM)
+    this.mdListener = mediaquery.matchMediaSync('(520vp<=width<840vp)')
+    this.mdListener.on('change', this.isBreakpointMD)
+    this.lgListener = mediaquery.matchMediaSync('(840vp<=width)')
+    this.lgListener.on('change', this.isBreakpointLG)
+    window.getTopWindow({ stageMode: true }).then(result => {
+      result.setFullScreen(false)
+    })
+    this.UpdateDialogController.open()
+  }
+
+  aboutToDisappear() {
+    this.smListener.off('change', this.isBreakpointSM)
+    this.mdListener.off('change', this.isBreakpointMD)
+    this.lgListener.off('change', this.isBreakpointLG)
+  }
+
+  isBreakpointSM = (mediaQueryResult) => {
+    if (mediaQueryResult.matches) {
+      this.curBp = 'sm'
+      AppStorage.SetOrCreate('curBp', this.curBp)
+    }
+  }
+  isBreakpointMD = (mediaQueryResult) => {
+    if (mediaQueryResult.matches) {
+      this.curBp = 'md'
+      AppStorage.SetOrCreate('curBp', this.curBp)
+    }
+  }
+  isBreakpointLG = (mediaQueryResult) => {
+    if (mediaQueryResult.matches) {
+      this.curBp = 'lg'
+      AppStorage.SetOrCreate('curBp', this.curBp)
+    }
+  }
+}

ETSUI/OrangeShopping/entry/src/main/ets/pages/Index.ets

@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2022 Huawei Device 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 routerUtil from '../utils/RouterUtil'
+import { TransitionsAnimation } from '@ohos/enter-animation'
+
+@Entry
+@Component
+struct Index {
+  build() {
+    Column() {
+      TransitionsAnimation({
+        gotoNav: () => {
+          routerUtil.gotoHome()
+        }
+      })
+    }
+  }
+}

ETSUI/OrangeShopping/entry/src/main/ets/pages/LivePage.ets

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2022 Huawei Device 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 { LivePage } from '@ohos/video-component'
+
+@Entry
+@Component
+struct Live {
+  build() {
+    Column() {
+      LivePage()
+    }
+  }
+}

ETSUI/OrangeShopping/entry/src/main/ets/pages/ScanPage.ets

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2022 Huawei Device 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 { ScanPage } from "@ohos/scan-component"
+
+@Entry
+@Component
+struct Scan {
+  build() {
+    Column() {
+      ScanPage()
+    }
+  }
+}

ETSUI/OrangeShopping/entry/src/main/ets/pages/Setting.ets

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2022 Huawei Device 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 { setting } from '@ohos/http'
+
+@Entry
+@Component
+struct Index {
+  build() {
+    Column() {
+      setting()
+    }
+  }
+}

ETSUI/OrangeShopping/entry/src/main/ets/utils/RouterUtil.ets

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2022 Huawei Device 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 router from '@ohos.router'
+
+export default class RouterUtil {
+  static gotoHome() {
+    router.replace({
+      url: 'pages/Home'
+    })
+  }
+
+  static gotoDetail() {
+    router.push({
+      url: 'pages/Detail',
+      params: {
+        id: 10
+      }
+    })
+  }
+}

ETSUI/OrangeShopping/entry/src/main/module.json5

@@ -0,0 +1,94 @@
+/*
+* Copyright (c) 2022 Huawei Device 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.
+*/
+
+{
+  "module": {
+    "name": "entry",
+    "type": "entry",
+    "srcEntrance": "./ets/Application/MyAbilityStage.ts",
+    "description": "$string:entry_descc",
+    "mainElement": "MainAbility",
+    "deviceTypes": [
+      "default",
+      "tablet"
+    ],
+    "deliveryWithInstall": true,
+    "installationFree": false,
+    "pages": "$profile:main_pages",
+    "uiSyntax": "ets",
+    "abilities": [
+      {
+        "name": "MainAbility",
+        "srcEntrance": "./ets/MainAbility/MainAbility.ts",
+        "description": "$string:MainAbility_descc",
+        "icon": "$media:icon",
+        "label": "$string:MainAbility_name",
+        "startWindowIcon": "$media:icon",
+        "startWindowBackground": "$color:white",
+        "visible": true,
+        "launchType": "singleton",
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ]
+      }
+    ],
+    "extensionAbilities": [
+      {
+        "name": "WorkAbility",
+        "srcEntrance": "./ets/WorkAbility/WorkAbility.ts",
+        "label": "$string:WorkSchedulerExtensionAbility_label",
+        "description": "$string:WorkSchedulerExtensionAbility_desc",
+        "type": "workScheduler",
+        "visible": true
+      }
+    ],
+    "requestPermissions": [
+      {
+        "name": "ohos.permission.CAMERA"
+      },
+      {
+        "name": "ohos.permission.LOCATION"
+      },
+      {
+        "name": "ohos.permission.VIBRATE"
+      },
+      {
+        "name": "ohos.permission.LOCATION_IN_BACKGROUND"
+      },
+      {
+        "name": "ohos.permission.INTERNET"
+      },
+      {
+        "name": "ohos.permission.CAPTURE_SCREEN"
+      },
+      {
+        "name": "ohos.permission.READ_MEDIA"
+      },
+      {
+        "name": "ohos.permission.WRITE_MEDIA"
+      },
+      {
+        "name": "ohos.permission.MEDIA_LOCATION"
+      }
+    ]
+  }
+}

ETSUI/OrangeShopping/entry/src/main/resources/base/element/color.json

@@ -0,0 +1,8 @@
+{
+  "color": [
+    {
+      "name": "white",
+      "value": "#FFFFFF"
+    }
+  ]
+}

ETSUI/OrangeShopping/entry/src/main/resources/base/element/string.json

@@ -0,0 +1,24 @@
+{
+  "string": [
+    {
+      "name": "entry_descc",
+      "value": "OrangeShopping"
+    },
+    {
+      "name": "MainAbility_descc",
+      "value": "OrangeShopping"
+    },
+    {
+      "name": "MainAbility_name",
+      "value": "OrangeShopping"
+    },
+    {
+      "name": "WorkSchedulerExtensionAbility_label",
+      "value": "WorkSchedulerExtensionAbility"
+    },
+    {
+      "name": "WorkSchedulerExtensionAbility_desc",
+      "value": "system schedules the task execution time"
+    }
+  ]
+}

ETSUI/OrangeShopping/entry/src/main/resources/base/profile/main_pages.json

@@ -0,0 +1,11 @@
+{
+  "src": [
+    "pages/Index",
+    "pages/Home",
+    "pages/Detail",
+    "pages/LivePage",
+    "pages/FullPage",
+    "pages/ScanPage",
+    "pages/Setting"
+  ]
+}

ETSUI/OrangeShopping/entry/src/main/resources/en/element/string.json

@@ -0,0 +1,24 @@
+{
+  "string": [
+    {
+      "name": "entry_descc",
+      "value": "OrangeShopping"
+    },
+    {
+      "name": "MainAbility_descc",
+      "value": "OrangeShopping"
+    },
+    {
+      "name": "MainAbility_name",
+      "value": "OrangeShopping"
+    },
+    {
+      "name": "WorkSchedulerExtensionAbility_label",
+      "value": "WorkSchedulerExtensionAbility"
+    },
+    {
+      "name": "WorkSchedulerExtensionAbility_desc",
+      "value": "system schedules the task execution time"
+    }
+  ]
+}

ETSUI/OrangeShopping/entry/src/main/resources/zh/element/string.json

@@ -0,0 +1,24 @@
+{
+  "string": [
+    {
+      "name": "entry_descc",
+      "value": "橘子购物"
+    },
+    {
+      "name": "MainAbility_descc",
+      "value": "橘子购物"
+    },
+    {
+      "name": "MainAbility_name",
+      "value": "橘子购物"
+    },
+    {
+      "name": "WorkSchedulerExtensionAbility_label",
+      "value": "WorkSchedulerExtensionAbility"
+    },
+    {
+      "name": "WorkSchedulerExtensionAbility_desc",
+      "value": "system schedules the task execution time"
+    }
+  ]
+}

ETSUI/OrangeShopping/feature/navigationHome/.gitignore

@@ -0,0 +1,3 @@
+/node_modules
+/.preview
+/build

ETSUI/OrangeShopping/feature/navigationHome/build-profile.json5

@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2022 Huawei Device 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.
+ */
+
+{
+  "apiType": "stageMode"
+}

ETSUI/OrangeShopping/feature/navigationHome/hvigorfile.js

@@ -0,0 +1,3 @@
+// Script for compiling build behavior. It is built in the build plug-in and cannot be modified currently.
+module.exports = require('@ohos/hvigor-ohos-plugin').harTasks
+

ETSUI/OrangeShopping/feature/navigationHome/index.ets

@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2022 Huawei Device 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.
+ */
+
+export { NavigationHomePage } from './src/main/ets/main/NavigationHomePage'

ETSUI/OrangeShopping/feature/navigationHome/package.json

@@ -0,0 +1,16 @@
+{
+  "license":"ISC",
+  "types":"",
+  "devDependencies":{},
+  "name":"NavigationHome",
+  "description":"a npm package which contains arkUI2.0 page",
+  "ohos":{
+    "org":""
+  },
+  "main":"src/main/ets/components/MainPage/MainPage.ets",
+  "repository":{},
+  "version":"1.0.0",
+  "dependencies":{
+    "@ohos/http":"file:../../libs/ohos-http-1.0.0.tgz"
+  }
+}

ETSUI/OrangeShopping/feature/navigationHome/src/main/ets/components/good/GoodsList.ets

@@ -0,0 +1,97 @@
+/*
+ * Copyright (c) 2022 Huawei Device 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 router from '@ohos.router'
+import Http from '@ohos/http'
+import { PRODUCT_DATA } from '../../mock/ProductsData'
+import { GoodResponse } from '../../model/GoodsModel'
+import { Products_Data } from '../../mock/ProductsData'
+
+@Component
+export struct GoodsList {
+  @State getDataFromHttp: boolean = false
+  private url: string
+  private option: object
+  @State productsData: GoodResponse = Products_Data
+
+  async aboutToAppear() {
+    Http.setUrl(this.url)
+    Http.setOptions(this.option)
+    this.getDataFromHttp = false
+    let info = await Http.request()
+    if (info.responseCode === 200 && info.result !== undefined) {
+      this.getDataFromHttp = true
+      this.productsData = JSON.parse(info.result.toString())
+    }
+  }
+
+  build() {
+    GridRow({ gutter: { x: vp2px(8), y: vp2px(8) }, }) {
+      ForEach(this.getDataFromHttp ? this.productsData.data.records : PRODUCT_DATA, item => {
+        GridCol({ span: { sm: 6, md: 6, lg: 4 } }) {
+          Column() {
+            // 此处的商品图片需要根据父组件的宽度而变化，这里使用65%
+            Image(item.uri)
+              .width('70%')
+              .aspectRatio(1)
+              .objectFit(ImageFit.Contain)
+              .margin({ bottom: 12 })
+
+            Column() {
+              Text(item.title)
+                .width('100%')
+                .fontSize(14)
+
+              Text(item.info)
+                .width('100%')
+                .fontSize(14)
+                .margin({ top: 6})
+
+              Text(item.price)
+                .fontColor($r('app.color.pink'))
+                .fontSize(16)
+                .margin({ top: 6 })
+                .offset({ x: -3 }) // 因为￥是中文字符，上面的xx是中文字符，占的宽度不一样，所以需要对齐，添加offset
+
+              Column() {
+                Text(item.labels)
+                  .fontSize(10)
+                  .fontColor($r('app.color.white'))
+              }
+              .borderRadius(6)
+              .padding({ left: 6, right: 6, top: 4, bottom: 4 })
+              .backgroundColor($r('app.color.pink'))
+              .margin({ top: 6 })
+            }
+            .alignItems(HorizontalAlign.Start)
+          }
+          .borderRadius(10)
+          .padding(12)
+          .backgroundColor($r('app.color.white'))
+          .onClick(() => {
+            router.push({
+              url: 'pages/Detail',
+              params: { goodId: item.id, goodItem: item }
+            })
+          })
+        }
+      }, item => item.toString())
+    }
+    .margin({ left: 12, right: 12 })
+    .onAreaChange((oldArea: Area, newArea: Area) => {
+      AppStorage.SetOrCreate('listHeight', newArea.height as number)
+    })
+  }
+}

ETSUI/OrangeShopping/feature/navigationHome/src/main/ets/components/home/HomePageContent.ets

@@ -0,0 +1,79 @@
+/*
+ * Copyright (c) 2022 Huawei Device 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 { TITLE_BAR_DATA } from '../../mock/ProductsData'
+import { GoodsList } from '../good/GoodsList'
+import { SwiperComponent } from './Swiper'
+
+@Component
+export struct HomePageContent {
+  @State tabsIndex: number = 0
+  private url: string
+  private controller: TabsController = new TabsController()
+  @StorageLink('listHeight') listHeight: number = 100
+  @StorageLink('curBp') curBp: string = 'sm'
+
+  build() {
+    Column() {
+      SwiperComponent()
+        .width('100%')
+      Row() {
+        ForEach(TITLE_BAR_DATA, item => {
+          Column({ space: 6 }) {
+            Text(item.title)
+              .fontSize(16)
+              .fontWeight(400)
+              .fontColor(Color.Black)
+            Text(item.content)
+              .fontSize(12)
+              .fontWeight(400)
+              .opacity(this.tabsIndex === item.id ? 1 : 0.6)
+              .fontColor(this.tabsIndex === item.id ? $r('app.color.pink') : Color.Black)
+          }
+          .onClick(() => {
+            this.tabsIndex = item.id
+            this.controller.changeIndex(item.id)
+          })
+        }, item => item.toString())
+      }
+      .width('100%')
+      .padding({ top: 12, bottom: 12, left: 20, right: 20 })
+      .justifyContent(FlexAlign.SpaceBetween)
+
+      // 主页下半部分商品展示--全部、精选、新品、实惠
+      Tabs({ controller: this.controller }) {
+        TabContent() {
+          GoodsList({ url: this.url })
+        }
+
+        TabContent() {
+          GoodsList({ url: this.url })
+        }
+
+        TabContent() {
+          GoodsList({ url: this.url })
+        }
+
+        TabContent() {
+          GoodsList({ url: this.url })
+        }
+      }
+      .height(this.listHeight + 12)
+      .barWidth(0)
+      .barHeight(0)
+      .scrollable(false)
+    }
+  }
+}

ETSUI/OrangeShopping/feature/navigationHome/src/main/ets/components/home/MainPage.ets

@@ -0,0 +1,90 @@
+/*
+ * Copyright (c) 2022 Huawei Device 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 { NAV_DATA } from '../../mock/ProductsData'
+import { TitleBarComponent } from '../../components/home/TitleBar'
+import { HomePageContent } from '../../components/home/HomePageContent'
+
+@Component
+export struct MainPage {
+  @State navTabsIndex: number = 0
+  private url: string
+  private navController: TabsController = new TabsController()
+  @StorageProp('curBp') curBp: string = 'sm'
+
+  build() {
+    Column() {
+      TitleBarComponent()
+        .backgroundImageSize({ width: '100%', height: '100%' })
+        .backgroundImage($r('app.media.title_bar'), ImageRepeat.NoRepeat)
+      Scroll() {
+        Column() {
+          Row() {
+            ForEach(NAV_DATA, item => {
+              Row() {
+                Text(item.navData)
+                  .fontSize(16)
+                  .fontColor($r('app.color.white'))
+                  .opacity(this.navTabsIndex == item.id ? 1 : 0.8)
+                  .fontWeight(this.navTabsIndex == item.id ? 500 : 400)
+              }
+              .align(Alignment.Center)
+              .onClick(() => {
+                this.navTabsIndex = item.id
+                this.navController.changeIndex(item.id)
+              })
+            }, item => item.toString())
+
+            Row() {
+              Divider()
+                .vertical(true)
+                .width(1)
+                .height(18)
+                .color($r('app.color.divider_white'))
+              Image($r('app.media.nav_classification'))
+                .width(16)
+                .height(16)
+                .objectFit(ImageFit.Contain)
+                .margin({ left: 4 })
+              Text($r('app.string.classification'))
+                .fontSize(16)
+                .opacity(0.8)
+                .fontColor($r('app.color.white'))
+                .margin({ left: 2 })
+            }
+          }
+          .width('100%')
+          .justifyContent(FlexAlign.SpaceBetween)
+          .padding(12)
+
+          HomePageContent({ url: this.url })
+        }
+      }
+      .width('100%')
+      .height('100%')
+      .backgroundImageSize({ width: '100%', height: 200 })
+      .backgroundImage($r('app.media.home_background'), ImageRepeat.NoRepeat)
+      .scrollBar(BarState.Off)
+      .flexGrow(1)
+      .flexShrink(1)
+
+      Divider()
+        .color($r('app.color.divider2'))
+        .height(0.5)
+    }
+    .width('100%')
+    .height('100%')
+  }
+}

ETSUI/OrangeShopping/feature/navigationHome/src/main/ets/components/home/NewProduct.ets

@@ -0,0 +1,100 @@
+/*
+ * Copyright (c) 2022 Huawei Device 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 { GoodsList } from '../good/GoodsList'
+import { NEW_PRODUCT_TITLE_BAR_DATA, SWIPER_DATA } from '../../mock/ProductsData'
+
+@Component
+export struct NewProduct {
+  @State tabsIndex: number = 0
+  @StorageProp('curBp') curBp: string = 'md'
+  private url: string
+  private controller: TabsController = new TabsController()
+
+  build() {
+    Column() {
+      Scroll() {
+        Column() {
+          Swiper() {
+            ForEach(SWIPER_DATA, item => {
+              Navigator({ target: 'pages/detail' }) {
+                Image(item.img)
+                  .objectFit(ImageFit.Cover)
+                  .width('100%')
+                  .borderRadius({ bottomLeft: 12, bottomRight: 12, topLeft: 0, topRight: 0 })
+              }
+            }, item => item.toString())
+          }
+          .width('100%')
+          .height(186)
+          .autoPlay(true)
+          .itemSpace(10)
+          .displayCount(this.curBp === 'sm' ? 1 : this.curBp === 'md' ? 2 : 3)
+          // 这里的导航点需要位于swiper的右下角，此处使用right:24
+          .indicatorStyle({ right: 24, selectedColor: $r('app.color.point'), color: $r('app.color.point_selected') })
+
+          Row() {
+            ForEach(NEW_PRODUCT_TITLE_BAR_DATA, item => {
+              Column() {
+                Text(item.title)
+                  .fontSize(16)
+                  .fontColor($r('app.color.blank'))
+                  .opacity(this.tabsIndex == item.id ? 1 : 0.6)
+                  .fontWeight(this.tabsIndex == item.id ? 500 : 400)
+              }
+              .justifyContent(FlexAlign.Center)
+              .align(Alignment.Center)
+              .onClick(() => {
+                this.tabsIndex = item.id
+                this.controller.changeIndex(item.id)
+              })
+            }, item => item.toString())
+
+            Row() {
+              Image($r('app.media.line_navclass'))
+                .width(2)
+                .height(16)
+                .objectFit(ImageFit.Contain)
+              Image($r('app.media.new_navclass'))
+                .width(16)
+                .height(16)
+                .objectFit(ImageFit.Contain)
+                .margin({ left: 4 })
+              Text($r('app.string.classification'))
+                .fontSize(16)
+                .opacity(0.6)
+                .fontColor($r('app.color.blank'))
+                .margin({ left: 2 })
+            }
+          }
+          .width('100%')
+          .padding({ left: 12, right: 12, bottom: 16, top: 16 })
+          .justifyContent(FlexAlign.SpaceBetween)
+
+          GoodsList({ url: this.url })
+        }
+        .padding({ bottom: 12 })
+      }
+      .layoutWeight(1)
+      .scrollBar(BarState.Off)
+
+      Divider()
+        .color($r('app.color.divider2'))
+        .height(0.5)
+    }
+    .width('100%')
+    .height('100%')
+  }
+}

ETSUI/OrangeShopping/feature/navigationHome/src/main/ets/components/home/ShopCart.ets

@@ -0,0 +1,73 @@
+/*
+ * Copyright (c) 2022 Huawei Device 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 { Cart } from '../shoppingCart/Cart'
+import { FavorGoodList } from '../shoppingCart/FavorGoodlist'
+
+@Preview
+@Component
+export struct ShopCart {
+  private url: string
+  @StorageLink('goodsListHeight') goodsListHeight: number = 100
+
+  build() {
+    Column() {
+      Scroll() {
+        Column() {
+          Column() {
+            Row() {
+              Text($r('app.string.shop_cart'))
+                .fontSize(24)
+                .fontColor($r('app.color.blank'))
+                .fontFamily('HarmonyHeiTi')
+                .padding({ left: 12 })
+              Blank()
+              Text($r('app.string.edit'))
+                .fontSize(16)
+                .fontFamily('HarmonyHeiTi')
+                .fontColor($r('app.color.blank'))
+                .opacity(0.6)
+            }
+            .width('100%')
+            .margin({ top: 16, bottom: 12 })
+
+            Cart()
+          }
+          .width('100%')
+          .backgroundColor($r('app.color.divider'))
+
+          Text($r('app.string.guess_you_like'))
+            .fontSize(20)
+            .fontColor($r('app.color.blank'))
+            .padding({ top: 24, bottom: 20, left: 12 })
+          FavorGoodList({ url: this.url })
+            .height(this.goodsListHeight)
+        }
+        .padding({ bottom: 12 })
+        .alignItems(HorizontalAlign.Start)
+      }
+      .layoutWeight(1)
+      .padding({ left: 12, right: 12 })
+      .scrollBar(BarState.Off)
+
+      Divider()
+        .color($r('app.color.divider2'))
+        .height(0.5)
+    }
+    .width('100%')
+    .height('100%')
+    .backgroundColor($r('app.color.divider'))
+  }
+}

ETSUI/OrangeShopping/feature/navigationHome/src/main/ets/components/home/Swiper.ets

@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2022 Huawei Device 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 { INDEX_DATA } from '../../mock/ProductsData'
+
+@Component
+export struct SwiperComponent {
+  @StorageProp('curBp') curBp: string = 'md'
+
+  build() {
+    Swiper() {
+      ForEach(INDEX_DATA, item => {
+        Navigator() {
+          Image(item.img)
+            .objectFit(ImageFit.Cover)
+            .width('100%')
+            .height('100%')
+            .borderRadius(16)
+        }
+      })
+    }
+    .padding({ left: 12, right: 12 })
+    .height(170)
+    .autoPlay(true)
+    .itemSpace(20)
+    .displayCount(this.curBp === 'sm' ? 1 : this.curBp === 'md' ? 2 : 3)
+    .indicatorStyle({
+      selectedColor: $r('app.color.red'),
+      color: $r('app.color.white')
+    })
+  }
+}

ETSUI/OrangeShopping/feature/navigationHome/src/main/ets/components/home/TitleBar.ets

@@ -0,0 +1,81 @@
+/*
+ * Copyright (c) 2022 Huawei Device 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 router from '@ohos.router'
+import { FIND_SEARCH_TEXT_DATA } from '../../mock/ProductsData'
+
+@Component
+export struct TitleBarComponent {
+
+  build() {
+    Column() {
+      Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) {
+        Row() {
+          Image($r('app.media.logo'))
+            .width(24)
+            .aspectRatio(1)
+            .objectFit(ImageFit.Contain)
+          Image($r('app.media.scan_code'))
+            .width(24)
+            .aspectRatio(1)
+            .objectFit(ImageFit.Contain)
+            .onClick(() => {
+              router.push({
+                url: 'pages/ScanPage'
+              })
+            })
+        }
+        .width('100%')
+        .justifyContent(FlexAlign.SpaceBetween)
+
+        Row() {
+          Image($r('app.media.search'))
+            .objectFit(ImageFit.Contain)
+            .width(20)
+            .aspectRatio(1)
+          Swiper() {
+            ForEach(FIND_SEARCH_TEXT_DATA, item => {
+              Column() {
+                Text(item.searchText)
+                  .opacity(0.6)
+                  .fontColor($r('app.color.blank'))
+                  .fontSize(14)
+                  .fontFamily('HarmonyHeiTi')
+              }
+              .width('100%')
+              .alignItems(HorizontalAlign.Start)
+            }, item => item.toString())
+          }
+          .loop(true)
+          .autoPlay(true)
+          .vertical(true)
+          .indicator(false)
+          .interval(2000)
+          .padding(12)
+        }
+        .zIndex(2)
+        .width('100%')
+        .justifyContent(FlexAlign.Start)
+        .margin({ top: 8, bottom: 12 })
+        .padding({left: 12, right: 12})
+        .backgroundColor($r('app.color.white'))
+        .border({ width: 2, color: $r('app.color.white'), radius: 40 })
+      }
+      .margin({ top: 12 })
+      .padding({ left: 12, right: 12 })
+    }
+    .width('100%')
+  }
+}

ETSUI/OrangeShopping/hvigorfile.js

@@ -0,0 +1,2 @@
+// Script for compiling build behavior. It is built in the build plug-in and cannot be modified currently.
+module.exports = require('@ohos/hvigor-ohos-plugin').appTasks

ETSUI/OrangeShopping/package.json

@@ -0,0 +1,18 @@
+{
+  "license":"ISC",
+  "devDependencies":{},
+  "name":"myapplication",
+  "ohos":{
+    "org":"huawei",
+    "directoryLevel":"project",
+    "buildTool":"hvigor"
+  },
+  "description":"example description",
+  "repository":{},
+  "version":"1.0.0",
+  "dependencies":{
+    "@ohos/hypium":"1.0.2",
+    "@ohos/hvigor-ohos-plugin":"1.2.2",
+    "@ohos/hvigor":"1.2.2"
+  }
+}

OAT.xml

@@ -66,6 +66,13 @@ Note:If the text contains special characters, please escape them according to th
                 <filteritem type="filepath" name="UI/JsAnimation/entry/src/main/js/default/common/animator/show.mp4" desc="Provided by the UX team."/>
                 <filteritem type="filepath" name="UI/JsAnimation/entry/src/main/js/default/common/animator/butterfly.mp4" desc="Provided by the UX team."/>
                 <filteritem type="filepath" name="UI/JsShopping/entry/src/main/js/default/common/detailImg/swiperImg/swiper.mp4" desc="Provided by the UX team."/>
+                <filteritem type="filepath" name="ETSUI/OrangeShopping/libs/ohos-enter-animation-1.0.1.tgz" desc="Provided by ETSUI/TransitionAnimation"/>
+                <filteritem type="filepath" name="ETSUI/OrangeShopping/libs/ohos-http-1.0.0.tgz" desc="Provided by Network/Http"/>
+                <filteritem type="filepath" name="ETSUI/OrangeShopping/libs/ohos-notification-1.0.0.tgz" desc="Provided by Notification/CustomNotification"/>
+                <filteritem type="filepath" name="ETSUI/OrangeShopping/libs/ohos-scan-component-1.0.0.tgz" desc="Provided by media/Scan"/>
+                <filteritem type="filepath" name="ETSUI/OrangeShopping/libs/ohos-sharecomponent-1.0.1.tgz" desc="Provided by Share/Share"/>
+                <filteritem type="filepath" name="ETSUI/OrangeShopping/libs/ohos-updatedialog-1.0.1.tgz" desc="Provided by ETSUI/UpgradePopup"/>
+                <filteritem type="filepath" name="ETSUI/OrangeShopping/libs/ohos-video-component-1.0.4.tgz" desc="Provided by media/VideoShow"/>
             </filefilter>
         </filefilterlist>
     </oatconfig>