feat: 完成订单详情页面

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

@@ -0,0 +1,159 @@
+import { RouterPage, YTAvoid, YTHeader } from 'basic'
+import { buttonComp } from '../components/BuilderIndex'
+import { CustomTextStyle } from '../style/CustomTextStyle'
+
+@ComponentV2
+@RouterPage
+struct OrderDetailPage {
+  safeBottom: number = AppStorage.get(YTAvoid.SAFE_BOTTOM_KEY) as number
+
+  build() {
+    NavDestination() {
+      Column() {
+        YTHeader({ defaultStyle: {title:'订单详情'}, bgc: Color.White })
+
+        Column(){
+          List({space: 16}){
+            ListItem()
+
+            // 地址栏
+            ListItem(){
+              Row(){
+                Image($r('[basic].media.icon_location')).width(24).aspectRatio(1)
+
+                Column({space: 2}){
+                  Text('福建省厦门市火炬园高新区火炬园路321号韩菲诗.诚享大厦304室内')
+                    .attributeModifier(new CustomTextStyle({ size: 14, weight: 400, color: '#FF000000' }))
+
+                  Row(){
+                    Text('占三峰').attributeModifier(new CustomTextStyle({ size: 14, weight: 500, color: '#FF000000' }))
+                    Text('13598728343').attributeModifier(new CustomTextStyle({ size: 14, weight: 500, color: '#FF000000' }))
+                  }
+                }
+                .layoutWeight(1)
+                .margin({left: 11, right: 19})
+                .alignItems(HorizontalAlign.Start)
+
+                Image($r('[basic].media.ic_public_arrow_left'))
+                  .rotate({angle: 180})
+                  .width(12).aspectRatio(1)
+              }.width('100%')
+              .alignItems(VerticalAlign.Center)
+              .padding({left: 16, right: 16, top: 18, bottom: 18})
+            }
+            .borderRadius(8)
+            .backgroundColor(Color.White)
+
+            // 租借的图书
+            ListItem(){
+              Column({space: 10}){
+                Row({space: 10}){
+                  Text('租借图书')
+                    .attributeModifier(new CustomTextStyle({ size: 16, weight: 500, color: '#FF000000' }))
+
+                  Text('共10件')
+                    .attributeModifier(new CustomTextStyle({ size: 12, weight: 500, color: '#80000000' }))
+                }
+
+                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)
+              }
+              .width('100%')
+              .alignItems(HorizontalAlign.Start)
+              .padding({left: 16, right: 16, top: 9, bottom: 9})
+            }
+            .borderRadius(8)
+            .backgroundColor(Color.White)
+
+            // 订单信息
+            ListItem(){
+              Column({space: 16}){
+                ForEach(new Array(5).fill(''), (item: string, index) => {
+                  Row(){
+                    Text('租借期限')
+                      .attributeModifier(new CustomTextStyle({ size: 14, weight: 500, color: '#FF666666' }))
+
+                    Text('30天')
+                      .attributeModifier(new CustomTextStyle({ size: 14, weight: 400, color: '#FF333333' }))
+                  }.width('100%').justifyContent(FlexAlign.SpaceBetween)
+                })
+
+                Divider().height(1).width('100%').backgroundColor('#FF666666')
+
+                Row(){
+                  Text('小计')
+                    .attributeModifier(new CustomTextStyle({ size: 14, weight: 500, color: '#FF666666' }))
+
+                  Text('¥219.80')
+                    .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)
+            .backgroundColor(Color.White)
+
+            // 备注
+            ListItem(){
+              Row({space: 20}){
+                Text('备注')
+                  .attributeModifier(new CustomTextStyle({ size: 14, weight: 500, color: '#FF666666' }))
+
+                TextInput({placeholder: '请输入您的留言'})
+                  .padding(0)
+                  .borderRadius(0)
+                  .layoutWeight(1)
+                  .border({width: 0})
+                  .textAlign(TextAlign.End)
+                  .backgroundColor(Color.Transparent)
+              }.width('100%').justifyContent(FlexAlign.SpaceBetween)
+              .padding(16)
+            }
+            .borderRadius(8)
+            .backgroundColor(Color.White)
+          }.width('100%').height('100%')
+          .scrollBar(BarState.Off)
+          .padding({left: 15, right: 15})
+        }.width('100%').layoutWeight(1)
+
+        Row(){
+          Text(){
+            Span('应付：')
+            Span(`¥218.8`).fontColor('#FFFF0000').fontSize(20)
+          }
+          .attributeModifier(new CustomTextStyle({ size: 14, weight: 400, color: '#FF000000' }))
+
+          buttonComp('提交订单', 143, 10, new CustomTextStyle({size: 18}), () => {
+
+          })
+        }
+        .width('100%')
+        .backgroundColor(Color.White)
+        .alignItems(VerticalAlign.Center)
+        .justifyContent(FlexAlign.SpaceBetween)
+        .padding({bottom: this.safeBottom, top: 10, left: 15, right: 15})
+      }
+      .width('100%')
+      .height('100%')
+      .backgroundColor('#F7F9FA')
+    }
+    .hideTitleBar(true)
+  }
+}
+
+
+@Builder
+function OrderDetailBuilder() {
+  OrderDetailPage()
+}

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

@@ -109,10 +109,9 @@ struct QAItem {
             .justifyContent(FlexAlign.Center)
           }
           .width('100%')
-          .onClick(() => { this.openDetail(index) })
           .justifyContent(FlexAlign.SpaceBetween)
 
-          if(this.openIndex == index){
+          if(this.openIndex == index) {
             Row(){
               Text(item.message)
                 .attributeModifier(new CustomTextStyle({size: 15, weight: 500, color: '#999999'}))
@@ -124,12 +123,13 @@ struct QAItem {
           }
         }
         .width('100%')
+        .margin({top: index == 0 ? 0 : 15, bottom: index == this.qaList.length - 1 ? 0 : 15})
+        .onClick(() => { this.openDetail(index) })
 
         if(index != this.qaList.length - 1) {
           Divider()
             .height(1)
             .width('100%')
-            .margin({top: 15, bottom: 15})
             .backgroundColor('#F0F0F0')
         }
       })

features/feature/src/main/ets/utils/RouterUtrils.ets

@@ -5,6 +5,11 @@ export class RouterUtils{
     yTRouter.pushPathByName('BookItemDetailPage', null)
   }
 
+  // 进入订单详情确认页
+  static router2OrderDetailPage(){
+    yTRouter.pushPathByName('OrderDetailPage', null)
+  }
+
   static openDiaLog(){
     
   }

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

@@ -69,6 +69,9 @@ export struct ThirdView {
         .backgroundColor(this.vm.editMode ? Color.White : '#FECF2F')
         .padding({top: 10, bottom: 10})
         .justifyContent(FlexAlign.Center)
+        .onClick(() => {
+          this.vm.clickButton()
+        })
       }
       .height(60)
       .width("100%")

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

@@ -1,4 +1,5 @@
 import { YTAvoid } from "basic";
+import { RouterUtils } from "../../utils/RouterUtrils";
 
 
 @ObservedV2
@@ -29,4 +30,9 @@ export class ThirdViewModel{
 
   // 更改选中状态
   changeSelect() {}
+
+  // 点击按钮
+  clickButton() {
+    RouterUtils.router2OrderDetailPage()
+  }
 }

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

@@ -39,6 +39,11 @@
       "name": "OrderManagementPage",
       "pageSourceFile": "src/main/ets/pages/OrderManagementPage.ets",
       "buildFunction": "OrderManagementBuilder"
+    },
+    {
+      "name": "OrderDetailPage",
+      "pageSourceFile": "src/main/ets/pages/OrderDetailPage.ets",
+      "buildFunction": "OrderDetailBuilder"
     }
   ]
 }