diff --git a/project.private.config.json b/project.private.config.json
index 293706a..868dbd4 100644
--- a/project.private.config.json
+++ b/project.private.config.json
@@ -274,6 +274,13 @@
           "query": "purchaser_id=1705",
           "launchMode": "default",
           "scene": null
+        },
+        {
+          "name": "订单页面",
+          "pathName": "pages/order/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
         }
       ]
     }
diff --git a/src/pages/order/components/NavBar/index.module.scss b/src/pages/order/components/NavBar/index.module.scss
new file mode 100644
index 0000000..8cafbeb
--- /dev/null
+++ b/src/pages/order/components/NavBar/index.module.scss
@@ -0,0 +1,38 @@
+.navBarContainer {
+  overflow: hidden;
+  background-color: #fff;
+  height: auto;
+  flex-shrink: 0;
+}
+.navBar {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: 0 24px;
+  box-sizing: border-box;
+  .left_view {
+    flex: 2;
+  }
+  .title {
+    flex: 5;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+    font-size: 36px;
+    font-weight: 550;
+    color: #000;
+  }
+  .right_view {
+    flex: 2;
+  }
+}
+.back {
+  display: flex;
+  align-items: center;
+  .iconName {
+    font-size: 28px;
+  }
+}
diff --git a/src/pages/order/components/NavBar/index.tsx b/src/pages/order/components/NavBar/index.tsx
new file mode 100644
index 0000000..15c63d6
--- /dev/null
+++ b/src/pages/order/components/NavBar/index.tsx
@@ -0,0 +1,75 @@
+import { View } from '@tarojs/components'
+import Taro, { useReady } from '@tarojs/taro'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import IconFont from '@/components/iconfont/iconfont'
+
+interface NavBarPropsType {
+  children?: React.ReactNode
+  hasLeft?: boolean
+  leftSlot?: React.ReactNode
+  title?: string
+  onClickLeftIcon?: () => void
+}
+const NavBar = (props: NavBarPropsType) => {
+  const { children, hasLeft = false, title = '', leftSlot, onClickLeftIcon } = props
+  const handleClickLeftIcon = () => {
+    onClickLeftIcon?.()
+  }
+  const menuButtonRect = useRef<Taro.getMenuButtonBoundingClientRect.Rect | null>(null)
+  const systemInfo = useRef<Taro.getSystemInfoSync.Result | null>(null)
+  const navBarExtendHeight = useRef<number>(0)
+  const rpxToPx = useRef(0)
+  const [, setForceUpdate] = useState({})
+  const [height, setHeight] = useState(0)
+  // 处理布局
+  const handleLayout = () => {
+    const { statusBarHeight, system } = systemInfo.current!
+    const ios = !!(system.toLowerCase().search('ios') + 1)
+    if (ios) {
+      navBarExtendHeight.current = 4 // 下方扩展4像素高度 防止下方边距太小
+    }
+    else {
+      navBarExtendHeight.current = 0
+    }
+    const { top, height: menuHeight } = menuButtonRect.current!
+    const height = menuHeight + (top - statusBarHeight!) * 2 + statusBarHeight! // 整个navBar的高度
+    console.log('height', height)
+    setHeight(height)
+  }
+  useEffect(() => {
+    systemInfo.current = Taro.getSystemInfoSync()
+    menuButtonRect.current = Taro.getMenuButtonBoundingClientRect()
+    rpxToPx.current = systemInfo.current.screenWidth / 750
+    setForceUpdate({})
+    handleLayout()
+  }, [])
+
+  const menuHeight = useMemo(() => {
+    return menuButtonRect.current?.height
+  }, [menuButtonRect.current])
+
+  const menuTop = useMemo(() => {
+    return menuButtonRect.current?.top
+  }, [menuButtonRect.current])
+
+  return <View className={styles.navBarContainer} style={{ height: `${height + navBarExtendHeight.current}px` }}>
+    <View className={styles.navBar} style={{ height: `${menuHeight}px`, marginTop: `${menuTop}px` }}>
+      <View className={styles.left_view}>
+        {hasLeft && leftSlot
+          ? leftSlot
+          : <View className={styles.back} onClick={handleClickLeftIcon}>
+            <IconFont name="icon-zhankai" size={50} color="#000000" customStyle={{ transform: 'rotate(90deg)' }}></IconFont>
+            <View className={styles.iconName}>返回</View>
+          </View>
+        }
+
+      </View>
+      <View className={styles.title}>{ title || children }</View>
+      <View className={styles.right_view}>
+      </View>
+    </View>
+
+  </View>
+}
+export default NavBar
diff --git a/src/pages/order/index.config.ts b/src/pages/order/index.config.ts
index 2b71e0f..a2a8633 100644
--- a/src/pages/order/index.config.ts
+++ b/src/pages/order/index.config.ts
@@ -1,3 +1,4 @@
 export default {
   navigationBarTitleText: '订单',
+  navigationStyle: 'custom',
 }
diff --git a/src/pages/order/index.module.scss b/src/pages/order/index.module.scss
index 6bb3cab..bdfe42d 100644
--- a/src/pages/order/index.module.scss
+++ b/src/pages/order/index.module.scss
@@ -1,274 +1,280 @@
+.orderContainer {
+  overflow: hidden;
+  height: 100%;
+}
 .flexBox {
-    display: flex;
-    width: 200px;
-    align-items: center;
-    justify-content: flex-end;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-left: 24px;
 }
-
-.icon_shaixuan {
-    color: #0D7CFF;
-    font-size: 35px;
-    margin-right: 10px;
+.searchBar {
+  background: #ffffff;
+  padding: 16px 24px;
+  position: sticky;
+  top: 0;
+  z-index: 99;
 }
-
 .activeshaixuan {
-    color: #000;
-    font-size: 35px;
-    margin-right: 10px;
+  color: #000;
+  font-size: 35px;
+  margin-right: 10px;
 }
 
 .shaixuan {
-    margin-right: 32px;
-    font-size: 28px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;
-    color: #000000;
+  font-size: 28px;
+  font-weight: 400;
+  color: #000000;
 }
 
 .activeshai {
-    color: #0D7CFF;
-    margin-right: 32px;
-    font-size: 28px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;
+  color: #0d7cff;
+  margin-right: 32px;
+  font-size: 28px;
+  font-weight: 400;
 }
 
 .popupBox {
-    // padding-bottom: calc($customTabBarHeight + env(safe-area-inset-bottom));
-    // padding-bottom: env(safe-area-inset-bottom);
+  // padding-bottom: calc($customTabBarHeight + env(safe-area-inset-bottom));
+  // padding-bottom: env(safe-area-inset-bottom);
 
-    .topBox {
+  .topBox {
+    display: flex;
+    padding-left: 48px;
+
+    .leftTop {
+      .lefttopTitle {
+        font-size: 28px;
+        font-weight: 500;
+        color: #000000;
+        margin-bottom: 24px;
+      }
+
+      .lefttopSelectBox {
         display: flex;
-        padding-left: 48px;
+        align-items: center;
+        width: 319px;
+        height: 68px;
+        background: #f6f6f6;
+        border-radius: 8px;
+        // opacity: 0.4;
+        justify-content: space-between;
+        margin-right: 16px;
 
-        .leftTop {
-            .lefttopTitle {
-                font-size: 28px;
-                font-family: PingFangSC-Medium, PingFang SC;
-                font-weight: 500;
-                color: #000000;
-                margin-bottom: 24px;
-            }
-
-            .lefttopSelectBox {
-                display: flex;
-                align-items: center;
-                width: 319px;
-                height: 68px;
-                background: #f6f6f6;
-                border-radius: 8px;
-                // opacity: 0.4;
-                justify-content: space-between;
-                margin-right: 16px;
-
-                .lefttopSelectNameactive {
-                    font-size: 28px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
-                    color: #8b8b8b;
-                    margin-left: 24px;
-                }
-
-                .lefttopSelectName {
-                    font-size: 28px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
-                    color: #000000;
-                    margin-left: 24px;
-                }
-
-                .icon_more {
-                    margin-right: 24px;
-                    font-size: 30px;
-                }
-            }
-
-            .activelefttopSelectBox {
-                width: 319px;
-                height: 68px;
-                background: rgba(51, 127, 255, 0.1);
-                border-radius: 8px;
-                border: 1px solid #337FFF;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                margin-right: 16px;
-
-                .lefttopSelectName {
-                    font-size: 28px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
-                    color: #337FFF;
-                    margin-left: 24px;
-                }
-
-                .icon_more {
-                    margin-right: 24px;
-                    font-size: 30px;
-                    color: #337FFF;
-                }
-            }
-        }
-    }
-
-    .secondBox {
-        margin-top: 40px;
-        padding-left: 48px;
-
-        .secondTopfont {
-            font-size: 28px;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
-            color: #000000;
+        .lefttopSelectNameactive {
+          font-size: 28px;
+          font-weight: 400;
+          color: #8b8b8b;
+          margin-left: 24px;
         }
 
-        .inputBox {
-            width: 654px;
-            height: 68px;
-            background: #f6f6f6;
-            border-radius: 8px;
-            // opacity: 0.4;
-            margin-top: 24px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-
-            .orderInput {
-                margin-left: 24px;
-                width: 400px;
-                font-size: 28px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
-                color: #000000;
-            }
-
-            .saomiao {
-                margin-right: 24px;
-                font-size: 40px;
-                color: #000;
-            }
-        }
-    }
-
-    .thirdBox {
-        margin-top: 30px;
-        padding-left: 48px;
-
-        .thirdTopfont {
-            font-size: 28px;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
-            color: #000000;
+        .lefttopSelectName {
+          font-size: 28px;
+          font-weight: 400;
+          color: #000000;
+          margin-left: 24px;
         }
 
-        .flexModebox {
-            margin-top: 24px;
-            display: flex;
-
-            .activemodeBox {
-                margin-right: 16px;
-                width: 152px;
-                height: 68px;
-                background: rgba(51, 127, 255, 0.1);
-                border-radius: 8px;
-                font-size: 28px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
-                color: #337FFF;
-                text-align: center;
-                line-height: 68px;
-                border: 1px solid #337FFF;
-                box-sizing: border-box;
-            }
-
-            .modeBox {
-                margin-right: 16px;
-                width: 152px;
-                height: 68px;
-                background: #f6f6f6;
-                border-radius: 8px;
-                font-size: 28px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
-                color: #000000;
-                text-align: center;
-                line-height: 68px;
-                box-sizing: border-box;
-                // opacity: 0.4;
-            }
+        .icon_more {
+          margin-right: 24px;
+          font-size: 30px;
         }
-    }
+      }
 
-    .bottomBox {
-        // width: 100%;
-        // width: 750px;
-        height: 160px;
-        background: #FFFFFF;
-        // position: fixed;
-        // bottom: calc($customTabBarHeight + env(safe-area-inset-bottom));
-        z-index: 99;
+      .activelefttopSelectBox {
+        width: 319px;
+        height: 68px;
+        background: rgba(51, 127, 255, 0.1);
+        border-radius: 8px;
+        border: 1px solid #337fff;
         display: flex;
-        padding-top: 16px;
         align-items: center;
         justify-content: space-between;
+        margin-right: 16px;
 
-        .resetBox {
-            margin-left: 48px;
-            width: 311px;
-            height: 80px;
-            border-radius: 44px;
-            border: 1px solid #087EFF;
-            font-size: 28px;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
-            color: #337FFF;
-            text-align: center;
-            line-height: 80px;
-            background-color: #fff;
+        .lefttopSelectName {
+          font-size: 28px;
+          font-weight: 400;
+          color: #337fff;
+          margin-left: 24px;
         }
 
-        .button {
-            margin-right: 32px;
-            width: 311px;
-            height: 80px;
-            background: #68b4ff;
-            border-radius: 44px;
-            font-size: 32px;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
-            color: #FFFFFF;
-            text-align: center;
-            line-height: 80px;
+        .icon_more {
+          margin-right: 24px;
+          font-size: 30px;
+          color: #337fff;
         }
+      }
+    }
+  }
 
-        .activeButton {
-            margin-right: 32px;
-            width: 311px;
-            height: 80px;
-            background: #337FFF;
-            border-radius: 44px;
-            font-size: 32px;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
-            color: #fff;
-            text-align: center;
-            line-height: 80px;
-        }
+  .secondBox {
+    margin-top: 40px;
+    padding-left: 48px;
+
+    .secondTopfont {
+      font-size: 28px;
+      font-weight: 500;
+      color: #000000;
     }
 
-    // .areaBox {
-    //     height: calc($customTabBarHeight + env(safe-area-inset-bottom));
-    //     width: 100%;
-    // }
+    .inputBox {
+      width: 654px;
+      height: 68px;
+      background: #f6f6f6;
+      border-radius: 8px;
+      // opacity: 0.4;
+      margin-top: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .orderInput {
+        margin-left: 24px;
+        width: 400px;
+        font-size: 28px;
+        font-weight: 400;
+        color: #000000;
+      }
+
+      .saomiao {
+        margin-right: 24px;
+        font-size: 40px;
+        color: #000;
+      }
+    }
+  }
+
+  .thirdBox {
+    margin-top: 30px;
+    padding-left: 48px;
+
+    .thirdTopfont {
+      font-size: 28px;
+      font-weight: 500;
+      color: #000000;
+    }
+
+    .flexModebox {
+      margin-top: 24px;
+      display: flex;
+
+      .activemodeBox {
+        margin-right: 16px;
+        width: 152px;
+        height: 68px;
+        background: rgba(51, 127, 255, 0.1);
+        border-radius: 8px;
+        font-size: 28px;
+        font-weight: 400;
+        color: #337fff;
+        text-align: center;
+        line-height: 68px;
+        border: 1px solid #337fff;
+        box-sizing: border-box;
+      }
+
+      .modeBox {
+        margin-right: 16px;
+        width: 152px;
+        height: 68px;
+        background: #f6f6f6;
+        border-radius: 8px;
+        font-size: 28px;
+        font-weight: 400;
+        color: #000000;
+        text-align: center;
+        line-height: 68px;
+        box-sizing: border-box;
+        // opacity: 0.4;
+      }
+    }
+  }
+
+  .bottomBox {
+    // width: 100%;
+    // width: 750px;
+    height: 160px;
+    background: #ffffff;
+    // position: fixed;
+    // bottom: calc($customTabBarHeight + env(safe-area-inset-bottom));
+    z-index: 99;
+    display: flex;
+    padding-top: 16px;
+    align-items: center;
+    justify-content: space-between;
+
+    .resetBox {
+      margin-left: 48px;
+      width: 311px;
+      height: 80px;
+      border-radius: 44px;
+      border: 1px solid #087eff;
+      font-size: 28px;
+      font-weight: 500;
+      color: #337fff;
+      text-align: center;
+      line-height: 80px;
+      background-color: #fff;
+    }
+
+    .button {
+      margin-right: 32px;
+      width: 311px;
+      height: 80px;
+      background: #68b4ff;
+      border-radius: 44px;
+      font-size: 32px;
+      font-weight: 500;
+      color: #ffffff;
+      text-align: center;
+      line-height: 80px;
+    }
+
+    .activeButton {
+      margin-right: 32px;
+      width: 311px;
+      height: 80px;
+      background: #337fff;
+      border-radius: 44px;
+      font-size: 32px;
+      font-weight: 500;
+      color: #fff;
+      text-align: center;
+      line-height: 80px;
+    }
+  }
 }
 
-
-
 .order_list {
-    height: calc(100vh - $customTabBarHeight + env(safe-area-inset-bottom) - 230px);
-    background: #f7f7f7;
-
-    // .kongboxTwo {
-    //     height: calc($customTabBarHeight + env(safe-area-inset-bottom));
-    // }
-}
\ No newline at end of file
+  flex: 1 1 auto;
+  overflow: hidden;
+  //   height: calc(100vh - $customTabBarHeight + env(safe-area-inset-bottom) - 230px);
+  background: #f7f7f7;
+}
+.afterSaleIcon {
+  position: relative;
+  width: 68px;
+  height: 68px;
+  background: #ffffff;
+  box-shadow: 0px 0px 12px 0px rgba(104, 180, 255, 0.35);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  border-radius: 50%;
+  .iconName {
+    position: absolute;
+    top: -10px;
+    right: -30px;
+    width: 56px;
+    height: 30px;
+    background: #007aff;
+    border-radius: 10px 0px 10px 0px;
+    font-size: 18px;
+    font-weight: 400;
+    text-align: center;
+    line-height: 30px;
+    color: #ffffff;
+  }
+}
diff --git a/src/pages/order/index.tsx b/src/pages/order/index.tsx
index 9c5ffc0..e2cb4f5 100644
--- a/src/pages/order/index.tsx
+++ b/src/pages/order/index.tsx
@@ -7,6 +7,7 @@ import styles from './index.module.scss'
 import ItemList from './components/itemList'
 import OfflinePay from './components/offlinePay'
 import PayPopup from './components/PayPopup'
+import NavBar from './components/NavBar'
 import {
   GetPayCode, MpEnumSaleOrderStatus,
   MpSaleOrderCancel,
@@ -24,6 +25,7 @@ import InfiniteScroll from '@/components/infiniteScroll'
 import { formatDateTime, formatHashTag, formatImgUrl, formatPriceDiv, formatRemoveHashTag, formatWeightDiv } from '@/common/format'
 import IconFont from '@/components/iconfont/iconfont'
 import { PAY_H5_CODE_URL } from '@/common/constant'
+import { goLink } from '@/common/common'
 
 interface filterObj {
   purchaser_id?: string | number
@@ -591,14 +593,22 @@ const Order = () => {
 
     // }
   }
-
+  const handleAfterSale = () => {
+    goLink('/pages/refundPage/index')
+  }
   return (
-    <View>
-      <View style={{ background: '#FFFFFF', paddingLeft: '20rpx', paddingBottom: '20rpx', position: 'sticky', top: '0', zIndex: '99' }}>
+    <View className={classnames('flex-col', styles.orderContainer)}>
+      <NavBar hasLeft leftSlot={
+        <View className={styles.afterSaleIcon} onClick={handleAfterSale}>
+          <IconFont name="icon-shouhou" size={50} color="007aff"></IconFont>
+          <View className={styles.iconName}>售后</View>
+        </View>
+      } title="订单"
+      />
+      <View className={styles.searchBar}>
         <Search handScan={() => handScan()} defaultValue={searchField.order_no} showScan placeholder="搜索商品/名称/颜色/订单号" showBtn={false} changeOnSearch={getSearchData}>
           <View className={styles.flexBox} onClick={() => showSelctPopup()}>
             <IconFont name="icon-shaixuan" size={35} color={!isDisabled ? '#0D7CFF' : ''} customClassName={styles.activeshaixuan} />
-            {/* <View className={classnames('iconfont', 'icon-shaixuan', !isDisabled ? styles.icon_shaixuan : styles.activeshaixuan)}></View> */}
             <View className={classnames(isDisabled ? styles.shaixuan : styles.activeshai)}>筛选</View>
           </View>
         </Search>