feat: 完成订单详情页面的相关UI

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

@@ -176,9 +176,14 @@ class YTRouter extends NavPathStack {
     this.pushPathByName('BookItemDetailPage', new BookItem(book))
   }
 
-  // 进入订单详情确认页
-  router2OrderOrderConfirmPage(params: ESObject){
-    this.pushPathByName('OrderConfirmPage', params)
+  // 进入订单确认页
+  router2OrderOrderConfirmPage(bookList: Array<BookItem>){
+    this.pushPathByName('OrderConfirmPage', bookList)
+  }
+
+  // 进入订单详情页
+  router2OrderDetailPage(orderId: ESObject){
+    this.pushPathByName('OrderDetailPage', orderId)
   }
 
   // 进入搜索结果页

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

@@ -1,8 +1,8 @@
-import { BookItem } from "basic";
 import { OrderStatus } from "./EnumState";
+import { OrderDetailData } from "./OrderModelIndex";
 
 // 订单详情 - 路由参数
 export class OrderDetailModel{
-  bookList: Array<BookItem> = []
+  orderInfo: OrderDetailData = {}
   status: OrderStatus = OrderStatus.UNCONFIRMED
 }

features/feature/src/main/ets/pages/Order/InitiatePayPage.ets

@@ -12,6 +12,9 @@ import { PageState } from '../../model/EnumState'
 @Component
 struct InitiatePayPage {
   @Require orderId: string
+  // todo
+  payInfo: GetUnifiedPayInfoRequestData = {}
+
 
   @State safeTop: number = AppStorage.get(YTAvoid.SAFE_TOP_KEY) as number
   @State safeBottom: number = AppStorage.get(YTAvoid.SAFE_BOTTOM_KEY) as number

features/feature/src/main/ets/pages/Order/OrderConfirmPage.ets

@@ -9,12 +9,11 @@ import { CustomTextStyle } from '../../style/CustomTextStyle'
 import { OrderConfirmViewModel } from '../viewModel/OrderConfirmViewModel'
 
 /**
- * 订单详情 - 订单校验页面
+ * 订单确认页面
  */
-// OrderDetailPage
 @ComponentV2
 struct OrderConfirmPage {
-  @Param @Require param: OrderDetailModel
+  @Param @Require param: Array<BookItem>
 
   // 勿改
   vm: OrderConfirmViewModel = {} as ESObject
@@ -41,34 +40,26 @@ struct OrderConfirmPage {
   build() {
     NavDestination() {
       Column() {
-        YTHeader({ defaultStyle: {title:'订单详情'}, bgc: Color.White })
+        YTHeader({ defaultStyle: {title:'订单确认'}, bgc: Color.White })
 
         Column(){
           List({space: 16}){
             ListItem()
 
-            if(this.vm.orderStatus == OrderStatus.UNCONFIRMED) {
-              /** 地址栏 */
-              this.AddressBuilder()
+            /** 地址栏 */
+            this.AddressBuilder()
 
-              /** 租借的图书 */
-              this.OrderListBuilder()
+            /** 租借的图书 */
+            this.OrderListBuilder()
 
-              /** 订单信息 */
-              this.OrderInfoBuilder()
+            /** 订单信息 */
+            this.OrderInfoBuilder()
 
-              /** 支付方式 */
-              this.PayMethodBuilder()
+            /** 支付方式 */
+            this.PayMethodBuilder()
 
-              /** 备注 */
-              this.RemarkBuilder()
-            } else {
-              /** 订单状态信息 */
-              this.OrderStatusBuilder()
-
-              /** 订单信息 */
-              this.OrderPayBuilder()
-            }
+            /** 备注 */
+            this.RemarkBuilder()
 
             ListItem()
           }.width('100%').height('100%')
@@ -77,21 +68,15 @@ struct OrderConfirmPage {
         }.width('100%').layoutWeight(1)
 
         Row(){
-          if(this.vm.orderStatus == OrderStatus.UNCONFIRMED) {
-            Text(){
-              Span('应付：')
-              Span(`¥${this.vm.totalPrice.toFixed(2)}`).fontColor('#FFFF0000').fontSize(20)
-            }
-            .attributeModifier(new CustomTextStyle({ size: 14, weight: 400, color: '#FF000000' }))
-
-            buttonComp('提交订单', 143, 10, new CustomTextStyle({size: 18}), () => {
-              this.vm.submitOrder()
-            })
-          } else {
-            buttonComp('联系客服', 143, 10, new CustomTextStyle({size: 18}), () => {
-              this.vm.gotoCustomerService()
-            })
+          Text(){
+            Span('应付：')
+            Span(`¥${this.vm.totalPrice.toFixed(2)}`).fontColor('#FFFF0000').fontSize(20)
           }
+          .attributeModifier(new CustomTextStyle({ size: 14, weight: 400, color: '#FF000000' }))
+
+          buttonComp('提交订单', 143, 10, new CustomTextStyle({size: 18}), () => {
+            this.vm.submitOrder()
+          })
         }
         .width('100%')
         .backgroundColor(Color.White)
@@ -336,6 +321,6 @@ struct OrderConfirmPage {
 }
 
 @Builder
-function OrderConfirmBuilder(_: string, param: OrderDetailModel) {
+function OrderConfirmBuilder(_: string, param: Array<BookItem>) {
   OrderConfirmPage({ param })
 }

features/feature/src/main/ets/pages/Order/OrderDetailPage.ets

@@ -1,20 +1,308 @@
-// 订单详情页面
+import { BasicType, BookItem, DiaLogSheetControl, YTHeader, yTRouter } from 'basic'
+import { AddressComp } from '../../components/AddressComp'
+import { AddressItemComp } from '../../components/AddressItemComp'
+import { buttonComp } from '../../components/BuilderIndex'
+import { Address } from '../../model/Address'
+import { AddressAddPageState, OrderStatus } from '../../model/EnumState'
+import { OrderDetailModel } from '../../model/RouterModel'
+import { CustomTextStyle } from '../../style/CustomTextStyle'
+import { OrderConfirmViewModel } from '../viewModel/OrderConfirmViewModel'
+import { OrderDetailViewModel } from '../viewModel/OrderDetailViewModel'
+
+/**
+ * 订单详情
+ */
 @ComponentV2
 struct OrderDetailPage {
-  // @Local vm: OrderDetailPageViewModel = new OrderDetailPageViewModel();
+  @Param @Require param: OrderDetailModel
+
+  // 勿改
+  vm: OrderDetailViewModel = {} as ESObject
+
+  aboutToAppear(): void {
+    this.vm = new OrderDetailViewModel(this.param)
+  }
 
   build() {
     NavDestination() {
       Column() {
+        YTHeader({ defaultStyle: {title:'订单确认'}, bgc: Color.White })
+
+        Column(){
+          List({space: 16}){
+            ListItem()
+            /**
+             * 订单状态
+             */
+            this.OrderStatusBuilder()
+
+            /**
+             * 租借的图书
+             * */
+            this.OrderListBuilder()
+
+            /**
+             * 订单价格
+             */
+            if(!this.vm.isExpand) {
+              this.OrderPayBuilder()
+            } else {
+              this.OrderInfoBuilder()
+            }
 
+            /**
+             * 地址栏
+             * */
+            this.AddressBuilder()
+
+            // 根据是否完成支付显示不同的表单
+            if(this.vm.status == OrderStatus.PENDING_PAYMENT) {
+              /**
+               * 支付方式
+               * */
+              this.PayMethodBuilder()
+            }
+
+
+            /**
+             * 订单信息
+             * */
+            this.OrderInfoBuilder(false)
+            ListItem()
+          }.width('100%').height('100%')
+          .scrollBar(BarState.Off)
+          .padding({left: 15, right: 15})
+        }.width('100%').layoutWeight(1)
+
+        // todo 不同订单下的按钮显示不同的
+        Row(){
+          buttonComp('联系客服', '100%', 10, new CustomTextStyle({size: 18}), () => {
+            this.vm.gotoCustomerService()
+          })
+        }
+        .width('100%')
+        .backgroundColor(Color.White)
+        .alignItems(VerticalAlign.Center)
+        .justifyContent(FlexAlign.SpaceBetween)
+        .shadow({radius: 5, offsetY: 5})
+        .padding({bottom: this.vm.safeBottom, top: 10, left: 15, right: 15})
       }
+      .width('100%')
+      .height('100%')
+      .backgroundColor('#F7F9FA')
     }
     .hideTitleBar(true)
-    // .padding({ top: this.vm.safeTop })
   }
+
+
+  /** 地址栏 */
+  @Builder
+  AddressBuilder() {
+    ListItem(){
+      // todo 订单地址校验
+      if(this.vm.address?.phone) {
+        AddressItemComp({type: 0, address: this.vm.address})
+      }
+    }
+    .backgroundColor(Color.White)
+  }
+
+  /** 订单状态信息 */
+  @Builder
+  OrderStatusBuilder() {
+    ListItem(){
+      Column({space: 5}){
+        Text(this.vm.getOrderStatusText(this.vm.status).text)
+          .attributeModifier(new CustomTextStyle({ size: 16, weight: 500, color: '#FF000000' }))
+
+        Text(this.vm.getOrderStatusText(this.vm.status).message)
+          .attributeModifier(new CustomTextStyle({ size: 14, weight: 400, color: '#FF444444' }))
+      }.width('100%')
+      .alignItems(HorizontalAlign.Start)
+      .padding({left: 16, right: 16, top: 18, bottom: 18})
+    }
+    .borderRadius(8)
+    .border({width: 2})
+    .backgroundColor(Color.White)
+  }
+
+  /** 租借图书列表 */
+  @Builder
+  OrderListBuilder() {
+    ListItem(){
+      Column({space: 10}){
+        Row({space: 10}){
+          Text('租借图书')
+            .attributeModifier(new CustomTextStyle({ size: 16, weight: 500, color: '#FF000000' }))
+
+          Text(`共${this.vm.bookList.length}件`)
+            .attributeModifier(new CustomTextStyle({ size: 12, weight: 500, color: '#80000000' }))
+        }
+
+        List({space: 15}){
+          ForEach(this.vm.bookList, (item: BookItem, index) => {
+            ListItem(){
+              Image(item.coverUrl)
+                .width(63)
+                .height(81)
+                .borderRadius(6)
+                .backgroundColor('#FFFECF2F')
+                .alt($r('[basic].media.png_defaultBook'))
+            }
+          })
+        }.width("100%").height(81)
+        .scrollBar(BarState.Off)
+        .listDirection(Axis.Horizontal)
+      }
+      .width('100%')
+      .alignItems(HorizontalAlign.Start)
+      .padding({left: 16, right: 16, top: 9, bottom: 9})
+    }
+    .borderRadius(8)
+    .border({width: 2})
+    .backgroundColor(Color.White)
+  }
+
+  /** 订单信息栏 */
+  @Builder
+  OrderInfoBuilder(needSubtotal: boolean = true) {
+    ListItem(){
+      Column({space: 16}){
+        ForEach(needSubtotal ? this.vm.forEach1 : this.vm.forEach2, (item: BasicType, index) => {
+          Row(){
+            Text(item.text)
+              .attributeModifier(new CustomTextStyle({ size: 14, weight: 500, color: '#FF666666' }))
+
+            if(item.type == 'Copy') {
+              Row({space: 15}){
+                Text(item.message)
+                  .attributeModifier(new CustomTextStyle({size: 14, weight: 500, color: '#FF333333'}))
+
+                Text('复制')
+                  .padding({left: 9})
+                  .border({width: {left: 1}, color: '#C1C1C1'})
+                  .attributeModifier(new CustomTextStyle({size: 14, weight: 400, color: '#FF333333'}))
+                  .onClick(() => { this.vm.onCopyOrderNumber(item.message!) })
+              }
+            } else {
+              Text(item.message)
+                .attributeModifier(new CustomTextStyle({ size: 14, weight: 400, color: '#FF333333' }))
+            }
+          }.width('100%').justifyContent(FlexAlign.SpaceBetween)
+        })
+
+
+        if(needSubtotal){
+          Divider().height(1).width('100%').backgroundColor('#FF666666')
+
+          Row(){
+            Text('小计')
+              .attributeModifier(new CustomTextStyle({ size: 14, weight: 500, color: '#FF666666' }))
+
+            Text(`¥${this.vm.totalPrice}`)
+              .attributeModifier(new CustomTextStyle({ size: 14, weight: 400, color: '#FF333333' }))
+          }.width('100%').justifyContent(FlexAlign.SpaceBetween)
+        }
+      }
+      .padding({left: 16, right: 16, top: 13, bottom: 13})
+    }
+    .borderRadius(8)
+    .border({width: 2})
+    .backgroundColor(Color.White)
+  }
+
+  /** 支付方法栏 */
+  @Builder
+  PayMethodBuilder() {
+    ListItem(){
+      Column({space: 16}){
+        Text('支付方式')
+          .attributeModifier(new CustomTextStyle({ size: 16, weight: 500, color: '#000000' }))
+
+        Divider().height(1).width('100%').backgroundColor('#FF666666')
+
+        Column({space: 16}){
+          ForEach(this.vm.payWayList, (item: BasicType, index) => {
+            Row(){
+              Row({space: 5}){
+                Image(item.src)
+                  .width(20)
+                  .aspectRatio(1)
+
+                Text(item.text)
+                  .attributeModifier(new CustomTextStyle({ size: 14, weight: 500, color: '#666666' }))
+              }
+
+              Row(){
+                if(this.vm.payWay == index){
+                  Image($r('[basic].media.icon_selectSvg'))
+                    .fillColor(item.color)
+                }
+              }
+              .width(14)
+              .aspectRatio(1)
+              .borderRadius(14)
+              .border({width: this.vm.payWay == index ? 0 : 1})
+            }
+            .width('100%')
+            .justifyContent(FlexAlign.SpaceBetween)
+            .onClick(() => { this.vm.changePayWay(index) })
+          })
+        }.width('100%')
+      }
+      .justifyContent(FlexAlign.Start)
+      .alignItems(HorizontalAlign.Start)
+      .padding({left: 16, right: 16, top: 9, bottom: 9})
+    }
+    .borderRadius(8)
+    .border({width: 2})
+    .backgroundColor(Color.White)
+  }
+
+  /**
+   * 订单实付 - 可展开组件
+   */
+  @Builder
+  OrderPayBuilder() {
+    ListItem(){
+      Column({space: 15}){
+        Row(){
+          Text('租借时间')
+            .attributeModifier(new CustomTextStyle({ size: 14, weight: 400, color: '#FF444444' }))
+
+          Text('2024-01-05至20225-01-04')
+            .attributeModifier(new CustomTextStyle({ size: 14, weight: 400, color: '#FF444444' }))
+        }.width('100%')
+        .justifyContent(FlexAlign.SpaceBetween)
+
+        Row(){
+          Text('实付')
+            .attributeModifier(new CustomTextStyle({ size: 16, weight: 500, color: '#FF000000' }))
+
+          Text('¥219.80')
+            .attributeModifier(new CustomTextStyle({ size: 16, weight: 500, color: '#FF000000' }))
+        }.width('100%')
+        .justifyContent(FlexAlign.SpaceBetween)
+
+        Image($r('[basic].media.ic_public_arrow_left'))
+          .rotate({angle: 270})
+          .fillColor('#ff585757')
+          .width(24).aspectRatio(1)
+      }.width('100%')
+      .alignItems(HorizontalAlign.Center)
+      .padding({left: 19, top: 12, right: 19, bottom: 12})
+      .onClick(() => {
+        this.vm.isExpand = true
+      })
+    }
+    .borderRadius(8)
+    .border({width: 2})
+    .backgroundColor(Color.White)
+  }
+
 }
 
 @Builder
-function OrderDetailPageBuilder() {
-  OrderDetailPage()
-}
+function OrderDetailBuilder(_: string, param: OrderDetailModel) {
+  OrderDetailPage({ param })
+}

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

@@ -3,6 +3,7 @@ import { buttonComp } from '../../components/BuilderIndex';
 import { ytEmptyComp } from '../../components/ytComp/ytEmptyComp';
 import { OrderStatus } from '../../model/EnumState';
 import { OrderDetailData } from '../../model/OrderModelIndex';
+import { OrderDetailModel } from '../../model/RouterModel';
 import { CustomTextStyle } from '../../style/CustomTextStyle';
 import { OrderManagementViewModel } from '../viewModel/OrderManagementViewModel';
 
@@ -221,6 +222,15 @@ struct OrderItemComp{
     yTRouter.router2InitiatePayPage(this.orderData.id!)
   }
 
+  // 前往订单详情页面
+  orderDetailPage(){
+    let param: OrderDetailModel = {
+      orderInfo: this.orderData,
+      status: this.orderStatus
+    }
+    yTRouter.router2OrderDetailPage(param)
+  }
+
   build() {
     Column(){
       Row(){
@@ -290,6 +300,7 @@ struct OrderItemComp{
     .borderRadius(8)
     .border({width: 2})
     .backgroundColor(Color.White)
+    .onClick(() => { this.orderDetailPage() })
   }
 
   @Builder

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

@@ -10,8 +10,6 @@ import { AppStorageV2 } from '@kit.ArkUI'
 @ObservedV2
 export class OrderConfirmViewModel{
   @Trace safeBottom: number = AppStorage.get(YTAvoid.SAFE_BOTTOM_KEY) as number
-  // 订单状态
-  @Trace orderStatus: OrderStatus
   // 租借的图书 URL
   @Trace bookList: BookItem[] = []
   // 订单明细
@@ -42,10 +40,8 @@ export class OrderConfirmViewModel{
     { text: '支付宝支付', src: $r('[basic].media.ali_pay'), color: '#06B4FD'},
   ]
 
-  constructor(param: OrderDetailModel) {
-    this.orderStatus = param.status
-
-    this.bookList = param.bookList
+  constructor(param: Array<BookItem>) {
+    this.bookList = param
     this.generateOrderDetail()
   }
 
@@ -119,7 +115,4 @@ export class OrderConfirmViewModel{
 
     yTRouter.router2InitiatePayPage(ans.id!)
   }
-
-  /** 前往联系客服 */
-  gotoCustomerService() {}
 }

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

@@ -0,0 +1,121 @@
+import { BasicType, BookItem, IBestToast, YTAvoid, yTRouter } from "basic"
+import { Address } from "../../model/Address"
+import { OrderStatus } from "../../model/EnumState"
+import { OrderDetailData } from "../../model/OrderModelIndex"
+import { OrderDetailModel } from "../../model/RouterModel"
+import { pasteboard } from "@kit.BasicServicesKit"
+
+@ObservedV2
+export class OrderDetailViewModel{
+  @Trace safeBottom: number = AppStorage.get(YTAvoid.SAFE_BOTTOM_KEY) as number
+
+  // 地址
+  @Trace address: Address = {}
+  // 书籍列表
+  @Trace bookList: Array<BookItem> = []
+  // 小计
+  @Trace totalPrice: string = ''
+  // 支付方式
+  @Trace payWay: number = 0
+  // 是否展开实付
+  @Trace isExpand: boolean = false
+
+  // 订单信息遍历
+  @Trace forEach1: Array<BasicType> = []
+  @Trace forEach2: Array<BasicType> = []
+
+  @Trace orderInfo: OrderDetailData = {}
+
+  // 订单状态
+  @Trace status: OrderStatus
+
+  // 支付方式遍历
+  payWayList: Array<BasicType> = [
+    { text: '微信支付', src: $r('[basic].media.icon_wx'), color: '#20BB06'},
+    { text: '支付宝支付', src: $r('[basic].media.ali_pay'), color: '#06B4FD'},
+  ]
+
+  constructor(param: OrderDetailModel) {
+    this.forEach1 = [
+      { text: '租借期限', message: '30天' },
+      { text: '租借时间', message: '快递签收日起30天' },
+      { text: '租借价格', message: `￥${param.orderInfo.bookPrice}` },
+      { text: '往返运费', message: `￥${param.orderInfo.postFee}` },
+      { text: '租借期限', message: '30天' },
+    ]
+
+    this.forEach2 = [
+      { text: '订单号', message: param.orderInfo.id, type: 'Copy' },
+      { text: '下单时间', message: '2025-11-14 16:05', type: 'Text' },
+      { text: '支付时间', message: '2025-11-14 16:05', type: 'Text' },
+      { text: '支付方式', message: '2025-11-14 16:05', type: 'Text' },
+      { text: '备注', message: param.orderInfo.remark ?? '无', type: 'Text' },
+    ]
+
+    this.address = {
+      address: param.orderInfo.address,
+      userName: param.orderInfo.userName,
+      phone: param.orderInfo.phone,
+      region: param.orderInfo.region,
+    }
+
+    this.bookList = param.orderInfo.bookList ?? []
+
+    this.totalPrice = param.orderInfo.orderPrice!
+
+    this.status = param.status
+  }
+
+  onCopyOrderNumber(order: string){
+    // 1. 创建 PasteData 对象
+    let pasteData = pasteboard.createPlainTextData(order);
+
+    // 2. 获取系统剪贴板实例
+    let systemPasteboard = pasteboard.getSystemPasteboard();
+
+    // 3. 同步写入数据
+    try {
+      systemPasteboard.setDataSync(pasteData);
+      console.log('写入剪贴板成功');
+      IBestToast.show('复制成功')
+    } catch (error) {
+      console.error('写入失败，错误码: ' + error.code);
+      IBestToast.show('复制失败，请重试')
+    }
+  }
+
+  // 返回对应文案
+  getOrderStatusText(status: OrderStatus): BasicType {
+    switch (status) {
+      case OrderStatus.PENDING_PAYMENT:
+        // todo 待支付的需要完善
+        return { text: '待支付' };
+      case OrderStatus.BORROWING:
+        return { text: '借阅中', message: '敬请享受阅读的快乐！阅读完成，请预约快递上门取书' };
+      case OrderStatus.PENDING_OUTBOUND:
+        return { text: '待出库', message: '图书正在检测消毒，尽快发货~' };
+      case OrderStatus.PENDING_PICKUP:
+        // todo 待取书的需要完善
+        return { text: '待取书' };
+      case OrderStatus.CLOSED:
+        return { text: '订单关闭', message: '期待您的下一次借阅！' };
+      case OrderStatus.BORROWING_COMPLETED:
+        return { text: '借阅完成', message: '期待您的下一次借阅！' };
+      case OrderStatus.PENDING_ACCEPTANCE:
+        return { text: '待验收', message: '收到书后，工作人员将尽快验收入库' };
+      case OrderStatus.PENDING_RECEIPT:
+        // todo 待收书的需要完善
+        return { text: '待收书' };
+      default:
+        return { text: '', message: '' };
+    }
+  }
+
+  // 切换支付方式
+  changePayWay(index: number){
+    this.payWay = index
+  }
+
+  /** 前往联系客服 */
+  gotoCustomerService() {}
+}

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

@@ -13,6 +13,23 @@ export struct MainView {
     ytBuildComp(){
       RelativeContainer(){
         List(){
+          ListItem(){
+            Row({space: 30}){
+              Text('物流信息页面')
+                .onClick(() => {
+                  yTRouter.router2LogisticsInfoPage()
+                })
+
+
+              Text('预约还书页面')
+                .onClick(() => {
+                  yTRouter.router2ReserveReturnPage()
+                })
+            }.margin({top: 200})
+            .width("100%")
+            .justifyContent(FlexAlign.Center)
+          }
+
           // logo
           ListItem(){
             Row({space: 14}){

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

@@ -97,9 +97,7 @@ export class ThirdViewModel{
       }
     })
 
-    let param: OrderDetailModel = new OrderDetailModel()
-    param.bookList = list
-    yTRouter.router2OrderOrderConfirmPage(param)
+    yTRouter.router2OrderOrderConfirmPage(list)
   }
 
 

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

@@ -40,6 +40,11 @@
       "pageSourceFile": "src/main/ets/pages/Order/OrderConfirmPage.ets",
       "buildFunction": "OrderConfirmBuilder"
     },
+    {
+      "name": "OrderDetailPage",
+      "pageSourceFile": "src/main/ets/pages/Order/OrderDetailPage.ets",
+      "buildFunction": "OrderDetailBuilder"
+    },
     {
       "name": "BorrowAnsPage",
       "pageSourceFile": "src/main/ets/pages/Order/BorrowAnsPage.ets",