4 changed files with 0 additions and 143 deletions
@ -1,129 +0,0 @@ |
|||
<template> |
|||
<div class="main"> |
|||
<div class="title"> |
|||
<a href="/login">登录</a> |
|||
<span>·</span> |
|||
<a class="active" href="/register">注册</a> |
|||
</div> |
|||
|
|||
<div class="sign-up-container"> |
|||
<form action="register"> |
|||
<div class="input-prepend restyle"> |
|||
<input |
|||
v-model="member.nickname" |
|||
type="text" |
|||
placeholder="你的昵称"> |
|||
<i class="iconfont icon-user"/> |
|||
</div> |
|||
<div class="input-prepend restyle no-radius"> |
|||
<input |
|||
v-model="member.mobile" |
|||
type="text" |
|||
placeholder="手机号"> |
|||
<i class="iconfont icon-phone"/> |
|||
</div> |
|||
<div class="input-prepend restyle no-radius" style="position:relative"> |
|||
<input |
|||
v-model="member.code" |
|||
type="text" |
|||
placeholder="验证码"> |
|||
<i class="iconfont icon-yanzhengma"/> |
|||
<a |
|||
href="javascript:" |
|||
type="button" |
|||
style="position:absolute;right: 10px;top: 15px;" |
|||
@click="getCodeFun()">{{ codeText }}</a> |
|||
</div> |
|||
<div class="input-prepend"> |
|||
<input |
|||
v-model="member.password" |
|||
type="password" |
|||
placeholder="设置密码"> |
|||
<i class="iconfont icon-password"/> |
|||
</div> |
|||
<div class="btn"> |
|||
<input |
|||
type="button" |
|||
class="sign-up-button" |
|||
value="注册" |
|||
@click="submitRegister()"> |
|||
</div> |
|||
<p class="sign-up-msg"> |
|||
点击 “注册” 即表示您同意并愿意遵守简书 |
|||
<br> |
|||
<a target="_blank" href="http://www.jianshu.com/p/c44d171298ce">用户协议</a> |
|||
和 |
|||
<a target="_blank" href="http://www.jianshu.com/p/2ov8x3">隐私政策</a> 。 |
|||
</p> |
|||
</form> |
|||
<!-- 更多注册方式 --> |
|||
<div class="more-sign"> |
|||
<h6>社交帐号直接注册</h6> |
|||
<ul> |
|||
<li><a id="weixin" class="weixin" href="http://localhost:8160/api/ucenter/wx/login"><i class="iconfont icon-weixin"/></a></li> |
|||
<li><a id="qq" class="qq" target="_blank" href="#"><i class="iconfont icon-qq"/></a></li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import '~/assets/css/sign.css' |
|||
import '~/assets/css/iconfont.css' |
|||
import registerApi from '~/api/register' |
|||
|
|||
export default { |
|||
layout: 'sign', |
|||
data() { |
|||
return { |
|||
member: { |
|||
mobile: '', |
|||
code: '', |
|||
nickname: '', |
|||
password: '' |
|||
}, |
|||
sending: false, // 是否发送验证码 |
|||
second: 30, // 倒计时间 |
|||
codeText: '获取验证码' |
|||
} |
|||
}, |
|||
methods: { |
|||
// 获取验证码 |
|||
getCodeFun() { |
|||
if (this.sending) return |
|||
this.sending = true// 用户已点击 |
|||
registerApi.sendMessage(this.member.mobile).then(response => { |
|||
// 倒计时 |
|||
this.timeDown() |
|||
// 提示用户发送成功 |
|||
this.$message.success(response.message) |
|||
}) |
|||
}, |
|||
|
|||
// 倒计时 |
|||
timeDown() { |
|||
this.codeText = this.second |
|||
// 定义计数器 |
|||
const timer = setInterval(() => { |
|||
this.codeText-- |
|||
if (this.codeText < 1) { |
|||
clearInterval(timer) |
|||
this.codeText = '获取验证码' |
|||
this.sending = false |
|||
// this.second = 30 |
|||
} |
|||
}, 1000) |
|||
}, |
|||
|
|||
// 注册 |
|||
submitRegister() { |
|||
registerApi.register(this.member).then(response => { |
|||
// 提示注成功 |
|||
this.$message.success(response.message) |
|||
this.$router.push({ path: 'login' }) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue