feat: 完成 书籍 详情页面

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

@@ -0,0 +1,14 @@
+import { CustomTextStyle } from "../style/CustomTextStyle"
+
+// 书包组件
+@ComponentV2
+export struct SchoolBag {
+
+
+  build() {
+    Column(){
+      Image($r('[basic].media.icon_schoolbag_')).width(24).aspectRatio(1)
+      Text('书包').attributeModifier(new CustomTextStyle({size: 12, weight: 400}))
+    }
+  }
+}

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

@@ -0,0 +1,232 @@
+import { RouterPage, yTRouter } from 'basic';
+import { tagItemComp } from '../components/BuilderIndex';
+import { SchoolBag } from '../components/SchoolBag';
+import { CustomTextStyle } from '../style/CustomTextStyle';
+import { BookItemDetailViewModel } from './viewModel/BookItemDetailViewModel';
+import { PhotoPickerComponent } from '@ohos.file.PhotoPickerComponent';
+
+@ComponentV2
+@RouterPage
+struct BookItemDetailPage {
+  @Local vm: BookItemDetailViewModel = new BookItemDetailViewModel();
+
+  build() {
+    NavDestination() {
+      Column() {
+        Column(){
+          List(){
+            ListItem().height(this.vm.safeTop)
+
+            // 书籍封面
+            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')
+                    .height(344)
+                }
+                .width("100%").height('100%')
+                .alignItems(VerticalAlign.Center)
+                .justifyContent(FlexAlign.Center)
+                .padding({left: 20, right: 20, top: 10, bottom: 10})
+
+                Image($r('[basic].media.ic_back'))
+                  .width(24).aspectRatio(1)
+                  .onClick(() => { yTRouter.routerBack() })
+              }
+              .height(344)
+              .width("100%")
+              .backgroundColor(Color.White)
+              .padding({left: 14, right: 14})
+            }
+
+            // 借阅价
+            ListItem(){
+              Row(){
+                Column(){
+                  Text(){
+                    Span('借阅价 ')
+                    Span(`0.1`)
+                      .fontSize(24)
+                    Span(' 元/天')
+                  }.attributeModifier(new CustomTextStyle({size: 14, weight: 500}))
+
+                  Text(`市场售价：¥${30.5}`)
+                    .borderRadius(9)
+                    .backgroundColor(Color.White)
+                    .padding({left: 10, right: 10, top: 2, bottom: 2})
+                }
+
+                Column({space: 3}){
+                  Image($r('[basic].media.icon_book'))
+                    .width(28).aspectRatio(1)
+
+                  Text(`${1275}人已读`)
+                    .attributeModifier(new CustomTextStyle({size: 11, weight: 400, color: '#FFFFFF'}))
+                }
+              }
+              .width("100%")
+              .backgroundColor('#FED049')
+              .justifyContent(FlexAlign.SpaceBetween)
+              .padding({left: 21, right: 13, top: 10, bottom: 10})
+            }
+
+            // 书籍介绍
+            ListItem(){
+              Column({space: 12}){
+                Column({space: 8}){
+                  Text('我有友情要出租（拼音版）')
+                    .attributeModifier(new CustomTextStyle({size: 18, weight: 600}))
+
+                  Row({space: 8}){
+                    tagItemComp('情绪价值', '#4EB1EF', '#EDF7FD')
+                    tagItemComp('哄娃神器', '#4EB1EF', '#EDF7FD')
+                    tagItemComp('3-8岁', '#FC9911', '#FFF5E7')
+                  }
+
+                  Column(){
+                    Text(){
+                      Span('语言：中文\n')
+                      Span('作者：啊啊啊啊啊啊啊啊啊啊\n')
+                      Span('出版社：啊啊啊啊啊啊啊啊啊啊\n')
+                      Span('出版时间：2022-07-09\n')
+                    }
+                    .attributeModifier(new CustomTextStyle({size: 12, weight: 400, color: '#80000000'}))
+                  }
+                  .width("100%")
+                  .borderRadius(10)
+                  .backgroundColor('#FFF6F6F6')
+                  .justifyContent(FlexAlign.Start)
+                  .alignItems(HorizontalAlign.Start)
+                  .padding({left: 10, top: 7, right: 10, bottom: 7})
+                }
+                .padding(12)
+                .width("100%")
+                .borderRadius(10)
+                .backgroundColor(Color.White)
+                .alignItems(HorizontalAlign.Start)
+
+
+                // 本书书单
+                if(true){
+                  Column({space: 12}){
+                    Row(){
+                      Text('本书书单')
+                        .attributeModifier(new CustomTextStyle({size: 16, weight: 600}))
+
+                      Row({space: 5}){
+                        Text('更多')
+                          .attributeModifier(new CustomTextStyle({size: 12, weight: 600, color: '#FF888888'}))
+
+                        Image($r('[basic].media.ic_public_arrow_left'))
+                          .rotate({angle: 180})
+                          .fillColor('#FF888888')
+                          .width(7)
+                          .height(11)
+                      }
+                    }.width("100%")
+                    .justifyContent(FlexAlign.SpaceBetween)
+
+                    List({space: 15}){
+                      ForEach(new Array(5).fill(5), (item: string, index) => {
+                        ListItem(){
+                          Column({space: 12}){
+                            Image($r('[basic].media.png_TopRecommend'))
+                              .width(120)
+                              .aspectRatio(1)
+                              .borderRadius(16)
+                              .shadow({color: '#f1f1f1', radius: 5})
+
+                            Text('3月书单推荐')
+                              .attributeModifier(new CustomTextStyle({size: 14, weight: 600, color: '#FF000000'}))
+                          }
+                        }
+                      })
+                    }
+                    .height(160)
+                    .width("100%")
+                    .scrollBar(BarState.Off)
+                    .listDirection(Axis.Horizontal)
+                  }
+                  .borderRadius(10)
+                  .padding({left: 15, right: 15, top: 11, bottom: 11})
+                  .linearGradient({colors: [['#FFFFF6D9', 0], ['#FFFFFFFF', 1]]})
+                }
+
+
+                // 图书介绍
+                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})
+                    }
+
+                    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]]})
+                }
+              }
+              .backgroundColor('#F5F7F8')
+              .padding({ left: 16, right: 16, top: 12})
+            }
+
+            // 已经到底啦~
+            ListItem(){
+              Column(){
+                Text('已经到底啦~')
+                  .attributeModifier(new CustomTextStyle({size: 12, weight: 400, color: '#80000000'}))
+              }
+              .width("100%")
+              .padding({top: 9, bottom: 53})
+              .alignItems(HorizontalAlign.Center)
+            }
+          }.width("100%").height("100%").scrollBar(BarState.Off)
+        }.width("100%").layoutWeight(1)
+
+
+        // 书包 和 底部按钮
+        Row({space: 12}){
+          SchoolBag().margin({right: 9})
+
+          ForEach(['加入书包', '立刻借阅'], (item: string, index) => {
+            Row(){
+              Text(item)
+                .attributeModifier(new CustomTextStyle({size: 18, weight: 400}))
+            }
+            .layoutWeight(1)
+            .borderRadius(25)
+            .border({width: 2})
+            .backgroundColor('#FECF2F')
+            .padding({top: 10, bottom: 10})
+            .justifyContent(FlexAlign.Center)
+          })
+        }
+        .shadow({ color: '#f1f1f1', radius: 5, offsetY: -5})
+        .padding({bottom: this.vm.safeBottom, top: 10, left: 16, right: 16})
+      }
+      .width('100%')
+      .height('100%')
+      .backgroundColor('#F7F9FA')
+    }
+    .hideTitleBar(true)
+  }
+}
+
+
+@Builder
+function BookItemDetailBuilder() {
+  BookItemDetailPage()
+}

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

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

features/feature/src/main/ets/utils/RouterUtrils.ets

@@ -0,0 +1,7 @@
+import { yTRouter } from "basic";
+
+export class RouterUtils{
+  static router2BookItemDetailPage(){
+    yTRouter.pushPathByName('BookItemDetailPage', null)
+  }
+}

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

@@ -3,6 +3,7 @@ import { tagItemComp } from "../components/BuilderIndex"
 import { DeerSearch } from "../components/DeerSearch"
 import { ytBuildComp } from "../components/ytBuildComp"
 import { CustomTextStyle } from "../style/CustomTextStyle"
+import { RouterUtils } from "../utils/RouterUtrils"
 import { MainViModel } from "./viewModel/MainViewModel"
 
 @ComponentV2
@@ -132,6 +133,7 @@ export struct MainView {
                       .aspectRatio(152/180)
                       .backgroundColor(Color.White)
                       .border({width: 2, color: '#000000'})
+                      .onClick(() => { RouterUtils.router2BookItemDetailPage() })
                     }
                   })
                 }

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

@@ -19,6 +19,11 @@
       "name": "QAPage",
       "pageSourceFile": "src/main/ets/pages/QAPage.ets",
       "buildFunction": "QABuilder"
+    },
+    {
+      "name": "BookItemDetailPage",
+      "pageSourceFile": "src/main/ets/pages/BookItemDetailPage.ets",
+      "buildFunction": "BookItemDetailBuilder"
     }
   ]
 }