feat: 完成 押金 相关功能的UI和逻辑交互

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

@@ -166,6 +166,21 @@ class YTRouter extends NavPathStack {
   router2BookSearchResultPage(key: string){
     this.pushPathByName('BookSearchResultPage', key)
   }
+
+  // 进入查看押金页面
+  router2CashPledgePage(){
+    this.pushPathByName('CashPledgePage', null)
+  }
+
+  // 进入缴纳押金页面
+  router2CashPledgeSecond(){
+    this.pushPathByName('CashPledgeSecond', null)
+  }
+
+  // 进入缴纳押金记录页面
+  router2CashPledgeRecord(){
+    this.pushPathByName('CashPledgeRecord', null)
+  }
 }
 
 export const yTRouter = YTRouter.getInstance()

features/feature/src/main/ets/pages/CashPledge/CashPledgePage.ets

@@ -0,0 +1,119 @@
+import { DiaLogCompControl, YTHeader, YTRequest, yTRouter } from 'basic'
+import { buttonComp } from '../../components/BuilderIndex'
+import { CustomTextStyle } from '../../style/CustomTextStyle'
+
+@ComponentV2
+struct CashPledgePage {
+
+  // 打开弹窗
+  openDiaLog(){
+    let control: DiaLogCompControl = new DiaLogCompControl(this.getUIContext())
+    yTRouter.router2CenterDialog({
+      control: control,
+      builder: () => { this.DiaLog(control) }
+    })
+  }
+
+
+  // 前往缴纳押金页面
+  router2CashPledgeSecond(){
+    yTRouter.router2CashPledgeSecond()
+  }
+
+  // 前往交易记录页面
+  router2CashPledgeRecord(){
+    yTRouter.router2CashPledgeRecord()
+  }
+
+  build() {
+    NavDestination() {
+      Column({space: 12}) {
+        YTHeader({
+          defaultStyle: { title: '租赁押金' },
+          bgc: Color.White
+        })
+
+        Column(){
+          Row(){
+            Text('如何退押金')
+              .attributeModifier(new CustomTextStyle({size: 12, weight: 500, color: '#FECF2F'}))
+              .onClick(() => { this.openDiaLog() })
+
+            Text('交易记录')
+              .attributeModifier(new CustomTextStyle({size: 12, weight: 500, color: '#FECF2F'}))
+              .onClick(() => { this.router2CashPledgeRecord() })
+          }.width('100%')
+          .justifyContent(FlexAlign.SpaceBetween)
+
+          Column(){
+            Text('自用卡')
+              .attributeModifier(new CustomTextStyle({size: 12, weight: 500, color: '#FFFFFF'}))
+
+            Text(`298.00`)
+              .attributeModifier(new CustomTextStyle({size: 28, weight: 500, color: '#FFFFFF'}))
+
+          }.width('100%').height(104)
+          .margin({top: 12})
+          .alignItems(HorizontalAlign.Start)
+          .justifyContent(FlexAlign.SpaceBetween)
+          .backgroundImage($r('[basic].media.png_cashBg'))
+          .padding({left: 15, right: 15, top: 14, bottom: 15})
+          .backgroundImageSize({width: '100%', height: '100%'})
+
+          Row(){
+            Text('自用卡')
+              .attributeModifier(new CustomTextStyle({size: 14, weight: 500, color: '#000000'}))
+
+            Row({space: 10}){
+              Text('去缴纳')
+                .attributeModifier(new CustomTextStyle({size: 14, weight: 500, color: '#C7C7CC'}))
+
+              Image($r('[basic].media.ic_public_arrow_left'))
+                .rotate({angle: 180})
+                .width(5.5)
+                .height(11)
+                .fillColor('#C7C7CC')
+            }
+          }.margin({top: 16}).width('100%')
+          .padding(15)
+          .borderRadius(8)
+          .backgroundColor(Color.White)
+          .justifyContent(FlexAlign.SpaceBetween)
+          .onClick(()=> { this.router2CashPledgeSecond() })
+        }.width('100%')
+        .layoutWeight(1)
+        .justifyContent(FlexAlign.Start)
+        .padding({left: 16, right: 16})
+      }
+      .backgroundColor('#F7F9FA')
+    }
+    .hideTitleBar(true)
+  }
+
+  @Builder
+  DiaLog(control: DiaLogCompControl){
+    Column(){
+      Text('如何退押金')
+        .attributeModifier(new CustomTextStyle({size: 16, weight: 600, color: '#000000'}))
+
+      Text('会员卡到期并且所有订单结算完成后，在本页面点击“押金退还”，预计到账时间0-3个工作日，原路退回。')
+        .attributeModifier(new CustomTextStyle({size: 14, weight: 400, color: '#000000'}))
+        .margin({ top: 7, bottom: 21 })
+
+      buttonComp('知道了', 227, 9, new CustomTextStyle({size: 16, weight: 500}), () => {
+        control._onBackPress()
+      })
+    }
+    .width(312)
+    .borderRadius(12)
+    .backgroundColor(Color.White)
+    .alignItems(HorizontalAlign.Center)
+    .border({width: 2,color: Color.Black})
+    .padding({left: 21, right: 21, top: 16, bottom: 16})
+  }
+}
+
+@Builder
+function CashPledgeBuilder() {
+  CashPledgePage()
+}

features/feature/src/main/ets/pages/CashPledge/CashPledgeRecord.ets

@@ -0,0 +1,102 @@
+import { YTHeader } from 'basic'
+import { CustomTextStyle } from '../../style/CustomTextStyle'
+
+@ComponentV2
+struct CashPledgeRecord {
+  @Local categoryIndex: number = 0
+
+  changeCategory(index: number){
+    this.categoryIndex = index
+  }
+
+
+  build() {
+    NavDestination() {
+      Column() {
+        YTHeader({
+          defaultStyle: { title: "交易记录" },bgc: Color.White
+        })
+
+        List({space: 22}){
+          ForEach(['全部', '收入', '支出'], (item: string, index) => {
+            ListItem(){
+              Column(){
+                Text(item)
+                  .zIndex(99)
+                  .width(50)
+                  .textAlign(TextAlign.Center)
+                  .onClick(() => { this.changeCategory(index) })
+                  .fontSize(16)
+                  .fontWeight(600)
+                  .fontColor(this.categoryIndex == index ? '#FF111111' : '#FF777777')
+
+                if(this.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)
+            }
+          })
+        }
+        .height(50)
+        .width("100%")
+        .scrollBar(BarState.Off)
+        .backgroundColor(Color.White)
+        .listDirection(Axis.Horizontal)
+        .borderRadius({bottomLeft: 16, bottomRight: 16})
+        .padding({top: 10, left: 16, right: 16, bottom: 10})
+
+        Column(){
+          List({space: 16}){
+            ListItem()
+
+            ForEach(new Array(10).fill(''), (item: string, index) => {
+              ListItem(){
+                this.recordItem()
+              }
+            })
+
+            ListItem()
+          }
+          .width("100%")
+          .height('100%')
+          .scrollBar(BarState.Off)
+        }.width("100%")
+        .layoutWeight(1)
+        .padding({left: 15, right: 15})
+      }
+      .backgroundColor('#F7F9FA')
+    }
+    .hideTitleBar(true)
+  }
+
+  @Builder
+  recordItem(){
+    Row(){
+      Column(){
+        Text('押金')
+          .attributeModifier(new CustomTextStyle({size: 16, weight: 500, color: '#000000'}))
+
+        Text('2028.01.17  16:31:35')
+          .attributeModifier(new CustomTextStyle({size: 14, weight: 400, color: '#000000'}))
+      }.alignItems(HorizontalAlign.Start)
+
+      Text('+¥100')
+        .attributeModifier(new CustomTextStyle({size: 14, weight: 400, color: '#FDB818'}))
+    }.width("100%")
+    .borderRadius(8)
+    .backgroundColor(Color.White)
+    .alignItems(VerticalAlign.Center)
+    .justifyContent(FlexAlign.SpaceBetween)
+    .padding({left: 16, top: 18, right: 16, bottom: 18})
+  }
+}
+
+@Builder
+function CashPledgeRecordBuilder() {
+  CashPledgeRecord()
+}

features/feature/src/main/ets/pages/CashPledge/CashPledgeSecond.ets

@@ -0,0 +1,64 @@
+import { YTAvoid, YTHeader } from 'basic'
+import { CustomTextStyle } from '../../style/CustomTextStyle'
+import { buttonComp } from '../../components/BuilderIndex'
+
+@ComponentV2
+struct CashPledgeSecond {
+
+  // 缴纳押金方法
+  payDeposit() {}
+
+  build() {
+    NavDestination() {
+      Column() {
+        YTHeader({
+          defaultStyle: { title: '租赁押金' },
+          bgc: Color.White
+        })
+
+        Column(){
+          Column(){
+            Column({space: 16}){
+              Row({space: 11}){
+                Image($r('[basic].media.icon_cash'))
+                  .width(30)
+                  .aspectRatio(1)
+
+                Text('¥298.00')
+                  .attributeModifier(new CustomTextStyle({size: 24, weight: 500}))
+              }
+
+              Text('租借图书需要支付押金')
+                .attributeModifier(new CustomTextStyle({size: 14, weight: 500, color: '#888888'}))
+            }.width('100%')
+            .height(200)
+            .borderRadius(8)
+            .backgroundColor(Color.White)
+            .justifyContent(FlexAlign.Center)
+            .alignItems(HorizontalAlign.Center)
+          }
+          .padding({top: 16, left: 16, right: 16})
+
+
+          Column(){
+            buttonComp('立即缴纳', '100%', 10, new CustomTextStyle({size: 18, weight: 400, color: '#000000'}), () => {
+              this.payDeposit()
+            })
+          }
+          .width('100%')
+          .backgroundColor(Color.White)
+          .padding({top: 10, left: 16, right: 16, bottom: AppStorage.get(YTAvoid.SAFE_BOTTOM_KEY) as number})
+        }.width('100%')
+        .layoutWeight(1)
+        .backgroundColor('#F7F9FA')
+        .justifyContent(FlexAlign.SpaceBetween)
+      }
+    }
+    .hideTitleBar(true)
+  }
+}
+
+@Builder
+function CashPledgeSecondBuilder() {
+  CashPledgeSecond()
+}

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

@@ -64,6 +64,21 @@
       "name": "BookSearchResultPage",
       "pageSourceFile": "src/main/ets/pages/BookList/BookSearchResultPage.ets",
       "buildFunction": "BookSearchResultBuilder"
+    },
+    {
+      "name": "CashPledgePage",
+      "pageSourceFile": "src/main/ets/pages/CashPledge/CashPledgePage.ets",
+      "buildFunction": "CashPledgeBuilder"
+    },
+    {
+      "name": "CashPledgeSecond",
+      "pageSourceFile": "src/main/ets/pages/CashPledge/CashPledgeSecond.ets",
+      "buildFunction": "CashPledgeSecondBuilder"
+    },
+    {
+      "name": "CashPledgeRecord",
+      "pageSourceFile": "src/main/ets/pages/CashPledge/CashPledgeRecord.ets",
+      "buildFunction": "CashPledgeRecordBuilder"
     }
   ]
 }

features/user/src/main/ets/views/Mine.ets

@@ -14,7 +14,7 @@ export struct Mine {
     {
       text: '我的押金',
       click: () => {
-
+        yTRouter.router2CashPledgePage()
       },
       src: $r('app.media.mine_right_arrow')
     },