harmonyos arkts 开发商品页面_arkts商城页面

1.结果展示

2. 实现分层组件

1.1 实现搜索栏

1.2 代码

这段代码是一个构建搜索框组件的方法，具体功能包括：

- 创建一个Search组件，设置初始值为this.keyword，placeholder为'请输入书名...'
- 添加一个搜索按钮，并设置按钮文本为'搜索'
- 设置Search组件的宽度为100%，高度为50
- 设定背景颜色为'#F5F5F5'
- 设置placeholder的颜色为灰色
- 设置placeholder的字体样式为大小14、粗细400
- 设置输入文字的字体样式为大小20、粗细400
- 绑定onSubmit事件处理函数，当用户点击搜索按钮时调用this.searchBooks(value)，其中value为用户输入的搜索关键词
- 绑定onChange事件处理函数，当用户改变搜索框内容时将this.keyword更新为最新的输入值

这个方法实现了一个简单的搜索框功能，用户可以在输入框中输入关键词进行搜索，并且支持点击搜索按钮或者直接回车键执行搜索操作。同时也会实时更新this.keyword的数值，以便在搜索时传递正确的关键词参数。

 @Builder buildSearch() {
    Search({ value: this.keyword, placeholder: '请输入书名...' })
      .searchButton('搜索')
      .width('100%')
      .height(50)
      .backgroundColor('#F5F5F5')
      .placeholderColor(Color.Grey)
      .placeholderFont({ size: 14, weight: 400 })
      .textFont({ size: 20, weight: 400 })
      .onSubmit((value: string) => {
        this.searchBooks(value)
      })
      .onChange((value: string) => {
        this.keyword = value
      })
  }

2.1 实现商品卡片

2.2 卡片代码

这段代码定义了一个名为ItemCard的组件结构，主要用于展示书籍信息。下面是该组件的功能逻辑描述：

- ItemCard组件包含一个私有属性book，用于存储书籍信息。

- build方法用于构建整个书籍信息展示的结构，包括左侧容器和右侧容器。

- 左侧容器部分使用Row布局，包含一个文本框，展示书名this.book.bookname，设置字体样式为斜体，字体大小为15，背景颜色为透明紫红色，字体颜色为白色，宽度占30%，高度为60，边框圆角为10，文本居中显示，左外边距为5。

- 右侧容器部分使用Column布局，包含价格信息和作者、出版社信息。价格信息展示为'价格为：￥' + this.book.price.toFixed(3)，字体颜色为蓝色，字体大小为20。作者和出版社信息分别显示为"作者：" + this.book.author 和 "出版社：" + this.book.publisher，字体颜色为黑色，字体大小为12。这两个信息在同一行显示，宽度占右侧容器的68%，并且内容左右对齐。

- 整个ItemCard组件的样式设置为宽度占97%，高度为80，内容左右对齐，背景颜色为淡粉色，边框圆角为20。

总体来说，ItemCard组件通过左右两个容器分别展示书名、价格以及作者、出版社等信息

@Component
struct ItemCard{
  private book
  build(){
    Row() {
      // 左侧容器
      Text(this.book.bookname)
        .fontStyle(FontStyle.Italic)
        .fontSize(15)
        .backgroundColor("#ff404aa9")
        .fontColor('white')
        .width("30%")
        .height('60')
        .borderRadius(10)
        .textAlign(TextAlign.Center)
        .margin({ left: '5' })
 
      // 右侧容器
      Column() {
        Text('价格为：￥' + this.book.price.toFixed(3)).fontColor('blue').fontSize(20)
        Row(){
          Text("作者：" + this.book.author).fontColor('black').fontSize(12)
          Text("出版社：" + this.book.publisher).fontColor('black').fontSize(12)
        }.width('68%').justifyContent(FlexAlign.SpaceBetween)
      }
      .width("70%")
      .borderRadius(10)
    }
    .width("97%")
    .height("80")
    .justifyContent(FlexAlign.SpaceBetween)
    .backgroundColor("#fff3f3fc")
    .borderRadius(20)
  }
}

2.3 实现收藏效果

2.4 收藏效果代码

  @Builder SaveBtn(bookno:string){
    Button("收藏").width("60").height('40')
      .backgroundColor('#fff3f6f5')
      .fontColor("#ff181a19")
    .onClick(()=> {
      this.saveBook(bookno)
    })
 
  }

3. 全部代码（书籍数据来源于接口，可以自己适当的自定义一串json数据作为接口数据）

  pageSize: number = 10
  @State page:number =0 //总页面
  httpUtil: http.HttpRequest
  // todo 传递用户id
  @State userID:string=""
 
  searchBooks(keyword:string) {
    this.httpUtil.request(`192.168.**.***/books/${this.cur}/${this.pageSize}`,
      {
        method: http.RequestMethod.GET,
        extraData: { 'k': "bookname", 'v': this.keyword }
      }
    ).then(res => {
      let jsonResult = res.result.toString()
      let responseObject = JSON.parse(jsonResult)
      this.try= responseObject.data
      // 当前页面
      this.cur=responseObject.cur
      // 总共页面
      this.page=responseObject.pages
    }).catch(err => {
      console.log('数据传输http错误')
    })
  }
 
  async saveBook(bookno:string){
    // todo 收藏逻辑
    // todo 1.找到用户与书籍信息，直接save
    const res = await this.httpUtil.request(`localhost/save/insert?rno=${this.userID}&bno=${bookno}`,
      {
        method: http.RequestMethod.POST,
      }
    )
    console.log(res.result.toString())
    // todo 2.收藏成功 prompt传递弹窗
    Prompt.showToast({message:"收藏成功"})
  }
 
  aboutToAppear() {
    let httpRequest = http.createHttp()
    this.httpUtil = httpRequest
    // todo 传递用户编号
    this.userID = AppStorage.Get("info")
    // todo 查询全部图书
    this.searchBooks("")
  }