feat: 完成我的借阅相关UI和交互

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

@@ -100,6 +100,11 @@ class YTRouter extends NavPathStack {
   router2BorrowProcessPage(){
     this.pushPathByName('BorrowingProcessPage', null)
   }
+
+  // 前往订单管理页面
+  router2OrderManagementPage(targetIndex?: number){
+    this.pushPathByName('OrderManagementPage', targetIndex)
+  }
 }
 
 export const yTRouter = YTRouter.getInstance()

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

@@ -98,4 +98,22 @@ export function bookItemComp(title: string, onClick: () => void){
   .onClick(() => {
     onClick()
   })
+}
+
+
+
+// 按钮
+@Builder
+export function buttonComp(text: string, width: Length, padding: number, font: CustomTextStyle ,onClick: () => void){
+  Row(){
+    Text(text)
+      .attributeModifier(font)
+  }
+  .width(width)
+  .borderRadius(24.5)
+  .backgroundColor('#FFFECF2F')
+  .justifyContent(FlexAlign.Center)
+  .border({width: 2, color: '#FF000000'})
+  .padding({top: padding, bottom: padding})
+  .onClick(onClick)
 }

features/feature/src/main/ets/model/OrderStatus.ets

@@ -0,0 +1,44 @@
+/**
+ * 订单状态枚举
+ */
+export enum OrderStatus {
+  /**
+   * @description 待支付
+   */
+  PENDING_PAYMENT,
+  /**
+   * @description 借阅中
+   */
+  BORROWING,
+  /**
+   * @description 待出库
+   */
+  PENDING_OUTBOUND,
+  /**
+   * @description 待取书
+   */
+  PENDING_PICKUP,
+  /**
+   * @description 已关闭
+   */
+  CLOSED,
+  /**
+   * @description 借阅完成
+   */
+  BORROWING_COMPLETED,
+  /**
+   * @description 待验收
+   */
+  PENDING_ACCEPTANCE,
+  /**
+   * @description 待收书
+   */
+  PENDING_RECEIPT,
+}
+
+
+
+
+
+
+

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

@@ -0,0 +1,315 @@
+import { RouterPage, YTHeader } from 'basic';
+import { buttonComp } from '../components/BuilderIndex';
+import { OrderStatus } from '../model/OrderStatus';
+import { CustomTextStyle } from '../style/CustomTextStyle';
+import { OrderManagementViewModel } from './viewModel/OrderManagementViewModel';
+
+@ComponentV2
+@RouterPage
+struct OrderManagementPage {
+  @Local vm: OrderManagementViewModel = new OrderManagementViewModel();
+
+  aboutToAppear(): void {
+    this.vm.changeCategory(0)
+  }
+
+  build() {
+    NavDestination() {
+      Column() {
+        YTHeader({
+          defaultStyle: {title: '我的借阅'},
+          bgc: Color.White,
+        })
+
+        List({space: 22}){
+          ForEach(this.vm.categoryList, (item: string, index) => {
+            ListItem(){
+              Column(){
+                Text(item)
+                  .zIndex(99)
+                  .width(50)
+                  .textAlign(TextAlign.Center)
+                  .onClick(() => { this.vm.changeCategory(index) })
+                  .fontSize(16)
+                  .fontWeight(600)
+                  .fontColor(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)
+            }
+          })
+        }
+        .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(){
+          Tabs({controller: this.vm.tabControl, index: this.vm.categoryIndex}){
+            ForEach(this.vm.categoryList, (item: string, index) => {
+              TabContent(){
+                Refresh({refreshing: this.vm.isRefresh}){
+                  if((this.vm.isRefresh && this.vm.isFirst) || this.vm.categoryIndex != index) {
+                    Column({space: 16}){
+                      ForEach(['', '', ''], (item: string, index) => {
+                        ListItem(){
+                          SkeletonComp()
+                        }
+                      })
+                    }.width('100%').height('100%')
+                    .justifyContent(FlexAlign.Start)
+                    .padding({left: 15, right: 15, top: 14})
+                  } else {
+                    List({space: 16}){
+                      ListItem()
+
+                      ForEach(this.vm.dataSource, (item: string, index) => {
+                        ListItem(){
+                          OrderItemComp({orderStatus: index})
+                        }
+                      })
+                    }
+                    .width("100%")
+                    .height('100%')
+                    .scrollBar(BarState.Off)
+                    .padding({left: 15, right: 15, bottom: this.vm.safeBottom})
+                    .onReachEnd(() => { this.vm.onReachEnd() })
+                  }
+                }
+                .padding(0)
+                .onRefreshing(() => {
+                  this.vm.isRefresh = true
+                  this.vm.onRefreshing()
+                })
+              }.padding(0)
+            })
+          }.barHeight(0)
+          .onChange((index: number) => {
+            this.vm.changeCategory(index)
+          })
+        }
+        .width('100%')
+        .layoutWeight(1)
+      }
+      .width('100%')
+      .height('100%')
+      .backgroundColor('#F7F9FA')
+    }
+    .hideTitleBar(true)
+  }
+}
+
+@Builder
+function OrderManagementBuilder() {
+  OrderManagementPage()
+}
+
+
+
+@ComponentV2
+struct OrderItemComp{
+  @Param orderStatus: OrderStatus = OrderStatus.PENDING_PAYMENT;
+
+  getOrderStatusDes(status: OrderStatus): string {
+    switch (status) {
+    case OrderStatus.PENDING_PAYMENT:
+      return '待支付';
+    case OrderStatus.BORROWING:
+      return '借阅中';
+    case OrderStatus.PENDING_OUTBOUND:
+      return '待出库';
+    case OrderStatus.PENDING_PICKUP:
+      return '待取书';
+    case OrderStatus.CLOSED:
+      return '已关闭';
+    case OrderStatus.BORROWING_COMPLETED:
+      return '借阅完成';
+    case OrderStatus.PENDING_ACCEPTANCE:
+      return '待验收';
+    case OrderStatus.PENDING_RECEIPT:
+      return '待收书';
+    default:
+      return '未知状态';
+  }
+  }
+
+  getOrderStatusTitle(status: OrderStatus): string {
+    switch (status) {
+      case OrderStatus.BORROWING:
+        return '敬请享受阅读的快乐！阅读完成，请预约快递上门取书';
+      case OrderStatus.PENDING_OUTBOUND:
+        return '图书正在检测消毒，尽快发货~';
+      case OrderStatus.CLOSED:
+        return '期待您的下一次借阅！';
+      case OrderStatus.BORROWING_COMPLETED:
+        return '期待您的下一次借阅！';
+      case OrderStatus.PENDING_ACCEPTANCE:
+        return '收到书后，工作人员将尽快验收入库';
+      default :
+        return '';
+    }
+  }
+
+  build() {
+    Column(){
+      Row(){
+        Text(this.getOrderStatusDes(this.orderStatus))
+          .attributeModifier(new CustomTextStyle({size: 16, weight: 500}))
+
+        Text('直租')
+          .attributeModifier(new CustomTextStyle({size: 14, weight: 400, color: '#FF777777'}))
+      }
+      .width("100%")
+      .margin({bottom: 6})
+      .justifyContent(FlexAlign.SpaceBetween)
+
+      this.orderTitle()
+
+      Divider().width("100%").height(1).backgroundColor('#FFE0E0E0')
+        .margin({top: 14, bottom: 16})
+
+      List({space: 15}){
+        ForEach(new Array(8).fill(''), (item: string, index) => {
+          ListItem(){
+            Image($r('[basic].media.png_defaultBook'))
+              .width(63)
+              .height(81)
+              .borderRadius(6)
+              .backgroundColor('#FFFECF2F')
+          }
+        })
+      }.width("100%").height(81)
+      .scrollBar(BarState.Off)
+      .listDirection(Axis.Horizontal)
+
+      Row(){
+        Text('租借时间')
+          .attributeModifier(new CustomTextStyle({size: 14, weight: 400, color: '#FF444444'}))
+
+        Text(this.orderStatus == OrderStatus.PENDING_PICKUP ? `快递签收起30天` : `2024-01-05至2025-01-04`)
+          .attributeModifier(new CustomTextStyle({size: 14, weight: 400, color: '#FF333333'}))
+      }.width("100%").margin({top: 17})
+      .justifyContent(FlexAlign.SpaceBetween)
+
+      if(this.orderStatus == OrderStatus.BORROWING) {
+        Row(){
+          buttonComp(
+            '预约还书', 143, 10,
+            new CustomTextStyle({size: 18, weight: 400, color: '#FF000000'}),
+            () => {  }
+          )
+        }.width("100%")
+        .padding({top: 12})
+        .justifyContent(FlexAlign.End)
+      } else if(this.orderStatus == OrderStatus.PENDING_PAYMENT) {
+        Row(){
+          buttonComp(
+            '去支付', 143, 10,
+            new CustomTextStyle({size: 18, weight: 400, color: '#FF000000'}),
+            () => {  }
+          )
+        }.width("100%")
+        .padding({top: 12})
+        .justifyContent(FlexAlign.End)
+      }
+    }
+    .padding(16)
+    .width("100%")
+    .borderRadius(8)
+    .border({width: 2})
+    .backgroundColor(Color.White)
+  }
+
+  @Builder
+  orderTitle(){
+    Row(){
+      // 待支付
+      if(this.orderStatus == OrderStatus.PENDING_PAYMENT) {
+        Text(){
+          Span('剩余支付时间：')
+          Span(`28分23秒`).fontColor('#FFFECF2F')
+        }.attributeModifier(new CustomTextStyle({size: 14, weight: 400, color: '#FF444444'}))
+      }
+      // 待取书
+      else if(this.orderStatus == OrderStatus.PENDING_PICKUP) {
+        Text(){
+          Span('运输中，预计')
+          Span(`明天送达>>`).fontColor('#FFFECF2F')
+        }.attributeModifier(new CustomTextStyle({size: 14, weight: 400, color: '#FF444444'}))
+      }
+      // 借阅中 -- 已超时
+      else if(this.orderStatus == OrderStatus.BORROWING) {
+        Text(){
+          Span('已超时')
+          Span(`2`).fontColor('#FFFECF2F')
+          Span('天，逾期费')
+          Span(`2.5`).fontColor('#FFFECF2F')
+          Span('元，请尽快还书。')
+        }.attributeModifier(new CustomTextStyle({size: 14, weight: 400, color: '#FF444444'}))
+      }
+      // 待收书
+      else if(this.orderStatus == OrderStatus.PENDING_RECEIPT) {
+        Text('查看物流信息>>')
+          .attributeModifier(new CustomTextStyle({size: 14, weight: 400, color: '#FF0051FF'}))
+      }
+      // 其他状态
+      else {
+        Text(this.getOrderStatusTitle(this.orderStatus))
+          .attributeModifier(new CustomTextStyle({size: 14, weight: 400, color: '#FF444444'}))
+      }
+    }.width("100%")
+    .justifyContent(FlexAlign.Start)
+  }
+}
+
+//骨架
+@ComponentV2
+struct SkeletonComp{
+  build() {
+    Column(){
+      Row(){
+        Row().width(50).height(21).backgroundColor('#F7F9FA')
+
+        Row().width(30).height(20).backgroundColor('#F7F9FA')
+      }
+      .width("100%")
+      .margin({bottom: 6})
+      .justifyContent(FlexAlign.SpaceBetween)
+
+      Row().width(160).height(20).backgroundColor('#F7F9FA')
+
+      Divider().width("100%").height(1).backgroundColor('#FFE0E0E0')
+        .margin({top: 14, bottom: 16})
+
+      Row({space: 15}){
+        ForEach(new Array(5).fill(''), (item: string, index) => {
+          Row().width(63).height(81).backgroundColor('#F7F9FA')
+        })
+      }.width("100%").height(81)
+
+      Row(){
+        Row().width(56).height(20).backgroundColor('#F7F9FA')
+
+        Row().width(56).height(20).backgroundColor('#F7F9FA')
+      }.width("100%").margin({top: 17})
+      .justifyContent(FlexAlign.SpaceBetween)
+    }
+    .padding(16)
+    .width("100%")
+    .borderRadius(8)
+    .border({width: 2, color: '#ffaeaeae'})
+    .backgroundColor(Color.White)
+    .alignItems(HorizontalAlign.Start)
+  }
+
+}

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

@@ -0,0 +1,48 @@
+import { YTAvoid } from "basic"
+
+@ObservedV2
+export class OrderManagementViewModel{
+  @Trace safeTop: number = AppStorage.get(YTAvoid.SAFE_TOP_KEY) as number
+  @Trace safeBottom: number = AppStorage.get(YTAvoid.SAFE_BOTTOM_KEY) as number
+
+  @Trace categoryIndex: number = 0
+  @Trace isRefresh: boolean = false
+  @Trace dataSource: string[] = new Array(8).fill('')
+  @Trace isFirst: boolean = false
+
+  categoryList: string[] = ['全部', '待支付', '待收书', '待还书', '已完成']
+  tabControl: TabsController = new TabsController()
+
+  private debounceTimer: number | null = null
+  private readonly DEBOUNCE_DELAY: number = 500
+
+  changeCategory(index: number) {
+    // 清除之前的定时器
+    if (this.debounceTimer !== null) {
+      clearTimeout(this.debounceTimer)
+    }
+
+    // 设置新的防抖定时器
+    this.debounceTimer = setTimeout(() => {
+      this.categoryIndex = index
+      this.isRefresh = true
+      this.isFirst = true
+      this.onRefreshing()
+      this.debounceTimer = null
+    }, this.DEBOUNCE_DELAY)
+  }
+
+
+
+  onRefreshing(){
+    // this.isRefresh = true
+    setTimeout(() => {
+      this.isRefresh = false
+      this.isFirst = false
+    }, 500)
+  }
+
+  onReachEnd(){
+
+  }
+}

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

@@ -34,6 +34,11 @@
       "name": "BorrowingProcessPage",
       "pageSourceFile": "src/main/ets/pages/BorrowingProcessPage.ets",
       "buildFunction": "BorrowingProcessBuilder"
+    },
+    {
+      "name": "OrderManagementPage",
+      "pageSourceFile": "src/main/ets/pages/OrderManagementPage.ets",
+      "buildFunction": "OrderManagementBuilder"
     }
   ]
 }

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

@@ -164,6 +164,7 @@ export struct Mine {
       .id("bottomColumn")
     }
     .height('100%')
+    .height('100%')
     .backgroundImagePosition(Alignment.Top)
     .backgroundImage($r('app.media.mine_bgc'))
     .padding({left: 22, right: 22, top: this.safeTop})
@@ -186,7 +187,6 @@ export struct Mine {
       controller.show(context, {
         previewMode: systemShare.SharePreviewMode.DEFAULT,
         selectionMode: systemShare.SelectionMode.SINGLE,
-        // anchor: { windowOffset: { x: 0, y: 0 }, size: { width: this.breakWidth, height: 500 } }
       })
     } catch (error) {
       IBestToast.show({ message: '当前设备不支持', duration: 500 })
@@ -195,16 +195,16 @@ export struct Mine {
 }
 
 // 我的借阅
-@ComponentV2
+@Component
 struct MineBorrow {
-  @Param @Require userInfo: UserInfo
+  @Prop userInfo: UserInfo
 
   forEach: Array<BasicType> = [
-    { text: '全部', src: $r('app.media.icon_mine_all'), click: ()=> {  } },
-    { text: '待支付', src: $r('app.media.icon_mine_pay'), click: ()=> {  } },
-    { text: '待收书', src: $r('app.media.icon_mine_receive'), click: ()=> {  } },
-    { text: '待还书', src: $r('app.media.icon_mine_receive'), click: ()=> {  } },
-    { text: '已完成', src: $r('app.media.icon_mine_complete'), click: ()=> {  } },
+    { text: '全部', src: $r('app.media.icon_mine_all'), click: ()=> { yTRouter.router2OrderManagementPage(0) } },
+    { text: '待支付', src: $r('app.media.icon_mine_pay'), click: ()=> { yTRouter.router2OrderManagementPage(1) } },
+    { text: '待收书', src: $r('app.media.icon_mine_receive'), click: ()=> { yTRouter.router2OrderManagementPage(2) } },
+    { text: '待还书', src: $r('app.media.icon_mine_receive'), click: ()=> { yTRouter.router2OrderManagementPage(3) } },
+    { text: '已完成', src: $r('app.media.icon_mine_complete'), click: ()=> { yTRouter.router2OrderManagementPage(4) } },
   ]
 
   build() {