|
|
@@ -5,44 +5,50 @@
|
|
|
<div class="content-top">
|
|
|
<h3>个人注册</h3>
|
|
|
</div>
|
|
|
- <form action="" @submit.prevent="validateBeforeSubmit">
|
|
|
- <div class="form-group">
|
|
|
- <input type="text" name="vipName"
|
|
|
- v-validate="'required|vipName'"
|
|
|
- :class="{'input': true, 'is-danger': errors.has('name') }"
|
|
|
- v-model="item.vipName" class="form-control" placeholder="会员名" />
|
|
|
- <span v-show="errors.has('vipName')" class="help is-danger">{{errors.first('vipName')}}</span>
|
|
|
- </div>
|
|
|
- <div class="form-group">
|
|
|
- <input type="password" name="password"
|
|
|
- v-model="item.password" class="form-control" placeholder="登录密码" />
|
|
|
- <!--<i class="fa fa-keyboard-o" aria-hidden="true"></i>-->
|
|
|
- <!--<div class="pwd sm">密码强度 <em></em><em></em><em></em><span>弱</span></div>-->
|
|
|
- <!--<div class="pwd md">密码强度 <em></em><em></em><em></em><span>中</span></div>-->
|
|
|
- <div class="pwd lar">密码强度 <em></em><em></em><em></em><span>强</span></div>
|
|
|
- </div>
|
|
|
- <div class="form-group">
|
|
|
- <input type="password" class="form-control" placeholder="密码确认" v-model="item.confirm"/>
|
|
|
- <!--<i class="fa fa-keyboard-o" aria-hidden="true"></i>-->
|
|
|
- </div>
|
|
|
- <div class="form-group">
|
|
|
- <input type="text" class="form-control" placeholder="手机号码" v-model="item.mobile"/>
|
|
|
- <span class="tip">单个手机号只能注册一个用户</span>
|
|
|
- </div>
|
|
|
- <div class="form-group">
|
|
|
- <input type="text" class="form-control msg" placeholder="短信验证码" v-model="item.code"/>
|
|
|
- <button class="msg" v-show="sendPersonalCode" @click="getCheckCode" :disabled="!item.mobile">获取验证码</button>
|
|
|
- <span class="msg send" v-show="!sendPersonalCode" >已发送({{personal_time}}s)</span>
|
|
|
- </div>
|
|
|
- <button @click="registerNow(true, $event)" class="submitBtn" type="submit"
|
|
|
- :disabled="!item.vipName || !item.password || !item.confirm || !item.mobile || !item.code">完成注册</button>
|
|
|
- <div class="form-group agree">
|
|
|
- <input type="checkbox"/>
|
|
|
- <span class="agree">我已阅读并同意 <a href="">《优软云服务条款》</a></span>
|
|
|
- </div>
|
|
|
- </form>
|
|
|
+ <div>
|
|
|
+ <el-form :model="item" :rules="rules2" ref="item" label-width="100px" class="demo-ruleForm">
|
|
|
+ <el-form-item prop="vipName">
|
|
|
+ <el-input type="text" v-model="item.vipName" auto-complete="off" placeholder="会员名"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="password">
|
|
|
+ <el-input type="password" v-model="item.password" auto-complete="off" placeholder="登录密码"></el-input>
|
|
|
+ <div class="pwd sm" v-show="showMsgTip1">密码强度 <em></em><em></em><em></em><span>弱</span></div>
|
|
|
+ <div class="pwd md" v-show="showMsgTip2">密码强度 <em></em><em></em><em></em><span>中</span></div>
|
|
|
+ <div class="pwd lar" v-show="showMsgTip3">密码强度 <em></em><em></em><em></em><span>强</span></div>
|
|
|
+ <div class="pwd low" v-show="showMsgTip4">密码强度 <em></em><em></em><em></em></div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="confirm">
|
|
|
+ <el-input type="password" v-model="item.confirm" auto-complete="off" placeholder="密码确认"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="mobile">
|
|
|
+ <el-input v-model="item.mobile" placeholder="手机号码"></el-input>
|
|
|
+ <span class="tip" v-show="showMsgTip">单个手机号只能注册一个用户</span>
|
|
|
+ <span class="tip tip-mobile" v-show="mobileRegister">该手机号已被注册</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="code">
|
|
|
+ <el-input type="text" v-model="item.code"
|
|
|
+ v-bind:class="{ active: this.codeErrorChecked }" auto-complete="off" class="msg" placeholder="短信验证码"></el-input>
|
|
|
+ <el-button type="primary" class="code"
|
|
|
+ v-show="sendPersonalCode"
|
|
|
+ @click="getCheckCode"
|
|
|
+ :disabled="this.checkMobile">获取验证码</el-button>
|
|
|
+ <el-button type="primary" v-show="!sendPersonalCode" class="code code-send">已发送({{personal_time}}s)</el-button>
|
|
|
+ <span v-show="codeErrorChecked" class="codeError-tip">验证码输入错误</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <!--<el-button type="primary" @click="submitForm('item')" :disabled="!this.item.vipName || !this.item.password || !this.item.confirm || !this.item.code || !this.checked" class="finish">完成注册</el-button>-->
|
|
|
+ <a class="btn finish" @click="submit"
|
|
|
+ :disabled="!this.vipNameChecked || !this.passwordChecked || !this.confirmChecked || !this.mobileChecked || !this.codeChecked || !this.checked">完成注册</a>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <el-checkbox name="type" v-model="checked" @click="checkboxChecked"></el-checkbox>
|
|
|
+ <span class="agree">我已阅读并同意 <a href="">《优软云服务条款》</a></span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="login">已有账号？<a href="">立即登录</a></div>
|
|
|
+ <div class="login">已有账号？<a href="/">立即登录</a></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -51,64 +57,260 @@
|
|
|
export default {
|
|
|
name: 'PersonalRegistration',
|
|
|
data () {
|
|
|
+ var validateName = (rule, value, callback) => {
|
|
|
+ if (!value) {
|
|
|
+ return callback(new Error('会员名不能为空'))
|
|
|
+ } else {
|
|
|
+ if (this.item.password !== '') {
|
|
|
+ if (value.length >= 2 && value.length <= 20) {
|
|
|
+ this.vipNameChecked = true
|
|
|
+ } else {
|
|
|
+ callback(new Error('请填写合适的会员名称，2~20个字符'))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var validatePass = (rule, value, callback) => {
|
|
|
+ if (value === '') {
|
|
|
+ callback(new Error('请输入密码'))
|
|
|
+ } else {
|
|
|
+ if (this.item.password !== '') {
|
|
|
+ if (value.length <= 20 && value.length >= 8) {
|
|
|
+ var reg1 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]))|((?=.*[0-9])((?=.*[a-zA-Z]))(?=.*[^a-zA-Z0-9]))).*$/
|
|
|
+ var reg2 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z]))|((?=.*[0-9])(?=.*[A-Z]))).*$/
|
|
|
+ if (reg1.test(value)) {
|
|
|
+// callback(new Error('密码强度强'))
|
|
|
+ this.showMsgTip3 = true
|
|
|
+ this.showMsgTip2 = false
|
|
|
+ this.showMsgTip1 = false
|
|
|
+ this.showMsgTip4 = false
|
|
|
+ this.passwordChecked = true
|
|
|
+ } else if (reg2.test(value)) {
|
|
|
+// callback(new Error('密码强度中'))
|
|
|
+ this.showMsgTip2 = true
|
|
|
+ this.showMsgTip3 = false
|
|
|
+ this.showMsgTip1 = false
|
|
|
+ this.showMsgTip4 = false
|
|
|
+ this.passwordChecked = true
|
|
|
+ } else {
|
|
|
+ this.showMsgTip1 = true
|
|
|
+ this.showMsgTip3 = false
|
|
|
+ this.showMsgTip2 = false
|
|
|
+ this.showMsgTip4 = false
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.showMsgTip3 = false
|
|
|
+ this.showMsgTip2 = false
|
|
|
+ this.showMsgTip1 = false
|
|
|
+ this.showMsgTip4 = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var validatePassTip = (rule, value, callback) => {
|
|
|
+ if (value === '') {
|
|
|
+ callback(new Error('请输入密码'))
|
|
|
+ } else {
|
|
|
+ if (this.item.password !== '') {
|
|
|
+ if (value.length <= 20 && value.length >= 8) {
|
|
|
+ var reg1 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]))|((?=.*[0-9])((?=.*[a-zA-Z]))(?=.*[^a-zA-Z0-9]))).*$/
|
|
|
+ var reg2 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z]))|((?=.*[0-9])(?=.*[A-Z]))).*$/
|
|
|
+ if (reg1.test(value)) {
|
|
|
+ this.passwordChecked = true
|
|
|
+ } else if (reg2.test(value)) {
|
|
|
+ this.passwordChecked = true
|
|
|
+ } else {
|
|
|
+ callback(new Error('密码须为8-20字符的英文、数字混合'))
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ callback(new Error('密码须为8-20字符的英文、数字混合'))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var validatePass2 = (rule, value, callback) => {
|
|
|
+ if (value === '') {
|
|
|
+ callback(new Error('请再次输入密码'))
|
|
|
+ } else if (value !== this.item.password) {
|
|
|
+ callback(new Error('两次输入密码不一致!'))
|
|
|
+ } else {
|
|
|
+ this.confirmChecked = true
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var validateMobile = (rule, value, callback) => {
|
|
|
+ if (value === '') {
|
|
|
+ callback(new Error('请填写正确的手机号'))
|
|
|
+ this.showMsgTip = false
|
|
|
+ } else {
|
|
|
+ if (this.item.mobile !== '') {
|
|
|
+ var reg = /^1([0-9]{10})$/
|
|
|
+ if (!reg.test(value)) {
|
|
|
+ callback(new Error('请填写正确的手机号'))
|
|
|
+ this.showMsgTip = false
|
|
|
+ this.checkMobile = true
|
|
|
+ this.mobileRegister = false
|
|
|
+ } else {
|
|
|
+ this.$http.get(`/api/user/checkMobile`, {params: {mobile: this.item.mobile, mobileArea: ''}})
|
|
|
+ .then(response => {
|
|
|
+ if (response.data.hasRegister) {
|
|
|
+ this.mobileRegister = true
|
|
|
+ this.showMsgTip = false
|
|
|
+ this.checkMobile = true
|
|
|
+ } else {
|
|
|
+ this.showMsgTip = false
|
|
|
+ this.checkMobile = false
|
|
|
+ this.mobileRegister = false
|
|
|
+ this.mobileChecked = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var validateCode = (rule, value, callback) => {
|
|
|
+ if (value === '') {
|
|
|
+ callback(new Error('请填写正确的验证码'))
|
|
|
+ this.codeErrorChecked = false
|
|
|
+ } else {
|
|
|
+ if (this.token !== '') {
|
|
|
+ if (this.item.code !== '' && this.item.mobile !== '') {
|
|
|
+ let param = new FormData()
|
|
|
+ param.append('mobile', this.item.mobile)
|
|
|
+ param.append('code', this.item.code)
|
|
|
+ param.append('token', this.token)
|
|
|
+ let config = {
|
|
|
+ headers: {'Content-Type': 'multipart/form-data'}
|
|
|
+ }
|
|
|
+ this.$http.post(`/sso/personal/register/checkCode`, param, config)
|
|
|
+ .then(response => {
|
|
|
+ if (response.data.success) {
|
|
|
+ this.codeChecked = true
|
|
|
+ } else {
|
|
|
+ this.codeErrorChecked = true
|
|
|
+// callback(new Error('验证码输入错误'))
|
|
|
+ }
|
|
|
+ }, err => {
|
|
|
+// console.log(err)
|
|
|
+ this.$message.error(err)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {}
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
return {
|
|
|
item: {
|
|
|
vipName: '',
|
|
|
- msgName: '',
|
|
|
password: '',
|
|
|
confirm: '',
|
|
|
- mobile: ''
|
|
|
+ mobile: '',
|
|
|
+ code: ''
|
|
|
},
|
|
|
- btnDisabled: false,
|
|
|
+ vipNameChecked: false,
|
|
|
+ passwordChecked: false,
|
|
|
+ confirmChecked: false,
|
|
|
+ mobileChecked: false,
|
|
|
+ codeChecked: false,
|
|
|
+ codeErrorChecked: false,
|
|
|
+ showMsgTip: true,
|
|
|
+ showMsgTip1: false,
|
|
|
+ showMsgTip2: false,
|
|
|
+ showMsgTip3: false,
|
|
|
+ showMsgTip4: false,
|
|
|
+ checkMobile: true,
|
|
|
+ checked: true,
|
|
|
+ token: '',
|
|
|
+ mobileRegister: false,
|
|
|
sendPersonalCode: true,
|
|
|
- personal_time: 0
|
|
|
+ personal_time: 0,
|
|
|
+ rules2: {
|
|
|
+ vipName: [
|
|
|
+ { validator: validateName, trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ password: [
|
|
|
+ { validator: validatePassTip, trigger: 'blur' },
|
|
|
+ { validator: validatePass, trigger: 'change' }
|
|
|
+ ],
|
|
|
+ confirm: [
|
|
|
+ { required: true, validator: validatePass2, trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ mobile: [
|
|
|
+ { validator: validateMobile, trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ code: [
|
|
|
+ { validator: validateCode, trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
}
|
|
|
- },
|
|
|
- computed: {
|
|
|
-
|
|
|
},
|
|
|
methods: {
|
|
|
- validateBeforeSubmit () {
|
|
|
- this.$validator.validateAll().then((result) => {
|
|
|
- if (result) {
|
|
|
- console.log(result)
|
|
|
- return
|
|
|
- }
|
|
|
- alert('Correct them errors!')
|
|
|
- })
|
|
|
+// 我同意是否被选中
|
|
|
+ checkboxChecked () {
|
|
|
+ this.checked = !this.checked
|
|
|
},
|
|
|
- registerNow: function (isRegister, event) {
|
|
|
- event.stopPropagation()
|
|
|
- if (isRegister) {
|
|
|
- this.$http.post('/sso/personal/register', [{
|
|
|
- vipName: this.item.vipName,
|
|
|
- password: this.item.password,
|
|
|
- mobile: this.item.mobile,
|
|
|
- mobileArea: this.item.mobileArea,
|
|
|
- appId: this.item.appId,
|
|
|
- code: this.item.code,
|
|
|
- token: this.item.token
|
|
|
- }])
|
|
|
+// 表单提交
|
|
|
+ submit () {
|
|
|
+ if (this.vipNameChecked && this.passwordChecked && this.confirmChecked && this.mobileChecked && this.codeChecked) {
|
|
|
+ var url = window.location.search
|
|
|
+ var request = {}
|
|
|
+ if (url.indexOf('?' !== -1)) {
|
|
|
+ var str = url.substr(1)
|
|
|
+ var strs = str.split('&')
|
|
|
+ for (var i = 0; i < strs.length; i++) {
|
|
|
+ request[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var appId = request['appId']
|
|
|
+ let param = new FormData()
|
|
|
+ param.append('vipName', this.item.vipName)
|
|
|
+ param.append('password', this.item.password)
|
|
|
+ param.append('mobile', this.item.mobile)
|
|
|
+// param.append('mobileArea', '')
|
|
|
+ param.append('appId', appId)
|
|
|
+ param.append('code', this.item.code)
|
|
|
+ param.append('token', this.token)
|
|
|
+ let config = {
|
|
|
+ headers: {'Content-Type': 'multipart/form-data'}
|
|
|
+ }
|
|
|
+ this.$http.post('/sso/personal/register', param, config)
|
|
|
+ .then(response => {
|
|
|
+ if (response.data.success) {
|
|
|
+ } else {}
|
|
|
+ }, err => {
|
|
|
+ console.log(err)
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
// 获取验证码
|
|
|
- async getCode (params) {
|
|
|
- let { data } = await this.$http.get(`/sso/personal/register/checkCode`, { params })
|
|
|
- console.log(data)
|
|
|
- this.$store.commit('register/checkPersonalCode/GET_PERSONAL_CODE_SUCCESS', data)
|
|
|
- },
|
|
|
+// async getCode () {
|
|
|
+// let { data } = await this.$http.get(`/sso/personal/register/checkCode`, {params: {mobile: this.item.mobile}})
|
|
|
+// this.token = data.token
|
|
|
+// },
|
|
|
getCheckCode () {
|
|
|
- this.getCode()
|
|
|
- this.$message.info('验证码已经发送到您的手机，请注意查收')
|
|
|
- this.sendPersonalCode = false
|
|
|
- this.personal_time = 60
|
|
|
- var personalTime = setInterval(() => {
|
|
|
- this.personal_time--
|
|
|
- if (this.personal_time <= 0) {
|
|
|
- this.sendPersonalCode = true
|
|
|
- clearInterval(personalTime)
|
|
|
- }
|
|
|
- }, 1000)
|
|
|
+// this.getCode()
|
|
|
+ this.$http.get(`/sso/personal/register/checkCode`, {params: {mobile: this.item.mobile}})
|
|
|
+ .then(response => {
|
|
|
+ this.token = response.data.token
|
|
|
+ if (this.token !== '') {
|
|
|
+ this.$message({
|
|
|
+ message: '验证码已经发送到您的手机，请注意查收',
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
+ this.sendPersonalCode = false
|
|
|
+ this.personal_time = 60
|
|
|
+ var personalTime = setInterval(() => {
|
|
|
+ this.personal_time--
|
|
|
+ if (this.personal_time <= 0) {
|
|
|
+ this.sendPersonalCode = true
|
|
|
+ clearInterval(personalTime)
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ } else {}
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -143,12 +345,6 @@
|
|
|
form {
|
|
|
padding-bottom: 44px;
|
|
|
margin-top: 35px;
|
|
|
- .form-group{
|
|
|
- margin: 0 auto 16px;
|
|
|
- position: relative;
|
|
|
- width: 360px;
|
|
|
- height: 44px;
|
|
|
- line-height: 44px;
|
|
|
input{
|
|
|
padding: 0 0 0 18px;
|
|
|
width: 360px;
|
|
|
@@ -174,9 +370,8 @@
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
.pwd {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: -205px;
|
|
|
+ margin: 6px 0 -15px 0;
|
|
|
+ text-align: left;
|
|
|
font-size: 13px;
|
|
|
em{
|
|
|
display: inline-block;
|
|
|
@@ -225,13 +420,32 @@
|
|
|
color: #00a0e9;
|
|
|
}
|
|
|
}
|
|
|
+ .pwd.low{
|
|
|
+ color: #8c8c8c;
|
|
|
+ em{
|
|
|
+ background: #bfbfbf;
|
|
|
+ }
|
|
|
+ }
|
|
|
span.tip{
|
|
|
position: absolute;
|
|
|
- top: 0;
|
|
|
+ top: 3px;
|
|
|
right: -190px;
|
|
|
font-size: 13px;
|
|
|
color: #8c8c8c;
|
|
|
}
|
|
|
+ span.tip.tip-mobile{
|
|
|
+ top: 3px;
|
|
|
+ right: -118px;
|
|
|
+ color: #ff4949;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ span.codeError-tip{
|
|
|
+ position: absolute;
|
|
|
+ top: 3px;
|
|
|
+ right: -105px;
|
|
|
+ color: #ff4949;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
input.msg{
|
|
|
float: left;
|
|
|
width: 210px;
|
|
|
@@ -240,7 +454,6 @@
|
|
|
float: right;
|
|
|
width: 130px;
|
|
|
height: 44px;
|
|
|
- line-height: 44px;
|
|
|
font-size: 14px;
|
|
|
color: #5a5a5a;
|
|
|
background: #f4f4f4;
|
|
|
@@ -269,14 +482,13 @@
|
|
|
}
|
|
|
span.agree{
|
|
|
float: left;
|
|
|
- margin-top: -15px;
|
|
|
+ margin: 2px 0 0 10px;
|
|
|
font-size: 14px;
|
|
|
color: #8b8b8b;
|
|
|
a{
|
|
|
color: #0076ad;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
.form-group.agree{
|
|
|
margin: 20px auto 0 !important;
|
|
|
}
|
hangb
