feat: 完成 书籍 详情页面跳转

commons/basic/Index.ets

@@ -119,7 +119,9 @@ export * from './src/main/ets/models'
 export * from './src/main/ets/components/DiaLogComp/DiaLogComp'
 export * from './src/main/ets/components/DiaLogComp/DiaLogControl'
 export * from './src/main/ets/components/DiaLogComp/DiaLogSheetComp'
+
 export * from './src/main/ets/models/NavDiaLogModel'
+export * from './src/main/ets/models/BookModel'
 
 export * from './src/main/ets/components/generalComp/YtDatePicker'
 
@@ -142,4 +144,3 @@ export  * from '@ibestservices/area-data'
 
 
 
-

commons/basic/src/main/ets/models/BookModel.ets

@@ -0,0 +1,61 @@
+/**
+ * 书本信息
+ */
+export class BookItem {
+  /** 书籍ID */
+  id?: string;
+  /** 书名 */
+  bookTitle?: string;
+  /** 副标题 */
+  bookSubtitle?: string;
+  /** ISBN编号 */
+  isbn?: string;
+  /** 封面图片URL */
+  coverUrl?: string;
+  /** 作者 */
+  author?: string;
+  /** 备注 */
+  remark?: string;
+  /** 语言 */
+  language?: string;
+  /** 出版社 */
+  publisher?: string;
+  /** 出版日期 */
+  publicationDate?: string;
+  /** 上架日期 */
+  saleDate?: string;
+  /** 页数 */
+  pageNumber?: string;
+  /** 作者介绍 */
+  authorIntroduction?: string;
+  /** 适读年龄范围 */
+  ageRange?: string;
+  /** 状态 */
+  state?: string;
+  /** 每日租金 */
+  rentPerDay?: string;
+  /** 重量（单位：kg） */
+  weight?: string;
+  /** 市场价格 */
+  marketPrice?: string;
+  /** 最小适读年龄 */
+  minAge?: string;
+  /** 最大适读年龄 */
+  maxAge?: string;
+  /** 书架位置 */
+  shelf?: string;
+  /** 阅读次数 */
+  readingNumber?: string;
+  /** 装订方式 */
+  binding?: string;
+  /** 创建人 */
+  createBy?: string;
+  /** 创建时间 */
+  createTime?: string;
+  /** 更新人 */
+  updateBy?: string;
+  /** 更新时间 */
+  updateTime?: string;
+  /** 分类名称 */
+  typeName?: string;
+}

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

@@ -1,5 +1,6 @@
 import { IBestToast } from '@ibestservices/ibest-ui'
 import { BasicType, DelPhotoParam } from '../../../models'
+import { BookItem } from '../../../models/BookModel'
 import { NavDiaLogModel } from '../../../models/NavDiaLogModel'
 
 class YTRouter extends NavPathStack {
@@ -152,8 +153,8 @@ class YTRouter extends NavPathStack {
   }
 
   // 进入书籍详情页面
-  router2BookItemDetailPage(){
-    this.pushPathByName('BookItemDetailPage', null)
+  router2BookItemDetailPage(book?: BookItem){
+    this.pushPathByName('BookItemDetailPage', book)
   }
 
   // 进入订单详情确认页

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

@@ -1,5 +1,5 @@
-import { YTRequest } from "basic";
-import { BookItem, BookListItem, BookListTypeItem, BookListTypeList, HotSearchItem } from "../model/BookModelIndex";
+import { BookItem, YTRequest } from "basic";
+import { BookListItem, BookListTypeItem, BookListTypeList, HotSearchItem } from "../model/BookModelIndex";
 import { searchBookListQuery, searchBookQuery } from "../model/Query";
 import { PageResponse } from "../model/PageResponse";
 import { ApiUrl } from "./ApiUrl";

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

@@ -1,5 +1,5 @@
-import { yTRouter } from "basic"
-import { BookItem, BookListItem } from "../model/BookModelIndex"
+import { BookItem, yTRouter } from "basic"
+import { BookListItem } from "../model/BookModelIndex"
 import { CustomTextStyle } from "../style/CustomTextStyle"
 
 // 标签Item
@@ -15,7 +15,7 @@ export function tagItemComp(text: string, fontColor: ResourceColor, bgColor: Res
 }
 
 
-
+// todo 跳转事件在 Builder 内部实现， 添加购物车事件交给 vm
 // 书单Item
 @Builder
 export function bookListItemComp(item: RepeatItem<BookListItem>){
@@ -91,7 +91,7 @@ export function bookItemCompCover(item: RepeatItem<BookItem>, onClick: () => voi
 
 // 书籍Item
 @Builder
-export function bookItemComp(item: RepeatItem<BookItem>, onClick: () => void){
+export function bookItemComp(item: RepeatItem<BookItem>, onClick: () => void, onAddCar?: () => void){
   Row({space: 11}){
     Image(item.item.coverUrl)
       .width(86)

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

@@ -1,64 +1,3 @@
-/**
- * 书本信息
- */
-export class BookItem {
-  /** 书籍ID */
-  id?: string;
-  /** 书名 */
-  bookTitle?: string;
-  /** 副标题 */
-  bookSubtitle?: string;
-  /** ISBN编号 */
-  isbn?: string;
-  /** 封面图片URL */
-  coverUrl?: string;
-  /** 作者 */
-  author?: string;
-  /** 备注 */
-  remark?: string;
-  /** 语言 */
-  language?: string;
-  /** 出版社 */
-  publisher?: string;
-  /** 出版日期 */
-  publicationDate?: string;
-  /** 上架日期 */
-  saleDate?: string;
-  /** 页数 */
-  pageNumber?: string;
-  /** 作者介绍 */
-  authorIntroduction?: string;
-  /** 适读年龄范围 */
-  ageRange?: string;
-  /** 状态 */
-  state?: string;
-  /** 每日租金 */
-  rentPerDay?: string;
-  /** 重量（单位：kg） */
-  weight?: string;
-  /** 市场价格 */
-  marketPrice?: string;
-  /** 最小适读年龄 */
-  minAge?: string;
-  /** 最大适读年龄 */
-  maxAge?: string;
-  /** 书架位置 */
-  shelf?: string;
-  /** 阅读次数 */
-  readingNumber?: string;
-  /** 装订方式 */
-  binding?: string;
-  /** 创建人 */
-  createBy?: string;
-  /** 创建时间 */
-  createTime?: string;
-  /** 更新人 */
-  updateBy?: string;
-  /** 更新时间 */
-  updateTime?: string;
-  /** 分类名称 */
-  typeName?: string;
-}
 
 /**
  * 书单信息

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

@@ -1,4 +1,4 @@
-import { RouterPage, yTRouter } from 'basic';
+import { BookItem, RouterPage, yTRouter } from 'basic';
 import { tagItemComp } from '../../components/BuilderIndex';
 import { SchoolBag } from '../../components/SchoolBag';
 import { CustomTextStyle } from '../../style/CustomTextStyle';
@@ -7,7 +7,7 @@ import { BookItemDetailViewModel } from '../viewModel/BookItemDetailViewModel';
 @ComponentV2
 @RouterPage
 struct BookItemDetailPage {
-  @Local vm: BookItemDetailViewModel = new BookItemDetailViewModel();
+  @Param @Require vm: BookItemDetailViewModel;
 
   build() {
     NavDestination() {
@@ -20,7 +20,7 @@ struct BookItemDetailPage {
             ListItem(){
               Stack({alignContent: Alignment.TopStart}){
                 Row(){
-                  Image('https://th.bing.com/th/id/R.8bbf769b39bb26eefb9b6de51c23851d?rik=crTnc5i8A%2b8p7A&riu=http%3a%2f%2fpicview.iituku.com%2fcontentm%2fzhuanji%2fimg%2f202207%2f09%2fe7196ac159f7cf2b.jpg%2fnu&ehk=DYPLVpoNAXLj5qzwgR5vHf9DladFh%2b34s4UcuP3Kn6E%3d&risl=&pid=ImgRaw&r=0')
+                  Image(this.vm.book.coverUrl)
                     .height(344)
                 }
                 .width("100%").height('100%')
@@ -49,7 +49,7 @@ struct BookItemDetailPage {
                     Span(' 元/天')
                   }.attributeModifier(new CustomTextStyle({size: 14, weight: 500}))
 
-                  Text(`市场售价：¥${30.5}`)
+                  Text(`市场售价：¥${this.vm.book.marketPrice}`)
                     .borderRadius(9)
                     .backgroundColor(Color.White)
                     .padding({left: 10, right: 10, top: 2, bottom: 2})
@@ -73,21 +73,21 @@ struct BookItemDetailPage {
             ListItem(){
               Column({space: 12}){
                 Column({space: 8}){
-                  Text('我有友情要出租（拼音版）')
+                  Text(this.vm.book.bookTitle)
                     .attributeModifier(new CustomTextStyle({size: 18, weight: 600}))
 
                   Row({space: 8}){
                     tagItemComp('情绪价值', '#4EB1EF', '#EDF7FD')
                     tagItemComp('哄娃神器', '#4EB1EF', '#EDF7FD')
-                    tagItemComp('3-8岁', '#FC9911', '#FFF5E7')
+                    tagItemComp(`${this.vm.book.minAge}-${this.vm.book.maxAge}岁`, '#FC9911', '#FFF5E7')
                   }
 
                   Column(){
                     Text(){
-                      Span('语言：中文\n')
-                      Span('作者：啊啊啊啊啊啊啊啊啊啊\n')
-                      Span('出版社：啊啊啊啊啊啊啊啊啊啊\n')
-                      Span('出版时间：2022-07-09\n')
+                      Span(`语言：${this.vm.book.language}` + '\n')
+                      Span(`作者：${this.vm.book.author}` + '\n')
+                      Span(`出版社：${this.vm.book.publisher}` + '\n')
+                      Span(`出版时间：${this.vm.book.publicationDate?.split(' ')[1]}}`)
                     }
                     .attributeModifier(new CustomTextStyle({size: 12, weight: 400, color: '#80000000'}))
                   }
@@ -106,7 +106,7 @@ struct BookItemDetailPage {
 
 
                 // 本书书单
-                if(true){
+                if(false){
                   Column({space: 12}){
                     Row(){
                       Text('本书书单')
@@ -154,28 +154,63 @@ struct BookItemDetailPage {
 
                 // 图书介绍
                 if(true){
-                  Column({space: 13}){
-                    Column(){
-                      Text('图书简介')
-                        .zIndex(99)
-                        .attributeModifier(new CustomTextStyle({size: 16, weight: 600, color: '#FF000000'}))
-
-                      Image($r('[basic].media.icon_SelectBg'))
-                        .width(45)
-                        .height(16)
-                        .margin({top:-10})
-                    }
+                  // Column({space: 13}){
+                  //   Column(){
+                  //     Text('图书简介')
+                  //       .zIndex(99)
+                  //       .attributeModifier(new CustomTextStyle({size: 16, weight: 600, color: '#FF000000'}))
+                  //
+                  //     Image($r('[basic].media.icon_SelectBg'))
+                  //       .width(45)
+                  //       .height(16)
+                  //       .margin({top:-10})
+                  //   }
+                  //
+                  //   Text('哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈\n' +
+                  //     '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈\n' +
+                  //     '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈\n' +
+                  //     '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈')
+                  //     .attributeModifier(new CustomTextStyle({size: 12, weight: 400, color: '#FF555555'}))
+                  // }
+                  // .borderRadius(10)
+                  // .alignItems(HorizontalAlign.Start)
+                  // .padding({left: 15, right: 15, top: 11, bottom: 11})
+                  // .linearGradient({colors: [['#FFFFF6D9', 0], ['#FFFFFFFF', 1]]})
+                  //富文本
+                  Web({ src: $rawfile('index.html'), controller: this.vm.webController, renderMode: RenderMode.SYNC_RENDER  })
+                    .margin(5)
+                    .width('100%')
+                    .javaScriptAccess(true)
+                    // .height(this.vm.webHeight).../
+                    .backgroundColor(Color.Transparent)
+                    .overScrollMode(OverScrollMode.NEVER) // 禁用弹性回弹
+                    .onPageEnd(() => {
+                      this.vm.webController.runJavaScript(`writeHtml(\`${this.vm.book.remark}\`)`).catch(() => {
+                        console.log('writeHtml error')
+                      })
+                    })
+                    // .onControllerAttached(() => {
+                    //   this.vm.webController.loadData('<!DOCTYPE html>' +
+                    //     "<html><body style=\"font-size:16px;color:rgba(0,0,0,0.6);flex-shrink:0;font-style:normal;font-weight:normal;background-color:rgb(255, 255, 255);\">" +
+                    //     "  <style>\n" +
+                    //     "    p { \n" +
+                    //     "      margin: 0; /* 清除默认上下边距 */\n" +
+                    //     "      padding: 8px 0; /* 可自定义段落间距，避免过密 */\n" +
+                    //     "      line-height: 1.6; /* 优化行高，提升可读性 */\n" +
+                    //     "    }\n" +
+                    //     "    img { \n" +
+                    //     "      max-width: 100%; /* 图片自适应容器，避免溢出导致的空白 */\n" +
+                    //     "      height: auto; \n" +
+                    //     "      margin: 10px 0; /* 图片与文字间留适当间距 */\n" +
+                    //     "    }\n" +
+                    //     "  </style>" +
+                    //     this.vm.book.remark
+                    //     + "</body> </html>",
+                    //     "text/html",
+                    //     "UTF-8", " ", " ");
+                    // })
 
-                    Text('哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈\n' +
-                      '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈\n' +
-                      '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈\n' +
-                      '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈')
-                      .attributeModifier(new CustomTextStyle({size: 12, weight: 400, color: '#FF555555'}))
-                  }
-                  .borderRadius(10)
-                  .alignItems(HorizontalAlign.Start)
-                  .padding({left: 15, right: 15, top: 11, bottom: 11})
-                  .linearGradient({colors: [['#FFFFF6D9', 0], ['#FFFFFFFF', 1]]})
+                  // .layoutMode(WebLayoutMode.FIT_CONTENT)
                 }
               }
               .backgroundColor('#F5F7F8')
@@ -226,6 +261,6 @@ struct BookItemDetailPage {
 
 
 @Builder
-function BookItemDetailBuilder() {
-  BookItemDetailPage()
+function BookItemDetailBuilder(_: string, book: BookItem) {
+  BookItemDetailPage({ vm: new BookItemDetailViewModel(book)})
 }

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

@@ -1,8 +1,16 @@
-import { YTAvoid } from "basic";
+import { BookItem, YTAvoid } from "basic";
+import { webview } from "@kit.ArkWeb";
 
 @ObservedV2
 export class BookItemDetailViewModel{
   @Trace safeBottom = AppStorage.get(YTAvoid.SAFE_BOTTOM_KEY) as number;
   @Trace safeTop = AppStorage.get(YTAvoid.SAFE_TOP_KEY) as number;
 
+  @Trace book: BookItem;
+  @Trace webHeight: Length = '300'
+
+  webController: WebviewController = new webview.WebviewController()
+  constructor(book: BookItem) {
+    this.book = book;
+  }
 }

features/feature/src/main/ets/view/SecondView.ets

@@ -2,8 +2,9 @@ import { DeerSearch } from '../components/DeerSearch'
 import { SecondViewModel } from './viewModel/SecondViewModel'
 import { CustomTextStyle } from '../style/CustomTextStyle'
 import { bookItemComp, bookItemCompCover } from '../components/BuilderIndex'
-import { BookItem, BookListTypeList } from '../model/BookModelIndex'
+import { BookListTypeList } from '../model/BookModelIndex'
 import { cert } from '@kit.DeviceCertificateKit'
+import { BookItem } from 'basic'
 
 @ComponentV2
 export struct SecondView {
@@ -130,10 +131,14 @@ export struct SecondView {
 
                 Repeat(this.vm.bookList)
                   .each((item: RepeatItem<BookItem>) => {
-                    // todo 切换封面模式
                     if(this.vm.showMode) {
-                      bookItemComp(item, () => {})
+                      // 列表模式
+                      bookItemComp(
+                        item,
+                        () => { this.vm.goBookDetail(item.item) },
+                        () => { this.vm.addToBook(item.item) })
                     } else {
+                      // 封面模式
                       bookItemCompCover(item, () => {})
                     }
                   })

features/feature/src/main/ets/view/ThirdView.ets

@@ -214,7 +214,10 @@ export struct ThirdView {
               .width("100%")
               .alignItems(HorizontalAlign.Start)
             }
-            .onClick(() => { yTRouter.router2BookItemDetailPage() })
+            .onClick(() => {
+              // todo 暂时注释
+              // yTRouter.router2BookItemDetailPage()
+            })
           }
           .width("100%")
           .height(102)

features/feature/src/main/ets/view/viewModel/SecondViewModel.ets

@@ -1,10 +1,9 @@
-import { YTAvoid } from "basic"
+import { BookItem, YTAvoid, YTRequest, yTRouter } from "basic"
 import { AppStorageV2 } from "@kit.ArkUI"
 import { BookCategoryStorage } from "../../model/Storage"
 import { searchBookQuery } from "../../model/Query"
 import { bookListApi } from "../../apis/BookListApi"
 import { PageResponse } from "../../model/PageResponse"
-import { BookItem } from "../../model/BookModelIndex"
 
 @ObservedV2
 export class SecondViewModel{
@@ -40,6 +39,14 @@ export class SecondViewModel{
     this.changeCategory(0)
   }
 
+  // 进入查看书籍详情页
+  goBookDetail(book: BookItem) {
+    yTRouter.router2BookItemDetailPage(book)
+  }
+
+  // 添加至书包
+  addToBook(book: BookItem) {}
+
   // 更改选中的分类
   changeCategory(index: number, toIndex: boolean = false) {
     if(index == this.categoryIndex && index !=+ 0) return

features/feature/src/main/resources/rawfile/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <body style="font-size:16px;color:rgba(0,0,0,0.6);flex-shrink:0;font-style:normal;font-weight:normal;background-color:rgb(255, 255, 255);">
+
+    <div id="content"></div>
+    <script>
+        function writeHtml(str) {
+          const el = document.querySelector('#content');
+          el.innerHTML = str;
+        }
+    </script>
+
+    </body>
+</html>