From 413ab4db85fffa8d257ceb7c11704752b19237c9 Mon Sep 17 00:00:00 2001
From: fanyuying <1037103437@qq.com>
Date: Fri, 9 Apr 2021 14:48:37 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E4=B8=AD=E5=BF=83=E9=A4=90?=
 =?UTF-8?q?=E6=A1=8C=E9=A2=84=E7=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                 |   1 +
 src/App.vue                                  |   1 +
 src/api/http.js                              |  12 +
 src/components/FootBar.vue                   |  14 +-
 src/components/HeadBar.vue                   |   1 +
 src/main.js                                  |   6 +-
 src/router/index.js                          |  20 +-
 src/router/modules/center.js                 |  11 +-
 src/router/modules/index.js                  |   3 +-
 src/router/modules/myBooking.js              |   3 +-
 src/store/index.js                           |  11 +
 src/views/Center/Center.vue                  | 196 ++++++++-
 src/views/Center/Login.vue                   |  88 ++++
 src/views/Center/MyBooking/MyBookingWait.vue |  17 +-
 src/views/Index/Booking/Booking.vue          | 426 ++++++++++++++++++-
 src/views/Index/Booking/BookingConfirm.vue   | 164 ++++++-
 src/views/Index/Index.vue                    |   2 +-
 17 files changed, 952 insertions(+), 24 deletions(-)
 create mode 100644 src/views/Center/Login.vue

diff --git a/package.json b/package.json
index 482fb6e..9907504 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "moment": "^2.29.1",
     "vant": "^2.12.11",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
diff --git a/src/App.vue b/src/App.vue
index 767bde7..d1b5999 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,4 +24,5 @@ export default {
   margin: 0;
 }
 
+
 </style>
diff --git a/src/api/http.js b/src/api/http.js
index 3b4a5f3..4fdc206 100644
--- a/src/api/http.js
+++ b/src/api/http.js
@@ -1,5 +1,17 @@
 import axios from "axios"
+import store from '@/store/index'
+
+axios.interceptors.request.use((config) => {
+    // config参数：请求发送时需要的信息对象
+    // 常用场景：为部分/所有的请求添加特定的请求头信息（例如有些接口需要做token鉴权的）
+    // 在这里添加jwt到请求头中
+    config.headers["authorization"] = store.state._token;
+    return config;
+});
 axios.interceptors.response.use(res=>{
+    let _token =res.data._token?res.data._token:""
+    store.commit("setToken",_token)
+
     return res.data||res
 })
 export default axios
\ No newline at end of file
diff --git a/src/components/FootBar.vue b/src/components/FootBar.vue
index 46da0b3..74bae66 100644
--- a/src/components/FootBar.vue
+++ b/src/components/FootBar.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <van-tabbar v-model="active" active-color="#3bb19c" inactive-color="#ccc" @change="onChange" >
+        <van-tabbar v-model="active" active-color="#3bb19c" inactive-color="#ccc" @change="onChange"  >
             <van-tabbar-item>
                 <van-icon slot="icon" class="iconfont icon-shouye" size="1.25rem"/>
                 <span>首页</span> 
@@ -27,12 +27,20 @@ Vue.use(Icon);
 export default {
     data(){
         return {
-            active:0
+            active:0,
+            url:["/index","/center"]
         }
+    },
+      created() {
+        // 获取当前地址
+        let path = this.$route.path;
+        // console.log(this.$route);
+        this.active = path === "/center" ? 1 : this.url.indexOf(path);
     },
     methods:{
-        onChange(){
+        onChange(index){
             console.log("底部栏");
+            this.$router.push(this.url[index])
         }
     }
 }
diff --git a/src/components/HeadBar.vue b/src/components/HeadBar.vue
index 61ec821..88d2a7d 100644
--- a/src/components/HeadBar.vue
+++ b/src/components/HeadBar.vue
@@ -20,6 +20,7 @@ export default {
                 "/coupon":"优惠券",
                 "/order":"扫码订餐",
                 "/waitindex":"排队取号",
+                
             }
         }
     },
diff --git a/src/main.js b/src/main.js
index 41925e5..173112f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,12 +4,16 @@ import router from './router'
 // import store from './store'
 
 import axios from "./api/http"
+import store from './store'
 Vue.prototype.$http=axios
 
 Vue.config.productionTip = false
 
+let _token = localStorage.getItem('jwt')? localStorage.getItem('jwt'):"";
+store.commit("setToken",_token)
+
 new Vue({
   router,
-  // store,
+  store,
   render: h => h(App)
 }).$mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
index ecb2090..9c04c3f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-
+import store from "@/store/index";
 import Index from "./modules/index.js"
 import Center from "./modules/center.js"
 import MyOrder from "./modules/myOrder.js"
@@ -32,5 +32,21 @@ const router = new VueRouter({
   base: process.env.BASE_URL,
   routes
 })
-
+router.beforeEach((to, from, next) => {
+  let quanxian = ["/mybookings", "/mycoupons", "/myorders"];
+  let toPath = to.path;
+  if (quanxian.includes(toPath)) {
+      // 要登录
+      // 判断是否有token
+      if (store.state._token) {
+          next();
+      } else {
+          // 真没登录
+          router.push({ path: "/login", query: { callback: toPath } });
+      }
+  } else {
+      // 不用登录
+      next();
+  }
+});
 export default router
diff --git a/src/router/modules/center.js b/src/router/modules/center.js
index f9dfab6..da5868d 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 Login from "@/views/Center/Login.vue"
+import store from '@/store/index.js'
 
 export default [
     {
@@ -20,5 +22,10 @@ export default [
     {
         path:"/myorders",
         component:MyOrders
-    }
-]
\ No newline at end of file
+    },
+    {
+        path:"/login",
+        component:Login
+    },
+
+]
diff --git a/src/router/modules/index.js b/src/router/modules/index.js
index 630ebc0..fffb303 100644
--- a/src/router/modules/index.js
+++ b/src/router/modules/index.js
@@ -46,6 +46,7 @@ export default [
     },
     {
         path:"/bookingconfirm",
-        component:BookingConfirm
+        component:BookingConfirm,
+        name:"bookingconfirm"
     }
 ]
\ No newline at end of file
diff --git a/src/router/modules/myBooking.js b/src/router/modules/myBooking.js
index c1f75d7..a34ef17 100644
--- a/src/router/modules/myBooking.js
+++ b/src/router/modules/myBooking.js
@@ -15,7 +15,8 @@ export default [
     },
     {
         path:"/mybookingwait",
-        component:MyBookingWait
+        component:MyBookingWait,
+        name:"mybookingwait"
     },
     {
         path:"/mybookingcomplated",
diff --git a/src/store/index.js b/src/store/index.js
index 332b916..c30b7b7 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,12 +1,23 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
+
 Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
+    _token:""
   },
   mutations: {
+    setToken(state,arg){
+      localStorage.setItem("jwt",arg)
+      return state._token = arg
+    },
+    removeToken(state){
+      localStorage.removeItem("jwt")
+      return state._token = ""
+    }
+    
   },
   actions: {
   },
diff --git a/src/views/Center/Center.vue b/src/views/Center/Center.vue
index 843e3eb..e8ab164 100644
--- a/src/views/Center/Center.vue
+++ b/src/views/Center/Center.vue
@@ -1,6 +1,194 @@
 <template>
-    <div>
-        Cneter
-        我的
+    <div class="wrap">
+       <div class="center-top">
+           <div>
+                <img :src="userInfo.headIcon" alt="">
+           <p @click="toLogin" v-if = "!userInfo.userId">立即登录</p>
+           <p @click="toLogin" v-if = "userInfo.userId">{{userInfo.mobile}}</p>
+
+           </div>
+          
+       </div>
+      <p></p>
+      <div>    
+    <div    class="margin-set my-card"
+            data-enter-time="1608645908"
+            data-click-fun="track_f_299313"
+             @click="toPage(0)"
+        >
+           
+            <span class="label">我的订单</span>
+            <img
+                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAkCAMAAABR74GsAAAAhFBMVEVHcEy+wMa+wcW9wMXQ0NDFxcW9wMW///+9wMW9wMW+wMW+wse+wMXBwca/wsW9wMW+wMa9wcW9wcW+wMa9wse9wMW9wcbAwMa/xsa9wMXAwMe9wMW9wcW/wca+wca9wMW9wsa+wMa9wMW9wMW9wcW/1NS+wMXHx8e/wcbCws6+wcW9wMXhD+L5AAAAK3RSTlMAgrXLCxblBPz1ZjfcNkzdnraBg2XPyk0k6iXrjXCd5HGLnLeADMwXZBVL0OsnaQAAAJJJREFUKM+t0EcSgzAMQFEDBmx6OiW9J//+98te8iqDlm80428ZM8ccslVATxDgC1AozWNwO8V2C75U/KlgGhX3A7QvxbWH50Px18EtV/wGOp19ByLN1xl+k1aw0doG1Cbga/naAlwjVztgLTEClhIL4CixcRDL65QeEitwnKBKA/VD/3/9PlRvskC9MecsMnPPD3MGEI/gd5ReAAAAAElFTkSuQmCC"
+                alt=""
+                class="arrow"
+            />
+        </div>
+          <div    class="margin-set my-card"
+            data-enter-time="1608645908"
+            data-click-fun="track_f_299313"
+             @click="toPage(1)"
+        >
+           
+            <span class="label">我的预约</span>
+            <img
+                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAkCAMAAABR74GsAAAAhFBMVEVHcEy+wMa+wcW9wMXQ0NDFxcW9wMW///+9wMW9wMW+wMW+wse+wMXBwca/wsW9wMW+wMa9wcW9wcW+wMa9wse9wMW9wcbAwMa/xsa9wMXAwMe9wMW9wcW/wca+wca9wMW9wsa+wMa9wMW9wMW9wcW/1NS+wMXHx8e/wcbCws6+wcW9wMXhD+L5AAAAK3RSTlMAgrXLCxblBPz1ZjfcNkzdnraBg2XPyk0k6iXrjXCd5HGLnLeADMwXZBVL0OsnaQAAAJJJREFUKM+t0EcSgzAMQFEDBmx6OiW9J//+98te8iqDlm80428ZM8ccslVATxDgC1AozWNwO8V2C75U/KlgGhX3A7QvxbWH50Px18EtV/wGOp19ByLN1xl+k1aw0doG1Cbga/naAlwjVztgLTEClhIL4CixcRDL65QeEitwnKBKA/VD/3/9PlRvskC9MecsMnPPD3MGEI/gd5ReAAAAAElFTkSuQmCC"
+                alt=""
+                class="arrow"
+            />
+        </div>
+          <div    class="margin-set my-card"
+            data-enter-time="1608645908"
+            data-click-fun="track_f_299313"
+             @click="toPage(2)"
+        >
+           
+            <span class="label">我的优惠卷</span>
+            <span class="value">3</span>
+            <img
+                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAkCAMAAABR74GsAAAAhFBMVEVHcEy+wMa+wcW9wMXQ0NDFxcW9wMW///+9wMW9wMW+wMW+wse+wMXBwca/wsW9wMW+wMa9wcW9wcW+wMa9wse9wMW9wcbAwMa/xsa9wMXAwMe9wMW9wcW/wca+wca9wMW9wsa+wMa9wMW9wMW9wcW/1NS+wMXHx8e/wcbCws6+wcW9wMXhD+L5AAAAK3RSTlMAgrXLCxblBPz1ZjfcNkzdnraBg2XPyk0k6iXrjXCd5HGLnLeADMwXZBVL0OsnaQAAAJJJREFUKM+t0EcSgzAMQFEDBmx6OiW9J//+98te8iqDlm80428ZM8ccslVATxDgC1AozWNwO8V2C75U/KlgGhX3A7QvxbWH50Px18EtV/wGOp19ByLN1xl+k1aw0doG1Cbga/naAlwjVztgLTEClhIL4CixcRDL65QeEitwnKBKA/VD/3/9PlRvskC9MecsMnPPD3MGEI/gd5ReAAAAAElFTkSuQmCC"
+                alt=""
+                class="arrow"
+            />
+        </div>
+        </div>
+        <button @click="exit">退出登录</button>
+    <FootBar/>
+
     </div>
-</template>
\ No newline at end of file
+</template>
+<script>
+import Vue from 'vue';
+import { Cell, CellGroup,Toast } from 'vant';
+
+Vue.use(Cell);
+Vue.use(CellGroup);
+Vue.use(Toast);
+
+import FootBar from '../../components/FootBar';
+export default {
+    data() {
+    return {
+        userInfo: {
+            headIcon:"https://axhub.im/pro/221031c5a692ef70/images/%E6%88%91%E7%9A%84/u32.png"
+        },
+       
+        url:["/myorders","/mybookings","/mycoupons"]
+    };
+},
+    methods:{
+       toLogin(){
+           this.$router.push("/login")
+       },
+       toPage(index){
+            this.$router.push(this.url[index])
+       },
+       exit(){
+           this.$store.commit("removeToken")
+           this.userInfo={
+               userId:"",
+               headIcon:"https://axhub.im/pro/221031c5a692ef70/images/%E6%88%91%E7%9A%84/u32.png"
+           
+           }
+           Toast.success('成功退出');
+
+       }
+    },
+    components:{
+         FootBar
+    },
+    created() {
+    let _token = this.$store.state._token;
+    if (_token) {
+        this.$http.get("http://127.0.0.1:3721/backend/get_user_info").then((ret) => {
+            console.log(ret);
+            this.userInfo = ret.data;
+        });
+    }
+}
+   
+      
+}
+</script>
+<style lang="scss" scoped>
+.wrap .my-card {
+    position: relative;
+    border-bottom: 1px solid  rgba(242, 242, 242, 1);
+}
+.wrap .margin-set {
+    background: #fff;
+    padding: 0 15px;
+    height: 49px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+}
+.wrap .margin-set .label {
+    margin-left: 15px;
+    color: #191a1b;
+    -webkit-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    text-align: left;
+}
+.wrap .margin-set .arrow {
+    text-align: right;
+    width: 6px;
+    height: 10px;
+}
+.wrap .my-balance .value,
+.wrap .my-card .value {
+    text-align: right;
+    color: #797d82;
+    padding-right: 14px;
+}
+.van-cell{
+    padding-left: 0;
+    padding-right: 10px;
+    border-bottom: 1px solid rgba(242, 242, 242, 1);
+    span{
+        text-align: left;
+    }
+}
+.wrap{
+    p{
+        height: 30px;
+        margin: 0;
+        padding: 0;
+       
+    }
+}
+.center-top{
+    margin-top: 41px;
+    width: 100%;
+    height: 228px;
+    background: rgba(70, 76, 91, 1);
+    
+    img{
+        width: 72px;
+        height: 72px;
+        margin-top: 40px;
+        margin-bottom: 10px;
+        border-radius: 50%;
+    }
+    p{
+        color: white;
+    }
+}
+
+ button{
+      width: 120px;
+      height: 42px;
+      background:rgba(70, 76, 91, 1); 
+      color: white;
+      outline: none;
+      border-radius: 21px;
+      border: none;
+      margin-top: 128px;
+}
+
+
+</style>
\ No newline at end of file
diff --git a/src/views/Center/Login.vue b/src/views/Center/Login.vue
new file mode 100644
index 0000000..65847b8
--- /dev/null
+++ b/src/views/Center/Login.vue
@@ -0,0 +1,88 @@
+<template>
+    <div class="wrap">
+      <div class="logo">
+        <img src="../../assets/u9.png" alt="">
+      </div>
+      
+<van-form @submit="onSubmit">
+  <van-field
+    v-model="mobile"
+    name="mobile"
+    label="用户名"
+    placeholder="用户名"
+    :rules="[{ pattern:m_pattern, message: '请填写用户名' }]"
+  />
+  <van-field
+    v-model="password"
+    type="password"
+    name="password"
+    label="密码"
+    placeholder="密码"
+    :rules="[{ pattern: p_pattern, message: '请填写密码' }]"
+  />
+  <div style="margin: 16px;">
+    <van-button round block type="info" native-type="submit">提交</van-button>
+  </div>
+</van-form>
+
+    </div>
+
+</template>
+<script>
+import Vue from 'vue';
+import { Form ,Button,Toast} from 'vant';
+
+Vue.use(Form);
+Vue.use(Button);
+Vue.use(Toast);
+
+
+export default {
+      data() {
+    return {
+      mobile: '',
+      password: '',
+       m_pattern: /^1[3-9]\d{9}$/,
+            p_pattern: /[\s\S]{6,}/,
+    };
+  },
+  methods: {
+    onSubmit(values) {
+    //   console.log('submit', values);
+    this.$http.post("http://127.0.0.1:3721/backend/login",values)
+    .then((ret)=>{
+        if(ret.error_code === 0){
+            Toast.success("登录成功")
+            if(this.$route.query.callback){
+                this.$router.push(this.$route.query.callback)
+            }else{
+                this.$router.push("/center")
+            }
+        }else{
+            Toast.fail(ret.message)
+        }
+        console.log(ret);
+    })
+
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.wrap{
+    margin-top: 40px;
+    .van-button {
+     background: #FF4F13;
+     outline: none;
+     border: none;
+     margin-top: 50px;
+    }
+}
+.logo img{
+  width: 76px;
+  height: 70px;
+  margin: 50px 0;
+ 
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/Center/MyBooking/MyBookingWait.vue b/src/views/Center/MyBooking/MyBookingWait.vue
index 7ba76ad..8b87c89 100644
--- a/src/views/Center/MyBooking/MyBookingWait.vue
+++ b/src/views/Center/MyBooking/MyBookingWait.vue
@@ -3,4 +3,19 @@
         MyBookingWait
         我的餐桌预定=>等待中的餐桌
     </div>
-</template>
\ No newline at end of file
+</template>
+<script>
+export default {
+    data(){
+        return{
+            list:[]
+        }
+    },
+      created(){
+        this.list=this.$route.params.list
+        console.log(this.$route.params.list);
+        // console.log(list);
+        // console.log(list.data);
+    },
+}
+</script>
\ No newline at end of file
diff --git a/src/views/Index/Booking/Booking.vue b/src/views/Index/Booking/Booking.vue
index 70a4fe1..76c7771 100644
--- a/src/views/Index/Booking/Booking.vue
+++ b/src/views/Index/Booking/Booking.vue
@@ -1,6 +1,424 @@
 <template>
-    <div>
-        Booking
-        预定餐桌
+  <div class="wrap">
+    <div class="tips">
+      <div>
+        <span class="iconfont icon-jinggao"></span>
+        <span>为了保证您的按时用餐，亲及时预定！</span>
+      </div>
     </div>
-</template>
\ No newline at end of file
+    <div class="data">
+      <span class="iconfont icon-zuo"></span>
+      <div>
+        <div :class="dataInfo==time(Date.now(), 0)?'data-now active':'data-now'"
+         @click="onTableData( 0 )" >
+          <p class="datacolor" ><span>今天</span>{{ time(Date.now(), 0) }}</p>
+        </div>
+        <div :class="dataInfo==time(Date.now(), 1)?'data-now active':'data-now'"
+         @click="onTableData(1)">
+          <p class="datacolor"><span>明天</span>{{ time(Date.now(), 1) }}</p>
+        </div>
+        <div :class="dataInfo==time(Date.now(), 2)?'data-now active':'data-now'"
+          @click="onTableData( 2)">
+          <p class="datacolor"><span>后天</span>{{ time(Date.now(), 2) }}</p>
+        </div>
+        <div :class="dataInfo==time(Date.now(), 3)?'data-now active':'data-now'"
+          @click="onTableData(3)">
+          <p class="datacolor">
+            <span>{{ e() }}</span
+            >{{ time(Date.now(), 3) }}
+          </p>
+        </div>
+      </div>
+      <span class="iconfont icon-you"></span>
+      <div>
+        <span
+          class="iconfont icon-rili"
+          @click="show = true"
+          :value="date"
+        ></span>
+        <van-calendar v-model="show" @confirm="onConfirm" color="#3bb19c"/>
+      </div>
+    </div>
+    <div class="eatnum">
+      <van-field
+        v-model="fieldValue"
+        is-link
+        readonly
+        label="就餐人数"
+        @click="showi = true"
+      />
+      <van-popup v-model="showi" round position="bottom">
+        <van-cascader
+          v-model="cascaderValue"
+          title="请选择就餐人数"
+          :options="options"
+          @close="showi = false"
+          @finish="onFinish"
+          active-color="#3BB19C"
+        />
+      </van-popup>
+    </div>
+    <div class="type">
+        <p class="type-title">餐桌类型</p>
+        <div class="type-every" >
+            <div v-for="(data,index) in type" @click="onTableType(index)" 
+            :key="data.id" :class="typeIndex==index?'active':''">
+                <p>{{data.dating}}</p>
+                <p>{{data.people}}</p>
+            </div>
+           
+       </div>
+    </div>
+     <div class="type">
+        <p class="type-title">可预订时间</p>
+        <div class="clock-wrap">
+           <div class="clock" v-for="(data,index) in clock"  
+           @click="onTableTime(index)" :key="data.id"
+           :class="timeIndex==index?'active':''">
+            <p>{{data.time}}</p>
+        </div>
+        </div>
+       
+        </div>
+        <button @click="goBook">立即预定</button>
+  </div>
+</template>
+<script>
+import Vue from "vue";
+import moment from "moment";
+
+import { Calendar, Cell, Cascader, Popup, Field } from "vant";
+
+Vue.use(Cascader);
+Vue.use(Cell);
+Vue.use(Popup);
+Vue.use(Field);
+Vue.use(Calendar);
+export default {
+  data() {
+    return {
+      date: "",
+      show: false,
+      showi: false,
+      fieldValue: "",
+      cascaderValue: "",
+      list:{
+        data:"",
+        type:"",
+        time:"",
+        peopleNum:""
+      },
+      typeIndex:0,
+      dataInfo:"",
+      timeIndex:0,
+      // 选项列表，children 代表子选项，支持多级嵌套
+      options: [
+        {
+          text: "1",
+          value: "1",
+        },
+        {
+          text: "2",
+          value: "2",
+        },
+        ,
+        {
+          text: "3",
+          value: "3",
+        },
+        {
+          text: "4",
+          value: "4",
+        },
+         {
+          text: "5",
+          value: "5",
+        },
+         {
+          text: "6",
+          value: "6",
+        },
+         {
+          text: "7",
+          value: "7",
+        },
+         {
+          text: "8",
+          value: "8",
+        },
+         {
+          text: "9",
+          value: "9",
+        },
+        {
+          text: "10",
+          value: "10",
+        },
+        {
+          text: "11",
+          value: "11",
+        },
+        {
+          text: "12",
+          value: "12",
+        },
+        {
+          text: "12人以上",
+          value: "12",
+        },
+      ],
+      type:[
+        {
+          id:1,
+          dating:"大厅",
+          people:"1-2人桌"
+        },
+          {
+          id:2,
+          dating:"大厅",
+          people:"3-4人桌"
+        },
+          {
+          id:3,
+          dating:"大厅",
+          people:"5-6人桌"
+        },
+          {
+          id:4,
+          dating:"大厅",
+          people:"6-8人桌"
+        },
+          {
+          id:5,
+          dating:"包间",
+          people:"9-12人桌"
+        },
+          {
+          id:6,
+          dating:"包间",
+          people:"12-13人桌"
+        }
+      ]  ,
+      clock:[
+        {time:"18:00",
+        id:1},
+         {time:"18:30",
+        id:2}, 
+        {time:"19:00",
+        id:3},
+         {time:"19:30",
+        id:4},
+         {time:"20:00",
+        id:5},
+         {time:"20:30",
+        id:6},
+         {time:"21:00",
+        id:7},
+         {time:"21:30",
+        id:8},
+         {time:"22:00",
+        id:9},
+      ]
+    };
+  },
+
+  methods: {
+    formatDate(date) {
+      return `${date.getMonth() + 1}/${date.getDate()}`;
+    },
+    onConfirm(date) {
+      this.show = false;
+      this.date = this.formatDate(date);
+    },
+    // 全部选项选择完毕后，会触发 finish 事件
+    onFinish({ selectedOptions }) {
+      this.showi = false;
+      this.fieldValue =
+        selectedOptions.map((option) => option.text).join("/") ;
+        if(this.fieldValue<=12){
+          this.fieldValue+="人"
+        }
+      // console.log(this.fieldValue);
+    },
+    // 选择餐桌类型
+    onTableType(index){
+        this.typeIndex=index
+        // console.log(this.type[index].dating+ " " + this.type[index].people);
+        let type=this.type[index].dating+ " " + this.type[index].people
+        // console.log(type);
+        this.list.type=type;
+        // console.log(this.list.type);
+    },
+    // 选择餐桌类型
+    onTableTime(index){
+        this.timeIndex=index
+         let time=this.clock[index].time
+        // console.log(time);
+        this.list.time=time;
+    },
+    // 选择餐桌类型
+    onTableData(info){
+        this.dataInfo=this.time( Date.now(),info)
+        //  let data=this.data[index].innerText
+        // console.log(data);
+        // this.list.data=data;
+    },
+    time(now, num) {
+      return moment(now).locale("zh-cn").add(num, "days").format("M-D");
+    },
+    e(now) {
+      return moment(now).locale("zh-cn").add(3, "days").format("dddd");
+    },
+    goBook(){
+      let y= moment(Date.now()).format("Y");
+      let list={data:y + "-"+this.dataInfo + "  " +this.list.time,type:this.list.type,time:this.list.time,peopleNum:this.fieldValue}
+      this.$router.push({name:"bookingconfirm",params:{list}})
+    }
+  },
+};
+</script>
+<style scoped lang="scss">
+.data-now.active{
+         color: #3bb19c;
+         
+}
+.wrap {
+  margin-top: 40px;
+  background: rgba(245, 245, 245, 1);
+
+  .tips {
+    width: 100%;
+    background: rgba(245, 245, 245, 1);
+    height: 60px;
+    padding-top: 14px;
+    div {
+      margin-left: 20px;
+      margin-right: 20px;
+      background: white;
+      line-height: 43px;
+      border-radius: 21px;
+      color: #3bb19c;
+      font-size: 13px;
+      box-shadow: 2px 2px 2px rgb(121 121 121 / 35%);
+    }
+  }
+  .data {
+    background: white;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    .icon-rili {
+      font-size: 36px;
+      color: #3bb19c;
+  
+    }
+    .van-cell {
+      width: 80px !important;
+      color: #3bb19c;
+    }
+    div {
+      display: flex;
+      justify-content: space-between;
+      .data-now {
+        width: 66px;
+        height: 72px;
+        flex: 1;
+        .datacolor.active {
+          color: #3bb19c;
+        }
+        p {
+          text-align: center;
+          margin: 0 auto;
+          align-items: center;
+          justify-content: center;
+
+          display: flex;
+          flex-direction: column;
+          font-size: 16px;
+          span {
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+  .eatnum {
+    margin: 20px 0;
+  }
+  .type{
+      background: white;
+      margin-bottom: 10px;
+      .type-title{
+          color: #666666;
+          line-height: 38px;
+          text-align:left ;
+          font-size: 14px;
+          padding-left: 17px;
+          border-bottom: 1px solid rgba(242, 242, 242, 1);;
+      }
+      .type-every{
+          display: flex;
+          justify-content: space-around;
+          margin-bottom: 10px;
+          padding: 0 6px;
+      flex-wrap: wrap;
+
+          div.active{
+              color: #3bb19c;
+              background: #e4f4f1;
+          }
+          div{
+              width: 107px;
+              height: 58px;
+              border: 1px solid #3bb19c;
+              border-radius: 6px;
+              margin-bottom: 10px;
+              p{
+                  margin: 0;
+                  padding:0;
+                  line-height: 26px;
+                  font-size: 14px;
+                  color:#666666 ;
+              }
+          }
+      }
+  }
+  .clock-wrap{
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      div.active{  color: #3bb19c;
+              background: #e4f4f1;
+          }
+            p{
+          width: 107px;
+          line-height: 34px;
+          border:1px solid #3bb19c;
+          border-radius: 5px;
+          margin: 0 ;
+          padding: 0;
+          margin-bottom: 8px;
+     
+
+
+     
+      }
+     
+     
+      
+  }
+  button{
+      width: 245px;
+      height: 42px;
+      background:#3bb19c; 
+      color: white;
+      outline: none;
+      border-radius: 21px;
+      border: none;
+      margin-bottom: 10px;
+
+}
+}
+
+</style>
+
diff --git a/src/views/Index/Booking/BookingConfirm.vue b/src/views/Index/Booking/BookingConfirm.vue
index 236d59c..726c0cf 100644
--- a/src/views/Index/Booking/BookingConfirm.vue
+++ b/src/views/Index/Booking/BookingConfirm.vue
@@ -1,6 +1,162 @@
 <template>
-    <div>
-        BookingConfirm
-        预定餐桌=>确认预定
+    <div class="app">
+          <div class="tips">
+      <div>
+        <span class="iconfont icon-jinggao"></span>
+        <span>为了保证您的按时用餐，亲及时预定！</span>
+      </div>
     </div>
-</template>
\ No newline at end of file
+    <div class="Appointment">
+         <p class="type-title">预约信息</p>
+     <div >
+         <p>预定时间 : {{list.data}}</p>
+         <p>餐桌类型 : {{list.type}}</p>
+         <p>就餐人数 : {{list.peopleNum}}</p>
+     </div>
+    </div>
+    <div class="Contactpeople">
+         <div class="type-title">联系人信息</div>
+         <div>
+             <p><span>联系人:</span> <input type="text" placeholder="请输入您的姓名"></p>
+             <p><span>性别:</span><input id="man" type="radio" checked="checked" name="1" />男 <input id="woman" type="radio" name="1"/>女</p>
+             <p><span>手机号:</span><input type="text" placeholder="请输入您的手机号"></p>
+         </div> 
+         <p><span>备注:</span><input type="text" placeholder="请输入您的备注要求，我们将尽量满足你" class="beizhu-input"></p>
+    </div>
+    <button @click="goMerchantconfirmation">确认提交</button>
+    
+    </div>
+</template>
+<script>
+export default {
+    data(){
+        return{
+            list:{
+                data:"",
+                type:"",
+                peopleNum:"",
+            }
+        }
+    },
+    created(){
+        this.list=this.$route.params.list?this.$route.params.list:this.list
+        // console.log(this.$route.params.list);
+        // console.log(list);
+        // console.log(list.data);
+    },
+   methods:{
+       goMerchantconfirmation(){
+           this.$router.push({name:"mybookingwait",params:{list:this.list}})
+       }
+   }
+}
+</script>
+<style lang="scss" scoped>
+body,html{
+    background: rgba(245, 245, 245, 1);
+    padding-bottom: 40px;
+}
+.app{
+    padding-top:40px;
+    background: rgba(245, 245, 245, 1);
+
+}
+button{
+     width: 245px;
+      height: 42px;
+      background:#3bb19c; 
+      color: white;
+      outline: none;
+      border-radius: 21px;
+      border: none;
+     position: absolute;
+     bottom: 30px;
+     font-size: 13px;
+     left: 64px;
+    //   background-color: white;
+}
+  .tips {
+    width: 100%;
+    background: rgba(245, 245, 245, 1);
+    height: 60px;
+    padding-top: 14px;
+    div {
+      margin-left: 20px;
+      margin-right: 20px;
+      background: white;
+      line-height: 43px;
+      border-radius: 21px;
+      color: #3bb19c;
+      font-size: 13px;
+      box-shadow: 2px 2px 2px rgb(121 121 121 / 35%);
+    }
+  }
+   .type-title{
+          color: #666666;
+          line-height: 38px;
+          text-align:left ;
+          font-size: 14px;
+          padding-left: 17px;
+          background: white;
+          border-bottom: 1px solid rgba(242, 242, 242, 1);;
+      }
+      p{
+          margin: 0;
+          padding: 0;
+      }
+      .Appointment{
+          background: white;
+margin-bottom: 10px;
+          div{
+              padding: 20px 0px 20px 17px ;
+              p{
+                  font-size: 12px;
+                  color: #999;
+                  line-height: 32px;
+                  text-align: left;
+              }
+          }
+      }
+.Contactpeople{
+    p{
+         font-size: 12px;
+            line-height: 50px;
+            text-align: left;
+            padding-left: 17px;
+            background: white;
+             span{
+                width: 50px;
+                display: inline-block;
+            }
+            input{
+                
+                outline: none;
+                border: none;
+                background: transparent;
+            }
+            .beizhu-input{
+                width: 80%;
+
+            }
+    }
+    div{
+        background: white;
+        p{
+            font-size: 12px;
+            line-height: 50px;
+            border-top: 1px solid rgba(245, 245, 245, 1);
+            text-align: left;
+            padding-left: 17px;
+            span{
+                width: 50px;
+                display: inline-block;
+            }
+            input{
+                outline: none;
+                border: none;
+                background: transparent;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Index/Index.vue b/src/views/Index/Index.vue
index 2a8b3e7..30c71fd 100644
--- a/src/views/Index/Index.vue
+++ b/src/views/Index/Index.vue
@@ -49,7 +49,7 @@
     <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"  >
+                <li v-for="item in foodList" :key="item.foodName"  >
                 <!-- src要改成「:src="item.imgSrc"」 -->
                 <img src="../../assets/u9.png">
                 <div class="foodInfo">
-- 
Gitee