feat: 完成书单详情的数据展示

commons/basic/src/main/ets/utils/arkts/utils/YTRouter.ets

@@ -98,8 +98,8 @@ class YTRouter extends NavPathStack {
   }
 
   // 跳转至书籍详情页面
-  router2BookListDetailPage(){
-    this.pushPathByName('BookListDetailPage', null)
+  router2BookListDetailPage(item: ESObject){
+    this.pushPathByName('BookListDetailPage', item)
   }
 
   // 跳转至借阅问答页面

features/feature/src/main/ets/apis/ApiUrl.ets

@@ -5,6 +5,13 @@ export class ApiUrl {
    */
   static searchBookList = '/api/book/bookList/searchBookList';
 
+  /**
+   * @description 查看书单详情
+   * @method POST
+   */
+  static getBookListDetail = '/api/book/bookList/getBookByListId';
+
+
   /**
    * @description 获取所有的书单分类集合
    * @method GET

features/feature/src/main/ets/apis/BookListApi.ets

@@ -44,6 +44,15 @@ class BookListApi {
   searchBooks(params: searchBookQuery): Promise<PageResponse<BookItem>>{
     return YTRequest.post<PageResponse<BookItem>, searchBookQuery>(ApiUrl.searchBooks, params)
   }
+
+  /**
+   * @description 获取书单详情
+   * @param bookListId
+   * @returns
+   */
+  getBookListDetail(bookListId: string): Promise<Array<BookItem>>{
+    return YTRequest.post<Array<BookItem>>(ApiUrl.getBookListDetail, {bookListId})
+  }
 }
 
 

features/feature/src/main/ets/components/BookItemComp.ets

@@ -59,8 +59,6 @@ export struct BookItemComp {
   .backgroundImage($r('[basic].media.png_book_CompCover'))
 }
 
-
-
   // 书籍Item - 列表模式
   @Builder
   bookItemComp(){

features/feature/src/main/ets/components/BuilderIndex.ets

@@ -53,7 +53,7 @@ export function bookListItemComp(item: RepeatItem<BookListItem>){
   .borderRadius(12)
   .border({width: 2, color: '#FF000000'})
   .onClick(() => {
-    yTRouter.router2BookListDetailPage()
+    yTRouter.router2BookListDetailPage(item.item)
   })
 }
 

features/feature/src/main/ets/components/SchoolBag.ets

@@ -1,14 +1,40 @@
+import { yTRouter } from "basic"
+import { CartStorage } from "../model/Storage"
 import { CustomTextStyle } from "../style/CustomTextStyle"
+import { AppStorageV2 } from "@kit.ArkUI"
 
 // 书包组件
 @ComponentV2
 export struct SchoolBag {
+  // 组件模式 - 是否需要背景、阴影
+  @Param compMode: boolean = false
+  // 购物车数量
+  @Local carCount: CartStorage = AppStorageV2.connect(CartStorage, () => new CartStorage())!
 
+  // 前往书包
+  toSchoolBag(){
+    yTRouter.getTabControl().changeIndex(2)
+    yTRouter.clear()
+    yTRouter.pop()
+  }
 
   build() {
-    Column(){
-      Image($r('[basic].media.icon_schoolbag_')).width(24).aspectRatio(1)
-      Text('书包').attributeModifier(new CustomTextStyle({size: 12, weight: 400}))
+    Badge({
+      count: this.carCount.carCount,
+      style: {},
+      position: BadgePosition.RightTop,
+    }){
+      Column(){
+        Image($r('[basic].media.icon_schoolbag_')).width(24).aspectRatio(1)
+
+        Text('书包').attributeModifier(new CustomTextStyle({size: 12, weight: 400}))
+      }
+      .width(this.compMode ? 42 : undefined)
+      .padding(this.compMode ? 9 : undefined)
+      .borderRadius(this.compMode ? 8 : undefined)
+      .backgroundColor(Color.White)
+      .shadow(this.compMode ? { color: '#40000000', radius: 8 } : undefined)
+      .onClick(()=>{ this.toSchoolBag() })
     }
   }
 }

features/feature/src/main/ets/model/Storage.ets

@@ -1,5 +1,9 @@
+import { BookItem } from "basic"
 import { bookListApi } from "../apis/BookListApi"
+import { OrderApi } from "../apis/OrderApi"
 import { BookListTypeItem, BookListTypeList } from "./BookModelIndex"
+import { PageResponse } from "./PageResponse"
+import { bookPackageQuery } from "./Query"
 
 // 搜索记录缓存
 @ObservedV2
@@ -61,3 +65,26 @@ export class BookCategoryStorage{
   }
 }
 
+// 购物车数量
+@ObservedV2
+export class CartStorage{
+  @Trace carCount: number = 0
+
+  constructor() {
+    this.init()
+  }
+
+  init(){
+    this.getBagBookList()
+  }
+
+  // 获取书包内的书本
+  async getBagBookList(){
+    let query: bookPackageQuery = new bookPackageQuery()
+    let ans: PageResponse<BookItem> = await OrderApi.getBagBookList(query)
+    let c = ans.total
+    if(c){
+      this.carCount = Number.parseInt(c)
+    }
+  }
+}

features/feature/src/main/ets/pages/BookList/BookListDetailPage.ets

@@ -1,11 +1,14 @@
-import { RouterPage, YTHeader } from 'basic';
+import { BookItem, RouterPage, YTHeader } from 'basic';
+import { BookItemComp } from '../../components/BookItemComp';
+import { SchoolBag } from '../../components/SchoolBag';
+import { BookListItem } from '../../model/BookModelIndex';
 import { CustomTextStyle } from '../../style/CustomTextStyle';
 import { BookListDetailViewModel } from '../viewModel/BookListDetailViewModel';
 
 @ComponentV2
 @RouterPage
 struct BookListDetailPage {
-  vm: BookListDetailViewModel = new BookListDetailViewModel();
+  @Param @Require vm: BookListDetailViewModel;
 
   build() {
     NavDestination() {
@@ -20,16 +23,16 @@ struct BookListDetailPage {
             List(){
               ListItem(){
                 Column(){
-                  Text('10月书单推荐')
+                  Text(this.vm.item.bookListName)
                     .attributeModifier(new CustomTextStyle({size: 18, weight: 600, color: '#FF111111'}))
 
                   Row(){
-                    Text('鹿学长绘本')
+                    Text(this.vm.item.author)
                       .attributeModifier(new CustomTextStyle({size: 14, weight: 400, color: '#FF555555'}))
 
                     Row(){
-                      Text('2028人')
-                        .attributeModifier(new CustomTextStyle({size: 14, weight: 600, color: '#FF111111'}))
+                      // Text('2028人')
+                      //   .attributeModifier(new CustomTextStyle({size: 14, weight: 600, color: '#FF111111'}))
                     }
                   }
                   .width('100%')
@@ -37,13 +40,13 @@ struct BookListDetailPage {
                   .justifyContent(FlexAlign.SpaceBetween)
 
                   Column(){
-                    Text('拾起落叶的信笺，共读一个暖哄哄的通话')
+                    Text(this.vm.item.synopsis)
                       .attributeModifier(new CustomTextStyle({size: 14, weight: 400, color: '#FF555555'}))
                   }
                   .height(100)
                   .width('100%')
                   .margin({top: 5})
-                  .padding({top: 20, left: 5})
+                  .padding({top: 23, left: 5})
                   .alignItems(HorizontalAlign.Start)
                   .backgroundImageSize({width: '100%', height: '100%'})
                   .backgroundImage($r('[basic].media.png_ListDetailBg'))
@@ -58,7 +61,7 @@ struct BookListDetailPage {
               ListItem(){
                 Row(){
                   Column(){
-                    Text(`共95册`)
+                    Text(`共${this.vm.item.bookCount}册`)
                       .zIndex(99)
                       .attributeModifier(new CustomTextStyle({size: 18, weight: 600}))
 
@@ -68,7 +71,7 @@ struct BookListDetailPage {
                       .margin({top:-10})
                   }
 
-                  Text(`已读4本`)
+                  Text(``) // 已读xx本
                     .attributeModifier(new CustomTextStyle({size: 14, weight: 500, color: '#FF7C7D7D'}))
                 }
                 .width('100%')
@@ -77,11 +80,10 @@ struct BookListDetailPage {
               .margin({top: 12})
               .padding({left: 16, right: 16})
 
-              ForEach(new Array(10).fill('0'), (item: string, index) => {
+              ForEach(this.vm.bookList, (item: BookItem, index) => {
                 ListItem(){
                   Column(){
-                    // todo 完善书籍组件
-                    // bookItemComp('我不愿嫉妒', () => { this.vm.increaseIndex = index })
+                    BookItemComp({ item: item })
                   }.alignItems(HorizontalAlign.End).justifyContent(FlexAlign.End)
                 }
                 .margin({top: 8})
@@ -101,23 +103,21 @@ struct BookListDetailPage {
         }
 
         Column({space: 3}){
-          ForEach(['一键\n添加', '书包'], (item: string, index) => {
-            Column({space: 3}){
-              Image(index == 0 ?
-              $r('[basic].media.icon_deerIncrease') :
-              $r('[basic].media.icon_schoolbag_'))
-                .width(24)
-                .aspectRatio(1)
-
-              Text(item)
-                .attributeModifier(new CustomTextStyle({size: 12, weight: 400}))
-            }
-            .width(42)
-            .padding(9)
-            .borderRadius(8)
-            .backgroundColor(Color.White)
-            .shadow({ color: '#40000000', radius: 8 })
-          })
+          Column({space: 3}){
+            Image($r('[basic].media.icon_deerIncrease'))
+              .width(24)
+              .aspectRatio(1)
+
+            Text('一键\n添加')
+              .attributeModifier(new CustomTextStyle({size: 12, weight: 400}))
+          }
+          .width(42)
+          .padding(9)
+          .borderRadius(8)
+          .backgroundColor(Color.White)
+          .shadow({ color: '#40000000', radius: 8 })
+
+          SchoolBag({compMode: true})
         }
         .margin({ bottom: 53, right: 31})
         .backgroundColor(Color.Transparent)
@@ -133,6 +133,6 @@ struct BookListDetailPage {
 
 
 @Builder
-function BookListDetailBuilder() {
-  BookListDetailPage()
+function BookListDetailBuilder(_: string, item: BookListItem) {
+  BookListDetailPage({ vm: new BookListDetailViewModel(item) })
 }

features/feature/src/main/ets/pages/viewModel/BookListDetailViewModel.ets

@@ -1,8 +1,25 @@
-import { YTAvoid } from "basic";
+import { BookItem, YTAvoid, yTRouter } from "basic";
+import { bookListApi } from "../../apis/BookListApi";
+import { BookListItem } from "../../model/BookModelIndex";
 
 @ObservedV2
 export class BookListDetailViewModel{
   @Trace safeBottom: number = AppStorage.get(YTAvoid.SAFE_BOTTOM_KEY) as number
 
   @Trace increaseIndex: number = -1
+  @Trace item: BookListItem
+  @Trace bookList: BookItem[] = []
+
+  constructor(item: BookListItem) {
+    this.item = item
+    if(this.item == undefined) yTRouter.pop()
+
+    this.getBookListDetail()
+  }
+
+  // 获取书单详情
+  async getBookListDetail() {
+    let ans = await bookListApi.getBookListDetail(this.item.id ?? '')
+    this.bookList.push(...ans)
+  }
 }