鸿蒙sdk5.1 

代码如下：

import promptAction from '@ohos.promptAction';
import http from '@ohos.net.http';

// ✅ 单个菜品结构
interface OrderItem {
  name: string;
  count: number;
  price: number;
}

// ✅ 订单结构
interface Order {
  id: number;
  customer: string;
  address: string;
  items: OrderItem[];
  status: string; // 状态：待配送、配送中、已完成
  total: number;
}

@Entry
@Component
struct Shangjiahomepage {
  @State orders: Order[] = [];
  @State currentTab: string = '订单管理';
  @State isLoading: boolean = false;

  aboutToAppear() {
    this.loadOrders();
  }

  // ✅ 模拟加载（可换成真实后端）
  loadOrders() {
    this.isLoading = true;

    // 这里可以替换为后端请求：
    // const httpRequest = http.createHttp();
    // httpRequest.request('http://localhost:8080/api/orderitem/1', {
    //   method: http.RequestMethod.GET,
    //   header: { 'Content-Type': 'application/json' }
    // }, (err, data) => {
    //   this.isLoading = false;
    //   if (err) {
    //     promptAction.showToast({ message: '加载失败，请检查网络' });
    //     return;
    //   }
    //   if (data.responseCode === 200) {
    //     this.orders = JSON.parse(data.result) as Order[];
    //   }
    // });

    // 模拟数据
    setTimeout(() => {
      this.orders = [
        {
          id: 1,
          customer: '张三',
          address: '广州天河区天河城',
          items: [
            { name: '汉堡套餐', count: 2, price: 25 },
            { name: '薯条', count: 1, price: 10 },
          ],
          status: '待配送',
          total: 60
        },
        {
          id: 2,
          customer: '李四',
          address: '深圳南山区科技园',
          items: [
            { name: '奶茶', count: 3, price: 12 },
          ],
          status: '配送中',
          total: 36
        },
      ];
      this.isLoading = false;
    }, 600);
  }

  // ✅ 修改订单状态
  updateOrderStatus(orderId: number, newStatus: string) {
    this.orders = this.orders.map(order => {
      if (order.id === orderId) order.status = newStatus;
      return order;
    });
    promptAction.showToast({ message: `订单 ${orderId} 状态已改为：${newStatus}` });
  }

  build() {
    Column() {
      // 顶部栏
      Row() {
        Text('🍔 商家中心')
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
        Blank()
        Button('刷新')
          .fontSize(14)
          .borderRadius(8)
          .onClick(() => this.loadOrders())
      }
      .padding(16)
      .backgroundColor('#FFD54F')

      // 主体内容
      if (this.currentTab === '订单管理') {
        if (this.isLoading) {
          LoadingProgress()
            .color('#FFA000')
            .margin({ top: 50 })
        } else {
          if (this.orders.length === 0) {
            Text('暂无订单')
              .fontSize(18)
              .fontColor('#666')
              .margin({ top: 50 })
              .alignSelf(ItemAlign.Center)
          } else {
            Scroll() {
              List() {
                ForEach(this.orders, (order: Order) => {
                  ListItem() {
                    Column() {
                      Row({ space: 10 }) {
                        Text(`订单号：${order.id}`)
                          .fontSize(18)
                          .fontWeight(FontWeight.Medium)
                        Text(`[${order.status}]`)
                          .fontSize(16)
                          .fontColor(order.status === '待配送' ? '#E64A19' : order.status === '配送中' ? '#1976D2' : '#43A047')
                      }

                      Text(`客户：${order.customer}`)
                        .fontSize(16)
                      Text(`地址：${order.address}`)
                        .fontSize(14)
                        .opacity(0.7)
                        .margin({ bottom: 6 })

                      // ✅ 菜品明细
                      ForEach(order.items, (item: OrderItem) => {
                        Row() {
                          Text(`${item.name} ×${item.count}`)
                            .fontSize(15)
                          Blank()
                          Text(`￥${(item.price * item.count).toFixed(2)}`)
                            .fontSize(15)
                            .fontColor('#E53935')
                        }
                        .margin({ top: 2, bottom: 2 })
                      })

                      Divider()

                      Row() {
                        Text(`合计：￥${order.total}`)
                          .fontSize(16)
                          .fontWeight(FontWeight.Medium)
                          .fontColor('#E53935')
                        Blank()
                        if (order.status === '待配送') {
                          Button('开始配送')
                            .backgroundColor('#4CAF50')
                            .fontColor('#FFF')
                            .onClick(() => this.updateOrderStatus(order.id, '配送中'))
                        } else if (order.status === '配送中') {
                          Button('标记完成')
                            .backgroundColor('#2196F3')
                            .fontColor('#FFF')
                            .onClick(() => this.updateOrderStatus(order.id, '已完成'))
                        } else {
                          Button('已完成')
                            .backgroundColor('#9E9E9E')
                            .fontColor('#FFF')
                            .enabled(false)
                        }
                      }
                    }
                    .padding(16)
                    .backgroundColor('#FFF')
                    .borderRadius(12)
                    .margin({ top: 10, left: 10, right: 10 })
                    .shadow({ radius: 3, color: '#DDD', offsetY: 2 })
                  }
                })
              }
            }
          }
        }
      }

      // ✅ 底部导航栏
      Divider()
      Row({ space: 50 }) {


        Button('订单管理')
          .onClick(() => this.currentTab = '订单管理')
          .fontColor(this.currentTab === '订单管理' ? '#E65100' : '#333')

      }
      .padding(16)
      .backgroundColor('#FFF')
      .justifyContent(FlexAlign.Center)
      .shadow({ radius: 2, color: '#DDD', offsetY: -2 })
    }
    .backgroundColor('#FAFAFA')
    .height('100%')
    .width('100%')
  }
}