Skip to content

V
vue-passport
提交 2f074c5b authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

feat: 新增注册模块

上级 c3946272
隐藏空白字符变更
内嵌 并排
正在显示 包含 212 行增加 和 61 行删除
CHANGELOG.md
浏览文件 @ 2f074c5b
# Changelog # Changelog
### 0.1.4(2020-01-06)
- 新增注册模块
### 0.1.2(2019-12-24) ### 0.1.2(2019-12-24)
- 初始化 - 初始化
examples/App.vue
浏览文件 @ 2f074c5b
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<el-button @click="logout">登出</el-button> <el-button @click="logout">登出</el-button>
<el-button @click="password">找回密码</el-button> <el-button @click="password">找回密码</el-button>
<el-button @click="checkLoginStatus">检测登录状态</el-button> <el-button @click="checkLoginStatus">检测登录状态</el-button>
<vue-login ref="passport" :options="options" @ready="onReady"></vue-login> <vue-passport ref="passport" :options="options" @ready="onReady"></vue-passport>
</div> </div>
</template> </template>
...@@ -17,7 +17,7 @@ export default { ...@@ -17,7 +17,7 @@ export default {
return { return {
options: { options: {
register: { register: {
url: '' data: { service: 'uwla.ezijing.com' }
}, },
login: { login: {
account: { account: {
......
examples/main.js
浏览文件 @ 2f074c5b
import Vue from 'vue' import Vue from 'vue'
import App from './App.vue' import App from './App.vue'
import VueLogin from '../src/index' import VuePassport from '../src/index'
Vue.use(VueLogin) Vue.use(VuePassport)
Vue.config.productionTip = false Vue.config.productionTip = false
......
package.json
浏览文件 @ 2f074c5b
{ {
"name": "@ezijing/vue-passport", "name": "@ezijing/vue-passport",
"version": "0.1.3", "version": "0.1.4",
"description": "基于Vue Element-UI的登录注册", "description": "基于Vue Element-UI的登录注册",
"main": "dist/vue-passport.umd.min.js", "main": "dist/vue-passport.umd.min.js",
"keywords": [ "keywords": [
......
src/Index.vue
浏览文件 @ 2f074c5b
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
@login="login" @login="login"
@register="register" @register="register"
@password="password" @password="password"
@success="dialogVisible = false" @complete="dialogVisible = false"
></components> ></components>
</el-dialog> </el-dialog>
</template> </template>
...@@ -31,8 +31,8 @@ export default { ...@@ -31,8 +31,8 @@ export default {
}, },
data() { data() {
return { return {
dialogVisible: false, dialogVisible: true,
openType: 1 openType: 0
} }
}, },
computed: { computed: {
...@@ -167,7 +167,16 @@ export default { ...@@ -167,7 +167,16 @@ export default {
.submit-button { .submit-button {
width: 100%; width: 100%;
display: block; display: block;
margin-bottom: 10px; }
}
.ezj-form-complete {
padding: 50px 40px 30px;
.ezj-title {
margin: 40px 0 60px;
}
.submit-button {
width: 100%;
display: block;
} }
} }
</style> </style>
\ No newline at end of file
src/Password.vue
浏览文件 @ 2f074c5b
<template> <template>
<div class="ezj-password"> <div class="ezj-password">
<div class="ezj-form"> <div class="ezj-form-complete" v-if="isComplete">
<h3 class="ezj-title">密码修改成功</h3>
<el-button type="primary" class="submit-button" @click="$emit('login')">点击登录</el-button>
</div>
<div class="ezj-form" v-else>
<h1 class="ezj-title">找回密码</h1> <h1 class="ezj-title">找回密码</h1>
<el-form ref="form" :model="ruleForm" :rules="rules"> <el-form ref="form" :model="ruleForm" :rules="rules">
<el-form-item prop="contact" :error="contactError"> <el-form-item prop="contact" :error="contactError">
<el-input v-model="ruleForm.contact" placeholder="请输入手机号"> <el-input v-model="ruleForm.contact" placeholder="请输入手机号码或邮箱">
<i slot="prefix" class="el-input__icon el-icon-mobile-phone"></i> <i slot="prefix" class="el-input__icon el-icon-mobile-phone"></i>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="code" :error="codeError"> <el-form-item prop="code" :error="codeError">
<el-input v-model="ruleForm.code" placeholder="请输入验证码"> <el-input v-model="ruleForm.code" placeholder="请输入4位验证码">
<i slot="prefix" class="el-input__icon el-icon-lock"></i> <i slot="prefix" class="el-input__icon el-icon-key"></i>
<template slot="append"> <template slot="append">
<countdown-button @click.native="handleSendCode" ref="countdown"></countdown-button> <countdown-button @click.native="handleSendCode" ref="countdown"></countdown-button>
</template> </template>
...@@ -26,11 +30,13 @@ ...@@ -26,11 +30,13 @@
<i slot="prefix" class="el-input__icon el-icon-lock"></i> <i slot="prefix" class="el-input__icon el-icon-lock"></i>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-button type="primary" class="submit-button" @click="handleResetPassword">找回密码</el-button> <el-form-item>
<p> <el-button type="primary" class="submit-button" @click="handleResetPassword">找回密码</el-button>
<el-button type="text" @click="$emit('login')">返回登录</el-button> </el-form-item>
</p>
</el-form> </el-form>
<p>
<el-button type="text" @click="$emit('login')">返回登录</el-button>
</p>
</div> </div>
</div> </div>
</template> </template>
...@@ -70,8 +76,10 @@ export default { ...@@ -70,8 +76,10 @@ export default {
codeError: '', codeError: '',
passwordError: '', passwordError: '',
rules: { rules: {
contact: [{ required: true, message: '请输入手机号', trigger: 'blur' }], contact: [
code: [{ required: true, message: '请输入验证码', trigger: 'blur' }], { required: true, message: '请输入手机号码或邮箱', trigger: 'blur' }
],
code: [{ required: true, message: '请输入4位验证码', trigger: 'blur' }],
new_password: [ new_password: [
{ required: true, message: '请输入密码', trigger: 'blur' } { required: true, message: '请输入密码', trigger: 'blur' }
], ],
...@@ -79,7 +87,8 @@ export default { ...@@ -79,7 +87,8 @@ export default {
{ required: true, message: '请再次输入密码', trigger: 'blur' }, { required: true, message: '请再次输入密码', trigger: 'blur' },
{ validator: validatePass, trigger: 'blur' } { validator: validatePass, trigger: 'blur' }
] ]
} },
isComplete: false
} }
}, },
computed: { computed: {
...@@ -136,8 +145,8 @@ export default { ...@@ -136,8 +145,8 @@ export default {
headers: this.headers headers: this.headers
}) })
.then(response => { .then(response => {
this.isComplete = true
this.onSuccess && this.onSuccess(response.data) this.onSuccess && this.onSuccess(response.data)
this.$emit('success', response.data)
}) })
.catch(error => { .catch(error => {
error.response && this.handleError(error.response.data) error.response && this.handleError(error.response.data)
......
src/Register.vue
浏览文件 @ 2f074c5b
<template> <template>
<div class="ezj-register"> <div class="ezj-register">
<div class="ezj-form"> <div class="ezj-form-complete" v-if="isComplete">
<h3 class="ezj-title">账号注册成功</h3>
<el-button type="primary" class="submit-button" @click="$emit('login')">点击登录</el-button>
</div>
<div class="ezj-form" v-else>
<h1 class="ezj-title">账号注册</h1> <h1 class="ezj-title">账号注册</h1>
<el-form ref="form" :model="form"> <el-form ref="form" :model="ruleForm" :rules="rules">
<el-form-item> <el-form-item prop="contact" :error="contactError">
<el-input v-model="ruleForm.contact" placeholder="请输入手机号码或邮箱">
<i slot="prefix" class="el-input__icon el-icon-user"></i>
</el-input>
</el-form-item>
<el-form-item prop="code" :error="codeError">
<el-input v-model="ruleForm.code" placeholder="请输入4位验证码">
<i slot="prefix" class="el-input__icon el-icon-key"></i>
<template slot="append">
<countdown-button @click.native="handleSendCode" ref="countdown"></countdown-button>
</template>
</el-input>
</el-form-item>
<el-form-item prop="nickname">
<el-input <el-input
v-model="form.account" v-model="ruleForm.nickname"
placeholder="2-30个字符，支持中英文、数字" placeholder="4-30个字符，支持中英文、数字"
minlength="2" minlength="4"
maxlength="30" maxlength="30"
> >
<i slot="prefix" class="input-prefix">昵称</i> <i slot="prefix" class="el-input__icon el-icon-edit"></i>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item prop="password">
<el-input <el-input
type="password" type="password"
v-model="form.password" v-model="ruleForm.password"
placeholder="6-20个字符，只能数字、字母、标点符号" placeholder="6-20个字符，只能数字、字母、标点符号"
minlength="6" minlength="6"
maxlength="20" maxlength="20"
> >
<i slot="prefix" class="input-prefix">密码</i> <i slot="prefix" class="el-input__icon el-icon-lock"></i>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="secret">
<el-checkbox v-model="ruleForm.secret">同意</el-checkbox>
<el-button type="text" @click="dialogVisible = true">《隐私安全》</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" class="submit-button" @click="handleRegister">注册</el-button>
</el-form-item>
</el-form> </el-form>
<el-button type="primary" class="submit-button">注册</el-button>
<p> <p>
已有账号？ 已有账号？
<el-button type="text" @click="$emit('login')">去登录</el-button> <el-button type="text" @click="$emit('login')">去登录</el-button>
</p> </p>
</div> </div>
<el-dialog title="隐私协议" :visible.sync="dialogVisible" append-to-body>
<argument></argument>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import axios from '@/utils/axios'
import CountdownButton from '@/components/CountdownButton'
import Argument from '@/components/Argument'
export default { export default {
name: 'ezj-register', name: 'ezj-register',
props: {}, components: { CountdownButton, Argument },
props: {
url: String,
codeUrl: String,
headers: Object,
data: Object,
beforeLogin: Function,
onSuccess: Function,
onError: Function
},
data() { data() {
const checkSecret = (rule, value, callback) => {
if (value) {
callback()
} else {
callback(new Error('请阅读并同意《隐私安全》'))
}
}
return { return {
form: {} dialogVisible: false,
ruleForm: {
contact: '',
code: '',
nickname: '',
password: '',
secret: 0
},
contactError: '',
codeError: '',
rules: {
contact: [
{ required: true, message: '请输入邮箱或用户名', trigger: 'blur' }
],
code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
nickname: [
{ required: true, message: '请输入用户昵称', trigger: 'blur' }
],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
secret: [{ validator: checkSecret, trigger: 'change' }]
},
isComplete: false
}
},
computed: {
form() {
return this.$refs['form']
}
},
methods: {
// 提交
handleRegister() {
this.contactError = ''
this.codeError = ''
this.form.validate().then(() => {
this.handleRegisterRequest()
})
},
// 发送验证码
handleSendCode() {
this.contactError = ''
this.form.validateField('contact', response => {
if (!response) {
// 开始倒计时
this.$refs['countdown'].start()
this.handleCodeRequest()
}
})
},
// 验证码
handleCodeRequest() {
axios
.post(
this.codeUrl,
Object.assign(
{},
{ contact: this.ruleForm.contact, source_type: 2 },
this.data
),
{ headers: this.headers }
)
.then(() => {
this.$message({ type: 'success', message: '验证码发送成功' })
})
.catch(error => {
// 停止计时
this.$refs['countdown'].stop()
error.response && this.handleError(error.response.data)
})
},
// 注册
handleRegisterRequest() {
let data = Object.assign({}, this.ruleForm, this.data)
axios
.post(this.url, data, {
headers: this.headers
})
.then(response => {
this.isComplete = true
this.onSuccess && this.onSuccess(response.data)
})
.catch(error => {
error.response && this.handleError(error.response.data)
})
},
// 错误处理
handleError(data) {
const { code, message } = data
if (code === 80103 || code === 80105 || code === 80106) {
this.contactError = message
}
if (code === 80110) {
this.codeError = message
}
this.onError && this.onError(data)
this.$emit('error', data)
} }
} }
} }
</script> </script>
<style lang="scss">
.ezj-register {
.el-input--prefix .el-input__inner {
padding-left: 40px;
}
.input-prefix {
font-style: normal;
}
.submit-button {
width: 100%;
display: block;
margin-bottom: 10px;
}
}
</style>
\ No newline at end of file
src/assets/props.js
浏览文件 @ 2f074c5b
export const register = { export const register = {
url: '' url: '/api/user_center/register',
codeUrl: '/api/user_center/send_register_code',
data: { service: 'sofia.ezijing.com' }
} }
export const login = { export const login = {
......
src/components/AccountLogin.vue
浏览文件 @ 2f074c5b
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<el-form ref="form" :model="ruleForm" :rules="rules"> <el-form ref="form" :model="ruleForm" :rules="rules">
<el-form-item prop="login_name" :error="nameError"> <el-form-item prop="login_name" :error="nameError">
<el-input v-model="ruleForm.login_name" placeholder="请输入邮箱或用户名"> <el-input v-model="ruleForm.login_name" placeholder="请输入邮箱或用户名">
<i slot="prefix" class="el-input__icon el-icon-mobile-phone"></i> <i slot="prefix" class="el-input__icon el-icon-user"></i>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password" :error="passwordError"> <el-form-item prop="password" :error="passwordError">
...@@ -17,7 +17,9 @@ ...@@ -17,7 +17,9 @@
</el-input> </el-input>
<p class="forget_password" @click="$emit('password')">忘记密码？</p> <p class="forget_password" @click="$emit('password')">忘记密码？</p>
</el-form-item> </el-form-item>
<el-button type="primary" class="submit-button" @click="handleLogin">登录</el-button> <el-form-item>
<el-button type="primary" class="submit-button" @click="handleLogin">登录</el-button>
</el-form-item>
</el-form> </el-form>
</div> </div>
</template> </template>
...@@ -82,7 +84,7 @@ export default { ...@@ -82,7 +84,7 @@ export default {
}) })
.then(response => { .then(response => {
this.onSuccess && this.onSuccess(response.data) this.onSuccess && this.onSuccess(response.data)
this.$emit('success', response.data) this.$emit('complete', response.data)
}) })
.catch(error => { .catch(error => {
error.response && this.handleError(error.response.data) error.response && this.handleError(error.response.data)
...@@ -112,6 +114,6 @@ export default { ...@@ -112,6 +114,6 @@ export default {
cursor: pointer; cursor: pointer;
} }
.account-login .submit-button { .account-login .submit-button {
margin-top: 42px; margin-top: 12px;
} }
</style> </style>
\ No newline at end of file
src/components/PhoneLogin.vue
浏览文件 @ 2f074c5b
...@@ -7,8 +7,8 @@ ...@@ -7,8 +7,8 @@
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="code" :error="codeError"> <el-form-item prop="code" :error="codeError">
<el-input v-model="ruleForm.code" placeholder="请输入验证码"> <el-input v-model="ruleForm.code" placeholder="请输入4位验证码">
<i slot="prefix" class="el-input__icon el-icon-lock"></i> <i slot="prefix" class="el-input__icon el-icon-key"></i>
<template slot="append"> <template slot="append">
<countdown-button @click.native="handleSendCode" ref="countdown"></countdown-button> <countdown-button @click.native="handleSendCode" ref="countdown"></countdown-button>
</template> </template>
...@@ -47,7 +47,7 @@ export default { ...@@ -47,7 +47,7 @@ export default {
codeError: '', codeError: '',
rules: { rules: {
mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }], mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
code: [{ required: true, message: '请输入验证码', trigger: 'blur' }] code: [{ required: true, message: '请输入4位验证码', trigger: 'blur' }]
} }
} }
}, },
...@@ -101,7 +101,7 @@ export default { ...@@ -101,7 +101,7 @@ export default {
}) })
.then(response => { .then(response => {
this.onSuccess && this.onSuccess(response.data) this.onSuccess && this.onSuccess(response.data)
this.$emit('success', response.data) this.$emit('complete', response.data)
}) })
.catch(error => { .catch(error => {
error.response && this.handleError(error.response.data) error.response && this.handleError(error.response.data)
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论