diff --git a/project.private.config.json b/project.private.config.json
index ee70760..64df24a 100644
--- a/project.private.config.json
+++ b/project.private.config.json
@@ -14,6 +14,13 @@
           "query": "",
           "launchMode": "default",
           "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/order/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
         }
       ]
     }
diff --git a/src/api/order.ts b/src/api/order.ts
new file mode 100644
index 0000000..0c34ba8
--- /dev/null
+++ b/src/api/order.ts
@@ -0,0 +1,7 @@
+import { useRequest } from "@/use/useHttp"
+export const mpenumsaleorderstatus = () => {
+    return useRequest({
+        url: `/v1/mp/enum/sale/order/status`,
+        method: "get",
+    })
+}
\ No newline at end of file
diff --git a/src/pages/order/components/orderStatusList/index.module.scss b/src/pages/order/components/orderStatusList/index.module.scss
new file mode 100644
index 0000000..0bbc7ba
--- /dev/null
+++ b/src/pages/order/components/orderStatusList/index.module.scss
@@ -0,0 +1,18 @@
+.order_status_list{
+    font-size: $font_size;
+    color: #9E9E9E;
+    margin-top: 20px;
+    .order_status_item{
+        padding: 20px;
+        box-sizing: border-box;
+    }
+    .selected{
+        font-weight: 700;
+        color: #000;
+        border-bottom: 4px solid #707070;
+    }
+    .order_list_scroll{
+        white-space: nowrap;
+        display: flex;
+    }
+}
\ No newline at end of file
diff --git a/src/pages/order/components/orderStatusList/index.tsx b/src/pages/order/components/orderStatusList/index.tsx
new file mode 100644
index 0000000..c5cc56e
--- /dev/null
+++ b/src/pages/order/components/orderStatusList/index.tsx
@@ -0,0 +1,54 @@
+import { ScrollView, View } from '@tarojs/components'
+import { memo, useEffect, useState } from 'react'
+import styles from './index.module.scss'
+import classnames from 'classnames'
+
+type Param = {
+  list: { id: number; name: string }[]
+  defaultId?: number | null
+  onSelect?: (val: number) => void
+}
+export default memo(({ list = [], defaultId = null, onSelect }: Param) => {
+  const [selectInfo, setSelectInfo] = useState({
+    selected: -1, //当前选中的id
+    tabId: '', //需要滚动到的id
+  })
+  useEffect(() => {
+    if (defaultId) {
+      console.log('defaultId:::', defaultId)
+      const index = list?.findIndex((item) => {
+        return item.id == defaultId
+      })
+      if (index !== -1) {
+        const num = index > 0 ? index - 1 : 0
+        setSelectInfo((e) => ({ ...e, tabId: list[num].id.toString() }))
+      }
+    }
+    setSelectInfo((e) => ({ ...e, selected: defaultId || -1 }))
+  }, [defaultId])
+  const clickEvent = ({ item, index }: { item: any; index: number }) => {
+    const num = index > 0 ? index - 1 : 0
+    setSelectInfo((e) => ({ ...e, tabId: list[num].id.toString(), selected: item.id }))
+    onSelect?.(item.id)
+  }
+
+  return (
+    <View className={styles.order_status_list}>
+      <ScrollView scrollX scrollIntoView={`tabs_${selectInfo.tabId}`} scrollWithAnimation={true}>
+        <View className={styles.order_list_scroll}>
+          {list.map((item, index) => {
+            return (
+              <View
+                key={item.id}
+                id={`tabs_${item.id}`}
+                onClick={() => clickEvent({ item, index })}
+                className={classnames(styles.order_status_item, selectInfo.selected == item.id && styles.selected)}>
+                {item.name}
+              </View>
+            )
+          })}
+        </View>
+      </ScrollView>
+    </View>
+  )
+})
diff --git a/src/pages/order/index.tsx b/src/pages/order/index.tsx
index efe4f56..cafd2ef 100644
--- a/src/pages/order/index.tsx
+++ b/src/pages/order/index.tsx
@@ -1,7 +1,44 @@
-import { View } from "@tarojs/components"
+import { View } from '@tarojs/components'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { mpenumsaleorderstatus } from '@/api/order'
+import OrderStatusList from './components/orderStatusList'
 
-const Order = () => {
-  return <View></View>
+//页码和页数
+const [searchField, setSearchField] = useState<{ status: number | unknown; page: number; size: number; name: string }>({
+  status: null,
+  page: 1,
+  size: 10,
+  name: '',
+})
+const pageNum = useRef({ size: searchField.size, page: searchField.page })
+
+
+//获取订单状态
+const { fetchData: orderStatusListFetchData } = mpenumsaleorderstatus()
+const [statusList, setStatusList] = useState<any[]>([{ id: -1, name: '全部' }])
+const getOrderStatusList = async () => {
+  let res = await orderStatusListFetchData()
+  setStatusList((e) => [...e, ...res.data.list])
+}
+
+//状态改变
+const changeStatus = useCallback((e) => {
+  pageNum.current.page = 1
+  setSearchField((value) => ({ ...value, status: e, size: 10 }))
+  // setOrderData(() => ({ list: [], total: 0 }))
+}, [])
+
+
+useEffect(() => {
+  getOrderStatusList()
+}, [])
+
+
+export default () => {
+  return (
+    <View>
+      <OrderStatusList list={statusList} onSelect={changeStatus} defaultId={-1} />
+    </View>
+  )
 }
 
-export default Order