<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="2" 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="storeForm" :model="storeForm" :rules="shopRules" label-width="180px" size="small"> <el-form-item label="电商平台经验:" prop="is_business_experience"> <el-radio-group v-model="storeForm.is_business_experience"> <el-radio :label="1">有</el-radio> <el-radio :label="0">无</el-radio> </el-radio-group> </el-form-item> <el-form-item label="店铺名称:" prop="store_name" inline-message="true"> <el-input v-model="storeForm.store_name" style="width: 400px;" placeholder="请输入店铺名称"></el-input> </el-form-item> <el-form-item label="经营类目:" prop="scope"> <el-select v-model="storeForm.scope" @remove-tag="removeTag" @visible-change="scopeVisibleChange($event)" multiple placeholder="请选择..." style="width: 400px;"> <el-option v-for="item in scopeOptions" :key="item.id" :label="item.title" :value="item.id" ></el-option> </el-select> </el-form-item> <el-form-item label="店铺LOGO:" prop="shop_logo"> <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': logoImgFileList.length >= 1 }]" action="#" list-type="picture-card" :limit="1" :on-exceed="showTip1" :before-upload = "beforeUpLogoImg" :http-request="uploadLogoImgs" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :file-list = 'logoImgFileList' > <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:380px;line-height: 24px;padding-top: 6px;"> <span class="tips-text">请上传店铺LOGO,文件大小在500KB以内,支持png,jpg格式,最多可上传1张</span> </div> </div> </el-form-item> <el-form-item label="运营负责人:" prop="emergency_name" inline-message="true"> <el-input v-model="storeForm.emergency_name" style="width: 400px;" placeholder="请输入运营负责人姓名"></el-input> </el-form-item> <el-form-item label="联系电话:" prop="emergency_tel"> <el-input v-model="storeForm.emergency_tel" style="width: 400px;" placeholder="请输入联系电话"></el-input> </el-form-item> <el-form-item> <p style="width:580px;line-height:24px;font-size:14px;margin: 0;">需要提交特殊产品资质的类目请将资质上传在此处,包括全国工业生产许可证、3C、医疗品械 生产许可证、化妆品生产企业许可证等,根据具体类目资质要求提交</p> </el-form-item> <el-form-item label="其他资质:"> <div class="auth-con"> <!--*** 方法二 start ***--> <div v-for="(item,index) in qualificationList" :key="item.id" class="single-upload-con"> <div v-show="!item.url" class="single-auth-img el-icon-plus" @click="upPreAuthImg(index)"></div> <div v-show="item.url" class="single-auth-img-con"> <img class="auth-spec-img" :src="item.url" alt="" /> <span class="span-img-del-loading"> <span class="span-img-del el-icon-zoom-in zoom-span-block" @click="viewSingleSpecImg(index,item)"></span> <span class="span-img-del el-icon-delete del-span-block" @click="delSingleSpecImg(index,item)"></span> </span> </div> <div class="single-title">{{ authTitleFormatter(item.content) }}</div> <!-- 真正上传 dom 原生 input --> <input type="file" style="display: none;" :ref=" 'hxz' + index " accept="image/*" @change="changeIMG(index,item)"> </div> <!--*** 方法二 end ***--> </div> </el-form-item> <el-form-item class="confirm-btn"> <div> <el-button type="primary" @click="back" style="margin-right: 40px;">上一步</el-button> <el-button type="primary" @click="next('storeForm')">提交审核</el-button> </div> </el-form-item> </el-form> </div> </el-card> <!-- 图片预览 --> <el-dialog :visible.sync="imgDialog" :destroy-on-close="true" width="60%" center :close-on-click-modal="false" class="img-dialog-con" > <img class="img-spe" :src="qualificationUrl" alt=""> </el-dialog> </div> </template> <script> import { getInfo,getGoodsType, getShopInf ,addShopInf ,upLoadImg,getUploadQualificationListData} from '@/api/module/entry'; export default { name: "FillShopInf", data() { let logoValidator = (rule, value, callback) => { if(this.logoImgFileList.length > 0) { callback(); }else if(this.logoImgFileList.length === 0) { callback(new Error("店铺logo图片至少上传一张")); } }; let busAuthValidator = (rule, value, callback) => { if(this.businessImgFileList.length > 0) { callback(); }else if(this.businessImgFileList.length === 0) { callback(new Error("其他资质图片至少上传一张")); } }; // 手机号码格式校验 let checkTel = (rule, value, callback) => { const reg = /^1[3456789]\d{9}$/; if(!reg.test(value)){ callback(new Error('手机号码格式有误')); }else { callback(); } } return { dialogImageUrl: '', dialogVisible: false, dialogImageUrl2: '', dialogVisible2: false, logoImgFileList: [], businessImgFileList: [], scopeOptions: [], storeForm: { is_business_experience: 0, store_name: '', scope: [], shop_logo: '', business_auth: '', emergency_name: '', }, // shopRules: { store_name: [ {required: true, message: '店铺名称不能为空', trigger: 'blur'}, { max: 36,message: '店铺名称最多输入36个字符', trigger: 'blur' } ], scope: [{required: true, message: '经营类目至少选择一种', trigger: 'change'}], shop_logo: [{required: true, message: '店铺Logo至少上传一张图片', validator: logoValidator}],// emergency_name: [{required: true, message: '运营负责人不能为空', trigger: 'blur'}],// emergency_tel: [ {required: true, message: '联系人手机号码不能为空', trigger: 'blur'}, {required: true, validator: checkTel,trigger: 'blur' } ], }, // 需要上传的资质 qualificationList: [], qualificationUrl: '', imgDialog: false } }, created() { // console.log('店铺页面',this.$store.state.user.applyState) // 获取经营一级类目 getGoodsType().then(res => { if(res.code == 1) { this.scopeOptions = res.data; }else { this.$message({type:'error',message:res.message ? res.message : ''}); } }); // 获取店铺信息 getInfo().then(res=> { if (res.code == 1 && res.data.user) { if (res.data.user.state > 0) { this.getShop(); } }else { this.$message({type:'error',message: res.message ? res.message : '获取数据失败'}); } }); }, mounted() {}, methods: { showTip1(files,fileList){ this.$message({message: '最多上传1张图片', type: 'warning'}); }, showTip20(files,fileList) { this.$message({message: '最多上传20张图片', type: 'warning'}); }, // 店铺logo图片上传格式和大小的校验 beforeUpLogoImg(file) { 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: '上传图片大小不能超过500kb', type: "warning" }); return false; } }, // 其他资质图片上传 校验 beforeUpBusImg(file) { let isImgSize = (file.size / 1024 /1024) > 2; 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: '上传图片大小不能超过2M', type: "warning" }); return false; } }, /** 获取 店铺信息 */ getShop() { getShopInf().then(res => { if(res.code == 1){ // 处理 select 下拉回显数据格式 this.storeForm.scope = []; if(res.data.scope === '') { this.storeForm.scope = []; }else { let scopeListStr = res.data.scope.split(','); let scopeList = []; for(let i = 0; i < scopeListStr.length; i++) { scopeList.push(parseInt(scopeListStr[i])); } this.storeForm = res.data; this.storeForm.scope = scopeList; } // 店铺logo回显处理 let logoImgArr = []; let logoImgUrl = {}; logoImgArr = this.storeForm.shop_logo.split(","); if (logoImgArr.length > 0) { logoImgArr.forEach(item=> { logoImgUrl = {}; if (item) { logoImgUrl.url = item this.logoImgFileList.push(logoImgUrl) } }); }else { this.logoImgFileList = []; } // 资质图片回显处理 this.qualificationList = this.storeForm.qualification; }else { this.$message({type: 'error', message: res.message ? res.message : ''}); } }); }, // 上传店铺logo图片 uploadLogoImgs(param) { this.getBase64(param.file).then((res) => { let result = res.split(","); this.Base64img = result[1]; let data = {"img_data":this.Base64img}; upLoadImg(data).then((res) => { if(res.code == 1){ this.logoImgFileList.push({'url':res.data.image_url}); this.$message({type:'success',message:'上传成功'}); this.$refs.storeForm.clearValidate('shop_logo'); }else { this.$message({type:'error',message:res.message ? res.message : '上传失败'}); } }); }); }, // 上传资质图片 uploadBusinessImgs(param) { console.log(368,param); // this.getBase64(param.file).then((res) => { // let result = res.split(","); // this.Base64img = result[1]; // let data = {"img_data":this.Base64img}; // upLoadImg(data).then((res) => { // if(res.code == 1){ // this.businessImgFileList.push({'url':res.data.image_url}); // this.$message({type:'success',message:'上传成功'}); // this.$refs.storeForm.clearValidate('business_auth'); // }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.logoImgFileList.length; i++) { if(file.uid === this.logoImgFileList[i].uid) { this.logoImgFileList.splice(i,1); } } }, handlePictureCardPreview2(file) { this.dialogImageUrl2 = file.url; this.dialogVisible2 = true; }, handleRemove2(file,fileList) { for(let i = 0; i < this.businessImgFileList.length; i++) { if(file.uid === this.businessImgFileList[i].uid) { this.businessImgFileList.splice(i,1); } } }, // 图片转换为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); }; }); }, // back() { this.$router.push("/fillMainInf"); }, /** 提交审核数据 */ next(formName) { // 其他 资质 填写拦截校验 let isComplete = false; if (this.qualificationList.length > 0) { for (let i = 0; i < this.qualificationList.length; i++) { if (!this.qualificationList[i].url) { isComplete = true; break } } if (isComplete) { this.$message({type:'warning',message: '请上传对应资质所需的图片'}); return; } } let scoprStr = ''; for(let i = 0; i < this.storeForm.scope.length; i++) { scoprStr += this.storeForm.scope[i] + ','; } this.storeForm.scope = scoprStr.substring(0,scoprStr.length - 1); // shop_logo图片 if(this.logoImgFileList.length > 0) { for(let i = 0; i < this.logoImgFileList.length; i++) { if(i === 0) { this.storeForm.shop_logo = this.logoImgFileList[i].url; }else { this.storeForm.shop_logo += ',' + this.logoImgFileList[i].url; } } } // 其他资质 数据格式处理 // let JSONqualificationList = JSON.stringify(this.qualificationList) this.storeForm.qualification_auth = JSON.stringify(this.qualificationList) //formName this.$refs[formName].validate((valid) => { if(valid) { addShopInf(this.storeForm).then(res => { if(res.code == 1){ this.$router.push("/reviewing"); }else { this.$message({type: 'error',message: res.message ? res.message : '保存失败'}); // 处理 scope数据格式冲突 if(this.storeForm.scope === '') { this.storeForm.scope = []; }else { let scopeListStr = this.storeForm.scope.split(','); let scopeList = []; for(let i = 0; i < scopeListStr.length; i++) { scopeList.push(parseInt(scopeListStr[i])); } this.storeForm.scope = scopeList; } } }); } else { // 因 scope字段是selcet的绑定值,必须为数组类型,但是,在传给后台的时候,是字符串类型,传入的时候需要处理,回显的时候也需要处理 // 在校验时候就产出了这个bug,校验不通过的话,他已经被处理为字符串了,不通过的话,还原格式,不能还原数据 //this.storeForm.scope = []; if(this.storeForm.scope === '') { this.storeForm.scope = []; }else { let scopeListStr = this.storeForm.scope.split(','); let scopeList = []; for(let i = 0; i < scopeListStr.length; i++) { scopeList.push(parseInt(scopeListStr[i])); } this.storeForm.scope = scopeList; } } }); }, /** 删除单个 经营类目 触发 */ removeTag(indexVal) { if (!indexVal) return; if (this.storeForm.scope.length == 0) { this.qualificationList = []; } if (this.storeForm.scope.length > 0) { let data = { cate_ids: this.storeForm.scope } getUploadQualificationListData(data).then(res=> { if (res.code == 1) { this.qualificationList = res.data ? res.data : []; } }) } }, /** 经营类目 下拉框隐藏时候,触发 */ scopeVisibleChange(handleType) { if (!handleType) { if (Array.isArray(this.storeForm.scope) && this.storeForm.scope.length > 0) { let data = { cate_ids: this.storeForm.scope } getUploadQualificationListData(data).then(res=> { if (res.code == 1) { this.qualificationList = res.data ? res.data : []; } }) } } }, /** 上传 对应资质图片 */ upPreAuthImg(index) { let domRef = "hxz" + index; this.$refs[domRef][0].value = ''; this.$refs[domRef][0].click(); }, /** 真正的上传图片方法,原生input */ changeIMG(index, item) { let curItem = item; let inputDom = "hxz" + index; let file = this.$refs[inputDom][0].files[0]; if( file.size > 1024 * 1024 * 3 ) { this.$message({ type: 'error',message: '规格图片不能大于 3 M'}); return; } this.getBase64(file).then((res) => { let result = res.split(","); this.Base64img = result[1]; let data = {"img_data": this.Base64img} upLoadImg(data).then(res => { // this.loading = false; if (res && res.code == 1) { curItem.url = res.data.image_url; // this.singleSpecImgList.push({'url': res.data.image_url}) this.$message({ message:'上传成功',type:'success'}); }else { this.$message({ message:'上传失败,请重新上传',type:'error'}); } }) }); }, /** 更换图片 */ // changeSpeImg(index,item) { // this.upPreAuthImg(index,item); // }, /** 删除 当前图片 */ delSingleSpecImg(index,item) { if( item.url ) { item.url = ''; this.$message({type: 'success',message: '删除成功'}); } }, /** 查看 当前图片 */ viewSingleSpecImg(index,item) { this.imgDialog = false; // this.qualificationUrl = ""; if (!item.url) return; this.imgDialog = true; this.qualificationUrl = item.url }, /** 资质类目 title格式化 */ authTitleFormatter(textVal) { let res = '',resoult = ''; if (textVal) { res = textVal.trim(); // if(textVal.left(0) == '《') { // // } // if(textVal.right(0) == '《') { // // } // console.log(111,textVal.left(0)); // console.log(222,textVal.right(0)); } return res }, } // methods end } </script> <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); /deep/.el-card__body{ height: calc(100% - 180px); 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: 400; } .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%; height: 100%; margin: 20px auto 0; // 重置 提示图标颜色 .tips-text { font-size: 14px; color: #C9C9C9; word-break: break-all; } .h-warning:before { color: #e3c300; } // 上传图片样式 .uploadData { display: inline-block; /deep/ .el-upload--picture-card { width: 100px; height: 100px; } /deep/ .el-upload { width: 100px; height: 100px; line-height: 100px; } /deep/ .el-upload-list--picture-card .el-upload-list__item { width: 100px; height: 100px; line-height: 100px; } /deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail { width: 100px; height: 100px; line-height: 100px; } /deep/ .avatar { width: 100px; height: 100px; } } .hiden-dom >>> .el-upload--picture-card { display :none!important; } /*** 资质 样式 start ***/ .auth-con { width:100%; height: 100%; display: flex; flex-direction: row; justify-content: normal; flex-wrap: wrap; } .single-upload-con { width: 160px; height: 140px; text-align :center; overflow:hidden; } .single-auth-img { width: 98px; height: 98px; border-radius : 6px; border: 1px dashed #eee; margin: 5px auto; cursor: pointer; color: #8c939d; line-height : 98px; font-size : 28px; } .single-auth-img-con{ margin: 0; padding: 0; display : inline-block; width:98px; height:98px; position: relative; //top:4px; cursor: pointer; border-radius: 6px; border: 1px solid #c0ccda; } .auth-spec-img { width: 100%; height: 100%; border-radius: 6px; cursor: pointer; position: relative; border: none; } /* 当前图片滑过 效果,显示删除icon */ .span-img-del-loading { display : none; position: absolute; width: 98px; height: 98px; top: 0; left: 0; border-radius : 5px; z-index: 66; background-color: rgba(0,0,0,0.5); opacity: 0.75; transition: opacity .3s; } .span-img-del-loading > .zoom-span-block { color: #fff; font-size: 20px; font-weight : 500; margin: 41px 4px 0; z-index: 70; } .span-img-del-loading > .del-span-block { color: #fff; font-size: 20px; font-weight : 500; margin: 41px 4px 0; z-index: 70; } .single-auth-img-con:hover > .span-img-del-loading { display : block; } .single-title { font-size: 12px; color: #666; text-align: center; //line-height :14px; //margin: 10px 0; } /*** 资质 样式 end ***/ .confirm-btn { width: 50%; margin: 40px auto 20px; } .confirm-btn > div { text-align: center; } } .img-dialog-con >>> .el-dialog__body { text-align : center; } .img-spe { //width: 80%; margin: 0 auto; } </style>