订单物料入库3

entry/src/main/ets/component/OrderMaterialsStorageView.ets

@@ -270,20 +270,33 @@ export struct SingleOrder {
 
 
 @Component
-export struct BoxGrid{
-  private scrollerForList: Scroller = new Scroller()
-  @State selectedIndex: number = -1  // 添加选中索引状态
-  // 选中回调函数
-  private onSelect(index: number): void {
-    this.selectedIndex = index
+export struct BoxGrid {
+  private scrollerMaterial: Scroller = new Scroller()
+  private scrollerEmpty: Scroller = new Scroller()
+
+  // 拆分两个独立的状态变量
+  @State selectedMaterialIndex: number = -1  // 物料箱选中索引
+  @State selectedEmptyIndex: number = -1     // 空箱选中索引
+
+  // 独立的选择回调
+  private onSelectMaterial(index: number) {
+    this.selectedMaterialIndex =
+      (this.selectedMaterialIndex === index) ? -1 : index
+    this.selectedEmptyIndex = -1
+  }
 
+  private onSelectEmpty(index: number) {
+    this.selectedEmptyIndex =
+      (this.selectedEmptyIndex === index) ? -1 : index
+    this.selectedMaterialIndex = -1
   }
-  @Prop materialBoxs: MaterialBox[] = [];
-  @Prop emptyBoxs: EmptyBox[] = [];
+
+  @Prop materialBoxes: MaterialBox[] = [];
+  @Prop emptyBoxes: EmptyBox[] = [];
   build() {
     Column() {
-      Grid(this.scrollerForList) {
-        ForEach(this.materialBoxs, (box: MaterialBox, index) => {
+      Grid(this.scrollerMaterial) {
+        ForEach(this.materialBoxes, (box: MaterialBox, index) => {
           GridItem() {
             Column() {
               // 订单标题（带订单号）
@@ -292,7 +305,7 @@ export struct BoxGrid{
                 .fontColor($r('app.color.FFFFFF'))
                 .width('100%')
                 .textAlign(TextAlign.Start)
-                .margin({ bottom: '2%' })
+                .margin({ bottom: '2%',left:'2%' })
               // 订单详情
               Column({ space: 3 }) {
                 Text(`料箱编号: ${box.id}`)
@@ -317,92 +330,91 @@ export struct BoxGrid{
                   .textAlign(TextAlign.Start)
               }
               .width('100%')
+              .margin({left:'2%'})
               .justifyContent(FlexAlign.Start)
               .alignItems(HorizontalAlign.Start)
             }
             //.margin({ top: 6 })
             .alignItems(HorizontalAlign.Start)
           }
-          .backgroundColor(index === this.selectedIndex ? $r('app.color.2030D158') : $r('app.color.20FFFFFF')) // 选中状态加深
+          .backgroundColor(index === this.selectedMaterialIndex ? $r('app.color.2030D158') : $r('app.color.20FFFFFF')) // 选中状态加深
           .borderRadius($r('app.float.virtualSize_9_6'))
-          .padding(13)
+          .padding(8)
           .border({
             width: 2,
-            color: index === this.selectedIndex ? $r('app.color.2030D158') : $r('app.color.20FFFFFF')
+            color: index === this.selectedMaterialIndex ? $r('app.color.2030D158') : $r('app.color.20FFFFFF')
           })
           .onClick(() => {
-            this.onSelect(index)
+            this.onSelectMaterial(index)
           })
 
         })
       }
       .columnsTemplate('1fr 1fr 1fr')
+     // .rowsTemplate('1fr 1fr')
       .columnsGap(10) // 移除网格内部列间距
       .rowsGap(10) // 移除网格内部行间距
       .width('100%') // 确保填满父容器
-      .height('50%')
+      .height('48%')
       .padding(10)
 
-      Grid(this.scrollerForList) {
-        ForEach(this.materialBoxs, (box: MaterialBox, index) => {
+      Divider()
+        .strokeWidth(1)
+        .color($r('app.color.20FFFFFF'))
+        .margin({top:'1%'})
+        //.margin({top:'2%'})
+
+      Grid(this.scrollerEmpty) {
+        ForEach(this.emptyBoxes, (box: EmptyBox, index) => {
           GridItem() {
-            Column() {
-              // 订单标题（带订单号）
-              Text(`${box.name}`)
-                .fontSize($r('app.float.fontSize_12'))
-                .fontColor($r('app.color.FFFFFF'))
-                .width('100%')
-                .textAlign(TextAlign.Start)
-                .margin({ bottom: '2%' })
-              // 订单详情
-              Column({ space: 3 }) {
-                Text(`料箱编号: ${box.id}`)
-                  .fontColor($r('app.color.FFFFFF'))
-                  .fontSize($r('app.float.fontSize_8'))
-                  .textAlign(TextAlign.Start)
-                Text(`料箱类型: ${box.boxType}`)
-                  .fontColor($r('app.color.FFFFFF'))
-                  .fontSize($r('app.float.fontSize_8'))
-                  .textAlign(TextAlign.Start)
-                Text(`所属订单: ${box.order}`)
-                  .fontColor($r('app.color.FFFFFF'))
-                  .fontSize($r('app.float.fontSize_8'))
-                  .textAlign(TextAlign.Start)
-                Text(`数量: ${box.boxNumber}`)
+            Row() {
+              Column(){
+                // 订单标题（带订单号）
+                Text(`空箱`)
+                  .fontSize($r('app.float.fontSize_12'))
                   .fontColor($r('app.color.FFFFFF'))
-                  .fontSize($r('app.float.fontSize_8'))
+                  .width('100%')
                   .textAlign(TextAlign.Start)
+                  .margin({ top: '2%',left:'2%' })
                 Text(`位置: ${box.position}`)
                   .fontColor($r('app.color.FFFFFF'))
                   .fontSize($r('app.float.fontSize_8'))
                   .textAlign(TextAlign.Start)
-              }
-              .width('100%')
-              .justifyContent(FlexAlign.Start)
-              .alignItems(HorizontalAlign.Start)
+                  .margin({ top: '60%',left:'2%' })
+              }.width('40%').alignItems(HorizontalAlign.Start).justifyContent(FlexAlign.Start)
+              Row(){
+                Image($r('app.media.empty_box'))
+                  .width('100%')
+                  .height('100%')
+                  .objectFit(ImageFit.Contain)
+              }.width('60%')
             }
             //.margin({ top: 6 })
-            .alignItems(HorizontalAlign.Start)
+
           }
-          .backgroundColor(index === this.selectedIndex ? $r('app.color.2030D158') : $r('app.color.20FFFFFF')) // 选中状态加深
+          .backgroundColor(index === this.selectedEmptyIndex ? $r('app.color.2030D158') : $r('app.color.20FFFFFF')) // 选中状态加深
           .borderRadius($r('app.float.virtualSize_9_6'))
-          .padding(13)
+          .padding(8)
+          .height('50%')
           .border({
             width: 2,
-            color: index === this.selectedIndex ? $r('app.color.2030D158') : $r('app.color.20FFFFFF')
+            color: index === this.selectedEmptyIndex ? $r('app.color.2030D158') : $r('app.color.20FFFFFF')
           })
           .onClick(() => {
-            this.onSelect(index)
+            this.onSelectEmpty(index)
           })
 
         })
       }
       .columnsTemplate('1fr 1fr 1fr')
+
       .columnsGap(10) // 移除网格内部列间距
       .rowsGap(10) // 移除网格内部行间距
       .width('100%') // 确保填满父容器
-      .height('50%')
+      .height('48%')
       .padding(10)
+      .margin({top:'1%'})
+
     }
 
 
@@ -483,3 +495,79 @@ export struct MaterialList {
     .justifyContent(FlexAlign.Start)
   }
 }
+
+
+@Component
+export struct MaterialListComponent {
+  private scrollerForList: Scroller = new Scroller()
+  @Link orders: OrderParams[]
+  @State selectedIndex: number = -1  // 添加选中索引状
+  // 选中回调函数
+  private onSelect(index: number): void {
+    this.selectedIndex = index
+  }
+
+  build() {
+    Column() { // 订单列表
+      List({ space: 8,scroller:this.scrollerForList }) {
+        ForEach(this.orders, (item: OrderParams, index) => {
+          ListItem() {
+            Row() {
+              Column(){
+                // 订单标题（带订单号）
+                Text(`${item.orderName}`)
+                  .fontSize($r('app.float.fontSize_12'))
+                  .fontColor($r('app.color.FFFFFF'))
+                  .width('100%')
+                  .textAlign(TextAlign.Start)
+                // 订单详情
+                Column({ space: 3 }) {
+                  Text(`型号: ${item.orderNo}`)
+                    .fontColor($r('app.color.FFFFFF'))
+                    .fontSize($r('app.float.fontSize_8'))
+                    .width('100%')
+                    .textAlign(TextAlign.Start)
+                  Text(`序列号: ${item.date}`)
+                    .fontColor($r('app.color.FFFFFF'))
+                    .fontSize($r('app.float.fontSize_8'))
+                    .width('100%')
+                    .textAlign(TextAlign.Start)
+                  Text(`所属订单: ${item.date}`)
+                    .fontColor($r('app.color.FFFFFF'))
+                    .fontSize($r('app.float.fontSize_8'))
+                    .width('100%')
+                    .textAlign(TextAlign.Start)
+                  Text(`数量: ${item.date}`)
+                    .fontColor($r('app.color.FFFFFF'))
+                    .fontSize($r('app.float.fontSize_8'))
+                    .width('100%')
+                    .textAlign(TextAlign.Start)
+                }
+                .margin({ top: 4 })
+                .alignItems(HorizontalAlign.Start)
+              }.width('90%')
+              Row(){
+                Image($r('app.media.material_delete'))
+                  .width($r('app.float.virtualSize_23'))
+                  .height($r('app.float.virtualSize_23'))
+                  .fillColor($r('app.color.FF453A'))
+                  .onClick(()=>{
+                    this.orders.splice(index, 1);
+
+                  })
+              }.width('10%')
+            }
+            .backgroundColor($r('app.color.20FFFFFF')) // 选中状态加深
+            .borderRadius($r('app.float.virtualSize_9_6'))
+            .padding(13)
+            //.border({width:2,color:index === this.selectedIndex ? $r('app.color.2030D158'):$r('app.color.20FFFFFF')})
+          }
+        })
+      }
+      .width('100%')
+      .flexGrow(1)
+    }
+    .width('100%')
+    .height('100%')
+  }
+}

entry/src/main/ets/pages/OrderMaterialsStorage.ets

@@ -1,5 +1,5 @@
 import {ProcessFlow,MaterialList,SingleOrder,BoxGrid,
-  OrderListComponent} from "../component/OrderMaterialsStorageView"
+  OrderListComponent,MaterialListComponent} from "../component/OrderMaterialsStorageView"
 import {OrderParams,DemandMaterial,MaterialBox, EmptyBox} from "../params/OrderMaterialsStorageParams"
 import router from '@ohos.router';
 import {NavigationBar} from '../component/NavigationBar'
@@ -13,7 +13,18 @@ struct orderMaterialsStorage {
   @State selectedOrderName: string = ''
   @State selectedOrderInRatio:string = ''
   @State currentStep: number = 1;
-  @State emptyBox : EmptyBox []=[{ position: 'X-1Y-2' },{ position: 'X-1Y-2' },{ position: 'X-1Y-2' },{ position: 'X-1Y-2' }, ]
+  @State emptyBoxes: EmptyBox[] = [
+    { position: 'X-1Y-2' },
+    { position: 'X-1Y-2' },
+    { position: 'X-1Y-2' },
+    { position: 'X-1Y-2' },
+    { position: 'X-1Y-2' },
+    { position: 'X-1Y-2' },
+    { position: 'X-1Y-2' },
+    { position: 'X-1Y-2' },
+    { position: 'X-1Y-2' },
+    { position: 'X-1Y-2' } // 图片显示6个空箱位置
+  ]
   @State materialBoxes: MaterialBox[] = [
   // 第一行物料箱
     {
@@ -190,6 +201,10 @@ struct orderMaterialsStorage {
     {materialName: 'PCBA电路板-SADD1231241142324233231233234', materialType: '12322221232321222332211233', inBoundNum: 11, planNum: 20 },
     {materialName: 'PCBA电路板-SADD1231241142324233231233234', materialType: '12322221232321222332211233', inBoundNum: 11, planNum: 20 },
   ];
+  deleteOrder(index: number) {
+    // 从数组中删除指定项
+    this.orders.splice(index, 1)
+  }
 
   build() {
     Row() {
@@ -279,9 +294,9 @@ struct orderMaterialsStorage {
                   .fontSize($r('app.float.fontSize_12'))
                   .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
               }
-              .width('20%')
+              .width('22%')
               .height('6%')
-              .margin({bottom:'3%',left:'75%'})
+              .margin({bottom:'3%',left:'73%'})
               .backgroundColor(this.selectedOrderNo ?$r('app.color.20FFFFFF'):$r('app.color.10FFFFFF'))
               .borderRadius($r('app.float.virtualSize_6_4'))
               .enabled(!!this.selectedOrderNo) // 只有选中订单时才启用按钮
@@ -395,7 +410,7 @@ struct orderMaterialsStorage {
                     .fontSize($r('app.float.fontSize_15_2'))
                 }.height('10%')
                 Row() {
-                  BoxGrid({ materialBoxs:this.materialBoxes,emptyBoxs:this.emptyBox })
+                  BoxGrid({ materialBoxes:this.materialBoxes,emptyBoxes:this.emptyBoxes })
                     .width('100%')
                     .height('100%')
                 }.width('100%').height('90%')
@@ -404,59 +419,232 @@ struct orderMaterialsStorage {
             .height('85%')
             .justifyContent(FlexAlign.SpaceEvenly)
             .width('100%')
-            Button({type:ButtonType.Normal}) {
-              Text("下一步")
-                .fontSize($r('app.float.fontSize_12'))
-                .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
-            }
-            .width('20%')
-            .height('6%')
-            .margin({bottom:'3%',left:'75%'})
-            .backgroundColor(this.selectedOrderNo ?$r('app.color.20FFFFFF'):$r('app.color.10FFFFFF'))
-            .borderRadius($r('app.float.virtualSize_6_4'))
-            .enabled(!!this.selectedOrderNo) // 只有选中订单时才启用按钮
-            .onClick(() => {
-              this.currentStep = 2;
-            })
+            Row({space:15}){
+              Button({type:ButtonType.Normal}) {
+                Text("上一步")
+                  .fontSize($r('app.float.fontSize_12'))
+                  .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
+              }
+              .width('22%')
+               .height('100%')
+              .backgroundColor(this.selectedOrderNo ?$r('app.color.20FFFFFF'):$r('app.color.10FFFFFF'))
+              .borderRadius($r('app.float.virtualSize_6_4'))
+              .enabled(!!this.selectedOrderNo) // 只有选中订单时才启用按钮
+              .onClick(() => {
+                this.currentStep = 1;
+              })
+              Button({type:ButtonType.Normal}) {
+                Text("料箱出库")
+                  .fontSize($r('app.float.fontSize_12'))
+                  .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
+              }
+              .width('22%')
+              .height('100%')
+              .backgroundColor(this.selectedOrderNo ?$r('app.color.20FFFFFF'):$r('app.color.10FFFFFF'))
+              .borderRadius($r('app.float.virtualSize_6_4'))
+              .enabled(!!this.selectedOrderNo) // 只有选中订单时才启用按钮
+              .onClick(() => {
+                this.currentStep = 2;
+              })
+              Button({type:ButtonType.Normal}) {
+                Text("下一步")
+                  .fontSize($r('app.float.fontSize_12'))
+                  .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
+              }
+              .width('22%')
+              .height('100%')
+              .backgroundColor(this.selectedOrderNo ?$r('app.color.20FFFFFF'):$r('app.color.10FFFFFF'))
+              .borderRadius($r('app.float.virtualSize_6_4'))
+              .enabled(!!this.selectedOrderNo) // 只有选中订单时才启用按钮
+              .onClick(() => {
+                this.currentStep = 3;
+              })
+
+            }.width('100%').height('6%').justifyContent(FlexAlign.End).margin({bottom:'3%',right:'5%'})
           }.height('83.6%').margin({top:'3%'}).width('100%')
           .justifyContent(FlexAlign.SpaceAround)
           .width('100%')
         }
-        if(this.currentStep === 3)
-        {
-
-          Row(){
-
+        if(this.currentStep === 3){
+          Column(){
             Row(){
+              Column(){
+                Row(){
+                  Column(){
+                    Text("扫码录入")
+                      .fontColor($r('app.color.FFFFFF'))
+                      .fontSize($r('app.float.fontSize_15_2'))
+                    Text('电机生产订单DWS123331223332（电路板-SDASDASFSADASD）')
+                      .fontColor($r('app.color.FFFFFF'))
+                      .fontSize($r('app.float.fontSize_8'))
+                  }.height('100%').width('65%').alignItems(HorizontalAlign.Start).justifyContent(FlexAlign.Center)
+                  Row() {
+                    // 左侧二维码图标
+                    Image($r('app.media.material_qr_code')) // 请替换为您的二维码图片资源
+                      .width($r('app.float.virtualSize_16_8'))
+                      .height($r('app.float.virtualSize_16_8'))
+                      .fillColor($r('app.color.FFFFFF'))
+                      .margin({left:'2%'})
+                    // 扫码输入框
+                    TextInput({ placeholder: '请扫描物料编码' })
+                      .type(InputType.Normal)
+                      .placeholderFont({ size: $r('app.float.fontSize_12')})
+                      .placeholderColor($r('app.color.30FFFFFF'))
+                      .fontSize($r('app.float.fontSize_12'))
+                      .fontColor($r('app.color.FFFFFF'))
+                  }.width('35%')
+                  .borderRadius($r('app.float.virtualSize_7_2'))
+                  .backgroundColor($r('app.color.000000'))
+                }.justifyContent(FlexAlign.Start)
+                .height('10%')
+                .width('95%')
+                .justifyContent(FlexAlign.Center)
 
-              MaterialList({MaterialData: this.materialData })
-                .width('100%')
-                .height('100%')
-            }.width('75%')
-            .backgroundColor($r('app.color.10FFFFFF'))
-            .height("100%")
-            .alignItems(VerticalAlign.Top)
+                Row() {
+                  MaterialListComponent({orders:this.orders}).width('95%')
+                }.width('100%').height('90%').justifyContent(FlexAlign.Center)
+              }.width('62%').backgroundColor($r('app.color.10FFFFFF'))
+              Image($r('app.media.arrow_right'))
+                .width($r('app.float.virtualSize_23'))
+                .height($r('app.float.virtualSize_23'))
+                .fillColor($r('app.color.FFFFFF'))
+                .margin({left:'-2%',right:'-2%'})
+              Column(){
+                SingleOrder({
+                  selectedOrderNo:this.selectedOrderNo,
+                  selectedOrderDate:this.selectedOrderDate,
+                  selectedOrderName:this.selectedOrderName,
+                  selectedOrderInRatio:this.selectedOrderInRatio
+                }).height('18%').width('95%')
+                Column(){
+                  Text('查询物料')
+                    .fontColor($r('app.color.FFFFFF'))
+                    .fontSize($r('app.float.fontSize_15_2'))
+                    .margin({top:'4%'})
+                  Row() {
+                    // 左侧二维码图标
+                    Image($r('app.media.material_qr_code')) // 请替换为您的二维码图片资源
+                      .width($r('app.float.virtualSize_16_8'))
+                      .height($r('app.float.virtualSize_16_8'))
+                      .fillColor($r('app.color.FFFFFF'))
+                      .margin({left:'2%'})
+                    // 扫码输入框
+                    TextInput({ placeholder: '请扫描物料编码' })
+                      .type(InputType.Normal)
+                      .placeholderFont({ size: $r('app.float.fontSize_12')})
+                      .placeholderColor($r('app.color.30FFFFFF'))
+                      .fontSize($r('app.float.fontSize_12'))
+                      .fontColor($r('app.color.FFFFFF'))
+                  }
+                  .margin({top:'3%'})
+                  .height('8%')
+                  .width('80%')
+                  .borderRadius($r('app.float.virtualSize_7_2'))
+                  .backgroundColor($r('app.color.000000'))
+                  // 操作说明
+                  Text('通过物料扫码查询当前库存是否有同型号物')
+                    .fontSize($r('app.float.fontSize_8'))
+                    .fontColor($r('app.color.60FFFFFF'))
+                    .width('100%')
+                    .textAlign(TextAlign.Center)
+                    .margin({top:'2%'})
 
-          }.height('65%')
-          .justifyContent(FlexAlign.SpaceAround)
-          .width('100%')
-          Row(){
-            Button("上一步")
-              .width("30%")
-              .onClick(()=>{
+                  Column() {
+                    Image($r('app.media.arrow_down'))
+                      .width($r('app.float.virtualSize_23'))
+                      .height($r('app.float.virtualSize_23'))
+                      .fillColor($r('app.color.FFFFFF'))
+                    Column({space:5}){
+                      Text('DIANLUBANPCBAADD123124114232423ASD')
+                        .fontSize($r('app.float.fontSize_12'))
+                        .fontColor($r('app.color.0A84FF'))
+                        .textAlign(TextAlign.Start)
+                        .width('100%')
+                      Text('产品型号:12322221232321222332211233')
+                        .fontSize($r('app.float.fontSize_8'))
+                        .fontColor($r('app.color.0A84FF'))
+                        .textAlign(TextAlign.Start)
+                        .width('100%')
+                      Text('序列号：123254213452465346346456')
+                        .fontSize($r('app.float.fontSize_8'))
+                        .fontColor($r('app.color.0A84FF'))
+                        .textAlign(TextAlign.Start)
+                        .width('100%')
+                      Text('数量：10个')
+                        .fontSize($r('app.float.fontSize_8'))
+                        .fontColor($r('app.color.0A84FF'))
+                        .textAlign(TextAlign.Start)
+                        .width('100%')
+                    }.backgroundColor($r('app.color.000000'))
+                    .borderRadius($r('app.float.virtualSize_7_2'))
+                    .padding(16)
+                    .margin({top:'4%'})
+                    .height('40%')
+                    .width('80%')
+                    Row(){
+                      Text('当前有 ')
+                        .fontSize($r('app.float.fontSize_8'))
+                        .fontColor($r('app.color.60FFFFFF'))
+                      Text('6')
+                        .fontSize($r('app.float.fontSize_12'))
+                        .fontColor($r('app.color.0A84FF'))
+                      Text(' 个料箱装有同型号物料')
+                        .fontSize($r('app.float.fontSize_8'))
+                        .fontColor($r('app.color.60FFFFFF'))
+                    }.justifyContent(FlexAlign.Center)
+                    .margin({top:'5%'})
+                  }.margin({top:'4%'})
+                }.height('82%').width('95%').justifyContent(FlexAlign.Start)
+              }.width('30%').backgroundColor($r('app.color.10FFFFFF'))
+            }
+            .height('85%')
+            .justifyContent(FlexAlign.SpaceEvenly)
+            .width('100%')
+            Row({space:15}){
+              Button({type:ButtonType.Normal}) {
+                Text("上一步")
+                  .fontSize($r('app.float.fontSize_12'))
+                  .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
+              }
+              .width('22%')
+              .height('100%')
+              .backgroundColor(this.selectedOrderNo ?$r('app.color.20FFFFFF'):$r('app.color.10FFFFFF'))
+              .borderRadius($r('app.float.virtualSize_6_4'))
+              .enabled(!!this.selectedOrderNo) // 只有选中订单时才启用按钮
+              .onClick(() => {
                 this.currentStep = 1;
               })
-            Button("料箱出库")
-              .width("30%")
-              .onClick(()=>{
-                this.currentStep = 1;
+              Button({type:ButtonType.Normal}) {
+                Text("料箱出库")
+                  .fontSize($r('app.float.fontSize_12'))
+                  .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
+              }
+              .width('22%')
+              .height('100%')
+              .backgroundColor(this.selectedOrderNo ?$r('app.color.20FFFFFF'):$r('app.color.10FFFFFF'))
+              .borderRadius($r('app.float.virtualSize_6_4'))
+              .enabled(!!this.selectedOrderNo) // 只有选中订单时才启用按钮
+              .onClick(() => {
+                this.currentStep = 2;
               })
-            Button("下一步")
-              .width("30%")
-              .onClick(()=>{
-                this.currentStep = 1;
+              Button({type:ButtonType.Normal}) {
+                Text("下一步")
+                  .fontSize($r('app.float.fontSize_12'))
+                  .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
+              }
+              .width('22%')
+              .height('100%')
+              .backgroundColor(this.selectedOrderNo ?$r('app.color.20FFFFFF'):$r('app.color.10FFFFFF'))
+              .borderRadius($r('app.float.virtualSize_6_4'))
+              .enabled(!!this.selectedOrderNo) // 只有选中订单时才启用按钮
+              .onClick(() => {
+                this.currentStep = 3;
               })
-          }
+
+            }.width('100%').height('6%').justifyContent(FlexAlign.End).margin({bottom:'3%',right:'5%'})
+          }.height('83.6%').margin({top:'3%'}).width('100%')
+          .justifyContent(FlexAlign.SpaceAround)
+          .width('100%')
         }
       }
       .width('100%')