proginn-frontend/pages/otherpage/companyVerifyInput/index.vue

<template>
  <div class="companyVerifyInput">
    <div class="titleArea">
      <p>企业认证</p>
    </div>
    <div class="bodyArea">
      <div class="selectList">
        <div class="topTips">
          <p>认证优势：</p>
          <p>·同方向同时5次的预约机会（未认证企业只有1次）</p>
          <p>·能预约全部展示的优质开发者</p>
          <p>·全国最大中高端程序员共享工作台，独享展示标签</p>
          <p>·提升企业技术水平公信力，提高约单转化率</p>
          <!--<p>·认证需完善企业信息并支付认证费用58元</p>-->
        </div>
        <div class="inputArea">
          <div class="inputBox" v-for="item in inputList" :key="item.name">
            <p class="name">{{item.title}}</p>
            <input type="text" placeholder="请输入" v-model="item.value">
          </div>
        </div>
        <div class="uploadFile">
          <p class="name">请上传 <span>加盖公章</span> 的营业执照</p>
          <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :multiple="false"
            accept="image/png, image/jpeg"
            :before-upload="handleFileChange"
          >
            <i v-if="imageUrl" class="el-icon-delete avatar-uploader-icon" @click.stop="handleDeleteFile"></i>
            <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
            <div v-else class="noneImage">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <span class="title">上传照片</span>
            </div>
          </el-upload>
        </div>
      </div>
      <div class="submitButton">
        <div class="left"></div>
        <div class="right" @click="submitForm">
          <p>确认提交</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'companyVerifyInput',
    data() {
      return {
        typeList: [],
        inputList: [
          { name: 'name', title: '企业名称', value: '' },
          { name: 'creditCode', title: '工商执照注册号/统一社会信用代码', value: '' },
          { name: 'phone', title: '联系方式', value: '' },
        ],
        imageUrl: ''
      }
    },
    async created() {

    },
    async mounted() {
      await this.needLogin()
      this.getTypeList()
    },
    methods: {
      /** 获取展示状态 */
      getTypeList() {
        this.$axios.get('/api/report/get_report_type').then(res => {
          if (res.data.status === 1) {
            //处理将 data数组转换一下
            let typeListData = [ ...(res && res.data && res.data.data || []) ]
          }
        })
      },

      /** 提交 **/
      submitForm() {
        const { typeList } = this
        this.$message.success('未接入！')
        return
        let typeData = []
        typeList.forEach(item => {
          if (item.selected) {
            typeData.push(item.name)
          }
        })
        this.$axios.post('/api/report/create', p).then(res => {
          let data = res.data
          if (data.status === 1) {
            this.$message.success('提交成功')
            setTimeout(() => {
              history.back()
            }, 1000)
          } else {
            this.$message.error('提交失败')
          }
        }).catch(e => {
          console.log(e)
          this.$message.error('提交失败')
        })
      },

      handleFileChange(file) {
        const formData = new FormData();
        formData.append("file", file);
        formData.append("original_filename", file.name);
        this.uploading = true;
        this.$axios
          .$post(`/upload_image`, formData, {
            headers: { "Content-Type": "multipart/form-data" }
          })
          .then(res => {
            console.log(res)
            this.imageUrl = res.filename
          })
          .finally(() => {
            this.uploading = false;
          });
      }
    },

  }
</script>
<style lang="scss" scoped>
  @import '../../../assets/css/otherpage/companyVerifyInput.scss';
</style>

<style lang="scss">
  .el-upload {
    width: 184px;
    height: 136px;
    border: 1px dashed #409eff;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    img {
      width: 100%;
      height: auto;
      object-fit: contain;
      object-position: top left;
    }
    &:hover {
      border-color: #409eff;
      .el-icon-delete {
        display: block;
      }
    }
  }
</style>