|
|
@@ -0,0 +1,494 @@
|
|
|
+<template>
|
|
|
+ <div class="business-enter">
|
|
|
+ <div class="banner"></div>
|
|
|
+ <div class="section-01">
|
|
|
+ <img src="/images/bussinessEnter/banner02.png" alt="">
|
|
|
+ <div class="register">
|
|
|
+ <div class="reg-shadow"></div>
|
|
|
+ <div class="reg-btn">企业注册</div>
|
|
|
+ <div class="reg-box">
|
|
|
+ <div class="form-group">
|
|
|
+ <input type="text" class="form-control phone"
|
|
|
+ placeholder="手机号码"
|
|
|
+ v-model="enterprise.mobile"
|
|
|
+ maxlength="11"
|
|
|
+ :class="{'err': enable}"
|
|
|
+ @blur="checkMobile(enterprise.mobile)"/>
|
|
|
+ <span class="help-list" v-text="mobileErrMsg"></span>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <input type="text" class="form-control code"
|
|
|
+ placeholder="短信验证码"
|
|
|
+ v-model="enterprise.code"
|
|
|
+ :class="{'err': !codeChecked}"
|
|
|
+ @change="checkMsgCode(enterprise.code)"/>
|
|
|
+ <template>
|
|
|
+ <el-popover
|
|
|
+ placement="top"
|
|
|
+ width="300"
|
|
|
+ v-model="visible">
|
|
|
+ <div class="valid-code">
|
|
|
+ <input type="text"
|
|
|
+ v-model="enterprise.ImgCode">
|
|
|
+ <img id="captchaImage2" :src="`${address}/sso/login/checkCode`" alt="">
|
|
|
+ <span @click="getImgCode">看不清换一张</span>
|
|
|
+ </div>
|
|
|
+ <div class="valid-btn">
|
|
|
+ <el-button size="mini" type="text" @click="visible = false">取消</el-button>
|
|
|
+ <el-button type="primary" size="mini" @click="getCode">确定</el-button>
|
|
|
+ </div>
|
|
|
+ <button class="code-btn"
|
|
|
+ slot="reference"
|
|
|
+ v-show="sendEnterpriseCode"
|
|
|
+ :disabled="enable">获取验证码</button>
|
|
|
+ </el-popover>
|
|
|
+ </template>
|
|
|
+ <button class="code-btn" v-show="!sendEnterpriseCode">已发送({{enterprise_time}}s)</button>
|
|
|
+ <span class="help-list" v-text="codeErrMsg"></span>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="check-box-wrap">
|
|
|
+ <input type="checkbox"
|
|
|
+ id="check-box"
|
|
|
+ v-model="isRead"
|
|
|
+ :checked="isRead">
|
|
|
+ <label class="agr" for="check-box">我已阅读并同意<a :href="`${address}/common/agreement`" target="_blank">《优软云服务条款》</a></label>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <span class="next-btn" @click="nextStep">下一步</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="section-02"></div>
|
|
|
+ <div class="section-03">
|
|
|
+ <img src="/images/bussinessEnter/banner04.jpg" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="section-04">
|
|
|
+ <div class="handle-btn">
|
|
|
+ <div class="ps-btn">
|
|
|
+ <a @click="onRegisterClick">立即入驻</a>
|
|
|
+ <a href="https://mall.usoftchina.com/help/helpDetail/28" target="_blank">联系企业</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="loading" v-show="showLoading"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ name: 'businessEnter',
|
|
|
+ layout: 'main',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ enterprise: {
|
|
|
+ mobile: '',
|
|
|
+ code: '',
|
|
|
+ ImgCode: ''
|
|
|
+ },
|
|
|
+ mobileErrMsg: '一个手机可注册多个企业',
|
|
|
+ codeErrMsg: '',
|
|
|
+ enable: true,
|
|
|
+ codeChecked: false,
|
|
|
+ showLoading: false,
|
|
|
+ visible: false,
|
|
|
+ address: '',
|
|
|
+ sendEnterpriseCode: true,
|
|
|
+ token: '',
|
|
|
+ enterprise_time: 0,
|
|
|
+ isRead: true,
|
|
|
+ isHasRegister: false,
|
|
|
+ isHasEmail: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.getImgCode()
|
|
|
+ this.getAddress()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 立即入驻
|
|
|
+ onRegisterClick () {
|
|
|
+ this.$http.get('/register/page').then(response => {
|
|
|
+ if (response.data) {
|
|
|
+ window.open(response.data.content)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ checkMobile (flg) {
|
|
|
+ let reg = /^1[0-9]{10}$/
|
|
|
+ if (flg === '' && !flg) {
|
|
|
+ this.enable = true
|
|
|
+ this.mobileErrMsg = '请填写正确的手机号'
|
|
|
+ } else {
|
|
|
+ if (!reg.test(flg)) {
|
|
|
+ this.enable = true
|
|
|
+ this.mobileErrMsg = '请填写正确的手机号'
|
|
|
+ } else {
|
|
|
+ this.mobileErrMsg = ''
|
|
|
+ this.enable = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getAddress () {
|
|
|
+ this.address = process.env.ssoUrl
|
|
|
+ },
|
|
|
+ getImgCode () {
|
|
|
+ let imgSrc = document.getElementById('captchaImage2')
|
|
|
+ imgSrc.setAttribute('src', this.address + '/sso/resetPwd/checkCaptcha?timestamp=' + (new Date()).valueOf())
|
|
|
+ },
|
|
|
+ getCode () {
|
|
|
+ this.showLoading = true
|
|
|
+ if (!this.enable) {
|
|
|
+ this.$http.get(`${this.address}/sso/userspace/register/checkCode`, {params: {mobile: this.enterprise.mobile, timestamp: new Date().getTime() + '', code: this.enterprise.ImgCode}})
|
|
|
+ .then(response => {
|
|
|
+ this.showLoading = false
|
|
|
+ if (response.data) {
|
|
|
+ this.token = response.data.token
|
|
|
+ if (response.data.errMsg) {
|
|
|
+ this.$message({
|
|
|
+ message: response.data.errMsg,
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ this.enterprise.ImgCode = ''
|
|
|
+ this.getImgCode()
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.token !== '') {
|
|
|
+ this.$message({
|
|
|
+ message: '验证码已经发送到您的手机，请注意查收',
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
+ this.sendEnterpriseCode = false
|
|
|
+ this.enterprise_time = 60
|
|
|
+ this.visible = false
|
|
|
+ this.enterprise.ImgCode = ''
|
|
|
+ let enterpriseTime = setInterval(() => {
|
|
|
+ this.enterprise_time--
|
|
|
+ if (this.enterprise_time <= 0) {
|
|
|
+ this.sendEnterpriseCode = true
|
|
|
+ clearInterval(enterpriseTime)
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ this.getImgCode()
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return Promise.reject(response.data)
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ this.showLoading = false
|
|
|
+ this.$message.error(err.errMsg)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ checkMsgCode (flg) {
|
|
|
+ if (!flg && flg === '') {
|
|
|
+ this.codeErrMsg = '请填写正确的验证码'
|
|
|
+ this.codeChecked = false
|
|
|
+ } else {
|
|
|
+ if (this.enterprise.mobile === '') {
|
|
|
+ this.mobileErrMsg = '请填写正确的手机号'
|
|
|
+ this.codeChecked = false
|
|
|
+ } else {
|
|
|
+ if (this.token) {
|
|
|
+ if (flg.length === 6) {
|
|
|
+ let param = new FormData()
|
|
|
+ param.append('mobile', this.enterprise.mobile)
|
|
|
+ param.append('code', this.enterprise.code)
|
|
|
+ param.append('token', this.token)
|
|
|
+ let config = {
|
|
|
+ headers: {'Content-Type': 'multipart/form-data'}
|
|
|
+ }
|
|
|
+ this.$http.post(`${this.address}/sso/userspace/register/checkCode`, param, config)
|
|
|
+ .then(response => {
|
|
|
+ if (response.data.success) {
|
|
|
+ this.codeChecked = true
|
|
|
+ } else {
|
|
|
+ this.codeChecked = false
|
|
|
+ return Promise.reject(response.data)
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ this.codeChecked = false
|
|
|
+ this.codeErrMsg = err.errMsg
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.codeChecked = false
|
|
|
+ this.codeErrMsg = '请输入正确的验证码'
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.codeChecked = false
|
|
|
+ this.codeErrMsg = '请先获取验证码'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ nextStep () {
|
|
|
+ if (this.enable && !this.codeChecked) {
|
|
|
+ this.checkMobile(this.enterprise.mobile)
|
|
|
+ this.checkMsgCode(this.enterprise.code)
|
|
|
+ } else {
|
|
|
+ if(!this.isRead) {
|
|
|
+ this.$message.error('您对阅读条款未做勾选')
|
|
|
+ } else {
|
|
|
+ this.showLoading = true
|
|
|
+ let param = new FormData()
|
|
|
+ param.append('mobile', this.enterprise.mobile)
|
|
|
+ param.append('code', this.enterprise.code)
|
|
|
+ param.append('appId', this.$route.params.appId)
|
|
|
+ param.append('token', this.token)
|
|
|
+ let config = {
|
|
|
+ headers: {'Content-Type': 'multipart/form-data'}
|
|
|
+ }
|
|
|
+ this.$http.post(`${this.address}/sso/userspace/register/checkAdminTel`, param, config)
|
|
|
+ .then(response => {
|
|
|
+ this.showLoading = false
|
|
|
+ if (response.data.success) {
|
|
|
+ if (response.data.content.hasRegister) {
|
|
|
+ this.isHasRegister = true
|
|
|
+ if (response.data.content.hasEmail) {
|
|
|
+ this.isHasEmail = true
|
|
|
+ } else {
|
|
|
+ this.isHasEmail = false
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.isHasRegister = false
|
|
|
+ this.isHasEmail = false
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ window.location.href = `${this.address}/register/enterpriseRegistration`
|
|
|
+ return Promise.reject(response.data)
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ this.$message.error(err.errMsg)
|
|
|
+ this.showLoading = false
|
|
|
+ this.enterprise_time = 0
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .business-enter {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ .banner{
|
|
|
+ width: 100%;
|
|
|
+ height: 500px;
|
|
|
+ background: url('/images/bussinessEnter/banner01.png') 50%/auto 100% no-repeat #fcde64;
|
|
|
+ }
|
|
|
+ .section-01 {
|
|
|
+ position: relative;
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ >img{
|
|
|
+ margin-top: -15px;
|
|
|
+ width: 100%;
|
|
|
+ height: 625px;
|
|
|
+ }
|
|
|
+ .register {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 1190px;
|
|
|
+ position: absolute;
|
|
|
+ top: 198px;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -595px;
|
|
|
+ .reg-shadow {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 208px;
|
|
|
+ height: 11px;
|
|
|
+ background-image: linear-gradient(0deg,
|
|
|
+ #f0116a 0%,
|
|
|
+ #b91552 100%),
|
|
|
+ linear-gradient(
|
|
|
+ #f0116a,
|
|
|
+ #f0116a);
|
|
|
+ border-radius: 10px 10px 0px 0px;
|
|
|
+ }
|
|
|
+ .reg-btn{
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 208px;
|
|
|
+ height: 49px;
|
|
|
+ line-height: 49px;
|
|
|
+ font-size: 25px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ background-color: #f0116a;
|
|
|
+ border-radius: 0 0 4px 4px;
|
|
|
+ }
|
|
|
+ .reg-box{
|
|
|
+ position: relative;
|
|
|
+ padding: 34px 0 0 30px;
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 646px;
|
|
|
+ height: 262px;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #7058ff;
|
|
|
+ border-radius: 0 0 30px 30px;
|
|
|
+ .form-group {
|
|
|
+ overflow: hidden;
|
|
|
+ height: 42px;
|
|
|
+ line-height: 42px;
|
|
|
+ input.form-control{
|
|
|
+ padding-left: 20px;
|
|
|
+ float: left;
|
|
|
+ height: 42px;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #9d8cfc;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ input.phone{
|
|
|
+ width: 358px;
|
|
|
+ }
|
|
|
+ span.help-list{
|
|
|
+ margin-left: 10px;
|
|
|
+ float: left;
|
|
|
+ width: 225px;
|
|
|
+ text-align: left;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #e6e6e6;
|
|
|
+ }
|
|
|
+ input.code{
|
|
|
+ width: 208px;
|
|
|
+ }
|
|
|
+ input.err{
|
|
|
+ border-color: #f56c6c;
|
|
|
+ }
|
|
|
+ .code-btn{
|
|
|
+ float: left;
|
|
|
+ margin-left: 10px;
|
|
|
+ display: inline-block;
|
|
|
+ width: 141px;
|
|
|
+ height: 42px;
|
|
|
+ line-height: 42px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #9d8cfc;
|
|
|
+ background-color: #baaeff;
|
|
|
+ border-radius: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ outline: none;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ button.code-btn[disabled] {
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
+ .check-box-wrap {
|
|
|
+ float: left;
|
|
|
+ padding-left: 9px;
|
|
|
+ input{
|
|
|
+ margin-top: 13px;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ background-color: #baaeff;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ .agr{
|
|
|
+ padding-left: 10px;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #e6e6e6;
|
|
|
+ a{
|
|
|
+ font-size: 20px;
|
|
|
+ color: #e6e6e6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .next-btn{
|
|
|
+ float: left;
|
|
|
+ display: inline-block;
|
|
|
+ width: 358px;
|
|
|
+ height: 42px;
|
|
|
+ line-height: 42px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #3d00ff;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ &:first-child {
|
|
|
+ margin-bottom: 18px;
|
|
|
+ }
|
|
|
+ &:nth-child(2),&:nth-child(3){
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .section-02 {
|
|
|
+ width: 100%;
|
|
|
+ height: 660px;
|
|
|
+ background: url('/images/bussinessEnter/banner03.png') 50%/auto 100% no-repeat #fff;
|
|
|
+ }
|
|
|
+ .section-03{
|
|
|
+ width: 100%;
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ height: 630px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .section-04{
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 100%;
|
|
|
+ height: 760px;
|
|
|
+ text-align: center;
|
|
|
+ background: url('/images/bussinessEnter/banner05.jpg') 50%/auto 100% no-repeat #fff;
|
|
|
+ .handle-btn {
|
|
|
+ position: relative;
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 1190px;
|
|
|
+ height: 760px;
|
|
|
+ .ps-btn {
|
|
|
+ margin: 0 auto;
|
|
|
+ overflow: hidden;
|
|
|
+ position: absolute;
|
|
|
+ top: 635px;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -198px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ a{
|
|
|
+ float:left;
|
|
|
+ display: inline-block;
|
|
|
+ width: 190px;
|
|
|
+ height: 59px;
|
|
|
+ line-height: 59px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 27px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ cursor: pointer;
|
|
|
+ &:first-child {
|
|
|
+ background-color: #eb162c;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ background-color: #114fa4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
|
|
+ color: #9d8cfc; opacity:1;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::-moz-placeholder { /* Mozilla Firefox 19+ */
|
|
|
+ color: #9d8cfc;opacity:1;
|
|
|
+ }
|
|
|
+
|
|
|
+ input:-ms-input-placeholder{
|
|
|
+ color: #9d8cfc;opacity:1;
|
|
|
+ }
|
|
|
+
|
|
|
+ input::-webkit-input-placeholder{
|
|
|
+ color: #9d8cfc;opacity:1;
|
|
|
+ }
|
|
|
+</style>
|
huangb
