|
|
@@ -6,19 +6,23 @@
|
|
|
<h3>个人注册</h3>
|
|
|
<a class="go" @click="goRegister"><i class="fa fa-long-arrow-right"></i>企业注册</a>
|
|
|
</div>
|
|
|
+ <div class="content-tab">
|
|
|
+ <span :class="{speed: speediness === false}" @click="clickWay(false)">用户名注册</span>
|
|
|
+ <span :class="{speed: speediness === true}" @click="clickWay(true)">手机号注册</span>
|
|
|
+ </div>
|
|
|
<div>
|
|
|
<el-form :model="item" :rules="rules2" ref="item" label-width="100px" class="demo-ruleForm">
|
|
|
- <el-form-item prop="vipName">
|
|
|
+ <el-form-item prop="vipName" v-if="!speediness">
|
|
|
<el-input type="text" v-model="item.vipName" auto-complete="off" placeholder="会员名"></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item prop="password">
|
|
|
+ <el-form-item prop="password" v-if="!speediness">
|
|
|
<el-input type="password" v-model="item.password" auto-complete="new-password" 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-form-item prop="confirm" v-if="!speediness">
|
|
|
<el-input type="password"
|
|
|
v-model="item.confirm"
|
|
|
v-bind:class="{active: showPasswordError}"
|
|
|
@@ -33,48 +37,33 @@
|
|
|
<span class="tip" v-show="showMsgTip">单个手机号只能注册一个用户</span>
|
|
|
<span class="tip tip-mobile" v-show="mobileRegister">该手机号已被注册</span>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item prop="captcha" class="captcha">
|
|
|
+ <el-input type="text"
|
|
|
+ v-model="ImgCode"
|
|
|
+ auto-complete="off"
|
|
|
+ class="code-input"
|
|
|
+ @keyup.enter.native="getCheckCode"></el-input>
|
|
|
+ <img id="captchaImage2" class="code-img" src="/sso/login/checkCode"/>
|
|
|
+ <a class="code-click" @click="getCode">看不清换一张</a>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item prop="code">
|
|
|
<el-input type="text" v-model="item.code"
|
|
|
v-bind:class="{ active: codeErrorChecked }" auto-complete="off" class="msg" placeholder="短信验证码"></el-input>
|
|
|
-
|
|
|
- <el-popover
|
|
|
- placement="top"
|
|
|
- width="300"
|
|
|
- v-model="visible2">
|
|
|
- <div>
|
|
|
- <el-input type="text"
|
|
|
- v-model="ImgCode"
|
|
|
- auto-complete="off"
|
|
|
- class="code-input2"></el-input>
|
|
|
- <img id="captchaImage2" class="code-img" src="/sso/login/checkCode"/>
|
|
|
- <a class="code-click" @click="getCode" style="font-size: 12px">看不清换一张</a>
|
|
|
- </div>
|
|
|
- <div style="text-align: right; margin: 0">
|
|
|
- <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
|
|
|
- <el-button type="primary" size="mini" @click="getCheckCode">确定</el-button>
|
|
|
- </div>
|
|
|
- <el-button type="primary" class="code"
|
|
|
- v-show="sendPersonalCode" slot="reference" :disabled="this.checkMobile">获取验证码</el-button>
|
|
|
- </el-popover>
|
|
|
-
|
|
|
-
|
|
|
- <!--<el-button type="primary" class="code"-->
|
|
|
- <!--v-show="sendPersonalCode"-->
|
|
|
- <!--@click="getCheckCode"-->
|
|
|
- <!--:disabled="this.checkMobile">获取验证码</el-button>-->
|
|
|
-
|
|
|
+ <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">{{codeErrorMsg}}</span>
|
|
|
</el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <a class="btn finish" @click="submit">确认注册</a>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
<el-form-item>
|
|
|
<el-checkbox name="type" v-model="checked" @click="checkboxChecked"></el-checkbox>
|
|
|
<span class="agree" v-if="!agreementUrl || (agreementUrl && (JSON.parse(agreementUrl.terms).isUrl))">我已阅读并同意 <a href="/common/agreement">《优软云服务条款》</a></span>
|
|
|
<span class="agree" v-else>我已阅读并同意<a :href="`/common/cityAgreement/?appId=${this.$route.query.appId}`">《{{JSON.parse(agreementUrl.terms).name || ''}}》</a></span>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <a class="btn finish" @click="allSubmit">确认注册</a>
|
|
|
+ </el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -326,8 +315,8 @@
|
|
|
}
|
|
|
}
|
|
|
return {
|
|
|
+ speediness: false,
|
|
|
ImgCode: '',
|
|
|
- visible2: false,
|
|
|
item: {
|
|
|
vipName: '',
|
|
|
password: '',
|
|
|
@@ -395,6 +384,11 @@
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 切换注册方式
|
|
|
+ clickWay (type) {
|
|
|
+ this.speediness = type
|
|
|
+ this.$refs.item.resetFields()
|
|
|
+ },
|
|
|
// 获取链接
|
|
|
getUrl () {
|
|
|
var url = window.location.search
|
|
|
@@ -419,7 +413,7 @@
|
|
|
checkboxChecked () {
|
|
|
this.checked = !this.checked
|
|
|
},
|
|
|
-// 表单提交
|
|
|
+ // 用户名表单提交
|
|
|
submit () {
|
|
|
if (this.vipNameChecked && this.passwordChecked && this.confirmChecked && this.mobileChecked && this.codeChecked && this.checked) {
|
|
|
if (this.item.password !== this.item.confirm) {
|
|
|
@@ -535,6 +529,116 @@
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ // 快速登录
|
|
|
+ waySubmit () {
|
|
|
+ if (this.mobileChecked && this.codeChecked && this.checked) {
|
|
|
+ this.isShowLoading = true
|
|
|
+ let param = new FormData()
|
|
|
+ param.append('mobile', this.item.mobile)
|
|
|
+ param.append('appId', this.appId)
|
|
|
+ param.append('code', this.item.code)
|
|
|
+ param.append('token', this.token)
|
|
|
+ param.append('t', this.$route.query.tk ? this.$route.query.tk : '')
|
|
|
+ if (this.$route.query.baseUrl) {
|
|
|
+ param.append('baseUrl', this.$route.query.baseUrl)
|
|
|
+ }
|
|
|
+ if (this.$route.query.returnURL) {
|
|
|
+ param.append('returnUrl', this.$route.query.returnURL)
|
|
|
+ }
|
|
|
+ let config = {
|
|
|
+ headers: {'Content-Type': 'multipart/form-data'}
|
|
|
+ }
|
|
|
+ this.$http.post('/sso/personal/register/sms', param, config)
|
|
|
+ .then(response => {
|
|
|
+ this.isShowLoading = false
|
|
|
+ if (response.data.success) {
|
|
|
+ if (response.data.content.type) {
|
|
|
+ if (response.data.content.type === 'mall') {
|
|
|
+ let param = response.data.content.data
|
|
|
+ let a = ''
|
|
|
+ for (let n in param) {
|
|
|
+ a += (n + '=' + encodeURIComponent(param[n]) + '&')
|
|
|
+ }
|
|
|
+ let params = a.substr(0, a.length - 1)
|
|
|
+ this.isShowLoading = true
|
|
|
+ if (response.data.content.currentUrl) {
|
|
|
+ this.$jsonp(`${response.data.content.currentUrl}?${params}`, {
|
|
|
+ name: 'successCallback',
|
|
|
+ timeout: 3000
|
|
|
+ }, (err, data) => {
|
|
|
+ if (err) {
|
|
|
+ this.$message.error('注册成功，请点击下方“立即登录”完成登录')
|
|
|
+ this.isShowLoading = false
|
|
|
+ throw err
|
|
|
+ } else {
|
|
|
+ this.loginOther(response, params)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.loginOther(response, params, 3000)
|
|
|
+ }
|
|
|
+ } else if (response.data.content.type === 'city') {
|
|
|
+ let param = response.data.content.data
|
|
|
+ let a = ''
|
|
|
+ for (let n in param) {
|
|
|
+ a += (n + '=' + encodeURIComponent(param[n]) + '&')
|
|
|
+ }
|
|
|
+ let params = a.substr(0, a.length - 1)
|
|
|
+ this.isShowLoading = true
|
|
|
+ if (response.data.content.currentUrl) {
|
|
|
+ this.$jsonp(`${response.data.content.currentUrl}?${params}`, {
|
|
|
+ name: 'successCallback',
|
|
|
+ timeout: 3000
|
|
|
+ }, (err, data) => {
|
|
|
+ if (err) {
|
|
|
+ this.$message.error('注册成功，请点击下方“立即登录”完成登录')
|
|
|
+ this.isShowLoading = false
|
|
|
+ throw err
|
|
|
+ } else {
|
|
|
+ this.loginCityOther(response, params)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.loginCityOther(response, params, 3000)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ let userUU = response.data.content.userUU
|
|
|
+ console.log(userUU)
|
|
|
+ window.location.href = `/overRegister/${userUU}`
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return Promise.reject(response.data)
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ this.$message.error(err.errMsg)
|
|
|
+ this.isShowLoading = false
|
|
|
+ this.personal_time = 0
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ if (!this.item.mobile) {
|
|
|
+ this.$message.error('手机号不能为空')
|
|
|
+ } else if (!this.mobileChecked) {
|
|
|
+ this.$message.error('手机号输入有误，请按提示重新输入')
|
|
|
+ } else if (!this.token) {
|
|
|
+ this.$message.error('请先获取验证码')
|
|
|
+ } else if (!this.item.code) {
|
|
|
+ this.$message.error('验证码不能为空')
|
|
|
+ } else if (!this.codeChecked) {
|
|
|
+ this.$message.error('验证码输入有误，请按提示重新输入')
|
|
|
+ } else if (!this.checked) {
|
|
|
+ this.$message.error('您对阅读条款未做勾选')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 提交注册流程
|
|
|
+ allSubmit () {
|
|
|
+ if (this.speediness) {
|
|
|
+ this.waySubmit()
|
|
|
+ } else {
|
|
|
+ this.submit()
|
|
|
+ }
|
|
|
+ },
|
|
|
// 获取验证码
|
|
|
// async getCode () {
|
|
|
// let { data } = await this.$http.get(`/sso/personal/register/checkCode`, {params: {mobile: this.item.mobile}})
|
|
|
@@ -568,7 +672,7 @@
|
|
|
type: 'success'
|
|
|
})
|
|
|
this.sendPersonalCode = false
|
|
|
- this.visible2 = false
|
|
|
+ // this.visible2 = false
|
|
|
this.personal_time = 60
|
|
|
this.ImgCode = ''
|
|
|
var personalTime = setInterval(() => {
|
|
|
@@ -678,9 +782,31 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .content-tab{
|
|
|
+ width: 360px;
|
|
|
+ margin: 0 auto;
|
|
|
+ height: 50px;
|
|
|
+ margin-top: 15px;
|
|
|
+ color: #999;
|
|
|
+ span{
|
|
|
+ display:inline-block;
|
|
|
+ width:50%;
|
|
|
+ vertical-align:top;
|
|
|
+ font-size:20px;
|
|
|
+ text-align: center;
|
|
|
+ line-height:40px;
|
|
|
+ height:40px;
|
|
|
+ border-bottom:2px solid #fff;
|
|
|
+ cursor:pointer;
|
|
|
+ &.speed{
|
|
|
+ color:#3375a7;
|
|
|
+ border-bottom:2px solid #3375a7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
form {
|
|
|
padding-bottom: 44px;
|
|
|
- margin-top: 35px;
|
|
|
+ margin-top: 15px;
|
|
|
input{
|
|
|
padding: 0 0 0 18px;
|
|
|
width: 360px;
|
|
|
@@ -841,7 +967,6 @@
|
|
|
}
|
|
|
.submitBtn {
|
|
|
display: inline-block;
|
|
|
- margin-top: 34px;
|
|
|
width: 360px;
|
|
|
height: 44px;
|
|
|
line-height: 44px;
|
wangcz