【温馨提示】:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。
【项目地址】
项目采用Git进行管理,最终项目将会发布到GitHub中,感兴趣的小伙伴们可以一起学习,共同完善本项目。
项目地址:GitHub
第十一节: 注册登录及验证码功能
功能分析
在app中要实现注册及登录功能,首先思考一个问题,是在什么时候需要登录呢?使用过抖音app的都知道,在我们操作朋友、消息、我的等功能页面时,是需要登录验证的。那么我们怎么实现呢?
功能实现步骤:
1.注册、登录、验证码页面布局实现
2.绑定相关功能的登录验证
功能实现
注册页面布局及按钮动态样式
1.结构
2.页面布局及样式,代码如下:
<template>
<div class="sign">
<div class="sign-header">
<span class="iconfont icon-guanbi" style="font-size: 20px" @click="back"></span>
<span style="color: #686868 font-size: 15px"> 帮助</span>
</div>
<div class="sign-content">
<div class="des">
<h2>登录后可展示自己</h2>
<p> 登录后表明同意<a href="">抖音协议</a>和<a>隐私协议</a></p>
</div>
<div class="sign-box">
<div class="sele">
<select class="sele-controll" v-model="telErea">
<option value="">+86</option>
</select>
</div>
<div class="inp">
<input v-model="phone" @input="changeTel" type="tel" class="inp-controll"
placeholder="请输入手机号码">
</div>
</div>
<div class="not-sign">
<p>未注册手机号通过验证后将自动登录</p>
</div>
<div class="code-btn">
<button :disabled="disabled" :class="[btnBg? 'active':'']" @click="getCode">获取短信验证码</button>
</div>
<div class="other">
<router-link href="" tag="a" to="/tpsign">密码登录</router-link>
<span @click="show">其他方式登录</span>
</div>
</div>
<!-- <transition name="up">-->
<div class="mask" v-if="showMask" @click="close">
<div class="oauth">
<ul>
<li class="oauth-item">今日头条登录</li>
<li class="oauth-item">QQ登录</li>
<li class="oauth-item">微信登录</li>
<li class="oauth-item">微博登录</li>
<li class="oauth-item" @click="close">取消</li>
</ul>
</div>
</div>
<!-- </transition>-->
</div>
</template>
<style lang="less" scoped>
.sign {
padding: 30px;
background-color: #fff;
.sign-header {
display: flex;
justify-content: space-between;
}
.sign-content {
padding: 40px 10px;
.des{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 60px 0;
}
}
h2 {
margin: 0;