<template>
|
<div class="sign-mob-form-wrap">
|
<div v-if="step ==='memberType'" 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>
|
<div v-if="step ==='signtype'">
|
<header>
|
<p class="title">明科账号</p>
|
<p class="tip">您要使用手机号还是邮箱地址来创建您的明科账号？</p>
|
<p class="tip">如果您使用邮箱地址，您仍需要提供一个手机号以用于验证您的身份。</p>
|
</header>
|
<div class="sign-type">
|
<el-button type="danger" @click="step = 'phone';signtype = 'phone'">使用手机号</el-button>
|
<el-button plain @click="step = 'email';signtype = 'email'">使用邮箱地址</el-button>
|
</div>
|
<div class="step-control-wrap">
|
<div class="step-control">
|
<el-button size="small" icon="el-icon-arrow-left" @click="prevStep()">上一步</el-button>
|
<el-button size="small" :disabled="nextDisabled" @click="nextStep()">下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
|
</div>
|
</div>
|
</div>
|
<div v-if="step ==='phone'">
|
<header>
|
<p class="title">手机号</p>
|
<p class="tip text-center">输入您可用作明科账号的手机号</p>
|
</header>
|
<div class="form-item">
|
<el-input size="small" placeholder="请输入手机号" @input="valChange()" v-model="phoneNo"></el-input>
|
</div>
|
<div class="form-item">
|
<SliderVerificationCode sliderWidth="38px" height="38px" v-model="pass" @change="handleChange" />
|
</div>
|
<div class="form-item">
|
<el-input size="small" class="ver-code" @input="valChange()" placeholder="请输入验证码" v-model="verCode">
|
<el-button slot="append" size="small" @click="getVerCode()" :disabled="verCodeDisabled"><span v-text="verCodeTip"></span></el-button>
|
</el-input>
|
</div>
|
<div class="form-item">
|
<el-input size="small" placeholder="请输入邮箱地址" @input="valChange()" v-model="email"></el-input>
|
</div>
|
<div class="step-control-wrap">
|
<div class="step-control">
|
<el-button size="small" icon="el-icon-arrow-left" @click="prevStep()">上一步</el-button>
|
<el-button size="small" :disabled="nextDisabled" @click="nextStep()">下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
|
</div>
|
</div>
|
</div>
|
<div v-if="step ==='email'">
|
<header>
|
<p class="title">邮箱地址</p>
|
<p class="tip text-center">输入您可用作明科账号的邮箱地址</p>
|
</header>
|
<div class="form-item">
|
<el-input size="small" placeholder="请输入邮箱地址" @input="valChange()" v-model="email"></el-input>
|
</div>
|
<div class="form-item">
|
<SliderVerificationCode sliderWidth="38px" height="38px" v-model="pass" @change="handleChange" />
|
</div>
|
<div class="form-item">
|
<el-input size="small" class="ver-code" @input="valChange()" placeholder="请输入验证码" v-model="verCode">
|
<el-button slot="append" size="small" @click="getVerCode()" :disabled="verCodeDisabled"><span v-text="verCodeTip"></span></el-button>
|
</el-input>
|
</div>
|
<div class="form-item">
|
<el-input size="small" placeholder="请输入手机号" @input="valChange()" v-model="phoneNo"></el-input>
|
</div>
|
<div class="step-control-wrap">
|
<div class="step-control">
|
<el-button size="small" icon="el-icon-arrow-left" @click="prevStep()">上一步</el-button>
|
<el-button size="small" :disabled="nextDisabled" @click="nextStep()">下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
|
</div>
|
</div>
|
</div>
|
<div v-if="step ==='password'">
|
<header>
|
<p class="title">密码</p>
|
<p class="tip text-center">设置安全系数高的密码，以保护您的账号安全</p>
|
</header>
|
<div class="form-item">
|
<el-input placeholder="密码" size="small" @input="valChange()" :maxlength="12" :show-password="true" v-model="password"></el-input>
|
</div>
|
<div class="form-item">
|
<el-input placeholder="确认密码" size="small" @input="valChange()" :maxlength="12" :show-password="true" v-model="confirmPassword"></el-input>
|
</div>
|
<div class="password-info">
|
<p class="title">密码需满足以下要求：</p>
|
<p class="tip">密码最大为12位</p>
|
<p class="tip">可以使用数字、字母及!@#$%&*()_</p>
|
</div>
|
<div class="step-control-wrap">
|
<div class="step-control">
|
<el-button size="small" icon="el-icon-arrow-left" @click="prevStep()">上一步</el-button>
|
<el-button size="small" :disabled="nextDisabled" @click="nextStep()">下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
|
</div>
|
</div>
|
</div>
|
<div v-if="step ==='birthday'">
|
<header>
|
<p class="title">出生日期</p>
|
<p class="tip text-center">用于确定您在法律范围内可以使用的服务</p>
|
</header>
|
<div class="form-item">
|
<div @click="calendarShow = true" class="birthday-select">
|
<span :style="{color: '#8c8c8c'}">出生日期</span>
|
<span :style="{float: 'right', color: '#8c8c8c'}" v-if="!birthday">请选择<i class="el-icon-arrow-right el-icon--right"></i></span>
|
<span :style="{float: 'right'}" v-if="birthday">{{birthday}}</span>
|
</div>
|
<div v-show="calendarShow" class="calendar-birthday" @click="calendarShow = false">
|
<div @click="stopEvent">
|
<inlineCalendar @change="datechange" mode="single" defaultDate="1997-07-01"/>
|
</div>
|
</div>
|
</div>
|
|
<div class="step-sub">
|
<el-button type="primary" @click="submitLogin()" :disabled="subdisabled" :loading="subloading">提交</el-button>
|
<el-button class="sub-prev" size="small" icon="el-icon-arrow-left" @click="prevStep()">上一步</el-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import Vue from 'vue'
|
import Utils from '@/utils'
|
import md5 from 'md5'
|
import Calendar from 'vue-mobile-calendar'
|
|
Vue.use(Calendar)
|
|
let timer = null
|
|
export default {
|
data() {
|
return {
|
step: 'memberType',
|
calendarShow: false,
|
signtype: '',
|
phoneNo: '',
|
email: '',
|
verCode: '',
|
verCodeTip: '获取验证码',
|
verCodeDisabled: false,
|
nextDisabled: true,
|
delay: 60,
|
password: '',
|
birthday: '',
|
confirmPassword: '',
|
subdisabled: true,
|
pass: false,
|
subloading: false,
|
member_type: ''
|
}
|
},
|
methods: {
|
stopEvent (e) {
|
e.stopPropagation()
|
},
|
datechange (date) {
|
if (date && date.format) {
|
this.birthday = date.format('YYYY-MM-DD')
|
this.subdisabled = false
|
}
|
},
|
changeType(type) {
|
this.member_type = type
|
this.step = 'signtype'
|
this.nextDisabled = true
|
},
|
prevStep () {
|
if (this.step === 'signtype') {
|
this.step = 'memberType'
|
} else if (this.step === 'phone' || this.step === 'email') {
|
this.step = 'signtype'
|
this.pass = false
|
this.phoneNo = ''
|
this.email = ''
|
this.verCode = ''
|
this.verCodeTip = '获取验证码'
|
this.verCodeDisabled = false
|
this.nextDisabled = true
|
this.delay = 60
|
this.password = ''
|
this.birthday = ''
|
this.confirmPassword = ''
|
if (timer) {
|
clearTimeout(timer)
|
}
|
} else if (this.step === 'password') {
|
this.password = ''
|
this.confirmPassword = ''
|
if (this.signtype !== 'email') {
|
this.step = 'phone'
|
} else {
|
this.step = 'email'
|
}
|
} else if (this.step === 'birthday') {
|
this.birthday = ''
|
this.step = 'password'
|
}
|
},
|
nextStep () {
|
if (this.step === 'phone' || this.step === 'email') {
|
if (!/^1[3456789]\d{9}$/.test(this.phoneNo)) {
|
this.$message({
|
message: '手机号码有误，请重填！',
|
type: 'warning'
|
})
|
return
|
} else if (!/^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(this.email)) {
|
this.$message({
|
message: '邮箱格式有误，请重填！',
|
type: 'warning'
|
})
|
return
|
}
|
this.step = 'password'
|
this.verCodeTip = '获取验证码'
|
this.verCodeDisabled = false
|
this.nextDisabled = true
|
this.delay = 60
|
if (timer) {
|
clearTimeout(timer)
|
}
|
} else if (this.step === 'password') {
|
if (!this.password || !this.confirmPassword) return
|
|
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
|
}
|
this.step = 'birthday'
|
}
|
},
|
handleChange () {
|
let valid = true
|
if ((this.step === 'phone' && !this.phoneNo) || (this.step === 'email' && !this.email)) {
|
valid = false
|
} else if (!this.pass) {
|
valid = false
|
}
|
|
if (valid) {
|
this.nextDisabled = false
|
} else {
|
this.nextDisabled = true
|
}
|
},
|
getVerCode () {
|
let error = false
|
let param = null
|
|
if (!this.pass) {
|
this.$message({
|
message: '请拖动滑块解锁！',
|
type: 'warning'
|
})
|
return
|
}
|
|
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-Z0-9._-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.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.verCodeTip = '获取验证码(60s)'
|
timer = setTimeout(this.resetVerCodeTip, 1000)
|
} else {
|
this.verCodeDisabled = false
|
this.$message({
|
message: res.message,
|
type: 'error'
|
})
|
}
|
})
|
},
|
valChange () {
|
if (this.step === 'phone' || this.step === 'email') {
|
if (!this.phoneNo || !this.email || !this.pass || !this.verCode) {
|
this.nextDisabled = true
|
} else {
|
this.nextDisabled = false
|
}
|
} else if (this.step === 'password') {
|
if (!this.password || !this.confirmPassword) {
|
this.nextDisabled = true
|
} else {
|
this.nextDisabled = false
|
}
|
}
|
},
|
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-Z0-9._-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.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'
|
})
|
}
|
})
|
}
|
},
|
destroyed () {
|
if (timer) {
|
clearTimeout(timer)
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.member-wrap {
|
text-align: center;
|
padding-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-top: 40px;
|
background: #fa8c16;
|
box-shadow: 0 0 4px #fa8c16;
|
}
|
}
|
.sign-mob-form-wrap {
|
position: relative;
|
width: 100vw;
|
min-height: 560px;
|
height: calc(100vh - 110px);
|
|
header {
|
padding: 30px 7vw 8vh;
|
|
.title {
|
text-align: center;
|
font-size: 20px;
|
font-weight: bold;
|
margin-bottom: 15px;
|
}
|
.tip {
|
font-size: 14px;
|
margin-bottom: 5px;
|
color: #8c8c8c;
|
}
|
.text-center {
|
text-align: center
|
}
|
}
|
|
.sign-type {
|
text-align: center;
|
padding-top: 25vh;
|
button {
|
border-radius: 35px;
|
padding: 10px 40px;
|
display: block;
|
margin: 0 auto;
|
width: 170px;
|
margin-top: 20px;
|
}
|
}
|
|
.form-item {
|
width: 85vw;
|
max-width: 350px;
|
margin: 0 auto 20px;
|
.ver-code {
|
.el-input-group__append {
|
.el-button {
|
color: #40a9ff;
|
border: none;
|
}
|
}
|
}
|
.birthday-select {
|
padding: 20px 5px;
|
}
|
}
|
|
.password-info {
|
width: 85vw;
|
max-width: 350px;
|
margin: 0 auto;
|
height: 90px;
|
.title {
|
font-weight: bold;
|
margin-bottom: 5px;
|
}
|
.tip {
|
font-size: 14px;
|
color: #8c8c8c;
|
}
|
}
|
.step-control-wrap {
|
position: absolute;
|
bottom: 20px;
|
width: 100vw;
|
left: 0;
|
}
|
.step-control {
|
width: 85vw;
|
max-width: 350px;
|
margin: 0 auto;
|
|
.el-button {
|
border: 0;
|
}
|
.el-button + .el-button {
|
float: right;
|
}
|
.el-button:not(.is-disabled) {
|
background: transparent!important;
|
color: #606266!important;
|
}
|
}
|
|
.step-sub {
|
position: relative;
|
text-align: center;
|
margin-top: calc(92vh - 370px);
|
.el-button:not(.sub-prev) {
|
width: 85vw;
|
max-width: 350px;
|
border-radius: 35px;
|
}
|
.el-button.sub-prev {
|
border: 0;
|
background: transparent!important;
|
color: #606266!important;
|
position: absolute;
|
top: 55px;
|
left: 10px;
|
}
|
}
|
.calendar-birthday {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
z-index: 100;
|
background: rgba(0, 0, 0, 0.3);
|
.m-calendar {
|
background: #fff;
|
position: absolute;
|
bottom: 0;
|
width: 100%;
|
.m-week-header {
|
font-size: 12px;
|
line-height: 30px;
|
height: 30px;
|
}
|
}
|
}
|
}
|
|
// @media (max-width: 750px) and (min-width: 0) {
|
// .sign-form-wrap {
|
// width: 100vw;
|
// .center {
|
// .sub-button {
|
// width: 300px;
|
// }
|
// }
|
// }
|
// }
|
</style>
|
