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

<template>
  <div :class="mobile ? 'companyCompleteMobile' : 'companyComplete'">
    <div class="titleArea">
      <p class="title">创建企业信息</p>
      <p class="smallTitle">
        入驻解决方案，您只需两步
      </p>
    </div>
    <div class="bodyArea">
      <div class="selectList">
        <div class="topSteps">
          <div class="cell" :class="{ok: true}">
            <p class="number">1</p>
            <p class="word">创建企业信息</p>
          </div>
          <div class="line"></div>
          <div class="cell">
            <p class="number">2</p>
            <p class="word">新建解决方案</p>
          </div>
          <div class="line"></div>
          <div class="cell">
            <p class="number">3</p>
            <p class="word">完成</p>
          </div>
        </div>
        <div class="uploadFile">
          <p class="name">LOGO</p>
          <div class="uploadArea">
            <el-upload
              v-loading="uploading"
              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>
              </div>
            </el-upload>
            <p class="tipps">
              (图片大小最大2M)
            </p>
          </div>
        </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"  v-if="item.type==='text'"/>
            <textarea  placeholder="请输入" v-model="item.value"  v-if="item.type==='textarea'" cols="50" rows="10"/>
          </div>
        </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: 'companyComplete',
    data() {
      return {
        typeList: [],
        inputList: [
          { name: 'name', title: '公司全称', value: '', type: "text"  },
          { name: 'short_name', title: '公司简称', value: '', type: "text"  },
          { name: 'website', title: '公司链接', value: '', type: "text" },
          { name: 'description', title: '公司简介', value: '', type: "textarea"},
        ],
        imageUrl: '',
        dataInfo: {},
        uploading: false,
        loadingStatus: null,
        getTimes: 30
      }
    },
    asyncData({ app }) {
      return {
        mobile: app.$deviceType.isMobile(),
      }
    },
    async created() {
    },
    async mounted() {
      await this.needLogin()
      this.getInfo()
    },
    methods: {
      /** 获取展示状态 */
      getInfo(isRefresh=false) {
        this.$axios.post('/api/kaifawu/get_current_step').then(res => {
          if (res.data.status === 1) {
            this.dataInfo = res.data.data.com_info || {}
            // status: "0" 未认证 1认证中 2已成功 3被拒绝
            this.inputList.forEach(item => {
              let value = this.dataInfo[ item.name ]
              if (value) {
                item.value = value
              }
            })
            const {step} = this.dataInfo
            if (step === 2) {
              location.href = "/kaifain/add"
            } else if (step === 1) {

            }
            this.inputList = [ ...this.inputList ]
            this.imageUrl = this.dataInfo.logo || ''
            console.log('ist', this.inputList)
          }
        }).finally(()=>{
          this.loadingStatus && this.loadingStatus.close()
        })
      },

      /** 提交 **/
      submitForm() {
        let p = {}
        if (this.dataInfo.id) {
          p = this.dataInfo
        }
        this.inputList.forEach(item => {
          p[ item.name ] = item.value
        })
        p.logo = this.imageUrl
        if (!p.name) {
          this.$message.warning('请输入公司全称');
          return;
        }
        if (!p.short_name) {
          this.$message.warning('请输入公司简称');
          return;
        }
        if (!p.website) {
          this.$message.warning('请输入公司链接');
          return;
        }
        if (!p.description) {
          this.$message.warning('请输入公司简介');
          return;
        }
        if (!p.logo) {
          this.$message.warning('请上传logo图片');
          return;
        }
        this.$axios.post('/api/company_info/update_info', p).then(res => {
          let data = res.data
          if (data.status === 1) {
            this.$message.success('您已提交企业信息')
            setTimeout(() => {
              // if (this.$deviceType.app) {
              //   history.back()
              // } else {
                location.href = '/kaifain/add'
              // }
            }, 1000)
          } else {
            this.$message.error('提交失败')
          }
        }).catch(e => {
          console.log(e)
          this.$message.error('提交失败')
        })
      },

      handleFileChange(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
          return
        }
        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
          }).catch((e)=>{
            this.$message.error("上传失败:" + e.message)
          })
          .finally(() => {
            this.uploading = false;
          });
      },
      handleDeleteFile() {
        this.imageUrl = ''
      },
    },

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

<style lang="scss">
  @import '../../../assets/css/scssCommon.scss';
  .el-upload {
    width: 80px;
    height: 80px;
    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;
      }
    }
  }
  .companyCompleteMobile {
    .el-upload {
      width: pxtovw(80);
      height: pxtovw(80);
      border: pxtovw(1) dashed #409eff;
      border-radius: pxtovw(6);
    }
  }

</style>