企业信息页面样式调整

front-vue/src/views/service/companyInformation/companyInformation.vue

@@ -4,13 +4,17 @@
         <el-tabs v-model="activeName" style="margin:2px">
             <!--———————————————————————————————————— 附件信息 ————————————————————————————————————————————————-->
             <el-tab-pane v-if="companyType != '03'" label="附件信息" name="first">
-                <el-row  class="zap-business">
+                <el-row class="zap-business">
                     <div v-if="licenShow" class="zap-business__item">
                         <div class="zap-business__title">营业执照:</div>
                         <div class="zap-business__picture">
-                            <el-upload v-if="licenShow" ref="licenImg" action="" 
-                                multiple list-type="picture-card" 
-                                :file-list="licenseFileList" 
+                            <el-upload
+                                v-if="licenShow"
+                                ref="licenImg"
+                                action=""
+                                multiple
+                                list-type="picture-card"
+                                :file-list="licenseFileList"
                                 :class="{ uoloadSty: showBtnImg, disUoloadSty: noBtnImg }"
                                 :auto-upload="false">
                                 <i slot="default" class="el-icon-plus"></i>
@@ -29,11 +33,15 @@
                         </div>
                     </div>
                     <div v-if="authorizationShow" class="zap-business__item">
-                        <div class="zap-buisness__title">法人授权书:</div>
+                        <div class="zap-business__title">法人授权书:</div>
                         <div class="zap-business__picture">
-                            <el-upload v-if="authorizationShow" ref="authorizationImg" action="" 
-                                multiple list-type="picture-card" 
-                                :file-list="authorizationFileList" 
+                            <el-upload
+                                v-if="authorizationShow"
+                                ref="authorizationImg"
+                                action=""
+                                multiple
+                                list-type="picture-card"
+                                :file-list="authorizationFileList"
                                 :class="{ uoloadSty: showBtnImg, disUoloadSty: noBtnImg }"
                                 :auto-upload="false">
                                 <i slot="default" class="el-icon-plus"></i>
@@ -56,9 +64,13 @@
                     <div v-if="commitmentShow" class="zap-business__item">
                         <div class="zap-business__title">数字证书授权与承诺书:</div>
                         <div class="zap-business__picture">
-                            <el-upload v-if="commitmentShow" ref="commitmentImg" action="" 
-                                multiple list-type="picture-card" 
-                                :file-list="commitmentFileList" 
+                            <el-upload
+                                v-if="commitmentShow"
+                                ref="commitmentImg"
+                                action=""
+                                multiple
+                                list-type="picture-card"
+                                :file-list="commitmentFileList"
                                 :class="{ uoloadSty: showBtnImg, disUoloadSty: noBtnImg }"
                                 :auto-upload="false">
                                 <i slot="default" class="el-icon-plus"></i>
@@ -82,10 +94,19 @@
                         <div class="zap-business__title">法人证件:</div>
                         <el-row type="flex" align="middle">
                             <div class="zap-business__picture">
-                                <el-upload ref="legalImg" v-if="legalShow" class="Img-demo" action="" multiple :class="{ uoloadSty: showBtnImg, disUoloadSty: noBtnImg }" list-type="picture-card" :file-list="legalFileList" :auto-upload="false" >
+                                <el-upload
+                                    ref="legalImg"
+                                    v-if="legalShow"
+                                    class="Img-demo"
+                                    action=""
+                                    multiple
+                                    :class="{ uoloadSty: showBtnImg, disUoloadSty: noBtnImg }"
+                                    list-type="picture-card"
+                                    :file-list="legalFileList"
+                                    :auto-upload="false">
                                     <i slot="default" class="el-icon-plus"></i>
-                                    <div slot="file" slot-scope="{file}" >
-                                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" >
+                                    <div slot="file" slot-scope="{file}">
+                                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                                         <span class="el-upload-list__item-actions">
                                             <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                                 <i class="el-icon-zoom-in"></i>
@@ -98,7 +119,16 @@
                                 </el-upload>
                             </div>
                             <div class="zap-business__picture">
-                                <el-upload ref="legalBackImg" v-if="legalBackShow" class="Img-demo" action="" multiple :class="{ uoloadSty: showBtnImg, disUoloadSty: noBtnImg }" list-type="picture-card" :file-list="legalBackFileList" :auto-upload="false">
+                                <el-upload
+                                    ref="legalBackImg"
+                                    v-if="legalBackShow"
+                                    class="Img-demo"
+                                    action=""
+                                    multiple
+                                    :class="{ uoloadSty: showBtnImg, disUoloadSty: noBtnImg }"
+                                    list-type="picture-card"
+                                    :file-list="legalBackFileList"
+                                    :auto-upload="false">
                                     <i slot="default" class="el-icon-plus"></i>
                                     <div slot="file" slot-scope="{file}">
                                         <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
@@ -118,53 +148,69 @@
                 </el-row>
                 <!-- 经办人身份证 -->
                 <el-row class="zap-business">
-                     <div v-if="handlerPositiveShow ||handlerNegativeShow" class="zap-business__item">
+                    <div v-if="handlerPositiveShow ||handlerNegativeShow" class="zap-business__item">
                         <div class="zap-business__title">经办人证件:</div>
                         <el-row type="flex" align="middle">
-                        <div class="zap-business__picture">
-                            <el-upload v-if="handlerPositiveShow" ref="handlerPositiveImg" action="" multiple :class="{ uoloadSty: showBtnImg, disUoloadSty: noBtnImg }" list-type="picture-card" :file-list="handlerPositiveList" :auto-upload="false">
-                                <i slot="default" class="el-icon-plus"></i>
-                                <div slot="file" slot-scope="{file}">
-                                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
-                                    <span class="el-upload-list__item-actions">
-                                        <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
-                                            <i class="el-icon-zoom-in"></i>
-                                        </span>
-                                        <span class="el-upload-list__item-delete" @click="handleImgDownload(file)">
-                                            <i class="el-icon-download"></i>
-                                        </span>
-                                    </span>
-                                </div>
-                            </el-upload>
-                        </div>
-                        <div class="zap-business__picture">
-                            <el-upload v-if="handlerNegativeShow" ref="handlerNegativeImg" action="" multiple :class="{ uoloadSty: showBtnImg, disUoloadSty: noBtnImg }" list-type="picture-card" :file-list="handlerNegativeList" :auto-upload="false">
-                                <i slot="default" class="el-icon-plus"></i>
-                                <div slot="file" slot-scope="{file}">
-                                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
-                                    <span class="el-upload-list__item-actions" >
-                                        <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)"  >
-                                            <i class="el-icon-zoom-in"></i>
+                            <div class="zap-business__picture">
+                                <el-upload
+                                    v-if="handlerPositiveShow"
+                                    ref="handlerPositiveImg"
+                                    action=""
+                                    multiple
+                                    :class="{ uoloadSty: showBtnImg, disUoloadSty: noBtnImg }"
+                                    list-type="picture-card"
+                                    :file-list="handlerPositiveList"
+                                    :auto-upload="false">
+                                    <i slot="default" class="el-icon-plus"></i>
+                                    <div slot="file" slot-scope="{file}">
+                                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
+                                        <span class="el-upload-list__item-actions">
+                                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
+                                                <i class="el-icon-zoom-in"></i>
+                                            </span>
+                                            <span class="el-upload-list__item-delete" @click="handleImgDownload(file)">
+                                                <i class="el-icon-download"></i>
+                                            </span>
                                         </span>
-                                        <span class="el-upload-list__item-delete" @click="handleImgDownload(file)">
-                                            <i class="el-icon-download"></i>
+                                    </div>
+                                </el-upload>
+                            </div>
+                            <div class="zap-business__picture">
+                                <el-upload
+                                    v-if="handlerNegativeShow"
+                                    ref="handlerNegativeImg"
+                                    action=""
+                                    multiple
+                                    :class="{ uoloadSty: showBtnImg, disUoloadSty: noBtnImg }"
+                                    list-type="picture-card"
+                                    :file-list="handlerNegativeList"
+                                    :auto-upload="false">
+                                    <i slot="default" class="el-icon-plus"></i>
+                                    <div slot="file" slot-scope="{file}">
+                                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
+                                        <span class="el-upload-list__item-actions">
+                                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
+                                                <i class="el-icon-zoom-in"></i>
+                                            </span>
+                                            <span class="el-upload-list__item-delete" @click="handleImgDownload(file)">
+                                                <i class="el-icon-download"></i>
+                                            </span>
                                         </span>
-                                    </span>
-                                </div>
-                            </el-upload>
-                        </div>
-                        </el-row> 
+                                    </div>
+                                </el-upload>
+                            </div>
+                        </el-row>
                     </div>
-                </el-row>    
+                </el-row>
                 <el-row>
-                     <div v-if="scyCfcaUserId" class="zap-business__text">
+                    <div v-if="scyCfcaUserId" class="zap-business__text">
                         CFCA企业认证证书:<span>{{scyCfcaUserId}}</span>
                     </div>
                     <div class="zap-business__text">
-                    CFCA授权编号:<span v-if="scyCfcaAuthNumber">{{scyCfcaAuthNumber}}</span>
-                    <label v-else text="abcdef" id="lab1" style="color:blue" @click="openWindows">激活</label>
+                        CFCA授权编号:<span v-if="scyCfcaAuthNumber">{{scyCfcaAuthNumber}}</span>
+                        <label v-else text="abcdef" id="lab1" style="color:blue" @click="openWindows">激活</label>
                     </div>
-                    <!-- <el-upload v-if="commitmentShow" ref="upload" class="upload-demo" action="" 
+                    <!-- <el-upload v-if="commitmentShow" ref="upload" class="upload-demo" action=""
                     :on-preview="handleFilePreview" multiple :file-list="commitmentFileList" :auto-upload="false">
                     </el-upload> -->
                 </el-row>
@@ -262,7 +308,7 @@
                         </el-select>
                     </el-form-item> -->
                     <el-form-item label="企业类型" prop="scyType">
-                        <el-input :value= scyTypeFormat(form.scyType) disabled></el-input>
+                        <el-input :value=scyTypeFormat(form.scyType) disabled></el-input>
                     </el-form-item>
                     <!-- <el-form-item label="客户经理" prop="scyManager">
                         <el-input v-model="form.scyManager" placeholder="请输入客户经理" maxlength="20" show-word-limit />
@@ -414,15 +460,23 @@
                 <img width="100%" :src="dialogImageUrl" alt="">
             </el-dialog>
             <!--短信-->
-            <el-dialog  :visible.sync="messageIsShow" width="800px"  append-to-body :before-close = "cancelMessage" center>
-                <el-form ref="messageForm"  :disabled="false" :model="messageForm"  v-if="messageIsShow" label-width="150px"  class="demo-form-inline" :inline="true" @submit.native.prevent>
-                        <el-form-item label="验证码" prop="validCode">
-                            <el-input v-model="messageForm.validCode" style="width: 200px" maxlength="6"  oninput="value=value.replace(/[^\d]/g,'')"/>
-                        </el-form-item>
-                        <el-form-item>
-                            <el-button  v-show="messShow"  type="success" @click="send">点击获取验证码</el-button>
-                            <el-button v-show="!messShow" type="success" disabled><span>{{timer}}</span>秒后重新获取</el-button>
-                        </el-form-item>
+            <el-dialog :visible.sync="messageIsShow" width="800px" append-to-body :before-close="cancelMessage" center>
+                <el-form
+                    ref="messageForm"
+                    :disabled="false"
+                    :model="messageForm"
+                    v-if="messageIsShow"
+                    label-width="150px"
+                    class="demo-form-inline"
+                    :inline="true"
+                    @submit.native.prevent>
+                    <el-form-item label="验证码" prop="validCode">
+                        <el-input v-model="messageForm.validCode" style="width: 200px" maxlength="6" oninput="value=value.replace(/[^\d]/g,'')" />
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button v-show="messShow" type="success" @click="send">点击获取验证码</el-button>
+                        <el-button v-show="!messShow" type="success" disabled><span>{{timer}}</span>秒后重新获取</el-button>
+                    </el-form-item>
 
                 </el-form>
                 <div slot="footer" class="dialog-footer">
@@ -434,31 +488,43 @@
     </div>
 </div>
 </template>
+
 <script>
 import {
-    companyQuery,listRel,sendMessage,checkCode
+    companyQuery,
+    listRel,
+    sendMessage,
+    checkCode
 } from "@/api/service/companyInformation/companyInformation";
-import { getToken } from "@/utils/auth";
-import {getNowUser } from "@/api/system/user";
+import {
+    getToken
+} from "@/utils/auth";
+import {
+    getNowUser
+} from "@/api/system/user";
 import SearchBar from '@/components/SearchBar/index.vue'
 export default {
     name: "companyInformation",
-    components: {SearchBar},
+    components: {
+        SearchBar
+    },
     data() {
         return {
-            scyCfcaUserId:null,
-            scyCfcaAuthNumber:null,
+            scyCfcaUserId: null,
+            scyCfcaAuthNumber: null,
             dialogImageUrl: "",
             dialogVisible: false,
-            companyType:null,
+            companyType: null,
             //短信展示
-            messageIsShow:false,
+            messageIsShow: false,
             //短信
-            messageForm:{validCode:""},
+            messageForm: {
+                validCode: ""
+            },
             //控制短信验证码倒计时是否展示
-            messShow:true,
-            timer:60,
-            cfcaNumber:null,
+            messShow: true,
+            timer: 60,
+            cfcaNumber: null,
             // 遮罩层
             loading: true,
             form: {
@@ -588,7 +654,7 @@ export default {
             var a = document.createElement('a');
             var event = new MouseEvent('click');
             a.download = file.name;
-            a.href = file.url+'/'+getToken();
+            a.href = file.url + '/' + getToken();
             a.dispatchEvent(event);
             console.log(file)
         },
@@ -615,15 +681,15 @@ export default {
                 row.launchScrStatus
             );
         },
-        openWindows(){
+        openWindows() {
             this.messageIsShow = true;
         },
         //发送短信验证码
-        send(){
+        send() {
             //发送
             sendMessage().then((response) => {
                 debugger
-                if(response.data){
+                if (response.data) {
                     //手机号
                     var newIphone = response.data.newIphone;
                     //结果
@@ -633,20 +699,20 @@ export default {
                     this.auth_timer = window.setInterval(() => {
                         this.messShow = false;
                         setTimeout(() => {
-                                this.timer--;
-                                if(this.timer <= 0 ){
-                                    this.messShow = true;
-                                    clearInterval(this.auth_timer);
-                                }
-                            }, 0)
-                        },1000)
+                            this.timer--;
+                            if (this.timer <= 0) {
+                                this.messShow = true;
+                                clearInterval(this.auth_timer);
+                            }
+                        }, 0)
+                    }, 1000)
                     //成功
-                    if("60000000" == result){
+                    if ("60000000" == result) {
                         this.$message({
-                            message: "已向经办人手机号为"+newIphone+"发送短信验证码,请注意查收",
+                            message: "已向经办人手机号为" + newIphone + "发送短信验证码,请注意查收",
                             type: 'warning'
                         });
-                    }else{//失败
+                    } else { //失败
                         this.$message({
                             message: "短信发送失败",
                             type: 'warning'
@@ -657,59 +723,59 @@ export default {
             });
         },
         //校验验证码是否正确
-        checkCode(){
-                if(!this.messageForm.validCode){
+        checkCode() {
+            if (!this.messageForm.validCode) {
+                this.$message({
+                    message: "请输入验证码",
+                    type: 'warning'
+                });
+                return;
+            }
+            this.messageForm.cfcaNumber = this.cfcaNumber;
+            //校验验证码
+            checkCode(this.messageForm).then((response) => {
+                if (response.data) {
+                    //结果
+                    var verification = response.data.verification;
+                    //匹配
+                    if ("60000000" == verification) {
+                        this.messageIsShow = false;
+                        //激活成功
+                        this.getList()
+                        // this.contractSigning();
+                    } else { //不匹配
                         this.$message({
-                            message: "请输入验证码",
+                            message: "验证有误,请重新输入",
                             type: 'warning'
                         });
-                        return;
-                }
-                this.messageForm.cfcaNumber = this.cfcaNumber;
-                //校验验证码
-                checkCode(this.messageForm).then((response) => {
-                    if(response.data){
-                        //结果
-                        var verification = response.data.verification;
-                        //匹配
-                        if("60000000" == verification){
-                            this.messageIsShow = false;
-                            //激活成功
-                            this.getList()
-                            // this.contractSigning();
-                        }else{//不匹配
-                            this.$message({
-                                message: "验证有误,请重新输入",
-                                type: 'warning'
-                            });
-                        }
-
                     }
+
+                }
             });
         },
         //关闭短信
-        cancelMessage(){
+        cancelMessage() {
             this.messageIsShow = false;
             this.resetMessage();
         },
         resetUpdate() {
-        this.messShow = true;
-        clearInterval(this.auth_timer);
-        this.timer = 60;
+            this.messShow = true;
+            clearInterval(this.auth_timer);
+            this.timer = 60;
         },
         resetMessage() {
             this.messageForm = {
-                validCode:""
+                validCode: ""
             };
             this.resetForm("messageForm");
         },
         //获取当前用户信息
         getNowUser() {
-        getNowUser().then((response) => {
-            this.companyType = response.data.companyType;
-            console.log(response.data,"!!!!!!")
-        });
-        },       
+            getNowUser().then((response) => {
+                this.companyType = response.data.companyType;
+                console.log(response.data, "!!!!!!")
+            });
+        },
         getList() {
             this.loading = true;
             companyQuery().then((response) => {
@@ -717,10 +783,10 @@ export default {
                 if (response.data.basicList.length > 0) {
                     this.form = response.data.basicList[0];
                     this.scyCfcaUserId = this.form.scyCfcaUserId;
-                    if(response.data.basicList[0].scyCfcaAuthNumber){
-                       this.scyCfcaAuthNumber = this.form.scyCfcaAuthNumber;
+                    if (response.data.basicList[0].scyCfcaAuthNumber) {
+                        this.scyCfcaAuthNumber = this.form.scyCfcaAuthNumber;
                     }
-                    
+
                 }
                 //经办人信息
                 if (response.data.contactsList) {
@@ -734,7 +800,7 @@ export default {
                 }
                 //营业执照信息
                 if (response.data.licenseList) {
-                    this.licenseFileList=[];
+                    this.licenseFileList = [];
                     const licenseImg = response.data.licenseList[0].pfiUrl;
                     const licenseImgId = response.data.licenseList[0].pfiFileId;
                     if (licenseImg != "" && licenseImgId != "") {
@@ -742,7 +808,10 @@ export default {
                         let imgUrl = (licenseImg).split(",");
                         let imgUrlId = (licenseImgId).split(",");
                         for (let i = 0; i < imgUrl.length; i++) {
-                            this.licenseFileList.push({url: imgUrl[i] + "/" + getToken(),uid: imgUrlId[i]});
+                            this.licenseFileList.push({
+                                url: imgUrl[i] + "/" + getToken(),
+                                uid: imgUrlId[i]
+                            });
                         }
                     } else {
                         this.licenShow = false;
@@ -763,7 +832,7 @@ export default {
                                 uid: imgUrlId[i]
                             });
                         }
-                        console.log(this.legalFileList,"营业执照")
+                        console.log(this.legalFileList, "营业执照")
                     } else {
                         this.legalShow = false;
                     }
@@ -921,56 +990,73 @@ export default {
     },
 };
 </script>
+
 <style lang="scss">
-.zap-space{
+.zap-space {
     position: relative;
     left: -20px;
     width: calc(100% + 40px);
     height: 20px;
     background-color: #f4f5f6;
 }
+
 .uoloadSty .el-upload--picture-card {
     width: 110px;
     height: 110px;
     line-height: 110px;
 }
+
 .disUoloadSty .el-upload--picture-card {
     display: none;
 }
-.zap-business{
+
+.zap-business {
     display: flex;
     padding-bottom: 10px;
 }
-.zap-business__item{
+
+.zap-business__item {
     flex: 0 0 180px;
 }
-.zap-business__title{
+
+.zap-business__title {
     padding-top: 30px;
     padding-bottom: 16px;
     font-size: 14px;
     color: #333333;
 }
-.zap-business__picture{
+
+.zap-business__picture {
     width: 182px;
     height: 182px;
     margin-right: 64px;
     border-radius: 4px;
+    border: 1px solid #EBEBEB;
+
     background-color: #F7F7F7;
-    .el-upload-list--picture-card .el-upload-list__item{
+
+    .el-upload-list--picture-card .el-upload-list__item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
         width: 182px;
         height: 182px;
-        border: 1px solid #EBEBEB;
+        border: none;
+        background-color: transparent;
     }
 }
-.zap-business__text{
+
+.zap-business__text {
     margin-top: 40px;
     line-height: 20px;
     font-size: 14px;
     color: #333333;
-    &:nth-of-type(1){
+
+    &:nth-of-type(1) {
         margin-top: 30px;
     }
-    &:nth-of-type(2){
+
+    &:nth-of-type(2) {
         padding-bottom: 74px;
     }
 }