Skip to content

html / poolin_app

Go to a project
Commit 9a56b1d0 by jingjie
Options

jingjie

parent cfc04940
Showing with 493 additions and 103 deletions
src/assets/less/style2.less
......@@ -236,3 +236,34 @@
}
}
}
.captcha-content{.clearfix;
.el-form-item{
.fl;width:60%;
}
.captcha{
.fr;width:40%;height:0.9rem;
img{width:100%;height:100%;}
}
}
.el-form-item {
margin-bottom: 15px;
}
.error-tip{
color: #f56c6c;
font-size: 12px;
line-height: 1;
}
src/components/common/captcha.vue
<template>
<div>
<input v-model="captcha_input" name="captcha"/>
<img :src="captchaUrl">
</div>
<div class="captcha-content">
<!--<el-form-item prop="captcha" :rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]">-->
<el-form-item prop="captcha">
<el-input v-model="captchaComputed" name="captcha" placeholder="输入验证码"></el-input>
</el-form-item>
<a class="captcha">
<img :src="captchaUrl" @click="newCaptcha">
</a>
</div>
</template>
<script>
import config from '@/config'
console.log(config)
export default {
// beforeMount () {
// const captcha_img =;
// this.captchaUrl = captcha_img ;
// },
data(){
return {
captcha_input:'',
captchaUrl: 'http://ucdev1212.blockin.com/captcha?' + new Date().getTime()
}
export default {
props:['errTipMsg'],
data(){
return {
captcha:'',
captchaUrl: 'https://ucdev1212.blockin.com/captcha?' + new Date().getTime()
}
},
computed: {
captchaComputed: {
get () {
return this.captcha
},
methods:{
newCaptcha:function () {
}
set (captcha) {
this.$emit('dispatchCaptcha', captcha);
}
}
},
methods:{
newCaptcha:function () {
this.captchaUrl = 'https://ucdev1212.blockin.com/captcha?' + new Date().getTime()
},
}
</script>
\ No newline at end of file
}
</script>
src/components/reg/index.vue
......@@ -10,65 +10,197 @@
<h2 class="f-tac c-blue2 fs36 pt80 pb60">使用邮箱地址注册</h2>
<div class="form-content">
<el-form :model="regForm" ref="regForm" label-width="0px">
<el-form-item prop="email" label="" :rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }]">
<!--<el-form-item prop="email" label="" :rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }]">-->
<el-form-item prop="email" label="">
<el-input v-model="regForm.email" placeholder="输入邮箱"><i slot="prefix" class="iconfont icon-email"></i></el-input>
</el-form-item>
<captcha>
</captcha>
<captcha v-show="showEmailCaptcha" :captcha="regForm.captcha" ref="captchaEmail" @dispatchCaptcha="getCaptchaValue"></captcha>
<div class="error-tip" v-show="errTipMsg != ''">{{errTipMsg}}</div>
<el-form-item>
<div class="btn-group full mt100">
<el-button type="primary" round @click="submitForm('regForm')">提交</el-button>
<!--<el-button type="primary" round @click="submitForm('regForm')">提交</el-button>-->
<el-button type="primary" round @click="goStep2">提交</el-button>
</div>
<div class="f-tac">
<router-link to="" class="c-blue1">使用手机号注册>></router-link>
</div>
<!-- <div class="f-tac">
<router-link to="" class="c-blue1">使用手机号注册>></router-link>
</div> -->
</el-form-item>
</el-form>
</div>
</div>
<div v-if="step===2">123123</div>
<div v-if="step===2" class="pt80">
<div class="form-content">
<el-form :model="regForm" ref="regForm" label-width="0px">
<el-form-item prop="password" label="">
<el-input type="password" v-model="regForm.password" placeholder="请输入不少于8位的密码"></el-input>
</el-form-item>
<el-form-item prop="passwordAgain" label="">
<el-input type="password" v-model="regForm.passwordAgain" placeholder="确认密码"></el-input>
</el-form-item>
</el-form>
<div class="button-wrap">
<div class="error-tip" v-show="errTipMsg != ''">{{errTipMsg}}</div>
<div class="btn-group full mt100">
<el-button type="primary" round @click="goEnd">提交</el-button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import captcha from '@/components/common/captcha'
export default {
name: 'rega',
data() {
return {
regForm: {
email: ''
},
step: 1
}
},
import captcha from '@/components/common/captcha';
import config from '@/config';
import axios from 'axios';
import { apiErrMap, isEmailAddress, isVerifyCode } from '@/plugins/helpers';
export default {
name: 'rega',
data() {
return {
regForm: {
email: '',
captcha:'',
password: '',
passwordAgain: ''
},
showLoading: false,
showEmailCaptcha: false,
step: 1,
errTipMsg: '',
}
},
components:{
captcha,
captcha,
},
mounted() {
mounted() {
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$router.replace('/jump')
} else {
console.log('error submit!!');
return false;
}
});
},
goBack() {
this.$router.go(-1)
methods: {
// submitForm(formName) {
// this.$refs[formName].validate((valid) => {
// // console.log(this.$refs[formname]);
// if (valid) {
// this.$router.replace('/jump')
// } else {
// console.log('error submit!!');
// return false;
// }
// });
// },
getCaptchaValue (captcha) {
this.regForm.captcha = captcha;
},
async goStep2 (){
if ( ! isEmailAddress(this.regForm.email) ) {
this.showErrorTip(-1, '请输入正确的邮箱地址');
return;
}
if ( this.showEmailCaptcha && ! isVerifyCode(this.regForm.captcha) ) {
this.showErrorTip(-1, '请输入正确的验证码');
return;
}
this.errTipMsg = '';
this.showLoading = false;
var start = config.get_api('post-register-email-start');
console.log(start);
const { data:accountResponse } = await axios
.post(start, {
captcha: this.regForm.captcha,
email: this.regForm.email
});
// 错误id提示
if (accountResponse.err_no) {
// 邮箱注册 图形验证码一直激活
if (accountResponse.err_no == 1000 && !this.showEmailCaptcha) {
this.showErrorTip(-1, '');
this.showEmailCaptcha = true;
this.regForm.password = '';
this.regForm.passwordAgain = '';
// this.$refs.email.focusCaptchaInput();
return;
}
this.showErrorTip(accountResponse.err_no, accountResponse.err_msg);
return;
}
this.showLoading = false;
this.step = 2;
this.errTipMsg = '';
// setTimeout( () => {
// this.$refs.step2Focus.focus();
// }, 100);
// if(accountResponse.err_no==0){
// console.log('success')
// console.log((accountResponse))
//
// }else {
// console.log('error')
// console.log((accountResponse))
// }
},
async goEnd () {
if ( this.regForm.password == '' ) {
this.showErrorTip(-1, '请输入密码');
return;
}
if ( this.regForm.password.length < 8 ) {
this.showErrorTip(-1, '请输入不少于8位的密码');
return
}
if ( this.regForm.password.length > 256 ) {
this.showErrorTip(-1, '密码长度请小于256位');
return
}
if ( this.regForm.password != this.regForm.passwordAgain ) {
this.showErrorTip(-1, '两次输入的密码不一致');
return;
}
this.showLoading = true;
this.errTipMsg = '';
// 根据用户信息创建密码
var setPwd = config.get_api('post-register-email-password');
const { data:passwordResponse } = await axios
.post(setPwd, {
timezone: -1 * (new Date().getTimezoneOffset()),
password: this.regForm.password
});
// 登录失败
if (passwordResponse.err_no) {
this.showErrorTip(passwordResponse.err_no, passwordResponse.err_msg);
return;
}
// 获取用户信息，直接登录
const userinfo = await this.$store.dispatch("Auth/fetchUser");
this.showLoading = false;
this.errTipMsg = '';
// 跳转用户中心
this.$router.push({
name: 'jump'
});
},
showErrorTip (errNo, errMsg) {
this.showLoading = false;
this.errTipMsg = apiErrMap(errNo, errMsg).errMsg;
},
goBack() {
this.$router.go(-1)
},
goLogin() {
this.$router.replace("/login")
}
},
goLogin() {
this.$router.replace("/login")
}
},
}
}
</script>
<style>
......
src/config/index.js
const api ={
api: {
// 邮箱注册api
'post-register-email-start': '/register/email/start',
'post-register-email-verify-code': '/register/email/verify-code',
'post-register-email-password': '/register/email/password',
// 手机注册api
'post-register-mobile-start': '/register/mobile/start',
'post-register-mobile-verify-code': '/register/mobile/verify-code',
'post-register-mobile-password': '/register/mobile/password',
// 登录
'post-login-start': '/login/start',
'post-login-mobile': '/login/start/mobile',
'post-login-password': '/login/password',
'post-login-totp': '/login/totp',
'post-login-code': '/login/code',
// 重置密码
'post-reset-start': '/reset/start',
'post-reset-send-code': '/reset/send-code',
'post-reset-verify': '/reset/verify',
'post-reset-password': '/reset/password',
// 登出
'get-logout-do': '/logout/do',
// 获取用户信息
'get-userinfo': '/userinfo',
'get-captcha' : '/captcha'
}
api: {
// 邮箱注册api
'post-register-email-start': '/register/email/start',
'post-register-email-verify-code': '/register/email/verify-code',
'post-register-email-password': '/register/email/password',
// 手机注册api
'post-register-mobile-start': '/register/mobile/start',
'post-register-mobile-verify-code': '/register/mobile/verify-code',
'post-register-mobile-password': '/register/mobile/password',
// 登录
'post-login-start': '/login/start',
'post-login-mobile': '/login/start/mobile',
'post-login-password': '/login/password',
'post-login-totp': '/login/totp',
'post-login-code': '/login/code',
// 重置密码
'post-reset-start': '/reset/start',
'post-reset-send-code': '/reset/send-code',
'post-reset-verify': '/reset/verify',
'post-reset-password': '/reset/password',
// 登出
'get-logout-do': '/logout/do',
// 获取用户信息
'get-userinfo': '/userinfo',
'get-captcha' : '/captcha'
}
}
const config = {
base:{
domain:'https://management.poolin.com',
},
get_api:function (key) {
// domain=window.config.baseUrl
var apiPrefix='/auth/api'
return this.base.domain + apiPrefix + api.api[key]
}
base:{
// domain:'https://management.poolin.com',
domain:'https://ucdev1212.blockin.com'
},
get_api:function (key) {
// domain=window.config.baseUrl
var apiPrefix='/auth/api'
return this.base.domain + apiPrefix + api.api[key]
}
}
export default config;
src/plugins/axios.js 0 → 100644
import axios from 'axios'
import store from '~/store'
import router from '~/router'
// import swal from 'sweetalert2'
axios.interceptors.request.use(request => {
const token = store.getters['Auth/token']
if (token) {
request.headers.common['Authorization'] = `Bearer ${token}`
}
// request.headers['X-Socket-Id'] = Echo.socketId()
return request
})
axios.interceptors.response.use(response => response, error => {
const {
status
} = error.response
if (status >= 500) {
// swal({
// type: 'error',
// title: swal.i18n.t('error_alert_title'),
// text: swal.i18n.t('error_alert_text')
// })
}
if (status === 401 && store.getters['Auth/check']) {
// swal({
// type: 'warning',
// title: swal.i18n.t('token_expired_alert_title'),
// text: swal.i18n.t('token_expired_alert_text')
// })
// .then(async() => {
// await store.dispatch('Auth/logout')
// router.push({
// name: 'login'
// })
// })
}
return Promise.reject(error)
})
\ No newline at end of file
src/plugins/helpers.js 0 → 100644
import axios from 'axios';
import conf from './../config';
let helpers = {};
const domainUrl = conf.domain_url;
export const getBus = (apiName, params, apiParams = {}) => {
let url = conf.api[apiName];
if ( ! url ) { // 如果取不到
throw new Error('get DataBus not match url');
}
for (let _key in apiParams) {
let value = apiParams[_key];
let regArr = ['\{', _key, '\}'];
// let regExp = new RegExp(regArr.join(''), 'igm');
let regExp = new RegExp('\{'+_key+'\}', 'igm');
url = url.replace(regExp, value);
}
// 获取token
let access_token = localStorage.getItem('access_token');
return new Promise((resolve, reject) => {
axios.get(domainUrl+url, {
params: params,
headers: {
// Authorization: 'Bearer ' + access_token
}
// withCredentials: true
}).then( (response) => {
resolve(response.data);
}).catch( (error) => { // 该error是个json。
let errorMsg = 'Network Error';
if (error.response) {
let errorStatus = error.response.status;
switch (errorStatus) {
case 401: // 未登录
errorMsg = 'Please Login';
break;
case 500:
default:
if (error.response.data.message) {
errorMsg = error.response.data.message;
}
break;
}
// console.log(error.response);
} else {
// console.log(error.message);
}
lolpool && lolpool.$message && lolpool.$message.error(errorMsg, 5);
});
});
};
export const postBus = (apiName, params, apiParams) => {
let url = conf.api[apiName];
if ( ! url ) { // 如果取不到url
throw new Error('post DataBus not match url');
}
for (let _key in apiParams) {
let value = apiParams[_key];
let regArr = ['\{', _key, '\}'];
let regExp = new RegExp('\{'+_key+'\}', 'igm');
url = url.replace(regExp, value);
}
// 获取token
let access_token = localStorage.getItem('access_token');
return new Promise((resolve, reject) => {
axios.post(domainUrl+url, params, {
headers: {
// 'Content-Type': 'application/x-www-form-urlencoded',
// Authorization: 'Bearer ' + access_token
}
// withCredentials: true
}).then( (response) => {
resolve(response.data);
}).catch( (error) => {
let errorMsg = 'Network Error';
if (error.response) {
let errorStatus = error.response.status;
switch (errorStatus) {
case 401: // 未登录
errorMsg = 'Please Login';
break;
case 500:
default:
if (error.response.data.message) {
errorMsg = error.response.data.message;
}
break;
}
}
lolpool && lolpool.$message && lolpool.$message.error(errorMsg, 5);
});
});
}
export const renderFullUrl = (api, apiParams) => {
for (let _key in apiParams) {
let value = apiParams[_key];
let regArr = ['\{', _key, '\}'];
// let regExp = new RegExp(regArr.join(''), 'igm');
let regExp = new RegExp('\{'+_key+'\}', 'igm');
api = api.replace(regExp, value);
}
return api;
}
export const apiErrMap = (errNo, errMsg) => {
if (errNo == 0) {
return {
errNo: 0,
errMsg: ''
};
}
if (errNo == -1) {
return {
errNo: -1,
errMsg
};
}
// todo: 翻译
const errMap = new Map()
.set(100, '步骤不正确')
.set(1000, '请输入验证码')
.set(1001, '验证码错误')
.set(1010, '用户已存在')
.set(1011, '用户不存在')
.set(1012, '用户被锁定')
.set(1013, '登录次数过多')
.set(1014, '密码错误')
.set(1015, 'invalid totp code')
.set(1020, '验证码过多')
.set(1021, '无效手机号')
.set(1022, '邮箱地址无效')
.set(1023, '电话号码不支持')
.set(1024, 'sms rate limited');
errMsg = errMap.get(errNo);
if (errMsg) {
return {
errNo,
errMsg
}
}
return {
errNo,
errMsg: '网络错误'
}
}
export const isEmailAddress = (str) => {
return new RegExp('^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$').test(str);
}
export const isVerifyCode = (str) => {
return new RegExp('^[a-z0-9A-Z]{4}$').test(str);
}
export const getServices = (serviceName) => {
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment