HarmonyOS鸿蒙Next中《仿盒马》app开发技术分享05-- 首页banner（端云一体）

HarmonyOS鸿蒙Next中《仿盒马》app开发技术分享05-- 首页banner（端云一体）

开发准备

上一篇文章中我们实现了项目端云一体化首页商品活动入口列表，现在我们还差一个banner的模块，banner模块不仅可以用于展示一些信息，还可以在点击之后进行，跳转，弹窗，升级提示，信息提示等作用，我们直接坐的完善一些，因为我们事先在banner表中添加了action，我们通过这个action的值来进行对应的处理,同时通过islogin字段来判断是否需要登陆操作。

代码实现

创建banner表

{
  "objectTypeName": "home_banner",
  "fields": [
    {"fieldName": "id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true},
    {"fieldName": "banner_id", "fieldType": "Integer", "notNull": true, "defaultValue": 0},
    {"fieldName": "url", "fieldType": "String"},
    {"fieldName": "is_login", "fieldType": "Boolean"},
    {"fieldName": "router", "fieldType": "Boolean"},
    {"fieldName": "action_id", "fieldType": "Integer"},
    {"fieldName": "action", "fieldType": "String"}
  ],
  "indexes": [
    {"indexName": "banner_id", "indexList": [{"fieldName":"banner_id","sortType":"ASC"}]}
  ],
  "permissions": [
    {"role": "World", "rights": ["Read"]},
    {"role": "Authenticated", "rights": ["Read", "Upsert"]},
    {"role": "Creator", "rights": ["Read", "Upsert", "Delete"]},
    {"role": "Administrator", "rights": ["Read", "Upsert", "Delete"]}
  ]
}

填充数据

{
  "cloudDBZoneName": "default",
  "objectTypeName": "home_banner",
  "objects": [
    {
      "id": 10,
      "banner_id": 1,
      "url": "https://su.bcebos.com/b2b-jiameng/online/clear_pic/2940613",
      "is_login": true,
      "router": "",
      "action_id": 10,
      "action": "toast"
    },
    {
      "id": 20,
      "banner_id": 0,
      "url": "https://cdn.sputniknews.cn/img/101524/92/1015249261_0:158:3077:1889_1920x0_80_0_0_032381af16297b35660832ecbd2d7b42.jpg",
      "is_login": false,
      "router": "",
      "action_id": 20,
      "action": "dialog"
    }
  ]
}

创建banner页面

import { HomeBanner } from "../entity/HomeBanner"
import showToast from "../utils/ToastUtils"
import { promptAction } from "@kit.ArkUI"

@Component
@Preview
export struct HomeBannerPage {
  // 数据源
  @Link bannerList:HomeBanner[]
  // tabs 当前数据源的下标
  @State swpIndex:number=1

  build() {
    Column() {
      Swiper(){
        ForEach(this.bannerList, (item: HomeBanner) => {
          Image(item.url)
            .width('100%')
            .height(130)
            .borderRadius(10)
            .onClick(() =>{
              if (item.is_login){
                if (item.action=='toast') {
                  showToast(item.router)
                }
                if (item.action=='dialog') {
                  promptAction.showDialog({
                    title: '提示',
                    message: item.router,
                    buttons: [
                      {
                        text: '确认',
                        color: '#ffffff'
                      },
                      {
                        text: '关闭',
                        color: '#ffffff'
                      }
                    ],
                  })
                    .then(data => {
                      console.info('showDialog success, click button: '+data.index);
                    })
                    .catch(err => {
                      console.info('showDialog error: '+err);
                    })
                }
              }
            })
        })
      }
      .borderRadius(10)
      .loop(true)
      .indicator(true)
      .height(130)
      .onChange((index: number) =>{
        this.swpIndex=index+1
      })
    }
    .padding(10)
    .margin({top:10})
  }
}

后续我们通过获取item的action来执行对应的逻辑即可。