feat: 新增多个订单详情 item

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

@@ -173,7 +173,8 @@ class YTRouter extends NavPathStack {
   }
 
   // 进入订单详情确认页
-  router2OrderDetailPage(params: Array<BookItem>){
+  // @param params OrderDetailModel
+  router2OrderDetailPage(params: ESObject){
     this.pushPathByName('OrderDetailPage', params)
   }
 

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

@@ -58,10 +58,6 @@ export function bookListItemComp(item: RepeatItem<BookListItem>){
 }
 
 
-
-
-
-
 // 按钮
 @Builder
 export function buttonComp(text: string, width: Length, padding: number, font: CustomTextStyle ,onClick: () => void){

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

@@ -1,7 +0,0 @@
-import { BasicType } from "basic"
-
-export interface DiaLogParam{
-  isCenter?: boolean
-  param?: BasicType
-  params?: Array<BasicType>
-}

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

@@ -2,6 +2,8 @@
  * 订单状态枚举
  */
 export enum OrderStatus {
+  /** 未确认订单 */
+  UNCONFIRMED,
   /**
    * @description 待支付
    */
@@ -49,8 +51,14 @@ export enum AddressAddPageState {
   ADD_AND_USE,
 }
 
-
-
-
+// 列表循环枚举
+export enum ForEachLoop {
+  // 纯文本
+  TEXT,
+  // 可点击
+  CLICKABLE,
+  // 带复制功能
+  COPYABLE,
+}
 
 

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

@@ -0,0 +1,7 @@
+import { BookItem } from "basic";
+import { OrderStatus } from "./EnumState";
+
+export class OrderDetailModel{
+  bookList: Array<BookItem> = []
+  status: OrderStatus = OrderStatus.UNCONFIRMED
+}

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

@@ -1,44 +1,18 @@
-import { BasicType, BookItem, DiaLogSheetControl, IBestToast, YTAvoid, YTHeader, yTRouter } from 'basic'
-import { OrderApi } from '../../apis/OrderApi'
+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 } from '../../model/EnumState'
-import { OrderValidationData } from '../../model/OrderModelIndex'
+import { AddressAddPageState, OrderStatus } from '../../model/EnumState'
+import { OrderDetailModel } from '../../model/RouterModel'
 import { CustomTextStyle } from '../../style/CustomTextStyle'
+import { OrderDetailViewModel } from '../viewModel/OrderDetailViewModel'
 
 /**
  * 订单详情 - 订单校验页面
  */
 @ComponentV2
 struct OrderDetailPage {
-  @Local safeBottom: number = AppStorage.get(YTAvoid.SAFE_BOTTOM_KEY) as number
-  // 租借的图书 URL
-  @Param bookList: BookItem[] = []
-
-  @Local forEach: Array<BasicType> = []
-  // 总价
-  // todo 默认为邮费
-  @Local totalPrice: number = 9.99
-  // 地址信息
-  @Local address: Address = {}
-
-  // 用户订单备注
-  remark: string = ''
-
-  // 提交订单校验
-  orderValidation: OrderValidationData = {
-    bookIds: [],
-    deliveryMethod: 2,
-    deposit: 0,
-    payWay: 0,
-    postFee: 9.99,
-    userName: '占三峰',
-    phone: '13598728343',
-    address: '高新区火炬园路321号韩菲诗.诚享大厦304室内',
-    region: '福建-厦门-火炬园',
-  }
+  @Param @Require vm: OrderDetailViewModel
 
   // 打开选择地址弹窗
   openAddressDialog() {
@@ -59,46 +33,8 @@ struct OrderDetailPage {
     })
   }
 
-  // 提交订单
-  submitOrder() {
-    if(!this.orderValidation?.phone) {
-      IBestToast.show('请填写收件人信息')
-      return
-    }
-    // yTRouter.router2BorrowAnsPage()
-
-    this.orderValidation.orderPrice = Number.parseFloat(this.totalPrice.toFixed(2))
-    this.orderValidation.remark = this.remark
-    OrderApi.checkOrder(this.orderValidation)
-  }
-
-
   aboutToAppear(): void {
-    // 书本价格计算
-    let total: number = 0.00
-    this.bookList.forEach((item: BookItem, index) => {
-      if(item.rentPerDay) {
-        total += Number.parseFloat(item.rentPerDay)
-      }
-      this.orderValidation.bookIds?.push(item.id!)
-    })
-
-    // 生成明细
-    this.forEach = [
-      { text: '租借期限', message: '30天' },
-      { text: '租借时间', message: '快递签收日起30天' },
-      { text: '租借价格', message: `￥${total.toFixed(2)}` },
-      { text: '往返运费', message: `￥9.99` },
-      { text: '租借期限', message: '30天' },
-    ]
-
-    // todo 在有地址列表 或 默认地址的情况下添加地址信息
 
-
-
-    // todo 订单校验数据结构整合
-    this.totalPrice += total
-    this.orderValidation.bookPrice = total
   }
 
   build() {
@@ -110,142 +46,26 @@ struct OrderDetailPage {
           List({space: 16}){
             ListItem()
 
-            // 地址栏
-            ListItem(){
-              // todo 订单地址校验
-              if(this.address?.phone) {
-                AddressItemComp({type: 0})
-              } else {
-                Row(){
-                  Text('+ 添加收件人信息')
-                    .attributeModifier(new CustomTextStyle({ size: 16, weight: 500 }))
-                }.width('100%')
-                .borderRadius(8)
-                .border({width: 2})
-                .padding({top: 30, bottom: 30})
-                .justifyContent(FlexAlign.Center)
-              }
-            }
-            .backgroundColor(Color.White)
-            .onClick(() => { this.openAddressDialog() })
+            /** 地址栏 */
+            this.AddressBuilder()
 
-            // 租借的图书
-            ListItem(){
-              Column({space: 10}){
-                Row({space: 10}){
-                  Text('租借图书')
-                    .attributeModifier(new CustomTextStyle({ size: 16, weight: 500, color: '#FF000000' }))
-
-                  Text(`共${this.bookList.length}件`)
-                    .attributeModifier(new CustomTextStyle({ size: 12, weight: 500, color: '#80000000' }))
-                }
-
-                List({space: 15}){
-                  ForEach(this.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)
+            /** 订单状态信息 */
+            this.OrderStatusBuilder()
 
-            // 订单信息
-            ListItem(){
-              Column({space: 16}){
-                ForEach(this.forEach, (item: BasicType, index) => {
-                  Row(){
-                    Text(item.text)
-                      .attributeModifier(new CustomTextStyle({ size: 14, weight: 500, color: '#FF666666' }))
-
-                    Text(item.message)
-                      .attributeModifier(new CustomTextStyle({ size: 14, weight: 400, color: '#FF333333' }))
-                  }.width('100%').justifyContent(FlexAlign.SpaceBetween)
-                })
+            /** 租借的图书 */
+            this.OrderListBuilder()
 
+            /** 订单信息 */
+            this.OrderInfoBuilder()
 
-                Divider().height(1).width('100%').backgroundColor('#FF666666')
+            /** 支付方式 */
+            this.PayMethodBuilder()
 
-                Row(){
-                  Text('小计')
-                    .attributeModifier(new CustomTextStyle({ size: 14, weight: 500, color: '#FF666666' }))
+            /** 备注 */
+            this.RemarkBuilder()
 
-                  Text(`¥${this.totalPrice.toFixed(2)}`)
-                    .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)
-
-            // 支付方式
-            ListItem(){
-              Column({space: 16}){
-                Text('支付方式')
-                  .attributeModifier(new CustomTextStyle({ size: 16, weight: 500, color: '#000000' }))
-
-                Divider().height(1).width('100%').backgroundColor('#FF666666')
-
-                Row(){
-                  Row({space: 5}){
-                    Image($r('[basic].media.icon_wx'))
-                      .width(20)
-                      .aspectRatio(1)
-
-                    Text('微信支付')
-                      .attributeModifier(new CustomTextStyle({ size: 14, weight: 500, color: '#666666' }))
-                  }
-
-                  Image($r('[basic].media.icon_selectSvg'))
-                    .width(14)
-                    .aspectRatio(1)
-                    .fillColor('#20BB06')
-                }
-                .width('100%')
-                .justifyContent(FlexAlign.SpaceBetween)
-              }
-              .justifyContent(FlexAlign.Start)
-              .alignItems(HorizontalAlign.Start)
-              .padding({left: 16, right: 16, top: 9, bottom: 9})
-            }
-            .borderRadius(8)
-            .border({width: 2})
-            .backgroundColor(Color.White)
-
-            // 备注
-            ListItem(){
-              Row({space: 20}){
-                Text('备注')
-                  .attributeModifier(new CustomTextStyle({ size: 14, weight: 500, color: '#FF666666' }))
-
-                TextInput({placeholder: '请输入您的留言', text: $$this.remark})
-                  .padding(0)
-                  .borderRadius(0)
-                  .layoutWeight(1)
-                  .border({width: 0})
-                  .textAlign(TextAlign.End)
-                  .backgroundColor(Color.Transparent)
-              }.width('100%').justifyContent(FlexAlign.SpaceBetween)
-              .padding(16)
-            }
-            .borderRadius(8)
-            .border({width: 2})
-            .backgroundColor(Color.White)
+            /** 订单信息 */
+            this.OrderPayBuilder()
 
             ListItem()
           }.width('100%').height('100%')
@@ -254,22 +74,28 @@ struct OrderDetailPage {
         }.width('100%').layoutWeight(1)
 
         Row(){
-          Text(){
-            Span('应付：')
-            Span(`¥${this.totalPrice.toFixed(2)}`).fontColor('#FFFF0000').fontSize(20)
+          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()
+            })
           }
-          .attributeModifier(new CustomTextStyle({ size: 14, weight: 400, color: '#FF000000' }))
-
-          buttonComp('提交订单', 143, 10, new CustomTextStyle({size: 18}), () => {
-            this.submitOrder()
-          })
         }
         .width('100%')
         .backgroundColor(Color.White)
         .alignItems(VerticalAlign.Center)
         .justifyContent(FlexAlign.SpaceBetween)
         .shadow({radius: 5, offsetY: 5})
-        .padding({bottom: this.safeBottom, top: 10, left: 15, right: 15})
+        .padding({bottom: this.vm.safeBottom, top: 10, left: 15, right: 15})
       }
       .width('100%')
       .height('100%')
@@ -279,6 +105,216 @@ struct OrderDetailPage {
   }
 
 
+  /** 地址栏 */
+  @Builder
+  AddressBuilder() {
+    ListItem(){
+      // todo 订单地址校验
+      if(this.vm.address?.phone) {
+        AddressItemComp({type: 0})
+      } else {
+        Row(){
+          Text('+ 添加收件人信息')
+            .attributeModifier(new CustomTextStyle({ size: 16, weight: 500 }))
+        }.width('100%')
+        .borderRadius(8)
+        .border({width: 2})
+        .padding({top: 30, bottom: 30})
+        .justifyContent(FlexAlign.Center)
+      }
+    }
+    .backgroundColor(Color.White)
+    .onClick(() => { this.openAddressDialog() })
+  }
+
+  /** 订单状态信息 */
+  @Builder
+  OrderStatusBuilder() {
+    ListItem(){
+      Column({space: 5}){
+        Text('待支付')
+          .attributeModifier(new CustomTextStyle({ size: 16, weight: 500, color: '#FF000000' }))
+
+        Text('图书正在检测消毒，尽快发货~')
+          .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(this.vm.forEach, (item: BasicType, index) => {
+          Row(){
+            Text(item.text)
+              .attributeModifier(new CustomTextStyle({ size: 14, weight: 500, color: '#FF666666' }))
+
+            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.toFixed(2)}`)
+              .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')
+
+        Row(){
+          Row({space: 5}){
+            Image($r('[basic].media.icon_wx'))
+              .width(20)
+              .aspectRatio(1)
+
+            Text('微信支付')
+              .attributeModifier(new CustomTextStyle({ size: 14, weight: 500, color: '#666666' }))
+          }
+
+          Image($r('[basic].media.icon_selectSvg'))
+            .width(14)
+            .aspectRatio(1)
+            .fillColor('#20BB06')
+        }
+        .width('100%')
+        .justifyContent(FlexAlign.SpaceBetween)
+      }
+      .justifyContent(FlexAlign.Start)
+      .alignItems(HorizontalAlign.Start)
+      .padding({left: 16, right: 16, top: 9, bottom: 9})
+    }
+    .borderRadius(8)
+    .border({width: 2})
+    .backgroundColor(Color.White)
+  }
+
+  /** 备注栏 */
+  @Builder
+  RemarkBuilder() {
+    ListItem(){
+      Row({space: 20}){
+        Text('备注')
+          .attributeModifier(new CustomTextStyle({ size: 14, weight: 500, color: '#FF666666' }))
+
+        TextInput({placeholder: '请输入您的留言', text: $$this.vm.remark})
+          .padding(0)
+          .borderRadius(0)
+          .layoutWeight(1)
+          .border({width: 0})
+          .textAlign(TextAlign.End)
+          .backgroundColor(Color.Transparent)
+      }.width('100%').justifyContent(FlexAlign.SpaceBetween)
+      .padding(16)
+    }
+    .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})
+    }
+    .borderRadius(8)
+    .border({width: 2})
+    .backgroundColor(Color.White)
+  }
+
+  /** 地址选择弹窗 */
   @Builder
   AddressSelection(control: DiaLogSheetControl) {
     AddressComp({control: control})
@@ -286,6 +322,6 @@ struct OrderDetailPage {
 }
 
 @Builder
-function OrderDetailBuilder(_: string, param: Array<BookItem>) {
-  OrderDetailPage({bookList: param})
+function OrderDetailBuilder(_: string, param: OrderDetailModel) {
+  OrderDetailPage({ vm: new OrderDetailViewModel(param)})
 }

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

@@ -0,0 +1,91 @@
+import { BasicType, BookItem, IBestToast, YTAvoid } from 'basic'
+import { OrderApi } from '../../apis/OrderApi'
+import { Address } from '../../model/Address'
+import { OrderStatus } from '../../model/EnumState'
+import { OrderValidationData } from '../../model/OrderModelIndex'
+import { OrderDetailModel } from '../../model/RouterModel'
+
+@ObservedV2
+export class OrderDetailViewModel{
+  @Trace safeBottom: number = AppStorage.get(YTAvoid.SAFE_BOTTOM_KEY) as number
+
+  // 订单状态
+  @Trace orderStatus: OrderStatus
+
+  // 租借的图书 URL
+  @Trace bookList: BookItem[] = []
+  // 订单明细
+  @Trace forEach: Array<BasicType> = []
+  // 总价
+  @Trace totalPrice: number = 9.99
+  // 地址信息
+  @Trace address: Address = {}
+  // 用户订单备注
+  @Trace remark: string = ''
+
+  // 提交订单校验
+  orderValidation: OrderValidationData = {
+    bookIds: [],
+    deliveryMethod: 2,
+    deposit: 0,
+    payWay: 0,
+    postFee: 9.99,
+    userName: '占三峰',
+    phone: '13598728343',
+    address: '高新区火炬园路321号韩菲诗.诚享大厦304室内',
+    region: '福建-厦门-火炬园',
+  }
+
+  constructor(param: OrderDetailModel) {
+    this.orderStatus = param.status
+
+    if(param.status === OrderStatus.UNCONFIRMED) {
+      this.generateOrderDetail()
+      this.bookList = param.bookList
+    }
+  }
+
+
+  /** 生成订单明细信息 */
+  generateOrderDetail() {
+    // 书本价格计算
+    let total: number = 0.00
+    this.bookList.forEach((item: BookItem, index) => {
+      if(item.rentPerDay) {
+        total += Number.parseFloat(item.rentPerDay)
+      }
+      this.orderValidation.bookIds?.push(item.id!)
+    })
+
+    // 生成明细
+    this.forEach = [
+      { text: '租借期限', message: '30天' },
+      { text: '租借时间', message: '快递签收日起30天' },
+      { text: '租借价格', message: `￥${total.toFixed(2)}` },
+      { text: '往返运费', message: `￥9.99` },
+      { text: '租借期限', message: '30天' },
+    ]
+
+    // todo 在有地址列表 或 默认地址的情况下添加地址信息
+
+    // todo 订单校验数据结构整合
+    this.totalPrice += total
+    this.orderValidation.bookPrice = total
+  }
+
+  /** 生成订单明细信息 */
+  async submitOrder() {
+    if(!this.orderValidation?.phone) {
+      IBestToast.show('请填写收件人信息')
+      return
+    }
+    // yTRouter.router2BorrowAnsPage()
+
+    this.orderValidation.orderPrice = Number.parseFloat(this.totalPrice.toFixed(2))
+    this.orderValidation.remark = this.remark
+    await OrderApi.checkOrder(this.orderValidation)
+  }
+
+  /** 前往联系客服 */
+  gotoCustomerService() {}
+}

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

@@ -2,6 +2,7 @@ import { BookItem, IBestToast, YTAvoid, yTRouter } from "basic";
 import { OrderApi } from "../../apis/OrderApi";
 import { PageResponse } from "../../model/PageResponse";
 import { bookPackageQuery } from "../../model/Query";
+import { OrderDetailModel } from "../../model/RouterModel";
 
 
 @ObservedV2
@@ -89,12 +90,15 @@ export class ThirdViewModel{
       // return
     }
 
-    let param: BookItem[] = []
+    let list: BookItem[] = []
     this.bookList.forEach((item) => {
       if(this.selectList.indexOf(item.id!) != -1) {
-        param.push(item)
+        list.push(item)
       }
     })
+
+    let param: OrderDetailModel = new OrderDetailModel()
+    param.bookList = list
     yTRouter.router2OrderDetailPage(param)
   }
 

features/user/src/main/ets/pages/SuggestionPage.ets

@@ -124,8 +124,7 @@ struct SuggestionPage {
               return
             }
             YTUserRequest.questionBack(this.description, this.contact)
-            // //TODO 发请求提交反馈
-            // YTLog.info(this.description + this.contact + '反馈提交了')
+
           }
         })
       }