feat: 完成 借阅流程 相关UI和交互

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

@@ -95,6 +95,11 @@ class YTRouter extends NavPathStack {
   router2QAPage(){
     this.pushPathByName('QAPage', null)
   }
+
+  // 跳转至借阅流程页面
+  router2BorrowProcessPage(){
+    this.pushPathByName('BorrowingProcessPage', null)
+  }
 }
 
 export const yTRouter = YTRouter.getInstance()

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

@@ -0,0 +1,163 @@
+import { BasicType, RouterPage, YTAvoid, YTHeader } from 'basic'
+import { CustomTextStyle } from '../style/CustomTextStyle'
+
+@ComponentV2
+@RouterPage
+struct BorrowingProcessPage {
+  @Local currentIndex: number = 0
+
+  tabControl: TabsController = new TabsController()
+  safeBottom: number = AppStorage.get(YTAvoid.SAFE_BOTTOM_KEY) as number
+
+
+  iconForEach: Array<BasicType> = [
+    { text:"选书", acSrc: $r('[basic].media.icon_process_select'), src: $r('[basic].media.icon_process_select_') },
+    { text: '下单', acSrc: $r('[basic].media.icon_process_order'), src: $r('[basic].media.icon_process_orde_') },
+    { text: '配送', acSrc: $r('[basic].media.icon_process_delivery'), src: $r('[basic].media.icon_process_delivery_') },
+    { text: '还书', acSrc: $r('[basic].media.icon_process_return'), src: $r('[basic].media.icon_process_return_') },
+    { text: '完成', acSrc: $r('[basic].media.icon_process_complete'), src: $r('[basic].media.icon_process_complete_') }
+  ]
+
+  pngList: Array<BasicType> = [
+    { text: '1.选择图书，加入背包', message: '找到喜欢的书，在图书详情页点击加入背包', src: $r('[basic].media.png_process1') , date: '去还书', click: () => {
+
+    }},
+    { text: '2.勾选图书，下单借阅', message: '在书包勾选图书，点击立即借阅，确认后点击（提交订单）即可。', src: $r('[basic].media.png_process2') , date: '去下单', click: () => {
+
+    }},
+    { text: '3.快速到家，快速阅读', message: '订单提交成功后，等待快递送书上门，即开启快乐的阅读时光。', src: $r('[basic].media.png_process3') , date: '查看物流', click: () => {
+
+    }},
+    { text: '4.预约还书，继续借阅', message: '阅读完成后，在订单页点击（预约还书），在线预约快递上门取书，即可再次下单借阅。', src: $r('[basic].media.png_process4') , date: '去还书', click: () => {
+
+    }},
+    { text: '5.验收入库，借阅完成', message: '仓库人员会验收归还的图书，检查无误后，做三重消毒处理，再入库等待下次借阅。', src: $r('[basic].media.png_process5'), date: '去查看', click: () => {
+
+    } }
+  ]
+
+
+  build() {
+    NavDestination() {
+      Column() {
+        YTHeader({
+          defaultStyle: {title: '借阅流程'}
+        })
+
+        Column(){
+          Text('15秒快速了解借阅流程')
+            .attributeModifier(new CustomTextStyle({size: 18, weight: 500}))
+
+          processComp({
+            forEach: this.iconForEach,
+            currentIndex: this.currentIndex,
+            changeIndex: (index: number) => {
+              this.currentIndex = index
+              this.tabControl.changeIndex(index)
+            }
+          })
+            .margin({top: 14})
+
+          Column(){
+            Tabs({ controller: this.tabControl }) {
+              ForEach(this.pngList, (item: BasicType, index) => {
+                TabContent(){
+                  Column({space: 5}){
+                    Text(item.text)
+                      .attributeModifier(new CustomTextStyle({size: 14, weight: 500}))
+
+                    Text(item.message)
+                      .attributeModifier(new CustomTextStyle({size: 15, weight: 500, color: '#FF999999'}))
+
+                    Image(item.src)
+                      .width('100%')
+
+                    Blank().layoutWeight(1)
+
+                    Row(){
+                      Text(item.date)
+                        .attributeModifier(new CustomTextStyle({size: 18, weight: 400}))
+                    }
+                    .width('100%')
+                    .borderRadius(25)
+                    .border({width: 2})
+                    .backgroundColor('#FECF2F')
+                    .padding({top: 10, bottom: 10})
+                    .justifyContent(FlexAlign.Center)
+                    .onClick(item.click)
+                  }
+                  .width('100%')
+                  .justifyContent(FlexAlign.Start)
+                  .alignItems(HorizontalAlign.Start)
+                  .padding({bottom: this.safeBottom, top: 18})
+                }.margin({right: 10})
+              })
+            }
+            .barHeight(0)
+            .height('100%')
+            .onChange((index: number) => {
+              this.currentIndex = index
+            })
+          }
+          .width("100%")
+          .layoutWeight(1)
+        }
+        .width('100%')
+        .layoutWeight(1)
+        .alignItems(HorizontalAlign.Center)
+        .padding({left: 30, right: 30, top: 27})
+      }
+      .width('100%')
+      .height('100%')
+    }
+    .hideTitleBar(true)
+  }
+}
+
+
+@Builder
+function BorrowingProcessBuilder() {
+  BorrowingProcessPage()
+}
+
+
+@ComponentV2
+struct processComp{
+  @Param forEach: Array<BasicType> = []
+  @Param currentIndex: number = 0
+
+  @Event changeIndex: (index: number) => void
+
+  build() {
+    Column({space: 2}){
+      Row(){
+        ForEach(this.forEach, (item: BasicType, index) => {
+          Image(this.currentIndex == index ? item.src : item.acSrc)
+            .width(36)
+            .aspectRatio(1)
+            .onClick(() => { this.changeIndex(index) })
+
+          if(index != this.forEach.length - 1) {
+            Divider()
+              .height(1)
+              .layoutWeight(1) // 方式一：通过borderWidth+borderStyle实现
+              .borderWidth(1)
+              .borderColor('#C1C1C1')
+              .margin({left: 8, right: 8})
+              .borderStyle(BorderStyle.Dashed)
+          }
+        })
+      }
+
+      Row(){
+        ForEach(this.forEach, (item: BasicType, index) => {
+          Text(item.text)
+            .onClick(() => { this.changeIndex(index) })
+            .attributeModifier(new CustomTextStyle({size: 16, weight: 500, color: index == this.currentIndex ? '#000000' : '#FFC1C1C1'}))
+        })
+      }
+      .width('100%')
+      .justifyContent(FlexAlign.SpaceBetween)
+    }
+  }
+}

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

@@ -17,7 +17,9 @@ export class MainViModel{
     }, {
       src: $r('[basic].media.png_bookProcedure'),
       text: '借阅流程',
-      click: () => {}
+      click: () => {
+        yTRouter.router2BorrowProcessPage()
+      }
     }, {
       src: $r('[basic].media.png_bookstore'),
       text: '精选书单',

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

@@ -29,6 +29,11 @@
       "name": "DiaLogPage",
       "pageSourceFile": "src/main/ets/pages/DiaLogPage.ets",
       "buildFunction": "DiaLogBuilder"
+    },
+    {
+      "name": "BorrowingProcessPage",
+      "pageSourceFile": "src/main/ets/pages/BorrowingProcessPage.ets",
+      "buildFunction": "BorrowingProcessBuilder"
     }
   ]
 }