<template> <div class="fill-brand-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-step title="提交入驻审核"></el-step> </el-steps> </div> <div class="main-con"> <el-form ref="brandForm" :model="brandForm" :rules="brandRules" label-width="180px"> <el-form-item label="经营品牌类型:"> <el-radio-group v-model="brandForm.brand_type" @change="chooseBrandType"> <el-radio :label="1">自有品牌</el-radio> <el-radio :label="2">品牌厂商授权</el-radio> <el-radio :label="3">无品牌</el-radio> </el-radio-group> </el-form-item> <div v-show="brandForm.brand_type !== 3" class="spe-brand-text"> 品牌一 </div> <el-form-item label="品牌中文名:" v-show="brandForm.brand_type !== 3" prop="brand_cn"> <el-input v-model="brandForm.brand_cn" style="width: 400px;" placeholder=""></el-input> </el-form-item> <el-form-item label="品牌英文名:" v-show="brandForm.brand_type !== 3" prop="brand_en"> <el-input v-model="brandForm.brand_en" style="width: 400px;" placeholder=""></el-input> </el-form-item> <el-form-item label="品牌LOGO:" ref="logoImg" prop="brand_logo" v-if="brandForm.brand_type !== 3"> <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" :http-request="uploadLogoImgs" :limit="1" :on-exceed="showTip" :before-upload = "beforeUpLogoImg" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :file-list = 'brandImgFileList' > <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">图片大小在500KB以内,支持png/jpg,限一张,请确保图片清晰</span> </div> </div> </el-form-item> <el-form-item label="品牌商标注册号:" v-show="brandForm.brand_type !== 3" prop="brand_number"> <el-input v-model="brandForm.brand_number" style="width: 400px;" placeholder=""></el-input> </el-form-item> <el-form-item label="品牌类型:" v-show="brandForm.brand_type !== 3" prop="brand_range"> <el-radio-group v-model="brandForm.brand_range"> <el-radio :label="1">国内品牌</el-radio> <el-radio :label="2">国外品牌</el-radio> </el-radio-group> </el-form-item> <el-form-item label="品牌方授权书:" prop="brand_auth" v-if="brandForm.brand_type === 2"> <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;"> <div style="padding-right:6px;"> <el-upload class="uploadData" action="#" :limit="1" list-type="picture-card" :http-request="uploadFactoryImgs" :before-upload = "beforeUpImg" :on-preview="handlePictureCardPreview2" :on-remove="handleRemove2" :file-list = 'factoryImgFileList' > <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;"> <span class="tips-text">图片大小在500KB以内,支持png/jpg,限一张,请确保图片清晰</span> </div> </div> </el-form-item> <el-form-item label="授权有效期至:" v-if=" brandForm.brand_type === 2" prop="brand_auth_time"> <el-date-picker type="date" placeholder="选择日期" v-model="validityConcreteTime" style="width: 300px;" @change="validityConcrete"></el-date-picker> <el-checkbox v-model="validityLongTermVal" style="padding-left:15px;" @change="validityLongTerm">长期 </el-checkbox> </el-form-item> <el-form-item label="品牌经营授权:" prop="brand_business_auth" v-if="brandForm.brand_type !== 3"> <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;"> <div style="padding-right:6px;"> <el-upload class="uploadData" action="#" :http-request="uploadShopImgs" list-type="picture-card" :limit="1" :on-exceed="showTip" :before-upload = "beforeUpImg" :on-preview="handlePictureCardPreview3" :on-remove="handleRemove3" :file-list="shopImgFileList" > <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible3"> <img width="100%" :src="dialogImageUrl3" 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> </el-form-item> <el-form-item label="" v-show="brandForm.brand_type !== 3"> <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;"> <a class="download-Template-btn" :href="downTemplatehttp"><i class="el-icon-download"></i>下载模板</a> <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">请您点击下载授权书模板,打印并签字盖章,拍照上传。 如暂时无法上传该授权,可选择【无品牌】,稍后在店铺信息里面完善品牌信息</span> </div> </div> </el-form-item> <el-form-item v-show="brandForm.brand_type !== 3"> <el-button type="primary" @click="back" style="margin-right: 40px;">上一步</el-button> <el-button type="primary" @click="next('brandForm')">下一步</el-button> </el-form-item> </el-form> <div class="no-brand" v-show="!hasBrand"> <p>您当前选择的是无品牌</p> <p>这不会影响您入驻的审核</p> <p>入驻成功后,您可以在店铺信息里,添加您的品牌</p> <div class="no-brand-btn"> <el-button type="primary" @click="back" style="margin-right: 40px;">上一步</el-button> <el-button type="primary" @click="noBrandNext">下一步</el-button> </div> </div> </div> </el-card> </div> </template> <script> import { getBrandsInf,addBrands,upBrands ,upLoadImg } from '@/api/module/entry'; export default { name: "FillBrandInf", 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 authValidator = (rule, value, callback) => { if(this.brandImgFileList.length > 0) { callback(); }else if(this.brandImgFileList.length === 0) { callback(new Error("品牌logo图片至少上传一张")); } }; let authBusValidator = (rule, value, callback) => { if(this.shopImgFileList.length > 0) { callback(); }else if(this.shopImgFileList.length === 0) { callback(new Error("品牌logo图片至少上传一张")); } } return { shopTemplatehttp : 'http://img3.jxhh.com/shop/brand.doc', factoryTemplatehttp : 'http://img3.jxhh.com/shop/factory.doc', hasBrand: true, dialogImageUrl: '', dialogVisible: false, dialogImageUrl2: '', dialogVisible2: false, dialogImageUrl3: '', dialogVisible3: false, validityConcreteTime: null, // 期限具体时间brand_auth_time validityLongTermVal: false, // 长期 downTemplatehttp: '', brandImgFileList: [], // 品牌logo factoryImgFileList: [], // 品牌授权 shopImgFileList: [], // 品牌经营授权 // 品牌信息 brandForm: { id: 0, brand_type: 1, brand_cn: '', brand_en: '', brand_logo: '', brand_number: '', brand_range: '', brand_auth_time: '', brand_auth: '', // 商标授权 == 品牌授权 == factoryImgFileList brand_business_auth: '', // 商标经营授权 == 品牌经营授权 == shopImgFileList }, // 品牌信息校验 brandRules: { brand_cn: [{ required: true, message: '品牌中文名称不能为空', trigger: 'blur' }], brand_logo: [{ required: true, message: '品牌logo图片至少上传一张',validator: authValidator}], brand_range: [{ required: true, message: '品牌类型需要选择其一', trigger: 'blur' }], brand_auth: [{ required: true, message: '品牌授权至少上传一张图片'}], // 品牌授权 brand_auth_time: [{ validator:authTimeValidator,required: true,trigger: 'change' }], brand_business_auth: [{ required: true, message: '品牌经营授权至少上传一张图片', validator: authBusValidator }], } } }, watch: { // 品牌授权是否上传图片校验 factoryImgFileList:{ //深度监听,可监听到对象、数组的变化 handler(val, oldVal){ if(this.brandForm.brand_type === 2) { this.$refs.brandForm.validateField("brand_auth"); if(val.length !== 0) { // 清除后,dom还存在,bug this.$nextTick(() => { this.$refs.brandForm.clearValidate('brand_auth'); }); } } }, deep:true //true 深度监听 }, // 品牌经营授权 上传图片校验 // shopImgFileList:{ //深度监听,可监听到对象、数组的变化 // handler(val, oldVal){ // if(this.brandForm.brand_type !== 3) { // this.$refs.brandForm.validateField("brand_business_auth"); // if(val.length !== 0) { // // 清除后,dom还存在,bug // this.$nextTick(() => { // this.$refs.brandForm.clearValidate('brand_business_auth'); // }); // } // } // }, // deep:true //true 深度监听 // } }, created() { // console.log('品牌页面',this.$store.state.user.applyState) this.getBrands(); }, mounted() { // 默认下载模板 this.downTemplatehttp = this.factoryTemplatehttp; }, methods: { // 上传图片格式和大小限制2kb beforeUpImg(file) { let isImgSize = (file.size / 1024 ) > 500; if(file.type !== "image/png" && file.type !== "image/jpg" && file.type != "image/jpeg") { this.$message({ message: '上传图片格式只支持jpg/png格式', type: "warning" }); return false; } if(isImgSize) { this.$message({ message: '上传图片大小不能超过500k', type: "warning" }); return false; } }, // 上传图片格式和大小限制500 kb beforeUpLogoImg(file) { let isImgSize = (file.size / 1024 ) > 500; if(file.type !== "image/png" && file.type !== "image/jpg" && file.type != "image/jpeg") { this.$message({ message: '上传图片格式只支持jpg/png格式', type: "warning" }); return false; } if(isImgSize) { this.$message({ message: '上传图片大小不能超过500 kb', type: "warning" }); return false; } }, // 品牌图片自定义上传 uploadLogoImgs(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.brandImgFileList.push({'url': res.data.image_url}); this.$message({type:'success',message:'上传成功'}); this.$refs.brandForm.clearValidate('brand_logo'); //this.$refs.logoImg.clearValidate(); }else { this.$message({type:'error',message:res.message ? res.message : '上传失败'}); } }); }); }, // 品牌经营授权图片上传 uploadShopImgs(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.shopImgFileList.push({'url':res.data.image_url}); this.$message({type:'success',message:'上传成功'}); this.$refs.brandForm.clearValidate('brand_business_auth'); }else { this.$message({type:'error',message:res.message ? res.message : '上传失败'}); } }); }); }, // 品牌授权 图片上传 uploadFactoryImgs(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.factoryImgFileList.push({'url':res.data.image_url}); this.$message({type:'success',message:'上传成功'}); } else { this.$message({type:'error',message:res.message ? res.message : '上传失败'}); } }); }); }, // 图片转换为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); }; }); }, // 选择品牌类型,并提供对应的下载模板 chooseBrandType() { this.downTemplatehttp = ''; // 自有品牌 if(this.brandForm.brand_type === 1) { this.hasBrand = true; this.downTemplatehttp = this.shopTemplatehttp; // 品牌厂商授权 }else if(this.brandForm.brand_type === 2) { this.hasBrand = true; this.downTemplatehttp = this.factoryTemplatehttp; this.factoryImgFileList = []; this.brandForm.brand_auth = ''; this.brand_auth_time = ''; this.validityConcreteTime = null; this.validityLongTermVal = false; // 无品牌 }else if(this.brandForm.brand_type === 3) { this.hasBrand = false; // this.resetForm('brandForm'); // this.clearImg(); } }, // 所有图片 清空 clearImg() { this.brandImgFileList = []; this.factoryImgFileList = []; this.shopImgFileList = []; this.brandForm.brand_logo = ''; this.brandForm.brand_auth = ''; this.brandForm.brand_business_auth = ''; // 期限 this.brand_auth_time = ''; this.validityConcreteTime = null; this.validityLongTermVal = false; }, handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; }, handleRemove(file,fileList) { for(let i = 0; i < this.brandImgFileList.length; i++) { if(file.uid === this.brandImgFileList[i].uid) { this.brandImgFileList.splice(i,1); } } }, handlePictureCardPreview2(file) { this.dialogImageUrl2 = file.url; this.dialogVisible2 = true; }, handleRemove2(file) { for(let i = 0; i < this.factoryImgFileList.length; i++) { if(file.uid === this.factoryImgFileList[i].uid) { this.factoryImgFileList.splice(i,1); } } }, handlePictureCardPreview3(file) { this.dialogImageUrl3 = file.url; this.dialogVisible3 = true; }, handleRemove3(file) { for(let i = 0; i < this.shopImgFileList.length; i++) { if(file.uid === this.shopImgFileList[i].uid) { this.shopImgFileList.splice(i,1); } } }, validityConcrete() { if (this.validityConcreteTime) { this.validityLongTermVal = false; } }, validityLongTerm() { if (this.validityLongTermVal) { this.validityConcreteTime = null; } }, // 获取品牌信息 getBrands() { // 初始化 getBrandsInf().then(res => { if(res.code == 1) { this.brandForm = res.data[0]; // 商标logo图片处理 let brandList = {}; let brandArr = []; if(this.brandForm.brand_logo.indexOf(",") > 0) { brandArr = this.brandForm.brand_logo.split(","); for(let a = 0; a < brandArr.length; a++){ brandList = {}; brandList.url = brandArr[a]; this.brandImgFileList.push(brandList); } }else { brandList.url = this.brandForm.brand_logo; this.brandImgFileList = []; this.brandImgFileList.push(brandList); } // 品牌授权 图片处理 factoryImgFileList let factoryList = {}; let factoryArr = []; if(this.brandForm.brand_auth.indexOf(",") > 0) { factoryArr = this.brandForm.brand_auth.split(","); for(let authIndex = 0; authIndex < factoryArr.length; authIndex++){ factoryList = {}; factoryList.url = factoryArr[authIndex]; this.factoryImgFileList.push(factoryList); } }else { factoryList.url = this.brandForm.brand_auth; this.factoryImgFileList = []; this.factoryImgFileList.push(factoryList); } // 品牌经营授权 图片处理 shopImgFileList let shopList = {}; let shopArr = []; if(this.brandForm.brand_business_auth.indexOf(",") > 0) { shopArr = this.brandForm.brand_business_auth.split(","); for(let busIndex = 0; busIndex < shopArr.length; busIndex++){ shopList = {}; shopList.url = shopArr[busIndex]; this.shopImgFileList.push(shopList); } }else { shopList.url = this.brandForm.brand_business_auth; this.shopImgFileList = []; this.shopImgFileList.push(shopList); } // 期限处理 if(this.brandForm.brand_auth_time === 0) { this.validityLongTermVal = true; }else { this.validityConcreteTime = this.toStandTime(this.brandForm.brand_auth_time); } } else { this.$message({type:'error',message:res.message ? res.message : ''}); } }); }, // 时间戳转换为 标准时间格式 toStandTime(val) { let date = new Date(val * 1000) let Y = date.getFullYear() + '-' let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-' const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ' const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':' const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':' const s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()) return Y + M + D + h + m + s; }, showTip(files,fileList) { this.$message({message: '最多上传2张图片', type: 'warning'}); }, back() { this.$router.push("/fillMainInf"); }, next(formName) { if(this.validityLongTermVal) { this.brandForm.brand_auth_time = (this.validityLongTermVal - 0 - 1); }else if(this.validityLongTermVal === false && this.validityConcreteTime) { this.brandForm.brand_auth_time = new Date(this.validityConcreteTime).getTime() / 1000; }else { this.brandForm.brand_auth_time = ''; } // 品牌logo图片处理 if(this.brandImgFileList.length > 0) { for(let i = 0; i < this.brandImgFileList.length; i++) { if(i === 0) { this.brandForm.brand_logo = this.brandImgFileList[i].url; }else { this.brandForm.brand_logo += ',' + this.brandImgFileList[i].url; } } // 品牌商标授权字段,特殊处理0425,对二期有影响,记得在五一前解决 this.brandForm.brand_register_cert = this.brandImgFileList[0].url; } // 品牌授权图片处理 if(this.factoryImgFileList.length > 0) { for(let i = 0; i < this.factoryImgFileList.length; i++) { if(i === 0) { this.brandForm.brand_auth = this.factoryImgFileList[i].url; }else { this.brandForm.brand_auth += ',' + this.factoryImgFileList[i].url; } } } // 品牌经营授权 图片处理 if(this.shopImgFileList.length > 0) { for(let i = 0; i < this.shopImgFileList.length; i++) { if(i === 0) { this.brandForm.brand_business_auth = this.shopImgFileList[i].url; }else { this.brandForm.brand_business_auth += ',' + this.shopImgFileList[i].url; } } } // if(this.factoryImgFileList.length === 0) { // console.log(this.factoryImgFileList.length === 0); // console.log(this.factoryImgFileList); // this.$refs.brandForm.validateField("brand_auth"); // } // 期限 brand_auth_time this.$refs[formName].validate(valid => { if(valid) { let addBrandForm = {}; let toArrBrandForm = []; toArrBrandForm.push(this.brandForm); // 新增 修改 if(this.brandForm.id === 0) { addBrandForm.brands = toArrBrandForm; addBrands(addBrandForm).then(res => { if(res.code == 1) { this.$router.push("/fillShopInf"); }else { this.$message({type: 'error',message: res.message ? res.message : '保存失败'}); } }); }else { upBrands(toArrBrandForm).then(res => { if(res.code == 1) { this.$router.push("/fillShopInf"); }else { this.$message({type: 'error',message: res.message ? res.message : '保存失败'}); } }); } } }); }, noBrandNext(){ this.$router.push("/fillShopInf"); }, } } </script> <style lang="scss" type="text/stylus" scoped> .fill-brand-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% - 120px); ::v-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; } } .spe-brand-text { width: 100%; height: 50px; line-height :50px; margin: 15px 0 15px 30px ; font-size: 18px; font-family: Microsoft YaHei; font-weight: bold; color: #333333; background-color : #FAFAFA; } } .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%; margin: 30px auto 50px; overflow-x: hidden; overflow-y: scroll; .tips-text { font-size: 14px; color: #C9C9C9; word-break: break-all; } .h-warning:before { color: #e3c300; } .no-brand { padding-left: 60px; p{ color: #333; font-size: 14px; line-height: 20px; padding: 10px 80px 0; } .no-brand-btn { padding-left: 84px; padding-top: 30px; } } .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; } } // 模板下载按钮 .download-Template-btn { width: 145px; height: 38px; line-height: 38px; text-align: center; color: #1890FF; font-size: 14px; border: 1px solid #1890FF; border-radius: 3px; cursor: pointer; } .download-Template-btn:hover { color: #fff; border: 1px solid #1890FF; background-color : #1890ff; } } </style>