<template>
<div class="app-container">
<el-card class="box-card">
<div slot="header" class="clearfix">
<div style="display: flex;flex-direction: row;justify-content: space-between;padding: 0 20px;">
<p class="text-v-c">
当前审核状态：<span class="speDom">{{ reviewResult }}</span><span
style="display: block;width:20px;height:100%"></span>
<span class="speTip">仅可修改店铺相关信息，企业主体信息不允许修改！</span></p>
<p>
<el-button size="small" icon="el-icon-edit" type="primary" @click="handleEdit">编辑信息</el-button>
</p>
</div>
</div>
<div>
<el-card>
<div slot="header" class="clearfix">
<p>企业认证信息</p>
</div>
<el-form ref="mainForm" :model="mainForm" label-width="180px" class="main-form-con"
size="small">
<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
:disabled="true"
:class="['uploadData',{ 'hiden-dom': licenseImgFileList.length >= 1 }]"
action="#"
list-type="picture-card"
:on-preview="handleLicenseImgview"
:file-list='licenseImgFileList'
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="isLicenseVisible">
<img width="100%" :src="licenseImgUrl" 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">点击可查看大图</span>
</div>
</div>
</el-form-item>
<el-form-item label="企业名称：" prop="organization_name" inline-message="true">
<el-input v-model="mainForm.organization_name" :disabled="isMainItem" style="width: 400px;"></el-input>
</el-form-item>
<el-form-item label="企业地址：" prop="organization_address" inline-message="true">
<el-input v-model="mainForm.organization_address" :disabled="isMainItem" style="width: 400px;"></el-input>
</el-form-item>
<el-form-item label="统一社会代码：" prop="license_number" inline-message="true">
<el-input v-model="mainForm.license_number" :disabled="isMainItem" style="width: 400px;"></el-input>
</el-form-item>
<el-form-item 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"
:disabled="isMainItem"
/>
<el-checkbox v-model="periodLongTermVal" :disabled="isMainItem" style="padding-left:15px;">长期</el-checkbox>
</el-form-item>
<el-form-item label="法人身份证：">
<div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
<!-- 身份证正面 -->
<div style="padding: 0 20px;">
<el-upload
:disabled="true"
:class="['uploadData',{ 'hiden-dom': idcardImgFileList.length >= 1 }]"
list-type="picture-card"
action="#"
:on-preview="handleIdcardPositiveImgview"
:file-list='idcardImgFileList'
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="idcardPositiveVisible">
<img width="100%" :src="idcardPositiveImgUrl" alt="">
</el-dialog>
</div>
<!-- 身份证反面 -->
<div style="padding: 0 20px;">
<el-upload
:disabled="true"
:class="['uploadData',{ 'hiden-dom': idcardBackImgFileList.length >= 1 }]"
list-type="picture-card"
action="#"
:on-preview="handleIdcardBackImgview"
:file-list='idcardBackImgFileList'
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="idcardBackVisible">
<img width="100%" :src="idcardBackImgUrl" 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">点击可查看大图</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" :disabled="isMainItem" style="width: 400px;"></el-input>
</el-form-item>
<el-form-item label="法定代表人证件号：" prop="idcard_number">
<el-input v-model="mainForm.idcard_number" :disabled="isMainItem" 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="结束日期"
:disabled="isMainItem"
/>
<el-checkbox v-model="validityLongTermVal" style="padding-left:15px;"
:disabled="isMainItem">长期
</el-checkbox>
</el-form-item>
</el-form>
</el-card>
</div>
<!-- 店铺信息 -->
<div style="margin-top: 15px;">
<el-card>
<div slot="header" class="clearfix">
<p>店铺信息</p>
</div>
<el-form ref="storeForm" :model="storeForm" label-width="180px">
<el-form-item label="电商平台经验：" prop="is_business_experience">
<el-radio-group v-model="storeForm.is_business_experience" :disabled="isMainItem">
<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" :disabled="isMainItem" style="width: 400px;"
placeholder="请输入店铺名称"></el-input>
</el-form-item>
<el-form-item label="经营类目：" prop="scope">
<el-select v-model="storeForm.scope" multiple :disabled="isMainItem" 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
:disabled="true"
:class="['uploadData',{ 'hiden-dom': logoImgFileList.length >= 1 }]"
action="#"
list-type="picture-card"
:on-preview="handleShopLogoPreview"
:file-list='logoImgFileList'
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="shopLogoVisible">
<img width="100%" :src="shopLogoImgUrl" 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">点击可查看大图</span>
</div>
</div>
</el-form-item>
<el-form-item label="运营负责人：" prop="emergency_name" inline-message="true">
<el-input v-model="storeForm.emergency_name" :disabled="isMainItem" style="width: 400px;"
placeholder="请输入运营负责人姓名"></el-input>
</el-form-item>
<el-form-item label="联系电话：" prop="emergency_tel">
<el-input v-model="storeForm.emergency_tel" :disabled="isMainItem" style="width: 400px;"
placeholder="请输入联系电话"></el-input>
</el-form-item>
<el-form-item>
<p style="width:580px;line-height:24px;font-size:14px;margin: 0;color: #333;">
需要提交特殊产品资质的类目请将资质上传在此处，包括全国工业生产许可证、3C、医疗品械
生产许可证、化妆品生产企业许可证等，根据具体类目资质要求提交</p>
</el-form-item>
<el-form-item label="其他资质：">
<div class="auth-con">
<div v-for="(item,index) in qualificationList" :key="item.id" class="single-upload-con">
<div v-show="!item.url" class="single-auth-img"></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>
</div>
<div class="single-title">{{ authTitleFormatter(item.content) }}</div>
</div>
</div>
</el-form-item>
</el-form>
</el-card>
</div>
</el-card>
<!--编辑-->
<el-dialog title="编辑店铺信息" :visible.sync="isOpen" width="65%" class="shopinf-edit"
center :destroy-on-close="true" :close-on-click-modal="false" :before-close="handleCancel">
<el-form v-if="isOpen" ref="editForm" :model="editForm" :rules="editRules" label-width="180px" size="small">
<el-form-item label="电商平台经验：" prop="is_business_experience">
<el-radio-group v-model="editForm.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="editForm.store_name" style="width: 400px;" placeholder="请输入店铺名称"></el-input>
</el-form-item>
<el-form-item label="经营类目：" prop="scope">
<el-select v-model="editForm.scope" @remove-tag="removeEditTag" @visible-change="editScopeVisibleChange($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': editLogoImgFileList.length >= 1 }]"
action="#"
list-type="picture-card"
:limit="1"
:on-exceed="showTip1"
:before-upload = "beforeUploadLogoImg"
:http-request="uploadShopLogoImg"
:on-preview="handleEditShopLogoView"
:on-remove="removeEditShopLogoImg"
:file-list = 'editLogoImgFileList'
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="isEditShopLogoVisible" append-to-body>
<img width="100%" :src="editShopLogoImgUrl" 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="editForm.emergency_name" style="width: 400px;" placeholder="请输入运营负责人姓名"></el-input>
</el-form-item>
<el-form-item label="联系电话：" prop="emergency_tel">
<el-input v-model="editForm.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">
<div v-for="(item,index) in editQualificationList" :key="item.id" class="single-upload-con">
<div v-show="!item.url" class="single-auth-img" @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="viewSingleAuthImg(index,item)"></span>
<span class="span-img-del el-icon-delete del-span-block" @click="delSingleAuthImg(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>
</div>
</el-form-item>
<el-form-item class="btnCen">
<el-button type="" @click="handleCancel" style="margin-right: 20px;">取 消</el-button>
<el-button type="primary" @click="handleAdd('editForm')">提交审核</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!-- 资质图片预览 -->
<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 {getGoodsType, getMainInf, getShopInf, upLoadImg, addShopInf, getUploadQualificationListData} from '@/api/module/entry';
import { dateFormat } from '@/utils'
export default {
name: "Shop",
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 {
reviewResult: '加载中。。',
isMainItem: true,// 主体/企业信息 是否可以修改，目前暂时不能
mainForm: {
license: '',
organization_name: '',
license_number: '',
license_start_time: '',
license_expires_time: '',
idcard_front: '',
idcard_back: '',
real_name: '',
idcard_number: '',
idcard_start_time: '',
idcard_expires_time: '',
},
// 营业执照图片
licenseImgFileList: [],
isLicenseVisible: false,
licenseImgUrl: '',
// 营业期限
periodConcreteTime: [], // 区间时间
periodLongTermVal: false, // 是否长期
// 身份证 正面
idcardImgFileList: [],
idcardPositiveVisible: false,
idcardPositiveImgUrl: '',
// 身份证国徽面
idcardBackImgFileList: [],
idcardBackVisible: false,
idcardBackImgUrl: '',
// 身份证 有效期
validityConcreteTime: [],
validityLongTermVal: false,
// 店铺信息
storeForm: {
is_business_experience: '',
store_name: '',
scope: [],
shop_logo: '',
emergency_name: '',
emergency_tel: '',
business_auth: '',
},
scopeOptions: [], // 经营类目
// 店铺logo 图片
logoImgFileList: [],
shopLogoVisible: false,
shopLogoImgUrl: '',
// 需要上传的资质
qualificationList: [],
qualificationUrl: '',
imgDialog: false,
// 编辑
isOpen: false,
editForm: {
is_business_experience: '',
store_name: '',
scope: [],
shop_logo: '',
emergency_name: '',
emergency_tel: '',
business_auth: '',
},
editRules: {
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: '店铺Logo至少上传一张图片', validator: busAuthValidator}],//
},
// 编辑 店铺logo
editLogoImgFileList: [],
isEditShopLogoVisible: false,
editShopLogoImgUrl: '',
// 编辑 资质
editQualificationList: [],
}
}, // data end
created() {
// 获取经营一级类目
getGoodsType().then(res => {
if (res.code === 1) {
this.scopeOptions = res.data;
}
});
this.getMain();
this.getShop();
},
methods: {
/** 获取 主体即企业 信息 */
getMain() {
getMainInf().then(res => {
if (res.code == 1) {
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)
}
}
});
},
/** 获取 店铺信息 */
getShop() {
getShopInf().then(res => {
if (res.code == 1) {
// 审核状态
if (res.data.state === 1) {
this.reviewResult = '已通过';
} else if (res.data.state === 2) {
this.reviewResult = '未审核';
} else if (res.data.state === 3) {
this.reviewResult = '未通过';
} else {
this.reviewResult = '';
}
// 处理 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;
}
// 店铺信息展示 start
this.storeForm = res.data;
// 店铺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 ? this.storeForm.qualification : [];
} else if (res.code) {
this.$message({message: res.msg, type: 'error'});
}
});
},
/** 编辑 */
handleEdit() {
getShopInf().then(res=> {
if (res.code == 1) {
this.isOpen = true;
this.editForm = res.data
// 经营类目 数据处理
if (res.data.scope === '') {
this.editForm.scope = [];
} else {
let scopeListStr = res.data.scope.split(',');
let scopeList = [];
for (let i = 0; i < scopeListStr.length; i++) {
scopeList.push(Number(scopeListStr[i]));
}
this.editForm = res.data;
this.editForm.scope = scopeList;
}
// 店铺logo回显处理
let logoImgArr = [];
let logoImgUrl = {};
logoImgArr = this.editForm.shop_logo.split(",");
if (logoImgArr.length > 0) {
logoImgArr.forEach(item=> {
logoImgUrl = {};
if (item) {
logoImgUrl.url = item
this.editLogoImgFileList.push(logoImgUrl)
}
});
}else {
this.editLogoImgFileList = [];
}
// 资质图片回显处理
this.editQualificationList = this.editForm.qualification ? this.editForm.qualification : [];
} else {
this.$message({type: 'error', message: res.msg ? res.msg : '获取店铺信息失败' });
}
});
},
/** 关闭/取消 编辑 */
handleCancel() {
this.resetEditForm('editForm');
this.isOpen = false;
},
/** 提交审核 */
handleAdd(formName) {
// 其他 资质 填写拦截校验
let isComplete = false;
if (this.editQualificationList.length > 0) {
for (let i = 0; i < this.editQualificationList.length; i++) {
if (!this.editQualificationList[i].url) {
isComplete = true;
break
}
}
if (isComplete) {
this.$message({type:'warning',message: '请上传对应资质所需的图片'});
return;
}
}
// business_auth: '',
let data = {};
this.$refs[formName].validate((valid) => {
if (valid) {
data['is_business_experience'] = this.editForm.is_business_experience;
data['store_name'] = this.editForm.store_name;
data['emergency_name'] = this.editForm.emergency_name;
data['emergency_tel'] = this.editForm.emergency_tel;
data['scope'] = this.editForm.scope.join(',');
// 编辑 的店铺logolist
if(this.editLogoImgFileList.length > 0) {
for(let i = 0; i < this.editLogoImgFileList.length; i++) {
if(i === 0) {
data['shop_logo'] = this.editLogoImgFileList[i].url;
}else {
data['shop_logo'] += ',' + this.editLogoImgFileList[i].url;
}
}
}
data['qualification_auth'] = JSON.stringify(this.editQualificationList)
this.$confirm('确定要修改信息吗？信息修改后需要重新提交审核，审核周期约1-3个工作日', '提示：', {
type: 'warning',
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(() => {
addShopInf(data).then(res=> {
if (res.code == 1) {
this.$message({type: 'success',message: '编辑成功'});
this.isOpen = false;
this.getShop();
}else {
this.$message({type: 'error',message: res.message ? res.message : '操作失败'});
}
});
}).catch(() => {});
} // valid true 通过 end
})
},
/** 预览 营业执照 */
handleLicenseImgview(file) {
this.licenseImgUrl = file.url;
this.isLicenseVisible = true;
},
/** 预览 身份证 正面 */
handleIdcardPositiveImgview(file) {
this.idcardPositiveImgUrl = file.url;
this.idcardPositiveVisible = true;
},
/** 预览 身份证 反面 */
handleIdcardBackImgview(file) {
this.idcardBackImgUrl = file.url;
this.idcardBackVisible = true;
},
/** 预览 店铺 logo */
handleShopLogoPreview(file) {
this.shopLogoImgUrl = file.url;
this.shopLogoVisible = true;
},
/** 预览 当前资质对应图片 */
viewSingleSpecImg(index,item) {
this.imgDialog = false;
if (!item.url) return;
this.imgDialog = true;
this.qualificationUrl = item.url
},
/** 上传 店铺logo 格式和大小的校验 */
beforeUploadLogoImg(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;
}
},
/** 上传 店铺logo图片 */
uploadShopLogoImg(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 && res.code == 1) {
this.logoImgFileList.push({'url': res.data.image_url});
this.$message({message: '上传成功', type: 'success'});
this.$refs.storeForm.clearValidate('shop_logo');
}
});
});
},
/** 编辑 预览 店铺logo 图片 */
handleEditShopLogoView(file) {
this.editShopLogoImgUrl = file.url;
this.isEditShopLogoVisible = true;
},
/** 编辑 删除 店铺logo 图片 */
removeEditShopLogoImg(file) {
for (let i = 0; i < this.editLogoImgFileList.length; i++) {
if (file.uid === this.editLogoImgFileList[i].uid) {
this.editLogoImgFileList.splice(i, 1);
}
}
},
/** 上传 对应资质图片 */
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 => {
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'});
}
})
});
},
/** 查看 当前资质图片 */
viewSingleAuthImg(index,item) {
this.imgDialog = false;
// this.qualificationUrl = "";
if (!item.url) return;
this.imgDialog = true;
this.qualificationUrl = item.url
},
/** 删除 当前图片 */
delSingleAuthImg(index,item) {
if( item.url ) {
item.url = '';
this.$message({type: 'success',message: '删除成功'});
}
},
/** 删除单个 经营类目 触发 */
removeEditTag(indexVal) {
if (!indexVal) return;
if (this.editForm.scope.length == 0) {
this.editQualificationList = [];
}
if (this.editForm.scope.length > 0) {
let data = { cate_ids: this.editForm.scope }
getUploadQualificationListData(data).then(res=> {
if (res.code == 1) {
this.editQualificationList = res.data ? res.data : [];
}
})
}
},
/** 经营类目 下拉框隐藏时候，触发 */
editScopeVisibleChange(handleType) {
if (!handleType) {
if (Array.isArray(this.editForm.scope) && this.editForm.scope.length > 0) {
let data = { cate_ids: this.editForm.scope }
getUploadQualificationListData(data).then(res=> {
if (res.code == 1) {
this.editQualificationList = res.data ? res.data : [];
}
})
}
}
},
/** 初始化 编辑 表单 */
resetEditForm(formName) {
this.$refs[formName].resetFields();
this.editQualificationList = [];
this.editLogoImgFileList = [];
},
// --- 通用 ---
/** 图片转换为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张 */
showTip1() {
this.$message({message: '最多上传1张图片', type: 'warning'});
},
/** 资质类目 title格式化 */
authTitleFormatter(textVal) {
let res = '';
if (textVal) {
res = textVal.trim();
}
return res
},
// /** 图片只预览 */
// getPreviewImgList(ele) {
// let arr = [];
// arr.push(ele);
// return arr;
// },
}
}
</script>
<style lang="scss" type="text/stylus" scoped>
.shopinf-edit {
///deep/.el-dialog {
// height: 80%;
// overflow : hidden;
//}
///deep/.el-dialog__body{
// height: calc(100% - 60px);
// overflow-x: hidden;
// overflow-y: scroll;
//}
}
/* 弹窗 样式 重置 */
.shopinf-edit >>> .el-dialog {
width: 60%;
height: 80%;
overflow: hidden;
}
.shopinf-edit >>> .el-dialog .el-dialog__body {
height: calc(100% - 60px);
padding: 10px 20px 20px 40px;
overflow: auto;
}
/* 弹窗 样式 重置 ---- end ---- */
.main-form-con {
//margin-left: 100px;
}
/deep/ .el-card__body {
height: calc(100% - 80px);
margin: 10px 0;
overflow-x: hidden;
overflow-y: scroll;
}
/deep/ .speDom {
color: red;
font-size: 20px;
margin: 0 0 4px 10px;
}
/deep/ .speTip {
color: #c0ccda;
font-size: 14px;
}
.text-v-c {
align-items: center;
display: -webkit-flex;
}
.demo-image__preview {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: normal;
}
// 上传图片样式
.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;
}
.idcard-tips-con {
display: flex;
flex-direction: row;
justify-content: normal;
justify-items: center;
}
.idcard-tips-con > p {
margin: 0;
padding: 0 15px;
}
/*** 资质 样式 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;
}
.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 ***/
// 提示语 样式 start
.tips-text {
font-size: 14px;
color: #C9C9C9;
word-break: break-all;
}
.h-warning:before {
color: #e3c300;
}
// 提示语样式 end
.btnCen {
/deep/ .el-form-item__content {
margin-left: 0 !important;
text-align: center;
//margin-top: 30px;
}
}
/* 预览 资质图片 */
.img-dialog-con >>> .el-dialog__body {
text-align : center;
}
.img-spe {
//width: 80%;
margin: 0 auto;
}
</style>