diff --git a/project.private.config.json b/project.private.config.json
index 8ec3296..9d9ee30 100644
--- a/project.private.config.json
+++ b/project.private.config.json
@@ -35,6 +35,13 @@
           "query": "",
           "launchMode": "default",
           "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/orderDetails/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
         }
       ]
     }
diff --git a/src/app.config.ts b/src/app.config.ts
index 9636b70..6425366 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -6,6 +6,7 @@ export default defineAppConfig({
     'pages/searchPage/index',
     'pages/customerPage/index',
     'pages/saleuserPage/index',
+    'pages/orderDetails/index'
   ],
   window: {
     backgroundTextStyle: 'light',
diff --git a/src/components/BottomBtns/index.module.scss b/src/components/BottomBtns/index.module.scss
new file mode 100644
index 0000000..96b645b
--- /dev/null
+++ b/src/components/BottomBtns/index.module.scss
@@ -0,0 +1,48 @@
+.flexBox {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    .cancle {
+        width: 160px;
+        height: 72px;
+        border-radius: 40px;
+        opacity: 0.6;
+        border: 1px solid #000000;
+        font-size: 28px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #000000;
+        text-align: center;
+        line-height: 72px;
+        margin-right: 24px;
+    }
+
+    .nextBuy {
+        margin-right: 24px;
+        width: 160px;
+        height: 72px;
+        border-radius: 40px;
+        opacity: 0.6;
+        border: 1px solid #000000;
+        font-size: 28px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #000000;
+        text-align: center;
+        line-height: 72px;
+        margin-right: 24px;
+    }
+
+    .toBuy {
+        margin-right: 24px;
+        width: 160px;
+        height: 72px;
+        border-radius: 40px;
+        border: 1px solid #087EFF;
+        font-size: 28px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #4581FF;
+    }
+}
\ No newline at end of file
diff --git a/src/components/BottomBtns/index.tsx b/src/components/BottomBtns/index.tsx
new file mode 100644
index 0000000..8ab2891
--- /dev/null
+++ b/src/components/BottomBtns/index.tsx
@@ -0,0 +1,81 @@
+import { View } from "@tarojs/components"
+import { memo, useEffect, useState, useMemo } from "react"
+import style from "./index.module.scss"
+interface prosObj {
+    obj?: {
+        sale_mode?: Number,
+        collect_status?: Number | string,
+        status?: Number,
+        payment_method?: Number
+    }
+    cancle?: () => void,
+    nextBuy?: () => void,
+    toPay?: () => void,
+}
+
+export default memo((props: prosObj) => {
+    const {
+        obj = {
+            sale_mode: 0,
+            collect_status: '',
+            status: '',
+            payment_method: 0,
+        },
+        cancle,
+        nextBuy,
+        toPay
+    } = props
+    //判断显示取消订单
+    const showCancel = useMemo(() => {
+        if (
+            (obj.sale_mode === 0 && obj.status === 0) ||
+            (obj.sale_mode === 0 && obj.status === 1) ||
+            (obj.sale_mode === 0 && obj.status === 2) ||
+            (obj.sale_mode === 0 && obj.status === 11 && obj.collect_status == 0) ||
+            (obj.sale_mode === 0 && obj.status === 7 && obj.collect_status == 0) ||
+            (obj.sale_mode === 0 && obj.status === 3 && (obj.payment_method == 3 || obj.payment_method == 5)) ||
+            (obj.sale_mode === 1 && obj.status === 10) ||
+            (obj.sale_mode === 2 && obj.status === 10)
+        ) {
+            return true
+        } else return false
+    }, [obj])
+    //判断显示再次购买
+    const showBuy = useMemo(() => {
+        if (
+            obj.sale_mode === 0 ||
+            (obj.sale_mode === 1 && obj.status !== 10) ||
+            (obj.sale_mode === 2 && obj.status !== 10)
+        ) {
+            return true
+        } else return false
+    }, [obj])
+    //判断显示去付款
+    const canBuy = useMemo(() => {
+        if (
+            (obj.sale_mode === 0 && obj.status === 7 && obj.collect_status == 1) ||
+            (obj.sale_mode === 0 && obj.status === 3 && obj.collect_status == 1) ||
+            (obj.sale_mode === 0 && obj.status === 3 && (obj.payment_method == 3 || obj.payment_method == 5)) ||
+            (obj.sale_mode === 0 && obj.status === 8 && (obj.payment_method == 3 || obj.payment_method == 5 || obj.collect_status == 1)) ||
+            (obj.sale_mode === 0 && obj.status === 9 && (obj.payment_method == 3 || obj.payment_method == 5 || obj.collect_status == 1)) ||
+            (obj.sale_mode === 2 && obj.status === 7)
+        ) {
+            return true
+        } else return false
+    }, [obj])
+
+    return (
+        <View className={style.flexBox}>
+            {
+                showCancel && <View className={style.cancle} onClick={() => cancle?.()}>取消订单</View>
+            }
+            {
+                showBuy && <View className={style.nextBuy} onClick={() => nextBuy?.()}>再次购买</View>
+            }
+            {
+                canBuy && <View className={style.toBuy} onClick={() => toPay?.()}>去付款</View>
+            }
+
+        </View>
+    )
+})
\ No newline at end of file
diff --git a/src/pages/order/components/itemList/index.module.scss b/src/pages/order/components/itemList/index.module.scss
new file mode 100644
index 0000000..9670dbd
--- /dev/null
+++ b/src/pages/order/components/itemList/index.module.scss
@@ -0,0 +1,212 @@
+.itemBox {
+    margin-top: 38px;
+    overflow: hidden;
+    width: 702px;
+    height: 536px;
+    background: #FFFFFF;
+    border-radius: 16px;
+    margin-left: 24px;
+
+    .topItem {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 24px;
+
+        .orderNo {
+            font-size: 28px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #000000;
+            margin-left: 32px;
+        }
+
+        .status {
+            margin-right: 32px;
+            font-size: 28px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #0D7CFF;
+        }
+    }
+
+    .pussName {
+        margin-left: 32px;
+        font-size: 28px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #000000;
+    }
+
+    .line {
+        margin-left: 32px;
+        width: 638px;
+        height: 1px;
+        background: #000000;
+        opacity: 0.1;
+        margin-top: 16px;
+        margin-bottom: 24px;
+    }
+
+    .contBox {
+        width: 638px;
+        margin-left: 32px;
+        display: flex;
+        justify-content: space-between;
+
+        .leftCont {
+            width: 134px;
+            height: 134px;
+            // background: #000000;
+            border-radius: 8px;
+            position: relative;
+
+            .leftContNums {
+                width: 134px;
+                height: 39px;
+                background: #000000;
+                border-radius: 0px 0px 8px 8px;
+                opacity: 0.5;
+                position: absolute;
+                bottom: 0;
+                font-size: 20px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #FFFFFF;
+                text-align: center;
+                line-height: 39px;
+            }
+        }
+
+        .rightCont {
+            margin-left: 24px;
+
+            .rightTop {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                width: 480px;
+                margin-bottom: 32px;
+
+                .productBox {
+                    display: flex;
+                    align-items: center;
+
+                    .productName {
+                        margin-right: 8px;
+                        font-size: 28px;
+                        font-family: PingFangSC-Regular, PingFang SC;
+                        font-weight: 400;
+                        color: #000000;
+                    }
+
+                    .productMode {
+                        width: 60px;
+                        height: 28px;
+                        background: #337FFF;
+                        border-radius: 8px;
+                        font-size: 20px;
+                        font-family: PingFangSC-Medium, PingFang SC;
+                        font-weight: 500;
+                        color: #FFFFFF;
+                        text-align: center;
+                        line-height: 28px;
+                    }
+                }
+
+                .shipMode {
+                    font-size: 28px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #000000;
+                }
+            }
+
+            .colorsBox {
+                display: flex;
+                align-items: center;
+                width: 480px;
+                margin-bottom: 8px;
+
+                .colorNameOne {
+                    flex: 1;
+                    font-size: 24px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #000000;
+                    width: 133px;
+                    height: 30px;
+                    text-align: left;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+
+                .colorName {
+                    flex: 1;
+                    font-size: 24px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #000000;
+                    text-align: center;
+                }
+
+                .colorNameTwo {
+                    flex: 1;
+                    font-size: 24px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #000000;
+                    text-align: right;
+                }
+            }
+        }
+
+
+    }
+
+    .lineOne {
+        width: 638px;
+        height: 1px;
+        background: #000000;
+        opacity: 0.1;
+        margin-left: 32px;
+        margin-top: 24px;
+    }
+
+    .bottomMsg {
+
+        margin-top: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .msgLeft {
+            margin-left: 32px;
+            font-size: 24px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #000000;
+        }
+
+        .msgRight {
+            margin-right: 32px;
+            font-size: 24px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #000000;
+        }
+
+        .msgRightOne {
+            margin-right: 32px;
+            font-size: 28px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #F64861;
+        }
+    }
+
+    .bottomBox {
+        margin-top: 40px;
+    }
+}
\ No newline at end of file
diff --git a/src/pages/order/components/itemList/index.tsx b/src/pages/order/components/itemList/index.tsx
new file mode 100644
index 0000000..8d20f2b
--- /dev/null
+++ b/src/pages/order/components/itemList/index.tsx
@@ -0,0 +1,75 @@
+import { ScrollView, View } from '@tarojs/components'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import styles from './index.module.scss'
+import classnames from 'classnames'
+import BottomBtns from '@/components/BottomBtns'
+
+interface propsObj {
+    obj: object
+}
+
+
+export default memo((props: propsObj) => {
+
+    const {
+        obj = {}
+    } = props
+
+    const cancle = (item) => {
+
+    }
+    const nextBuy = (item) => {
+
+    }
+
+    const toPay = (item) => {
+
+    }
+
+    return (
+        <View className={styles.itemBox}>
+            <View className={styles.topItem}>
+                <View className={styles.orderNo}>单号：XS-LY-2208220092</View>
+                <View className={styles.status}>待接单</View>
+            </View>
+            <View className={styles.pussName}>钟雨乔JENNIEEEEE</View>
+            <View className={styles.line}></View>
+            <View className={styles.contBox}>
+                <View className={styles.leftCont}>
+                    <View className={styles.leftContNums}>颜色 (1)</View>
+                </View>
+                <View className={styles.rightCont}>
+                    <View className={styles.rightTop}>
+                        <View className={styles.productBox}>
+                            <View className={styles.productName}>9265# 26S全棉双卫衣</View>
+                            <View className={styles.productMode}>大货</View>
+                        </View>
+                        <View className={styles.shipMode}>物流</View>
+                    </View>
+                    <View className={styles.colorsBox}>
+                        <View className={styles.colorNameOne}>051# 花灰白</View>
+                        <View className={styles.colorName}>x5m</View>
+                        <View className={styles.colorNameTwo}>¥ 37.50/kg</View>
+                    </View>
+                </View>
+            </View>
+            <View className={styles.lineOne}></View>
+            <View className={styles.bottomMsg}>
+                <View className={styles.msgLeft}>布料信息：</View>
+                <View className={styles.msgRight}>2 种面料，4 种颜色，共 5 米</View>
+            </View>
+            <View className={styles.bottomMsg}>
+                <View className={styles.msgLeft}>预估金额：</View>
+                <View className={styles.msgRightOne}>¥3564.00</View>
+            </View>
+            <View className={styles.bottomBox}>
+                <BottomBtns
+                    obj={obj}
+                    cancle={() => cancle(obj)}
+                    nextBuy={() => nextBuy(obj)}
+                    toPay={() => toPay(obj)}
+                ></BottomBtns>
+            </View>
+        </View >
+    )
+})
\ No newline at end of file
diff --git a/src/pages/order/index.module.scss b/src/pages/order/index.module.scss
index cc86e88..ea7a43a 100644
--- a/src/pages/order/index.module.scss
+++ b/src/pages/order/index.module.scss
@@ -247,6 +247,7 @@
 
 .order_list {
     height: calc(100vh - 160px);
+    background: #f7f7f7;
 
     .bigBpx {
         height: 200px;
diff --git a/src/pages/order/index.tsx b/src/pages/order/index.tsx
index 8d378d8..5be8903 100644
--- a/src/pages/order/index.tsx
+++ b/src/pages/order/index.tsx
@@ -1,4 +1,4 @@
-import { View, ScrollView, Input, Button } from '@tarojs/components'
+import { View, Input, Button } from '@tarojs/components'
 import { useCallback, useEffect, useMemo, useRef, useState, } from 'react'
 import { mpenumsaleorderstatus, OrderListApi } from '@/api/order'
 import OrderStatusList from './components/orderStatusList'
@@ -8,8 +8,8 @@ import styles from "./index.module.scss"
 import classnames from "classnames";
 import Popup from '@/components/popup'
 import InfiniteScroll from '@/components/infiniteScroll'
-import { compose } from 'redux'
 import Taro, { useDidShow } from '@tarojs/taro'
+import ItemList from './components/itemList'
 
 export default () => {
   //页码和页数
@@ -243,11 +243,10 @@ export default () => {
           refresherEnabled={true}
           refresherTriggered={refresherTriggeredStatus}
           selfOnRefresherRefresh={getRefresherRefresh}>
-          {orderData?.list?.map((item) => {
+          {orderData?.list?.map((item, index) => {
             return (
               <View key={item.id} className={styles.order_item_con}>
-                <View className={styles.bigBpx}>2222</View>
-                {/* <Order value={item} onClickBtn={clickOrderBtn} /> */}
+                <ItemList obj={item} key={index}></ItemList>
               </View>
             )
           })}
@@ -309,7 +308,6 @@ export default () => {
 
             <Button className={styles.resetBox} onClick={() => { handReset() }}> 重置</Button >
             <Button className={classnames(isDisabled ? styles.button : styles.activeButton)} disabled={isDisabled} onClick={() => { handSure?.() }}> 确认</Button >
-
           </View>
         </View>
       </Popup>
diff --git a/src/pages/orderDetails/components/BottomApply/index.module.scss b/src/pages/orderDetails/components/BottomApply/index.module.scss
new file mode 100644
index 0000000..eaa51f5
--- /dev/null
+++ b/src/pages/orderDetails/components/BottomApply/index.module.scss
@@ -0,0 +1,9 @@
+
+
+.title {
+    font-size: 28px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.8);
+    margin-bottom: 10px;
+}
\ No newline at end of file
diff --git a/src/pages/orderDetails/components/BottomApply/index.tsx b/src/pages/orderDetails/components/BottomApply/index.tsx
new file mode 100644
index 0000000..345909d
--- /dev/null
+++ b/src/pages/orderDetails/components/BottomApply/index.tsx
@@ -0,0 +1,89 @@
+import { View } from "@tarojs/components"
+import { memo, useEffect, useState, useMemo } from "react"
+import styles from "./index.module.scss"
+import classnames from "classnames";
+interface prosObj {
+    obj?: {
+        sale_mode?: Number,
+        collect_status?: Number | string,
+        status?: Number,
+        payment_method?: Number
+    }
+    handApplyGoods?: () => void,
+    handApplyMoney?: () => void,
+    handSureGoods?: () => void,
+}
+
+export default memo((props: prosObj) => {
+    const {
+        obj = {
+            sale_mode: 0,
+            collect_status: '',
+            status: '',
+            payment_method: 0,
+        },
+        handApplyGoods,
+        handApplyMoney,
+        handSureGoods
+    } = props
+
+    //判断显示申请收货
+    const showTuihuo = useMemo(() => {
+        if (
+            (obj.sale_mode === 0 && obj.status === 9 && obj.collect_status == 2) ||
+            (obj.sale_mode === 0 && obj.status === 9 && (obj.payment_method == 3 || obj.payment_method == 5 || obj.collect_status === 1)) ||
+            (obj.sale_mode === 2 && obj.status === 9)
+        ) {
+            return true
+        } else return false
+    }, [obj])
+    //判断显示申请退款
+    const showTuikuan = useMemo(() => {
+        if (
+            (obj.sale_mode === 0 && obj.status === 11 && (obj.collect_status == 1 || obj.collect_status == 2)) ||
+            (obj.sale_mode === 0 && obj.status === 7 && obj.collect_status == 2) ||
+            (obj.sale_mode === 0 && obj.status === 7 && obj.collect_status == 1) ||
+            (obj.sale_mode === 0 && obj.status === 3 && obj.collect_status == 2) ||
+            (obj.sale_mode === 0 && obj.status === 3 && obj.collect_status == 1) ||
+            (obj.sale_mode === 1 && obj.status === 0) ||
+            (obj.sale_mode === 1 && obj.status === 9) ||
+            (obj.sale_mode === 2 && obj.status === 0)
+        ) {
+            return true
+        } else return false
+    }, [obj])
+    //判断显示确认收货
+    const showTake = useMemo(() => {
+        if (
+            (obj.sale_mode === 0 && obj.status === 8 && obj.collect_status == 2) ||
+            (obj.sale_mode === 0 && obj.status === 8 && (obj.payment_method == 3 || obj.payment_method == 5 || obj.collect_status == 1)) ||
+            (obj.sale_mode === 1 && obj.status === 8) ||
+            (obj.sale_mode === 2 && obj.status === 8)
+        ) {
+            return true
+        } else return false
+    }, [obj])
+
+
+
+    return (
+        < >
+
+
+            {
+                showTuihuo && <View className={styles.title} onClick={() => handApplyGoods?.()}>申请退货</View>
+            }
+
+            {
+                showTuikuan && <View className={styles.tuikuan} onClick={() => handApplyMoney?.()}>申请退款</View>
+
+            }
+
+            {
+                showTake && <View className={styles.tuikuan} onClick={() => handSureGoods?.()}>确认收货</View>
+            }
+
+
+        </>
+    )
+})
\ No newline at end of file
diff --git a/src/pages/orderDetails/components/addressDetailBox/index.module.scss b/src/pages/orderDetails/components/addressDetailBox/index.module.scss
new file mode 100644
index 0000000..32de37d
--- /dev/null
+++ b/src/pages/orderDetails/components/addressDetailBox/index.module.scss
@@ -0,0 +1,134 @@
+.addressBox {
+    width: 702px;
+    height: 223px;
+    background: #FFFFFF;
+    border-radius: 16px;
+    margin-top: 24px;
+    margin-left: 24px;
+
+    .topBox {
+        padding-top: 28px;
+        display: flex;
+        align-items: center;
+
+        .cirle {
+            border-radius: 50%;
+            margin-left: 32px;
+            width: 64px;
+            height: 64px;
+            background: #4A7FFF;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .dingwei {
+                color: #FFFFFF;
+                font-size: 26px;
+            }
+        }
+
+        .address {
+            margin-left: 24px;
+            width: 461px;
+            height: 78px;
+            font-size: 28px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #000000;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            /*这里设置几行*/
+            overflow: hidden;
+            margin-right: 41px;
+        }
+
+        .icon_more {
+            font-size: 30px;
+        }
+    }
+
+    .line {
+        margin-top: 16px;
+        float: right;
+        margin-right: 32px;
+        width: 550px;
+        height: 1px;
+        background: #000000;
+        opacity: 0.1;
+    }
+
+    .bottom {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        margin-top: 24px;
+
+        .name {
+            font-size: 28px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #000000;
+            margin-right: 16px;
+        }
+
+        .phone {
+            font-size: 28px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #000000;
+            margin-right: 70px;
+        }
+
+        .reatBox {
+            position: relative;
+            margin-right: 32px;
+
+            .updateBtn {
+
+                width: 200px;
+                font-size: $font_size_min;
+                background-color: #F0F0F0;
+                height: 64px;
+                border-radius: 24px;
+                color: $color_font_two;
+                // position: absolute;
+                bottom: 10px;
+                // right: -10px;
+                text-align: center;
+                z-index: 999;
+
+                .updateBtn_list {
+                    position: absolute;
+                    display: flex;
+                    z-index: 5;
+                    width: 100%;
+
+                    .updateBtn_item_select {
+                        color: #fff;
+                    }
+                }
+
+                .updateBtn_item {
+                    flex: 1;
+                    text-align: center;
+                    line-height: 64px;
+                }
+
+                .updateBtn_select {
+                    color: #fff;
+                    background-color: $color_main;
+                    border-radius: 24px;
+                    position: absolute;
+                    width: 100px;
+                    height: 61px;
+                    z-index: 1;
+                    transition: all 0.3s ease-in-out;
+                }
+
+            }
+        }
+
+
+    }
+}
\ No newline at end of file
diff --git a/src/pages/orderDetails/components/addressDetailBox/index.tsx b/src/pages/orderDetails/components/addressDetailBox/index.tsx
new file mode 100644
index 0000000..db4803f
--- /dev/null
+++ b/src/pages/orderDetails/components/addressDetailBox/index.tsx
@@ -0,0 +1,48 @@
+import { Image, Text, View } from "@tarojs/components";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+import classnames from "classnames";
+import styles from './index.module.scss'
+
+interface propsObj {
+    receivingStatus: Number,
+    onReceivingStatus?: (any, Number) => void
+}
+export default memo((props: propsObj) => {
+
+    const {
+        receivingStatus = 2,
+        onReceivingStatus
+    } = props
+
+
+
+    return (
+        <View className={styles.addressBox}>
+            <View className={styles.topBox}>
+                <View className={styles.cirle}>
+                    <View className={classnames('iconfont', 'icon-dingwei', styles.dingwei)}></View>
+                </View>
+                <View className={styles.address}>广东省佛山市禅城区南庄镇吉利大道872巷7818号正门口</View>
+                <View className={classnames('iconfont', 'icon-more', styles.icon_more)}></View>
+            </View>
+            <View className={styles.line}></View>
+            <View className={styles.bottom}>
+                <View className={styles.name}>谭先生</View>
+                <View className={styles.phone}>13334726540</View>
+                <View className={styles.reatBox}>
+                    <View className={styles.updateBtn}>
+                        <View className={styles.updateBtn_list}>
+                            <View className={classnames(styles.updateBtn_item, receivingStatus == 1 && styles.updateBtn_item_select)} onClick={(e) => onReceivingStatus?.(e, 1)}>
+                                自提
+                            </View>
+                            <View className={classnames(styles.updateBtn_item, receivingStatus == 2 && styles.updateBtn_item_select)} onClick={(e) => onReceivingStatus?.(e, 2)}>
+                                物流
+                            </View>
+                        </View>
+                        <View style={{ transform: receivingStatus == 1 ? 'translateX(0)' : 'translateX(100%)' }} className={classnames(styles.updateBtn_select)}></View>
+                    </View>
+                </View>
+            </View>
+        </View >
+    )
+})
\ No newline at end of file
diff --git a/src/pages/orderDetails/components/advanceOrderState/index.module.scss b/src/pages/orderDetails/components/advanceOrderState/index.module.scss
new file mode 100644
index 0000000..7779cc4
--- /dev/null
+++ b/src/pages/orderDetails/components/advanceOrderState/index.module.scss
@@ -0,0 +1,64 @@
+
+.advance_main{
+    width:100%;
+    height: 238px;
+    background-color: #007AFF;
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+    font-size: 24px;
+    color: #dddddd;
+    position: relative;
+    .time_con{
+        padding-left: 30px;
+        .times{
+            margin-bottom: 25px;
+            display: flex;
+            align-items: center;
+            .text{
+                margin-right: 15px;
+            }
+            .num{
+                width: 46px;
+                height: 50px;
+                background: #0063ce;
+                border-radius: 10px;
+                line-height: 50px;
+                text-align: center;
+                font-weight: 700;
+                color: #fff;
+            }
+            .separate{
+                padding: 0 10px;
+            }
+        }
+       
+    }
+    .cardIcon{
+        width: 238px;
+        height: 178px;
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        .image{
+            width:100%;
+            height: 100%;
+        }
+    }
+    .refresh{
+        position: absolute;
+        top: 23px;
+        right: 20px;
+        display: flex;
+        color: #dddddd;
+        display: flex;
+        align-items: center;
+        
+        .mconfont{
+            font-size: 36px;
+        }
+        .refresh_text{
+            font-size: 25px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/pages/orderDetails/components/advanceOrderState/index.tsx b/src/pages/orderDetails/components/advanceOrderState/index.tsx
new file mode 100644
index 0000000..d500c56
--- /dev/null
+++ b/src/pages/orderDetails/components/advanceOrderState/index.tsx
@@ -0,0 +1,74 @@
+import { formatImgUrl } from "@/common/fotmat";
+import { Image, Text, View } from "@tarojs/components";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+import classnames from "classnames";
+import styles  from './index.module.scss'
+import dayjs from "dayjs";
+import { useTimeCountDown } from "@/use/useCommon";
+import { ORDER_STATUS, PAYMENT_METHOD } from "@/common/enum";
+
+type List = {
+    status: string,
+    time: string,
+    tag: string,
+    desc: string,
+    expire_time: string
+}
+
+type Param = {
+    onRefresh?: () => void,
+    orderInfo?: {
+        logistics_details:List[], //订单状态列表
+        payment_method: number, //支付方式
+        status: number, //订单状态
+    }
+}
+
+
+export default memo(({orderInfo, onRefresh}:Param) => {
+
+    const {showTime, onStart, timeStatus} = useTimeCountDown()
+
+    //订单状态枚举
+    const {SaleorderstatusWaitingPrePayment} = ORDER_STATUS
+
+    //获取预付款最后时间
+    const endTime = useMemo(() => {
+        if(orderInfo?.status == SaleorderstatusWaitingPrePayment.value && orderInfo.logistics_details.length > 0) {
+            return orderInfo.logistics_details[0].expire_time
+        } 
+        return ''
+    }, [orderInfo])
+
+    useEffect(() => {
+        if(endTime) onStart(endTime)
+    }, [endTime])
+
+    useEffect(() => {
+       if(timeStatus == 2) onRefresh?.()
+    }, [timeStatus])
+
+
+    return (
+        <View className={styles.advance_main}> 
+            <View className={styles.time_con}>
+                <View className={styles.times}>
+                    <Text className={styles.text}>剩</Text>
+                    <Text className={styles.num}>{showTime.HH}</Text>
+                    <Text className={styles.separate}>:</Text>
+                    <Text className={styles.num}>{showTime.MM}</Text>
+                    <Text className={styles.separate}>:</Text>
+                    <Text className={styles.num}>{showTime.SS}</Text>
+                </View>
+                <Text>支付关闭，订单自动取消</Text>
+            </View>
+            <View className={styles.cardIcon}>
+                <Image className={styles.image} src={formatImgUrl("/mall/my_cart.png")}/>
+            </View>
+            <View className={styles.refresh} onClick={() => onRefresh?.()}>
+                <Text className={classnames(styles.mconfont, 'iconfont icon-shuaxin')}></Text>
+                <Text className={classnames(styles.refresh_text)}>刷新</Text>
+            </View>
+        </View>
+    )
+})
\ No newline at end of file
diff --git a/src/pages/orderDetails/components/remark/index.module.scss b/src/pages/orderDetails/components/remark/index.module.scss
new file mode 100644
index 0000000..036a4ce
--- /dev/null
+++ b/src/pages/orderDetails/components/remark/index.module.scss
@@ -0,0 +1,48 @@
+.order_popup{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px 0;
+    .order_popup_title{
+        color: $font_size_big;
+        font-weight: 700;
+        color: #000000;
+        padding-bottom: 20px;
+    }               
+    .order_popup_input{
+        width: 100%;
+        padding: 0 25px;
+        box-sizing: border-box;
+        margin-top: 43px;
+        position: relative;
+        .descDataNum{
+            position: absolute;
+            right: 40px;
+            bottom: 10px;
+            height: 39px;
+            font-size: $font_size_medium;
+            color: $color_font_two;
+        }
+        textarea{
+            background-color: #f3f3f3;
+            border-radius: 10px;
+            width: 100%;
+            height: 313px;
+            padding: 20px;
+            padding-bottom: 50px;
+            box-sizing: border-box;
+            font-size: $font_size;
+            border: 2px solid #e6e6e6;
+        }
+    }
+    .order_save_address{
+        height: 82px;
+        background: #007aff;
+        border-radius: 40px;
+        width: 668px;
+        text-align: center;
+        line-height: 82px;
+        color: #fff;
+        margin-top: 60px;
+    }       
+}
\ No newline at end of file
diff --git a/src/pages/orderDetails/components/remark/index.tsx b/src/pages/orderDetails/components/remark/index.tsx
new file mode 100644
index 0000000..db4b68f
--- /dev/null
+++ b/src/pages/orderDetails/components/remark/index.tsx
@@ -0,0 +1,43 @@
+import Popup from "@/components/popup"
+import { Textarea, View } from "@tarojs/components"
+import { useCallback, useEffect, useState } from "react"
+import styles  from './index.module.scss'
+
+type Param = {
+    onBlur?: (val:any) => void
+    onSave?: (val: string) => void
+    defaultValue?: string
+}
+export default ({onBlur, onSave, defaultValue = ''}:Param) => {
+    const [descData, setDescData] = useState({
+        number: 0,
+        value: '',
+        count: 200
+    })
+
+    useEffect(() => {
+        getDesc(defaultValue)
+    }, [defaultValue])
+
+    const getDesc = (value) => {
+        let res = value
+        if(value.length > descData.count) {
+            res = value.slice(0, descData.count)
+        }
+        setDescData({...descData, number:res.length, value: res})
+    }
+
+    const setSave = () => {
+        onSave?.(descData.value)
+    }
+    return (
+        <View className={styles.order_popup}>
+            <View className={styles.order_popup_title}>编辑备注</View>
+            <View className={styles.order_popup_input}>
+                <Textarea placeholder="请添加备注" value={descData?.value} maxlength={descData.count} cursorSpacing={100} onInput={(e) => getDesc(e.detail.value)} onBlur={(e) => onBlur?.(e)}></Textarea>
+                <View className={styles.descDataNum}>{descData.number}/{descData.count}</View>
+            </View>
+            <View className={styles.order_save_address} onClick={() => setSave()}>保存</View>
+        </View>
+    )
+}
\ No newline at end of file
diff --git a/src/pages/orderDetails/index.config.ts b/src/pages/orderDetails/index.config.ts
new file mode 100644
index 0000000..c4a60e0
--- /dev/null
+++ b/src/pages/orderDetails/index.config.ts
@@ -0,0 +1,4 @@
+export default {
+    navigationBarTitleText: '订单详情',
+    enableShareAppMessage: true,
+}
diff --git a/src/pages/orderDetails/index.module.scss b/src/pages/orderDetails/index.module.scss
new file mode 100644
index 0000000..8bc1381
--- /dev/null
+++ b/src/pages/orderDetails/index.module.scss
@@ -0,0 +1,308 @@
+page {
+    background: #f7f7f7;
+}
+
+.mainBox {
+    .pussBox {
+        margin-top: 24px;
+        display: flex;
+        align-items: center;
+
+        .pussName {
+            font-size: 28px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #000000;
+        }
+
+        .pussPhone {
+            margin-left: 88px;
+            font-size: 28px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #000000;
+        }
+    }
+
+    .total {
+        margin-top: 44px;
+        font-size: 24px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #000000;
+        margin-left: 32px;
+        margin-bottom: 8px;
+    }
+
+    .productBox {
+        width: 702px;
+        background: #FFFFFF;
+        border-radius: 16px;
+        margin-left: 24px;
+        padding-bottom: 36px;
+        overflow: hidden;
+
+        .flexMoney {
+            display: flex;
+            margin-top: 32px;
+            align-items: center;
+            justify-content: space-between;
+
+            .flexTotalBox {
+                display: flex;
+                align-items: center;
+
+                .totalFont {
+                    margin-left: 32px;
+                    margin-right: 8px;
+                    font-size: 28px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #000000;
+                }
+
+                .tishi {
+                    font-size: 28px;
+                }
+            }
+
+            .shoudPay {
+                font-size: 28px;
+                font-family: PingFangSC-Medium, PingFang SC;
+                font-weight: 500;
+                color: #F64861;
+                margin-right: 32px;
+            }
+        }
+    }
+}
+
+
+.defaltBox {
+    margin: 24px;
+    padding: 24px 32px 24px 24px;
+    background: #FFFFFF;
+    border-radius: 16px;
+
+    .titleBox {
+        width: 638px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .title {
+            font-size: 28px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #000000;
+        }
+
+        .modeName {
+            font-size: 28px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #337FFF;
+        }
+    }
+
+    .modeLine {
+        margin-top: 24px;
+        width: 638px;
+        height: 1px;
+        background: #000000;
+        opacity: 0.1;
+    }
+
+}
+
+.goodsBox {
+    margin-top: 24px;
+    overflow: hidden;
+    border-bottom: 8px solid #F7F7F7;
+
+    .goodsProduct {
+        font-size: 28px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #000000;
+        margin-left: 32px;
+    }
+
+    .goodsLine {
+        width: 638px;
+        height: 1px;
+        background: #000000;
+        opacity: 0.1;
+        margin-left: 32px;
+        margin-top: 24px;
+    }
+
+    .itemGoods {
+        margin-top: 24px;
+        display: flex;
+
+        .itemPic {
+            margin-left: 32px;
+            margin-right: 42px;
+            width: 108px;
+            height: 108px;
+            background: #322F2F;
+            border-radius: 8px;
+        }
+
+        .itemRight {
+            padding-bottom: 24px;
+            width: 495px;
+            border-bottom: 1px solid #f7f7f7;
+
+            .item_right_top {
+                margin-bottom: 41px;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+
+                .itemName {
+                    font-size: 28px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #000000;
+                }
+
+                .itemNums {
+                    font-size: 28px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #000000;
+                }
+            }
+
+            .item_right_Bottom {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+
+                .itemMoney {
+                    font-size: 28px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #000000;
+                }
+
+                .itemMoneyOne {
+                    font-size: 28px;
+                    font-family: PingFangSC-Medium, PingFang SC;
+                    font-weight: 500;
+                    color: #000000;
+                }
+            }
+        }
+
+        .itemRight:last-child {
+            padding-bottom: 24px;
+            width: 495px;
+            border: none;
+        }
+    }
+}
+
+.detailBox {
+    display: flex;
+    margin-top: 24px;
+    align-items: center;
+    justify-content: space-between;
+
+    .detailRightFlex {
+        display: flex;
+        align-items: center;
+
+        .detailRight {
+
+            font-size: 28px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #000000;
+        }
+
+        .detailBtn {
+            margin-left: 16px;
+            width: 65px;
+            height: 32px;
+            border-radius: 8px;
+            border: 1PX solid #337FFF;
+            font-size: 24px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #337FFF;
+            text-align: center;
+            line-height: 32px;
+        }
+    }
+
+    .detailFont {
+        font-size: 28px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #000000;
+    }
+}
+
+.remarkFont {
+    margin-top: 24px;
+    font-size: 28px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #000000;
+}
+
+.safeBottom {
+    height: 300px;
+}
+
+.bottomBox {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 750px;
+    height: 160px;
+    background: #FFFFFF;
+    // position: fixed;
+    bottom: 0;
+    padding-bottom: 24px;
+    position: relative;
+
+    .moreFont {
+        font-size: 28px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: rgba(0, 0, 0, 0.8);
+        margin-left: 48px;
+    }
+
+    .posssBox {
+        position: absolute;
+        left: 32px;
+        z-index: 99;
+        bottom: 170px;
+        width: 120px;
+        padding: 24px;
+        background: #fff;
+        border: 1px solid #ccc;
+        box-shadow: 2px 2px 2px #ccc;
+    }
+
+    .posssBox:after {
+        display: inline-block;
+        position: absolute;
+        bottom: -20px;
+        z-index: 88;
+        // left: 5px;
+        width: 0;
+        height: 0px;
+        content: '';
+        border-style: solid;
+        border-width: 20px;
+        border-color: #fff #fff transparent transparent;
+        transform: rotate(135deg);
+        box-shadow: 2px -2px 2px #ccc;
+    }
+}
\ No newline at end of file
diff --git a/src/pages/orderDetails/index.tsx b/src/pages/orderDetails/index.tsx
new file mode 100644
index 0000000..1a5d002
--- /dev/null
+++ b/src/pages/orderDetails/index.tsx
@@ -0,0 +1,206 @@
+import { View } from '@tarojs/components'
+import React, { useCallback, memo, useEffect, useMemo, useRef, useState, ReactNode } from 'react'
+import styles from "./index.module.scss"
+import classnames from "classnames";
+import Taro, { usePullDownRefresh } from '@tarojs/taro';
+import AdvanceOrderState from './components/advanceOrderState'
+import AddressDetailBox from './components/addressDetailBox'
+import Remark from './components/remark'
+import Popup from '@/components/popup'
+import BottomBtns from '@/components/BottomBtns';
+import BottomApply from './components/BottomApply';
+
+export default () => {
+
+    //页面下拉刷新
+    usePullDownRefresh(() => {
+
+    })
+
+
+
+    //收货方法,1:自提，2物流
+    const [receivingStatus, setReceivingStatus] = useState(2)
+    //切换自提或者物流
+    const onReceivingStatus = (e, value) => {
+        e.stopPropagation()
+        setReceivingStatus(value)
+    }
+
+    //订单信息文字数组
+    const [orderMsg, setOrderMsg] = useState<any[]>([
+        {
+            leftTitle: '订单编号：',
+            rightTitle: '2222',
+            showBtn: true
+        },
+        {
+            leftTitle: '创建时间：',
+            rightTitle: '2222',
+        },
+        {
+            leftTitle: '发货时间：',
+            rightTitle: '2222',
+        },
+        {
+            leftTitle: '业务员：',
+            rightTitle: '2222',
+        }
+    ])
+
+    //备注操作
+    const [showDesc, setShowDesc] = useState(false)
+    const getRemark = useCallback(async (e) => {
+
+    }, [])
+
+    //更多按钮查看操作
+    const [showMore, setShowMore] = useState(false)
+
+    return (
+        <View className={styles.mainBox}>
+            {/* <AdvanceOrderState orderInfo={a} onRefresh={refresh} /> */}
+            <AddressDetailBox receivingStatus={receivingStatus} onReceivingStatus={(e, value) => onReceivingStatus(e, value)}></AddressDetailBox>
+            <DefaultBox
+                showMode={true}
+                title={'客户信息'}
+                modeName={'大货'}
+            >
+                <View className={styles.pussBox}>
+                    <View className={styles.pussName}>JENNIEEEEE</View>
+                    <View className={styles.pussPhone}>136******73</View>
+                </View>
+            </DefaultBox>
+            <View className={styles.total}> 1 种面料，1 个颜色，共 4 M</View>
+            <View className={styles.productBox}>
+                <GoodsItem></GoodsItem>
+                <View className={styles.flexMoney}>
+                    <View className={styles.flexTotalBox}>
+                        <View className={styles.totalFont}>合计金额</View>
+                        <View className={classnames('iconfont', 'icon-tishi', styles.tishi)}></View>
+                    </View>
+                    <View className={styles.shoudPay}>12,332.00</View>
+                </View>
+                <View className={styles.flexMoney}>
+                    <View className={styles.flexTotalBox}>
+                        <View className={styles.totalFont}>实付金额</View>
+                        <View className={classnames('iconfont', 'icon-tishi', styles.tishi)}></View>
+                    </View>
+                    <View className={styles.shoudPay}>12,332.00</View>
+                </View>
+                <View className={styles.flexMoney}>
+                    <View className={styles.flexTotalBox}>
+                        <View className={styles.totalFont}>待付金额</View>
+                        <View className={classnames('iconfont', 'icon-tishi', styles.tishi)}></View>
+                    </View>
+                    <View className={styles.shoudPay}>12,332.00</View>
+                </View>
+            </View>
+            <DefaultBox title={'订单信息'}>
+                {
+                    orderMsg.map((item, index) => {
+                        return (
+                            <View className={styles.detailBox} key={index}>
+                                <View className={styles.detailFont}>
+                                    {item.leftTitle}
+                                </View>
+                                <View className={styles.detailRightFlex}>
+                                    <View className={styles.detailRight}>{item.rightTitle}</View>
+                                    {item.showBtn && <View className={styles.detailBtn}>复制</View>}
+                                </View>
+
+                            </View>
+                        )
+                    })
+                }
+
+            </DefaultBox>
+            <DefaultBox title={'备注信息'} showMode={true} modeName={`${'填写/修改备注'} >`} clickNode={() => setShowDesc(true)}>
+                <View className={styles.remarkFont}>尚未备注信息</View>
+            </DefaultBox>
+            <Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
+                <Remark onSave={(e) => getRemark(e)} defaultValue={''} />
+            </Popup>
+            <View className={styles.safeBottom}></View>
+            <View className={styles.bottomBox}>
+                {
+                    !showMore && <View className={styles.moreFont} onClick={() => setShowMore(true)}>更多</View>
+                }
+                {
+                    showMore && <View className={styles.moreFont} onClick={() => setShowMore(false)}>关闭</View>
+                }
+                {
+                    showMore && <View className={styles.posssBox}>
+                        <BottomApply ></BottomApply>
+                    </View>
+                }
+                <BottomBtns></BottomBtns>
+            </View>
+        </View>
+    )
+}
+
+
+
+//卡片盒子元素
+interface Obs {
+    title?: string,
+    modeName?: string,
+    showMode?: boolean,
+    children?: ReactNode,
+    clickNode?: () => void
+}
+
+const DefaultBox = memo((props: Obs) => {
+    const {
+        title = '标题',
+        modeName = '大货',
+        showMode = false,
+        children,
+        clickNode
+    } = props
+
+    return (
+        <View className={styles.defaltBox}>
+            <View className={styles.titleBox}>
+                <View className={styles.title}>{title}</View>
+                {
+                    showMode && <View className={styles.modeName} onClick={() => clickNode?.()}>{modeName}</View>
+                }
+            </View>
+            <View className={styles.modeLine}></View>
+            {children}
+        </View>
+    )
+})
+
+
+//产品商品元素
+interface PropGoods {
+    item?: {
+        code?: string | number
+    }
+}
+const GoodsItem = memo((porps: PropGoods) => {
+    const { item } = porps
+    return (
+        <View className={styles.goodsBox}>
+            <View className={styles.goodsProduct}>0681# 26S全棉平纹</View>
+            <View className={styles.goodsLine}></View>
+            <View className={styles.itemGoods}>
+                <View className={styles.itemPic}></View>
+                <View className={styles.itemRight}>
+                    <View className={styles.item_right_top}>
+                        <View className={styles.itemName}>001# 环保黑</View>
+                        <View className={styles.itemNums}>x1m</View>
+                    </View>
+                    <View className={styles.item_right_Bottom}>
+                        <View className={styles.itemMoney}>¥340/m</View>
+                        <View className={styles.itemMoneyOne}>¥2,332.00</View>
+                    </View>
+                </View>
+            </View>
+        </View>
+    )
+})
+