<template>
|
<div class="sign-form-wrap">
|
<header class="logo-header">
|
<img src="../../img/mingke_logo.png" alt="">
|
<span class="plat-name">明科开发者平台</span>
|
<a class="plat-name" :style="{color: '#40a9ff', border: 0}" href="http://mk9h.cn/a.asp?a=9CCB" ref="nofollow" target="_blank">文档中心</a>
|
<!-- <div class="find-password" @click="forgotPwd()">忘记密码？</div> -->
|
</header>
|
<div v-if="member_type === ''" class="member-wrap">
|
<div class="member-item personal" @click="changeType('personal')">
|
<div class="title">个人版</div>
|
<div class="content">限时注册，终身免费使用</div>
|
</div>
|
<div class="member-item enterprise" @click="changeType('enterprise')">
|
<div class="title">企业版</div>
|
<div class="content">更多的业务模板，更好的企业服务</div>
|
</div>
|
</div>
|
<el-tabs v-if="member_type !== ''" :tab-position="'left'" :style="{position: 'absolute'}" :before-leave="changeTab">
|
<el-tab-pane label="手机号注册">
|
</el-tab-pane>
|
<el-tab-pane label="邮箱注册">
|
</el-tab-pane>
|
</el-tabs>
|
<div v-if="member_type !== '' && signtype !== 'email'">
|
<div class="header">
|
明科帐号注册
|
<span class="to-login">
|
已有账号，
|
<a href="http://cloud.mk9h.cn/index.html" ref="nofollow" target="_blank">去登陆<i class="el-icon-arrow-right"></i></a>
|
</span>
|
</div>
|
<div class="center">
|
<div>
|
<el-input size="small" placeholder="请输入手机号" @input="valChange()" v-model="phoneNo">
|
<template slot="prepend">+86</template>
|
</el-input>
|
</div>
|
<div class="slider-block">
|
<SliderVerificationCode v-model="pass"/>
|
</div>
|
<div>
|
<el-input size="small" class="ver-code" @input="valChange()" placeholder="请输入验证码" v-model="verCode">
|
<el-button slot="append" size="small" @click="getVerCode()" :disabled="!pass || verCodeDisabled"><span v-text="verCodeTip"></span></el-button>
|
</el-input>
|
</div>
|
<div>
|
<el-input size="small" placeholder="邮箱地址" v-model="email"></el-input>
|
</div>
|
<div class="password-wrap">
|
<el-input placeholder="密码" size="small" @input="valChange()" :maxlength="12" :show-password="true" v-model="password"></el-input>
|
<el-tooltip class="item" effect="dark" content="密码最大为12位，可以使用数字、字母及!@#$%&*()_" placement="top">
|
<i class="el-icon-info"></i>
|
</el-tooltip>
|
</div>
|
<div>
|
<el-input placeholder="确认密码" size="small" @input="valChange()" :maxlength="12" :show-password="true" v-model="confirmPassword"></el-input>
|
</div>
|
<div>
|
<el-date-picker v-model="birthday" type="date" value-format="yyyy-MM-dd" size="small" @change="valChange()" placeholder="选择出生日期"></el-date-picker>
|
</div>
|
<div>
|
<el-button class="sub-button" type="primary" @click="submitLogin()" :disabled="subdisabled" :loading="subloading">注册</el-button>
|
</div>
|
</div>
|
</div>
|
<div v-if="member_type !== '' && signtype === 'email'">
|
<div class="header">
|
明科帐号注册
|
<span class="to-login">已有账号，<a href="http://cloud.mk9h.cn/index.html" ref="nofollow" target="_blank">去登陆<i class="el-icon-arrow-right"></i></a></span>
|
</div>
|
<div class="center">
|
<div>
|
<el-input size="small" placeholder="邮箱地址" v-model="email"></el-input>
|
</div>
|
<div class="slider-block">
|
<SliderVerificationCode v-model="pass"/>
|
</div>
|
<div>
|
<el-input size="small" class="ver-code" placeholder="请输入验证码" v-model="verCode">
|
<el-button slot="append" size="small" @click="getVerCode()" :disabled="!pass || verCodeDisabled">
|
<span v-text="verCodeTip"></span>
|
</el-button>
|
</el-input>
|
</div>
|
<div>
|
<el-input size="small" placeholder="请输入手机号" v-model="phoneNo"></el-input>
|
</div>
|
<div class="password-wrap">
|
<el-input placeholder="密码" size="small" :maxlength="12" :show-password="true" v-model="password"></el-input>
|
<el-tooltip class="item" effect="dark" content="密码最大为12位，可以使用数字、字母及!@#$%&*()_" placement="top">
|
<i class="el-icon-info"></i>
|
</el-tooltip>
|
</div>
|
<div>
|
<el-input placeholder="确认密码" size="small" :maxlength="12" :show-password="true" v-model="confirmPassword"></el-input>
|
</div>
|
<div>
|
<el-date-picker v-model="birthday" type="date" value-format="yyyy-MM-dd" @change="valChange()" size="small" placeholder="选择出生日期"></el-date-picker>
|
</div>
|
<div>
|
<el-button class="sub-button" type="primary" @click="submitLogin()" :disabled="subdisabled" :loading="subloading">注册</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import Utils from '@/utils'
|
import md5 from 'md5'
|
|
let timer = null
|
|
export default {
|
data() {
|
return {
|
signtype: '',
|
phoneNo: '',
|
email: '',
|
verCode: '',
|
verCodeTip: '获取验证码',
|
verCodeDisabled: false,
|
delay: 60,
|
password: '',
|
pass: false,
|
birthday: '',
|
confirmPassword: '',
|
subdisabled: true,
|
subloading: false,
|
sendcode: false,
|
member_type: ''
|
}
|
},
|
methods: {
|
handleChange () {
|
|
},
|
forgotPwd () {
|
this.$router.push({name: 'forgotPwd'})
|
},
|
getVerCode () {
|
let error = false
|
let param = null
|
|
if (this.signtype !== 'email') {
|
if (!this.phoneNo) {
|
this.$message({
|
message: '请输入手机号！',
|
type: 'warning'
|
})
|
return
|
} else if (!/^1[3456789]\d{9}$/.test(this.phoneNo)) {
|
this.$message({
|
message: '手机号码有误，请重填！',
|
type: 'warning'
|
})
|
return
|
}
|
} else {
|
if (!this.email) {
|
this.$message({
|
message: '请输入邮箱地址！',
|
type: 'warning'
|
})
|
return
|
} else if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)) {
|
this.$message({
|
message: '邮箱格式有误，请重填！',
|
type: 'warning'
|
})
|
return
|
}
|
}
|
|
if (this.signtype !== 'email') {
|
param = {
|
func: 'MSN_sms_send_code',
|
send_type: 'register',
|
mob: this.phoneNo,
|
timestamp: Utils.getCurrentTime(),
|
// ID: '20200522115033857N9C7S41G77G31OT52QN'
|
ID: '202009091111401359QCBR94T2GFGBO25PG6'
|
}
|
|
param.LText = md5(`${this.phoneNo}mingke${window.GLOB.appkey}${param.timestamp}`)
|
} else {
|
param = {
|
func: 'MSN_email_send_code',
|
send_type: 'register',
|
email: this.email,
|
timestamp: Utils.getCurrentTime(),
|
ID: '20200518162835149CE25P520L0UODMVQ5FM'
|
}
|
|
param.LText = md5(`${window.GLOB.appkey}mingke${this.email}${param.timestamp}`)
|
}
|
|
param.secretkey = md5(`${param.LText}mingke${param.timestamp}`)
|
|
this.verCodeDisabled = true
|
this.Service.setSSORequest(param).then(res => {
|
if (res.status) {
|
this.sendcode = true
|
this.verCodeTip = '获取验证码(60s)'
|
timer = setTimeout(this.resetVerCodeTip, 1000)
|
} else {
|
this.verCodeDisabled = false
|
this.$message({
|
message: res.message,
|
type: 'error'
|
})
|
}
|
})
|
},
|
valChange () {
|
let valid = true
|
|
if (!this.phoneNo) {
|
valid = false
|
} else if (!this.email) {
|
valid = false
|
} else if (!this.verCode) {
|
valid = false
|
} else if (!this.password) {
|
valid = false
|
} else if (!this.confirmPassword) {
|
valid = false
|
} else if (!this.birthday) {
|
valid = false
|
} else if (!this.sendcode) {
|
valid = false
|
}
|
|
if (valid) {
|
this.subdisabled = false
|
} else {
|
this.subdisabled = true
|
}
|
},
|
resetVerCodeTip () {
|
if (this.delay > 1) {
|
this.delay--
|
this.verCodeTip = `获取验证码(${this.delay}s)`
|
timer = setTimeout(this.resetVerCodeTip, 1000)
|
} else {
|
this.verCodeDisabled = false
|
this.delay = 60
|
this.verCodeTip = '获取验证码'
|
}
|
},
|
submitLogin () {
|
if (!this.phoneNo) {
|
this.$message({
|
message: '请输入手机号！',
|
type: 'warning'
|
})
|
return
|
} else if (!/^1[3456789]\d{9}$/.test(this.phoneNo)) {
|
this.$message({
|
message: '手机号码有误，请重填！',
|
type: 'warning'
|
})
|
return
|
} else if (!this.email) {
|
this.$message({
|
message: '请输入邮箱地址！',
|
type: 'warning'
|
})
|
return
|
} else if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)) {
|
this.$message({
|
message: '邮箱格式有误，请重填！',
|
type: 'warning'
|
})
|
return
|
} else if (!this.verCode) {
|
this.$message({
|
message: '请输入验证码！',
|
type: 'warning'
|
})
|
return
|
} else if (!this.password) {
|
this.$message({
|
message: '请输入密码！',
|
type: 'warning'
|
})
|
return
|
} else if (!/^[0-9a-zA-Z!@#$%^&*()_]*$/.test(this.password)) {
|
this.$message({
|
message: '密码只可以使用数字、字母及!@#$%&*()_。',
|
type: 'warning'
|
})
|
return
|
} else if (this.password !== this.confirmPassword) {
|
this.$message({
|
message: '两次输入密码不一致！',
|
type: 'warning'
|
})
|
return
|
} else if (!this.birthday) {
|
this.$message({
|
message: '请选择出生日期！',
|
type: 'warning'
|
})
|
return
|
}
|
|
let param = {
|
func: 'msn_user_registry',
|
mob: this.phoneNo,
|
email: this.email,
|
country: 'China',
|
check_code: this.verCode,
|
pwd: this.password,
|
birthday: this.birthday,
|
Type_reg: this.signtype !== 'email' ? 'mob' : 'email',
|
member_type: this.member_type,
|
timestamp: Utils.getCurrentTime()
|
}
|
|
if (this.$route.query.partner_id) {
|
param.partner_id = this.$route.query.partner_id
|
}
|
|
param.LText = md5(`${window.GLOB.appkey}mingke${this.phoneNo}${this.email}`)
|
param.secretkey = md5(`${param.LText}mingke${param.timestamp}`)
|
|
this.subdisabled = true
|
this.subloading = true
|
this.Service.setSSORequest(param).then(res => {
|
if (res.status) {
|
this.subdisabled = false
|
this.subloading = false
|
this.$router.push({name: 'signSuccess', params: {type: 'signup'}})
|
} else {
|
this.subdisabled = false
|
this.subloading = false
|
this.$message({
|
message: res.message,
|
type: 'error'
|
})
|
}
|
})
|
},
|
changeType(type) {
|
this.member_type = type
|
},
|
changeTab () {
|
if (this.signtype === 'phone') {
|
this.signtype = 'email'
|
} else {
|
this.signtype = 'phone'
|
}
|
|
this.phoneNo = ''
|
this.email = ''
|
this.verCode = ''
|
this.verCodeTip = '获取验证码'
|
this.verCodeDisabled = false
|
this.delay = 60
|
this.password = ''
|
this.birthday = ''
|
this.confirmPassword = ''
|
this.subdisabled = true
|
this.subloading = false
|
|
if (timer) {
|
clearTimeout(timer)
|
}
|
}
|
},
|
destroyed () {
|
if (timer) {
|
clearTimeout(timer)
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.member-wrap {
|
text-align: center;
|
margin-top: 20vh;
|
.member-item {
|
display: inline-block;
|
width: 270px;
|
border-radius: 4px;
|
padding: 40px 0px;
|
cursor: pointer;
|
height: 200px;
|
vertical-align: top;
|
color: #ffffff;
|
}
|
|
.title {
|
font-size: 24px;
|
font-weight: bold;
|
margin-bottom: 30px;
|
}
|
.personal {
|
background: #1890ff;
|
box-shadow: 0 0 4px #1890ff;
|
}
|
.enterprise {
|
margin-left: 40px;
|
background: #fa8c16;
|
box-shadow: 0 0 4px #fa8c16;
|
}
|
}
|
.sign-form-wrap {
|
position: relative;
|
width: 1200px;
|
margin: 0 auto;
|
.logo-header {
|
position: relative;
|
background: #fafafa;
|
margin-bottom: 15px;
|
height: 50px;
|
padding: 7px 15px;
|
img {
|
height: 40px;
|
line-height: 50px;
|
}
|
.plat-name {
|
border-left: 2px solid #d9d9d9;
|
margin-left: 5px;
|
padding-left: 10px;
|
font-size: 16px;
|
}
|
}
|
|
.slider-block {
|
display: inline-block;
|
width: 350px;
|
margin-bottom: 20px;
|
}
|
|
.find-password {
|
position: absolute;
|
top: 15px;
|
right: 0px;
|
font-size: 13px;
|
color: #40a9ff;
|
cursor: pointer;
|
}
|
|
.el-tabs__nav-wrap.is-left::after {
|
height: 0;
|
}
|
.header {
|
margin: 0 auto;
|
text-align: center;
|
padding-top: 30px;
|
font-size: 20px;
|
|
.to-login {
|
display: block;
|
font-size: 13px;
|
|
a {
|
color: #40a9ff;
|
}
|
}
|
}
|
.center {
|
text-align: center;
|
margin-top: 35px;
|
.ver-code {
|
.el-input-group__append {
|
.el-button {
|
color: #40a9ff;
|
border: none;
|
}
|
}
|
}
|
.sub-button {
|
width: 350px;
|
border-radius: 4px;
|
margin-top: 30px;
|
background-color: #1890ff;
|
border-color: #1890ff;
|
}
|
.sub-button.is-disabled {
|
opacity: 0.5;
|
}
|
}
|
.password-wrap {
|
position: relative;
|
.el-icon-info {
|
position: absolute;
|
top: 9px;
|
margin-left: 5px;
|
color: #fa8c16;
|
}
|
}
|
}
|
|
@media (min-width: 1550px) {
|
.sign-form-wrap {
|
.center {
|
.sub-button {
|
width: 400px;
|
}
|
}
|
.slider-block {
|
width: 400px;
|
}
|
}
|
}
|
</style>
|
