Skip to content

P
pica.cloud.web-education-admin
提交 75bf34bf 编写于 作者: lyf's avatar lyf
浏览文件
操作

添加参数

上级 45036ffa
隐藏空白字符变更
内嵌 并排
正在显示 包含 1289 行增加 和 1127 行删除
src/views/shop/create-shop.vue
浏览文件 @ 75bf34bf
<template> <template>
<div class="create-shop-wrapper"> <div class="create-shop-wrapper">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb> <bread-crumb
:curmbFirst="curmbFirst"
:curmbSecond="curmbSecond"
></bread-crumb>
<div class="create-shop-content screenSet" id="screenSet"> <div class="create-shop-content screenSet" id="screenSet">
<el-row class="step-content"> <el-row class="step-content">
<el-col :span="20"> <el-col :span="20">
<p class="title">新建店铺</p> <p class="title">新建店铺</p>
</el-col> </el-col>
<el-col :span="4" style="text-align: right"> <el-col :span="4" style="text-align: right">
<el-button size="small" type="primary" :disabled="storeData && storeData.tradeStore.storeType == 3" @click="complete">完成</el-button> <el-button
size="small"
type="primary"
:disabled="storeData && storeData.tradeStore.storeType == 3"
@click="complete"
>完成</el-button
>
<el-button size="small" type="primary" @click="back">返回</el-button> <el-button size="small" type="primary" @click="back">返回</el-button>
</el-col> </el-col>
</el-row> </el-row>
<el-form <el-form
ref="formData" ref="formData"
:model="formData" :model="formData"
:rules="rules" :rules="rules"
label-width="150px" label-width="150px"
label-suffix="：" label-suffix="："
class="basic-form" class="basic-form"
style="margin-top: 15px" style="margin-top: 15px"
> >
<div class="basic-item-icon"> <div class="basic-item-icon">
<el-form-item label="店铺LOGO" class="required-label"> <el-form-item label="店铺LOGO" class="required-label">
<el-upload <el-upload
v-model="formData.storeLogo" v-model="formData.storeLogo"
class="bg-uploader" class="bg-uploader"
action="#" action="#"
:show-file-list="false" :show-file-list="false"
:before-upload="beforeUploadPic1" :before-upload="beforeUploadPic1"
>
<img
v-if="formData.storeLogo"
:src="formData.storeLogo"
@mouseover.stop="imgMouseOver1 = true"
class="bg-img"
/>
<img
v-if="!formData.storeLogo"
class="bg-img"
src="../../assets/image/small.png"
/>
<div
v-if="storeData && storeData.tradeStore.storeType == 3"
class="img-delete"
v-show="imgMouseOver1"
@click.stop="deleteImg('storeLogo')"
@mouseout.stop="imgMouseOver1 = false"
> >
<img <i class="el-icon-delete"></i>
v-if="formData.storeLogo" </div>
:src="formData.storeLogo" <div class="limit-text">
@mouseover.stop="imgMouseOver1=true" <p>限制大小: 200kb</p>
class="bg-img" <p>建议尺寸：128*128</p>
/> <p>支持jpeg, png格式</p>
<img v-if="!formData.storeLogo" class="bg-img" src="../../assets/image/small.png" /> </div>
<div v-if="storeData && storeData.tradeStore.storeType == 3" </el-upload>
class="img-delete" </el-form-item>
v-show="imgMouseOver1" <p class="upload-message" v-if="uploadImgMessage1">请上传店铺logo</p>
@click.stop="deleteImg('storeLogo')" </div>
@mouseout.stop="imgMouseOver1=false" <el-form-item label="店铺名称" prop="storeName">
> <el-col :span="10">
<i class="el-icon-delete"></i> <el-input
</div> :disabled="storeData && storeData.tradeStore.storeType == 3"
<div class="limit-text"> size="small"
<p>限制大小: 200kb</p> v-model="formData.storeName"
<p>建议尺寸：128*128</p> placeholder="请输入店铺名称"
<p>支持jpeg, png格式</p> maxlength="16"
</div> style="width: 85%"
</el-upload> ></el-input>
</el-form-item> <span class="word-num"
<p class="upload-message" v-if="uploadImgMessage1">请上传店铺logo</p> >{{ formData.storeName.replace(/\s+/g, "").length }}/16</span
</div> >
<el-form-item label="店铺名称" prop="storeName"> </el-col>
</el-form-item>
<el-form-item label="店铺简介" prop="storeDescription">
<el-col :span="10">
<el-input
:disabled="storeData && storeData.tradeStore.storeType == 3"
type="textarea"
rows="4"
maxlength="400"
size="small"
v-model="formData.storeDescription"
placeholder="请输入店铺简介"
style="width: 85%"
></el-input>
<span class="word-num"
>{{
formData.storeDescription.replace(/\s+/g, "").length
}}/400</span
>
</el-col>
</el-form-item>
<el-form-item label="店铺类型" prop="storeType">
<el-select
v-model="formData.storeType"
placeholder="请选择店铺类型"
size="small"
clearable
:disabled="isDisabled"
style="width: 35%"
>
<el-option
v-for="(item, index) in typeList"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<div v-if="formData.storeType == 1">
<el-row>
<el-col :span="10"> <el-col :span="10">
<el-input <el-form-item
:disabled="storeData && storeData.tradeStore.storeType == 3" label="入驻企业名称"
prop="compainName"
class="required-label"
>
<el-input
type="text"
maxlength="50"
size="small" size="small"
v-model="formData.storeName" v-model="formData.compainName"
placeholder="请输入店铺名称" placeholder="请输入入驻企业名称"
maxlength="16" style="width: 85%"
style="width:85%;" ></el-input>
></el-input> <span class="word-num"
<span class="word-num">{{(formData.storeName).replace(/\s+/g,"").length}}/16</span> >{{
formData.compainName.replace(/\s+/g, "").length
}}/50</span
>
</el-form-item>
</el-col> </el-col>
</el-form-item> <el-col :span="10" :offset="1">
<el-form-item label="店铺简介" prop="storeDescription"> <el-form-item
<el-col :span="10"> label="联系手机号"
<el-input prop="phoneNum"
:disabled="storeData && storeData.tradeStore.storeType == 3" label-width="95px"
type="textarea" class="required-label"
rows="4" >
maxlength="400" <el-input
type="text"
size="small" size="small"
v-model="formData.storeDescription" maxlength="11"
placeholder="请输入店铺简介" :disabled="isDisabled"
style="width:85%;" v-model="formData.phoneNum"
></el-input> placeholder="请输入联系电话"
<span class="word-num">{{(formData.storeDescription).replace(/\s+/g,"").length}}/400</span> style="width: 85%"
></el-input>
</el-form-item>
</el-col> </el-col>
</el-form-item> </el-row>
<el-form-item label="店铺类型" prop="storeType"> <div
<el-select class="main-content"
v-model="formData.storeType" v-for="(item, index) in formData.adminList"
placeholder="请选择店铺类型" :key="index"
size="small" >
clearable
:disabled="isDisabled"
style="width: 35%"
>
<el-option
v-for="(item,index) in typeList"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<div v-if="formData.storeType == 1">
<el-row> <el-row>
<el-col :span="10"> <el-col :span="10">
<el-form-item label="入驻企业名称" prop="compainName" class="required-label"> <el-form-item label="管理员姓名" class="required-label">
<el-input <el-input
type="text" type="text"
maxlength="50" maxlength="10"
size="small" size="small"
v-model="formData.compainName" v-model="item.adminName"
placeholder="请输入入驻企业名称" placeholder="请输入管理员姓名"
style="width:85%;" style="width: 85%"
></el-input> ></el-input>
<span class="word-num">{{(formData.compainName).replace(/\s+/g,"").length}}/50</span> <span class="word-num"
>{{ item.adminName.replace(/\s+/g, "").length }}/10</span
>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="10" :offset="1"> <el-col :span="1" style="text-align: right">
<el-form-item label="联系手机号" prop="phoneNum" label-width="95px" class="required-label"> <img
style="margin-top: 5px"
src="../../assets/image/lianjie_icon.png"
/>
</el-col>
<el-col :span="10">
<el-form-item
label="手机号"
label-width="95px"
class="required-label"
>
<el-input <el-input
type="text" type="text"
size="small" size="small"
maxlength="11" maxlength="11"
:disabled="isDisabled" v-model="item.adminMobile"
v-model="formData.phoneNum" placeholder="请输入管理员手机号"
placeholder="请输入联系电话" style="width: 85%"
style="width:85%;"
></el-input> ></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="2" class="span-mt-10">
<img
v-if="index < 4 && index == formData.adminList.length - 1"
@click="addItem(index)"
class="edit-img"
src="../../assets/image/plus.png"
/>
<img
v-if="formData.adminList.length > 1"
@click="deleteItem(index)"
class="edit-img"
src="../../assets/image/trash.png"
/>
</el-col>
</el-row> </el-row>
<div class="main-content" v-for="(item, index) in formData.adminList" :key="index"> </div>
<el-row> <el-form-item label="营业证明">
<el-col :span="10"> <p class="p-tips">
<el-form-item label="管理员姓名" class="required-label"> 若填写的联系人注册不是法定代表人，请上传委托书<br />
<el-input 仅支持jpg、png图片文件，且文件小于3M<br />
type="text" 上传的证件图片内，必须是加盖过红色公章和法人章，否则视为无效
maxlength="10" </p>
size="small" <div style="display: flex">
v-model="item.adminName" <div class="flex-upload">
placeholder="请输入管理员姓名" <el-upload
style="width:85%;" v-model="formData.imgUrlP1"
></el-input> class="bg-uploader"
<span class="word-num">{{(item.adminName).replace(/\s+/g,"").length}}/10</span> action="#"
</el-form-item> :show-file-list="false"
</el-col> :before-upload="beforeUploadProve1"
<el-col :span="1" style="text-align: right"> >
<img style="margin-top: 5px;" src="../../assets/image/lianjie_icon.png" />
</el-col>
<el-col :span="10">
<el-form-item label="手机号" label-width="95px" class="required-label">
<el-input
type="text"
size="small"
maxlength="11"
v-model="item.adminMobile"
placeholder="请输入管理员手机号"
style="width:85%;"
></el-input>
</el-form-item>
</el-col>
<el-col :span="2" class="span-mt-10">
<img <img
v-if="index < 4 && (index == formData.adminList.length-1)" v-if="formData.imgUrlP1"
@click="addItem(index)" :src="formData.imgUrlP1"
class="edit-img" @mouseover.stop="imgMouseOverP1 = true"
src="../../assets/image/plus.png" class="bg-img"
/> />
<img <img
v-if="formData.adminList.length > 1" v-if="!formData.imgUrlP1"
@click="deleteItem(index)" class="bg-img"
class="edit-img" src="../../assets/image/small.png"
src="../../assets/image/trash.png"
/> />
</el-col> <div
</el-row> class="img-delete add-left-18"
v-show="imgMouseOverP1"
@click.stop="deleteImg('imgUrlP1')"
@mouseout.stop="imgMouseOverP1 = false"
>
<i class="el-icon-delete"></i>
</div>
</el-upload>
<p class="tips">营业执照</p>
</div>
<div class="flex-upload">
<el-upload
v-model="formData.imgUrlP2"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadProve2"
>
<img
v-if="formData.imgUrlP2"
:src="formData.imgUrlP2"
@mouseover.stop="imgMouseOverP2 = true"
class="bg-img"
/>
<img
v-if="!formData.imgUrlP2"
class="bg-img"
src="../../assets/image/small.png"
/>
<div
class="img-delete add-left-18"
v-show="imgMouseOverP2"
@click.stop="deleteImg('imgUrlP2')"
@mouseout.stop="imgMouseOverP2 = false"
>
<i class="el-icon-delete"></i>
</div>
</el-upload>
<p class="tips">药品经营许可证</p>
</div>
<div class="flex-upload">
<el-upload
v-model="formData.imgUrlP3"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadProve3"
>
<img
v-if="formData.imgUrlP3"
:src="formData.imgUrlP3"
@mouseover.stop="imgMouseOverP3 = true"
class="bg-img"
/>
<img
v-if="!formData.imgUrlP3"
class="bg-img"
src="../../assets/image/small.png"
/>
<div
class="img-delete add-left-18"
v-show="imgMouseOverP3"
@click.stop="deleteImg('imgUrlP3')"
@mouseout.stop="imgMouseOverP3 = false"
>
<i class="el-icon-delete"></i>
</div>
</el-upload>
<p class="tips">委托书</p>
</div>
</div> </div>
</el-form-item>
</div>
<div v-if="formData.storeType == 3">
<el-col :span="10">
<el-form-item
label="医生姓名"
prop="docName"
class="required-label"
>
<el-input
:disabled="storeData && storeData.tradeStore.storeType == 3"
type="text"
maxlength="50"
size="small"
v-model="formData.docName"
placeholder="请输入医生姓名"
style="width: 85%"
></el-input>
<span class="word-num"
>{{ formData.docName.replace(/\s+/g, "").length }}/50</span
>
</el-form-item>
</el-col>
<el-col :span="10" :offset="1">
<el-form-item
label="联系手机号"
prop="docPhone"
label-width="95px"
class="required-label"
>
<el-input
type="text"
size="small"
maxlength="11"
v-model="formData.docPhone"
:disabled="isDisabled"
placeholder="请输入联系电话"
style="width: 85%"
></el-input>
</el-form-item>
</el-col>
</div>
<div v-if="formData.storeType == 2">
<el-col :span="10">
<el-form-item
label="入驻药店名称"
prop="drugstoreName"
class="required-label"
>
<el-input
type="text"
maxlength="50"
size="small"
v-model="formData.drugstoreName"
placeholder="请输入入驻药店名称"
style="width: 85%"
></el-input>
<span class="word-num"
>{{
formData.drugstoreName.replace(/\s+/g, "").length
}}/50</span
>
</el-form-item>
</el-col>
<el-col :span="10" :offset="1">
<el-form-item
label="联系电话"
prop="drugstorePhone"
label-width="95px"
class="required-label"
>
<el-input
type="text"
size="small"
maxlength="11"
v-model="formData.drugstorePhone"
:disabled="isDisabled"
placeholder="请输入联系电话"
style="width: 85%"
></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="营业证明"> <el-form-item label="营业证明">
<p class="p-tips">若填写的联系人注册不是法定代表人，请上传委托书<br/> <p class="p-tips">
仅支持jpg、png图片文件，且文件小于3M<br/> 若填写的联系人注册不是法定代表人，请上传委托书<br />
上传的证件图片内，必须是加盖过红色公章和法人章，否则视为无效</p> 仅支持jpg、png图片文件，且文件小于3M<br />
上传的证件图片内，必须是加盖过红色公章和法人章，否则视为无效
</p>
<div style="display: flex"> <div style="display: flex">
<div class="flex-upload"> <div class="flex-upload">
<el-upload <el-upload
v-model="formData.imgUrlP1" v-model="formData.imgUrlC1"
class="bg-uploader" class="bg-uploader"
action="#" action="#"
:show-file-list="false" :show-file-list="false"
:before-upload="beforeUploadProve1" :before-upload="beforeUploadC1"
> >
<img <img
v-if="formData.imgUrlP1" v-if="formData.imgUrlC1"
:src="formData.imgUrlP1" :src="formData.imgUrlC1"
@mouseover.stop="imgMouseOverP1=true" @mouseover.stop="imgMouseOverC1 = true"
class="bg-img" class="bg-img"
/> />
<img v-if="!formData.imgUrlP1" class="bg-img" src="../../assets/image/small.png" /> <img
<div v-if="!formData.imgUrlC1"
class="bg-img"
src="../../assets/image/small.png"
/>
<div
class="img-delete add-left-18" class="img-delete add-left-18"
v-show="imgMouseOverP1" v-show="imgMouseOverC1"
@click.stop="deleteImg('imgUrlP1')" @click.stop="deleteImg('imgUrlC1')"
@mouseout.stop="imgMouseOverP1=false" @mouseout.stop="imgMouseOverC1 = false"
> >
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</div> </div>
</el-upload> </el-upload>
<p class="tips">营业执照</p> <p class="tips">营业执照</p>
</div> </div>
<div class="flex-upload"> <div class="flex-upload">
<el-upload <el-upload
v-model="formData.imgUrlP2" v-model="formData.imgUrlC2"
class="bg-uploader" class="bg-uploader"
action="#" action="#"
:show-file-list="false" :show-file-list="false"
:before-upload="beforeUploadProve2" :before-upload="beforeUploadC2"
> >
<img <img
v-if="formData.imgUrlP2" v-if="formData.imgUrlC2"
:src="formData.imgUrlP2" :src="formData.imgUrlC2"
@mouseover.stop="imgMouseOverP2=true" @mouseover.stop="imgMouseOverC2 = true"
class="bg-img" class="bg-img"
/> />
<img v-if="!formData.imgUrlP2" class="bg-img" src="../../assets/image/small.png" /> <img
<div v-if="!formData.imgUrlC2"
class="bg-img"
src="../../assets/image/small.png"
/>
<div
class="img-delete add-left-18" class="img-delete add-left-18"
v-show="imgMouseOverP2" v-show="imgMouseOverC2"
@click.stop="deleteImg('imgUrlP2')" @click.stop="deleteImg('imgUrlC2')"
@mouseout.stop="imgMouseOverP2=false" @mouseout.stop="imgMouseOverC2 = false"
> >
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</div> </div>
</el-upload><p class="tips">药品经营许可证</p> </el-upload>
<p class="tips">药品经营许可证</p>
</div> </div>
<div class="flex-upload"> <div class="flex-upload">
<el-upload <el-upload
v-model="formData.imgUrlP3" v-model="formData.imgUrlC3"
class="bg-uploader" class="bg-uploader"
action="#" action="#"
:show-file-list="false" :show-file-list="false"
:before-upload="beforeUploadProve3" :before-upload="beforeUploadC3"
> >
<img <img
v-if="formData.imgUrlP3" v-if="formData.imgUrlC3"
:src="formData.imgUrlP3" :src="formData.imgUrlC3"
@mouseover.stop="imgMouseOverP3=true" @mouseover.stop="imgMouseOverC3 = true"
class="bg-img" class="bg-img"
/> />
<img v-if="!formData.imgUrlP3" class="bg-img" src="../../assets/image/small.png" /> <img
<div v-if="!formData.imgUrlC3"
class="bg-img"
src="../../assets/image/small.png"
/>
<div
class="img-delete add-left-18" class="img-delete add-left-18"
v-show="imgMouseOverP3" v-show="imgMouseOverC3"
@click.stop="deleteImg('imgUrlP3')" @click.stop="deleteImg('imgUrlC3')"
@mouseout.stop="imgMouseOverP3=false" @mouseout.stop="imgMouseOverC3 = false"
> >
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</div> </div>
</el-upload><p class="tips">委托书</p> </el-upload>
<p class="tips">委托书</p>
</div> </div>
</div> </div>
</el-form-item> </el-form-item>
</div> </el-col>
<div v-if="formData.storeType == 3"> </div>
<el-col :span="10">
<el-form-item label="医生姓名" prop="docName" class="required-label"> <el-form-item
<el-input label="医疗资质"
:disabled="storeData && storeData.tradeStore.storeType == 3" prop="storeQualityUrl"
type="text" >
maxlength="50" <el-input
size="small" :disabled="storeData"
v-model="formData.docName" size="small"
placeholder="请输入医生姓名" v-model="formData.storeQualityUrl"
style="width:85%;" placeholder="请填写URL,仅对批发商品生效"
></el-input> style="width: 35%"
<span class="word-num">{{(formData.docName).replace(/\s+/g,"").length}}/50</span> ></el-input>
</el-form-item> </el-form-item>
</el-col> </el-form>
<el-col :span="10" :offset="1">
<el-form-item label="联系手机号" prop="docPhone" label-width="95px" class="required-label">
<el-input
type="text"
size="small"
maxlength="11"
v-model="formData.docPhone"
:disabled="isDisabled"
placeholder="请输入联系电话"
style="width:85%;"
></el-input>
</el-form-item>
</el-col>
</div>
<div v-if="formData.storeType == 2">
<el-col :span="10">
<el-form-item label="入驻药店名称" prop="drugstoreName" class="required-label">
<el-input
type="text"
maxlength="50"
size="small"
v-model="formData.drugstoreName"
placeholder="请输入入驻药店名称"
style="width:85%;"
></el-input>
<span class="word-num">{{(formData.drugstoreName).replace(/\s+/g,"").length}}/50</span>
</el-form-item>
</el-col>
<el-col :span="10" :offset="1">
<el-form-item label="联系电话" prop="drugstorePhone" label-width="95px" class="required-label">
<el-input
type="text"
size="small"
maxlength="11"
v-model="formData.drugstorePhone"
:disabled="isDisabled"
placeholder="请输入联系电话"
style="width:85%;"
></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="营业证明">
<p class="p-tips">若填写的联系人注册不是法定代表人，请上传委托书<br/>
仅支持jpg、png图片文件，且文件小于3M<br/>
上传的证件图片内，必须是加盖过红色公章和法人章，否则视为无效</p>
<div style="display: flex">
<div class="flex-upload">
<el-upload
v-model="formData.imgUrlC1"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadC1"
>
<img
v-if="formData.imgUrlC1"
:src="formData.imgUrlC1"
@mouseover.stop="imgMouseOverC1=true"
class="bg-img"
/>
<img v-if="!formData.imgUrlC1" class="bg-img" src="../../assets/image/small.png" />
<div
class="img-delete add-left-18"
v-show="imgMouseOverC1"
@click.stop="deleteImg('imgUrlC1')"
@mouseout.stop="imgMouseOverC1=false"
>
<i class="el-icon-delete"></i>
</div>
</el-upload>
<p class="tips">营业执照</p>
</div>
<div class="flex-upload">
<el-upload
v-model="formData.imgUrlC2"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadC2"
>
<img
v-if="formData.imgUrlC2"
:src="formData.imgUrlC2"
@mouseover.stop="imgMouseOverC2=true"
class="bg-img"
/>
<img v-if="!formData.imgUrlC2" class="bg-img" src="../../assets/image/small.png" />
<div
class="img-delete add-left-18"
v-show="imgMouseOverC2"
@click.stop="deleteImg('imgUrlC2')"
@mouseout.stop="imgMouseOverC2=false"
>
<i class="el-icon-delete"></i>
</div>
</el-upload><p class="tips">药品经营许可证</p>
</div>
<div class="flex-upload">
<el-upload
v-model="formData.imgUrlC3"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadC3"
>
<img
v-if="formData.imgUrlC3"
:src="formData.imgUrlC3"
@mouseover.stop="imgMouseOverC3=true"
class="bg-img"
/>
<img v-if="!formData.imgUrlC3" class="bg-img" src="../../assets/image/small.png" />
<div
class="img-delete add-left-18"
v-show="imgMouseOverC3"
@click.stop="deleteImg('imgUrlC3')"
@mouseout.stop="imgMouseOverC3=false"
>
<i class="el-icon-delete"></i>
</div>
</el-upload><p class="tips">委托书</p>
</div>
</div>
</el-form-item>
</el-col>
</div>
</el-form>
<el-dialog <el-dialog
class="dialog-title-border-old" class="dialog-title-border-old"
title="图片裁剪" title="图片裁剪"
:visible.sync="showCropper" :visible.sync="showCropper"
:width="currentOption.cropDialogWidth" :width="currentOption.cropDialogWidth"
center> center
<div slot="title" style="text-align: left;"> >
<span style="font-weight: 700;">图片裁剪</span> <div slot="title" style="text-align: left">
<span style="font-weight: 700">图片裁剪</span>
</div> </div>
<div v-if="showCropper" style="margin-bottom: 20px;"> <div v-if="showCropper" style="margin-bottom: 20px">
<Cropper <Cropper
:cropOption="currentOption" :cropOption="currentOption"
@getCropImg="getCropImg(arguments)" @getCropImg="getCropImg(arguments)"
:originImg="slide2.oriUrl" :originImg="slide2.oriUrl"
/> />
</div> </div>
</el-dialog> </el-dialog>
...@@ -421,665 +537,704 @@ ...@@ -421,665 +537,704 @@
</div> </div>
</template> </template>
<script> <script>
import BreadCrumb from "@/components/breadcrumb.vue"; import BreadCrumb from "@/components/breadcrumb.vue";
let vm = null; let vm = null;
import { openLoading, closeLoading } from "../../utils/utils"; import { openLoading, closeLoading } from "../../utils/utils";
import { doUpload, getFilePath } from "../../utils/qiniu-util"; import { doUpload, getFilePath } from "../../utils/qiniu-util";
import Cropper from '@/components/common/cropper.vue' import Cropper from "@/components/common/cropper.vue";
import { saveStore, queryStore } from '@/utils/shop'; import { saveStore, queryStore } from "@/utils/shop";
import { checkMobile } from '@/utils/patients/checkValid' import { checkMobile } from "@/utils/patients/checkValid";
export default { export default {
components: { components: {
BreadCrumb, BreadCrumb,
Cropper Cropper,
}, },
data(){ data() {
let checkProjectStr = (rule, value, callback) => { let checkProjectStr = (rule, value, callback) => {
if (value.indexOf("\\") != -1) { if (value.indexOf("\\") != -1) {
callback(new Error("请勿输入字符“ \\ ”")); callback(new Error("请勿输入字符“ \\ ”"));
} else if (value.indexOf(".") != -1) { } else if (value.indexOf(".") != -1) {
callback(new Error("请勿输入字符“ . ”")); callback(new Error("请勿输入字符“ . ”"));
} else { } else {
callback(); callback();
} }
}; };
return{ return {
curmbFirst: '云鹊店铺', curmbFirst: "云鹊店铺",
curmbSecond: '新建店铺', curmbSecond: "新建店铺",
isDisabled: false, isDisabled: false,
storeData: null, storeData: null,
typeList: [ typeList: [
{ {
label: '供货商', label: "供货商",
value: 1, value: 1,
}, {
label: '小药房',
value: 2,
}, {
label: '医生小店',
value: 3,
}
],
formData: {
storeId: null,
userId: null,
storeLogo: '',//店铺logo
storeName: '',
storeDescription: '',
storeType: '',
storeOwner: '',
storePhone: '',
imageList: [],
adminList: [
{
adminName: '',
adminMobile: '',
id: null,
}
],//供货商-管理员信息
compainName: '',//供货商-入驻企业名称
phoneNum: '',//供货商-联系电话
imgUrlP1: '',//证明图1
imgUrlP2: '',//证明图2
imgUrlP3: '',//证明图3
docName: '',//医生小店-医生姓名
docPhone: '',//医生小店-联系电话
drugstoreName: '',//小药房-药店名称
drugstorePhone: '',//小药房-联系电话
imgUrlC1: '',//证明图1
imgUrlC2: '',//证明图2
imgUrlC3: '',//证明图3
},
supplierImg1: {
id: null,
imageSort: 1,
imageType: 2,
imageUrl: '',
},
supplierImg2: {
id: null,
imageSort: 2,
imageType: 2,
imageUrl: '',
},
supplierImg3: {
id: null,
imageSort: 3,
imageType: 2,
imageUrl: '',
},
drugstoreImg1: {
id: null,
imageSort: 1,
imageType: 2,
imageUrl: '',
},
drugstoreImg2: {
id: null,
imageSort: 2,
imageType: 2,
imageUrl: '',
},
drugstoreImg3: {
id: null,
imageSort: 3,
imageType: 2,
imageUrl: '',
}, },
showCropper: false, {
currentOption: { label: "小药房",
offset_x: 120, value: 2,
offset_y: 185,
width: 160,
height: 120,
cvWidth: 1000,
cvHeight: 800,
uploadType: 1,
cropDialogWidth: '900px',
cropBoxResizable: true,
minCropBoxWidth: 100,
minCropBoxHeight: 100,
aspectRatio: 16/9,
currentPic: '',
}, },
slide2: { {
oriUrl: '', // 原图 label: "医生小店",
value: 3,
}, },
rules: { ],
storeName: [ formData: {
{ required: true, message: "请输入店铺名称", trigger: "blur" }, storeId: null,
userId: null,
storeQualityUrl:"",
storeLogo: "", //店铺logo
storeName: "",
storeDescription: "",
storeType: "",
storeOwner: "",
storePhone: "",
imageList: [],
adminList: [
{
adminName: "",
adminMobile: "",
id: null,
},
], //供货商-管理员信息
compainName: "", //供货商-入驻企业名称
phoneNum: "", //供货商-联系电话
imgUrlP1: "", //证明图1
imgUrlP2: "", //证明图2
imgUrlP3: "", //证明图3
docName: "", //医生小店-医生姓名
docPhone: "", //医生小店-联系电话
drugstoreName: "", //小药房-药店名称
drugstorePhone: "", //小药房-联系电话
imgUrlC1: "", //证明图1
imgUrlC2: "", //证明图2
imgUrlC3: "", //证明图3
},
supplierImg1: {
id: null,
imageSort: 1,
imageType: 2,
imageUrl: "",
},
supplierImg2: {
id: null,
imageSort: 2,
imageType: 2,
imageUrl: "",
},
supplierImg3: {
id: null,
imageSort: 3,
imageType: 2,
imageUrl: "",
},
drugstoreImg1: {
id: null,
imageSort: 1,
imageType: 2,
imageUrl: "",
},
drugstoreImg2: {
id: null,
imageSort: 2,
imageType: 2,
imageUrl: "",
},
drugstoreImg3: {
id: null,
imageSort: 3,
imageType: 2,
imageUrl: "",
},
showCropper: false,
currentOption: {
offset_x: 120,
offset_y: 185,
width: 160,
height: 120,
cvWidth: 1000,
cvHeight: 800,
uploadType: 1,
cropDialogWidth: "900px",
cropBoxResizable: true,
minCropBoxWidth: 100,
minCropBoxHeight: 100,
aspectRatio: 16 / 9,
currentPic: "",
},
slide2: {
oriUrl: "", // 原图
},
rules: {
storeName: [
{ required: true, message: "请输入店铺名称", trigger: "blur" },
{
min: 2,
max: 16,
message: "输入长度为2-16的内容，可包含中英文、数字及特殊符号",
trigger: "blur",
},
{ validator: checkProjectStr, trigger: "blur" },
],
storeDescription: [
{ required: false, message: "请输入店铺简介", trigger: "blur" },
{ validator: checkProjectStr, trigger: "blur" },
],
storeType: [
{ required: true, message: "请选择店铺类型", trigger: "blur" },
],
compainName: [
{ required: true, message: "请输入入驻企业名称", trigger: "blur" },
],
phoneNum: [
{ required: true, message: "请输入联系电话", trigger: "blur" },
{ validator: checkMobile, trigger: ["change", "blur"] },
],
docName: [
{ required: true, message: "请输入医生姓名", trigger: "blur" },
],
docPhone: [
{ required: true, message: "请输入联系电话", trigger: "blur" },
{ validator: checkMobile, trigger: ["change", "blur"] },
],
drugstoreName: [
{ required: true, message: "请输入入驻药店名称", trigger: "blur" },
],
drugstorePhone: [
{ required: true, message: "请输入联系电话", trigger: "blur" },
{ validator: checkMobile, trigger: ["change", "blur"] },
],
},
imgMouseOver1: false,
uploadImgMessage1: false, //未上传图片，校验提示语
imgMouseOverP1: false,
imgMouseOverP2: false,
imgMouseOverP3: false,
imgMouseOverC1: false,
imgMouseOverC2: false,
imgMouseOverC3: false,
addItemFlag: true,
enterType: 1,
};
},
watch: {},
created() {
vm = this;
this.formData.storeId = this.$route.query.storeId || null;
this.storeData = this.$route.query.storeData || null;
if (this.formData.storeId) {
this.curmbSecond = "编辑店铺";
this.storeData = JSON.parse(this.storeData);
this.isDisabled = true;
this.initInfo();
this.getStoreInfo();
} else {
this.curmbSecond = "新建店铺";
this.isDisabled = false;
}
},
methods: {
//回显数据处理
getStoreInfo() {
if (!this.storeData || !this.storeData.tradeStore) return;
const {
storeLogo,
storeName,
storeDescription,
storeType,
storeOwner,
storePhone,
storeQualityUrl
} = this.storeData.tradeStore;
this.formData.storeLogo = storeLogo;
this.formData.storeName = storeName;
this.formData.storeQualityUrl=storeQualityUrl;
this.formData.storeDescription = storeDescription;
this.formData.storeType = storeType;
if (storeType == 1) {
this.formData.compainName = storeOwner;
this.formData.phoneNum = storePhone;
if (this.storeData.imageList && this.storeData.imageList.length) {
this.storeData.imageList.map((item) => {
if (item.imageSort == 1) {
this.supplierImg1 = item;
this.formData.imgUrlP1 = item.imageUrl;
} else if (item.imageSort == 2) {
this.supplierImg2 = item;
this.formData.imgUrlP2 = item.imageUrl;
} else if (item.imageSort == 3) {
this.supplierImg3 = item;
this.formData.imgUrlP3 = item.imageUrl;
}
});
} else {
this.formData.imgUrlP1 = "";
this.formData.imgUrlP2 = "";
this.formData.imgUrlP3 = "";
}
//处理管理员数据
if (this.storeData.adminList && this.storeData.adminList.length) {
this.formData.adminList = this.storeData.adminList;
} else {
this.formData.adminList = [
{ {
min: 2, adminName: "",
max: 16, adminMobile: "",
message: "输入长度为2-16的内容，可包含中英文、数字及特殊符号", id: null,
trigger: "blur"
}, },
{ validator: checkProjectStr, trigger: "blur" } ];
], }
storeDescription: [ } else if (storeType == 3) {
{ required: false, message: "请输入店铺简介", trigger: "blur" }, this.formData.docName = storeOwner;
{ validator: checkProjectStr, trigger: "blur" } this.formData.docPhone = storePhone;
], } else if (storeType == 2) {
storeType: [ this.formData.drugstoreName = storeOwner;
{ required: true, message: "请选择店铺类型", trigger: "blur" }, this.formData.drugstorePhone = storePhone;
], if (this.storeData.imageList && this.storeData.imageList.length) {
compainName: [ this.storeData.imageList.map((item) => {
{ required: true, message: "请输入入驻企业名称", trigger: "blur" }, if (item.imageSort == 1) {
], this.drugstoreImg1 = item;
phoneNum: [ this.formData.imgUrlC1 = item.imageUrl;
{ required: true, message: "请输入联系电话", trigger: "blur" }, } else if (item.imageSort == 2) {
{validator: checkMobile, trigger: ['change','blur']} this.drugstoreImg2 = item;
], this.formData.imgUrlC2 = item.imageUrl;
docName: [ } else if (item.imageSort == 3) {
{ required: true, message: "请输入医生姓名", trigger: "blur" }, this.drugstoreImg3 = item;
], this.formData.imgUrlC3 = item.imageUrl;
docPhone: [ }
{ required: true, message: "请输入联系电话", trigger: "blur" }, });
{validator: checkMobile, trigger: ['change','blur']} } else {
], this.formData.imgUrlC1 = "";
drugstoreName: [ this.formData.imgUrlC2 = "";
{ required: true, message: "请输入入驻药店名称", trigger: "blur" }, this.formData.imgUrlC3 = "";
], }
drugstorePhone: [
{ required: true, message: "请输入联系电话", trigger: "blur" },
{validator: checkMobile, trigger: ['change','blur']}
],
},
imgMouseOver1: false,
uploadImgMessage1: false,//未上传图片，校验提示语
imgMouseOverP1: false,
imgMouseOverP2: false,
imgMouseOverP3: false,
imgMouseOverC1: false,
imgMouseOverC2: false,
imgMouseOverC3: false,
addItemFlag: true,
enterType: 1,
} }
}, },
watch: {}, initInfo() {
created() { let req = {
vm = this; storeId: this.formData.storeId,
this.formData.storeId = this.$route.query.storeId || null; };
this.storeData = this.$route.query.storeData || null; queryStore(req).then((res) => {
if (res.code == "000000") {
if (this.formData.storeId) { } else {
this.curmbSecond = '编辑店铺'; this.$message.error(res.message);
this.storeData = JSON.parse(this.storeData); }
this.isDisabled = true; });
this.initInfo(); },
this.getStoreInfo(); complete() {
}else { let flag = this.submitForm();
this.curmbSecond = '新建店铺'; if (flag) {
this.isDisabled = false; // let para = {
// storeId: this.formData.storeId,
// userId: this.formData.userId,
// storeLogo: this.formData.storeLogo,//店铺logo
// storeName: this.formData.storeName,
// storeDescription: this.formData.storeDescription,
// storeType: Number(this.formData.storeType),
// storeOwner:this.formData.storeOwner,
// storePhone: this.formData.storePhone,
// imageList: this.formData.imageList,
// adminList:this.formData.adminList,
// }
this.formData.storeType = Number(this.formData.storeType);
this.formData.storeEntry = "PCKAIDIAN"; // 添加店铺渠道
console.log("提交的数据", this.formData);
saveStore(this.formData).then((res) => {
if (res.code == "000000") {
this.$message.success("操作成功");
this.$router.push({
path: "/shop-list",
});
} else {
this.$message.error(res.message);
}
});
} }
}, },
methods: {
//回显数据处理
getStoreInfo() {
if (!this.storeData || !this.storeData.tradeStore) return;
const { storeLogo, storeName, storeDescription, storeType, storeOwner, storePhone, } = this.storeData.tradeStore;
this.formData.storeLogo = storeLogo;
this.formData.storeName = storeName;
this.formData.storeDescription = storeDescription;
this.formData.storeType = storeType;
if (storeType == 1) { // 返回
this.formData.compainName = storeOwner; back() {
this.formData.phoneNum = storePhone; this.$router.push({
if (this.storeData.imageList && this.storeData.imageList.length) { path: "/shop-list",
this.storeData.imageList.map(item => { });
if (item.imageSort == 1) { },
this.supplierImg1 = item; checkPhone(val) {
this.formData.imgUrlP1 = item.imageUrl; if (!/^1[3456789]\d{9}$/.test(val)) {
}else if (item.imageSort == 2) { return false;
this.supplierImg2 = item; } else {
this.formData.imgUrlP2 = item.imageUrl; return true;
}else if (item.imageSort == 3) { }
this.supplierImg3 = item; },
this.formData.imgUrlP3 = item.imageUrl; resetType(type) {
} this.formData.imageList = [];
}) if (type == 1) {
}else { this.formData.storeOwner = this.formData.compainName;
this.formData.imgUrlP1 = ''; this.formData.storePhone = this.formData.phoneNum;
this.formData.imgUrlP2 = ''; if (this.formData.imgUrlP1) {
this.formData.imgUrlP3 = ''; this.supplierImg1.imageUrl = this.formData.imgUrlP1;
} this.formData.imageList.push(this.supplierImg1);
//处理管理员数据
if (this.storeData.adminList && this.storeData.adminList.length) {
this.formData.adminList = this.storeData.adminList
}else {
this.formData.adminList = [{
adminName: '',
adminMobile: '',
id: null,
}]
}
}else if (storeType == 3) {
this.formData.docName = storeOwner;
this.formData.docPhone = storePhone;
}else if (storeType == 2) {
this.formData.drugstoreName = storeOwner;
this.formData.drugstorePhone = storePhone;
if (this.storeData.imageList && this.storeData.imageList.length) {
this.storeData.imageList.map(item => {
if (item.imageSort == 1) {
this.drugstoreImg1 = item;
this.formData.imgUrlC1 = item.imageUrl;
}else if (item.imageSort == 2) {
this.drugstoreImg2 = item;
this.formData.imgUrlC2 = item.imageUrl;
}else if (item.imageSort == 3) {
this.drugstoreImg3 = item;
this.formData.imgUrlC3 = item.imageUrl;
}
})
}else {
this.formData.imgUrlC1 = '';
this.formData.imgUrlC2 = '';
this.formData.imgUrlC3 = '';
}
} }
}, if (this.formData.imgUrlP2) {
initInfo() { this.supplierImg2.imageUrl = this.formData.imgUrlP2;
let req = { this.formData.imageList.push(this.supplierImg2);
storeId: this.formData.storeId
};
queryStore(req).then(res => {
if (res.code == '000000') {
}else {
this.$message.error(res.message);
}
})
},
complete() {
let flag = this.submitForm();
if (flag) {
// let para = {
// storeId: this.formData.storeId,
// userId: this.formData.userId,
// storeLogo: this.formData.storeLogo,//店铺logo
// storeName: this.formData.storeName,
// storeDescription: this.formData.storeDescription,
// storeType: Number(this.formData.storeType),
// storeOwner:this.formData.storeOwner,
// storePhone: this.formData.storePhone,
// imageList: this.formData.imageList,
// adminList:this.formData.adminList,
// }
this.formData.storeType = Number(this.formData.storeType);
this.formData.storeEntry = 'PCKAIDIAN'; // 添加店铺渠道
console.log('提交的数据',this.formData)
saveStore(this.formData).then(res => {
if (res.code == '000000') {
this.$message.success("操作成功");
this.$router.push({
path: '/shop-list'
})
}else {
this.$message.error(res.message);
}
})
} }
}, if (this.formData.imgUrlP3) {
this.supplierImg3.imageUrl = this.formData.imgUrlP3;
// 返回 this.formData.imageList.push(this.supplierImg3);
back() {
this.$router.push({
path: '/shop-list'
})
},
checkPhone(val) {
if(!(/^1[3456789]\d{9}$/.test(val))) {
return false;
} else {
return true;
} }
}, } else if (type == 3) {
resetType(type){ this.formData.storeOwner = this.formData.docName;
this.formData.imageList = []; this.formData.storePhone = this.formData.docPhone;
if (type == 1) { this.formData.adminList = [];
this.formData.storeOwner = this.formData.compainName; } else if (type == 2) {
this.formData.storePhone = this.formData.phoneNum; this.formData.storeOwner = this.formData.drugstoreName;
if (this.formData.imgUrlP1) { this.formData.storePhone = this.formData.drugstorePhone;
this.supplierImg1.imageUrl = this.formData.imgUrlP1; this.formData.adminList = [];
this.formData.imageList.push(this.supplierImg1); if (this.formData.imgUrlC1) {
} this.drugstoreImg1.imageUrl = this.formData.imgUrlC1;
if (this.formData.imgUrlP2) { this.formData.imageList.push(this.drugstoreImg1);
this.supplierImg2.imageUrl = this.formData.imgUrlP2;
this.formData.imageList.push(this.supplierImg2);
}
if (this.formData.imgUrlP3) {
this.supplierImg3.imageUrl = this.formData.imgUrlP3;
this.formData.imageList.push(this.supplierImg3);
}
}else if (type == 3) {
this.formData.storeOwner = this.formData.docName;
this.formData.storePhone = this.formData.docPhone;
this.formData.adminList = [];
}else if (type == 2) {
this.formData.storeOwner = this.formData.drugstoreName;
this.formData.storePhone = this.formData.drugstorePhone;
this.formData.adminList = [];
if (this.formData.imgUrlC1) {
this.drugstoreImg1.imageUrl = this.formData.imgUrlC1;
this.formData.imageList.push(this.drugstoreImg1);
}
if (this.formData.imgUrlC2) {
this.drugstoreImg2.imageUrl = this.formData.imgUrlC2;
this.formData.imageList.push(this.drugstoreImg2);
}
if (this.formData.imgUrlC3) {
this.drugstoreImg3.imageUrl = this.formData.imgUrlC3;
this.formData.imageList.push(this.drugstoreImg3);
}
} }
}, if (this.formData.imgUrlC2) {
setTypeForData() { this.drugstoreImg2.imageUrl = this.formData.imgUrlC2;
let flag = false; this.formData.imageList.push(this.drugstoreImg2);
if (this.formData.storeType == 1) { }
if (!this.formData.compainName) { if (this.formData.imgUrlC3) {
this.$message.warning('请输入入驻企业名称'); this.drugstoreImg3.imageUrl = this.formData.imgUrlC3;
this.formData.imageList.push(this.drugstoreImg3);
}
}
},
setTypeForData() {
let flag = false;
if (this.formData.storeType == 1) {
if (!this.formData.compainName) {
this.$message.warning("请输入入驻企业名称");
return;
}
if (!this.formData.phoneNum) {
this.$message.warning("请输入联系电话");
return;
} else {
if (!this.checkPhone(this.formData.phoneNum)) {
this.$message.warning("请输入正确的手机号");
return; return;
} }
if (!this.formData.phoneNum) { }
this.$message.warning('请输入联系电话'); if (this.formData.adminList && this.formData.adminList.length) {
return; for (let i = 0; i < this.formData.adminList.length; i++) {
}else { if (!this.formData.adminList[i].adminName) {
if(!this.checkPhone(this.formData.phoneNum)) { this.$message.warning(`请输入第${i + 1}个管理员的姓名`);
this.$message.warning('请输入正确的手机号');
return; return;
} }
} if (!this.formData.adminList[i].adminMobile) {
if (this.formData.adminList && this.formData.adminList.length) { this.$message.warning(`请输入第${i + 1}个管理员的联系电话`);
for(let i=0; i<this.formData.adminList.length; i++) { return;
if (!this.formData.adminList[i].adminName) { } else {
this.$message.warning(`请输入第${i+1}个管理员的姓名`); if (!this.checkPhone(this.formData.adminList[i].adminMobile)) {
return; this.$message.warning(`请输入第${i + 1}个管理员的正确联系电话`);
}
if(!this.formData.adminList[i].adminMobile) {
this.$message.warning(`请输入第${i+1}个管理员的联系电话`);
return; return;
}else {
if(!this.checkPhone(this.formData.adminList[i].adminMobile)) {
this.$message.warning(`请输入第${i+1}个管理员的正确联系电话`);
return;
}
} }
} }
} }
}
flag = true; flag = true;
}
if (this.formData.storeType == 3) {
if (!this.formData.docName) {
this.$message.warning("请输入医生姓名");
return;
} }
if (this.formData.storeType == 3) { if (!this.formData.docPhone) {
if (!this.formData.docName) { this.$message.warning("请输入联系电话");
this.$message.warning('请输入医生姓名'); return;
return; } else {
} if (!this.checkPhone(this.formData.docPhone)) {
if (!this.formData.docPhone) { this.$message.warning("请输入正确的联系电话");
this.$message.warning('请输入联系电话');
return; return;
}else {
if(!this.checkPhone(this.formData.docPhone)) {
this.$message.warning('请输入正确的联系电话');
return;
}
} }
flag = true;
} }
if (this.formData.storeType == 2) { flag = true;
if (!this.formData.drugstoreName) { }
this.$message.warning('请输入入驻药店名称'); if (this.formData.storeType == 2) {
return; if (!this.formData.drugstoreName) {
} this.$message.warning("请输入入驻药店名称");
if (!this.formData.drugstorePhone) { return;
this.$message.warning('请输入联系电话'); }
if (!this.formData.drugstorePhone) {
this.$message.warning("请输入联系电话");
return;
} else {
if (!this.checkPhone(this.formData.drugstorePhone)) {
this.$message.warning("请输入正确的联系电话");
return; return;
}else {
if(!this.checkPhone(this.formData.drugstorePhone)) {
this.$message.warning('请输入正确的联系电话');
return;
}
} }
flag = true;
} }
return flag; flag = true;
}, }
//表单校验 return flag;
submitForm() { },
let formName = "formData"; //表单校验
let submitFlag = false; submitForm() {
let formName = "formData";
let submitFlag = false;
if (!this.formData.storeLogo){ if (!this.formData.storeLogo) {
this.uploadImgMessage1 = true; this.uploadImgMessage1 = true;
return; return;
}else { } else {
this.uploadImgMessage1 = false; this.uploadImgMessage1 = false;
} }
this.$refs[formName].validate(valid => { this.$refs[formName].validate((valid) => {
if (valid) { if (valid) {
if (!this.setTypeForData()) { if (!this.setTypeForData()) {
return; return;
}
this.resetType(this.formData.storeType);
submitFlag = true;
} else {
submitFlag = false;
} }
}); this.resetType(this.formData.storeType);
return submitFlag; submitFlag = true;
}, } else {
//上传店铺logo submitFlag = false;
beforeUploadPic1(file) {
this.currentOption.aspectRatio = 1/1;
this.currentOption.cropBoxResizable = true;
this.currentOption.minCropBoxWidth = 128;
this.currentOption.minCropBoxHeight = 128;
this.currentOption.currentPic = 'storeLogo';
let fileLimit = {
width: 128,
height: 128,
size: 0.2,
sizeText: "200K",
key: "storeLogo",
more: "imgUrl1More",
show: "uploadImgMessage1"
};
this.beforeUploadLogo(file,fileLimit)
//this.beforeUpload1(file, fileLimit);
},
//上传logo add
beforeUploadLogo(file, fileLimit) {
let vm = this;
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 < 200;
if (!isJPG && !isPNG) {
vm.$message.error("仅支持jpeg，png格式");
// return;
}
if (!isLt2M) {
vm.$message.error("图片大小请控制在200kb以内");
return;
} }
});
return submitFlag;
},
//上传店铺logo
beforeUploadPic1(file) {
this.currentOption.aspectRatio = 1 / 1;
this.currentOption.cropBoxResizable = true;
this.currentOption.minCropBoxWidth = 128;
this.currentOption.minCropBoxHeight = 128;
this.currentOption.currentPic = "storeLogo";
let fileLimit = {
width: 128,
height: 128,
size: 0.2,
sizeText: "200K",
key: "storeLogo",
more: "imgUrl1More",
show: "uploadImgMessage1",
};
this.beforeUploadLogo(file, fileLimit);
//this.beforeUpload1(file, fileLimit);
},
//上传logo add
beforeUploadLogo(file, fileLimit) {
let vm = this;
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 < 200;
if (!isJPG && !isPNG) {
vm.$message.error("仅支持jpeg，png格式");
// return;
}
if (!isLt2M) {
vm.$message.error("图片大小请控制在200kb以内");
return;
}
let _img = new FileReader(); let _img = new FileReader();
_img.readAsDataURL(file); _img.readAsDataURL(file);
_img.onload = function (theFile) { _img.onload = function (theFile) {
let image = new Image() let image = new Image();
image.src = theFile.target.result image.src = theFile.target.result;
//vm.slide2.oriUrl = theFile.target.result; //vm.slide2.oriUrl = theFile.target.result;
image.onload = function () { image.onload = function () {
let _this = this; let _this = this;
// if (_this.width != fileLimit.width || _this.height != fileLimit.height) { // if (_this.width != fileLimit.width || _this.height != fileLimit.height) {
let l = _this.width/_this.height let l = _this.width / _this.height;
if (l != 1) { if (l != 1) {
vm.$message.error("图片宽高比例请控制在1:1"); vm.$message.error("图片宽高比例请控制在1:1");
return; return;
} else { } else {
openLoading(vm); openLoading(vm);
doUpload(vm, file, getFilePath(file, null), "preview4", "progress1", 1).then(function (path) { doUpload(
closeLoading(vm); vm,
file,
vm.formData[fileLimit.key] = path.fullPath; getFilePath(file, null),
vm.formData[fileLimit.more] = { "preview4",
attachmentName: path.storeName, "progress1",
attachmentExt: path.ext, 1
attachmentSize: path.size ).then(function (path) {
}; closeLoading(vm);
vm.$message.success("上传成功");
});
}
};
};
}, vm.formData[fileLimit.key] = path.fullPath;
setOption(type) { vm.formData[fileLimit.more] = {
// this.currentOption.aspectRatio = 1/1; attachmentName: path.storeName,
// this.currentOption.cropBoxResizable = true; attachmentExt: path.ext,
// this.currentOption.minCropBoxWidth = 160; attachmentSize: path.size,
// this.currentOption.minCropBoxHeight = 160; };
// this.currentOption.currentPic = type; vm.$message.success("上传成功");
let fileLimit = { });
width: '', }
height: '',
size: 3,
sizeText: "3M",
key: type,
more: "imgUrlP1More",
}; };
return fileLimit; };
}, },
beforeUploadProve1(file) { setOption(type) {
let fileLimit = this.setOption('imgUrlP1'); // this.currentOption.aspectRatio = 1/1;
this.beforeUpload(file, fileLimit); // this.currentOption.cropBoxResizable = true;
}, // this.currentOption.minCropBoxWidth = 160;
beforeUploadProve2(file) { // this.currentOption.minCropBoxHeight = 160;
let fileLimit = this.setOption('imgUrlP2'); // this.currentOption.currentPic = type;
this.beforeUpload(file, fileLimit); let fileLimit = {
}, width: "",
beforeUploadProve3(file) { height: "",
let fileLimit = this.setOption('imgUrlP3'); size: 3,
this.beforeUpload(file, fileLimit); sizeText: "3M",
}, key: type,
beforeUploadC1(file) { more: "imgUrlP1More",
let fileLimit = this.setOption('imgUrlC1'); };
this.beforeUpload(file, fileLimit); return fileLimit;
}, },
beforeUploadC2(file) { beforeUploadProve1(file) {
let fileLimit = this.setOption('imgUrlC2'); let fileLimit = this.setOption("imgUrlP1");
this.beforeUpload(file, fileLimit); this.beforeUpload(file, fileLimit);
}, },
beforeUploadC3(file) { beforeUploadProve2(file) {
let fileLimit = this.setOption('imgUrlC3'); let fileLimit = this.setOption("imgUrlP2");
this.beforeUpload(file, fileLimit); this.beforeUpload(file, fileLimit);
}, },
beforeUpload(file, fileLimit) { beforeUploadProve3(file) {
let vm = this; let fileLimit = this.setOption("imgUrlP3");
const isJPG = file.type === "image/jpeg"; this.beforeUpload(file, fileLimit);
const isPNG = file.type === "image/png"; },
const isLt2M = file.size / 1024 / 1024 < fileLimit.size; beforeUploadC1(file) {
if (!isJPG && !isPNG) { let fileLimit = this.setOption("imgUrlC1");
vm.$message.error("仅支持jpeg，png格式"); this.beforeUpload(file, fileLimit);
return; },
} beforeUploadC2(file) {
if (!isLt2M) { let fileLimit = this.setOption("imgUrlC2");
vm.$message.error(`图片大小不可以超过${fileLimit.sizeText}`); this.beforeUpload(file, fileLimit);
return; },
} beforeUploadC3(file) {
let _img = new FileReader(); let fileLimit = this.setOption("imgUrlC3");
_img.readAsDataURL(file); this.beforeUpload(file, fileLimit);
_img.onload = function (theFile) { },
let image = new Image() beforeUpload(file, fileLimit) {
image.src = theFile.target.result let vm = this;
vm.slide2.oriUrl = theFile.target.result; const isJPG = file.type === "image/jpeg";
image.onload = function () { const isPNG = file.type === "image/png";
let _this = this; const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
openLoading(vm); if (!isJPG && !isPNG) {
doUpload(vm, file, getFilePath(file, null), "preview4", "progress1", 1).then(function (path) { vm.$message.error("仅支持jpeg，png格式");
closeLoading(vm); return;
vm.formData[fileLimit.key] = path.fullPath; }
vm.formData[fileLimit.more] = { if (!isLt2M) {
attachmentName: path.storeName, vm.$message.error(`图片大小不可以超过${fileLimit.sizeText}`);
attachmentExt: path.ext, return;
attachmentSize: path.size }
}; let _img = new FileReader();
vm.$message.success("上传成功"); _img.readAsDataURL(file);
}); _img.onload = function (theFile) {
}; let image = new Image();
image.src = theFile.target.result;
vm.slide2.oriUrl = theFile.target.result;
image.onload = function () {
let _this = this;
openLoading(vm);
doUpload(
vm,
file,
getFilePath(file, null),
"preview4",
"progress1",
1
).then(function (path) {
closeLoading(vm);
vm.formData[fileLimit.key] = path.fullPath;
vm.formData[fileLimit.more] = {
attachmentName: path.storeName,
attachmentExt: path.ext,
attachmentSize: path.size,
};
vm.$message.success("上传成功");
});
}; };
return isJPG && isLt2M; };
}, return isJPG && isLt2M;
//上传图片 },
beforeUpload1(file, fileLimit) { //上传图片
let vm = this; beforeUpload1(file, fileLimit) {
const isJPG = file.type === "image/jpeg"; let vm = this;
const isPNG = file.type === "image/png"; const isJPG = file.type === "image/jpeg";
const isLt2M = file.size / 1024 / 1024 < fileLimit.size; const isPNG = file.type === "image/png";
if (!isJPG && !isPNG) { const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
vm.$message.error("仅支持jpeg，png格式"); if (!isJPG && !isPNG) {
// return; vm.$message.error("仅支持jpeg，png格式");
} // return;
// if (!isLt2M) { }
// vm.$message.error("图片大小不符合规范，请根据规范上传图片 "); // if (!isLt2M) {
// return; // vm.$message.error("图片大小不符合规范，请根据规范上传图片 ");
// } // return;
let _img = new FileReader(); // }
_img.readAsDataURL(file); let _img = new FileReader();
_img.onload = function (theFile) { _img.readAsDataURL(file);
let image = new Image() _img.onload = function (theFile) {
image.src = theFile.target.result let image = new Image();
vm.slide2.oriUrl = theFile.target.result; image.src = theFile.target.result;
image.onload = function () { vm.slide2.oriUrl = theFile.target.result;
let _this = this; image.onload = function () {
// if (_this.width != fileLimit.width || _this.height != fileLimit.height) { let _this = this;
if (_this.width < fileLimit.width || _this.height < fileLimit.height) { // if (_this.width != fileLimit.width || _this.height != fileLimit.height) {
vm.$message.error("图片尺寸不符合规范，请根据规范上传图片"); if (
return; _this.width < fileLimit.width ||
} else if(_this.width > fileLimit.width || _this.height > fileLimit.height){ _this.height < fileLimit.height
vm.showCropper = true; ) {
vm.currentOption.cvWidth = _this.width; vm.$message.error("图片尺寸不符合规范，请根据规范上传图片");
vm.currentOption.cvHeight = _this.height; return;
return; } else if (
} else { _this.width > fileLimit.width ||
openLoading(vm); _this.height > fileLimit.height
doUpload(vm, file, getFilePath(file, null), "preview4", "progress1", 1).then(function (path) { ) {
closeLoading(vm); vm.showCropper = true;
if (fileLimit.show == "uploadImgMessage1") { vm.currentOption.cvWidth = _this.width;
vm.uploadImgMessage1 = false; vm.currentOption.cvHeight = _this.height;
} return;
vm.formData[fileLimit.key] = path.fullPath; } else {
vm.formData[fileLimit.more] = { openLoading(vm);
attachmentName: path.storeName, doUpload(
attachmentExt: path.ext, vm,
attachmentSize: path.size file,
}; getFilePath(file, null),
vm.$message.success("上传成功"); "preview4",
}); "progress1",
} 1
}; ).then(function (path) {
closeLoading(vm);
if (fileLimit.show == "uploadImgMessage1") {
vm.uploadImgMessage1 = false;
}
vm.formData[fileLimit.key] = path.fullPath;
vm.formData[fileLimit.more] = {
attachmentName: path.storeName,
attachmentExt: path.ext,
attachmentSize: path.size,
};
vm.$message.success("上传成功");
});
}
}; };
return isJPG && isLt2M; };
}, return isJPG && isLt2M;
//删除图片 },
deleteImg(type) { //删除图片
vm.formData[type] = ""; deleteImg(type) {
const testMouse = new Map() vm.formData[type] = "";
.set('storeLogo','imgMouseOver1') const testMouse = new Map()
.set('imgUrlP1','imgMouseOverP1') .set("storeLogo", "imgMouseOver1")
.set('imgUrlP2','imgMouseOverP2') .set("imgUrlP1", "imgMouseOverP1")
.set('imgUrlP3','imgMouseOverP3') .set("imgUrlP2", "imgMouseOverP2")
.set('imgUrlC1','imgMouseOverC1') .set("imgUrlP3", "imgMouseOverP3")
.set('imgUrlC2','imgMouseOverC2') .set("imgUrlC1", "imgMouseOverC1")
.set('imgUrlC3','imgMouseOverC3'); .set("imgUrlC2", "imgMouseOverC2")
.set("imgUrlC3", "imgMouseOverC3");
function matchType(type) { function matchType(type) {
return testMouse.get(type) || '' return testMouse.get(type) || "";
} }
let mark = matchType(type); let mark = matchType(type);
vm[mark] = false; vm[mark] = false;
/* if (type == 'storeLogo') { /* if (type == 'storeLogo') {
vm.imgMouseOver1 = false; vm.imgMouseOver1 = false;
}else if (type == 'imgUrlP1') { }else if (type == 'imgUrlP1') {
vm.imgMouseOverP1 = false; vm.imgMouseOverP1 = false;
...@@ -1088,184 +1243,191 @@ ...@@ -1088,184 +1243,191 @@
}else if (type == 'imgUrlP3') { }else if (type == 'imgUrlP3') {
vm.imgMouseOverP3 = false; vm.imgMouseOverP3 = false;
}*/ }*/
},
// 获取裁剪的图片数据
getCropImg(argument) {
this.showCropper = false;
this.cropData = argument[1]
vm.doUploadQiNiu(argument[2])
argument[3] && argument[3].destroy();
// vm.slide2.oriUrl = "";
},
// 上传七牛
doUploadQiNiu(file){
doUpload(this,file, getFilePath(file,null), 'preview4', 'uploadProgress1', '').then(function (path) {
vm.formData[vm.currentOption.currentPic] = path.fullPath;
vm.$message.success('上传成功');
});
},
//新增管理员
addItem(index) {
if(this.formData.adminList != null && this.formData.adminList.length >= 5){
this.$message.warning("只可新增5位管理员！");
} else {
let item = {
adminName: '',
adminMobile: '',
id: null,
};
this.formData.adminList.push(item);
}
},
//删除管理员
deleteItem(index) {
if ((this.formData.adminList.length == 1) && (index == 0)) {
this.$message.warning("最少需要1位管理员哦！");
return;
}
this.formData.adminList.splice(index, 1);
},
}, },
} // 获取裁剪的图片数据
getCropImg(argument) {
this.showCropper = false;
this.cropData = argument[1];
vm.doUploadQiNiu(argument[2]);
argument[3] && argument[3].destroy();
// vm.slide2.oriUrl = "";
},
// 上传七牛
doUploadQiNiu(file) {
doUpload(
this,
file,
getFilePath(file, null),
"preview4",
"uploadProgress1",
""
).then(function (path) {
vm.formData[vm.currentOption.currentPic] = path.fullPath;
vm.$message.success("上传成功");
});
},
//新增管理员
addItem(index) {
if (
this.formData.adminList != null &&
this.formData.adminList.length >= 5
) {
this.$message.warning("只可新增5位管理员！");
} else {
let item = {
adminName: "",
adminMobile: "",
id: null,
};
this.formData.adminList.push(item);
}
},
//删除管理员
deleteItem(index) {
if (this.formData.adminList.length == 1 && index == 0) {
this.$message.warning("最少需要1位管理员哦！");
return;
}
this.formData.adminList.splice(index, 1);
},
},
};
</script> </script>
<style lang="scss"> <style lang="scss">
.create-shop-wrapper{ .create-shop-wrapper {
.create-shop-content{ .create-shop-content {
background: #fff; background: #fff;
padding: 10px; padding: 10px;
.step-content { .step-content {
overflow: hidden; overflow: hidden;
height: 60px; height: 60px;
padding: 10px 10px 50px ; padding: 10px 10px 50px;
border-bottom: 1px solid #efefef; border-bottom: 1px solid #efefef;
.title{ .title {
font-size: 13px; font-size: 13px;
color: #449284; color: #449284;
}
} }
} }
.el-button--text{ }
color: #449284; .el-button--text {
font-size: 14px; color: #449284;
&::after{ font-size: 14px;
content: ''; &::after {
content: "";
position: relative;
height: 14px;
/*border-right: 1px solid #EBEEF5;*/
border-right: 1px solid #aaaaaa;
padding-right: 10px;
}
&:last-of-type {
&::after {
content: "";
position: relative; position: relative;
width: 1px;
height: 14px; height: 14px;
/*border-right: 1px solid #EBEEF5;*/ border-right: none;
border-right: 1px solid #aaaaaa;
padding-right: 10px;
}
&:last-of-type{
&::after{
content: '';
position: relative;
width: 1px;
height: 14px;
border-right: none;
}
} }
} }
} }
.required-label .el-form-item__label::before { }
content: "*"; .required-label .el-form-item__label::before {
color: #f56c6c; content: "*";
margin-right: 4px; color: #f56c6c;
} margin-right: 4px;
.basic-item-icon { }
position: relative; .basic-item-icon {
position: relative;
.require {
position: absolute;
left: 67px;
top: 11px;
color: #f56c6c;
}
.upload-message {
position: absolute;
left: 160px;
top: 105px;
font-size: 12px;
color: #f56c6c;
}
.require {
position: absolute;
left: 67px;
top: 11px;
color: #f56c6c;
} }
.word-num { .upload-message {
position: absolute;
left: 160px;
top: 105px;
font-size: 12px; font-size: 12px;
color: #999; color: #f56c6c;
padding-top: 5px;
} }
}
.line { .word-num {
margin-left: 10px; font-size: 12px;
width: 20px; color: #999;
} padding-top: 5px;
}
.flex-upload{ .line {
width: 120px; margin-left: 10px;
text-align: center; width: 20px;
.tips{ }
font-size: 13px;
color: #8C8C8C;
line-height: 24px;
}
}
.bg-uploader {
position: relative;
/*margin-right: 20px;*/
.bg-img {
float: left;
width: 84px;
height: 100px;
}
.img-delete {
position: absolute;
left: 0px;
top: 0px;
width: 84px;
height: 100px;
background: #000;
opacity: 0.7;
z-index: 999;
&.add-left-18{
left: 18px;
}
i {
color: #fff;
margin-top: 39px;
margin-left: 0px;
}
}
.limit-text {
float: left;
margin-left: 10px;
margin-top: -10px;
p { .flex-upload {
font-size: 12px; width: 120px;
color: #999; text-align: center;
text-align: left; .tips {
} font-size: 13px;
} color: #8c8c8c;
line-height: 24px;
}
}
.bg-uploader {
position: relative;
/*margin-right: 20px;*/
.bg-img {
float: left;
width: 84px;
height: 100px;
} }
.el-upload__tip { .img-delete {
position: absolute; position: absolute;
top: -6px; left: 0px;
left: 130px; top: 0px;
width: 84px;
height: 100px;
background: #000;
opacity: 0.7;
z-index: 999;
&.add-left-18 {
left: 18px;
}
i {
color: #fff;
margin-top: 39px;
margin-left: 0px;
}
} }
.span-mt-10{ .limit-text {
.edit-img { float: left;
width: 20px; margin-left: 10px;
margin-top: 10px; margin-top: -10px;
p {
font-size: 12px;
color: #999;
text-align: left;
} }
} }
.p-tips{ }
font-size: 13px; .el-upload__tip {
color: #8C8C8C; position: absolute;
line-height: 26px; top: -6px;
margin-bottom: 15px; left: 130px;
}
.span-mt-10 {
.edit-img {
width: 20px;
margin-top: 10px;
} }
}
.p-tips {
font-size: 13px;
color: #8c8c8c;
line-height: 26px;
margin-bottom: 15px;
}
</style> </style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或