Bladeren bron

调整了上传图片的控件

sunjh 6 jaren geleden
bovenliggende
commit
1f6e0b165d

+ 49 - 30
src/components/authen/AgencyAuthentication.vue

@@ -3,7 +3,22 @@
     <div class="create-body">
       <div class="title">测评机构认证</div>
       <el-form :model="authentication" :rules="rules" ref="authentication" label-width="12%" class="demo-report">
-
+        <el-form-item prop="file" label="机构logo">
+          <el-upload
+            class="avatar-uploader"
+            action=""
+            :show-file-list="false"
+            :http-request="uploadFile"
+            :before-upload="beforeFileUpload">
+            <img v-if="authentication.photoUrl" :src="authentication.photoUrl" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+          <!--<div v-if="!isModifyMode">-->
+          <!--<span v-if="authentication.photo==null">暂无文件</span>-->
+          <!--<a :href="authentication.photo" v-if="authentication.photo!=null"><i class="fa fa-file-text-o"></i>-->
+          <!--{{authentication.photo}}</a>-->
+          <!--</div>-->
+        </el-form-item>
         <el-form-item label="机构名称" prop="name">
           <el-input v-if="isModifyMode" v-model="authentication.name"></el-input>
           <!--<span v-if="!isModifyMode">{{authentication.name}}</span>-->
@@ -48,35 +63,6 @@
           </el-button>
           <!--<span v-if="!isModifyMode">{{authentication.resource}}</span>-->
         </el-form-item>
-        <el-form-item prop="file" label="头像">
-          <el-upload
-            v-if="isModifyMode"
-            drag
-            class="upload-demo"
-            action="https://jsonplaceholder.typicode.com/posts/"
-            :on-remove="handleRemove"
-            :before-remove="beforeRemove"
-            multiple
-            :limit="1"
-            :show-file-list="false"
-            :on-exceed="handleExceed"
-            :before-upload="beforeFileUpload"
-            :http-request="uploadFile"
-            :file-list="authentication.photo"
-          >
-            <i class="el-icon-upload"></i>
-            <div class="el-upload__text">
-              将文件拖到此处,或
-              <em>点击上传</em>
-            </div>
-            <div class="el-upload__tip" slot="tip">请上传头像</div>
-          </el-upload>
-          <!--<div v-if="!isModifyMode">-->
-          <!--<span v-if="authentication.photo==null">暂无文件</span>-->
-          <!--<a :href="authentication.photo" v-if="authentication.photo!=null"><i class="fa fa-file-text-o"></i>-->
-          <!--{{authentication.photo}}</a>-->
-          <!--</div>-->
-        </el-form-item>
 
         <!--<el-form-item v-if="!isModifyMode">-->
         <!--<div class="btn btn-medium btn-info" @click="modifyInfo()">修改</div>-->
@@ -284,4 +270,37 @@ export default {
   .el-input {
     width: 400px;
   }
+
+  .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+
+  .avatar-uploader-icon {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    font-size: 28px;
+    color: #8c939d;
+    width: 176px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+
+  .avatar-uploader-icon:hover {
+    border-color: #409EFF;
+  }
+
+  .avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }
 </style>

+ 8 - 3
src/components/authen/EnterpriseAuthentication.vue

@@ -12,9 +12,9 @@
             class="avatar-uploader"
             action="https://jsonplaceholder.typicode.com/posts/"
             :show-file-list="false"
-            :on-success="test"
-            :before-upload="test">
-            <img  v-if="authentication.businessLicense" :src="authentication.businessLicense" class="avatar">
+            :http-request="uploadFile"
+            :before-upload="beforeFileUpload">
+            <img v-if="authentication.businessLicense" :src="authentication.businessLicense" class="avatar">
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
           <!--<div v-if="!isModifyMode">-->
@@ -184,6 +184,7 @@ export default {
   .el-input {
     width: 400px;
   }
+
   .avatar-uploader .el-upload {
     border: 1px dashed #d9d9d9;
     border-radius: 6px;
@@ -191,9 +192,11 @@ export default {
     position: relative;
     overflow: hidden;
   }
+
   .avatar-uploader .el-upload:hover {
     border-color: #409EFF;
   }
+
   .avatar-uploader-icon {
     border: 1px dashed #d9d9d9;
     border-radius: 6px;
@@ -204,9 +207,11 @@ export default {
     line-height: 178px;
     text-align: center;
   }
+
   .avatar-uploader-icon:hover {
     border-color: #409EFF;
   }
+
   .avatar {
     width: 178px;
     height: 178px;

+ 38 - 18
src/components/authen/IndividualAuthentication.vue

@@ -9,26 +9,13 @@
         </el-form-item>
         <el-form-item prop="file" label="手持身份证照片">
           <el-upload
-            v-if="isModifyMode"
-            drag
-            class="upload-demo"
-            action="https://jsonplaceholder.typicode.com/posts/"
-            :on-remove="handleRemove"
-            :before-remove="beforeRemove"
-            multiple
-            :limit="1"
+            class="avatar-uploader"
+            action=""
             :show-file-list="false"
-            :on-exceed="handleExceed"
-            :before-upload="beforeFileUpload"
             :http-request="uploadFile"
-            :file-list="authentication.photo"
-          >
-            <i class="el-icon-upload"></i>
-            <div class="el-upload__text">
-              将文件拖到此处,或
-              <em>点击上传</em>
-            </div>
-            <div class="el-upload__tip" slot="tip">请上传头像</div>
+            :before-upload="beforeFileUpload">
+            <img  v-if="authentication.photoUrl" :src="authentication.photoUrl" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
           <!--<div v-if="!isModifyMode">-->
           <!--<span v-if="authentication.photo==null">暂无文件</span>-->
@@ -202,4 +189,37 @@ export default {
   .el-input {
     width: 400px;
   }
+
+  .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+
+  .avatar-uploader-icon {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    font-size: 28px;
+    color: #8c939d;
+    width: 176px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+
+  .avatar-uploader-icon:hover {
+    border-color: #409EFF;
+  }
+
+  .avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }
 </style>

+ 1 - 1
src/js/api.js

@@ -39,7 +39,7 @@ export default {
     END_PROJECT: '',
     AGENCY_AUTHENTICATION: '/api/user/{userId}/agency/',
     ADD_AGENCY: '/api/greenChannel/agency/',
-    GET_CURRENT_USER: '/api/currUser',
+    GET_CURRENT_USER: '/api/currentUser/',
     GET_USER_IDENTITY: '',
     GET_AUTH_URLS: '',
   },

+ 15 - 0
src/js/index.js

@@ -176,3 +176,18 @@ export const getAuthUrls = () => {
   return Http.get(Apis.USER.GET_AUTH_URLS)
 }
 
+//上传个人认证信息
+export const uploadIndividualAuthenticationInfo = () => {
+  Http.post(Apis)
+}
+
+//上传企业认证信息
+export const uploadEnterpriseAuthenticationInfo = () => {
+
+}
+
+//上传机构认证信息
+export const uploadAgencyAuthenticationInfo = () => {
+
+}
+