updata login

README.md

 # 前言
 
-vue2的发布后自己也研究了一段时间，奈何公司的技术栈是以react为主，没有机会好好利用vue2去做一个完整的项目。虽然写了几个demo，但和写一个完整的项目还是有很大差别的。于是自己想着用空余的时间写一个项目，选择了饿了么也只是因为经常用，熟悉它的布局。之前的饿了么官网是用angular写的，最近才发现原来这段时间改成了vue1，看来饿了么也入了vue的坑。
+vue2的发布后自己也研究了一段时间，奈何公司的技术栈是以react为主，没有机会好好利用vue2去做一个完整的项目。虽然写了几个demo，但和写一个完整的项目还是有很大差别的。于是自己想着用空余的时间写一个项目，选择了饿了么也只是因为经常用，熟悉它的布局。之前的饿了么官网是用angular写的，最近才发现原来这段时间改成了vue，看来饿了么也入了vue的坑。
 
 既然要写一个完整的项目，就要认真对待，所以除了付款其他所有功能都尽可能的实现，包括登陆、注册、个人中心、搜索、购物车、下单等等，也包括所有我能注意到的细节也都一并做出来，所以这绝对算是一个比较大的项目。
 
@@ -64,9 +64,9 @@ vue2 + vue-rotuer2 + vuex + webpack + ES6/7 + fetch + sass + flex + svg + http-p
 |   |-- images                       // 公共图片
 |
 |   |-- pages                        // 页面组件
-|       |-- checkout                 // 确认订单页
 |       |-- city                     // 当前城市页
-|		|-- food                 	 // 特色餐馆列表页
+|		|-- food                 	 // 食品筛选排序页
+|		|-- confirmOrder             // 确认订单页
 |       |-- forget                   // 忘记密码，修改密码页
 |       |-- home                     // 首页
 |       |-- login                    // 登陆注册页

src/components/header/head.vue

@@ -13,6 +13,7 @@
         </section>
         <slot name="msite-title"></slot>
         <slot name="changecity"></slot>
+        <slot name="changeLogin"></slot>
     </header>
 </template>
 

src/page/confirmOrder/confirmOrder.vue

+<template>
+    <div>
+        <head-top head-title="确认订单" goBack="true"></head-top>
+        <div class="confirmOrderContainer">确认订单页</div>    
+    </div>
+</template>
+
+<script>
+    import headTop from '../../components/header/head'
+
+    export default {
+        data(){
+            return {
+
+            }
+        },
+        components: {
+            headTop,
+        },
+    }
+
+</script>
+
+<style lang="scss" scoped>
+    @import '../../style/mixin.scss';
+
+    .confirmOrderContainer{
+        padding-top: 1.95rem;
+    }
+</style>

src/page/login/login.vue

 <template>
-  	<ul>
-    	<router-link tag='li' to='home'>首页</router-link>
-    	<router-link tag='li' to='city'>城市页面</router-link>
-    	<router-link tag='li' to='msite'>商店列表</router-link>
-    	<router-link tag='li' to='shop'>商铺详情</router-link>
-    	<router-link tag='li' to='search'>搜索</router-link>
-    	<router-link tag='li' to='login'>登陆</router-link>
-    	<router-link tag='li' to='checkout'>确认订单</router-link>
-    	<router-link tag='li' to='forget'>忘记密码</router-link>
-    	<router-link tag='li' to='profile'>个人信息</router-link>
-    	<router-link tag='li' to='order'>订单列表</router-link>
-    	<router-link tag='li' to='vipcard'>会员卡</router-link>
-  	</ul>
+    <div class="loginContainer">
+        <head-top :head-title="loginWay? '登录':'密码登录'" goBack="true">
+            <div slot="changeLogin" class="change_login" @click="changeLoginWay">{{loginWay? "密码登陆":"短信登陆"}}</div>
+        </head-top>
+        <form class="loginForm">
+            <div class="input_container phone_number">
+                <input type="text" placeholder="手机号">
+                <button>获取验证码</button>
+            </div>
+            <div class="input_container">
+                <input type="text" placeholder="验证码">
+            </div>
+        </form>
+        <p class="login_tips">
+            温馨提示：未注册饿了么账号的手机号，登陆时将自动注册，且代表您已同意
+            <a href="https://h5.ele.me/service/agreement/">《用户服务协议》</a>
+        </p>
+        <div class="login_container">
+            <button class="login_button">登陆</button>  
+        </div>
+    </div>
 </template>
 
 <script>
+    import headTop from '../../components/header/head'
 
-export default {
-	
-}
+    export default {
+        data(){
+            return {
+                loginWay: true,
+            }
+        },
+        components: {
+            headTop,
+        },
+        methods: {
+            changeLoginWay(){
+                this.loginWay = !this.loginWay;
+            }
+        }
+    }
 
 </script>
 
 <style lang="scss" scoped>
-    
+    @import '../../style/mixin.scss';
+
+    .loginContainer{
+        padding-top: 1.95rem;
+    }
+    .change_login{
+        position: absolute;
+        @include ct;
+        right: 0.75rem;
+        @include sc(.7rem, #fff);
+    }
+
+    .loginForm{
+        background-color: #fff;
+        margin-top: .6rem;
+        .input_container{
+            display: flex;
+            justify-content: space-between;
+            padding: .6rem .8rem;
+            border-bottom: 1px solid #f1f1f1;
+            input{
+                @include sc(.7rem, #666);
+            }
+            button{
+                @include sc(.65rem, #fff);
+                padding: .3rem .4rem;
+                border: 1px;
+                border-radius: 0.15rem;
+            }
+            
+        }
+        .phone_number{
+            padding: .3rem .8rem;
+        }
+    }
+    .login_tips{
+        @include sc(.5rem, #999);
+        padding: .4rem .6rem;
+        line-height: .7rem;
+        a{
+            color: #3b95e9;
+        }
+    }
+    .login_container{
+        display: flex;
+        margin: 0 .5rem;
+        .login_button{
+            flex: 1;
+            @include sc(.7rem, #fff);
+            background-color: #4cd964;
+            padding: .5rem 0;
+            border: 1px;
+            border-radius: 0.15rem;
+        }
+    }
 </style>

src/page/shop/shop.vue

@@ -140,7 +140,7 @@
                         </section>
                         <section class="gotopay" :class="{gotopay_acitvity: minimumOrderAmount < 0}">
                             <span class="gotopay_button_style" v-if="minimumOrderAmount > 0">还差¥{{minimumOrderAmount}}起送</span>
-                            <span class="gotopay_button_style" v-else >去结算</span>
+                            <router-link to="/confirmOrder" class="gotopay_button_style" v-else >去结算</router-link>
                         </section>
                     </section>
                     <transition name="toggle-cart">

src/router/router.js

@@ -8,10 +8,10 @@ const shop = r => require.ensure([], () => r(require('../page/shop/shop')), 'sho
 const login = r => require.ensure([], () => r(require('../page/login/login')), 'login')
 const profile = r => require.ensure([], () => r(require('../page/profile/profile')), 'profile')
 const forget = r => require.ensure([], () => r(require('../page/forget/forget')), 'forget')
-const checkout = r => require.ensure([], () => r(require('../page/checkout/checkout')), 'checkout')
 const order = r => require.ensure([], () => r(require('../page/order/order')), 'order')
 const vipcard = r => require.ensure([], () => r(require('../page/vipcard/vipcard')), 'vipcard')
 const food = r => require.ensure([], () => r(require('../page/food/food')), 'food')
+const confirmOrder = r => require.ensure([], () => r(require('../page/confirmOrder/confirmOrder')), 'confirmOrder')
 const foodDetail = r => require.ensure([], () => r(require('../page/shop/children/foodDetail')), 'foodDetail')
 const shopDetail = r => require.ensure([], () => r(require('../page/shop/children/shopDetail')), 'shopDetail')
 const shopSafe = r => require.ensure([], () => r(require('../page/shop/children/shopSafe')), 'shopSafe')
@@ -45,10 +45,10 @@ export default [{
                 }
             ]
         },            //商铺详情页
+        { path: '/confirmOrder', component: confirmOrder },       //确认订单页
         { path: '/login', component: login },          //登陆注册页
         { path: '/profile', component: profile },      //个人信息页
         { path: '/forget', component: forget },        //修改密码页
-        { path: '/checkout', component: checkout },    //确认订单页
         { path: '/order', component: order },          //订单列表页
         { path: '/vipcard', component: vipcard },      //vip卡页  
     ]