feat: 完成 书单详情 页面相关UI和交互

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

@@ -85,6 +85,11 @@ class YTRouter extends NavPathStack {
   router2BookSearchPage(){
     this.pushPathByName('BookSearchPage', null)
   }
+
+  // 跳转至书籍详情页面
+  router2BookListDetailPage(){
+    this.pushPathByName('BookListDetailPage', null)
+  }
 }
 
 export const yTRouter = YTRouter.getInstance()

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

@@ -1,5 +1,7 @@
+import { yTRouter } from "basic"
 import { CustomTextStyle } from "../style/CustomTextStyle"
 
+// 标签Item
 @Builder
 export function tagItemComp(text: string, fontColor: ResourceColor, bgColor: ResourceColor){
   Row(){
@@ -11,9 +13,12 @@ export function tagItemComp(text: string, fontColor: ResourceColor, bgColor: Res
   .borderRadius({topLeft: 8.5, topRight: 8.5, bottomRight: 8.5, bottomLeft: 0})
 }
 
+
+
+
 // 书单Item
 @Builder
-export function bookItemComp(title: string){
+export function bookListItemComp(title: string){
   Row({space: 11}){
     Image($r('[basic].media.png_TopRecommend'))
       .width(86)
@@ -42,4 +47,55 @@ export function bookItemComp(title: string){
   .width('100%')
   .borderRadius(12)
   .border({width: 2, color: '#FF000000'})
+  .onClick(() => {
+    yTRouter.router2BookListDetailPage()
+  })
+}
+
+
+
+// 书籍Item
+@Builder
+export function bookItemComp(title: string, onClick: () => void){
+  Row({space: 11}){
+    Image($r('[basic].media.png_TopRecommend'))
+      .width(86)
+      .aspectRatio(1)
+      .borderRadius(12)
+
+    Column({space: 3}){
+      Text(title)
+        .attributeModifier(new CustomTextStyle({size: 14, weight: 600}))
+
+      Text('豆瓣平均分9.2分推荐！红红火火恍恍惚惚哈哈哈哈哈给红红火火恍恍惚惚哈哈哈...')
+        .width('100%')
+        .attributeModifier(new CustomTextStyle({size: 12, weight: 400, color: '#FF555555'}))
+
+      Blank()
+        .layoutWeight(1)
+
+      Row(){
+        Row({space: 13}){
+          tagItemComp('情绪价值', '#FF4EB1EF', '#FFEDF7FD')
+          tagItemComp('3-8岁', '#FFFC9911', '#FFFFF5E7')
+        }
+
+        Image(true ? $r('[basic].media.icon_deerIncrease') : $r('[basic].media.icon_reduce'))
+          .width(24)
+          .aspectRatio(1)
+      }
+      .width("100%")
+      .justifyContent(FlexAlign.SpaceBetween)
+    }
+    .layoutWeight(1)
+    .alignItems(HorizontalAlign.Start)
+  }
+  .padding(8)
+  .height(102)
+  .width('100%')
+  .borderRadius(12)
+  .border({width: 2, color: '#FF000000'})
+  .onClick(() => {
+    onClick()
+  })
 }

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

@@ -0,0 +1,138 @@
+import { RouterPage, YTHeader } from 'basic';
+import { bookItemComp } from '../components/BuilderIndex';
+import { CustomTextStyle } from '../style/CustomTextStyle';
+import { BookListDetailViewModel } from './viewModel/BookListDetailViewModel';
+
+@ComponentV2
+@RouterPage
+struct BookListDetailPage {
+  vm: BookListDetailViewModel = new BookListDetailViewModel();
+
+  build() {
+    NavDestination() {
+      RelativeContainer(){
+        Column() {
+          YTHeader({
+            defaultStyle: { title: '书单详情' },
+            bgc: Color.White
+          })
+
+          Column(){
+            List(){
+              ListItem(){
+                Column(){
+                  Text('10月书单推荐')
+                    .attributeModifier(new CustomTextStyle({size: 18, weight: 600, color: '#FF111111'}))
+
+                  Row(){
+                    Text('鹿学长绘本')
+                      .attributeModifier(new CustomTextStyle({size: 14, weight: 400, color: '#FF555555'}))
+
+                    Row(){
+                      Text('2028人')
+                        .attributeModifier(new CustomTextStyle({size: 14, weight: 600, color: '#FF111111'}))
+                    }
+                  }
+                  .width('100%')
+                  .margin({top: 30})
+                  .justifyContent(FlexAlign.SpaceBetween)
+
+                  Column(){
+                    Text('拾起落叶的信笺，共读一个暖哄哄的通话')
+                      .attributeModifier(new CustomTextStyle({size: 14, weight: 400, color: '#FF555555'}))
+                  }
+                  .height(100)
+                  .width('100%')
+                  .margin({top: 5})
+                  .padding({top: 20, left: 5})
+                  .alignItems(HorizontalAlign.Start)
+                  .backgroundImageSize({width: '100%', height: '100%'})
+                  .backgroundImage($r('[basic].media.png_ListDetailBg'))
+                }
+                .padding({bottom: 13})
+                .backgroundColor(Color.White)
+                .padding({left: 16, right: 16})
+                .alignItems(HorizontalAlign.Start)
+                .borderRadius({bottomLeft: 16, bottomRight: 16})
+              }
+
+              ListItem(){
+                Row(){
+                  Column(){
+                    Text(`共95册`)
+                      .zIndex(99)
+                      .attributeModifier(new CustomTextStyle({size: 18, weight: 600}))
+
+                    Image($r('[basic].media.icon_SelectBg'))
+                      .width(45)
+                      .height(16)
+                      .margin({top:-10})
+                  }
+
+                  Text(`已读4本`)
+                    .attributeModifier(new CustomTextStyle({size: 14, weight: 500, color: '#FF7C7D7D'}))
+                }
+                .width('100%')
+                .justifyContent(FlexAlign.SpaceBetween)
+              }
+              .margin({top: 12})
+              .padding({left: 16, right: 16})
+
+              ForEach(new Array(10).fill('0'), (item: string, index) => {
+                ListItem(){
+                  Column(){
+                    bookItemComp('我不愿嫉妒', () => { this.vm.increaseIndex = index })
+                  }.alignItems(HorizontalAlign.End).justifyContent(FlexAlign.End)
+                }
+                .margin({top: 8})
+                .padding({left: 16, right: 16})
+              })
+
+              ListItem().height(this.vm.safeBottom)
+            }
+            .width('100%')
+            .height('100%')
+            .scrollBar(BarState.Off)
+            .backgroundColor('#F7F9FA')
+          }
+          .width("100%")
+          .layoutWeight(1)
+          .backgroundColor(Color.White)
+        }
+
+        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 })
+          })
+        }
+        .margin({ bottom: 53, right: 31})
+        .backgroundColor(Color.Transparent)
+        .alignRules({
+          right: { anchor: '__container__', align: HorizontalAlign.End },
+          bottom: { anchor: '__container__', align: VerticalAlign.Bottom}
+        })
+      }
+    }
+    .hideTitleBar(true)
+  }
+}
+
+
+@Builder
+function BookListDetailBuilder() {
+  BookListDetailPage()
+}

features/feature/src/main/ets/pages/BookListPage.ets

@@ -1,10 +1,8 @@
 import { RouterPage, YTHeader } from 'basic';
 import { DeerSearch } from '../components/DeerSearch';
 import { CustomTextStyle } from '../style/CustomTextStyle';
-import { RootColumnStyle } from '../style/RootColumnStyle';
 import { BookListViewModel } from './viewModel/BookListViewModel';
-import { ReadPageComponent } from '@hms.core.readerservice.readerComponent';
-import { bookItemComp } from '../components/BuilderIndex';
+import { bookListItemComp } from '../components/BuilderIndex';
 
 // 精选书单
 @ComponentV2
@@ -73,7 +71,7 @@ struct BookListPage {
 
             Repeat(this.vm.bookList)
               .each((item) => {
-                bookItemComp(item.item)
+                bookListItemComp(item.item)
               })
           }
           .width("100%")

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

@@ -0,0 +1,8 @@
+import { YTAvoid } from "basic";
+
+@ObservedV2
+export class BookListDetailViewModel{
+  @Trace safeBottom: number = AppStorage.get(YTAvoid.SAFE_BOTTOM_KEY) as number
+
+  @Trace increaseIndex: number = -1
+}

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

@@ -156,7 +156,7 @@ export struct SecondView {
       onFinish: () => {
         console.info('move play end')
         // 购物车图标抖动动效；
-        this.animationImageShake();
+        // this.animationImageShake();
       }
     }, () => {
       this.toggle = !this.toggle // 通过this.toggle变化组件的位置

features/feature/src/main/resources/base/profile/router_map.json

@@ -9,6 +9,11 @@
       "name": "BookSearchPage",
       "pageSourceFile": "src/main/ets/pages/BookSearchPage.ets",
       "buildFunction": "BookSearchBuilder"
+    },
+    {
+      "name": "BookListDetailPage",
+      "pageSourceFile": "src/main/ets/pages/BookListDetailPage.ets",
+      "buildFunction": "BookListDetailBuilder"
     }
   ]
 }