feat: 修改UI结构，完成 借阅问答页面

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

@@ -90,6 +90,11 @@ class YTRouter extends NavPathStack {
   router2BookListDetailPage(){
     this.pushPathByName('BookListDetailPage', null)
   }
+
+  // 跳转至借阅问答页面
+  router2QAPage(){
+    this.pushPathByName('QAPage', null)
+  }
 }
 
 export const yTRouter = YTRouter.getInstance()

commons/basic/src/main/resources/base/media/icon_bottom.svg

@@ -0,0 +1,15 @@
+
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<mask id="mask0_4902_1202" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="22" height="22">
+<rect width="22" height="22" transform="matrix(1 0 0 -1 0 22)" fill="url(#pattern0_4902_1202)"/>
+</mask>
+<g mask="url(#mask0_4902_1202)">
+<rect width="22" height="22" fill="#999999"/>
+</g>
+<defs>
+<pattern id="pattern0_4902_1202" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_4902_1202" transform="scale(0.0227273)"/>
+</pattern>
+<image id="image0_4902_1202" width="44" height="44" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAAaVJREFUWEft1rFKA0EQBuB/9gimshDD5QGsBEUwEcFGQRAi2FvaiFYWeYEUdpY2ChbWNoJoBGMpKqm08BUkF+1ERMzuSEBJTDTnrntgYK69mb2f7+aGI/TZRX2WFxI46TcmwiLcISAjISMhI5H0DIiwCPcWkD3MJ+EYAipAmQtc1q+oBONzarwKczmb0cTHRJQD8Z3SWKVCdP0vA/NZZkJrtUuEPND8zyYG+FEZLKEaVX1JexFuyWISoFcQ7YHNMkDDAN8qg3Vf0n8O/FWWXljxRpCK9tEIc0ZjB6Bxn9J/Ctwly9hS6domzaHBJSjMhFNG48intHPgn2SbYds/Mq6E0z6lnQL3ku3cCL6lrQP/VrYruCdpq8BcHhrUlKoQfWyDtpmN27XfSmuzQosPN3G97fetAr+dZmcV4RzAMysuNrdB58zGPbw10xhVhCItRNtxPc6BuTwyAPW0ppnug3Tt0DZs88Gf0jDII+ADmq9HiQW2OTipWquRSCqEzbkS2EbLpVaEXdRsekTYRsulVoRd1Gx6RNhGy6VWhF3UbHpE2EbLpfYdKcrMLTdZdJoAAAAASUVORK5CYII="/>
+</defs>
+</svg>

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

@@ -0,0 +1,134 @@
+import { BasicType, RouterPage, YTHeader } from 'basic'
+import { CustomTextStyle } from '../style/CustomTextStyle'
+
+// 借阅问答页面
+@ComponentV2
+struct QAPage {
+  iconList: Array<Resource> = []
+  titleList: Array<string> = ['资质', '关于', '下单', '收货', '还书', '售后']
+
+  build() {
+    NavDestination() {
+      Column() {
+        YTHeader({
+          defaultStyle: {title: "借阅问答"},
+          bgc: Color.White
+        })
+
+        Column(){
+          List({space: 16}){
+            ListItem()
+
+            ForEach(this.titleList, (item: string, index) => {
+              ListItem(){
+                Column({space: 10}){
+                  this.titleBuilder($r('[basic].media.icon_schoolbag_'), item)
+
+                  QAItem()
+                }
+              }
+            })
+          }
+          .width('100%')
+          .height('100%')
+          .scrollBar(BarState.Off)
+          .padding({left: 18, right: 18})
+        }
+        .width('100%')
+        .layoutWeight(1)
+      }
+      .width('100%')
+      .height('100%')
+      .backgroundColor('#F7F9FA')
+    }
+    .hideTitleBar(true)
+  }
+
+  @Builder
+  titleBuilder(icon: Resource,  title: string){
+    Row({space: 6}){
+      Image(icon)
+        .width(19)
+        .aspectRatio(1)
+
+      Text(title)
+        .attributeModifier(new CustomTextStyle({size: 16, weight: 500}))
+    }
+    .width('100%')
+    .justifyContent(FlexAlign.Start)
+  }
+}
+
+@Builder
+function QABuilder() {
+  QAPage()
+}
+
+@ComponentV2
+struct QAItem {
+  @Param qaList: Array<BasicType> = [
+    { text: '关于鹿学长', message: '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊' },
+    { text: '平台的书是正版吗？', message: '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊' },
+    { text: '物流范围以及物流服务', message: '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊' },
+    { text: '会员借阅服务协议', message: '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊' },
+  ]
+
+  @Local openIndex: number = -1
+
+  openDetail(index: number){
+    this.getUIContext().animateTo({ duration: 200 }, () => {
+      if(this.openIndex == index) this.openIndex = -1
+      else this.openIndex = index
+    })
+  }
+
+  build() {
+    Column() {
+      ForEach(this.qaList, (item: BasicType, index) => {
+        Column({space: 11}){
+          Row(){
+            Text(item.text)
+              .attributeModifier(new CustomTextStyle({size: 15, weight: 500, color: '#333333'}))
+
+            Row(){
+              Image($r('[basic].media.icon_bottom'))
+                .width(16)
+                .aspectRatio(1)
+                .rotate({angle: this.openIndex == index ? 180 : 0})
+            }
+            .width(22)
+            .aspectRatio(1)
+            .alignItems(VerticalAlign.Center)
+            .justifyContent(FlexAlign.Center)
+          }
+          .width('100%')
+          .onClick(() => { this.openDetail(index) })
+          .justifyContent(FlexAlign.SpaceBetween)
+
+          if(this.openIndex == index){
+            Row(){
+              Text(item.message)
+                .attributeModifier(new CustomTextStyle({size: 15, weight: 500, color: '#999999'}))
+            }
+            .width('100%')
+            .transition(TransitionEffect.OPACITY
+              .combine(TransitionEffect.translate({ y: -20 }))
+              .animation({ duration: 200, curve: Curve.Friction}))
+          }
+        }
+        .width('100%')
+
+        if(index != this.qaList.length - 1) {
+          Divider()
+            .height(1)
+            .width('100%')
+            .margin({top: 15, bottom: 15})
+            .backgroundColor('#F0F0F0')
+        }
+      })
+    }
+    .borderRadius(8)
+    .backgroundColor(Color.White)
+    .padding({left: 15, top: 17, right: 15, bottom: 17})
+  }
+}

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

@@ -1,4 +1,4 @@
-import { BasicType } from "basic"
+import { BasicType, yTRouter } from "basic"
 import { tagItemComp } from "../components/BuilderIndex"
 import { DeerSearch } from "../components/DeerSearch"
 import { ytBuildComp } from "../components/ytBuildComp"
@@ -181,13 +181,13 @@ export struct MainView {
             .backgroundColor('#FECF2F')
             .padding({top: 10, left: 6, right: 6, bottom: 10})
             .attributeModifier(new CustomTextStyle({size: 12, weight: 600}))
-            // .shadow({color: '#000000', radius: 10})
         }
         .margin({bottom: 150, right: 16})
         .alignRules({
           right: { anchor: '__container__', align: HorizontalAlign.End},
           bottom: { anchor: '__container__', align: VerticalAlign.Bottom}
         })
+        .onClick(() => { yTRouter.router2QAPage() })
 
         if(this.vm.scrollIndex > 0){
           Row(){

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

@@ -36,119 +36,114 @@ export struct SecondView {
 
       Column(){
         RelativeContainer(){
-          // 页面的 Title
           Column(){
-            Row(){
+            // 页面的 Title
+            Column(){
               Row(){
-                List({space: 22, scroller: this.vm.categoryControl}){
-                  ForEach(this.vm.categoryList, (item: string, index) => {
-                    ListItem(){
-                      Column(){
-                        Text(item)
-                          .zIndex(99)
-                          .onClick(() => { this.vm.changeCategory(index) })
-                          .attributeModifier(new CustomTextStyle({size: 16, weight: 600, color: this.vm.categoryIndex == index ? '#FF111111' : '#FF777777'}))
-
-                        if(this.vm.categoryIndex == index){
-                          Image($r('[basic].media.icon_SelectBg'))
-                            .width(45)
-                            .height(16)
-                            .margin({top:-10})
-                            .transition(TransitionEffect.asymmetric(TransitionEffect.move(TransitionEdge.TOP), TransitionEffect.move(TransitionEdge.TOP)).animation({ duration: 100, curve: Curve.Smooth }))
+                Row(){
+                  List({space: 22, scroller: this.vm.categoryControl}){
+                    ForEach(this.vm.categoryList, (item: string, index) => {
+                      ListItem(){
+                        Column(){
+                          Text(item)
+                            .zIndex(99)
+                            .onClick(() => { this.vm.changeCategory(index) })
+                            .attributeModifier(new CustomTextStyle({size: 16, weight: 600, color: this.vm.categoryIndex == index ? '#FF111111' : '#FF777777'}))
+
+                          if(this.vm.categoryIndex == index){
+                            Image($r('[basic].media.icon_SelectBg'))
+                              .width(45)
+                              .height(16)
+                              .margin({top:-10})
+                              .transition(TransitionEffect.asymmetric(TransitionEffect.move(TransitionEdge.TOP), TransitionEffect.move(TransitionEdge.TOP)).animation({ duration: 100, curve: Curve.Smooth }))
+                          }
                         }
+                        .alignItems(HorizontalAlign.Center)
                       }
-                      .alignItems(HorizontalAlign.Center)
-                    }
-                  })
-                }
-                .height(40)
-                .width("100%")
-                .scrollBar(BarState.Off)
-                .listDirection(Axis.Horizontal)
-              }.layoutWeight(1)
+                    })
+                  }
+                  .height(40)
+                  .width("100%")
+                  .scrollBar(BarState.Off)
+                  .listDirection(Axis.Horizontal)
+                }.layoutWeight(1)
 
-              Row(){
-                Image($r('[basic].media.icon_expension'))
-                  .width(10)
-                  .height(8)
-                  .rotate({ angle: this.vm.openTypeDialog ? 180 : 0 })
-                  .animation({duration: 200, curve: Curve.Smooth})
-              }
-              .padding({left: 16, top: 2})
-              .onClick(() => { this.vm.openCategoryDialog() })
+                Row(){
+                  Image($r('[basic].media.icon_expension'))
+                    .width(10)
+                    .height(8)
+                    .rotate({ angle: this.vm.openTypeDialog ? 180 : 0 })
+                    .animation({duration: 200, curve: Curve.Smooth})
+                }
+                .padding({left: 16, top: 2})
+                .onClick(() => { this.vm.openCategoryDialog() })
 
-            }.alignItems(VerticalAlign.Top)
+              }.alignItems(VerticalAlign.Top)
 
-            Row(){
               Row(){
-                ForEach(['最新', '最热'], (item: string, index: number) => {
-                  Text(item)
-                    .borderRadius(15)
-                    .padding({left: 12, top: 5, right: 12, bottom: 5})
-                    .attributeModifier(new CustomTextStyle({size: 14, weight: 600}))
-                    .border({width: 2, color: this.vm.sortType == index ? '#FF000000' : Color.Transparent})
-                    .backgroundColor(this.vm.sortType == index ? '#FFFECF2F' : Color.Transparent)
-                    .onClick(() => { this.vm.changeSortType(index) })
-                })
-              }
+                Row(){
+                  ForEach(['最新', '最热'], (item: string, index: number) => {
+                    Text(item)
+                      .borderRadius(15)
+                      .padding({left: 12, top: 5, right: 12, bottom: 5})
+                      .attributeModifier(new CustomTextStyle({size: 14, weight: 600}))
+                      .border({width: 2, color: this.vm.sortType == index ? '#FF000000' : Color.Transparent})
+                      .backgroundColor(this.vm.sortType == index ? '#FFFECF2F' : Color.Transparent)
+                      .onClick(() => { this.vm.changeSortType(index) })
+                  })
+                }
 
-              Row({space: 16}){
-                Row({space: 6}){
-                  Blank()
-                    .width(14)
-                    .aspectRatio(1)
-                    .borderRadius(2)
-                    .border({width: 2, color: '#FF000000'})
-                    .backgroundColor(this.vm.isRead ? '#FFFECF2F' : Color.White)
-                  Text('未读')
+                Row({space: 16}){
+                  Row({space: 6}){
+                    Blank()
+                      .width(14)
+                      .aspectRatio(1)
+                      .borderRadius(2)
+                      .border({width: 2, color: '#FF000000'})
+                      .backgroundColor(this.vm.isRead ? '#FFFECF2F' : Color.White)
+                    Text('未读')
+                      .attributeModifier(new CustomTextStyle({size: 14, weight: 400}))
+                  }.onClick(() => { this.vm.changeIsRead() })
+
+                  Text(this.vm.showMode ? '封面模式' : '列表模式')
+                    .onClick(() => { this.vm.changeShowMode() })
                     .attributeModifier(new CustomTextStyle({size: 14, weight: 400}))
-                }.onClick(() => { this.vm.changeIsRead() })
-
-                Text(this.vm.showMode ? '封面模式' : '列表模式')
-                  .onClick(() => { this.vm.changeShowMode() })
-                  .attributeModifier(new CustomTextStyle({size: 14, weight: 400}))
+                }
               }
+              .width("100%")
+              .margin({top: 10})
+              .justifyContent(FlexAlign.SpaceBetween)
             }
             .width("100%")
-            .margin({top: 10})
-            .justifyContent(FlexAlign.SpaceBetween)
-          }
-          .width("100%")
-          .id('classify')
-          .backgroundColor(Color.White)
-          .borderRadius({bottomLeft: 20, bottomRight: 20})
-          .padding({left: 16, right: 16, bottom: 18})
-          .alignRules({
-            left: { anchor: '__container__', align: HorizontalAlign.Start },
-            top: { anchor: '__container__', align: VerticalAlign.Top }
-          })
-
+            .backgroundColor(Color.White)
+            .borderRadius({bottomLeft: 20, bottomRight: 20})
+            .padding({left: 16, right: 16, bottom: 18})
 
-          // 书籍列表项
-          Column(){
-            List({space: 12}){
-              ListItem()
+            // 书籍列表项
+            Column(){
+              List({space: 12}){
+                ListItem()
 
-              Repeat(this.vm.bookList)
-                .each((item) => {
-                  bookItemComp(item.item, () => {})
-                })
+                Repeat(this.vm.bookList)
+                  .each((item) => {
+                    bookItemComp(item.item, () => {})
+                  })
+              }
+              .width("100%")
+              .height("100%")
+              .scrollBar(BarState.Off)
             }
+            .id('list')
             .width("100%")
-            .height("100%")
-            .scrollBar(BarState.Off)
-          }
-          .id('list')
-          .width("100%")
-          .layoutWeight(1)
-          .padding({left: 16, right: 16})
-          .backgroundColor(Color.Transparent)
+            .layoutWeight(1)
+            .padding({left: 16, right: 16})
+            .backgroundColor(Color.Transparent)
+          }.width("100%").height("100%")
           .alignRules({
             left: { anchor: '__container__', align: HorizontalAlign.Start },
-            top: { anchor: 'classify', align: VerticalAlign.Bottom }
+            top: { anchor: '__container__', align: VerticalAlign.Top }
           })
 
-
           // 分类弹窗
           if(this.vm.openTypeDialog){
             Column(){

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

@@ -11,7 +11,9 @@ export class MainViModel{
     {
       src: $r('[basic].media.png_question'),
       text: '借阅问答',
-      click: () => {}
+      click: () => {
+        yTRouter.router2QAPage()
+      }
     }, {
       src: $r('[basic].media.png_bookProcedure'),
       text: '借阅流程',

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

@@ -14,6 +14,11 @@
       "name": "BookListDetailPage",
       "pageSourceFile": "src/main/ets/pages/BookListDetailPage.ets",
       "buildFunction": "BookListDetailBuilder"
+    },
+    {
+      "name": "QAPage",
+      "pageSourceFile": "src/main/ets/pages/QAPage.ets",
+      "buildFunction": "QABuilder"
     }
   ]
 }