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 bookbuild(){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.找到用户与书籍信息，直接saveconst 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("")}