feat: 新增预约还书页面

build-profile.json5

@@ -25,7 +25,8 @@
             "caseSensitiveCheck": true,
             "useNormalizedOHMUrl": true
           }
-        }
+        },
+        "targetSdkVersion": "5.0.3(15)"
       }
     ],
     "buildModeSet": [

commons/basic/src/main/ets/components/DiaLogComp/DiaLogComp.ets

@@ -1,6 +1,5 @@
-import { BasicType, NavDiaLogModel } from "../../../../../Index"
-import { ReviseName } from "../toastBuilders/DiaLogBuild"
-import { DiaLogCompControl } from "./DiaLogControl"
+import { BasicType, NavDiaLogModel } from '../../../../../Index'
+import { DiaLogCompControl } from './DiaLogControl'
 
 @ComponentV2
 export struct DiaLogComp {
@@ -48,47 +47,58 @@ export struct DiaLogComp {
 
   @Builder
   containerComp(){
-    // if (this.controller?.diaLogType == 'ReviseName') {
-      // ReviseName(this.param, this.control)
-    // } else {
-      Column() {
-        Text(this.param.text ?? '一个弹窗')
-          .fontColor(Color.Black)
+    Column() {
+      Text(this.param.text ?? '一个弹窗')
+        .fontColor(Color.Black)
+        .lineHeight(18)
+        .fontSize(18)
+        .textAlign(TextAlign.Center)
+        .margin({ bottom: 18 })
+
+      if(this.param.message) {
+        Text(this.param.message)
+          .fontSize(15)
           .lineHeight(18)
-          .fontSize(18)
-          .textAlign(TextAlign.Center)
+          .fontColor('#C1C1C1')
           .margin({ bottom: 18 })
-        Row() {
-          Text('取消')
-            .fontSize(16)
-            .fontWeight(400)
-            .borderRadius(36)
-            .fontColor(Color.Black)
-            .backgroundColor('#F5F5F7')
-            .padding({ left: 36, top: 9, right: 36, bottom: 9})
-            .onClick(() => {
-              this.control._onBackPress(0)
-            })
+          .textAlign(TextAlign.Center)
+      }
 
-          Text('确定')
-            .fontSize(16)
-            .fontWeight(400)
-            .borderRadius(36)
-            .fontColor(Color.Black)
-            .padding({ left: 36, top: 9, right: 36, bottom: 9})
-            .backgroundColor(this.param.color ?? '#FFFECF2F')
-            .onClick(() => {
-              this.control._onBackPress(1)
-            })
-        }
-        .justifyContent(FlexAlign.SpaceBetween)
-        .width('100%')
+      Row({space: 20}) {
+        Text('取消')
+          .fontSize(16)
+          .fontWeight(400)
+          .borderRadius(36)
+          .layoutWeight(1)
+          .border({width: 1})
+          .fontColor(Color.Black)
+          .backgroundColor('#F5F5F7')
+          .textAlign(TextAlign.Center)
+          .padding({ top: 10, bottom: 10})
+          .onClick(() => {
+            this.control._onBackPress(0)
+          })
+
+        Text('确定')
+          .fontSize(16)
+          .fontWeight(400)
+          .layoutWeight(1)
+          .borderRadius(36)
+          .fontColor(Color.Black)
+          .textAlign(TextAlign.Center)
+          .padding({ top: 10, bottom: 10})
+          .backgroundColor(this.param.color ?? '#FFFECF2F')
+          .onClick(() => {
+            this.control._onBackPress(1)
+          })
       }
-      .width(280)
-      .borderRadius(8)
-      .backgroundColor(Color.White)
-      .padding({ top: 28, left: 32, right: 32, bottom: 20 })
-    // }
+      .justifyContent(FlexAlign.SpaceBetween)
+      .width('100%')
+    }
+    .width(315)
+    .borderRadius(8)
+    .backgroundColor(Color.White)
+    .padding({ top: 28, left: 32, right: 32, bottom: 20 })
   }
 }
 

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

@@ -136,6 +136,11 @@ class YTRouter extends NavPathStack {
   router2IncreaseAddressPage(){
     this.pushPathByName('IncreaseAddressPage', null)
   }
+
+  // 预约还书页面
+  router2ReserveReturnPage(){
+    this.pushPathByName('ReserveReturnPage', null)
+  }
 }
 
 export const yTRouter = YTRouter.getInstance()

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

@@ -74,7 +74,6 @@ export struct AddressComp{
           right: {anchor: '__container__', align: HorizontalAlign.End},
           bottom: {anchor: '__container__', align: VerticalAlign.Bottom}
         })
-
       }
     }.width('100%')
     .height(100)

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

@@ -4,15 +4,22 @@ import { CustomTextStyle } from "../style/CustomTextStyle"
 export struct AddressItemComp {
   @Param index: number = 0
   @Param selectIndex: number = 0
-  // 0 - 查看  1 - 编辑  2 - 选择 （ icon 不同 ）
-  @Param type: 0 | 1 | 2 = 0
+  // 0 - 查看  1 - 编辑  2 - 选择 （ icon 不同 ） 3 - 不要 icon
+  @Param type: 0 | 1 | 2 | 3 = 0
   @Param needBorder: boolean = true
+  @Param isLocation: boolean = true
+  @Param align_: VerticalAlign = VerticalAlign.Center
 
   @Event click: () => void
 
   build() {
     Row(){
-      Image($r('[basic].media.icon_location')).width(24).aspectRatio(1)
+      if(this.isLocation){
+        Image($r('[basic].media.icon_location')).width(24).aspectRatio(1)
+      } else {
+        Image($r('[basic].media.icon_send')).width(24).aspectRatio(1)
+      }
+
 
       Column({space: 5}){
         Text('福建省厦门市火炬园高新区火炬园路321号韩菲诗.诚享大厦304室内')
@@ -34,7 +41,7 @@ export struct AddressItemComp {
       } else if (this.type == 1) {
         Image($r('[basic].media.icon_edit'))
           .width(24).aspectRatio(1)
-      } else  {
+      } else if (this.type == 2)  {
         if(this.selectIndex == this.index) {
           Image($r('[basic].media.icon_select'))
             .width(15).aspectRatio(1)
@@ -46,9 +53,10 @@ export struct AddressItemComp {
         }
       }
     }.width('100%')
-    .alignItems(VerticalAlign.Center)
-    .border(this.needBorder ? {width: 2, color: '#FF000000'} : null)
+    .backgroundColor(Color.White)
+    .alignItems(this.align_)
     .borderRadius(this.needBorder ? 8 : 0)
+    .border(this.needBorder ? {width: 2, color: '#FF000000'} : null)
     .padding({left: 16, right: 16, top: 18, bottom: 18})
   }
 }

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

@@ -1,9 +1,10 @@
-import { RouterPage, YTHeader } from 'basic';
+import { RouterPage, YTHeader, yTRouter } 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 {
@@ -160,6 +161,14 @@ struct OrderItemComp{
     }
   }
 
+  // 预约还书
+  reserveReturnPage(){
+    yTRouter.router2ReserveReturnPage()
+  }
+
+  // 去支付
+  payPage(){}
+
   build() {
     Column(){
       Row(){
@@ -206,7 +215,7 @@ struct OrderItemComp{
           buttonComp(
             '预约还书', 143, 10,
             new CustomTextStyle({size: 18, weight: 400, color: '#FF000000'}),
-            () => {  }
+            () => { this.reserveReturnPage() }
           )
         }.width("100%")
         .padding({top: 12})
@@ -216,7 +225,7 @@ struct OrderItemComp{
           buttonComp(
             '去支付', 143, 10,
             new CustomTextStyle({size: 18, weight: 400, color: '#FF000000'}),
-            () => {  }
+            () => { this.payPage() }
           )
         }.width("100%")
         .padding({top: 12})

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

@@ -0,0 +1,172 @@
+import { BasicType, DiaLogSheetControl, YTAvoid, YtDatePicker, YTHeader, yTRouter } from 'basic'
+import { AddressItemComp } from '../../components/AddressItemComp'
+import { buttonComp } from '../../components/BuilderIndex'
+import { CustomTextStyle } from '../../style/CustomTextStyle'
+
+// 预约还书
+@ComponentV2
+struct ReserveReturnPage {
+  @Param isComplete: boolean = false
+
+  @Local selectTime: string = ''
+
+  safeBottom: number = AppStorage.get(YTAvoid.SAFE_BOTTOM_KEY) as number
+  forEach: Array<BasicType> = [
+    {text: '快递公司', message: '京东快递'},
+    {text: '取件时间', message: '请选择', type: 'Time', click: () => { this.openTimePickerBuilder() }},
+    {text: '付款方式', message: '到付'},
+  ]
+
+  // 提交预约取件
+  editAddress() {
+    yTRouter.router2CenterDialog({
+      param: { text: '确认提交', message: '确定提交预约还书？提交后不可取消' }
+    })
+  }
+
+  // 选择时间弹窗
+  openTimePickerBuilder() {
+    let control = new DiaLogSheetControl(this.getUIContext(), false, false)
+    yTRouter.router2BottomDialog({
+      control: control,
+      builder: () => {
+        this.DatePickerBuilder(control, this.selectTime)
+      }
+    }, (info: PopInfo) => {
+      let ans = info.result as string
+      this.selectTime = ans
+      console.log(`时间 => ${ans}`)
+    })
+  }
+
+  build() {
+    NavDestination() {
+      Column() {
+        YTHeader({defaultStyle: {title: '预约还书'}, bgc: Color.White})
+
+        Column({space: 16}){
+          Column({space: 5}){
+            if(this.isComplete) {
+              Text(`归还图书数量（${10}本）`)
+                .attributeModifier(new CustomTextStyle({size: 14, weight: 500}))
+            } else {
+              Text('预约成功！')
+                .attributeModifier(new CustomTextStyle({size: 15, weight: 500, color: '#333333'}))
+              Text('请保存手机畅通，等待快递员上门取件。')
+                .attributeModifier(new CustomTextStyle({size: 15, weight: 500, color: '#333333'}))
+            }
+          }
+          .width('100%')
+          .padding(16)
+          .borderRadius(8)
+          .border({width: 2})
+          .backgroundColor(Color.White)
+          .alignItems(HorizontalAlign.Start)
+
+          AddressItemComp({ type: 3, isLocation: false, align_: VerticalAlign.Top })
+
+          Column(){
+            ForEach(this.forEach, (item: BasicType, index) => {
+              Row(){
+                Text(item.text)
+                  .attributeModifier(new CustomTextStyle({size: 14, weight: 500}))
+
+                if(item.type == 'Time') {
+                  Row({space: 2}){
+                    Text(this.selectTime || item.message)
+                      .attributeModifier(new CustomTextStyle({
+                        size: 14, weight: 500,
+                        color: this.selectTime ? '#FF000000' : '#C1C1C1'
+                      }))
+                    Image($r('[basic].media.ic_public_arrow_left'))
+                      .width(22)
+                      .aspectRatio(1)
+                      .rotate({angle: 180})
+                  }.onClick(item.click)
+                } else {
+                  Text(item.message)
+                    .attributeModifier(new CustomTextStyle({size: 14, weight: 500}))
+                }
+              }.width('100%').justifyContent(FlexAlign.SpaceBetween)
+              .padding({top: 15, bottom: 15})
+
+              if (this.forEach.length - 1 != index) {
+                Divider()
+                  .width('100%').height(1)
+                  .backgroundColor('#ffd4d0d0')
+              }
+            })
+          }
+          .padding(15)
+          .width('100%')
+          .borderRadius(8)
+          .border({width: 2})
+
+          this.textBuilder()
+        }
+        .padding(15)
+        .width('100%')
+        .layoutWeight(1)
+
+        if(this.isComplete){
+          Row(){
+            buttonComp('提交', '100%', 10, new CustomTextStyle({size: 18, weight: 500}), () => {
+              this.editAddress()
+            })
+          }
+          .backgroundColor(Color.White)
+          .padding({left: 15, right: 15, bottom: this.safeBottom, top: 10})
+        }
+      }
+      .width('100%')
+      .height('100%')
+      .backgroundColor('#F7F9FA')
+    }
+    .hideTitleBar(true)
+  }
+
+  // 时间选择器
+  @Builder
+  DatePickerBuilder(control: DiaLogSheetControl, date: string){
+    YtDatePicker({
+      selectDateBack: (date?: Date): boolean => {
+        if(!date) return control._onBackPress()
+        // 转换为 YY-MM-DD HH:mm:ss 格式
+        const year = date.getFullYear().toString();
+        const month = (date.getMonth() + 1).toString().padStart(2, '0');
+        const day = date.getDate().toString().padStart(2, '0');
+
+        const result = `${year}-${month}-${day}`;
+        return control._onBackPress(result)
+      },
+      selectedDate: date ? new Date(date) : new Date(),
+      linearInfo: { colors: [['#FFF6F6F6', 1]] },
+      needCancel: true
+    })
+  }
+
+  @Builder
+  textBuilder(){
+    Column({space: 3}){
+      Text('温馨提示')
+        .attributeModifier(new CustomTextStyle({size: 15, weight: 500, color: '#C1C1C1'}))
+
+      Text('1、整单图书需要整借整还，如漏还、错还，后续产生的邮费需用户自理。')
+        .attributeModifier(new CustomTextStyle({size: 15, weight: 500, color: '#C1C1C1'}))
+
+      Text('2、为了方便下一位小朋友借阅，请使用原包装避免运输途中损坏图书。如原包装丢失，请自行准备纸箱包装。')
+        .attributeModifier(new CustomTextStyle({size: 15, weight: 500, color: '#C1C1C1'}))
+
+      Text('3、还书运费已包邮或支付，请勿额外支付运费给快递小哥。如有疑问请及时联系长颈鹿客服：0592-236223。')
+        .attributeModifier(new CustomTextStyle({size: 15, weight: 500, color: '#C1C1C1'}))
+
+    }
+    .width('100%')
+    .alignItems(HorizontalAlign.Start)
+  }
+}
+
+@Builder
+function ReserveReturnBuilder() {
+  ReserveReturnPage()
+}

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

@@ -54,6 +54,11 @@
       "name": "IncreaseAddressPage",
       "pageSourceFile": "src/main/ets/pages/Address/IncreaseAddressPage.ets",
       "buildFunction": "IncreaseAddressBuilder"
+    },
+    {
+      "name": "ReserveReturnPage",
+      "pageSourceFile": "src/main/ets/pages/Order/ReserveReturnPage.ets",
+      "buildFunction": "ReserveReturnBuilder"
     }
   ]
 }