diff --git a/public/index.html b/public/index.html
index 56cd26342835708381d6cde61bef6f5944897f0b..2103aa1624e21fd6682868a5a2edd3fd4d80d074 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,6 +6,11 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %>扫码点餐</title>
+    <style>
+      body,html{
+          height: 100%;
+      }
+    </style>
   </head>
   <body>
     <noscript>
diff --git a/src/App.vue b/src/App.vue
index 767bde78d2315b943331670505ccda3bb59f6e58..cc25f619daff7d1bf93c6fe9e275b9525634e755 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,6 +15,7 @@ export default {
 </script>
 <style lang="scss">
 #app {
+  height: 100%;
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
diff --git a/src/components/Coupon.vue b/src/components/Coupon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0e8dd00e3556d4d73c166c176660394136eb6877
--- /dev/null
+++ b/src/components/Coupon.vue
@@ -0,0 +1,69 @@
+<template>
+    <div class="coupon" couponMoney couponLimit couponExpire >
+                <div class="left">
+                    <div class="discount">￥{{couponMoney}}</div>
+                    <div class="limit">满{{couponLimit}}元可用</div>
+                </div>
+                <div class="right">
+                    <div>通用</div>
+                    <div class="expire">有效期至：{{couponExpire}}
+                        
+                        <!-- <input  @change="selectCoupon(index)" type="radio" name="coupon" checked> -->
+                    </div>
+                    <slot name="rightBtn"></slot>
+                    
+                </div>
+            </div>
+</template>
+
+<script>
+export default {
+    props:[
+        "couponMoney",
+        "couponLimit",
+        "couponExpire"
+    ]
+}
+</script>
+<style lang="scss" scoped>
+.coupon{
+
+    background-color: #fff;
+    margin-bottom: 10px;
+    height: 110px;
+    display: flex;
+    .left{
+        width: 120px;
+        text-align: center;
+        background-color: #1ABC9C;
+        color: #fff;
+        .discount{
+            margin-top: 26px;
+            margin-right: 8px;
+            line-height: 36px;
+            font-size: 36px;
+            font-weight: bold;
+        }
+        .limit{
+            font-size: 14px;
+        }
+    }
+    .right{
+        font-size: 16px;
+        font-weight: bold;
+        padding-left: 24px;
+        padding-top: 30px;
+        text-align: left;
+        color: #666;
+        flex-grow: 1;
+        position: relative;
+        .expire{
+            margin-top: 10px;
+            font-size: 14px;
+            
+            color: #999;
+        
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/HeadBar.vue b/src/components/HeadBar.vue
index 61ec821d8a7be3595da2b2db09ac75fa2e2a76c6..c4e1a9ff4cd56a603849956989daa71830ffb671 100644
--- a/src/components/HeadBar.vue
+++ b/src/components/HeadBar.vue
@@ -20,6 +20,10 @@ export default {
                 "/coupon":"优惠券",
                 "/order":"扫码订餐",
                 "/waitindex":"排队取号",
+                "/orderconfirm":"确认订单",
+                "/payfailed":"支付结果",
+                "/paysuccess":"支付结果",
+                "/selectcoupons":"优惠券",
             }
         }
     },
diff --git a/src/main.js b/src/main.js
index 41925e5d6d9dbb83f1edaf8e4993e327ef832199..1be9a4d64f9573e947d706536d249fab3e7b2ac5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
-// import store from './store'
+import store from './store'
 
 import axios from "./api/http"
 Vue.prototype.$http=axios
@@ -10,6 +10,6 @@ Vue.config.productionTip = false
 
 new Vue({
   router,
-  // store,
+  store,
   render: h => h(App)
 }).$mount('#app')
diff --git a/src/router/modules/orderConfirm.js b/src/router/modules/orderConfirm.js
index 0a370d265a95d520a561bd769b6df6a6a4a72885..7b889c61d5c93a443bf12f40c1b4cdbdc12bfdac 100644
--- a/src/router/modules/orderConfirm.js
+++ b/src/router/modules/orderConfirm.js
@@ -7,6 +7,7 @@ import SelectCoupons from "@/views/OrderConfirm/SelectCoupons.vue"
 export default [
     {
         path:"/orderconfirm",
+        name:"orderconfirm",
         component:OrderConfirm
     },
     {
diff --git a/src/store/index.js b/src/store/index.js
index 332b916928b6051df5dc7286ead3e04ee067f4ab..f6bda525554b988cf1aa7cdb3ccc890a3142319b 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -5,8 +5,12 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
+    orderList:[]
   },
   mutations: {
+    setOrderList(state,arg){
+      state.orderList=arg
+    }
   },
   actions: {
   },
diff --git a/src/views/Center/MyCoupons.vue b/src/views/Center/MyCoupons.vue
index 02838ca936dd72cb402ea00e87821dc9f29bd778..939eff9e9e0a12e987f9b04801171546a2d01259 100644
--- a/src/views/Center/MyCoupons.vue
+++ b/src/views/Center/MyCoupons.vue
@@ -1,5 +1,102 @@
 <template>
-    <div>
-        我的优惠券
+    <div class="wraper">
+        <van-tabs v-model="active" animated>
+            <van-tab v-for="(item,index) in stateList" :title="item">
+                <div class="couponWrap">
+                    <Coupon
+                    v-for="item in couponList"
+                    :couponMoney="item.couponMoney"
+                    :couponLimit="item.couponLimit"
+                    :couponExpire="dateFormat(item.couponExpire)"
+                    >   
+                    </Coupon>
+                </div>
+                
+            </van-tab>
+        </van-tabs>
     </div>
-</template>
\ No newline at end of file
+</template>
+<script>
+import Vue from 'vue';
+import { Tab, Tabs } from 'vant';
+import Coupon from "../../components/Coupon"
+
+Vue.use(Tab);
+Vue.use(Tabs);
+export default {
+    data(){
+        return {
+            active:0,
+            stateList:["未使用","已使用","已过期"],
+            couponList:[
+                {
+                    // 优惠券id
+                    couponId:"001",
+                    // 满多少元可用
+                    couponLimit:100,
+                    // 优惠多少钱
+                    couponMoney:25,
+                    //过期时间
+                    couponExpire:new Date("4 10,2021"),
+                },
+                {
+                    couponId:"001",
+                    couponLimit:60,
+                    couponMoney:5,
+                    couponExpire:new Date("4 11,2021"),
+                },
+                {
+                    couponId:"001",
+                    couponLimit:20,
+                    couponMoney:5,
+                    couponExpire:new Date("4 22,2021"),
+                },
+                {
+                    couponId:"001",
+                    couponLimit:100,
+                    couponMoney:30,
+                    couponExpire:new Date("4 13,2021"),
+                },
+                {
+                    couponId:"001",
+                    couponLimit:100,
+                    couponMoney:30,
+                    couponExpire:new Date("4 13,2021"),
+                },
+                {
+                    couponId:"001",
+                    couponLimit:100,
+                    couponMoney:30,
+                    couponExpire:new Date("4 13,2021"),
+                },
+                {
+                    couponId:"001",
+                    couponLimit:100,
+                    couponMoney:30,
+                    couponExpire:new Date("4 13,2021"),
+                }
+            ]    
+        }
+    },
+    components:{
+        Coupon
+    },
+    methods:{
+        dateFormat(date){
+            return date.getFullYear()+"-"+date.getMonth()+"-"+date.getDate() 
+        },
+    }
+}
+</script>
+<style lang="scss" scoped>
+    .wraper{
+        height: 100%;
+        box-sizing: border-box;
+        padding-top: 40px;
+        .couponWrap{
+            height:650px;
+            overflow: scroll;
+
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/Center/MyOrder/MyOrders.vue b/src/views/Center/MyOrder/MyOrders.vue
index 4324298143b73e964f37b4c0b12d3d8455f5698d..b46c91b560f93f12f4bd442ad47b73f6de58d008 100644
--- a/src/views/Center/MyOrder/MyOrders.vue
+++ b/src/views/Center/MyOrder/MyOrders.vue
@@ -1,5 +1,127 @@
 <template>
-    <div>
-        我的订餐记录
+    <div class="wraper">
+        <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="orderHead">
+                            <div class="left">
+                                <div class="foodNames">{{foodNameConcat(item.FoodList)}}</div>
+                                等 {{item.FoodList.length}} 件商品</div>
+                            <div :class="[item.orderSrate=='topay'?'topay':'','right']">{{stateTags[item.orderSrate]}}</div>
+                        </div>
+                        <div class="imgShow">
+                            <div class="imgwrap">
+                                <img v-for="food in item.FoodList" :src="food.imgSrc">
+                            </div>
+                            <div class="iconfont icon-you"></div>
+                        </div>
+                        <div class="orderFoot">
+
+                        </div>
+                    </div>
+                </div>
+                
+            </van-tab>
+        </van-tabs>
     </div>
-</template>
\ No newline at end of file
+</template>
+<script>
+import Vue from 'vue';
+import { Tab, Tabs } from 'vant';
+import Coupon from "../../../components/Coupon"
+
+Vue.use(Tab);
+Vue.use(Tabs);
+export default {
+    data(){
+        return {
+            active:0,
+            stateList:["全部","待支付","已完成","已取消"],
+            stateTags:{
+                cancelled:"已关闭",
+                complated:"已完成",
+                topay:"等待付款"
+            },
+            ordersList:[]
+        }
+    },
+    components:{
+        Coupon
+    },
+    methods:{
+        dateFormat(date){
+            return date.getFullYear()+"-"+date.getMonth()+"-"+date.getDate() 
+        },
+        foodNameConcat(list){
+           return list.reduce((total,item)=>{
+                return total+" "+item.foodName
+            },"")
+        }
+    },
+    created(){
+        this.$http.get("https://www.fastmock.site/mock/0986597585a34d83a11da7a620d2fec3/food/myorder")
+        .then(res=>{
+            this.ordersList=res.data.orderList;
+        })
+    }
+}
+</script>
+<style lang="scss" scoped>
+    .wraper{
+        height: 100%;
+        box-sizing: border-box;
+        padding-top: 40px;
+        .orderWrap{
+            padding: 0 20px;
+            height:650px;
+            overflow: scroll;
+            .orderHead{
+                display: flex;
+                width: 100%;
+                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{
+                    display: flex;
+                    justify-content: start;
+                    width: 260px;
+                    overflow: hidden;
+                    img{
+                        width: 77px;
+                        height: 77px;
+                        border-radius: 8px;
+                        margin-right: 10px;
+                        background-color: #eee;
+                    }
+                }
+                .iconfont{
+                    font-size: 24px;
+                    color: #666;
+                    line-height: 77px;
+                }
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/Index/Coupon.vue b/src/views/Index/Coupon.vue
index 32f7efad7240fd0995d794f6443e4d7018db5627..759a6d260457c29c9152a6d97118241c1186f7f5 100644
--- a/src/views/Index/Coupon.vue
+++ b/src/views/Index/Coupon.vue
@@ -1,6 +1,91 @@
 <template>
-    <div>
-        Coupon
-        领取优惠券
+    <div class="wraper">
+        <Coupon
+        v-for="(item,index) in couponList"
+        :couponMoney="item.couponMoney"
+        :couponLimit="item.couponLimit"
+        :couponExpire="dateFormat(item.couponExpire)"
+        >
+            <div slot="rightBtn" class="rightBtn" @click.once="collectCoupon">领取</div>
+        </Coupon>
     </div>
-</template>
\ No newline at end of file
+</template>
+<script>
+import Coupon from "../../components/Coupon"
+export default {
+    data(){
+        return {
+            couponList:[
+                {
+                    // 优惠券id
+                    couponId:"001",
+                    // 满多少元可用
+                    couponLimit:100,
+                    // 优惠多少钱
+                    couponMoney:25,
+                    //过期时间
+                    couponExpire:new Date("4 10,2021"),
+                },
+                {
+                    couponId:"001",
+                    couponLimit:60,
+                    couponMoney:5,
+                    couponExpire:new Date("4 11,2021"),
+                },
+                {
+                    couponId:"001",
+                    couponLimit:20,
+                    couponMoney:5,
+                    couponExpire:new Date("4 22,2021"),
+                },
+                {
+                    couponId:"001",
+                    couponLimit:100,
+                    couponMoney:30,
+                    couponExpire:new Date("4 13,2021"),
+                },
+                {
+                    couponId:"001",
+                    couponLimit:100,
+                    couponMoney:30,
+                    couponExpire:new Date("4 13,2021"),
+                }
+            ]
+        }
+    },
+    components:{
+        Coupon
+    },
+    methods:{
+        dateFormat(date){
+            return date.getFullYear()+"-"+date.getMonth()+"-"+date.getDate() 
+        },
+        collectCoupon($event){
+            $event.target.innerText="已领取"
+            $event.target.style.color="#999"
+            $event.target.style.borderColor="#999"
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.wraper{
+    min-height:100%;
+    box-sizing: border-box;
+    background-color: #F5F5F5;
+    padding: 60px 16px 0;
+    .rightBtn{
+        width: 53px;
+        line-height: 29px;
+        font-size: 12px;
+        color: #3bb19c;
+        border: 1px solid #3bb19c;
+        border-radius: 50px;
+        text-align: center;
+        position: absolute;
+        right: 20px;
+        top: 24px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Index/Index.vue b/src/views/Index/Index.vue
index 2a8b3e7a0bc82ab39d31faab040cde6081e7da5c..3c068b0d2d08c79923163658dc7e68c0c87cbf5b 100644
--- a/src/views/Index/Index.vue
+++ b/src/views/Index/Index.vue
@@ -1,5 +1,13 @@
 <template>
-<!-- 首页组件 -->
+<!-- 首页组件/index -->
+<!-- 
+    可前往页面：
+        扫码点餐/order
+        优惠券/coupon
+        排队取号/wait
+        餐桌预约/booking
+        我的/center
+ -->
 <div>
     <!-- 首页首次加载的遮罩组件 -->
     <van-overlay 
@@ -12,7 +20,7 @@
         </div>
     </van-overlay>
 
-    <!-- 首页头部组件 -->
+    <!-- 首页头部 餐厅信息 -->
     <div class="headWraper">
         <div class="right">
             <div class="state">营业中</div>
@@ -25,7 +33,7 @@
         </div>
     </div>
 
-    <!--  首页导航网格组件 -->
+    <!--  首页导航 -->
     <div class="nav">
         <div class="navItem" @click="toPage(routes[0])">
             <div class="iconfont icon-canyin"></div>
@@ -48,8 +56,9 @@
     <!-- 分类选择 -->
     <van-tree-select  :items="items" :main-active-index.sync="active" class="menu" height="auto">
         <template #content>
-            <div v-if="active === 0">
-                <li v-for="(item,index) in foodList" :key="item.foodName"  >
+            <div class="foodHead">{{items[active].text}}</div>
+            <div >
+                <li v-for="(item,index) in foodFilter()" :key="item.foodName"  >
                 <!-- src要改成「:src="item.imgSrc"」 -->
                 <img src="../../assets/u9.png">
                 <div class="foodInfo">
@@ -65,8 +74,7 @@
                     <div class="foodPrice">
                         <span>￥</span>
                         <span>{{item.foodPrice}}</span>
-                        <span>￥{{item.oldPrice}}</span>
-                        <!-- <div class="addBtn" :foodId="item.foodId" @click="onClickAdd">+</div> -->
+                        <span>￥{{item.oldPrice}}</span>   
                     </div>
                     <!-- 没有折扣信息就隐藏 -->
                     <div v-if="item.foodDisCount" class="foodDisCount">
@@ -78,6 +86,7 @@
             </div>
         </template>
     </van-tree-select>
+    <!-- 底部栏组件 -->
     <FootBar/>
 </div>   
 </template>
@@ -86,16 +95,22 @@
 import "../../assets/font/iconfont.css"
 import Vue from 'vue';
 import { Overlay,TreeSelect  } from 'vant';
+// vant 遮罩组件
 Vue.use(Overlay);
+// vant 分类选择组件
 Vue.use(TreeSelect);
-
+// 底部栏组件
 import FootBar from '../../components/FootBar';
 export default {
     data() {
         return {
+            // 是否显示遮罩层
             maskShow: true,
+            // 要跳转的路由
             routes:["/order","/coupon","/waitindex","/booking"],
+            // 当前的食物分类
             active: 0,
+            // 食物分类导航
             items: [
                 { text: '热销榜' }, 
                 { text: '折扣' }, 
@@ -106,9 +121,11 @@ export default {
                 { text: '单人套餐' },
                 { text: '酱料包' },
             ],
+            // 代替请求的食物列表 假数据
             foodList:[
                 {
                     foodId:"1",
+                    foodClass:"汉堡包",
                     imgSrc:"",
                     foodName:"香辣鸡腿堡",
                     foodTag:["香辣","面包片","生菜"],
@@ -119,6 +136,7 @@ export default {
                 },
                 {
                     foodId:"2",
+                    foodClass:"汉堡包",
                     imgSrc:"",
                     foodName:"薯条",
                     foodTag:["香辣","面包片","生菜"],
@@ -129,6 +147,7 @@ export default {
                 },
                 {
                     foodId:"3",
+                    foodClass:"饮品",
                     imgSrc:"",
                     foodName:"可乐",
                     foodTag:["香辣","面包片","生菜"],
@@ -136,13 +155,60 @@ export default {
                     foodPrice:"15.8",
                     oldPrice:"16",
                     foodDisCount:"5.6折"
+                },
+                {
+                    foodId:"4",
+                    foodClass:"汉堡",
+                    imgSrc:"",
+                    foodName:"汉堡宝宝哦奥",
+                    foodTag:["香辣","面包片","生菜"],
+                    saleNum:"132",
+                    foodPrice:"15.8",
+                    oldPrice:"16",
+                    foodDisCount:"5.6折"
+                },
+                {
+                    foodId:"5",
+                    foodClass:"饮品",
+                    imgSrc:"",
+                    foodName:"雪碧",
+                    foodTag:["香辣","面包片","生菜"],
+                    saleNum:"132",
+                    foodPrice:"15.8",
+                    oldPrice:"16",
+                    foodDisCount:"5.6折"
+                },
+                {
+                    foodId:"6",
+                    foodClass:"饮品",
+                    imgSrc:"",
+                    foodName:"芬达",
+                    foodTag:["香辣","面包片","生菜"],
+                    saleNum:"132",
+                    foodPrice:"15.8",
+                    oldPrice:"16",
+                    foodDisCount:""
                 }
             ],
         }
     },
     methods:{
+        // 跳转页面
         toPage(route){
             this.$router.push(route)
+        },
+        // 按分类显示食物列表
+        foodFilter(){ 
+           return !this.foodList?[]: this.foodList.filter(item=>{
+               let activeClass=this.items[this.active].text
+               if(activeClass=="热销榜"){
+                   return item.saleNum>100
+               }else if(activeClass=="折扣"){
+                   return item.foodDisCount
+               }else{
+                   return item.foodClass==activeClass
+               }
+           })
         }
     },
     components:{
diff --git a/src/views/Index/Order.vue b/src/views/Index/Order.vue
index 0a64005389a3e2099a2bc6e61bbb3c2cc1b924eb..4341e75a59bbb5fd2b39a8611f6edbbbfb310505 100644
--- a/src/views/Index/Order.vue
+++ b/src/views/Index/Order.vue
@@ -1,11 +1,31 @@
 <template>
+<!-- 扫码订餐/order -->
+<!-- 
+    可前往页面：
+        确认订单/orderconfirm 
+-->
+<div class="wraper">
+    <!-- 搜索框 -->
+    <van-search v-model="value" placeholder="搜索菜品"  shape="round" class="search">
+        <span slot="left" class="tableNum">010号桌</span>
+        <span slot="left-icon"></span>
+        <span slot="right-icon" class="iconfont icon-fangdajing"></span>
+    </van-search>
+
     <!-- 分类选择 -->
-    <van-tree-select  :items="items" :main-active-index.sync="active" class="menu" height="auto">
-        <template #content>
-            <div >
-                <li v-for="(item,index) in foodFilter()" :key="item.foodName"  >
-                <!-- src要改成「:src="item.imgSrc"」 -->
-                <img src="../../assets/u9.png">
+    <div class="menu">
+        <div :class="isXiding" @click="selectClass">
+            <div v-for="(item,index) in classList"
+            :index="index"
+            :class="active==index?'active classItem':'classItem'"
+            >
+                {{item}}
+            </div>
+        </div>
+        <ul class="menuRight">
+            <li v-for="(item,index) in filterList" :key="item.foodName"  >
+                <!-- 后期有数据接口，src要改成「:src="item.imgSrc"」 -->
+                <img :src="item.imgSrc?item.imgSrc:'//p0.meituan.net/deal/e4b328ae8382a573c59d682115e1522f40281.jpg@360w_328h_1e_1c'">
                 <div class="foodInfo">
                     <div class="foodName">{{item.foodName}}</div>
                     <div class="foodTag">
@@ -20,7 +40,12 @@
                         <span>￥</span>
                         <span>{{item.foodPrice}}</span>
                         <span>￥{{item.oldPrice}}</span>
-                        <div class="addBtn" :foodId="item.foodId" @click="onClickAdd(item.foodId)">+</div>
+                        <div class="numBtn">
+                            <div v-show="item.addNum" class="reduceBtn" :foodId="item.foodId" @click="numChange(item,-1)">-</div>
+                            <span v-show="item.addNum" class="num">{{item.addNum}}</span>
+                            <div class="addBtn" :foodId="item.foodId" @click="numChange(item,1)">+</div>
+                        </div>
+                        
                     </div>
                     <!-- 没有折扣信息就隐藏 -->
                     <div v-if="item.foodDisCount" class="foodDisCount">
@@ -29,37 +54,54 @@
                     </div>
                 </div>
             </li>
-            </div>
-        </template>
-    </van-tree-select>
+        </ul>
+    </div>
+
+    <!-- 购物车 下单-->
+    <div :class="orderNum?'goOrder active':'goOrder'">
+        <div class="iconfont icon-gouwuche">
+            <div class="numIcon">{{orderNum}}</div>
+        </div>
+        <div class="text">{{orderNum?getSum():"请添加菜品"}}</div>
+        <div class="goOrderBtn" @click="goOrder">去下单</div>
+    </div>
+</div>  
 </template>
+
 <script>
 import Vue from 'vue';
-import { Overlay,TreeSelect } from 'vant';
-Vue.use(Overlay);
+import {TreeSelect,Search} from 'vant';
+// vant 分类选择组件
 Vue.use(TreeSelect);
+// vant 搜索框组件
+Vue.use(Search);
 export default {
     data() {
         return {
+            // 搜索框里的内容
+            value: '',
+            // 当前所选择的食物分类
             active: 0,
-            items: [
-                { text: '热销榜' }, 
-                { text: '折扣' }, 
-                { text: '汉堡包' }, 
-                { text: '鸡肉卷' }, 
-                { text: '饮品' }, 
-                { text: '双人套餐' }, 
-                { text: '单人套餐' },
-                { text: '酱料包' },
+            // 选择的食物数量
+            orderNum:0,
+            
+            isXiding:"menuLeft",
+            // 食物分类导航
+            classList: [
+                '热销榜', 
+                '折扣', 
+                '汉堡包', 
+                '鸡肉卷', 
+                '饮品', 
+                '双人套餐', 
+                '单人套餐',
+                '酱料包',
             ],
-            addFoodList:{
-                "1":3,
-                
-            },
+            // 代替请求的食物列表
             foodList:[
                 {
                     foodId:"1",
-                    foodClass:["热销榜","折扣","汉堡包",],
+                    foodClass:"汉堡包",
                     imgSrc:"",
                     foodName:"香辣鸡腿堡",
                     foodTag:["香辣","面包片","生菜"],
@@ -70,7 +112,7 @@ export default {
                 },
                 {
                     foodId:"2",
-                    foodClass:["热销榜","汉堡包",],
+                    foodClass:"汉堡包",
                     imgSrc:"",
                     foodName:"薯条",
                     foodTag:["香辣","面包片","生菜"],
@@ -81,7 +123,7 @@ export default {
                 },
                 {
                     foodId:"3",
-                    foodClass:["热销榜","折扣","饮品",],
+                    foodClass:"饮品",
                     imgSrc:"",
                     foodName:"可乐",
                     foodTag:["香辣","面包片","生菜"],
@@ -92,7 +134,7 @@ export default {
                 },
                 {
                     foodId:"4",
-                    foodClass:["折扣","汉堡",],
+                    foodClass:"汉堡",
                     imgSrc:"",
                     foodName:"汉堡宝宝哦奥",
                     foodTag:["香辣","面包片","生菜"],
@@ -103,7 +145,7 @@ export default {
                 },
                 {
                     foodId:"5",
-                    foodClass:["热销榜","折扣","饮品",],
+                    foodClass:"饮品",
                     imgSrc:"",
                     foodName:"雪碧",
                     foodTag:["香辣","面包片","生菜"],
@@ -114,7 +156,7 @@ export default {
                 },
                 {
                     foodId:"6",
-                    foodClass:["热销榜","饮品",],
+                    foodClass:"饮品",
                     imgSrc:"",
                     foodName:"芬达",
                     foodTag:["香辣","面包片","生菜"],
@@ -124,17 +166,82 @@ export default {
                     foodDisCount:""
                 }
             ],
+            filterList:[]
         }
     },
+    created(){
+        window.addEventListener('scroll',()=>{
+                var t = document.documentElement.scrollTop || document.body.scrollTop;
+            
+            if(t>60 && t<400){
+                this.isXiding="menuLeft xiding"
+            }else if(t<=60){
+                this.isXiding="menuLeft"
+            }
+        })
+       
+        this.$http.get("https://www.fastmock.site/mock/0986597585a34d83a11da7a620d2fec3/food/foodList")
+        .then((res)=>{
+            this.foodList=res.data.foodList;
+            this.filterList=this.foodFilter();
+        })
+    },
+    watch:{
+        foodList(val){
+             this.filterList=this.foodFilter();
+        },
+        active(){
+            this.filterList=this.foodFilter();
+        }
+       
+    },
     methods:{
-        // 点击加入订单按钮
-        onClickAdd(footId){
-            console.log(footId);
+        selectClass($event){
+            this.active=$event.target.getAttribute("index")
+        },
+        //去下单
+        goOrder(){
+            // 获取食物列表中添加数量大于0的所有食物，就是本次产生的订单，通过路由传递给确认订单页面
+            let orderList=this.foodList.filter((item)=>{
+               return item.addNum
+            })
+            this.$router.push({name:"orderconfirm",params:{orderList}})
+        },
+        // 计算总价
+        getSum(){
+            let total= this.foodList.reduce((total, item)=>{
+                // 后期添加折扣计算
+                return total+parseFloat(item.foodPrice)*(isNaN(item.addNum)?0:item.addNum)
+            }, 0)
+            return "￥"+total.toFixed(1)
+        },
+        // 改变购买食物的数量
+        numChange(item,value){
+            // addNum未定义就赋值为1，已经存在就增加值
+            if(isNaN(item.addNum)){
+                // 使用vue提供的this.$set设置对象与数组的属性值，保证能被双向绑定监听到
+                this.$set(item,"addNum",1)
+            }else{
+                this.$set(item,"addNum",item.addNum+value)
+            } 
+            // 改变选取的食物总数量
+            this.orderNum+=value  
         },
         // 按分类显示食物列表
-        foodFilter(){
-           return this.foodList.filter(item=>{
-               return item.foodClass.indexOf(this.items[this.active].text)!=-1
+        foodFilter(){ 
+           return !this.foodList?[]: this.foodList.filter(item=>{
+               //获取当前的食物分类导航
+               let activeClass=this.classList[this.active]
+            //    分类导航是热销榜，就按销量筛选食物
+               if(activeClass=="热销榜"){
+                   return item.saleNum>5
+            //    分类导航是折扣，就按是否有折扣筛选食物
+               }else if(activeClass=="折扣"){
+                   return item.foodDisCount
+            //    其余的全部使用食物分类属性筛选
+               }else{
+                   return item.foodClass==activeClass
+               }
            })
         }
     }
@@ -145,25 +252,65 @@ export default {
     padding: 0;
     margin: 0;
 }
+.wraper{
+    padding-top: 40px;
+    // padding-bottom: 30px;
+    // background-color: #f5f5f5;
+    min-height: 100%;
+    box-sizing: border-box;
+    .van-search{
+        padding: 12px 12px;
+        .van-search__content{
+            border: 1px solid #ccc;
+            background-color: #fff;
+            .iconfont{
+                font-size: 22px;
+                color: #ccc;
+            }
+        }
+    }
+}
+.search{
+    .tableNum{
+        padding-right: 10px;
+        color: #3bb19c;
+        font-size: 14px;
+    }
+}
 //菜单样式
 .menu {
+    border-top: 1px solid #ccc;
     width: 100%;
-    margin-top: 40px;
-    margin-bottom: 80px;
-    .van-tree-select__content{
-        width: 75%;
-        flex: 3;
-    }
-    .van-tree-select__nav{
-        a{
+    padding-bottom: 80px;
+    display: flex;
+    position: relative;
+    .menuLeft{
+        background-color: #F7F8FA;
+        width: 25%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        font-size: 14px;
+        &.xiding{
+            position: fixed;
+            top:40px;
+        }
+        .classItem{
             line-height: 40px;
+            color: #333;
+            &.active{
+                background-color: #fff;
+            }
         }
     }
-    li{
+    .menuRight{
+        width: 100%;
+        margin-left: 25%;
+        li{
         flex: 1;
         list-style:none;
         height: 110px;
-        margin-top: 10px;
+        // margin-top: 10px;
         &:after{
                 content: "";
                 clear: both;
@@ -175,7 +322,7 @@ export default {
             border-radius: 10px;
             margin: 0px 8px 0px 8px;
             float: left;
-            background-color: #FF9381;
+            background-color: #fff;
         }
         .foodInfo{
             // float: left;
@@ -222,17 +369,38 @@ export default {
                     color: #999;
                     text-decoration:line-through
                 }
-                .addBtn{
+                .numBtn{
+                    display: flex;
                     position: absolute;
-                    top: 2px;
-                    left: 230px;
-                    width: 18px;
-                    line-height: 18px;
-                    border-radius: 50%;
-                    text-align: center;
-                    color: #fff;
-                    background-color: #FF9900;
+                    justify-content: flex-end;
+                    right: 20px;
+                    top: 0;
+                    width: 60px;
+                    align-items: center;
+                    .num{
+                        padding: 0 6px;
+                        color: #666;
+                        font-size: 14px;
+                    }
+                    .addBtn,.reduceBtn{
+                        // font-size: 18px;
+                        // position: absolute;
+                        // top: 2px;
+                        // left: 0px;
+                        width: 18px;
+                        line-height: 18px;
+                        border-radius: 50%;
+                        text-align: center;
+                        color: #fff;
+                        background-color: #FF9900;
+                    }
+                    .reduceBtn{
+                        background-color: #D7D7D7;
+                        color: #000;
+
+                    }
                 }
+                
             }
             .foodDisCount{
                 font-size: 13px;
@@ -240,6 +408,85 @@ export default {
             }   
 
         }
-    } 
+    }
+    }
+
+
+    .van-tree-select__content{
+        width: 75%;
+        flex: 3;
+    }
+    .van-tree-select__nav{
+        a{
+            line-height: 40px;
+        }
+    }
+    .foodHead{
+        text-align: left;
+        line-height: 30px;
+        padding-left: 6px;
+    }
+     
+}
+
+// 去下单
+.goOrder{
+    width: 300px;
+    height: 42px;
+    line-height: 42px;
+    border-radius: 100px;
+    background-color: #E4E4E4;
+    font-size: 16px;
+    color: #fff;
+    display: flex;
+    position: fixed;
+    left: 50%;
+    bottom: 20px;
+    margin-left: -150px;
+    justify-content: space-between;
+    .iconfont{
+        background-color: #BCBCBC;
+        border-radius: 100px;
+        height: 42px;
+        width: 42px;
+        font-size: 26px;
+        position: relative;
+        .numIcon{
+            display: none;
+            background-color: red;
+            font-size: 12px;
+            line-height: 16px;
+            width: 16px;
+            border-radius: 50%;
+            position: absolute;
+            top: 0;
+            right: 0;
+        }
+    }
+    .text{
+        width: 120px;
+        text-align: left;
+    }
+    .goOrderBtn{
+        width: 100px;
+        background-color: #BCBCBC;
+        border-radius: 0 100px 100px 0;
+    }
+}
+.goOrder.active{
+    background-color: #666666;
+    .iconfont{
+        background-color: #333333;
+        .numIcon{
+            display: block;
+        }
+    }
+    .text{
+        
+        text-align: left;
+    }
+    .goOrderBtn{
+        background-color: #FF0000;
+    }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/OrderConfirm/OrderConfirm.vue b/src/views/OrderConfirm/OrderConfirm.vue
index 97ed6da17c77e2ef1ce7b3c784e9977569278f14..15f096e768e3d95e8b3d7809c2d5a3c27beaf8b5 100644
--- a/src/views/OrderConfirm/OrderConfirm.vue
+++ b/src/views/OrderConfirm/OrderConfirm.vue
@@ -1,6 +1,635 @@
 <template>
-    <div>
-        OrderConfirm
-        订单确认
+<div class="wraper">
+    <div class="head">
+        010号桌
     </div>
-</template>
\ No newline at end of file
+    <!-- 订单列表 -->
+    <van-card v-for="item in orderList" :key="item.foodId">
+        <div slot="price" class="num"><span>×</span> {{item.addNum}}</div>
+        <div slot="num" class="price"><span>￥</span> {{(item.addNum*item.foodPrice).toFixed(1)}}</div>
+        <div slot="title" class="title">{{item.foodName}}</div>
+        <img slot="thumb" class="thumb" :src="item.imgSrc"/>
+    </van-card>
+    <!-- 优惠 -->
+    <div class="discount">
+        <!-- 新用户优惠 -->
+        <van-cell title="新用户首单立减" value="-￥15">
+            <div slot="icon" class="left-icon">新 </div>
+            <div slot="right-icon" class="right-placeholder"></div>
+        </van-cell>
+        <!-- 优惠券 -->
+        <van-cell title="优惠券" to="/selectcoupons" :value="'-￥'+couponDiscount" >
+            <div slot="icon" class="left-icon couponIcon">惠 </div>
+            <div slot="right-icon" class="right-icon"> ></div>
+        </van-cell>
+    </div>
+
+    <!-- 优惠与金额 -->
+    <div class="money">
+        <div>
+            <div>已优惠</div>
+            <div class="moneyIcon">￥</div>
+            <div class="discount">{{totalDiscount}}</div>
+        </div>
+        <div>
+            <div>小计</div>
+            <div class="moneyIcon">￥</div>
+            <div class="amount">{{totalAmount}}</div>
+        </div>
+    </div>
+    
+    <!-- 就餐人数 -->
+    <van-cell title="就餐人数" :value="peopleNumList[peopleNumIndex]+'人'">
+        <!-- 点击展开人数选择列表 -->
+        <div slot="right-icon" class="right-icon" @click="peopleNumShow=!peopleNumShow"> ></div>
+    </van-cell>
+    <!-- 列表的半透明遮罩 -->
+    <div class="peopleNumShow" v-show="peopleNumShow"></div>
+    <!-- 就餐人数选择列表 -->
+    <div class="peopleNumSelect" v-show="peopleNumShow">
+        <!-- 列表标题 -->
+        <div class="selectHead">请选择就餐人数</div>
+        <!-- 列表主体 负责事件委托 -->
+        <div class="selectBody" @click="peopleNumSelect">
+            <!-- 列表项 -->
+            <div v-for="(item,index) in peopleNumList" :key="item" 
+            :class="peopleNumIndex==index?'selectItem active': 'selectItem'">
+                {{item}}人
+            </div>
+        </div>
+        
+    </div>
+
+    <!-- 备注 -->
+    <van-cell-group class="nodes">
+        <van-field v-model="nodesValue" label="备注" placeholder="请输入口味,偏好等要求" />
+    </van-cell-group>
+
+    <!-- 购物车 下单-->
+    <div class="goPay">
+        <div class="text">
+            <div>应付金额</div> 
+            <div>￥{{totalAmount}}</div>
+        </div>
+        <div class="goPayBtn" @click="goPay">立即支付</div>
+    </div>
+</div>
+</template>
+
+<script>
+import Vue from 'vue';
+import { Cell,Card,Field,CellGroup } from 'vant';
+
+let a=
+{
+"data":{
+"orderList":[
+    {
+        orderId:111,
+        orderSrate:"cancelled",
+        FoodList:[
+            {
+                "foodId": 239311883,
+                "foodClass": "汉堡包",
+                "imgSrc": "http://p0.meituan.net/xianfu/7aab6d5b1b198d49e541d91d82f5e87c19616.jpg",
+                "foodName": "薯霸王Plus",
+                "foodTag": ["香辣", "面包片", "生菜"],
+                "saleNum": 1500,
+                "foodPrice": 97,
+                "oldPrice": "116",
+                "foodDisCount": "5.6折"
+            }, 
+            {
+                "foodId": 141363074,
+                "foodClass": "汉堡包",
+                "imgSrc": "http://p1.meituan.net/bbia/9ac880bae387bff7e83bb7907c55f2ac752204.jpg",
+                "foodName": "火烤菠萝皇堡（牛）",
+                "foodTag": ["香辣", "面包片", "生菜"],
+                "saleNum": 2800,
+                "foodPrice": 71,
+                "oldPrice": "85",
+                "foodDisCount": "5.6折"
+            }, 
+            {
+                "foodId": 7350105,
+                "foodClass": "汉堡包",
+                "imgSrc": "http://p0.meituan.net/xianfu/25f6c49d02defdb164a08e38fa940e9e29929.jpg",
+                "foodName": "炫辣鸡腿堡",
+                "foodTag": ["香辣", "面包片", "生菜"],
+                "saleNum": 1700,
+                "foodPrice": 57,
+                "oldPrice": "68",
+                "foodDisCount": "5.6折"
+            }
+        ]
+       
+    },
+    {
+        orderId:222,
+        orderSrate:"cancelled",
+        FoodList:[
+            {
+                "foodId": 193402299,
+                "foodClass": "鸡肉卷",
+                "imgSrc": "http://p0.meituan.net/xianfu/f2aee933cfcc175fd0fb170b2f16709e40738.jpg",
+                "foodName": "缤纷小食袋",
+                "foodTag": ["香辣", "面包片", "生菜"],
+                "saleNum": 10200,
+                "foodPrice": 2,
+                "oldPrice": "2",
+                "foodDisCount": "5.6折"
+            }, 
+            {
+                "foodId": 183960254,
+                "foodClass": "汉堡包",
+                "imgSrc": "http://p0.meituan.net/xianfu/d5c14b31a7850a356c4e642ce8f51f7334202.jpg",
+                "foodName": "又又成双烤鸡堡",
+                "foodTag": ["香辣", "面包片", "生菜"],
+                "saleNum": 2800,
+                "foodPrice": 2,
+                "oldPrice": "2",
+                "foodDisCount": "5.6折"
+            },
+            {
+                "foodId": 104918887,
+                "foodClass": "鸡肉卷",
+                "imgSrc": "http://p1.meituan.net/dealwatera/f7adeca3bb6f7f81a26383cf4115619f57115.jpg",
+                "foodName": "花样霸王鸡条",
+                "foodTag": ["香辣", "面包片", "生菜"],
+                "saleNum": 1300,
+                "foodPrice": 2,
+                "oldPrice": "2",
+                "foodDisCount": "5.6折"
+            }
+        ]
+       
+    },
+    {
+        orderId:333,
+        orderSrate:"cancelled",
+        FoodList:[
+            {
+			"foodId": 218993601,
+			"foodClass": "汉堡包",
+			"imgSrc": "http://p0.meituan.net/xianfu/ac511465b93cb84f66888e5b781e48cb63956.png",
+			"foodName": "双层香脆鸡排堡",
+			"foodTag": ["香辣", "面包片", "生菜"],
+			"saleNum": 2100,
+			"foodPrice": 2,
+			"oldPrice": "2",
+			"foodDisCount": "5.6折"
+            }, 
+            {
+                "foodId": 213174827,
+                "foodClass": "汉堡包",
+                "imgSrc": "http://p0.meituan.net/xianfu/fe4e52785d2523c4d8710a52262bfc9230520.jpg",
+                "foodName": "超值美式鸡排堡堡",
+                "foodTag": ["香辣", "面包片", "生菜"],
+                "saleNum": 1300,
+                "foodPrice": 2,
+                "oldPrice": "2",
+                "foodDisCount": "5.6折"
+            }
+        ]
+       
+    },
+
+    {
+        orderId:444,
+        orderSrate:"complated",
+        FoodList:[
+            {
+                "foodId": 239311883,
+                "foodClass": "汉堡包",
+                "imgSrc": "http://p0.meituan.net/xianfu/7aab6d5b1b198d49e541d91d82f5e87c19616.jpg",
+                "foodName": "薯霸王Plus",
+                "foodTag": ["香辣", "面包片", "生菜"],
+                "saleNum": 1500,
+                "foodPrice": 97,
+                "oldPrice": "116",
+                "foodDisCount": "5.6折"
+            }, 
+            {
+                "foodId": 141363074,
+                "foodClass": "汉堡包",
+                "imgSrc": "http://p1.meituan.net/bbia/9ac880bae387bff7e83bb7907c55f2ac752204.jpg",
+                "foodName": "火烤菠萝皇堡（牛）",
+                "foodTag": ["香辣", "面包片", "生菜"],
+                "saleNum": 2800,
+                "foodPrice": 71,
+                "oldPrice": "85",
+                "foodDisCount": "5.6折"
+            }, 
+            {
+                "foodId": 7350105,
+                "foodClass": "汉堡包",
+                "imgSrc": "http://p0.meituan.net/xianfu/25f6c49d02defdb164a08e38fa940e9e29929.jpg",
+                "foodName": "炫辣鸡腿堡",
+                "foodTag": ["香辣", "面包片", "生菜"],
+                "saleNum": 1700,
+                "foodPrice": 57,
+                "oldPrice": "68",
+                "foodDisCount": "5.6折"
+            }
+        ]
+       
+    },
+    {
+        orderId:555,
+        orderSrate:"complated",
+        FoodList:[
+            {
+			"foodId": 85978033,
+			"foodClass": "汉堡包",
+			"imgSrc": "http://p1.meituan.net/xianfu/2eece260338a52a3eeb782dd2812e7fb27248.jpg",
+			"foodName": "德克萨斯烟熏鸡堡套餐",
+			"foodTag": ["香辣", "面包片", "生菜"],
+			"saleNum": 0,
+			"foodPrice": 3,
+			"oldPrice": "4",
+			"foodDisCount": "5.6折"
+            }, 
+            {
+                "foodId": 220036561,
+                "foodClass": "汉堡包",
+                "imgSrc": "",
+                "foodName": "2层芝士牛肉堡",
+                "foodTag": ["香辣", "面包片", "生菜"],
+                "saleNum": 0,
+                "foodPrice": 3,
+                "oldPrice": "4",
+                "foodDisCount": "5.6折"
+            }, 
+            {
+                "foodId": 415374905,
+                "foodClass": "汉堡包",
+                "imgSrc": "https://p0.meituan.net/biztone/2d2d02e5a7bacdaa025f3cae9e0da1191468668.jpg",
+                "foodName": "黑椒眼肉牛排堡",
+                "foodTag": ["香辣", "面包片", "生菜"],
+                "saleNum": 0,
+                "foodPrice": 2,
+                "oldPrice": "2",
+                "foodDisCount": "5.6折"
+            }
+        ]
+       
+    },
+
+    {
+        orderId:666,
+        orderSrate:"topay",
+        FoodList:[
+            {
+			"foodId": 168932299,
+			"foodClass": "汉堡包",
+			"imgSrc": "http://p1.meituan.net/dealwatera/f5b3007765933652d0ce5d5bc4cd230c130788.jpg",
+			"foodName": "黑芝麻熔岩黑巧克力蛋糕",
+			"foodTag": ["香辣", "面包片", "生菜"],
+			"saleNum": 1500,
+			"foodPrice": 3,
+			"oldPrice": "4",
+			"foodDisCount": "5.6折"
+            }, 
+            {
+                "foodId": 151571669,
+                "foodClass": "汉堡包",
+                "imgSrc": "http://p0.meituan.net/xianfu/4d06a542ab8d83e46f9631f9eaada51d204216.png",
+                "foodName": "双层藤椒鸡排堡",
+                "foodTag": ["香辣", "面包片", "生菜"],
+                "saleNum": 2100,
+                "foodPrice": 3,
+                "oldPrice": "4",
+                "foodDisCount": "5.6折"
+            }, 
+            {
+                "foodId": 150899189,
+                "foodClass": "饮品",
+                "imgSrc": "http://p1.meituan.net/deal/2efe6999b11c4070aeebe4ebde670c7c126376.jpg",
+                "foodName": "大果粒草莓新地",
+                "foodTag": ["香辣", "面包片", "生菜"],
+                "saleNum": 1200,
+                "foodPrice": 3,
+                "oldPrice": "4",
+                "foodDisCount": "5.6折"
+            }
+        ]
+       
+    },
+    {
+        orderId:777,
+        orderSrate:"topay",
+        FoodList:[
+            {
+			"foodId": 8182883,
+			"foodClass": "汉堡包",
+			"imgSrc": "http://qcloud.dpfile.com/pc/64BQ7nPs94OKCphNJxXYpQljuknXEWJNMT0fPHd8rjMHrdQHLlU7RQ5A5N84EFR0ZSUjBikR5Ecy-DoGYkMhlg.jpg",
+			"foodName": "中薯",
+			"foodTag": ["香辣", "面包片", "生菜"],
+			"saleNum": 1100,
+			"foodPrice": 9,
+			"oldPrice": "11",
+			"foodDisCount": "5.6折"
+            }, 
+            {
+                "foodId": 136798990,
+                "foodClass": "汉堡包",
+                "imgSrc": "http://p0.meituan.net/bbia/d54cfe0f20dfb88c56ea4e7520673e0c1832230.jpg",
+                "foodName": "双层泡椒鸡排堡",
+                "foodTag": ["香辣", "面包片", "生菜"],
+                "saleNum": 900,
+                "foodPrice": 7,
+                "oldPrice": "8",
+                "foodDisCount": "5.6折"
+            }, 
+            {
+                "foodId": 416302008,
+                "foodClass": "汉堡包",
+                "imgSrc": "http://qcloud.dpfile.com/pc/SMDE6gN80sKzpEiWeoIAm48qiH3KVZCQPFtA2mxZzBk13qVMrTP15Z4nUwKytNZYZSUjBikR5Ecy-DoGYkMhlg.jpg",
+                "foodName": "黑椒培根皇堡",
+                "foodTag": ["香辣", "面包片", "生菜"],
+                "saleNum": 0,
+                "foodPrice": 3,
+                "oldPrice": "4",
+                "foodDisCount": "5.6折"
+            }, 
+            {
+                "foodId": 244045820,
+                "foodClass": "汉堡包",
+                "imgSrc": "http://p1.meituan.net/xianfu/2ef56ccdf25a003610c83fc8785f1732196230.png",
+                "foodName": "奶油蘑菇芝士厚牛堡",
+                "foodTag": ["香辣", "面包片", "生菜"],
+                "saleNum": 3900,
+                "foodPrice": 3,
+                "oldPrice": "4",
+                "foodDisCount": "5.6折"
+            }, 
+            {
+                "foodId": 244043074,
+                "foodClass": "汉堡包",
+                "imgSrc": "http://p0.meituan.net/xianfu/3882a43edff90836687c2765fbaad741164277.png",
+                "foodName": "菠萝很芒派",
+                "foodTag": ["香辣", "面包片", "生菜"],
+                "saleNum": 700,
+                "foodPrice": 3,
+                "oldPrice": "4",
+                "foodDisCount": "5.6折"
+            }
+        ]
+       
+    },
+]
+}
+}
+
+Vue.use(Cell);
+Vue.use(Card);
+Vue.use(Field);
+Vue.use(CellGroup);
+export default {
+    
+    data(){
+        return {
+            // 订单列表
+            orderList:[],
+            // 总折扣
+             totalDiscount:30,   
+            //折扣券折扣
+            couponDiscount:0,         
+            // 总金额
+            totalAmount:0,
+            // 是否显示选择人数列表
+            peopleNumShow: false,
+            // 选择的人数在列表中的索引
+            peopleNumIndex:4,
+            // 人数列表
+            peopleNumList:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
+            // 备注
+            nodesValue: '',
+        }
+    },
+    methods: {
+        // 就餐人数选择
+        peopleNumSelect($event){
+            let child=$event.target;
+            let parent =child.parentNode;
+            this.peopleNumIndex=Array.from(parent.children ).indexOf(child);
+            this.peopleNumShow=false
+        },
+        goPay(){
+            this.$router.push("/payfailed")
+        }
+    },   
+    created(){
+        // 接收路由传递的订单列表信息
+        this.orderList=this.$route.params.orderList?this.$route.params.orderList:this.$store.state.orderList
+        this.couponDiscount=this.$route.query.discount?this.$route.query.discount:0;
+
+        this.$store.commit("setOrderList",this.orderList);
+
+        // 计算总优惠
+        this.totalDiscount=Number(this.couponDiscount)+15
+
+        // 计算总价=总金额-总优惠
+        if(this.orderList.length){
+            this.totalAmount= this.orderList.reduce((total, item)=>{
+                return total+parseFloat(item.foodPrice)*item.addNum
+            }, 0)-this.totalDiscount
+            this.totalAmount=this.totalAmount.toFixed(1) 
+        }
+        
+    }
+}
+</script>
+<style lang="scss" scoped>
+.wraper{
+    padding-top: 10%;
+    padding-bottom: 20%;
+    background-color: #f5f5f5;
+    min-height: 100%;
+    box-sizing: border-box;
+    .head{
+        text-align: left;
+        padding-right: 10px;
+        color: #3bb19c;
+        font-size: 16px;
+        line-height:51px;
+        margin-bottom: 10px;
+        padding-left: 12px;
+        background-color: #fff;
+    }
+    .van-card{
+        text-align: left;
+        .thumb{
+            width: 80px;
+            height: 80px;
+        }
+    }
+    .discount{
+        margin: 2px 0;
+    }
+    .van-cell{
+            align-items: center ;
+            color: #666;
+            
+            .left-icon{
+                width: 20px;
+                line-height: 20px;
+                background-color: #FF9900;
+                border-radius: 2px;
+                color: #fff;
+                margin-right: 8px;
+            }
+            .couponIcon{
+                background-color: #FF6633;
+            }
+            .right-icon{
+                margin-bottom: 2px;
+                padding-left: 6px;
+                font-size: 20px;
+                color: #bbb;
+            }
+            .right-placeholder{
+                width: 18px;
+            }
+            .van-cell__title{
+                text-align: left;
+            }
+        }
+    
+    .van-card{
+        height: 102px;
+        margin: 0;
+        background-color: #fff;
+        .van-card__content{
+            padding-bottom: 20px;
+        }   
+        .van-card__bottom {
+            line-height: 50px;
+        }
+        .num{
+            font-size: 13px;
+            color: #666;
+        }
+        .price{
+            font-size: 18px;
+            margin-right: 8px;
+            color: #f00;
+            span{
+                font-size: 14px;
+            }
+        }
+        .title{
+            font-size: 16px;
+            color: #333;
+            padding-top: 10px;
+        }
+        .thumb{
+            background-color: #f99;
+            border-radius: 8px;
+        }
+    }
+
+    .money{
+        line-height: 36px;
+        background-color: #fff;
+        padding-right: 14px;
+        padding-top: 8px;
+        margin-bottom: 10px;
+        display: flex;
+        justify-content: flex-end;
+        >div{
+            font-size: 16px;
+            color: #666;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            .moneyIcon{
+                font-size: 13px;
+                color: #f00;
+                margin: 0 1px;
+            }
+            .discount{
+                    color: #f00;  
+                    font-size: 16px; 
+                    margin-right: 20px;
+            }
+            .amount{
+                color: #f00;
+                font-size: 18px;
+            }
+        }
+        
+    }
+
+    .peopleNumShow{
+        height: 100%;
+        width: 100%;
+        position: fixed;
+        top: 0;
+        left: 0;
+        background-color: rgba(107, 107, 107, 0.5);
+    }
+    .peopleNumSelect{
+        z-index: 99;
+        background-color: #fff;
+        height: 60%;
+        width: 100%;
+        position: fixed;
+        bottom: 0px;
+        left: 0;
+        overflow:none;
+        .selectHead{
+            line-height: 50px;
+            font-size: 16px;
+            // position:fixed; 
+        }
+        .selectBody{
+            overflow:scroll;
+            height:90%;
+            .selectItem{
+                line-height: 42px;
+                border-bottom: 1px solid #eee;
+                &.active,&:hover{
+                    color:#3bb19c;
+                }
+            }
+        }
+    }
+
+    // 备注
+    .nodes{
+        margin-top: 10px;    
+    }
+
+    // 去下单
+    .goPay{
+        width: 300px;
+        height: 42px;
+        line-height: 42px;
+        border-radius: 100px;
+        background-color: #333333;
+        font-size: 16px;
+        color: #fff;
+        display: flex;
+        position: fixed;
+        left: 50%;
+        bottom: 20px;
+        margin-left: -150px;
+        justify-content: space-between;
+        .text{
+            // width: 120px;
+            text-align: left;
+            display: flex;
+            justify-content: flex-start;
+            div{
+                margin-left: 20px;
+            }
+        }
+        .goPayBtn{
+            width: 100px;
+            background-color: #FF0000;
+            border-radius: 0 100px 100px 0;
+        }
+    }   
+}
+</style>
\ No newline at end of file
diff --git a/src/views/OrderConfirm/PayFailed.vue b/src/views/OrderConfirm/PayFailed.vue
index 438a5dc96001d154ca3ac4d588b65622f0e8df5e..e8fbe589343c366449477c2fbda6acc61b62ffa4 100644
--- a/src/views/OrderConfirm/PayFailed.vue
+++ b/src/views/OrderConfirm/PayFailed.vue
@@ -1,6 +1,56 @@
 <template>
-    <div>
-        PayFailed
-        订单确认=>支付失败
+    <div class="wraper">
+        <div class="icon">🙁</div>
+        <div class="payState">支付失败！</div>
+        <div class="rePay" @click="rePay">继续支付</div>
+        <div class="toIndex" @click="toIndex">返回首页</div>
     </div>
-</template>
\ No newline at end of file
+</template>
+<script>
+export default {
+    methods:{
+        rePay(){
+            this.$router.push('/paysuccess')
+        },
+        toIndex(){
+            this.$router.push('/index')
+        },
+    }
+}
+</script>
+<style lang="scss" scoped>
+.wraper{
+    text-align: center;
+    background-color: #F5F5F5;
+    height: 100%;
+    padding-top: 40px;
+    box-sizing: border-box;
+    .icon{
+        margin-top: 60px;
+        font-size: 60px;
+    }
+    .payState{
+        margin-top: 30px;
+        font-size: 18px;
+        color: #666;
+    }
+    .rePay{
+        margin: 100px auto 0;
+        width: 245px;
+        line-height: 42px;
+        border-radius: 50px;
+        color: #fff;
+        font-size: 13px;
+        background-color: #3BB19C; 
+    }
+    .toIndex{
+        margin: 20px auto 0; 
+        width: 245px;
+        line-height: 42px;
+        border-radius: 50px;
+        color: #666;
+        font-size: 13px;
+        background-color: #D7D7D7;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/OrderConfirm/PaySuccess.vue b/src/views/OrderConfirm/PaySuccess.vue
index 1a8319a547b962b4f714ff51fe06ebd8f395de23..b8fa77dc1001567068d41dd8c7021719e4747819 100644
--- a/src/views/OrderConfirm/PaySuccess.vue
+++ b/src/views/OrderConfirm/PaySuccess.vue
@@ -1,6 +1,56 @@
 <template>
-    <div>
-        PaySuccess
-        订单确认=>支付成功
+    <div class="wraper">
+        <div class="icon">🙂</div>
+        <div class="payState">支付成功啦！</div>
+        <div class="toOrder" @click="toOrder">查看订单</div>
+        <div class="toIndex" @click="toIndex">返回首页</div>
     </div>
-</template>
\ No newline at end of file
+</template>
+<script>
+export default {
+    methods:{
+        toOrder(){
+            this.$router.push('/myorders')
+        },
+        toIndex(){
+            this.$router.push('/index')
+        },
+    }
+}
+</script>
+<style lang="scss" scoped>
+.wraper{
+    text-align: center;
+    background-color: #F5F5F5;
+    height: 100%;
+    padding-top: 40px;
+    box-sizing: border-box;
+    .icon{
+        margin-top: 60px;
+        font-size: 60px;
+    }
+    .payState{
+        margin-top: 30px;
+        font-size: 18px;
+        color: #666;
+    }
+    .toOrder{
+        margin: 100px auto 0;
+        width: 245px;
+        line-height: 42px;
+        border-radius: 50px;
+        color: #fff;
+        font-size: 13px;
+        background-color: #3BB19C; 
+    }
+    .toIndex{
+        margin: 20px auto 0; 
+        width: 245px;
+        line-height: 42px;
+        border-radius: 50px;
+        color: #666;
+        font-size: 13px;
+        background-color: #D7D7D7;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/OrderConfirm/SelectCoupons.vue b/src/views/OrderConfirm/SelectCoupons.vue
index baa9a1f8131d6e455ca3eeccee50d3c99785fb2e..ef2d146e3451a865efb3e7737cb6cb26a678057a 100644
--- a/src/views/OrderConfirm/SelectCoupons.vue
+++ b/src/views/OrderConfirm/SelectCoupons.vue
@@ -1,6 +1,182 @@
 <template>
-    <div>
-        SelectCoupons
-        订单确认=>选择优惠券
+    <div class="wraper">
+        <!-- 头部 -->
+        <div class="couponsHead">可用优惠券（{{couponsList.length}}）</div>
+        <!-- 主体 -->
+        <div class="couponsBody">
+            <!-- 列表项 -->
+            <Coupon 
+            v-for="(item,index) in couponsList" 
+            :couponMoney="item.couponMoney"
+            :couponLimit="item.couponLimit"
+            :couponExpire="dateFormat(item.couponExpire)">
+                <input  slot="rightBtn" class="rightBtn" @change="selectCoupon(index)" type="radio" name="coupon" checked>
+            </Coupon>
+            <!-- <div v-for="(item,index) in couponsList" class="coupon">
+                <div class="left">
+                    <div class="discount">￥{{item.couponMoney}}</div>
+                    <div class="limit">满{{item.couponLimit}}元可用</div>
+                </div>
+                <div class="right">
+                    <div>通用</div>
+                    <div class="expire">有效期至：{{dateFormat(item.couponExpire)}}
+                        <input  @change="selectCoupon(index)" type="radio" name="coupon" checked>
+                    </div>
+                    
+                </div>
+            </div> -->
+        </div>
+
+        <div class="confirm" @click="toPage">确认</div>
     </div>
-</template>
\ No newline at end of file
+</template>
+<script>
+import Coupon from "../../components/Coupon.vue"
+export default {
+    
+    data(){
+        return {
+            // 我的优惠券列表
+            couponsList:[
+                {
+                    // 优惠券id
+                    couponId:"001",
+                    // 满多少元可用
+                    couponLimit:100,
+                    // 优惠多少钱
+                    couponMoney:25,
+                    //过期时间
+                    couponExpire:new Date("4 10,2021"),
+                },
+                {
+                    couponId:"001",
+                    couponLimit:60,
+                    couponMoney:5,
+                    couponExpire:new Date("4 11,2021"),
+                },
+                {
+                    couponId:"001",
+                    couponLimit:20,
+                    couponMoney:5,
+                    couponExpire:new Date("4 22,2021"),
+                },
+                {
+                    couponId:"001",
+                    couponLimit:100,
+                    couponMoney:30,
+                    couponExpire:new Date("4 13,2021"),
+                },
+                {
+                    couponId:"001",
+                    couponLimit:100,
+                    couponMoney:30,
+                    couponExpire:new Date("4 13,2021"),
+                }
+
+            ],
+            discount:0
+        }
+    },
+    components:{
+        Coupon
+    },
+    methods:{
+        selectCoupon(index){
+           this.discount= this.couponsList[index].couponMoney
+           console.log(this.discount);
+        },
+        dateFormat(date){
+            return date.getFullYear()+"-"+date.getMonth()+"-"+date.getDate() 
+        },
+        toPage(){
+            this.$router.push({path:"/orderconfirm",query:{discount:this.discount}})
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+    .wraper{
+        min-height: 100%;
+        background-color: #F5F5F5;
+        padding-top: 40px;
+        padding-bottom: 70px;
+        box-sizing: border-box;
+        .couponsHead{
+            font-size: 14px;
+            color: #666;
+            line-height: 37px;
+            padding-left: 20px;
+            background-color: #fff;
+            text-align: left;
+        }
+        .couponsBody{
+            margin:16px 16px 0;
+                .rightBtn{
+                    position: absolute;
+                    right: 10px;
+                    top: 56px;
+                    width: 20px;
+                    height: 20px;
+                }
+            // .coupon{
+            //     background-color: #fff;
+            //     margin-bottom: 10px;
+            //     height: 110px;
+            //     display: flex;
+            //     .left{
+            //         width: 120px;
+            //         text-align: center;
+            //         background-color: #1ABC9C;
+            //         color: #fff;
+            //         .discount{
+            //             margin-top: 26px;
+            //             margin-right: 8px;
+            //             line-height: 36px;
+            //             font-size: 36px;
+            //             font-weight: bold;
+            //         }
+            //         .limit{
+            //             font-size: 14px;
+            //         }
+            //     }
+            //     .right{
+            //         font-size: 16px;
+            //         font-weight: bold;
+            //         padding-left: 24px;
+            //         padding-top: 30px;
+            //         text-align: left;
+            //         color: #666;
+            //         flex-grow: 1;
+            //         .expire{
+            //             margin-top: 10px;
+            //             font-size: 14px;
+                        
+            //             color: #999;
+            //             position: relative;
+            //             input{
+            //                 position: absolute;
+            //                 right: 10px;
+            //                 top: -4px;
+            //                 width: 20px;
+            //                 height: 20px;
+            //             }
+            //         }
+            //     }
+            // }
+            
+        }   
+
+        .confirm{
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            margin-left:-122px; 
+            line-height: 42px;
+            width: 245px;
+            border-radius: 100px;
+            background-color: #3BB19C;
+            color: #fff;
+            font-size: 14px;
+        }
+    }
+</style>
\ No newline at end of file
