diff --git a/src/router/index.js b/src/router/index.js
index ecb2090aed8fd6b87f94ce7b8416fee7b89e382b..03b8dc99fee005df649e6b6d9c41567acdae899f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,8 +3,6 @@ import VueRouter from 'vue-router'
 
 import Index from "./modules/index.js"
 import Center from "./modules/center.js"
-import MyOrder from "./modules/myOrder.js"
-import MyBooking from "./modules/myBooking.js"
 import OrderConfirm from "./modules/orderConfirm.js"
 Vue.use(VueRouter)
 
@@ -13,10 +11,6 @@ const routes = [
   ...Index,
   // 我的模块
   ...Center,
-  // 我的订餐模块
-  ...MyOrder,
-  // 我的餐桌预定模块
-  ...MyBooking,
   // 订单确认模块
   ...OrderConfirm,
   // 重定向
diff --git a/src/router/modules/center.js b/src/router/modules/center.js
index f9dfab6eccb2ec396ce3ee6c85c73ee6a4eab4d0..9c60a42474181c000d2f211f718806e45a6fc11e 100644
--- a/src/router/modules/center.js
+++ b/src/router/modules/center.js
@@ -3,6 +3,8 @@ import Center from "@/views/Center/Center.vue"
 import MyBookings from "@/views/Center/MyBooking/MyBookings.vue"
 import MyCoupons from "@/views/Center/MyCoupons.vue"
 import MyOrders from "@/views/Center/MyOrder/MyOrders.vue"
+import MyOrderDetail from "@/views/Center/MyOrder/MyOrderDetail.vue"
+import MyBookingDetail from "@/views/Center/MyBooking/MyBookingDetail.vue"
 
 export default [
     {
@@ -20,5 +22,15 @@ export default [
     {
         path:"/myorders",
         component:MyOrders
+    },
+    {
+        path:"/myorderdetail",
+        name:"myorderdetail",
+        component:MyOrderDetail
+    },
+    {
+        path:"/mybookingdetail",
+        name:"mybookingdetail",
+        component:MyBookingDetail
     }
 ]
\ No newline at end of file
diff --git a/src/router/modules/myOrder.js b/src/router/modules/myOrder.js
deleted file mode 100644
index d8186bdd730e185d7891a62d84b6dd48274412d6..0000000000000000000000000000000000000000
--- a/src/router/modules/myOrder.js
+++ /dev/null
@@ -1,19 +0,0 @@
-// 我的=>我的订单 模块
-import MyOrderCancelled from "@/views/Center/MyOrder/MyOrderCancelled.vue"
-import MyOrderComplated from "@/views/Center/MyOrder/MyOrderComplated.vue"
-import MyOrderToPay from "@/views/Center/MyOrder/MyOrderToPay.vue"
-
-export default [
-    {
-        path:"/myordercancelled",
-        component:MyOrderCancelled
-    },
-    {
-        path:"/myordercomplated",
-        component:MyOrderComplated
-    },
-    {
-        path:"/myordertopay",
-        component:MyOrderToPay
-    }
-]
\ No newline at end of file
diff --git a/src/views/Center/MyBooking/MyBookingCancelled.vue b/src/views/Center/MyBooking/MyBookingCancelled.vue
deleted file mode 100644
index 712892b7526c176b6ee563cd43cae7799e1263b9..0000000000000000000000000000000000000000
--- a/src/views/Center/MyBooking/MyBookingCancelled.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-    <div>
-        MyBookingCancelled
-        我的餐桌预定=>已取消的餐桌预定
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/views/Center/MyBooking/MyBookingComplated.vue b/src/views/Center/MyBooking/MyBookingComplated.vue
deleted file mode 100644
index 61c7cc21c716f6021516ee3238b28aa1dd1c4f1c..0000000000000000000000000000000000000000
--- a/src/views/Center/MyBooking/MyBookingComplated.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-    <div>
-        MyBookingComplated
-        我的餐桌预定=>已完成的餐桌预定
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/views/Center/MyBooking/MyBookingDetail.vue b/src/views/Center/MyBooking/MyBookingDetail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..708b6fa9624f691bb3a0d7983731f452cf6186f9
--- /dev/null
+++ b/src/views/Center/MyBooking/MyBookingDetail.vue
@@ -0,0 +1,123 @@
+<template>
+    <div class="wraper">
+        <div class="head">
+            <div class="iconfont icon-beifendingshiqi-02"></div>
+            <div class="state">等待商家确认</div>
+            <div class="desc">预定已提交等待商家确认</div>
+        </div>
+        <div class="orderInfo">
+            <div class="cell big">
+                <span class="cellTitle">预约信息</span>
+            </div>
+            <div class="cell">
+                <span class="cellTitle">预约时间: </span>
+                <span class="cellText">20134234234</span>
+            </div>
+            <div class="cell">
+                <span class="cellTitle">餐桌类型: </span>
+                <span class="cellText">大厅 1-2人桌</span>
+            </div>
+            <div class="cell">
+                <span class="cellTitle">就餐人数: </span>
+                <span class="cellText">6人</span>
+            </div>
+        </div>
+        <div class="customerInfo">
+             <div class="cell big">
+                <span class="cellTitle">联系人信息</span>
+            </div>
+            <div class="cell">
+                <span class="cellTitle">联系人: </span>
+                <span class="cellText">20134234234</span>
+            </div>
+            <div class="cell">
+                <span class="cellTitle">手机号: </span>
+                <span class="cellText">20134234234</span>
+            </div>
+            <div class="cell">
+                <span class="cellTitle">备注: </span>
+                <span class="cellText">无</span>
+            </div>
+        </div>
+        <div class="timeInfo">
+            <div class="cell">
+                <span class="cellTitle">提交预约时间: </span>
+                <span class="cellText">20134234234</span>
+            </div>
+            <div class="cell">
+                <span class="cellTitle">取消预约时间: </span>
+                <span class="cellText">2010233323</span>
+            </div>
+        </div>
+
+        <div class="btn">
+            取消订单
+        </div>
+    </div>
+</template>
+<style lang="scss" scoped>
+.wraper{
+    padding-top: 40px;
+    text-align: left;
+    background-color: #F5F5F5;
+    min-height: 100%;
+    box-sizing: border-box;
+    .cell{
+        background-color: #fff;
+        padding: 0 16px;
+        font-size: 12px;
+        line-height: 2.3;
+        &.big{
+            font-size: 14px;
+            line-height: 2.3;
+            border-bottom: 1px solid #eee;
+        }
+        .cellTitle{
+            color: #666;
+        }
+        .cellText{
+            color: #999;
+        }
+    }
+    .head{
+        text-align: center;
+        width: 100%;
+        height:200px;
+        background-color: #F5F5F5;
+        .iconfont{
+            color: #3BB19C;
+            font-weight: bold;
+            font-size: 80px;
+            line-height: 1.5;
+        }
+        .state{
+            font-size: 18px;
+            color: #666;
+            
+        }
+        .desc{
+            color: #999;
+            font-size: 13px;
+            padding-top: 6px;
+        }
+    }
+    .orderInfo{
+        border-bottom: 10px solid #eee;
+    }
+    .customerInfo{
+        border-bottom: 10px solid #eee;
+    }
+    .btn{
+        border-radius: 100px;
+        background-color: #D7D7D7;
+        line-height: 42px;
+        position: fixed;
+        bottom: 30px;
+        right: 10%;
+        left: 10%;
+        color: #fff;
+        font-size: 14px;
+        text-align: center;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Center/MyBooking/MyBookingSuccess.vue b/src/views/Center/MyBooking/MyBookingSuccess.vue
deleted file mode 100644
index 20a7e3295f8e10b808aa1bffd9900984da6a6874..0000000000000000000000000000000000000000
--- a/src/views/Center/MyBooking/MyBookingSuccess.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-    <div>
-        MyBookingSuccess
-        我的餐桌预定=>成功的餐桌预定
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/views/Center/MyBooking/MyBookingWait.vue b/src/views/Center/MyBooking/MyBookingWait.vue
deleted file mode 100644
index 7ba76ad5e49c9e2a13f87b7509d314e3944ffff0..0000000000000000000000000000000000000000
--- a/src/views/Center/MyBooking/MyBookingWait.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-    <div>
-        MyBookingWait
-        我的餐桌预定=>等待中的餐桌
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/views/Center/MyOrder/MyOrderCancelled.vue b/src/views/Center/MyOrder/MyOrderCancelled.vue
deleted file mode 100644
index c564d7452acd4a2da088ace1d7fc6972e272df2d..0000000000000000000000000000000000000000
--- a/src/views/Center/MyOrder/MyOrderCancelled.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-    <div>
-        MyorderCancelled
-        我的订单=>已取消的订单
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/views/Center/MyOrder/MyOrderComplated.vue b/src/views/Center/MyOrder/MyOrderComplated.vue
deleted file mode 100644
index a6fc0b89b5d6115b989eb85cf39e6e8a4b10eec1..0000000000000000000000000000000000000000
--- a/src/views/Center/MyOrder/MyOrderComplated.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-    <div>
-        MyOrderComplated
-        我的订单=>已完成的订单
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/views/Center/MyOrder/MyOrderDetail.vue b/src/views/Center/MyOrder/MyOrderDetail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d92254cc13b262bdc451e701adcb7c06d371c4d7
--- /dev/null
+++ b/src/views/Center/MyOrder/MyOrderDetail.vue
@@ -0,0 +1,195 @@
+<template>
+    <div class="wraper">
+        <div class="head">
+            <span></span>
+            <span>{{stateTags[orderList.orderSrate]}}</span>
+        </div>
+        <div class="table">001号桌</div>
+        <div class="foodList">    
+            <van-card
+            v-for="item in orderList.FoodList"
+            :title="item.foodName"
+            :thumb="item.imgSrc"
+            >
+            <div slot="num" class="foodPrice">
+                <span class="moneyIcon">￥</span>
+                <span class="money">{{item.foodPrice}}</span>
+            </div>
+            <div slot="price" class="foodNum">
+                x{{item.saleNum}}
+            </div>
+            </van-card>
+        </div>
+        <div class="cell">
+            <div>商品总价</div>
+            <div class="right">￥30</div>
+        </div>
+        <div class="cell">
+            <div>新户立减</div>
+            <div class="right">￥30</div>
+        </div>
+        <div class="cell">
+            <div>优惠卷</div>
+            <div class="right">￥30</div>
+        </div>
+        <div class="cell realMoney">
+            <div>实付金额</div>
+            <div class="right">
+                <span class="moneyIcon">￥</span>
+                <span>34</span>
+            </div>
+        </div>
+        <div class="infoHead">订单信息</div>
+         <div class="cell">
+            <div>订单编号</div>
+            <div class="right">fdg3423420</div>
+        </div>
+         <div class="cell">
+            <div>创建时间</div>
+            <div class="right">20102334</div>
+        </div>
+         <div class="cell">
+            <div>付款时间</div>
+            <div class="right">20102334</div>
+        </div>
+         <div class="cell">
+            <div>支付方式</div>
+            <div class="right">微信支付</div>
+        </div>
+       
+       <div class="detailFoot">
+           <div class="noPay" v-if="orderList.orderSrate=='topay'">取消支付</div>
+           <div class="toPay" v-if="orderList.orderSrate=='topay'">立即付款</div>
+           <div class="noPay" v-if="orderList.orderSrate!='topay'">删除订单</div>
+       </div>
+    </div>
+</template>
+<script>
+import Vue from 'vue';
+import { Card } from 'vant';
+
+Vue.use(Card);
+export default {
+    data(){
+        return {
+            orderList:[],
+            stateTags:{
+                cancelled:"已取消",
+                complated:"已完成",
+                topay:"等待付款"
+            },
+        }
+    },
+    created(){
+        this.orderList=this.$route.params.orderList
+    }
+}
+</script>
+<style lang="scss" scoped>
+    .wraper{
+        text-align: left;
+        margin-top: 40px;
+        padding-bottom: 60px;
+        // height: 100%;
+        position: relative;
+        .cell{
+            line-height: 30px;
+            font-size: 12px;
+            color: #666;
+            display: flex;
+            justify-content: space-between;
+            padding: 0 16px;
+            &.realMoney{
+                border-top: 1px solid #eee;
+                border-bottom: 6px solid #eee;
+                padding-bottom: 6px;
+                font-size: 14px;
+                .right{
+                    color: red;
+                    font-size: 16px;
+                    .moneyIcon{
+                        font-size: 13px;
+                    } 
+                }
+            }
+            .right{
+                color: #999;
+                text-align: right;
+            }
+
+        }
+        .infoHead{
+            line-height: 30px;
+            border-bottom: 1px solid #eee;
+            font-size: 14px;
+            color: #666;
+            padding-left: 16px;
+        }
+        .head{
+            line-height: 96px;
+            width: 100%;
+            box-sizing: border-box;
+            background-color: #1ABC9C;
+            padding-left: 20px;
+            color: #fff;
+            text-align: left;
+        }
+        .table{
+            text-align: center;
+            color: #1ABC9C;
+            font-size: 14px;
+            font-weight: bold;
+            line-height: 43px;
+            border-radius: 100px;
+            background-color: #fff;
+            position: absolute;
+            top: 74px;
+            left: 6%;
+            right: 6%;
+            box-shadow: 1px 1px 4px #aaa;
+        }
+        .foodList{
+            margin-top: 40px;
+            .foodPrice{
+                color: red;
+                font-size: 16px;
+                .moneyIcon{
+                    font-size: 13px;
+                }
+            }
+        }
+        .detailFoot{
+            height: 60px;
+            width: 100%;
+            padding: 0 16px 10px;
+            box-sizing: border-box;
+            align-items: center;
+            display: flex;
+            justify-content: flex-end;
+            border-top: 1px solid #eee;
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            background-color: #fff;
+            >div{
+                width: 77px;
+                height: 30px;
+                font-size: 12px;
+                box-sizing: border-box;
+                text-align: center;
+                line-height: 30px;
+                border-radius: 2px;
+                margin-left: 10px;
+            }
+            .noPay{
+                border: 1px solid #999;
+                color: #999;
+                
+            }
+            .toPay{
+                background-color: #3BB19C;
+                color: #fff;
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/Center/MyOrder/MyOrderToPay.vue b/src/views/Center/MyOrder/MyOrderToPay.vue
deleted file mode 100644
index 8bac67f1068aa5c7f41e3603365436a795a17d81..0000000000000000000000000000000000000000
--- a/src/views/Center/MyOrder/MyOrderToPay.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-    <div>
-        MyOrderToPay
-        我的订单=>待支付的订单
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/views/Center/MyOrder/MyOrders.vue b/src/views/Center/MyOrder/MyOrders.vue
index b46c91b560f93f12f4bd442ad47b73f6de58d008..769ff4c88e5d4559fc7d66753f094cb94dbbb9a1 100644
--- a/src/views/Center/MyOrder/MyOrders.vue
+++ b/src/views/Center/MyOrder/MyOrders.vue
@@ -3,7 +3,7 @@
         <van-tabs v-model="active" animated>
             <van-tab v-for="(item,index) in stateList" :title="item">
                 <div class="orderWrap">
-                    <div v-for="item in ordersList">
+                    <div class="orderItem" v-for="item in filterList(index)">
                         <div class="orderHead">
                             <div class="left">
                                 <div class="foodNames">{{foodNameConcat(item.FoodList)}}</div>
@@ -14,10 +14,16 @@
                             <div class="imgwrap">
                                 <img v-for="food in item.FoodList" :src="food.imgSrc">
                             </div>
-                            <div class="iconfont icon-you"></div>
+                            <div class="iconfont icon-you" @click="toDefail(item)"></div>
                         </div>
                         <div class="orderFoot">
-
+                            <div class="money">应付金额:￥10</div>
+                            <div class="btn">
+                                <div class="deleteOrder" v-if="item.orderSrate!='topay'" @click="onDeleteOrder(item)">删除订单</div>
+                                <div class="cancelOrder" v-if="item.orderSrate=='topay'" @click="onCancelOrder(item)">取消订单</div>
+                                <div class="toPay" v-if="item.orderSrate=='topay'">立即付款</div>
+                            </div>
+                            
                         </div>
                     </div>
                 </div>
@@ -49,15 +55,41 @@ export default {
     components:{
         Coupon
     },
+    computed:{
+        filterList(){
+            return (index)=>{
+                let list=['all','topay','complated','cancelled']
+                let state=list[index]
+                return this.ordersList.filter((item)=>{
+                    return state=="all"||item.orderSrate==state
+                })
+            }
+            
+        }
+    },
     methods:{
         dateFormat(date){
             return date.getFullYear()+"-"+date.getMonth()+"-"+date.getDate() 
         },
         foodNameConcat(list){
            return list.reduce((total,item)=>{
+               let arr=['topay','cancelled','complated']
                 return total+" "+item.foodName
             },"")
+        },
+        onDeleteOrder(item){
+            let order=item
+            let index=this.ordersList.indexOf(item)
+            this.$delete(this.ordersList,index)
+        },
+        onCancelOrder(item){
+            item.orderSrate='cancelled'
+        },
+        toDefail(item){
+            console.log(this.$router);
+            this.$router.push({name:'myorderdetail',params:{orderList:item}})
         }
+        
     },
     created(){
         this.$http.get("https://www.fastmock.site/mock/0986597585a34d83a11da7a620d2fec3/food/myorder")
@@ -69,59 +101,100 @@ export default {
 </script>
 <style lang="scss" scoped>
     .wraper{
+        overflow: hidden;
         height: 100%;
         box-sizing: border-box;
         padding-top: 40px;
+        background-color: #F9F9F9;
         .orderWrap{
-            padding: 0 20px;
-            height:650px;
+            height:590px;
             overflow: scroll;
-            .orderHead{
-                display: flex;
-                width: 100%;
-                justify-content: space-between;
-                font-size: 12px;
-                color: #666;
-                .left{
-                    text-align:left;
+            .orderItem{
+                background-color: #fff;
+                margin: 10px 0;
+                .orderHead{
+                    line-height: 34px;
+                    padding: 0 20px;
                     display: flex;
-                    .foodNames{
-                        width: 140px;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        white-space: nowrap;
-                    } 
-                }
-                .right{
-                    text-align: right;
-                    &.topay{
-                        color: #f04644;
+                    width: 100%;
+                    box-sizing: border-box;
+                    justify-content: space-between;
+                    font-size: 12px;
+                    color: #666;
+                    .left{
+                        text-align:left;
+                        display: flex;
+                        .foodNames{
+                            width: 140px;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
+                        } 
+                    }
+                    .right{
+                        text-align: right;
+                        &.topay{
+                            color: #f04644;
+                        }
                     }
                 }
-            }
-            .imgShow{
-                display: flex;
-                justify-content: space-between;
-                padding: 10px 0 20px;
-                .imgwrap{
+                .imgShow{
                     display: flex;
-                    justify-content: start;
-                    width: 260px;
-                    overflow: hidden;
-                    img{
-                        width: 77px;
-                        height: 77px;
-                        border-radius: 8px;
-                        margin-right: 10px;
-                        background-color: #eee;
+                    justify-content: space-between;
+                    padding: 0 20px 20px;
+                    border-bottom: 1px solid #eee;
+                    .imgwrap{
+                        display: flex;
+                        justify-content: start;
+                        width: 260px;
+                        overflow: hidden;
+                        img{
+                            width: 77px;
+                            height: 77px;
+                            border-radius: 8px;
+                            margin-right: 10px;
+                            border: 1px solid #eee;
+                        }
+                    }
+                    .iconfont{
+                        font-size: 24px;
+                        color: #666;
+                        line-height: 77px;
                     }
                 }
-                .iconfont{
-                    font-size: 24px;
-                    color: #666;
-                    line-height: 77px;
+                .orderFoot{
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    font-size: 12px;
+                    color: #999;
+                    padding: 0 20px;
+                    line-height: 45px;
+                    border-bottom: 1px solid #eee;
+                    // .money{}
+                    .btn{
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                        .deleteOrder,.cancelOrder,.toPay{
+                            width: 77px;
+                            line-height: 30px;
+                            box-sizing: border-box;
+                            margin-left: 10px;
+                        }
+                        .toPay{
+                            background-color: #3BB19C;
+                            color: #fff;
+                        }
+                        .cancelOrder,.deleteOrder{
+                            background-color: #fff;
+                            border: 1px solid #ccc;
+                        }
+                    }
+                    
                 }
             }
+            
         }
     }
 </style>
\ No newline at end of file