<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-step title="提交入驻审核"></el-step> </el-steps> </div> <div class="main-con"> <el-form ref="storeForm" :model="storeForm" :rules="shopRules" label-width="180px"> <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" 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" 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="其他资质:" prop="business_auth"> <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;"> <div style="padding-right:6px;"> <el-upload class="uploadData" action="#" list-type="picture-card" :limit="20" :on-exceed="showTip20" :before-upload = "beforeUpBusImg" :http-request="uploadBusinessImgs" :on-preview="handlePictureCardPreview2" :on-remove="handleRemove2" :file-list = 'businessImgFileList'> <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible2"> <img width="100%" :src="dialogImageUrl2" 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;color: #333;"> <span class="tips-text">请上其他资质,单个文件大小在2MB以内,支持jpg,png格式,最多可上传20张</span> </div> </div> </el-form-item> <el-form-item style="margin: 40px 0 0;"> <el-button type="primary" @click="back" style="margin-right: 40px;">上一步</el-button> <el-button type="primary" @click="next('storeForm')">提交审核</el-button> </el-form-item> </el-form> </div> </el-card> </div> </template> <script> import { getGoodsType, getShopInf ,addShopInf ,upLoadImg} 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'}], 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' } ], business_auth: [{required: true, message: '其他资质至少上传一张图片', validator: busAuthValidator}],// } } }, created() { // 获取经营一级类目 getGoodsType().then(res => { if(res.code == 1) { this.scopeOptions = res.data; }else { this.$message({type:'error',message:res.message ? res.message : ''}); } }); // 获取店铺信息 this.getShop(); }, 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 && res.data){ // 处理 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; } //console.log("处理后的格式:",this.storeForm.scope); // 店铺logo回显处理 let logoList = {}; let logoArr = []; if(this.storeForm.shop_logo.indexOf(",") > 0) { logoArr = this.storeForm.shop_logo.split(","); for(let a = 0; a < logoArr.length; a++){ logoList = {}; logoList.url = logoArr[a]; this.logoImgFileList.push(logoList); } }else if(this.storeForm.shop_logo) { logoList.url = this.storeForm.shop_logo; this.logoImgFileList = []; this.logoImgFileList.push(logoList); }else { this.logoImgFileList = []; } // 资质图片回显处理 let businessList = {}; let busArr = []; if(this.storeForm.business_auth.indexOf(",") > 0) { busArr = this.storeForm.business_auth.split(","); for(let a = 0; a < busArr.length; a++){ businessList = {}; businessList.url = busArr[a]; this.businessImgFileList.push(businessList); } }else if(this.storeForm.business_auth) { businessList.url = this.storeForm.business_auth; this.businessImgFileList = []; this.businessImgFileList.push(businessList); }else { this.businessImgFileList = []; } }else { this.$message({ message: res.message ? res.message : '操作失败' , type: 'error' }); } }); }, // 上传店铺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) { 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("/fillBrandInf"); }, /** 提交审核数据 */ next(formName) { 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); //console.log("提交前的scope",this.storeForm.scope); // 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; } } } // 其他资质图片字段处理 if(this.businessImgFileList.length > 0) { for(let i = 0; i < this.businessImgFileList.length; i++) { if(i === 0) { this.storeForm.business_auth = this.businessImgFileList[i].url; }else { this.storeForm.business_auth += ',' + this.businessImgFileList[i].url; } } } //console.log("新增/修改的店铺信息:",this.storeForm); //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; } } }); } } } </script> <style lang="scss" type="text/stylus" scoped> .fill-store-inf { width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; .box-card { width: 80%; margin: 30px auto 30px; height: calc(100% - 120px); /deep/.el-card__body{ height: calc(100% - 120px); 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 :calc(100% - 170px); margin: 20px auto 0; overflow-y: scroll; // 重置 提示图标颜色 .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; } } } </style>