投资人认证 - 填写信息提交认证

<template>
  <div class='authContent'>
    <div class='authItem'>
      <div class='authName'>名片上传</div>
      <van-uploader @after-read='uploadLogo' :result-type='fileResultType' :max-count='1' :accept='fileAccept' :max-size='maxSize'>
        <img class='authImg' v-if='imgUrl' :src='imgUrl' alt=''>
        <div class='authTxt' v-else>
          <div class='upTxt'>点击上传</div>
          <i class='iconfont icon-jiantou-right'></i>
        </div>
      </van-uploader>
    </div>
    <div class='authItem'>
      <div class='authName'>认证类型</div>
      <van-cell-group>
        <van-field class='authItemInput' input-align='right' v-model='authInfo.view_type' placeholder='请填写认证类型' name='view_type' />
      </van-cell-group>
    </div>
    <div class='authItem'>
      <div class='authName'>投资机构名称</div>
      <van-cell-group>
        <van-field class='authItemInput' input-align='right' v-model='authInfo.view_company' placeholder='请填写投资机构名称' name='view_company' />
      </van-cell-group>
    </div>
    <div class='authItem'>
      <div class='authName'>投资轮次</div>
      <van-cell-group>
        <van-field class='authItemInput' input-align='right' v-model='authInfo.view_rounds' placeholder='请填写投资轮次' name='view_rounds' />
      </van-cell-group>
    </div>
    <div class='authItem'>
      <div class='authName'>投资领域</div>
      <van-cell-group>
        <van-field class='authItemInput' input-align='right' v-model='authInfo.view_area' placeholder='请填写投资领域' name='view_area' />
      </van-cell-group>
    </div>
    <div class='authItem'>
      <div class='authName'>企业邮箱</div>
      <van-cell-group>
        <van-field class='authItemInput' input-align='right' v-model='authInfo.view_email' placeholder='请填写企业邮箱' name='view_email' />
      </van-cell-group>
    </div>
    <div class='authRemark'>
      <div class='authRemarkTxt'>提示：</div>
      <div class='authRemarkTxt'>
        认证流程：按照格式要求提交真实名片信息，提交后工作人员会在2个工作日内进行审核，审核进度请通过‘我的-项目融资-投资人认证’查看。如有疑问，可发送邮件至bjkcbb@foxmail.com。
      </div>
    </div>
    <div class='autnBtn' @click='toSubmit' v-if='authInfo.is_view==0&&authInfo.view_img=='''>提交认证</div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      to: '/user/attachments',
      fileResultType: 'file',
      fileAccept: 'file',
      imgUrl: '',
      authInfo: {
        view_type: '',
        view_company: '',
        view_rounds: '',
        view_area: '',
        view_email: '',
        view_img: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'userInfo',
      'configs'
    ]),
    userId() {
      return this.userInfo ? this.userInfo.id : '--'
    },
    maxSize() {
      return 20 * 1024 * 1024
    },
  },
  created() {
    this.chkView()
  },
  methods: {
    chkView() {
      var that = this;
      that.$api.get('/project/chkView', {
        uid: that.userInfo.id,
      }).then(function (res) {
        that.authInfo = res.data.data
        if (res.data.data.is_view == 1) {
          that.isAuth = res.data.data.is_view
          that.imgUrl = res.data.data.view_img
        } else if (res.data.data.is_view == 0 && res.data.data.view_img != '') {
          that.isAuth = res.data.data.is_view
          that.imgUrl = res.data.data.view_img
        } else {
          that.isAuth = res.data.data.is_view
        }
      })
    },
    uploadLogo(file) {
      // 此时可以自行将文件上传至服务器
      const formData = new FormData()
      formData.append('attachment', file.file)
      this.$api.upload(this.to, formData, { processMessage: '正在上传图片...' }).then(res => {
        this.imgUrl = res.data.data.url
      })
    },
    toSubmit() {
      var that = this;
      that.authInfo.view_img = that.imgUrl
      that.$api.post('/user/project/addViewImg', {
        uid: that.userInfo.id, //会员id
        img: that.authInfo.view_img, //项目logo
        view_type: that.authInfo.view_type,
        view_company: that.authInfo.view_company,
        view_rounds: that.authInfo.view_rounds,
        view_area: that.authInfo.view_area,
        view_email: that.authInfo.view_email
      }).then(function (res) {
        that.$notify('上传成功，请等待审核');
        that.chkView()
      })
    }
  }
}
</script>
<style lang='less'>
.authContent {
  width: 100%;
  height: 100vh;
  border-top: 10px solid #f5f5f5;
  .authItem {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 54px;
    padding: 0 8px;
    border-bottom: 1px solid #F0F2F4;
    background: #fff;
    .authName {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 500;
      color: #333333;
      line-height: 54px;
    }
    .authImg {
      width: 40px;
      height: 40px;
    }
    .authTxt {
      display: flex;
      align-items: center;
      .upTxt {
        font-size: 16px;
        font-family: SourceHanSansSC;
        font-weight: 500;
        color: #BCBBBE;
        line-height: 54px;
      }
      .upIcon {
        font-size: 16px;
        color: #BCBBBE;
      }
    }
    .authItemInput {
      width: 240px;
      height: 54px;
      font-size: 16px;
      font-family: SourceHanSansSC;
      font-weight: 300;
      color: #333333;
      line-height: 54px;
    }
  }
  .authRemark {
    padding: 0 12px;
    margin-top: 40px;
    .authRemarkTxt {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      margin-top: 5px;
    }
  }
  .autnBtn {
    width: 100%;
    height: 47px;
    background: #507CF3;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 47px;
    text-align: center;
    position: fixed;
    bottom: 0;
  }
}
</style>