Skip to content

Commit 2844dcd

Browse files
bailicangdubailicangdu
committed
updata login
1 parent e90eca4 commit 2844dcd

File tree

6 files changed

+129
-23
lines changed

6 files changed

+129
-23
lines changed

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# 前言
22

3-
vue2的发布后自己也研究了一段时间，奈何公司的技术栈是以react为主，没有机会好好利用vue2去做一个完整的项目。虽然写了几个demo，但和写一个完整的项目还是有很大差别的。于是自己想着用空余的时间写一个项目，选择了饿了么也只是因为经常用，熟悉它的布局。之前的饿了么官网是用angular写的，最近才发现原来这段时间改成了vue1，看来饿了么也入了vue的坑。
3+
vue2的发布后自己也研究了一段时间，奈何公司的技术栈是以react为主，没有机会好好利用vue2去做一个完整的项目。虽然写了几个demo，但和写一个完整的项目还是有很大差别的。于是自己想着用空余的时间写一个项目，选择了饿了么也只是因为经常用，熟悉它的布局。之前的饿了么官网是用angular写的，最近才发现原来这段时间改成了vue，看来饿了么也入了vue的坑。
44

55
既然要写一个完整的项目，就要认真对待，所以除了付款其他所有功能都尽可能的实现，包括登陆、注册、个人中心、搜索、购物车、下单等等，也包括所有我能注意到的细节也都一并做出来，所以这绝对算是一个比较大的项目。
66

@@ -64,9 +64,9 @@ vue2 + vue-rotuer2 + vuex + webpack + ES6/7 + fetch + sass + flex + svg + http-p
6464
| |-- images // 公共图片
6565
|
6666
| |-- pages // 页面组件
67-
| |-- checkout // 确认订单页
6867
| |-- city // 当前城市页
69-
| |-- food // 特色餐馆列表页
68+
| |-- food // 食品筛选排序页
69+
| |-- confirmOrder // 确认订单页
7070
| |-- forget // 忘记密码，修改密码页
7171
| |-- home // 首页
7272
| |-- login // 登陆注册页

‎src/components/header/head.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
</section>
1414
<slot name="msite-title"></slot>
1515
<slot name="changecity"></slot>
16+
<slot name="changeLogin"></slot>
1617
</header>
1718
</template>
1819

‎src/page/confirmOrder/confirmOrder.vue‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<template>
2+
<div>
3+
<head-top head-title="确认订单" goBack="true"></head-top>
4+
<div class="confirmOrderContainer">确认订单页</div>
5+
</div>
6+
</template>
7+
8+
<script>
9+
import headTop from '../../components/header/head'
10+
11+
export default {
12+
data(){
13+
return {
14+
15+
}
16+
},
17+
components: {
18+
headTop,
19+
},
20+
}
21+
22+
</script>
23+
24+
<style lang="scss" scoped>
25+
@import '../../style/mixin.scss';
26+
27+
.confirmOrderContainer{
28+
padding-top: 1.95rem;
29+
}
30+
</style>

‎src/page/login/login.vue‎

Lines changed: 92 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,102 @@
11
<template>
2-
<ul>
3-
<router-link tag='li' to='home'>首页</router-link>
4-
<router-link tag='li' to='city'>城市页面</router-link>
5-
<router-link tag='li' to='msite'>商店列表</router-link>
6-
<router-link tag='li' to='shop'>商铺详情</router-link>
7-
<router-link tag='li' to='search'>搜索</router-link>
8-
<router-link tag='li' to='login'>登陆</router-link>
9-
<router-link tag='li' to='checkout'>确认订单</router-link>
10-
<router-link tag='li' to='forget'>忘记密码</router-link>
11-
<router-link tag='li' to='profile'>个人信息</router-link>
12-
<router-link tag='li' to='order'>订单列表</router-link>
13-
<router-link tag='li' to='vipcard'>会员卡</router-link>
14-
</ul>
2+
<div class="loginContainer">
3+
<head-top :head-title="loginWay? '登录':'密码登录'" goBack="true">
4+
<div slot="changeLogin" class="change_login" @click="changeLoginWay">{{loginWay? "密码登陆":"短信登陆"}}</div>
5+
</head-top>
6+
<form class="loginForm">
7+
<div class="input_container phone_number">
8+
<input type="text" placeholder="手机号">
9+
<button>获取验证码</button>
10+
</div>
11+
<div class="input_container">
12+
<input type="text" placeholder="验证码">
13+
</div>
14+
</form>
15+
<p class="login_tips">
16+
温馨提示：未注册饿了么账号的手机号，登陆时将自动注册，且代表您已同意
17+
<a href="https://h5.ele.me/service/agreement/">《用户服务协议》</a>
18+
</p>
19+
<div class="login_container">
20+
<button class="login_button">登陆</button>
21+
</div>
22+
</div>
1523
</template>
1624

1725
<script>
26+
import headTop from '../../components/header/head'
1827
19-
export default {
20-
21-
}
28+
export default {
29+
data(){
30+
return {
31+
loginWay: true,
32+
}
33+
},
34+
components: {
35+
headTop,
36+
},
37+
methods: {
38+
changeLoginWay(){
39+
this.loginWay = !this.loginWay;
40+
}
41+
}
42+
}
2243
2344
</script>
2445

2546
<style lang="scss" scoped>
26-
47+
@import '../../style/mixin.scss';
48+
49+
.loginContainer{
50+
padding-top: 1.95rem;
51+
}
52+
.change_login{
53+
position: absolute;
54+
@include ct;
55+
right: 0.75rem;
56+
@include sc(.7rem, #fff);
57+
}
58+
59+
.loginForm{
60+
background-color: #fff;
61+
margin-top: .6rem;
62+
.input_container{
63+
display: flex;
64+
justify-content: space-between;
65+
padding: .6rem .8rem;
66+
border-bottom: 1px solid #f1f1f1;
67+
input{
68+
@include sc(.7rem, #666);
69+
}
70+
button{
71+
@include sc(.65rem, #fff);
72+
padding: .3rem .4rem;
73+
border: 1px;
74+
border-radius: 0.15rem;
75+
}
76+
77+
}
78+
.phone_number{
79+
padding: .3rem .8rem;
80+
}
81+
}
82+
.login_tips{
83+
@include sc(.5rem, #999);
84+
padding: .4rem .6rem;
85+
line-height: .7rem;
86+
a{
87+
color: #3b95e9;
88+
}
89+
}
90+
.login_container{
91+
display: flex;
92+
margin: 0 .5rem;
93+
.login_button{
94+
flex: 1;
95+
@include sc(.7rem, #fff);
96+
background-color: #4cd964;
97+
padding: .5rem 0;
98+
border: 1px;
99+
border-radius: 0.15rem;
100+
}
101+
}
27102
</style>

‎src/page/shop/shop.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@
140140
</section>
141141
<section class="gotopay" :class="{gotopay_acitvity: minimumOrderAmount < 0}">
142142
<span class="gotopay_button_style" v-if="minimumOrderAmount > 0">还差¥{{minimumOrderAmount}}起送</span>
143-
<span class="gotopay_button_style" v-else >去结算</span>
143+
<router-link to="/confirmOrder" class="gotopay_button_style" v-else >去结算</router-link>
144144
</section>
145145
</section>
146146
<transition name="toggle-cart">

‎src/router/router.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ const shop = r => require.ensure([], () => r(require('../page/shop/shop')), 'sho
88
const login = r => require.ensure([], () => r(require('../page/login/login')), 'login')
99
const profile = r => require.ensure([], () => r(require('../page/profile/profile')), 'profile')
1010
const forget = r => require.ensure([], () => r(require('../page/forget/forget')), 'forget')
11-
const checkout = r => require.ensure([], () => r(require('../page/checkout/checkout')), 'checkout')
1211
const order = r => require.ensure([], () => r(require('../page/order/order')), 'order')
1312
const vipcard = r => require.ensure([], () => r(require('../page/vipcard/vipcard')), 'vipcard')
1413
const food = r => require.ensure([], () => r(require('../page/food/food')), 'food')
14+
const confirmOrder = r => require.ensure([], () => r(require('../page/confirmOrder/confirmOrder')), 'confirmOrder')
1515
const foodDetail = r => require.ensure([], () => r(require('../page/shop/children/foodDetail')), 'foodDetail')
1616
const shopDetail = r => require.ensure([], () => r(require('../page/shop/children/shopDetail')), 'shopDetail')
1717
const shopSafe = r => require.ensure([], () => r(require('../page/shop/children/shopSafe')), 'shopSafe')
@@ -45,10 +45,10 @@ export default [{
4545
}
4646
]
4747
}, //商铺详情页
48+
{ path: '/confirmOrder', component: confirmOrder }, //确认订单页
4849
{ path: '/login', component: login }, //登陆注册页
4950
{ path: '/profile', component: profile }, //个人信息页
5051
{ path: '/forget', component: forget }, //修改密码页
51-
{ path: '/checkout', component: checkout }, //确认订单页
5252
{ path: '/order', component: order }, //订单列表页
5353
{ path: '/vipcard', component: vipcard }, //vip卡页
5454
]

0 commit comments

Comments
 (0)