sso-ssr/components/certification/EnterpriseCertification.vue

<template>
  <div class="certification" @click="onHideBox">
    <div class="container">
      <div class="content" v-show="enterpriseRegister">
        <div class="content-top">
          <h3>企业认证</h3>
          <div class="step">
            <img src="/images/all/step01.png" alt=""/>
            <div class="step-item"><span class="active">认证申请</span><span>等待审核</span><span>审核结果</span></div>
          </div>
        </div>
        <div>
          <el-form :model="enterprise" :rules="rules" ref="enterprise" label-width="100px" class="demo-ruleForm">
            <el-form-item prop="spaceName">
              <el-input type="text"
                        v-model="enterprise.spaceName"
                        v-bind:class="{ active: isSpaceNameValid }"
                        auto-complete="off"
                        placeholder="企业名称"
              ></el-input>
              <span class="tip exist" v-show="isSpaceNameValid">该企业已被认证，请确认。<a href="https://www.ubtob.com/contact">仍有问题？</a></span>
            </el-form-item>
            <el-form-item prop="businessCode">
              <el-input type="text"
                        v-model="enterprise.businessCode"
                        v-bind:class="{ active: isBusinessCodeValid }"
                        auto-complete="off"
                        placeholder="营业执照号"></el-input>
              <span class="tip exist" v-show="isBusinessCodeValid">该企业已被认证，请确认。<a href="https://www.ubtob.com/contact">仍有问题？</a></span>
            </el-form-item>
            <el-form-item prop="businessImage" class="padding55">
              <a class="x-btn-blank" title="上传营业执照扫描件" v-bind:class="{ correct: uploadFileChecked }">
                <i class="fa fa-picture-o"></i>
                <span class="upload">上传营业执照扫描件</span>
                <input type="file"
                       class="form-control file-input"
                       name="name"
                       accept="image/jpeg,image/jpg,image/gif,image/bmp,image/png,.pdf"
                       @change="upload"/>
              </a>
              <a class="thumbnail" v-if="enterprise.businessCodeImage !== ''"><img class="previewImg" alt="" :src="enterprise.businessCodeImage"></a>
            </el-form-item>
            <el-form-item prop="corporation">
              <el-input v-model="enterprise.corporation" placeholder="法定代表人"></el-input>
            </el-form-item>
            <el-form-item prop="regAddress" class="padding45">
              <input type="text" readonly aria-haspopup="true" aria-expanded="false"
                     @click="onShowAddress"
                     v-model="enterprise.regAddress"
                     v-bind:class="{ correct: addressCheck }"
                     class="form-control"
                     name="name"
                     placeholder="注册地址"/>
              <i class="fa fa-map-marker"></i>
              <div v-show="showAddressBox"
                   @mouseenter="isShowAddressBox = true"
                   @mouseleave="isShowAddressBox = false"
                   style="display: block;" class="dropdown-menu x-union-menu" aria-labelledby="address">
                <div class="x-union-header">
                  <div>省份</div>
                  <div>城市</div>
                  <div>县区</div>
                  <div class="x-item-ext">详细地址</div>
                </div>
                <div class="x-union-list">
                  <ul class="list-unstyled">
                    <li v-for="province in cityData.province"
                        :class="province == address.regProvince ? 'active' : ''"
                        v-text="province"
                        @click="getCity(province)"></li>
                  </ul>
                  <ul class="list-unstyled">
                    <li v-for="city in cityData.city"
                        :class="city == address.regCity ? 'active' : ''"
                        v-text="city"
                        @click="getDistrict(city)"></li>
                  </ul>
                  <ul class="list-unstyled">
                    <li v-for="district in cityData.district"
                        v-text="district"
                        :class="district == address.regDistrict ? 'active' : ''"
                        @click="chooseDistrict(district)"></li>
                  </ul>
                  <div class="x-item-ext">
                    <div class="form-group">
                      <div class="col-sm-12">
                        <textarea id="street" name="street" rows="4" v-model="address.regStreet" class="form-control x-input" placeholder="xx路xx大厦xx栋xx楼xx室"></textarea>
                      </div>
                    </div>
                    <div class="text-right">
                      <a class="register-btn btn-submit" @click="submitAddress">确定</a>
                      <a @click="showAddressBox = false" class="register-btn btn-console">取消</a>
                    </div>
                  </div>
                </div>
              </div>
            </el-form-item>
            <el-form-item>
              <a class="btn finish"
                 :disabled="!checked || !spaceNameChecked || !businessCodeChecked || !corporationChecked || !uploadFileChecked || !addressCheck"
                 @click="submitForm">提交</a>
            </el-form-item>
            <el-form-item>
              <el-checkbox name="type" v-model="checked" @click="checkboxIsChecked"></el-checkbox>
              <span class="agree">我已阅读并同意 <a href="/common/agreement">《优软云服务条款》</a></span>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="content" v-show="!enterpriseRegister">
        <div class="content-top">
          <h3>企业认证</h3>
          <div class="step">
            <img src="/images/all/step02.png" alt=""/>
            <div class="step-item"><span class="active">认证申请</span><span class="active">等待审核</span><span>审核结果</span></div>
          </div>
        </div>
        <div class="content-bottom">
          <p><img src="/images/all/await.png" alt=""/>企业认证申请已提交，等待审核中</p>
          <span>我们会在1个工作日内审核您的资料，请耐心等待...</span>
          <div class="close-btn">关闭</div>
        </div>
      </div>
      <div class="content" style="display: none;">
        <div class="content-top">
          <h3>企业认证</h3>
          <div class="step">
            <img src="/images/all/step03.png" alt=""/>
            <div class="step-item"><span class="active">认证申请</span><span class="active">等待审核</span><span class="active">审核结果</span></div>
          </div>
        </div>
        <div class="content-bottom">
          <p class="pass"><img src="/images/all/times.png" alt=""/>审核不通过</p>
          <span>原因：您上传的营业执由于被多个帐号认证，请勿重复提交！</span>
          <div class="close-btn">重新认证</div>
        </div>
      </div>
      <div class="content" style="display: none;">
        <div class="content-top">
          <h3>企业认证</h3>
          <div class="step">
            <img src="/images/all/step03.png" alt=""/>
            <div class="step-item"><span class="active">认证申请</span><span class="active">等待审核</span><span class="active">审核结果</span></div>
          </div>
        </div>
        <div class="content-bottom">
          <p class="passed"><img src="/images/all/pass.png" alt=""/>审核通过</p>
          <span>恭喜您，您提交的企业认证申请通过审核了！</span>
          <div class="close-btn">关闭</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'enterpriseCertification',
    data () {
//      企业认证第一步
      var validateSpaceName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请填写正确的企业名称'))
          this.spaceNameChecked = false
          this.isSpaceNameValid = false
        } else {
          if (this.enterprise.spaceName !== '') {
            if (value.length > 20) {
              callback(new Error('输入长度过长，20个字符以内'))
            } else {
              this.$http.get(`/api/userspace/name/valid`, {params: {spaceName: this.enterprise.spaceName}})
                .then(response => {
                  if (!response.data.content.isValid) {
                    this.spaceNameChecked = true
                    this.isSpaceNameValid = false
                  } else {
                    this.spaceNameChecked = false
                    this.isSpaceNameValid = true
                    return Promise.reject(response.data)
                  }
                }).catch(err => {
//                  console.log(err)
                  this.$message.error(err.errMsg)
                })
            }
          }
          callback()
        }
      }
      var validateBusinessCode = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请填写正确的营业执照号'))
          this.businessCodeChecked = false
          this.isBusinessCodeValid = false
        } else {
          if (this.enterprise.businessCode !== '') {
            if (value.length > 20) {
              callback(new Error('输入长度过长，20个字符以内'))
            } else {
              this.$http.get(`/api/userspace/businessCode/valid`, {params: {businessCode: this.enterprise.businessCode}})
                .then(response => {
                  if (!response.data.content.isValid) {
                    this.businessCodeChecked = true
                    this.isBusinessCodeValid = false
                  } else {
                    this.businessCodeChecked = false
                    this.isBusinessCodeValid = true
                    return Promise.reject(response.data)
                  }
                }).catch(err => {
//                  console.log(err)
                  this.$message.error(err.errMsg)
                })
            }
          }
          callback()
        }
      }
      var validateCorporation = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请填写正确的法定代表人'))
          this.corporationChecked = false
        } else {
          if (this.enterprise.corporation !== '') {
            if (value.length > 20) {
              callback(new Error('输入长度过长，20个字符以内'))
            } else {
              this.corporationChecked = true
            }
          }
          callback()
        }
      }
      return {
        enterpriseRegister: true,
        enterprise: {
          spaceName: '',
          businessCode: '',
          corporation: '',
          regAddress: '',
          businessCodeImage: ''
        },
        checked: true,
        showAddressBox: false,
        isShowAddressBox: false,
        isSpaceNameValid: false,
        isBusinessCodeValid: false,
        spaceNameChecked: false,
        businessCodeChecked: false,
        corporationChecked: false,
        uploadFileChecked: false,
        addressCheck: false,
        allCityData: {},
        cityData: {
          province: [],
          city: [],
          district: []
        },
        address: {
          regProvince: '',
          regCity: '',
          regDistrict: '',
          regStreet: ''
        },
//        企业认证第一步
        rules: {
          spaceName: [
            {validator: validateSpaceName, trigger: 'blur'}
          ],
          businessCode: [
            {validator: validateBusinessCode, trigger: 'blur'}
          ],
          corporation: [
            {validator: validateCorporation, trigger: 'blur'}
          ]
        }
      }
    },
    computed: {
      logged () {
        return this.$store.state.option.isLogin.logged
      }
    },
    mounted () {
//      验证是否登录
      this.$nextTick(() => {
        this.isLogin()
        // 刷新统计信息
        setInterval(() => {
          this.isLogin()
        }, 10000)
      })
//      获取城市地址
      this.$http.get('/data/city.json').then(response => {
        this.allCityData = response.data
        for (let province in response.data) {
          this.cityData.province.push(province)
        }
      })
    },
    methods: {
//      我同意是否被选中
      checkboxIsChecked () {
        this.checked = !this.checked
      },
//      判断用户是否登录
      isLogin () {
        if (!this.logged) {
//          console.log(this.logged)
//          未登录跳到登录页面
//          window.location.href = '/'
        }
      },
//      上传营业执照扫描件
      upload (e) {
        let file = e.target.files[0]
        if (file.size > 5 * 1024 * 1024) {
          this.uploadFileChecked = false
        } else {
          let param = new FormData()
          param.append('image', file, file.name)
          let config = {
            headers: {'Content-Type': 'multipart/form-data'}
          }
//          图片上传接口
          this.$http.post('/api/userspace/upload', param, config)
            .then(response => {
              this.enterprise.businessCodeImage = response.data.content
              this.uploadFileChecked = true
            }, err => {
              console.log(err)
              this.uploadFileChecked = false
            })
        }
      },
//      地址选择
      onHideBox: function () {
        this.onHideAddress()
      },
      onHideAddress () {
        if (!this.isShowAddressBox && !this.isClickInputAddress) {
          this.showAddressBox = false
        }
        this.isClickInputAddress = false
      },
      onShowAddress () {
        if (this.showAddressBox) {
          this.onHideAddress()
        } else {
          this.showAddressBox = true
          this.isClickInputAddress = true
        }
      },
      getCity (province) {
        this.cityData.city = []
        this.address.regCity = ''
        this.cityData.district = []
        this.address.regDistrict = ''
        this.address.regProvince = province
        for (let item in this.allCityData[province]) {
          this.cityData.city.push(item)
        }
      },
      getDistrict (city) {
        this.address.regCity = city
        this.address.regDistrict = ''
        this.cityData.district = this.allCityData[this.address.regProvince][city]
      },
      chooseDistrict (district) {
        this.address.regDistrict = district
      },
      submitAddress () {
        if (this.address.regDistrict !== '' && this.address.regCity !== '' && this.address.regProvince !== '') {
          if (this.address.regStreet !== '') {
            this.enterprise.regAddress = this.address.regProvince + this.address.regCity + this.address.regDistrict + this.address.regStreet
            this.showAddressBox = false
            this.addressCheck = true
          } else {
            this.$message.error('请输入详细地址')
            this.addressCheck = false
          }
        } else {
          this.$message.error('请输入省、市、区')
          this.addressCheck = false
        }
      },
//      提交表单
      submitForm () {
        if (this.checked && this.spaceNameChecked && this.businessCodeChecked && this.corporationChecked && this.uploadFileChecked && this.addressCheck) {
          let param = new FormData()
          param.append('spaceName', this.enterprise.spaceName)
          param.append('businessCode', this.enterprise.businessCode)
          param.append('corporation', this.enterprise.corporation)
          param.append('regAddress', this.enterprise.regAddress)
          param.append('regProvince', this.address.regProvince)
          param.append('regCity', this.address.regCity)
          param.append('regDistrict', this.address.regDistrict)
          param.append('regStreet', this.address.regStreet)
          param.append('businessCodeImage', this.enterprise.businessCodeImage)
          let config = {
            headers: {'Content-Type': 'multipart/form-data'}
          }
          this.$http.post('/valid/userspace/submit', param, config)
            .then(response => {
              if (response.data.success) {
                this.enterpriseRegister = false
              } else {
                this.enterpriseRegister = true
                return Promise.reject(response.data)
              }
            }).catch(err => {
              this.$message.error(err.errMsg)
            })
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .certification {
    margin: 0 auto;
    width: 100%;
    background: #eee;
    .container{
      padding-top: 50px;
      margin: 0 auto;
      width: 980px;
      text-align: center;
      .content{
        padding: 0 50px;
        margin: 50px auto 0;
        width: 100%;
        text-align: center;
        background: #fff;
          .content-top{
            height: 80px;
            line-height: 80px;
            h3{
              margin-bottom: 0;
              font-family: 'SimHei';
              font-size: 24px;
              color: #000;
              border-bottom: 1px solid #dcdcdc;
            }
            .step{
              position: relative;
              margin-top: 10px;
              img{
                width: 315px;
                height: 46px;
              }
              .step-item{
                position: absolute;
                top: 45px;
                left: 265px;
                span{
                  margin-right: 85px;
                  font-size: 14px;
                  color: #b4b4b4;
                }
                span.active {
                  color: #0076ad;
                }
              }
            }
          }
          form {
            padding-bottom: 44px;
            margin-top: 152px;
              input{
                padding: 0 0 0 18px;
                width: 360px;
                height: 44px;
                line-height: 44px;
                font-size: 14px;
                color: #000;
                border-radius: 0;
              }
              .padding55 input{
                padding-left: 55px;
              }
              .padding45 input{
                padding-left: 45px;
              }
              span.tip{
                position: absolute;
                top: 0;
                right: -238px;
                font-size: 13px;
                color: #8c8c8c;
                a{
                  font-size: 13px;
                  color: #0076ad;
                }
              }
              i{
                position: absolute;
                top: 13px;
                left: 20px;
                font-size: 20px;
                color: #a0a0a0;
              }
              input[type='checkbox']{
                margin: 0 14px 0 55px;
                float: left;
                width: 16px;
                height: 16px;
              }
              span.agree{
                float: left;
                margin: 1px 0 0 10px;
                font-size: 14px;
                color: #8b8b8b;
                a{
                  color: #0076ad;
                }
              }
            .form-group.agree{
              margin: 20px auto 0 !important;
            }
            .btn {
              margin: 34px 0 16px 0;
              width: 360px;
              height: 44px;
              line-height: 44px;
              font-size: 16px;
              color: #fff;
              background: #0076AD;
              border-radius: 3px;
            }
          }
          .content-bottom{
            margin-top: 155px;
            padding-bottom: 50px;
            p{
              font-size: 24px;
              color: #323232;
              img{
                margin-right: 20px;
                width: 30px;
                height: 28px;
              }
            }
            p.pass{
              font-size: 24px;
              color: #e77405;
              img{
                height: 30px;
              }
            }
            p.passed {
              color: #2ab300;
              img{
                height: 30px;
              }
            }
            span{
              display: inline-block;
              margin: 15px 0 140px 0;
              font-size: 14px;
              color: #8b8b8b;
            }
            .close-btn{
              margin: 0 auto;
              width: 200px;
              height: 36px;
              line-height: 36px;
              font-size: 14px;
              text-align: center;
              color: #323232;
              border: 1px solid #d2d2d2;
              border-radius: 3px;
              cursor: pointer ;
            }
          }
      }
    }
  }
</style>