1

src/router/index.js

@@ -3,7 +3,9 @@ import VueRouter from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import Visitor from '../views/visitor/standby.vue'
 import Reserved from '../views/visitor/reserved.vue'
+import Disreserve from '../views/visitor/disreserve.vue'
 import Comment from '../views/common.vue'
+import Authentify from '../views/visitor/authentify.vue'
 
 Vue.use(VueRouter)
 
@@ -39,6 +41,23 @@ const routes = [
           title: "已预约",
         },
       },
+      {
+        path: "/disreserve",
+        name: "disreserve",
+        component: Disreserve,
+        meta: {
+          title: "未预约",
+        },
+      },
+
+      {
+        path: "/authentify",
+        name: "authentify",
+        component: Authentify,
+        meta: {
+          title: "实名认证",
+        },
+      },
     ]
   }
 ]

src/views/common.vue

@@ -22,10 +22,17 @@
             return {
                 title: ""
             }
+        }, watch: {
+            $route: {
+                // $route可以用引号，也可以不用引号  监听的对象
+                handler(to) {
+                    this.title = to.params.title
+                },
+            },
+
         },
         created() {
-            //获得路由传递过来的值
-            this.title = this.$route.params.title;
+
         },
 
         methods: {
@@ -36,7 +43,8 @@
 <style scoped>
     .wrapper {
         background: #F0F2F8;
-        height: 100%;
+        /* height: 1018px; */
+
         box-sizing: border-box;
     }
 

src/views/visitor/authentify.vue

+<template>
+    <div class="reserved">
+        <div class="content">
+            <div class="auth_top">
+                <div><el-button @click="toBack">返回上一步</el-button>
+                </div>
+                <div>您可通过刷身份证、粤居码任意一种进行实名认证</div>
+                <div class="content_time">118s</div>
+            </div>
+
+
+            <!-- <el-button type="primary" @click="toNext">下一步</el-button> -->
+        </div>
+    </div>
+    </div>
+</template>
+
+<script>
+
+    export default {
+        data() {
+            return {
+                type: 1,
+                phone: '',
+                vform: {},
+                options: [{
+                    value: '选项1',
+                    label: '黄金糕'
+                }, {
+                    value: '选项2',
+                    label: '双皮奶'
+                }, {
+                    value: '选项3',
+                    label: '蚵仔煎'
+                }, {
+                    value: '选项4',
+                    label: '龙须面'
+                }, {
+                    value: '选项5',
+                    label: '北京烤鸭'
+                }],
+            }
+        },
+
+        created() {
+            this.type = this.$route.params.type;
+        },
+        methods: {
+            toBack() {
+                this.$router.go(-1);
+            },
+            toNext() {
+                this.$router.push({ name: "authentify", params: { title: '实名认证', } });
+
+            },
+        }
+    }
+</script>
+<style scoped>
+    .reserved {
+
+        width: 100%;
+        padding: 36px;
+
+        height: calc(100vh - 70px);
+        box-sizing: border-box;
+
+    }
+
+    .content {
+        width: 100%;
+        background: #FFFFFF;
+        border-radius: 14px;
+        height: 100%;
+        padding: 30px;
+        box-sizing: border-box;
+
+    }
+
+    .auth_top {
+        width: 100%;
+        display: flex;
+        height: 50px;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .card_left_c {
+        width: 193px;
+        height: 193px;
+        background: #F4F4F4;
+        border-radius: 10px 10px 10px 10px;
+        opacity: 1;
+        margin: 14px 0 54px 156px;
+        text-align: center;
+    }
+
+    .card_item {
+        display: flex;
+        height: 46px;
+        margin-bottom: 30px;
+        margin-left: 20px;
+    }
+
+    .card_item_span {
+        line-height: 46px;
+        width: 120px;
+        color: #333333;
+
+        font-size: 20px;
+    }
+
+    .content_time {
+        width: 50px;
+        height: 50px;
+        background: #FFFFFF;
+        opacity: 1;
+        border: 3px solid #5A8FF6;
+        margin: 24px 0 26px auto;
+        border-radius: 50%;
+        text-align: center;
+        line-height: 50px;
+
+    }
+
+
+
+
+    ::v-deep .el-input__inner {
+        width: 360px;
+        height: 46px;
+        border: 1px solid #707070;
+        color: #333333;
+    }
+
+    ::v-deep .el-input {
+        width: 360px;
+        height: 78px;
+
+
+    }
+
+    ::v-deep .el-input__icon {
+        height: 46px;
+    }
+
+    .card_center {
+        width: 1px;
+        height: 548px;
+        background: #E0E0E0;
+        margin: 50px 43px 50px 85px;
+    }
+
+
+    .card_right {
+        width: 100%;
+    }
+
+    ::v-deep .card_right .el-button {
+        margin: auto 0 50px 0;
+    }
+</style>
\ No newline at end of file

src/views/visitor/disreserve.vue

+<template>
+    <div class="reserved">
+        <div class="content">
+            <div class="card_left">
+                <div style="margin-top: 30px;height: 34px;"><el-button v-show="this.type==0"
+                        @click="toBack">返回上一步</el-button></div>
+
+                <div class="card_left_c"><img src="@/assets/visitor/camera.png" alt=""
+                        style="width: 58.15px;height: 45.4px;margin:35%;">
+                </div>
+                <div class="card_item"><span class="card_item_span">姓名：</span>
+                    <el-input v-model="vform.name"></el-input>
+                </div>
+                <div class="card_item"><span class="card_item_span">手机号：</span>
+                    <el-input v-model="vform.name" placeholder="必填"></el-input>
+                </div>
+                <div class="card_item"><span class="card_item_span">身份证号：</span>
+                    <el-input v-model="vform.name"></el-input>
+                </div>
+                <div class="card_item"><span class="card_item_span">来访事由：</span>
+                    <el-select v-model="vform.name" width="360px">
+                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                        </el-option>
+                    </el-select>
+                </div>
+
+            </div>
+            <div class="card_center"></div>
+            <div class="card_right">
+                <div class="content_time">118s</div>
+                <div class="card_item"><span class="card_item_span">公司名称：</span>
+                    <el-input v-model="vform.name" placeholder="必填"></el-input>
+                </div>
+                <div class="card_item"><span class="card_item_span">到访人数：</span>
+                    <el-input v-model="vform.name" placeholder="必填"></el-input>
+                </div>
+                <el-button type="primary" @click="toNext">下一步</el-button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+    export default {
+        data() {
+            return {
+                type: 1,
+                phone: '',
+                vform: {},
+                options: [{
+                    value: '选项1',
+                    label: '黄金糕'
+                }, {
+                    value: '选项2',
+                    label: '双皮奶'
+                }, {
+                    value: '选项3',
+                    label: '蚵仔煎'
+                }, {
+                    value: '选项4',
+                    label: '龙须面'
+                }, {
+                    value: '选项5',
+                    label: '北京烤鸭'
+                }],
+            }
+        },
+
+        created() {
+            this.type = this.$route.params.type;
+        },
+        methods: {
+            toBack() {
+                this.$router.go(-1);
+            },
+            toNext() {
+                this.$router.push({ name: "authentify", params: { title: '实名认证', } });
+
+            },
+        }
+    }
+</script>
+<style scoped>
+    .reserved {
+
+        width: 100%;
+        padding: 36px;
+
+
+        box-sizing: border-box;
+
+    }
+
+    .content {
+        width: 100%;
+        background: #FFFFFF;
+        border-radius: 14px;
+        height: 880px;
+        padding: 0 30px;
+        box-sizing: border-box;
+        display: flex;
+
+    }
+
+
+    .card_left_c {
+        width: 193px;
+        height: 193px;
+        background: #F4F4F4;
+        border-radius: 10px 10px 10px 10px;
+        opacity: 1;
+        margin: 14px 0 54px 156px;
+        text-align: center;
+    }
+
+    .card_item {
+        display: flex;
+        height: 46px;
+        margin-bottom: 30px;
+        margin-left: 20px;
+    }
+
+    .card_item_span {
+        line-height: 46px;
+        width: 120px;
+        color: #333333;
+
+        font-size: 20px;
+    }
+
+    .content_time {
+        width: 50px;
+        height: 50px;
+        background: #FFFFFF;
+        opacity: 1;
+        border: 3px solid #5A8FF6;
+        margin: 24px 0 26px auto;
+        border-radius: 50%;
+        text-align: center;
+        line-height: 50px;
+
+    }
+
+
+
+
+    ::v-deep .el-input__inner {
+        width: 360px;
+        height: 46px;
+        border: 1px solid #707070;
+        color: #333333;
+    }
+
+    ::v-deep .el-input {
+        width: 360px;
+        height: 78px;
+
+
+    }
+
+    ::v-deep .el-input__icon {
+        height: 46px;
+    }
+
+    .card_center {
+        width: 1px;
+        height: 548px;
+        background: #E0E0E0;
+        margin: 50px 43px 50px 85px;
+    }
+
+
+    .card_right {
+        width: 100%;
+    }
+
+    ::v-deep .card_right .el-button {
+        margin: auto 0 50px 0;
+    }
+</style>
\ No newline at end of file

src/views/visitor/reserved.vue

@@ -7,19 +7,20 @@
 
 
                     <div class="card_tip">请输入预约手机号验证</div>
-                    <el-input value="phone"><template slot="prepend">
+                    <el-input :value="phone" disabled><template slot="prepend">
                             <div style="display: flex;align-items: center;">
                                 <span class="card_pre">+86</span>
                                 <div class="card_center"></div>
                             </div>
                         </template></el-input>
-                    <div>
-                        <el-button @click="Reserved">已预约</el-button>
-                        <el-button @click="">未预约</el-button>
+                    <div class="card_btn">
+                        <el-button @click="clickBtn(11)" type="info">重置</el-button>
+                        <el-button @click="comfirm" type="primary">确认</el-button>
                     </div>
                 </div>
                 <div class="card_right">
-                    <el-button v-for="item in numList" :key="item.value">{{item.label}}</el-button>
+                    <el-button v-for="item in numList" :key="item.value"
+                        @click="clickBtn(item.value)">{{item.label}}</el-button>
                 </div>
             </div>
 
@@ -33,6 +34,7 @@
     export default {
         data() {
             return {
+                phone: '',
                 numList: [{ label: '1', value: 1 }, { label: '2', value: 2 }, { label: '3', value: 3 }, { label: '4', value: 4 },
                 { label: '5', value: 5 }, { label: '6', value: 6 }, { label: '7', value: 7 },
                 { label: '8', value: 8 }, { label: '9', value: 9 }, { label: '退格', value: 10 },
@@ -41,10 +43,19 @@
             }
         },
         methods: {
-            Reserved() {
-                this.$router.replace({
-                    path: "/reserved",
-                });
+
+            clickBtn(val) {
+                val == 11 ? this.phone = '' : ''
+                if (this.phone.length > 10) return
+                val <= 9 ?
+                    this.phone = this.phone + val.toString() : '';
+
+                val == 10 && this.phone.length >= 1 ? this.phone = this.phone.substring(0, this.phone.length - 1) : '';
+
+
+            },
+            comfirm() {
+                this.$router.push({ name: "disreserve", params: { title: '访客信息', type: 0 } });
             }
         }
     }
@@ -55,7 +66,7 @@
         width: 100%;
         padding: 36px;
 
-        min-height: calc(100% - 70px);
+        height: 950px;
 
         box-sizing: border-box;
 
@@ -64,9 +75,10 @@
     .content {
         background: #FFFFFF;
         border-radius: 14px;
-        height: 100%;
+        height: 880px;
         padding-top: 24px;
         box-sizing: border-box;
+
     }
 
     .content_time {
@@ -76,6 +88,10 @@
         opacity: 1;
         border: 3px solid #5A8FF6;
         margin: 0 30px 0 auto;
+        border-radius: 50%;
+        text-align: center;
+        line-height: 50px;
+
     }
 
     .content_card {
@@ -109,9 +125,18 @@
     }
 
     ::v-deep .content_card .el-input-group__prepend {
-        background-color: none;
-        /* height: 78px; */
+        background-color: white;
+        border: 0;
         line-height: 70px;
+        border-radius: 50%;
+    }
+
+    ::v-deep .content_card .el-input.is-disabled .el-input__inner {
+        border-color: white;
+        background-color: white;
+        border-radius: 10%;
+        cursor: default;
+        color: #000000;
     }
 
     .card_pre {
@@ -127,6 +152,22 @@
         margin-left: 30px;
     }
 
+    ::v-deep .card_btn .el-button {
+        width: 208px;
+        height: 70px;
+        border-radius: 4px 4px 4px 4px;
+        margin-right: 40px;
+
+        font-size: 24px;
+    }
+
+    ::v-deep .card_btn .el-button--info {
+        color: #717171;
+
+        background: #DCDCDC;
+        border: 0;
+    }
+
     .card_right {
         width: 449px;
         height: 391px;
@@ -146,5 +187,8 @@
         opacity: 1;
         border: 1px solid #CBC7C7;
         margin: 0 25px 25px 0;
+        font-weight: bold;
+        color: #000000;
+        font-size: 36px;
     }
 </style>
\ No newline at end of file

src/views/visitor/standby.vue

@@ -16,8 +16,8 @@ font-size: 44px;">欢迎使用</div>
             <div style="color: #416CCC;
 font-size: 50px;">访客自助登记系统</div>
             <div>
-                <el-button @click="Reserved">已预约</el-button>
-                <el-button @click="">未预约</el-button>
+                <el-button @click="Reserved('reserved',0)">已预约</el-button>
+                <el-button @click="Reserved('disreserve',1)">未预约</el-button>
             </div>
         </div>
     </div>
@@ -39,8 +39,8 @@ font-size: 50px;">访客自助登记系统</div>
             this.getTime()
         },
         methods: {
-            Reserved() {
-                this.$router.push({ name: 'reserved', params: { title: '预约验证' } });
+            Reserved(name, type) {
+                this.$router.push({ name: name, params: { title: '访客信息', type: type } });
             },
             getTime() {
                 let nowDate = new Date();