个人认证部分样式

src/components/authentication/personalAuth.vue

@@ -19,7 +19,7 @@
         <el-input v-model.trim="ruleForm.email" :placeholder="$t('personalAuth.placeholderEmail')" autocomplete maxlength="36"></el-input>
       </el-form-item>
 
-      <el-form-item :label="$t('personalAuth.code')+'：'" prop="code" class="yzcodeItem" style="margin-bottom: 30px !important;">
+      <el-form-item :label="$t('personalAuth.code')+'：'" prop="code" class="authyzcodeItem" style="margin-bottom: 30px !important;">
         <el-input type="text" v-model.trim="ruleForm.code" :placeholder="$t('personalAuth.placeholderCode')" style="float: left;" maxlength="6"
                   autocomplete></el-input>
         <span class="getyzcodeBtn" @click="handleGetCode" v-if="showCount">{{$t("commonTips."+codehtml)}}</span>
@@ -36,7 +36,39 @@
         </el-tag>
       </el-form-item>
 
-      <el-form-item>
+      <el-form-item :label="$t('personalAuth.department')+'：'" prop="department">
+        <el-input v-model="ruleForm.department" :placeholder="$t('personalAuth.placeholderDepartment')"></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('personalAuth.position')+'：'" prop="company">
+        <el-input v-model="ruleForm.position" :placeholder="$t('personalAuth.placeholderPosition')"></el-input>
+      </el-form-item>
+
+      <el-form-item :label="$t('personalAuth.businessCard')+'：'" prop="businessCard">
+        <p class="imgTitle">{{$t("personalAuth.businessCardTitle")}}</p>
+        <div class="uploadImg">
+          <el-upload
+            name="fileUpload"
+            list-type="picture-card"
+            class="uploadImgCircle"
+            :header="header"
+            :action=uploadHostHeader
+            :multiple="false"
+            :file-list="fileList"
+            :on-preview="handlePictureCardPreview"
+            :on-success="uploadComplete"
+            :before-upload="handleBeforeFile"
+            :on-remove="handleRemove"
+          >
+            <i class="iconfont icon-jiahao"></i>
+            <p class="uploadImgTitle">{{$t("personalAuth.businessCard")}}</p>
+          </el-upload>
+          <el-dialog :visible.sync="dialogVisible">
+            <img width="100%" :src="dialogImageUrl" alt="">
+          </el-dialog>
+        </div>
+      </el-form-item>
+
+      <el-form-item style="text-align: left;">
         <el-button type="primary" @click="submitForm('ruleForm')">提交认证</el-button>
       </el-form-item>
 
@@ -55,7 +87,11 @@
           company:'',
           email:'',
           code:'',
+          department:'',
+          position:'',
+          file:''
         },
+        fileList:[],//图片
         codehtml:"getCode",
         rules: {
           name: [
@@ -74,7 +110,12 @@
         messageObj:{
           type:"success",
           message:null
-        }
+        },
+        header:"multipart/form-data; ",
+        uploadHostHeader: '/business/upload/uploadFile',//图片上传地址
+        flag:0,//图片是否上传成功
+        dialogImageUrl:"",
+        dialogVisible: false
       }
     },
 
@@ -101,19 +142,69 @@
         else this.$message.error(that.errorInfo);
       },
 
+      //附件上传之前判断文件格式
+      handleBeforeFile(file) {
+        var nameArr = file.name.split('.');
+        const isPng = nameArr[nameArr.length - 1] === 'png';
+        const isJpg = nameArr[nameArr.length - 1] === 'jpg';
+        // const isJpeg = nameArr[nameArr.length - 1] === 'jpeg';
+        const isPNG = nameArr[nameArr.length - 1] === 'PNG';
+        const isJPG = nameArr[nameArr.length - 1] === 'JPG';
+        // const isJPEG = nameArr[nameArr.length - 1] === 'JPEG';
+        const isLt2M = file.size / 1024 / 1024 < 2;
+        if (!isPNG && !isJPG && !isPng && !isJpg ) {
+          this.$message.error('上传图片只能是 png，jpg 格式!');
+        }else if(!isLt2M){
+          this.$message.error('上传图片大小不能超过 2MB!');
+        }else{
+          this.flag = 1;
+        }
+        return isPNG || isJPG || isPng || isJpg;
+      },
+      //附件上传成功
+      uploadComplete(response, file, fileList) {
+        this.ruleForm.file  = file.response.data;
+        this.flag = 2;
+        // this.isShowErrorText1 = false;
+        // this.isShowErrorText2 = false;
+      },
+      //删除
+      handleRemove(){
+        this.fileList = [];
+        this.ruleForm.file = '';
+        this.flag = 0;
+      },
+
+      handlePictureCardPreview(file) {
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
+      }
+
     },
 
     mounted() {
-
+      console.log(process.env)
     }
   }
 </script>
 
 <style scoped lang="scss">
   .demo-ruleForm {
-    width: 330px !important;
+    width: 470px !important;
+    .imgTitle{
+      padding: 0;
+      margin: 0;
+      color: #565B79;
+      text-align: left;
+    }
+   & .el-form-item__content{
+      width: 250px !important;
+    }
+   & .el-form-item__content:nth-last-child(2){
+      width: 372px !important;
+    }
   }
-  .yzcodeItem {
+  .authyzcodeItem {
     position: relative;
     margin-bottom: 0 !important;
     & .el-input{
@@ -124,7 +215,7 @@
     }
     & .getyzcodeBtn {
       position: absolute;
-      right: 0;
+      left: 150px;
       width: 114px;
     }
   }

src/components/index/PageTop.vue

 <template>
-    <div :class="[initStyle?'boxWrapper initBoxWrapper':'boxWrapper noinitBoxWrapper',isShow?'':'loginedWrapper']">
+    <div :class="[initStyle?'boxWrapper initBoxWrapper':'boxWrapper noinitBoxWrapper',isShow?'':'loginedTopWrapper']">
         <div class="header-left">
             <img src="../../assets/img/index/techbook-LOGO-02@2x.png" alt="" v-if="initStyle&&isShow">
             <img src="../../assets/img/index/techbook-LOGO-01@2x.png" alt="" v-if="(!initStyle&&isShow)||!isShow">
@@ -282,8 +282,9 @@
         box-shadow:0px 1px 5px 0px rgba(0,0,0,0.1);
     }
 
-    .loginedWrapper{
+    .loginedTopWrapper{
         position: absolute;
+        background-color: #fff;
         .header-left > span{
             color: #A8A8A8;
         }

src/views/accountmanage/pages/edit.vue

 <template>
-  <div class="authWrapper">
+  <div class="loginedWrapper">
     <div class="breadcrumb">
       <el-breadcrumb separator="/">
         <el-breadcrumb-item><a href="/#/editAuth">{{$t("personalAuth.setAccount")}}</a></el-breadcrumb-item>
         <el-breadcrumb-item :to="{ path: '/' }">{{$t("personalAuth.personalAuth")}}</el-breadcrumb-item>
       </el-breadcrumb>
     </div>
-    <div class="authContent">
+    <div class="wrapperContent">
       <el-tabs v-model="activeName" @tab-click="handleClick">
         <el-tab-pane :label="$t('personalAuth.personalAuth')" name="first">
           <div class="authFormWrapper">
@@ -43,17 +43,6 @@
 </script>
 
 <style scoped lang="scss">
-  .authWrapper {
-    padding: 10px 30px;
-    background: #ECECF2;
-    .breadcrumb {
-      padding: 7px 0;
-      color: #565B79;
-      font-size: 14px;
-    }
-    .authContent {
-      margin-top: 10px;
-      background: #fff;
-    }
+  .loginedWrapper {
   }
 </style>