mall-web-ssr/components/register-saler/register/StepFirst.vue

<template>
  <!--填写注册信息-->
  <div class="section">
    <div class="register">
      <div class="x-form-set-header">
        <h4>企业注册信息</h4>
      </div>
      <div class="row">
        <label class="col-sm-2 x-required">企业名称：</label>
        <div class="col-sm-5">
          <input type="text" @change="nameCheck" v-model="data.name" class="form-control" name="name" required="" placeholder="填写营业执照上的企业名称">
        </div>
        <div class="col-sm-5" v-show="!isValidTypeName">
          <p>
            <i class="fa fa-info-circle"></i>请填写正确的企业名称，2~99个字符
          </p>
        </div>
        <div class="col-sm-5" v-show="!isValidName">
          <p>
            <i class="fa fa-info-circle"></i>注册的企业名称已存在，请联系管理员
          </p>
        </div>
      </div>
      <div class="row">
        <label class="col-sm-2 x-required">企业简称：</label>
        <div class="col-sm-5">
          <input type="text" @change="simpleNameCheck" v-model="data.simpleName" class="form-control" name="name" required="" placeholder="请填写正确的企业名称，2~40个字符">
        </div>
        <div class="col-sm-5" v-show="!isValidSimpleName">
          <p>
            <i class="fa fa-info-circle"></i>请填写正确的企业名称，2~40个字符
          </p>
        </div>
      </div>
      <div class="row">
        <label class="col-sm-2 x-required">营业执照：</label>
        <div class="col-sm-5">
          <a class="x-btn-blank">
            <i class="fa fa-picture-o"></i>
            请上传营业执照扫描件（≤5M的图片或PDF）
            <input type="file" @change="upload" class="form-control file-input" name="name" required="" placeholder="请上传营业执照扫描件（≤5M的图片或PDF）" accept="image/jpeg,image/jpg,image/gif,image/bmp,image/png,.pdf">
          </a>
          <img class="previewImg" v-if="data.url != ''" :src="isPdf?'/images/all/timg.png':data.url" alt="">
        </div>
        <div class="col-sm-5" v-show="!isValidUpload"><p><i class="fa fa-info-circle"></i>请上传营业执照扫描件（≤5M的图片或PDF）</p></div>
      </div>
      <div class="row">
        <label class="col-sm-2 x-required">营业执照号：</label>
        <div class="col-sm-5">
          <input type="text" @change="licenceCheck" v-model="data.licenceId" class="form-control" name="name" required="" placeholder="请填写营业执照上的注册号">
        </div>
        <div class="col-sm-5" v-show="!isValidLicence"><p><i class="fa fa-info-circle"></i>请填写营业执照上的注册号</p></div>
      </div>
      <div class="row">
        <label class="col-sm-2">企业地址：</label>
        <div class="col-sm-5">
          <input type="text" @change="addressCheck" v-model="data.address" class="form-control" name="name" required="" placeholder="填写总部所在地详细地址" style="padding-left:20px;">
          <span class="fa fa-map-marker"></span>
        </div>
        <div class="col-sm-5" v-show="!isValidAddress"><p><i class="fa fa-info-circle"></i>填写总部所在地详细地址</p></div>
      </div>
      <div class="row">
        <label class="col-sm-2">官网地址：</label>
        <div class="col-sm-5">
          <input type="url" v-model="data.website" class="form-control" name="name" required="" placeholder="www.example.com" style="padding-left:55px;">
          <span class="web">http://</span>
        </div>
        <div class="col-sm-5"></div>
      </div>
      <div class="row next-btn"><button class="btn" @click="sectionChange('next')" :disabled="!isValid">下一步</button></div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        data: {
          name: '',
          simpleName: '',
          url: '',
          licenceId: '',
          address: '',
          website: ''
        },
        isValid: true,
        isValidUpload: true,
        isValidTypeName: true,
        isValidName: true,
        isValidLicence: true,
        isValidSimpleName: true,
        isValidAddress: true,
        isPdf: false
      }
    },
    methods: {
      sectionChange: function (type) {
        this.$http.post('/basic/enterprise/register', {enterprise: [], filePath: this.data.url})
          .then(response => {
            if (response.data.success) {
              this.$emit('sectionEvent', type)
            } else {
              this.$message.error('注册失败，请重新填写信息')
            }
          })
      },
      upload: function (e) {
        let file = e.target.files[0]
        if (file.size > 5 * 1024 * 1024) {
          this.isValidUpload = false
        } else {
          this.isValidUpload = true
          if (file.type !== 'application/pdf') {
            this.isPdf = false
            let param = new FormData()
            param.append('file', file, file.name)
            param.append('chunk', '0')
            let config = {
              headers: {'Content-Type': 'multipart/form-data'}
            }
            this.$http.post('/api/images', param, config)
              .then(response => {
                this.data.url = response.data[0].path
              })
          } else {
            this.isPdf = true
            let param = new FormData()
            param.append('file', file, file.name)
            let config = {
              headers: {'Content-Type': file.type}
            }
            this.$http.post('/file', param, config)
              .then(response => {
                this.data.url = response.data[0].path
              })
          }
        }
      },
      validCheck: function () {
//        this.isValid = this.isValidUpload && this.isValidTypeName && this.isValidName && this.isValidLicence && this.isValidSimpleName
      },
      nameCheck: function () {
        this.$http.post('/basic/enterprise/register/valid/name?name=' + this.data.name)
          .then(response => {
            this.isValidName = response.data.success
          })
        this.isValidTypeName = this.data.name && this.data.name.length >= 2 && this.data.name.length <= 99
        this.validCheck()
      },
      simpleNameCheck: function () {
        this.isValidSimpleName = this.data.simpleName && this.data.simpleName.length >= 2 && this.data.simpleName.length <= 40
        this.validCheck()
      },
      licenceCheck: function () {
        this.$http.post('/basic/enterprise/register/valid/businessCode?businessCode=' + this.data.licenceId)
          .then(response => {
            this.isValidLicence = response.data.success
          })
        this.validCheck()
      },
      addressCheck: function () {
        //
      },
      websiteCheck: function () {
     // (/^([\w-]+\.)+[\w-]+(/[\w-./?%&=])?$/).test(this.messageBoard.userTel)
      }
    }
  }
</script>

<style scoped>
  .register input[type="file"] {
    display: block;
  }
  .previewImg {
    max-height: 200px;
    max-width: 200px;
    margin-top: 5px;
  }
</style>