<template>
|
<GlobalWindow
|
v-loading="isUploading"
|
:title="title"
|
width="60%"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
@confirm="confirm"
|
>
|
<el-form :model="form" ref="form" :rules="rules" label-width="110px" label-suffix="：" inline>
|
<p class="tip-header" >账号信息</p>
|
<el-form-item label="登录账号" prop="username">
|
<el-input v-model="form.username" placeholder="请输入登录账号" :maxlength="20" v-trim/>
|
</el-form-item>
|
<p class="tip-warn" style="width: 100%;text-align: center"><i class="el-icon-warning"></i>新建或者修改账号，密码默认为:【门店ID+"@123456"】，如门店ID为S001,默认密码：S001@123456</p>
|
<p class="tip-header" >基本信息</p>
|
<el-form-item label="经销商名称" prop="name">
|
<el-input v-model="form.name" placeholder="请输入店铺名称，20字以内" :maxlength="20" v-trim/>
|
</el-form-item>
|
<el-form-item label="门店ID" prop="code">
|
<el-input v-model="form.code" placeholder="请输入门店ID，10字以内" :maxlength="10" v-trim/>
|
</el-form-item>
|
<el-form-item label="销售模式" prop="saleType">
|
<el-radio-group v-model="form.saleType">
|
<el-radio :label="0">平台铺货</el-radio>
|
<el-radio :label="1">自主采购</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="联系人" prop="realname">
|
<el-input v-model="form.realname" placeholder="请输入联系人" v-trim/>
|
</el-form-item>
|
<el-form-item label="联系电话" prop="phone">
|
<el-input v-model="form.phone" placeholder="请输入联系电话" v-trim/>
|
</el-form-item>
|
<el-form-item label="营业时间" prop="startTime">
|
<el-input v-model="form.startTime" placeholder="请输入营业时间" v-trim/>
|
</el-form-item>
|
<el-form-item label="所属区域" prop="bigAreaId">
|
<el-select v-model="form.bigAreaId" placeholder="请选择所属区域" filterable clearable>
|
<el-option
|
v-for="item in bigAreas"
|
:key="item.id"
|
:value="item.id"
|
:label="item.name"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<div style="display: flex; ">
|
<el-form-item label="选择省市区" prop="provinceId">
|
<el-select v-model="form.provinceId" placeholder="选择省份" clearable @change="selectProvince">
|
<el-option
|
v-for="item in provinces"
|
:key="item.id"
|
:value="item.id"
|
:label="item.name"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="" prop="cityId">
|
<el-select v-model="form.cityId" placeholder="选择城市" clearable @change="selectCity">
|
<el-option
|
v-for="item in cities"
|
:key="item.id"
|
:value="item.id"
|
:label="item.name"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="" prop="areaId" >
|
<el-select v-model="form.areaId" placeholder="选择县区" clearable>
|
<el-option
|
v-for="item in areas"
|
:key="item.id"
|
:value="item.id"
|
:label="item.name"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
<el-form-item label="详细地址" prop="addr">
|
<el-input v-model="form.addr" placeholder="请输入详细地址" v-trim/>
|
</el-form-item>
|
<el-form-item label="定位信息" prop="locationInfo">
|
<div style="display: flex; ">
|
<el-input v-model="form.locationInfo" placeholder="请点击选择按钮，搜索[纬度,经度]信息" v-trim style=" width: calc(100% - 100px);"/>
|
<el-button type="primary" style=" margin-left: 20px; width: 80px" @click="selectLocation">选择</el-button>
|
</div>
|
<p class="tip-warn" style="width: 100%;"><i class="el-icon-warning"></i>
|
点击[选择]，跳转后根据门店地址搜索地图定位地址，获取[纬度,经度]信息。</p>
|
</el-form-item>
|
<el-form-item label="门店图片" prop="imgurl">
|
<div style="display: flex; display: flex; align-items: center;justify-content: center; height: 100%; width: 100%">
|
<UploadAvatarImage
|
:file="{ 'imgurlfull': form.imgurlfull, 'imgurl': form.imgurl }"
|
:uploadData="uploadData"
|
@uploadSuccess="uploadAvatarSuccess"
|
@uploadEnd="isUploading = false"
|
@uploadBegin="isUploading = true"
|
style=" width: 120px;"
|
/>
|
<div class="tip-warn" style=" margin-left: 20px; margin-top: 30px;">
|
建议尺寸：100px X 100px
|
支持png、jpg、jpeg格式，大小不超过2M，上传图片不允许涉及政治敏感与色情
|
</div>
|
</div>
|
</el-form-item>
|
<el-form-item label="宣传海报" prop="posterImg">
|
<div style="display: flex; align-items: center;justify-content: center; height: 100%; width: 100%">
|
<UploadAvatarImage
|
:file="{ 'imgurlfull': form.posterImgfull, 'imgurl': form.posterImg }"
|
:uploadData="uploadData"
|
@uploadSuccess="uploadAvatarSuccess1"
|
@uploadEnd="isUploading1 = false"
|
@uploadBegin="isUploading1 = true"
|
style=" width: 120px;"
|
/>
|
<div class="tip-warn" style=" margin-left: 20px; margin-top: 30px;">
|
建议尺寸：100px X 100px
|
支持png、jpg、jpeg格式，大小不超过2M，上传图片不允许涉及政治敏感与色情
|
</div>
|
</div>
|
</el-form-item>
|
<p class="tip-header" >资质信息</p>
|
<el-form-item label="营业执照" prop="businessImg">
|
<div style="display: flex; align-items: center;justify-content: center; height: 100%; width: 100%">
|
<UploadAvatarImage
|
:file="{ 'imgurlfull': form.businessImgfull, 'imgurl': form.businessImg}"
|
:uploadData="uploadData"
|
@uploadSuccess="uploadAvatarSuccess2"
|
@uploadEnd="isUploading2 = false"
|
@uploadBegin="isUploading2= true"
|
style=" width: 120px;"
|
/>
|
<div class="tip-warn" style=" margin-left: 20px; margin-top: 30px;">
|
建议尺寸：100px X 100px
|
支持png、jpg、jpeg格式，大小不超过2M，上传图片不允许涉及政治敏感与色情
|
</div>
|
</div>
|
</el-form-item>
|
<el-form-item label="法人姓名" prop="legalPersonName">
|
<el-input v-model="form.legalPersonName" placeholder="请输入法人姓名" v-trim/>
|
</el-form-item>
|
<el-form-item label="法人电话" prop="legalPersonPhone">
|
<el-input v-model="form.legalPersonPhone" placeholder="请输入法人联系电话" v-trim/>
|
</el-form-item>
|
<div style="display: flex; height: 100%; width: 100%">
|
<el-form-item label="身份证照" prop="idcardImg" style=" width: 250px;">
|
<UploadAvatarImage
|
:file="{ 'imgurlfull': form.idcardImgfull, 'imgurl': form.idcardImg}"
|
:uploadData="uploadData"
|
@uploadSuccess="uploadAvatarSuccess3"
|
@uploadEnd="isUploading3 = false"
|
@uploadBegin="isUploading3= true"
|
/>
|
<div class="tip-warn" style=" margin-left: 20px; "> 人像面 </div>
|
</el-form-item>
|
<el-form-item label="" prop="idcardImgBack" style=" width: 200px;margin-left: 30px">
|
<UploadAvatarImage
|
:file="{ 'imgurlfull': form.idcardImgBackfull, 'imgurl': form.idcardImgBack}"
|
:uploadData="uploadData"
|
@uploadSuccess="uploadAvatarSuccess4"
|
@uploadEnd="isUploading4 = false"
|
@uploadBegin="isUploading4= true"
|
/>
|
<div class="tip-warn" style=" margin-left: 20px; ">国徽面</div>
|
</el-form-item>
|
</div>
|
</el-form>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import UploadAvatarImage from '@/components/common/UploadAvatarImage'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { listByParentId } from '@/api/business/areas'
|
import { findAll as listBigAreas } from '@/api/business/labels'
|
export default {
|
name: 'OperaShopWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow, UploadAvatarImage },
|
data () {
|
return {
|
isUploading: false,
|
isUploading1: false,
|
isUploading2: false,
|
isUploading3: false,
|
isUploading4: false,
|
searchLoading: false,
|
uploadData: {
|
folder: 'shop'
|
},
|
// 表单数据
|
form: {
|
id: null,
|
name: '',
|
username: '',
|
realname: '',
|
phone: '',
|
code: '',
|
startTime: null,
|
bigAreaId: null,
|
areaId: null,
|
saleType: 0,
|
provinceId: null,
|
legalPersonName: null,
|
legalPersonPhone: null,
|
cityId: null,
|
imgurl: '',
|
imgurlfull: '',
|
businessImg: '',
|
businessImgfull: '',
|
idcardImgBack: '',
|
idcardImgBackfull: '',
|
idcardImg: '',
|
idcardImgfull: '',
|
posterImg: '',
|
posterImgfull: '',
|
locationInfo: '',
|
addr: '',
|
memberId: ''
|
},
|
bigAreas: [],
|
provinces: [],
|
cities: [],
|
areas: [],
|
// 验证规则
|
rules: {
|
name: [
|
{ required: true, message: '请输入名称', tigger: 'blur' }
|
],
|
saleType: [
|
{ required: true, message: '请选择销售模式' }
|
],
|
addr: [
|
{ required: true, message: '请输入详细地址', tigger: 'blur' }
|
],
|
code: [
|
{ required: true, message: '请输入上传门店ID', tigger: 'blur' }
|
],
|
username: [
|
{ required: true, message: '请输入登录账号', tigger: 'blur' }
|
],
|
realname: [
|
{ required: true, message: '请输入联系人姓名', tigger: 'blur' }
|
],
|
legalPersonName: [
|
{ required: true, message: '请输入法人姓名', tigger: 'blur' }
|
],
|
phone: [
|
{ required: true, message: '请输入联系人电话', tigger: 'blur' }
|
],
|
startTime: [
|
{ required: true, message: '请输入营业时间', tigger: 'blur' }
|
],
|
locationInfo: [
|
{ required: true, message: '请完善定位信息', tigger: 'blur' }
|
],
|
businessImg: [
|
{ required: true, message: '请上传营业执照', tigger: 'change' }
|
],
|
idcardImgBack: [
|
{ required: true, message: '请上传法人身份证国徽面', tigger: 'change' }
|
],
|
idcardImg: [
|
{ required: true, message: '请上传法人身份证人像面', tigger: 'change' }
|
],
|
provinceId: [
|
{ required: true, message: '请选择省市' }
|
],
|
cityId: [
|
{ required: true, message: '请选择城市' }
|
],
|
areaId: [
|
{ required: true, message: '请选择县区' }
|
],
|
bigAreaId: [
|
{ required: true, message: '请选择所属区域' }
|
]
|
}
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/shop',
|
'field.id': 'id'
|
})
|
listBigAreas({ type: 13 })
|
.then(data => {
|
this.bigAreas = data
|
})
|
listByParentId({ type: 0, parentId: '' })
|
.then(data => {
|
this.provinces = data
|
})
|
},
|
methods: {
|
selectProvince (val) {
|
this.form.cityId = null
|
this.form.areaId = null
|
this.cities = []
|
this.areas = []
|
listByParentId({ type: 1, parentId: val })
|
.then(data => {
|
this.cities = data
|
})
|
.catch(e => {
|
this.$tip.error(e)
|
})
|
},
|
selectCity (val) {
|
this.form.areaId = null
|
this.areas = []
|
listByParentId({ type: 2, parentId: val })
|
.then(data => {
|
this.areas = data
|
})
|
.catch(e => {
|
this.$tip.error(e)
|
})
|
},
|
initCityArea (proid, cityid) {
|
listByParentId({ type: 1, parentId: proid })
|
.then(data => {
|
this.cities = data
|
})
|
.catch(e => {
|
this.$tip.error(e)
|
})
|
listByParentId({ type: 2, parentId: cityid })
|
.then(data => {
|
this.areas = data
|
})
|
.catch(e => {
|
this.$tip.error(e)
|
})
|
},
|
|
selectLocation () {
|
window.open('https://lbs.qq.com/tool/getpoint/get-point.html')
|
},
|
open (title, target) {
|
this.title = title
|
this.visible = true
|
this.form.imgurlfull = ''
|
this.form.imgurl = ''
|
this.form.idcardImgfull = ''
|
this.form.idcardImg = ''
|
this.form.idcardImgBackfull = ''
|
this.form.idcardImgBack = ''
|
this.form.businessImgfull = ''
|
this.form.businessImg = ''
|
this.form.posterImgfull = ''
|
this.form.posterImg = ''
|
this.cities = []
|
this.areas = []
|
// 新建
|
if (target == null) {
|
this.$nextTick(() => {
|
this.$refs.form.resetFields()
|
this.form[this.configData['field.id']] = null
|
})
|
return
|
}
|
// 编辑
|
this.$nextTick(() => {
|
this.isEdit = true
|
for (const key in this.form) {
|
this.form[key] = target[key]
|
}
|
if (target.idcardImg) {
|
this.form.idcardImgfull = target.imgFullUrl + target.idcardImg
|
}
|
if (target.idcardImgBack) {
|
this.form.idcardImgBackfull = target.imgFullUrl + target.idcardImgBack
|
}
|
if (target.imgurl) {
|
this.form.imgurlfull = target.imgFullUrl + target.imgurl
|
}
|
if (target.businessImg) {
|
this.form.businessImgfull = target.imgFullUrl + target.businessImg
|
}
|
if (target.posterImg) {
|
this.form.posterImgfull = target.imgFullUrl + target.posterImg
|
}
|
console.log('==========================', target.areas)
|
if (target.areas != null) {
|
this.form.provinceId = target.areas.provinceId
|
this.form.cityId = target.areas.cityId
|
this.initCityArea(this.form.provinceId, this.form.cityId)
|
}
|
})
|
},
|
uploadAvatarSuccess (file) {
|
this.form.imgurl = file.imgurl
|
this.form.imgurlfull = file.imgurlfull
|
},
|
uploadAvatarSuccess1 (file) {
|
this.form.posterImg = file.imgurl
|
this.form.posterImgfull = file.imgurlfull
|
},
|
uploadAvatarSuccess2 (file) {
|
this.form.businessImg = file.imgurl
|
this.form.businessImgfull = file.imgurlfull
|
},
|
uploadAvatarSuccess4 (file) {
|
this.form.idcardImgBack = file.imgurl
|
this.form.idcardImgBackfull = file.imgurlfull
|
},
|
uploadAvatarSuccess3 (file) {
|
this.form.idcardImg = file.imgurl
|
this.form.idcardImgfull = file.imgurlfull
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "@/assets/style/alertstyle.scss";
|
::v-deep .el-select {
|
width: 100%;
|
.el-input__inner {
|
width: 100%;
|
}
|
}
|
</style>
|
