<template> <div class="fill-store-inf"> <div class="logo-bg"> <img v-if="false" src="../../../public/images/logo_white_sm.png" alt=""> </div> <el-card class="box-card"> <div slot="header" class="clearfix steps"> <el-steps :active="1" align-center finish-status="success"> <el-step title="注册账号"></el-step> <el-step title="填写主体信息"></el-step> <el-step title="填写店铺信息"></el-step> <el-step title="提交入驻审核"></el-step> </el-steps> </div> <div class="main-con"> <el-form ref="mainForm" :model="mainForm" :rules="mainRules" label-width="180px" class="main-form-con" size="small"> <el-form-item> <p class="main-form-title">企业资质信息</p> </el-form-item> <el-form-item label="营业执照:" prop="license" > <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;"> <div style="padding-right:6px;"> <el-upload :class="['uploadData',{ 'hiden-dom': licenseImgFileList.length >= 1 }]" action="#" list-type="picture-card" :http-request="uploadLicenseImages" :limit="1" :on-exceed="showTip" :before-upload = "beforeUpImg" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :file-list = 'licenseImgFileList' > <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> </div> <div> <span class="tips-text"> <i class="el-icon-warning h-warning"></i> </span> </div> <div style="width:400px;line-height: 24px;padding-top: 6px;"> <span class="tips-text">图片大小为500KB以内,支持png/jpg,限一张,请确保图片清晰</span></br> <span class="tips-text">请确保营业执照在有效期内</span> </div> </div> </el-form-item> <el-form-item label="企业名称:" prop="organization_name" inline-message="true"> <el-input v-model="mainForm.organization_name" style="width: 400px;"></el-input> <span class="tips-text"><i class="el-icon-warning h-warning"></i>请按照营业执照上登记的完整名称填写</span> </el-form-item> <el-form-item label="统一社会代码:" prop="license_number" inline-message="true"> <el-input v-model="mainForm.license_number" style="width: 400px;"></el-input> <span class="tips-text"><i class="el-icon-warning h-warning"></i>请按照营业执照上登记的完整名称填写</span> </el-form-item> <el-form-item :gutter="20" label="营业期限:" prop="license_expires_time"> <el-date-picker style="width:400px;" v-model="periodConcreteTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="periodLongTermChange" :clearable="false" /> <el-checkbox v-model="periodLongTermVal" :disabled="isPeriodDisabled" style="padding-left:15px;" @change="periodConcreteChange">长期 </el-checkbox> <span class="tips-text"><i class="el-icon-warning h-warning"></i>具体时间和长期,二者必填一个</span> </el-form-item> <el-form-item label="企业地址:" prop="organization_address" inline-message="true"> <el-input v-model="mainForm.organization_address" style="width: 400px;"></el-input> <span class="tips-text"><i class="el-icon-warning h-warning"></i>请按照营业执照上登记的完整地址填写</span> </el-form-item> <el-form-item> <p class="main-form-tips">请核对营业执照信息,若信息不符合,可手动修改</p> </el-form-item> <el-divider></el-divider> <el-form-item> <p class="main-form-title">企业法人信息</p> </el-form-item> <el-form-item label="法人身份证:" prop="idcard_front"> <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;"> <!-- 身份证正面 --> <div style="padding: 0 20px;"> <el-upload :class="['uploadData',{ 'hiden-dom': idcardImgFileList.length >= 1 }]" list-type="picture-card" action="#" :limit="1" :on-exceed="showTip" :before-upload = "beforeUpImg" :http-request="uploadIdcardPositive" :on-preview="handlePictureCardPreview2" :on-remove="handleRemove2" :file-list = 'idcardImgFileList' > <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible2"> <img width="100%" :src="dialogImageUrl2" alt=""> </el-dialog> </div> <!-- 身份证反面 --> <div style="padding: 0 20px;"> <el-upload :class="['uploadData',{ 'hiden-dom': idcardBackImgFileList.length >= 1 }]" list-type="picture-card" action="#" :limit="1" :on-exceed="showTip" :file-list = 'idcardBackImgFileList' :before-upload = "beforeUpImg" :on-preview="handleBackPictureCardPreview2" :on-remove="handleBackRemove2" :http-request="uploadIdcardBack" > <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogBackVisible2"> <img width="100%" :src="dialogBackImageUrl2" alt=""> </el-dialog> </div> <div> <span class="tips-text"> <i class="el-icon-warning h-warning"></i> </span> </div> <div style="width:380px;line-height: 24px;padding-top: 6px;"> <span class="tips-text">图片大小为500KB以内,支持png/jpg,每个上传框限一张,请确保图片清晰</span> </div> </div> <div class="idcard-tips-con"> <p>请上传身份证正面</p> <p>请上传身份证国徽面</p> </div> </el-form-item> <el-form-item label="法定姓名:" prop="real_name"> <el-input v-model="mainForm.real_name" style="width: 400px;"></el-input> <span class="tips-text"><i class="el-icon-warning h-warning"></i>请按照营业执照上登记的法人填写</span> </el-form-item> <el-form-item label="法定代表人证件号:" prop="idcard_number"> <el-input v-model="mainForm.idcard_number" style="width: 400px;"></el-input> </el-form-item> <el-form-item label="有效期至:" prop="idcard_expires_time"> <el-date-picker style="width:400px;" v-model="validityConcreteTime" type="daterange" range-separator="至" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" @change="validityConcreteTimeChange" :clearable="false" /> <el-checkbox v-model="validityLongTermVal" style="padding-left:15px;" @change="validityLongTermValChange">长期 </el-checkbox> </el-form-item> <el-form-item> <p class="main-form-tips">请核对企业法人信息,若信息不符合,可手动修改</p> </el-form-item> <div class="confirm-btn"> <p> <el-button type="primary" style="padding: 8px 30px;" @click="next('mainForm')">下一步</el-button> </p> </div> </el-form> </div> </el-card> <!-- 图片识别 对话框 --> <el-dialog title="提示" :visible.sync="isReadFailVisible" class="read-fail-dialog" width="600px" center :close-on-click-modal="false" :show-close="false"> <p>未能识别有效信息,请重新上传正确的图片或者手动输入相关信息</p> <p>该弹窗<span class="read-time-m">{{ readTime }}</span>S后自动关闭,无需手动关闭</p> </el-dialog> </div> </template> <script> import { getInfo,getMainInf,addMain,upLoadImg,getLicenseImgInfoData,getIdcardImgInfoData } from '@/api/module/entry'; import { dateFormat } from '@/utils' export default { name: "FillMainInf", data() { let authTimeValidator = (rule, value, callback) => { if(this.brandForm.brand_type === 2) { if (this.validityConcreteTime === null && this.validityLongTermVal === false) { callback(new Error("授权有效期具体时间和长期必须填写其中一个")); } else { callback(); } }else { callback(); } }; let licenseValidator = (rule, value, callback) => { if(this.licenseImgFileList.length > 0) { callback(); }else if(this.licenseImgFileList.length === 0) { callback(new Error("营业执照图片至少上传一张")); } }; let idCardValidator = (rule, value, callback) => { if(this.idcardImgFileList.length > 0) { callback(); }else if(this.idcardImgFileList.length === 0) { callback(new Error("法人证件照图片至少上传一张")); } }; let checkIdCard = (rule, value, callback) => { const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; if(!reg.test(value)){ callback(new Error('法人证件号格式有误')); }else { callback(); } }; let licenseTimeValidator = (rule, value, callback) => { if ( (this.periodConcreteTime.length == 0 || !this.periodConcreteTime) && this.periodLongTermVal === false) { callback(new Error("营业期限具体时间和长期必须填写其中一个")); } else { callback(); } }; let idCardTimeValidator = (rule, value, callback) => { if ((this.validityConcreteTime.length == 0 || !this.validityConcreteTime) && this.validityLongTermVal === false) { callback(new Error("有效期具体时间和长期必须填写其中一个")); } else { callback(); } }; return { licenseImgFileList: [], // 营业执照图片 idcardImgFileList: [], // 身份证件照图片 idcardBackImgFileList: [], // 身份证国徽面 dialogImageUrl: '', dialogVisible: false, dialogImageUrl2: '', dialogVisible2: false, dialogBackImageUrl2: '', dialogBackVisible2: false, // 营业期限 periodConcreteTime: [], periodLongTermVal: false, // 证件有效期 validityConcreteTime: [], validityLongTermVal: false, isConcretePeriod: false, isPeriodDisabled: false, isValidity: true, // 有效期至 是否填写 submitTime: [], // 主体信息 mainForm: { license: '', organization_name: '', license_number: '', organization_address: '', // 法人信息 idcard_front: '', idcard_back: '', real_name: '', idcard_number: '', idcard_start_time: '', idcard_expires_time: '', license_expires_time: '', license_start_time: '' }, // 主体信息校验 hasLicense: false, mainRules: { license: [{required: true, message: '请上传营业执照电子版',validator: licenseValidator}], organization_name: [{required: true, message: '企业名称不能为空', trigger: 'blur'}], license_number: [{required: true, message: '统一社会代码不能为空', trigger: 'blur'}], organization_address: [{required: true, message: '企业地址不能为空', trigger: 'blur'}], real_name: [{required: true, message: '法人姓名不能为空', trigger: 'blur'}], idcard_number: [ {required: true, message: '法人证件号不能为空', trigger: 'blur'}, {required: true, message: '法人证件号码格式有误', validator: checkIdCard,trigger: 'blur' } ], idcard_front: [{required: true, message: '请上传法人证件电子版图片',validator: idCardValidator}], license_expires_time: [{ validator:licenseTimeValidator,required: true,trigger: 'change' }], idcard_expires_time: [{ validator:idCardTimeValidator,required: true,trigger: 'change' }] }, readTime: 5, isReadFailVisible: false, TIMER: null, } }, created() { // 根据 用户信息,判断是否请求 回显接口 getInfo().then(res=> { if (res.code == 1 && res.data.user) { let isRrequest = false; if (res.data.user.state == 0) { if (res.data.user.status == 1) { isRrequest = true; }else { isRrequest = false; } }else if (res.data.user.state == 1 || res.data.user.state == 2 || res.data.user.state == 3) { isRrequest = true; } if (isRrequest) { this.getMain(); } } // if end }); // getInfo end }, destroyed() { clearInterval(this.TIMER); this.TIMER = null; }, mounted() {}, methods: { /** 营业期限 选择区间时间时 */ periodLongTermChange() { if (Array.isArray(this.periodConcreteTime) && this.periodConcreteTime.length == 2) { this.periodLongTermVal = false; } }, /** 营业期限 选择 长期时 */ periodConcreteChange() { if (this.periodLongTermVal) { this.periodConcreteTime = []; } }, /** 身份证有效期 选择区间时间时 */ validityConcreteTimeChange() { if (Array.isArray(this.validityConcreteTime) && this.validityConcreteTime.length == 2) { this.validityLongTermVal = false; } }, /** 身份证有效期 选择 长期时 */ validityLongTermValChange() { if (this.validityLongTermVal) { this.validityConcreteTime = []; } }, /** 上传 图片大小和格式校验 */ beforeUpImg(file) { // let isImgSize = (file.size / 1024 / 100) > 5; let isImgSize = (file.size / 1024 ) > 500; if(file.type !== "image/png" && file.type !== "image/jpg" && file.type != "image/jpeg") { this.$message({ message: '上传图片格式只支持png/png格式', type: "warning" }); return false; } if(isImgSize) { this.$message({ message: '上传图片大小不能超过500k', type: "warning" }); return false; } }, /** 上传 营业执照图片 */ uploadLicenseImages(param) { this.getBase64(param.file).then((res) => { let result = res.split(","); this.Base64img = result[1]; let data = {"img_data":this.Base64img,"type":2}; upLoadImg(data).then((res) => { if( res.code == 1){ this.licenseImgFileList.push({'url':res.data.image_url}); this.$message({type: 'success',message:'上传成功'}); this.$refs.mainForm.clearValidate('license'); // 图片识别 this.readLicenseImgInfo(this.licenseImgFileList); }else { this.$message({type:'error',message:res.message ? res.message : '上传失败'}); } }); }); }, handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; }, handleRemove(file,fileList) { for(let i = 0; i < this.licenseImgFileList.length; i++) { if(file.uid === this.licenseImgFileList[i].uid) { this.licenseImgFileList.splice(i,1); } } }, /** 识别 营业执照信息 */ readLicenseImgInfo(fileList) { // debugger if ( !Array.isArray(fileList) || !fileList[0].url) return let data = {img: fileList[0].url} // let data = {img: 'http://excel.jxhh.com/1626058781.jpg'} getLicenseImgInfoData(data).then(res=> { // console.log(369,res); if (res.code == 1 ) { this.mainForm.organization_name = res.data.words_result['单位名称'].words ? res.data.words_result['单位名称'].words : ''; this.mainForm.license_number = res.data.words_result['社会信用代码'].words ? res.data.words_result['社会信用代码'].words : ''; this.mainForm.organization_address = res.data.words_result['地址'].words ? res.data.words_result['地址'].words : ''; // 营业期限处理 if (res.data.words_result['有效期'].words == '长期' || res.data.words_result['有效期'].words == '年月日') { this.periodConcreteTime = []; this.periodLongTermVal = true; // this.isConcretePeriod = true; }else { // 营业期限 日期处理 XXXX年XX月XX日 => xx-xx-xx let beginTimeStr = res.data.words_result['成立日期'].words ? res.data.words_result['成立日期'].words : ''; let endTimeStr = res.data.words_result['有效期'].words let beginTime = beginTimeStr.replace(/年|月|日/g,"-").substr(0,beginTimeStr.length - 1) let endTime = endTimeStr.replace(/年|月|日/g,"-").substr(0,endTimeStr.length - 1) this.periodConcreteTime = []; this.periodConcreteTime.push(beginTime); this.periodConcreteTime.push(endTime); // this.isConcretePeriod = false; this.periodLongTermVal = false; } }else { this.isReadFailVisible = true; this.readTime = 5; clearInterval(this.TIMER); this.TIMER = setInterval(() => { if (this.readTime && 0 < this.readTime <= 5 ) { this.readTime-- } else { this.readTime = 0; this.isReadFailVisible = false; } }, 1000) } }); }, /** 上传身份证 正面 */ uploadIdcardPositive(param) { this.getBase64(param.file).then((res) => { let result = res.split(","); this.Base64img = result[1]; let data = {"img_data":this.Base64img,"type":2}; upLoadImg(data).then((res) => { if (res.code == 1){ this.idcardImgFileList.push({'url':res.data.image_url}); this.$message({type:'success',message:'上传成功'}); this.$refs.mainForm.clearValidate('idcard_front'); this.readIdcardPositive(this.idcardImgFileList); }else { this.$message({type:'error',message:res.message ? res.message : '上传失败'}); } }); }); }, /** 识别 身份证 正面 */ readIdcardPositive(fileList) { if ( !Array.isArray(fileList) || !fileList[0].url) return let data = {img: fileList[0].url} getIdcardImgInfoData(data).then(res=> { if (res.code == 1 ) { if (res.data.words_result) { try { this.mainForm.real_name = res.data.words_result['姓名'].words ? res.data.words_result['姓名'].words : ''; this.mainForm.idcard_number = res.data.words_result['公民身份号码'].words ? res.data.words_result['公民身份号码'].words : ''; } catch (e) { this.isReadFailVisible = true; this.readTime = 5; clearInterval(this.TIMER); this.TIMER = setInterval(() => { if (this.readTime && 0 < this.readTime <= 5 ) { this.readTime-- } else { this.readTime = 0; this.isReadFailVisible = false; } }, 1000) } } }else { this.isReadFailVisible = true; this.readTime = 5; clearInterval(this.TIMER); this.TIMER = setInterval(() => { if (this.readTime && 0 < this.readTime <= 5 ) { this.readTime-- } else { this.readTime = 0; this.isReadFailVisible = false; } }, 1000) } }); }, handlePictureCardPreview2(file) { this.dialogImageUrl2 = file.url; this.dialogVisible2 = true; }, handleRemove2(file,fileList) { for(let i = 0; i < this.idcardImgFileList.length; i++) { if(file.uid === this.idcardImgFileList[i].uid) { this.idcardImgFileList.splice(i,1); } } }, /** 上传身份证 反面 */ uploadIdcardBack(param) { this.getBase64(param.file).then((res) => { let result = res.split(","); this.Base64img = result[1]; let data = {"img_data":this.Base64img,"type":2}; upLoadImg(data).then((res) => { if (res.code == 1){ this.idcardBackImgFileList.push({'url':res.data.image_url}); this.$message({type:'success',message:'上传成功'}); this.$refs.mainForm.clearValidate('idcard_back'); this.readIdcardBack(this.idcardBackImgFileList); }else { this.$message({type:'error',message:res.message ? res.message : '上传失败'}); } }); }); }, /** 识别 身份证 反面 */ readIdcardBack(fileList) { if ( !Array.isArray(fileList) || !fileList[0].url) return let data = {img: fileList[0].url} getIdcardImgInfoData(data).then(res=> { if (res.code == 1 ) { // 身份证 有效 XXXXXXXX日 => xx-xx-xx if (res.data.words_result['签发日期'] && res.data.words_result['失效日期'] ) { let beginStr = res.data.words_result['签发日期'].words; let endStr = res.data.words_result['失效日期'].words; if (endStr == '长期') { this.validityConcreteTime = []; this.validityLongTermVal = true; }else { let reg = /^(\d{4})(\d{2})(\d{2})$/; let begin = beginStr.replace(reg, "$1-$2-$3"); let end = endStr.replace(reg, "$1-$2-$3"); this.validityConcreteTime = []; this.validityConcreteTime.push(begin); this.validityConcreteTime.push(end); this.validityLongTermVal = false; } }else { this.isReadFailVisible = true; this.readTime = 5; clearInterval(this.TIMER); this.TIMER = setInterval(() => { if (this.readTime && 0 < this.readTime <= 5 ) { this.readTime-- } else { this.readTime = 0; this.isReadFailVisible = false; } }, 1000) } }else { this.isReadFailVisible = true; this.readTime = 5; clearInterval(this.TIMER); this.TIMER = setInterval(() => { if (this.readTime && 0 < this.readTime <= 5 ) { this.readTime-- } else { this.readTime = 0; this.isReadFailVisible = false; } }, 1000) } }); }, handleBackPictureCardPreview2(file) { this.dialogBackImageUrl2 = file.url; this.dialogBackVisible2 = true; }, handleBackRemove2(file) { for(let i = 0; i < this.idcardBackImgFileList.length; i++) { if(file.uid === this.idcardBackImgFileList[i].uid) { this.idcardBackImgFileList.splice(i,1); } } }, // 获取主体信息接口 getMain() { getMainInf().then(res => { if(res.code == 1) { this.resetForm('mainForm'); this.mainForm = res.data; // 营业执照电子图片处理 let licenseImgArr = []; let licenseImgUrl = {}; licenseImgArr = this.mainForm.license.split(","); if (licenseImgArr.length > 0) { licenseImgArr.forEach(item=> { licenseImgUrl = {}; if (item) { licenseImgUrl.url = item this.licenseImgFileList.push(licenseImgUrl) } }); }else { this.licenseImgFileList = []; } // 身份证 正面数据处理 let idcardFrontImgArr = []; let idcardFrontImgUrl = {}; idcardFrontImgArr = this.mainForm.idcard_front.split(","); if (idcardFrontImgArr.length > 0) { idcardFrontImgArr.forEach(item=> { idcardFrontImgUrl = {}; if (item) { idcardFrontImgUrl.url = item this.idcardImgFileList.push(idcardFrontImgUrl) } }); }else { this.idcardImgFileList = []; } // 身份证 反面数据处理 let idcardBackImgArr = []; let idcardBackImgUrl = {}; idcardBackImgArr = this.mainForm.idcard_back.split(","); if (idcardBackImgArr.length > 0) { idcardBackImgArr.forEach(item=> { idcardBackImgUrl = {}; if (item) { idcardBackImgUrl.url = item this.idcardBackImgFileList.push(idcardBackImgUrl) } }); }else { this.idcardBackImgFileList = []; } // 营业期限 日期格式处理 if (this.mainForm.license_expires_time == 0) { this.periodLongTermVal = true this.periodConcreteTime = []; } else if (this.mainForm.license_expires_time > 0) { this.periodLongTermVal = false; this.periodConcreteTime = []; let start = this.formatterTime(this.mainForm.license_start_time) let end = this.formatterTime(this.mainForm.license_expires_time); this.periodConcreteTime.push(start) this.periodConcreteTime.push(end) } // 身份证 有效期 日期格式处理 if (this.mainForm.idcard_expires_time == 0) { this.validityLongTermVal = true this.validityConcreteTime = []; } else if (this.mainForm.idcard_expires_time > 0) { this.validityLongTermVal = false; this.validityConcreteTime = []; let start = this.formatterTime(this.mainForm.idcard_start_time) let end = this.formatterTime(this.mainForm.idcard_expires_time); this.validityConcreteTime.push(start) this.validityConcreteTime.push(end) } } else { this.$message({type:'error',message:res.message ? res.message : '获取主体信息失败'}); } }); }, resetForm(formName) { this.periodConcreteTime = []; this.validityConcreteTime = []; this.$refs[formName].resetFields(); }, // 图片转换为base64位 getBase64(file) { return new Promise(function(resolve, reject) { let reader = new FileReader(); let imgResult = ""; reader.readAsDataURL(file); reader.onload = function() { imgResult = reader.result; }; reader.onerror = function(error) { reject(error); }; reader.onloadend = function() { resolve(imgResult); }; }); }, // 时间戳转换为 标准时间格式 formatterTime(time) { return dateFormat(time *1000, 'Y-m-d') }, /** 图片上传 数量限制 1张 */ showTip2() { this.$message({message: '最多上传2张图片', type: 'warning'}); }, showTip() { this.$message({message: '最多上传1张图片', type: 'warning'}); }, back() { this.$router.push("/agreement"); }, next(form) { // 营业期限 数据处理 if (this.periodLongTermVal) { this.mainForm.license_expires_time = 0; this.mainForm.license_start_time = 0; } else { if( Array.isArray(this.periodConcreteTime) && this.periodConcreteTime.length == 2) { this.mainForm.license_start_time = new Date(this.periodConcreteTime[0]).getTime() / 1000; this.mainForm.license_expires_time = new Date(this.periodConcreteTime[1]).getTime() / 1000; } } // 身份证有效期 数据处理 if (this.validityLongTermVal) { this.mainForm.idcard_expires_time = 0; this.mainForm.idcard_start_time = 0; } else { if( Array.isArray(this.validityConcreteTime) && this.validityConcreteTime.length == 2) { this.mainForm.idcard_start_time = new Date(this.validityConcreteTime[0]).getTime() / 1000; this.mainForm.idcard_expires_time = new Date(this.validityConcreteTime[1]).getTime() / 1000; } } // 处理营业执照 if(this.licenseImgFileList.length > 0) { //console.log(445,this.licenseImgFileList) for(let i = 0; i < this.licenseImgFileList.length; i++) { if(i === 0) { this.mainForm.license = this.licenseImgFileList[i].url; }else { this.mainForm.license += ',' + this.licenseImgFileList[i].url; } } } // 身份证 正面 数据处理 if(this.idcardImgFileList.length > 0) { for(let i = 0; i < this.idcardImgFileList.length; i++) { if(i === 0) { this.mainForm.idcard_front = this.idcardImgFileList[i].url; }else { this.mainForm.idcard_front += ',' + this.idcardImgFileList[i].url; } } } // 身份证 反面 数据处理 if(this.idcardBackImgFileList.length > 0) { for(let i = 0; i < this.idcardBackImgFileList.length; i++) { if(i === 0) { this.mainForm.idcard_back = this.idcardBackImgFileList[i].url; }else { this.mainForm.idcard_back += ',' + this.idcardBackImgFileList[i].url; } } } this.$refs[form].validate((valid) => { if (valid) { addMain(this.mainForm).then(res => { if(res.code == 1) { this.$router.push("/fillShopInf"); }else { this.$message({type:'error',message:res.message ? res.message : '保存失败'}); } }); } }); }, } } </script> <style scoped> .main-con /deep/ .uploadData .el-upload-list--picture-card .el-upload-list__item{ line-height: 20px !important; } </style> <style lang="scss" type="text/stylus" scoped> .fill-store-inf { font-size : 16px; width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; .box-card { width: 80%; margin: 30px auto 30px; height: calc(100% - 140px); ::v-deep .el-card__body{ height: calc(100% - 140px); overflow-x: hidden; overflow-y: scroll; } } } .logo-bg { height: 60px; background: #1890ff; img { height: 44px; margin: 8px 0 8px 20px; } } .steps { height: 70px; width: 60%; margin: 20px auto; } .steps >>> .el-step__title { font-size: 16px; line-height: 18px; padding-top: 20px; } .el-step >>> .el-step__head.is-process { color: #1890ff; border-color: #1890ff; .el-step__icon.is-text { background-color: #1890ff; .el-step__icon-inner { color: #fff; } } } .el-step >>> .el-step__title.is-process { color: #000; font-weight : normal; } .el-step >>> .el-step__head.is-success { color: #1890ff; border-color: #1890ff; .el-step__line { background-color: #1890ff; } } .el-step >>> .el-step__title.is-success { color: #000; } // 主体信息 .main-con { width: 70%; margin: 30px auto; overflow-y: scroll; // 重置 提示图标颜色 .tips-text { font-size: 14px; color: #C9C9C9; word-break: break-all; } .h-warning:before { color: #e3c300; } // 上传图片样式 .uploadData { display: inline-block; ::v-deep .el-upload--picture-card{ width: 100px; height: 100px; } ::v-deep .el-upload{ width: 100px; height: 100px; line-height: 100px; } ::v-deep .el-upload-list--picture-card .el-upload-list__item{ width: 100px; height: 100px; line-height: 100px; } ::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail{ width: 100px; height: 100px; line-height: 100px; } ::v-deep .avatar{ width: 100px; height: 100px; } } } .hiden-dom >>> .el-upload--picture-card { display :none!important; } .idcard-tips-con { display: flex; flex-direction: row; justify-content: normal; justify-items : center; } .idcard-tips-con > p { margin: 0; padding: 0 15px; } .main-form-con { margin-left: 100px; } .main-form-title { color: #666; font-size: 18px; font-weight: 600; padding: 0; margin: 10px 0 10px -180px; } .main-form-tips { color: #aaa; font-size: 14px; font-weight: 400; padding: 0; } .confirm-btn { width: 50%; margin: 40px auto 0; p { text-align: center; } } .read-fail-dialog >>> .el-dialog > .el-dialog__body > p{ text-align : center; font-size: 16px; } .read-fail-dialog >>> .read-time-m { color: #F56C6C; font-size: 18px; padding: 0 5px; } </style>