招商

pages/businessEnter/index.vue

@@ -4,59 +4,138 @@
     <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  v-show="goNextStep" class="reg-content">
+            <div class="form-group">
+              <input type="text" class="form-control phone"
+                     placeholder="手机号码"
+                     v-model="enterprise.mobile"
+                     maxlength="11"
+                     :class="{'err': !mobileChecked}"
+                     @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="mobileChecked">获取验证码</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 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 v-show="!goNextStep" class="reg-content">
+            <div class="form-group">
+              <input type="text" class="form-control"
+                     placeholder="企业名称"
+                     v-model="enterprise.spaceName"
+                     maxlength="20"
+                     :class="{'err': !spaceNameChecked}"
+                     @blur="checkSpaceName(enterprise.spaceName)"/>
+              <span class="help-list" v-text="spaceNameErrMsg"></span>
+            </div>
+            <div class="form-group">
+              <input type="text" class="form-control"
+                     placeholder="营业执照号"
+                     v-model="enterprise.businessCode"
+                     maxlength="20"
+                     :class="{'err': !businessCodeChecked}"
+                     @blur="checkBusinessCode(enterprise.businessCode)"/>
+              <span class="help-list" v-text="businessCodeErrMsg"></span>
+            </div>
+            <div class="form-group" v-if="!isHasRegister">
+              <input type="text" class="form-control"
+                     placeholder="管理员姓名"
+                     v-model="enterprise.vipName"
+                     maxlength="20"
+                     :class="{'err': !vipNameChecked}"
+                     @blur="checkVipName(enterprise.vipName)"/>
+              <span class="help-list" v-text="vipNameErrMsg"></span>
+            </div>
+            <div class="form-group">
+              <input type="text" class="form-control"
+                     placeholder="登录密码"
+                     v-model="enterprise.password"
+                     maxlength="20"
+                     @blur="checkPassword(enterprise.password)"
+                     @change="passwordStrength(enterprise.password)"/>
+              <span class="help-list" v-text="mobileErrMsg"></span>
+            </div>
+            <div class="pwd" v-if="!isHasRegister"
+                 :class="{sm: strength === '弱', md: strength === '中', lar: strength === '强', low: strength === ''}">
+                 密码强度 <em></em><em></em><em></em>
+              <span v-text="strength === '弱' ? '弱' : strength === '中' ? '中' : strength === '强' ? '强' : ''">弱</span>
+            </div>
+            <div class="form-group" v-if="isHasRegister">
+              <input type="text" class="form-control"
+                     placeholder="密码确认"
+                     v-model="enterprise.password"
+                     maxlength="20"
+                     @blur="checkRegisterPassword(enterprise.password)"/>
+              <span class="help-list" v-text="phoneIsRegisterTip"></span>
+            </div>
+            <div class="form-group" v-if="!isHasRegister">
+              <input type="text" class="form-control"
+                     placeholder="密码确认"
+                     v-model="enterprise.confirm"
+                     maxlength="20"
+                     @blur="checkConfirm(enterprise.confirm)"/>
+              <span class="help-list" v-text="mobileErrMsg"></span>
+            </div>
+            <div class="form-group" v-if="!isHasEmail">
+              <input type="text" class="form-control"
+                     placeholder="联系邮箱"
+                     v-model="enterprise.email"
+                     maxlength="20"
+                     @blur="checkEmail(enterprise.email)"/>
+              <span class="help-list" v-text="mobileErrMsg"></span>
+            </div>
+            <div class="form-group">
+              <label class="check-box-wrap">
+                <input type="checkbox"
+                       id="check-boxes"
+                       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>
@@ -85,12 +164,24 @@
         enterprise: {
           mobile: '',
           code: '',
-          ImgCode: ''
+          ImgCode: '',
+          spaceName: '',
+          businessCode: '',
+          vipName: '',
+          password: '',
+          confirm: '',
+          email: ''
         },
         mobileErrMsg: '一个手机可注册多个企业',
         codeErrMsg: '',
-        enable: true,
+        spaceNameErrMsg: '',
+        businessCodeErrMsg: '',
+        vipNameErrMsg: '',
+        mobileChecked: true,
         codeChecked: false,
+        spaceNameChecked: false,
+        businessCodeChecked: false,
+        vipNameChecked: false,
         showLoading: false,
         visible: false,
         address: '',
@@ -99,7 +190,10 @@
         enterprise_time: 0,
         isRead: true,
         isHasRegister: false,
-        isHasEmail: false
+        isHasEmail: false,
+        goNextStep: false,
+        phoneIsRegisterTip: '该手机号已有优软账号，请输入原账号的登录密码进行校验确认',
+        strength: ''
       }
     },
     mounted () {
@@ -120,15 +214,15 @@
       checkMobile (flg) {
         let reg = /^1[0-9]{10}$/
         if (flg === '' && !flg) {
-          this.enable = true
+          this.mobileChecked = true
           this.mobileErrMsg = '请填写正确的手机号'
         } else {
           if (!reg.test(flg)) {
-            this.enable = true
+            this.mobileChecked = true
             this.mobileErrMsg = '请填写正确的手机号'
           } else {
             this.mobileErrMsg = ''
-            this.enable = false
+            this.mobileChecked = false
           }
         }
       },
@@ -141,7 +235,7 @@
       },
       getCode () {
         this.showLoading = true
-        if (!this.enable) {
+        if (!this.mobileChecked) {
           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
@@ -205,6 +299,7 @@
                   .then(response => {
                     if (response.data.success) {
                       this.codeChecked = true
+                      this.codeErrMsg = ''
                     } else {
                       this.codeChecked = false
                       return Promise.reject(response.data)
@@ -225,7 +320,7 @@
         }
       },
       nextStep () {
-        if (this.enable && !this.codeChecked) {
+        if (this.mobileChecked && !this.codeChecked) {
           this.checkMobile(this.enterprise.mobile)
           this.checkMsgCode(this.enterprise.code)
         } else {
@@ -236,7 +331,7 @@
             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('appId', 'mall')
             param.append('token', this.token)
             let config = {
               headers: {'Content-Type': 'multipart/form-data'}
@@ -245,6 +340,7 @@
               .then(response => {
                 this.showLoading = false
                 if (response.data.success) {
+                  this.goNextStep = false
                   if (response.data.content.hasRegister) {
                     this.isHasRegister = true
                     if (response.data.content.hasEmail) {
@@ -257,7 +353,7 @@
                     this.isHasEmail = false
                   }
                 } else {
-                  window.location.href = `${this.address}/register/enterpriseRegistration`
+                  this.goNextStep = true
                   return Promise.reject(response.data)
                 }
               }).catch(err => {
@@ -267,7 +363,79 @@
               })
           }
         }
-      }
+      },
+      checkSpaceName (flg) {
+        if (!flg && flg === '') {
+          this.spaceNameErrMsg = '请填写正确的企业名称'
+          this.spaceNameChecked = false
+        } else {
+          this.$http.get(`${this.address}/api/userspace/checkSpaceName`, {params: {spaceName: this.enterprise.spaceName}})
+            .then(response => {
+              if (response.data.success) {
+                this.spaceNameChecked = true
+                this.spaceNameErrMsg = ''
+              } else {
+                this.spaceNameChecked = false
+                return Promise.reject(response.data)
+              }
+            }).catch(err => {
+              this.spaceNameErrMsg = err.errMsg
+            })
+        }
+      },
+      checkBusinessCode (flg) {
+        if (!flg && flg === '') {
+          this.businessCodeErrMsg = '请填写正确的营业执照号'
+          this.businessCodeChecked = false
+        } else {
+          let reg = /^[A-Za-z0-9]+$/
+          if (!reg.test(flg)) {
+            this.businessCodeErrMsg = '请填写正确的营业执照号'
+            this.businessCodeChecked = false
+          } else {
+            this.$http.get(`${this.address}/api/userspace/checkBusinessCode`, {params: {spaceName: this.enterprise.businessCode}})
+              .then(response => {
+                if (response.data.success) {
+                  this.businessCodeChecked = true
+                  this.businessCodeErrMsg = ''
+                } else {
+                  this.businessCodeChecked = false
+                  return Promise.reject(response.data)
+                }
+              }).catch(err => {
+                this.businessCodeErrMsg = err.errMsg
+              })
+          }
+        }
+      },
+      checkVipName (flg) {
+        if (this.isHasRegister) {
+          this.vipNameChecked = true
+        } else {
+          if (!flg && flg === '') {
+            this.vipNameChecked = false
+            this.vipNameErrMsg = '请填写正确的管理员姓名'
+          } else {
+            this.vipNameChecked = true
+            this.vipNameErrMsg = ''
+          }
+        }
+      },
+      passwordStrength (flg) {
+        let reg1 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]))|((?=.*[0-9])((?=.*[a-zA-Z]))(?=.*[^a-zA-Z0-9]))).*$/
+        let reg2 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z]))|((?=.*[0-9])(?=.*[A-Z]))).*$/
+        if (reg1.test(flg)) {
+          this.strength = '强'
+        } else if (reg2.test(flg)) {
+          this.strength = '中'
+        } else {
+          this.strength = '弱'
+        }
+      },
+      checkPassword (flg) {},
+      checkRegisterPassword (flg) {},
+      checkConfirm (flg) {},
+      checkEmail (flg) {}
     }
   }
 </script>
@@ -289,13 +457,13 @@
       >img{
         margin-top: -15px;
         width: 100%;
-        height: 625px;
+        height: 820px;
       }
       .register {
         margin: 0 auto;
         width: 1190px;
         position: absolute;
-        top: 198px;
+        top: 170px;
         left: 50%;
         margin-left: -595px;
         .reg-shadow {
@@ -324,20 +492,19 @@
         }
         .reg-box{
           position: relative;
-          padding: 34px 0 0 30px;
+          padding: 34px 0 10px 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;
+              width: 358px;
               height: 42px;
               font-size: 20px;
               color: #9d8cfc;
@@ -352,7 +519,7 @@
               float: left;
               width: 225px;
               text-align: left;
-              font-size: 20px;
+              font-size: 16px;
               color: #e6e6e6;
             }
             input.code{
@@ -381,6 +548,7 @@
               cursor: not-allowed;
             }
             .check-box-wrap {
+              position: relative;
               float: left;
               padding-left: 9px;
               input{
@@ -391,6 +559,12 @@
                 border-radius: 5px;
               }
               .agr{
+                position: absolute;
+                top: 8px;
+                left: 26px;
+                width: 400px;
+                display: inline-table;
+                text-align: left;
                 padding-left: 10px;
                 font-size: 20px;
                 font-weight: normal;
@@ -414,10 +588,71 @@
               border-radius: 5px;
             }
             &:first-child {
-              margin-bottom: 18px;
+              margin-bottom: 14px;
+            }
+          }
+          .pwd{
+            margin: -10px 0 0 19px;
+            height: 40px;
+            line-height: 40px;
+            text-align: left;
+            font-size: 16px;
+            color: #fff;
+            span{
+              font-size: 16px;
+              color: #fff;
+            }
+            em{
+              display: inline-block;
+              margin: 0 8px 2px 0;
+              width: 24px;
+              height: 6px;
+              border: solid 1px #ffffff;
+              &:first-child {
+                margin-left: 13px;
+              }
+            }
+          }
+          .pwd.sm{
+            color: #fff;
+            em {
+              background: #bfbfbf;
+              &:first-child{
+                background: #ff4e00;
+              }
+            }
+            span{
+              color: #ff4e00;
+            }
+          }
+          .pwd.md{
+            color: #fff;
+            em {
+              background: #22ac38;
+              &:nth-child(3){
+                background: #bfbfbf;
+              }
+            }
+            span{
+              color: #22ac38;
+            }
+          }
+          .pwd.lar{
+            color: #fff;
+            em {
+              background: #00a0e9;
+            }
+            span{
+              color: #00a0e9;
+            }
+          }
+          .pwd.low{
+            color: #fff;
+            em {
+              background: #bfbfbf;
             }
-            &:nth-child(2),&:nth-child(3){
-              margin-bottom: 8px;
+            span{
+              color: #00a0e9;
             }
           }
         }