diff --git a/api/dining-hall.js b/api/dining-hall.js
new file mode 100644
index 0000000..12a2703
--- /dev/null
+++ b/api/dining-hall.js
@@ -0,0 +1,10 @@
+import request from '@/utils/request';
+
+// 获取订单列表
+export function getOrderList(params) {
+  return request({
+    url: '/leopen/order/flow/query',
+    method: 'get',
+    params
+  });
+}
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 672592f..239a4f5 100644
--- a/pages.json
+++ b/pages.json
@@ -25,7 +25,8 @@
     {
       "path": "pages/work/index",
       "style": {
-        "navigationBarTitleText": "订单"
+        "navigationBarTitleText": "",
+        "navigationBarBackgroundColor": "#F9FBFF"
       }
     },
     {
diff --git a/pages/components/Tabs.vue b/pages/components/Tabs.vue
new file mode 100644
index 0000000..3a0a298
--- /dev/null
+++ b/pages/components/Tabs.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="list">
+    <div
+      class="list-item"
+      :class="{ active: active == index }"
+      v-for="(item, index) in tabList"
+      :key="index"
+      @click="handleTab(index)"
+    >
+      <div style="padding: 0 5px">{{ item }}</div>
+      <div v-if="active == index" class="line"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    tabList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      active: 0
+    }
+  },
+  mounted() {
+    console.log('🚀 ~ mounted ~ tabs:', this.tabList)
+  },
+  methods: {
+    handleTab(index) {
+      this.active = index
+      this.$emit('changeTab', index)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.list {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: 20px;
+
+  .list-item {
+    font-weight: 700;
+    font-size: 12px;
+    color: rgba(15, 39, 75, 0.8);
+    margin-right: 30px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    position: relative;
+  }
+  .active {
+    font-weight: 500;
+    font-size: 14px;
+    color: #0f274b;
+    z-index: 9;
+  }
+  .line {
+    width: 36px;
+    height: 8px;
+    background: linear-gradient(90deg, #ff6816 0%, rgba(255, 104, 22, 0) 100%);
+    border-radius: 4px 4px 4px 4px;
+    position: absolute;
+    bottom: 0px;
+  }
+}
+</style>
diff --git a/pages/work/index copy.vue b/pages/work/index copy.vue
new file mode 100644
index 0000000..af4b1e8
--- /dev/null
+++ b/pages/work/index copy.vue	
@@ -0,0 +1,183 @@
+<template>
+  <view class="work-container">
+    <!-- 轮播图 -->
+    <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
+      <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
+        <swiper-item v-for="(item, index) in data" :key="index">
+          <view class="swiper-item" @click="clickBannerItem(item)">
+            <image :src="item.image" mode="aspectFill" :draggable="false" />
+          </view>
+        </swiper-item>
+      </swiper>
+    </uni-swiper-dot>
+
+    <!-- 宫格组件 -->
+    <uni-section title="系统管理" type="line"></uni-section>
+    <view class="grid-body">
+      <uni-grid :column="4" :showBorder="false" @change="changeGrid">
+        <uni-grid-item>
+          <view class="grid-item-box">
+            <uni-icons type="person-filled" size="30"></uni-icons>
+            <text class="text">库存查询</text>
+          </view>
+        </uni-grid-item>
+        <uni-grid-item>
+          <view class="grid-item-box">
+            <uni-icons type="staff-filled" size="30"></uni-icons>
+            <text class="text">角色管理</text>
+          </view>
+        </uni-grid-item>
+        <uni-grid-item>
+          <view class="grid-item-box">
+            <uni-icons type="color" size="30"></uni-icons>
+            <text class="text">菜单管理</text>
+          </view>
+        </uni-grid-item>
+        <uni-grid-item>
+          <view class="grid-item-box">
+            <uni-icons type="settings-filled" size="30"></uni-icons>
+            <text class="text">部门管理</text>
+          </view>
+        </uni-grid-item>
+        <uni-grid-item>
+          <view class="grid-item-box">
+            <uni-icons type="heart-filled" size="30"></uni-icons>
+            <text class="text">岗位管理</text>
+          </view>
+        </uni-grid-item>
+        <uni-grid-item>
+          <view class="grid-item-box">
+            <uni-icons type="bars" size="30"></uni-icons>
+            <text class="text">字典管理</text>
+          </view>
+        </uni-grid-item>
+        <uni-grid-item>
+          <view class="grid-item-box">
+            <uni-icons type="gear-filled" size="30"></uni-icons>
+            <text class="text">参数设置</text>
+          </view>
+        </uni-grid-item>
+        <uni-grid-item>
+          <view class="grid-item-box">
+            <uni-icons type="chat-filled" size="30"></uni-icons>
+            <text class="text">通知公告</text>
+          </view>
+        </uni-grid-item>
+        <uni-grid-item>
+          <view class="grid-item-box">
+            <uni-icons type="wallet-filled" size="30"></uni-icons>
+            <text class="text">日志管理</text>
+          </view>
+        </uni-grid-item>
+      </uni-grid>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        current: 0,
+        swiperDotIndex: 0,
+        data: [{
+            image: '/static/images/banner/banner01.jpg'
+          },
+          {
+            image: '/static/images/banner/banner02.jpg'
+          },
+          {
+            image: '/static/images/banner/banner03.jpg'
+          }
+        ]
+      }
+    },
+    methods: {
+      clickBannerItem(item) {
+        console.info(item)
+      },
+      changeSwiper(e) {
+        this.current = e.detail.current
+      },
+      changeGrid(e) {
+        this.$modal.showToast('模块建设中~')
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  /* #ifndef APP-NVUE */
+  page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background-color: #fff;
+    min-height: 100%;
+    height: auto;
+  }
+
+  view {
+    font-size: 14px;
+    line-height: inherit;
+  }
+
+  /* #endif */
+
+  .text {
+    text-align: center;
+    font-size: 26rpx;
+    margin-top: 10rpx;
+  }
+
+  .grid-item-box {
+    flex: 1;
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 15px 0;
+  }
+
+  .uni-margin-wrap {
+    width: 690rpx;
+    width: 100%;
+    ;
+  }
+
+  .swiper {
+    height: 300rpx;
+  }
+
+  .swiper-box {
+    height: 150px;
+  }
+
+  .swiper-item {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    height: 300rpx;
+    line-height: 300rpx;
+  }
+
+  @media screen and (min-width: 500px) {
+    .uni-swiper-dot-box {
+      width: 400px;
+      /* #ifndef APP-NVUE */
+      margin: 0 auto;
+      /* #endif */
+      margin-top: 8px;
+    }
+
+    .image {
+      width: 100%;
+    }
+  }
+</style>
diff --git a/pages/work/index.vue b/pages/work/index.vue
index af4b1e8..5141097 100644
--- a/pages/work/index.vue
+++ b/pages/work/index.vue
@@ -1,183 +1,281 @@
 <template>
-  <view class="work-container">
-    <!-- 轮播图 -->
-    <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
-      <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
-        <swiper-item v-for="(item, index) in data" :key="index">
-          <view class="swiper-item" @click="clickBannerItem(item)">
-            <image :src="item.image" mode="aspectFill" :draggable="false" />
-          </view>
-        </swiper-item>
-      </swiper>
-    </uni-swiper-dot>
+  <div class="content">
+    <div class="top-cont">
+      <div class="top-title">订单</div>
+      <u-input
+        v-model="searchValue"
+        class="top-ipt"
+        placeholder="请输入食堂、档口、菜品/商品名"
+        shape="circle"
+        suffixIcon="../../static/images/search.png"
+        suffixIconStyle="color: #909399"
+        placeholderStyle="font-weight: 400;font-size: 10px;color: rgba(15,39,75,0.4);"
+        @blur="handleSearch"
+      ></u-input>
+      <div class="top-filter">
+        <span style="font-size: 12px; color: #0f274b">筛选</span>
+        <u-icon name="../../static/images/pull.png" />
+      </div>
+    </div>
 
-    <!-- 宫格组件 -->
-    <uni-section title="系统管理" type="line"></uni-section>
-    <view class="grid-body">
-      <uni-grid :column="4" :showBorder="false" @change="changeGrid">
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="person-filled" size="30"></uni-icons>
-            <text class="text">库存查询</text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="staff-filled" size="30"></uni-icons>
-            <text class="text">角色管理</text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="color" size="30"></uni-icons>
-            <text class="text">菜单管理</text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="settings-filled" size="30"></uni-icons>
-            <text class="text">部门管理</text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="heart-filled" size="30"></uni-icons>
-            <text class="text">岗位管理</text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="bars" size="30"></uni-icons>
-            <text class="text">字典管理</text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="gear-filled" size="30"></uni-icons>
-            <text class="text">参数设置</text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="chat-filled" size="30"></uni-icons>
-            <text class="text">通知公告</text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="wallet-filled" size="30"></uni-icons>
-            <text class="text">日志管理</text>
-          </view>
-        </uni-grid-item>
-      </uni-grid>
-    </view>
-  </view>
+    <Tabs :tabList="tabList" @changeTab="changeTab" />
+
+    <div>
+      <div class="order-list" v-for="(item, index) in tableList" :key="index">
+        <div class="flex justify-between">
+          <div class="order-source">订单来源：{{ item.sourceType }}</div>
+          <div style="color: rgba(15, 39, 75, 0.8)">{{ handleOrderState(item.ordState) }}</div>
+        </div>
+        <div class="flex justify-between">
+          <div>
+            <span style="color: #0f274b">{{ item.canteenName }}</span>
+            <span class="intervalName">{{ item.intervalName }}</span>
+          </div>
+          <div style="color: rgba(15, 39, 75, 0.8)">就餐时间：{{ item.orderTime }}</div>
+        </div>
+        <div class="img-cont">
+          <div class="img" v-for="(goods, index) in item.detailList" :key="index">
+            <u-image :src="goods.goodsDishesImgUrl" width="80px" height="80px" />
+            <div>{{ goods.goodsDishesName }}</div>
+          </div>
+          <div class="price">
+            <div>
+              <span>￥</span>
+              <span style="font-size: 18px">{{ item.realAmount }}</span>
+            </div>
+            <div style="color: rgba(15, 39, 75, 0.6)">共{{ item.detailList.length }}件</div>
+          </div>
+        </div>
+        <div class="btn-cont">
+          <div v-if="item.ordState != 10">
+            <u-button size="small">评价</u-button>
+          </div>
+          <div v-if="item.ordState == 10">
+            <u-button size="small">删除订单</u-button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div style="margin: 20px 0" v-if="tableList.length > 0">
+      <u-loadmore :status="status" />
+    </div>
+    <div v-else class="flex justify-center align-center" style="height: 50vh">
+      <u-empty icon="../../static/images/not_order.png" text="暂无相关订单" textColor="#000" />
+    </div>
+  </div>
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-        current: 0,
-        swiperDotIndex: 0,
-        data: [{
-            image: '/static/images/banner/banner01.jpg'
-          },
-          {
-            image: '/static/images/banner/banner02.jpg'
-          },
-          {
-            image: '/static/images/banner/banner03.jpg'
-          }
-        ]
+import { getOrderList } from '@/api/dining-hall'
+import Tabs from '@/pages/components/Tabs.vue'
+
+export default {
+  components: { Tabs },
+  data() {
+    return {
+      tabIndex: 0,
+      pageNum: 1,
+      pageSize: 10,
+      total: 0,
+      searchValue: '',
+      status: 'loadmore',
+      tabList: ['全部订单', '待评价', '退款'],
+      tableList: [
+        {
+          sourceType: 'hygyy双屏消费机', // 订单来源
+          canteenName: '宏源工业园/本周菜谱', // 订单来源
+          intervalName: '午餐', // 餐次
+          ordState: 11, // 订单状态 1 已下单 9 已取消 10 已退款 11 已完成
+          orderTime: '2024-08-12', // 下单时间
+          realAmount: 30.2, // 实付金额
+          detailList: [
+            {
+              goodsDishesName: '苹果', // 商品名称
+              goodsDishesImgUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg' // 商品图片
+            },
+            {
+              goodsDishesName: '苹果', // 商品名称
+              goodsDishesImgUrl: 'https://img.yzcdn.cn/vant/apple-2.jpg' // 商品图片
+            },
+            {
+              goodsDishesName: '苹果', // 商品名称
+              goodsDishesImgUrl: 'https://img.yzcdn.cn/vant/apple-2.jpg' // 商品图片
+            }
+          ] // 订单详情
+        },
+        {
+          sourceType: 'hygyy双屏消费机', // 订单来源
+          canteenName: '宏源工业园/本周菜谱', // 订单来源
+          intervalName: '午餐', // 餐次
+          ordState: 10, // 订单状态 1 已下单 9 已取消 10 已退款 11 已完成
+          orderTime: '2024-08-12', // 下单时间
+          realAmount: 30.2, // 实付金额
+          detailList: [
+            {
+              goodsDishesName: '苹果', // 商品名称
+              goodsDishesImgUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg' // 商品图片
+            },
+            {
+              goodsDishesName: '苹果', // 商品名称
+              goodsDishesImgUrl: 'https://img.yzcdn.cn/vant/apple-2.jpg' // 商品图片
+            },
+            {
+              goodsDishesName: '苹果', // 商品名称
+              goodsDishesImgUrl: 'https://img.yzcdn.cn/vant/apple-2.jpg' // 商品图片
+            }
+          ] // 订单详情
+        }
+      ]
+    }
+  },
+  methods: {
+    handleSearch() {
+      console.log('搜索', this.searchValue)
+      this.getList()
+    },
+    async getList() {
+      console.log('获取列表')
+      const params = {
+        custId: 0,
+        custThridId: 0,
+        custNum: 0,
+        endDateTime: '',
+        pageNum: this.pageNum,
+        pageSize: this.pageSize,
+        rechargeState: '',
+        startDateTime: '',
+        tradeType: '',
+        searchValue: this.searchValue
+      }
+
+      try {
+        const res = await getOrderList(params)
+        console.log('🚀 ~ getList ~ res:', res)
+        this.tableList = res.data.orderInfoList
+        this.total = res.data.count
+        this.status = this.total == this.tableList.length ? 'nomore' : 'loadmore'
+      } catch (error) {
+        console.log(error)
       }
     },
-    methods: {
-      clickBannerItem(item) {
-        console.info(item)
-      },
-      changeSwiper(e) {
-        this.current = e.detail.current
-      },
-      changeGrid(e) {
-        this.$modal.showToast('模块建设中~')
+    onReachBottom() {
+      console.log('🚀 ~ onReachBottom ~ ')
+      if (this.total < 10 || this.total == this.tableList.length) {
+        this.status = 'nomore'
+        return
+      }
+      this.status = 'loading'
+      setTimeout(() => {
+        this.pageSize += 10
+        this.getList()
+        if (this.tableList.length != this.total) this.status = 'loadmore'
+        else this.status = 'nomore'
+      }, 500)
+      console.log('加载..', this.pageSize)
+    },
+    changeTab(index) {
+      console.log('🚀 ~ changeTab ~ index:', index)
+      this.tabIndex = index
+    },
+    // 处理订单状态展示
+    handleOrderState(state) {
+      switch (state) {
+        case 1:
+          return '已下单'
+        case 9:
+          return '已取消'
+        case 10:
+          return '已退款'
+        case 11:
+          return '已完成'
       }
     }
   }
+}
 </script>
 
-<style lang="scss">
-  /* #ifndef APP-NVUE */
-  page {
+<style lang="scss" scoped>
+.content {
+  padding: 16px;
+  background: #f9fbff;
+  min-height: 100vh;
+
+  .top-cont {
     display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    background-color: #fff;
-    min-height: 100%;
-    height: auto;
-  }
-
-  view {
-    font-size: 14px;
-    line-height: inherit;
-  }
-
-  /* #endif */
-
-  .text {
-    text-align: center;
-    font-size: 26rpx;
-    margin-top: 10rpx;
-  }
-
-  .grid-item-box {
-    flex: 1;
-    /* #ifndef APP-NVUE */
-    display: flex;
-    /* #endif */
-    flex-direction: column;
+    justify-content: space-between;
     align-items: center;
-    justify-content: center;
-    padding: 15px 0;
-  }
-
-  .uni-margin-wrap {
-    width: 690rpx;
-    width: 100%;
-    ;
-  }
-
-  .swiper {
-    height: 300rpx;
-  }
-
-  .swiper-box {
-    height: 150px;
-  }
-
-  .swiper-item {
-    /* #ifndef APP-NVUE */
-    display: flex;
-    /* #endif */
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    color: #fff;
-    height: 300rpx;
-    line-height: 300rpx;
-  }
-
-  @media screen and (min-width: 500px) {
-    .uni-swiper-dot-box {
-      width: 400px;
-      /* #ifndef APP-NVUE */
-      margin: 0 auto;
-      /* #endif */
-      margin-top: 8px;
+    margin-bottom: 20px;
+    .top-title {
+      font-weight: 500;
+      font-size: 20px;
+      color: #0f274b;
     }
-
-    .image {
-      width: 100%;
+    .top-ipt {
+      height: 31px;
+      background: #fff;
+      margin-left: 26px;
+      margin-right: 12px;
+    }
+    .top-filter {
+      display: flex;
+      align-items: center;
     }
   }
+
+  .order-list {
+    padding: 8px;
+    background: #fff;
+    border-radius: 8px;
+    font-size: 12px;
+    font-weight: 400;
+    margin-bottom: 12px;
+
+    .order-source {
+      margin-bottom: 12px;
+      font-weight: 500;
+      color: #0f274b;
+    }
+
+    .intervalName {
+      margin-left: 10px;
+      color: #ff6816;
+      border-radius: 1px 1px 1px 1px;
+      border: 1px solid #ff6816;
+      padding: 0 4px;
+    }
+
+    .img-cont {
+      margin: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .img {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        div {
+          margin-top: 8px;
+          color: #0f274b;
+        }
+      }
+    }
+
+    .price {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      color: #0f274b;
+      font-weight: 400;
+      font-size: 12px;
+    }
+
+    .btn-cont {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 10px;
+    }
+  }
+}
 </style>
diff --git a/static/images/not_order.png b/static/images/not_order.png
new file mode 100644
index 0000000..0adb3a7
Binary files /dev/null and b/static/images/not_order.png differ
diff --git a/static/images/pull.png b/static/images/pull.png
new file mode 100644
index 0000000..edf8036
Binary files /dev/null and b/static/images/pull.png differ
diff --git a/static/images/search.png b/static/images/search.png
new file mode 100644
index 0000000..8f57787
Binary files /dev/null and b/static/images/search.png differ