企业认证前端

assets/css/otherpage/companyVerifyInput.scss

@@ -0,0 +1,177 @@
+.companyVerifyInput {
+  width: 1000px !important;
+  min-height: 937px;
+  background: rgba(255, 255, 255, 1);
+
+  .titleArea {
+    width: calc(100% - 40px);
+    height: 90px;
+    margin: 0 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-bottom: 2px solid rgba(0, 0, 0, 0.06);
+
+    p {
+      font-size: 26px;
+      font-weight: 500;
+      color: rgba(29, 42, 58, 1);
+      line-height: 37px;
+      height: 37px;
+    }
+  }
+
+  .bodyArea {
+    width: 500px;
+    margin: 0 auto;
+
+    .topTips {
+      margin-top: 40px;
+      p {
+        color: #666666;
+        font-size: 13px;
+        line-height: 25px;
+        &:nth-child(1) {
+          color: #222;
+          font-size: 14px;
+        }
+        &:nth-child(6) {
+
+        }
+
+        &:nth-child(2-5) {
+
+        }
+      }
+    }
+
+    .inputArea {
+      .inputBox {
+        margin-top: 31px;
+        p {
+          height: 23px;
+          font-size: 16px;
+          font-weight: 500;
+          color: rgba(25, 34, 46, 1);
+          line-height: 23px;
+          text-align: left;
+        }
+        input {
+          margin-top: 3px;
+          width: 396px;
+          height: 54px;
+          background: rgba(255, 255, 255, 1);
+          border-radius: 3px;
+          border: 1px solid rgba(221, 225, 230, 1);
+          padding: 10px;
+        }
+      }
+    }
+
+    .uploadFile {
+      margin-top: 27px;
+
+      .name {
+        height: 18px;
+        font-size: 13px;
+        font-weight: 600;
+        color: rgba(25, 34, 46, 1);
+        line-height: 18px;
+        span {
+          height: 18px;
+          font-size: 13px;
+          font-weight: 600;
+          color: #FF5B3B;
+          line-height: 18px;
+        }
+      }
+
+      .avatar-uploader {
+        margin-top: 9px;
+        width: 184px;
+        height: 136px;
+        overflow: hidden;
+        position: relative;
+        background: #fff;
+        .el-icon-delete {
+          display: none;
+        }
+
+        .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;
+            }
+          }
+        }
+        .avatar-uploader-icon {
+          position: absolute;
+          top: 0;
+          left: 0;
+          font-size: 44px;
+          color: #999;;
+          width: 184px;
+          height: 136px;
+          line-height: 100px;
+          text-align: center;
+        }
+        .avatar {
+          width: 184px;
+          height: 136px;
+          display: block;
+        }
+        .title {
+          position: absolute;
+          left: 50%;
+          bottom: 40px;
+          transform: translateX(-50%);
+          font-size: 13px;
+          font-weight: 500;
+          color: #409eff;
+          line-height: 18px;
+          text-decoration: underline;
+        }
+      }
+    }
+
+    .submitButton {
+      margin-top: 36px;
+      display: flex;
+      align-items: center;
+      height: 55px;
+
+      .right {
+        width: 153px;
+        height: 46px;
+        background: rgba(48, 142, 255, 1);
+        box-shadow: 0px 2px 6px 0px rgba(48, 142, 255, 0.3);
+        border-radius: 2px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        p {
+          height: 20px;
+          font-size: 14px;
+          font-weight: 500;
+          color: rgba(255, 255, 255, 1);
+          line-height: 20px;
+        }
+      }
+    }
+  }
+}

pages/otherpage/companyVerifyInput/index.vue

@@ -0,0 +1,157 @@
+<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>