diff --git a/src/components/order/confirm-price.vue b/src/components/order/confirm-price.vue
new file mode 100644
index 0000000..61c3995
--- /dev/null
+++ b/src/components/order/confirm-price.vue
@@ -0,0 +1,121 @@
+<template>
+    <view class="order-confirm-price">
+        <widget-modal title="尾款确认" @close="closeModal">
+            <view class="modal-content">
+                <view class="input-row">
+                    <text class="title">费用增加</text>
+                    <input class="input" type="number" v-model="price" @input="price = parseFloat(price)" />
+                    <text class="unit">
+                        <text class="iconfont icon-qingchu" @click="price = 0"></text>
+                        <text class="text">元</text>
+                    </text>
+                </view>
+                <view class="desc">
+                    <text class="text">1)添加后，请客户在小程序订单中支付尾款</text>
+                    <text class="text">2)没有尾款的话，请直接点击确认提交</text>
+                </view>
+                <view class="btn" @click="confirmPrice">确认添加</view>
+            </view>
+        </widget-modal>
+    </view>
+</template>
+
+<script>
+import WidgetModal from "@/components/widgets/modal";
+import { mapState } from "vuex";
+export default {
+    name: "order-confirm-price",
+    data() {
+        return {
+            id: 0,
+            price: 0,
+        };
+    },
+    props: {
+        currentId: {
+            type: Number,
+            default: 0,
+        },
+    },
+    computed: {
+        ...mapState("order", {
+            confirmId: (state) => state.confirmId,
+        }),
+    },
+    components: {
+        WidgetModal,
+    },
+    created() {},
+    mounted() {},
+    destroyed() {},
+    watch: {},
+    methods: {
+        closeModal() {
+            this.$store.commit("order/setConfirmId", 0);
+            this.price = 0;
+            this.$emit("close");
+        },
+        confirmPrice() {
+            console.log("当前id：" + this.confirmId + "，价格：" + this.price);
+            this.$emit("confirm");
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.order-confirm-price {
+    .modal-content {
+        width: 100%;
+        .desc {
+            padding: 24rpx 0;
+            .text {
+                display: block;
+                font-size: 24rpx;
+                color: #999999;
+                line-height: 36rpx;
+            }
+        }
+        .btn {
+            width: 100%;
+            height: 68rpx;
+            line-height: 68rpx;
+            text-align: center;
+            font-size: 32rpx;
+            color: #ffffff;
+            background-color: #7286f1;
+            margin-top: 15rpx;
+        }
+    }
+    .input-row {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 40rpx 0;
+        border-bottom: 4rpx solid #f5f5f5;
+        .title {
+            font-size: 28rpx;
+            color: #666666;
+        }
+        .input {
+            width: 308rpx;
+            height: 72rpx;
+            box-sizing: border-box;
+            border: 1px solid #d8d8d8;
+            text-align: center;
+        }
+        .unit {
+            color: #333333;
+        }
+        .iconfont {
+            display: inline-block;
+            font-size: 30rpx;
+            margin-right: 22rpx;
+        }
+        .text {
+            font-size: 28rpx;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/widgets/modal.vue b/src/components/widgets/modal.vue
index 1bd81e6..6c5383d 100644
--- a/src/components/widgets/modal.vue
+++ b/src/components/widgets/modal.vue
@@ -1,5 +1,5 @@
 <template>
-    <view class="component-widgets-modal" v-if="show">
+    <view class="component-widgets-modal">
         <view class="modal-mask" @click="close"></view>
         <view class="modal-content" :style="{ width: width }">
             <view class="modal-title">
@@ -22,10 +22,6 @@ export default {
         return {};
     },
     props: {
-        show: {
-            type: Boolean,
-            default: false,
-        },
         title: {
             type: String,
             default: "默认标题",
diff --git a/src/pages.json b/src/pages.json
index 0a135d2..417fc45 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -24,6 +24,12 @@
 				"navigationBarTitleText": "订单"
 			}
 		},
+		{
+			"path": "pages/order/detail",
+			"style": {
+				"navigationBarTitleText": "订单详情"
+			}
+		},
 		{
 			"path": "pages/message/message",
 			"style": {
diff --git a/src/pages/order/detail.vue b/src/pages/order/detail.vue
new file mode 100644
index 0000000..5c6e270
--- /dev/null
+++ b/src/pages/order/detail.vue
@@ -0,0 +1,328 @@
+<template>
+    <app-layout title="订单详情">
+        <view class="order-detail-container">
+            <view class="detail-section">
+                <view class="order-head">
+                    <view class="order-title">
+                        <text class="type" :style="{ backgroundColor: models.order.getOrderTypeColor(order.orderType) }">
+                            {{ models.order.getOrderTypeText(order.orderType) }}
+                        </text>
+                        <text class="text">{{ order.username }}-{{ order.cate }}</text>
+                    </view>
+                    <view class="state" :style="{ color: models.order.getOrderStateTextColor(order.state) }">
+                        {{ models.order.getOrderStateText(order.state) }}
+                    </view>
+                </view>
+                <view class="order-body">
+                    <view class="order-desc-row datetime">
+                        <text class="text">订单号：{{ order.orderId }}</text>
+                        <text class="copy" @click.stop="copyOrderId(order.orderId)">复制</text>
+                    </view>
+                    <view class="order-desc-row datetime">
+                        <text class="text">{{ order.createTime }}</text>
+                    </view>
+                </view>
+            </view>
+            <view class="detail-section">
+                <view class="section-title">需求信息</view>
+                <view class="section-content">
+                    <view class="demand-item">
+                        <view class="title">需求内容：</view>
+                        <view class="content">
+                            我想要安装一个书柜，需要上墙,我想要 安装一个书柜，需要上墙,我想要安装一
+                            个书柜，需要上墙个书柜，需要上墙个书柜，需要上墙
+                        </view>
+                    </view>
+                    <view class="demand-item">
+                        <view class="title">上门时间：</view>
+                        <view class="content service-time">
+                            <text class="datetime">
+                                {{ order.serviceDateTime.date }} {{ order.serviceDateTime.time[0] }}-{{
+                                    order.serviceDateTime.time[1]
+                                }}
+                            </text>
+                            <text class="iconfont icon-bianji"></text>
+                        </view>
+                    </view>
+                    <view class="demand-item">
+                        <view class="demand-images">
+                            <view class="image-box" v-for="(item, index) in order.images" :key="index">
+                                <image class="image" :src="item.src" mode="aspectFill" />
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <view class="detail-section">
+                <view class="section-title">上门地址</view>
+                <view class="address-box">
+                    <text class="iconfont icon-dingwei"></text>
+                    <view>
+                        <view class="contact limit-line clamp-1">
+                            <text class="name">测试(先生)</text>
+                            <text class="mobile">13108196080</text>
+                        </view>
+                        <view class="detail">
+                            <text>四川省成都市涪城区剑门门路西段书亦烧 仙草(成都七中店) 测试</text>
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <view class="detail-section">
+                <text class="price-box">¥ {{ utils.formatNumber(order.price, 2) }}</text>
+            </view>
+        </view>
+        <view class="common-bottom-components" :style="{ bottom: config.safeAreaInsets.bottom + 'px' }">
+            <view class="service" @click="utils.serviceActions()">
+                <text class="iconfont icon-kefu"></text>
+                <text class="text">客服</text>
+            </view>
+            <view class="action">
+                <order-action :order="order" @setPrice="showPriceModal(order.id)" />
+            </view>
+        </view>
+        <order-confirm-price v-show="showModal" @close="showModal = false" @confirm="showModal = false" />
+    </app-layout>
+</template>
+
+<script>
+import AppLayout from "@/components/layout/layout";
+import OrderAction from "@/components/order/action";
+import OrderConfirmPrice from "@/components/order/confirm-price";
+import { mapState } from "vuex";
+export default {
+    name: "order-detail",
+    data() {
+        return {
+            utils: this.$utils,
+            models: this.$models,
+            showModal: false,
+            order: {
+                id: 1,
+                orderId: "xxgfdkgn1223",
+                cate: "家具安装",
+                content: "我想要安装一个书柜，需要上墙啊啊啊啊",
+                createTime: "2022-10-18 10:56:34",
+                serviceDateTime: {
+                    date: "2022-10-18",
+                    time: ["14:00", "18:00"],
+                },
+                orderType: 1,
+                state: 1,
+                price: 306,
+                username: "李先生",
+                images: [
+                    {
+                        src: require("@/static/temp/cate/1.png"),
+                    },
+                    {
+                        src: require("@/static/temp/cate/1.png"),
+                    },
+                    {
+                        src: require("@/static/temp/cate/1.png"),
+                    },
+                    {
+                        src: require("@/static/temp/cate/1.png"),
+                    },
+                ],
+            },
+        };
+    },
+    components: {
+        AppLayout,
+        OrderAction,
+        OrderConfirmPrice,
+    },
+    computed: {
+        ...mapState({
+            config: (state) => state.system.config,
+        }),
+    },
+    onLoad(e) {
+        if (e.id && e.id > 0) {
+            this.id = e.id;
+        } else {
+            this.$utils.toast("参数错误");
+        }
+    },
+    onShow() {},
+    onReady() {},
+    onReachBottom() {},
+    onPullDownRefresh() {},
+    methods: {
+        copyOrderId(orderId) {
+            const that = this;
+            uni.setClipboardData({
+                data: orderId,
+                success(result) {
+                    that.$utils.toast("内容已复制");
+                },
+                fail(error) {
+                    that.$utils.toast("复制失败");
+                },
+            });
+        },
+        showPriceModal(id) {
+            this.$store.commit("order/setConfirmId", id);
+            this.showModal = true;
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.order-detail-container {
+    padding-bottom: 120rpx;
+}
+.detail-section {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 40rpx;
+    background-color: #ffffff;
+    margin-bottom: 24rpx;
+    .section-title {
+        font-size: 30rpx;
+        font-weight: bold;
+        color: #000000;
+    }
+}
+.order-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .order-title {
+        display: flex;
+        align-items: center;
+        .type {
+            display: inline-block;
+            box-sizing: border-box;
+            padding: 9rpx 24rpx;
+            border-radius: 10rpx;
+            font-size: 24rpx;
+            color: #ffffff;
+            line-height: 24rpx;
+            margin-right: 22rpx;
+        }
+        .text {
+            font-size: 30rpx;
+            font-weight: bold;
+            color: #000000;
+            line-height: 30rpx;
+        }
+    }
+    .state {
+        font-size: 26rpx;
+        line-height: 32rpx;
+    }
+}
+.order-body {
+    width: 100%;
+    .order-desc-row {
+        position: relative;
+        width: 100%;
+        font-size: 28rpx;
+        line-height: 30rpx;
+        margin-top: 30rpx;
+        .title {
+            color: #999999;
+        }
+        .text {
+            color: #000000;
+        }
+        .copy {
+            color: #8194f2;
+            margin-left: 24rpx;
+        }
+    }
+}
+.demand-item {
+    width: 100%;
+    display: flex;
+    font-size: 28rpx;
+    line-height: 36rpx;
+    margin-top: 40rpx;
+    .title {
+        width: 150rpx;
+        flex-shrink: 0;
+        color: #999999;
+    }
+    .content {
+        width: 100%;
+        color: #000000;
+    }
+    .service-time {
+        display: flex;
+        justify-content: space-between;
+        .datetime {
+            color: #000000;
+        }
+        .iconfont {
+            font-size: 32rpx;
+            color: #999999;
+        }
+    }
+}
+.demand-images {
+    display: flex;
+    flex-wrap: wrap;
+    .image-box {
+        width: 133.2rpx;
+        height: 133.2rpx;
+        background: rgba(184, 180, 179, 0);
+        box-sizing: border-box;
+        border-radius: 25rpx;
+        overflow: hidden;
+        border: 1px solid #f7f7f7;
+        .image {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+.address-box {
+    display: flex;
+    align-items: center;
+    margin-top: 40rpx;
+    .iconfont {
+        font-size: 40rpx;
+        color: #8194f2;
+        padding: 0 50rpx;
+    }
+    .contact,
+    .detail {
+        font-size: 26rpx;
+        font-weight: 500;
+    }
+    .contact {
+        color: #000000;
+        line-height: 26rpx;
+    }
+    .detail {
+        color: #2d2d2d;
+        line-height: 36rpx;
+        margin-top: 16rpx;
+    }
+}
+.price-box {
+    font-size: 48rpx;
+    line-height: 48rpx;
+    font-weight: bold;
+    color: #ec7655;
+}
+.common-bottom-components {
+    .service {
+        display: flex;
+        align-items: center;
+        .iconfont {
+            font-size: 60rpx;
+            color: #999999;
+        }
+        .text {
+            display: inline-block;
+            font-size: 28rpx;
+            color: #999999;
+            margin-left: 10rpx;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/order/order.vue b/src/pages/order/order.vue
index fae9e7a..4cc586c 100644
--- a/src/pages/order/order.vue
+++ b/src/pages/order/order.vue
@@ -31,10 +31,10 @@
                 <swiper :current="tabIndex" :style="{ height: tabHeight + 'px' }" @change="changeTab">
                     <swiper-item v-for="(item, index) in tabList" :key="index">
                         <view :class="['tab' + index]">
-                            <view class="order-item-box" v-for="(v, k) in item.list" :key="k">
+                            <view class="order-item-box" v-for="(v, k) in item.list" :key="k" @click.stop="toDetail(v.id)">
                                 <order-item :order="v">
                                     <view class="order-action">
-                                        <view class="price">¥ 306.00</view>
+                                        <view class="price">¥ {{ v.price }}</view>
                                         <order-action :order="v" @setPrice="showPriceModal(v.id)" />
                                     </view>
                                 </order-item>
@@ -47,28 +47,7 @@
                 </swiper>
             </view>
         </view>
-        <widget-modal title="尾款确认" :show="priceModal" @close="priceModal = false">
-            <view class="modal-content">
-                <view class="input-row">
-                    <text class="title">费用增加</text>
-                    <input
-                        class="input"
-                        type="number"
-                        v-model="currentOrder.price"
-                        @input="currentOrder.price = parseFloat(currentOrder.price)"
-                    />
-                    <text class="unit">
-                        <text class="iconfont icon-qingchu" @click="currentOrder.price = 0"></text>
-                        <text class="text">元</text>
-                    </text>
-                </view>
-                <view class="desc">
-                    <text class="text">1)添加后，请客户在小程序订单中支付尾款</text>
-                    <text class="text">2)没有尾款的话，请直接点击确认提交</text>
-                </view>
-                <view class="btn" @click="setPrice">确认添加</view>
-            </view>
-        </widget-modal>
+        <order-confirm-price v-show="showModal" @close="showModal = false" @confirm="showModal = false" />
     </app-layout>
 </template>
 
@@ -77,13 +56,13 @@ import AppLayout from "@/components/layout/layout";
 import OrderItem from "@/components/order/item";
 import OrderAction from "@/components/order/action";
 import LoadMore from "@/components/widgets/loadmore";
-import WidgetModal from "@/components/widgets/modal";
+import OrderConfirmPrice from "@/components/order/confirm-price";
 export default {
     name: "get-index",
     data() {
         return {
             utils: this.$utils,
-            priceModal: false,
+            showModal: false,
             safePt: 0,
             tabIndex: 0,
             tabHeight: 0,
@@ -164,10 +143,7 @@ export default {
                     list: [],
                 },
             ],
-            currentOrder: {
-                id: 0,
-                price: 0,
-            },
+            currentId: 0,
             keywords: "",
         };
     },
@@ -176,7 +152,7 @@ export default {
         OrderItem,
         OrderAction,
         LoadMore,
-        WidgetModal,
+        OrderConfirmPrice,
     },
     onLoad() {
         this.$nextTick(() => {
@@ -211,12 +187,11 @@ export default {
             });
         },
         showPriceModal(id) {
-            this.currentOrder.id = id;
-            this.priceModal = true;
+            this.$store.commit("order/setConfirmId", id);
+            this.showModal = true;
         },
-        setPrice() {
-            console.log(this.currentOrder);
-            this.priceModal = false;
+        toDetail(id) {
+            this.$utils.toPage("/pages/order/detail?id=" + id);
         },
     },
 };
@@ -309,56 +284,4 @@ export default {
         padding: 20rpx 0;
     }
 }
-.modal-content {
-    width: 100%;
-    .input-row {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 40rpx 0;
-        border-bottom: 4rpx solid #f5f5f5;
-        .title {
-            font-size: 28rpx;
-            color: #666666;
-        }
-        .input {
-            width: 308rpx;
-            height: 72rpx;
-            box-sizing: border-box;
-            border: 1px solid #d8d8d8;
-            text-align: center;
-        }
-        .unit {
-            color: #333333;
-        }
-        .iconfont {
-            display: inline-block;
-            font-size: 30rpx;
-            margin-right: 22rpx;
-        }
-        .text {
-            font-size: 28rpx;
-        }
-    }
-    .desc {
-        padding: 24rpx 0;
-        .text {
-            display: block;
-            font-size: 24rpx;
-            color: #999999;
-            line-height: 36rpx;
-        }
-    }
-    .btn {
-        width: 100%;
-        height: 68rpx;
-        line-height: 68rpx;
-        text-align: center;
-        font-size: 32rpx;
-        color: #ffffff;
-        background-color: #7286f1;
-        margin-top: 15rpx;
-    }
-}
 </style>
\ No newline at end of file
diff --git a/src/static/temp/cate/1.png b/src/static/temp/cate/1.png
new file mode 100644
index 0000000..8c1fe50
Binary files /dev/null and b/src/static/temp/cate/1.png differ
diff --git a/src/store/index.js b/src/store/index.js
index c00c554..c222601 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -3,11 +3,13 @@ import Vuex from 'vuex'
 
 import user from "@/store/modules/user"
 import system from "@/store/modules/system"
+import order from "@/store/modules/order"
 
 Vue.use(Vuex)
 export default new Vuex.Store({
     modules: {
         user,
         system,
+        order
     }
 })
diff --git a/src/store/modules/order.js b/src/store/modules/order.js
new file mode 100644
index 0000000..97996a7
--- /dev/null
+++ b/src/store/modules/order.js
@@ -0,0 +1,17 @@
+export default {
+    namespaced: true,
+    state: {
+        confirmId: 0,
+    },
+    getters: {
+        getConfirmId(state) {
+            return state.confirmId;
+        }
+    },
+    mutations: {
+        setConfirmId(state, data) {
+            state.confirmId = data;
+        }
+    },
+    actions: {}
+}