Skip to content

P
pica.cloud.web-education-admin
提交 777354e3 编写于 作者: yafei.li's avatar yafei.li
浏览文件
操作

Merge branch 'test' into 'release' 

Test

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