You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
550 lines
13 KiB
550 lines
13 KiB
<template>
|
|
<page-meta :page-style="themeColor"></page-meta>
|
|
<div>
|
|
<div class="view">
|
|
<div class="item">
|
|
<div class="title">
|
|
店铺名称
|
|
<span class="star">*</span>
|
|
</div>
|
|
<div class="input">
|
|
<u-input placeholder="请填写公司或店铺名称" v-model="form.title"></u-input>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="item">
|
|
<div class="title">
|
|
店铺编号<span class="star">*</span>
|
|
</div>
|
|
<div class="input">
|
|
<u-input placeholder="请填写店铺编号" v-model="form.store_code"></u-input>
|
|
</div>
|
|
</div> -->
|
|
|
|
<div class="item">
|
|
<div class="title">
|
|
店铺类型
|
|
<!-- <span class="star">*</span> -->
|
|
</div>
|
|
<div class="input">
|
|
<div class="picker">
|
|
<div class="select" @click="isShowStoreType()">
|
|
<div class="left" :style="{ color: form.store_type ? '#222' : '' }">
|
|
{{ form.store_type || '请填写店铺类型' }}
|
|
</div>
|
|
<div class="right">
|
|
<u-icon name="arrow-right" color="#c6c6c6"></u-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<div class="title">
|
|
联系人
|
|
<span class="star">*</span>
|
|
</div>
|
|
<div class="input">
|
|
<u-input placeholder="请填写联系人" v-model="form.contacts"></u-input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<div class="title">
|
|
电话号码
|
|
<span class="star">*</span>
|
|
</div>
|
|
<div class="input">
|
|
<u-input placeholder="请填写电话号码" type="number" v-model="form.phone"></u-input>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="title">电子邮箱</div>
|
|
<div class="input">
|
|
<u-input placeholder="请填写电子邮箱" v-model="form.email"></u-input>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="title">联系地址</div>
|
|
<div class="input">
|
|
<u-input placeholder="请填写联系地址" v-model="form.address"></u-input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<div class="title">
|
|
所属地
|
|
<span class="star">*</span>
|
|
</div>
|
|
|
|
<pick-regions :default-regions="defaultRegions" @getRegions="handleGetRegions">
|
|
<div class="picker">
|
|
<div class="select">
|
|
<div class="left" :style="{ color: addressName ? '#222' : '' }">
|
|
{{ addressName || '请选择所属地' }}
|
|
</div>
|
|
|
|
<div class="right">
|
|
<u-icon name="arrow-right" color="#c6c6c6"></u-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</pick-regions>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<div class="title">
|
|
营业资质或医疗机构许可证
|
|
<span class="star">*</span>
|
|
<div class="sub_title">请上传营业执照</div>
|
|
</div>
|
|
<div class="upload" @click="upload('license')">
|
|
<div class="box" v-if="!form.license">
|
|
<image :src="$util.img('/upload/weapp/user/jia1.png')" mode=""
|
|
style="width: 48rpx; height: 48rpx;"></image>
|
|
<div class="desc">上传图片</div>
|
|
<div class="text">文件大小不超过10M，支持JPG\PNG\JPEG格式</div>
|
|
</div>
|
|
<image class="cover" :src="$util.img(form.license)" mode="aspectFill"
|
|
style="width: 100%; height: 100%;"></image>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<div class="title">
|
|
药品经营许可证
|
|
<span class="star">*</span>
|
|
<div class="sub_title">请上传药品经营许可证</div>
|
|
</div>
|
|
<div class="upload" @click="upload('drugs_license')">
|
|
<div class="box" v-if="!form.drugs_license">
|
|
<image :src="$util.img('/upload/weapp/user/jia1.png')" mode=""
|
|
style="width: 48rpx; height: 48rpx;"></image>
|
|
<div class="desc">上传图片</div>
|
|
<div class="text">文件大小不超过10M，支持JPG\PNG\JPEG格式</div>
|
|
</div>
|
|
<image class="cover" :src="$util.img(form.drugs_license)" mode="aspectFill"
|
|
style="width: 100%; height: 100%;"></image>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="item">
|
|
<div class="title">
|
|
法人身份证
|
|
<span class="star">*</span>
|
|
<div class="sub_title">请上传法人身份证</div>
|
|
</div>
|
|
<div class="upload" @click="upload('card_images')">
|
|
<div class="box" v-if="!form.card_images">
|
|
<image :src="$util.img('/upload/weapp/user/jia1.png')" mode=""
|
|
style="width: 48rpx; height: 48rpx;"></image>
|
|
<div class="desc">上传图片</div>
|
|
<div class="text">文件大小不超过10M，支持JPG\PNG\JPEG格式</div>
|
|
</div>
|
|
<image class="cover" :src="$util.img(form.card_images)" mode="aspectFill"
|
|
style="width: 100%; height: 100%;"></image>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="item">
|
|
<div class="title">
|
|
法人委托书
|
|
<div class="sub_title">请上传法人委托书</div>
|
|
</div>
|
|
<div class="upload" @click="upload('trust_book_images')">
|
|
<div class="box" v-if="!form.trust_book_images">
|
|
<image :src="$util.img('/upload/weapp/user/jia1.png')" mode=""
|
|
style="width: 48rpx; height: 48rpx;"></image>
|
|
<div class="desc">上传图片</div>
|
|
<div class="text">文件大小不超过10M，支持JPG\PNG\JPEG格式</div>
|
|
</div>
|
|
<image class="cover" :src="$util.img(form.trust_book_images)" mode="aspectFill"
|
|
style="width: 100%; height: 100%;"></image>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="item">
|
|
<div class="title">
|
|
发票信息
|
|
<div class="sub_title">请上传发票信息</div>
|
|
</div>
|
|
<div class="upload" @click="upload('invoice_images')">
|
|
<div v-if="form.invoice_images" @click.stop="form.invoice_images = ''">
|
|
<u-icon name="close-circle-fill" color="red" size="20"
|
|
style="position: absolute;right: -10rpx;top:-10rpx;z-index:1"></u-icon>
|
|
</div>
|
|
|
|
<div class="box" v-else>
|
|
<image :src="$util.img('/upload/weapp/user/jia1.png')" mode=""
|
|
style="width: 48rpx; height: 48rpx;"></image>
|
|
<div class="desc">上传图片</div>
|
|
<div class="text">文件大小不超过10M，支持JPG\PNG\JPEG格式</div>
|
|
</div>
|
|
<image class="cover" :src="$util.img(form.invoice_images)" mode="aspectFill"
|
|
style="width: 100%; height: 100%;"></image>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<div class="title">
|
|
店铺logo
|
|
<!-- <span class="star">*</span> -->
|
|
<div class="sub_title">请上传店铺logo</div>
|
|
</div>
|
|
<div class="upload" @click="upload('logo')">
|
|
<div v-if="form.logo" @click.stop="form.logo = ''">
|
|
<u-icon name="close-circle-fill" color="red" size="20"
|
|
style="position: absolute;right: -10rpx;top:-10rpx;z-index:1"></u-icon>
|
|
</div>
|
|
<div class="box" v-else>
|
|
<image :src="$util.img('/upload/weapp/user/jia1.png')" mode=""
|
|
style="width: 48rpx; height: 48rpx;"></image>
|
|
<div class="desc">上传图片</div>
|
|
<div class="text">文件大小不超过10M，支持JPG\PNG\JPEG格式</div>
|
|
</div>
|
|
<image class="cover" :src="$util.img(form.logo)" mode="aspectFill"
|
|
style="width: 100%; height: 100%;"></image>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="btnBox">
|
|
<div class="btn" @click="submit">确认</div>
|
|
</div>
|
|
<u-action-sheet :show="showStoreType" :actions="storeTypeList" @close="showStoreType = false"
|
|
@select="selectStoreType"></u-action-sheet>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import pickRegions from './components/pick-regions/pick-regions.vue';
|
|
export default {
|
|
components: {
|
|
pickRegions
|
|
},
|
|
data() {
|
|
return {
|
|
form: {
|
|
store_code: '',
|
|
store_type: '',
|
|
contacts: '',
|
|
phone: '',
|
|
email: '',
|
|
address: '',
|
|
province_id: '',
|
|
city_id: '',
|
|
district_id: '',
|
|
license: '',
|
|
drugs_license: '',
|
|
card_images: '',
|
|
trust_book_images: '',
|
|
invoice_images: '',
|
|
title: '',
|
|
logo: ''
|
|
|
|
},
|
|
defaultRegions: [],
|
|
addressName: '',
|
|
id: '',
|
|
showStoreType: false,
|
|
storeTypeList: []
|
|
};
|
|
},
|
|
onLoad(opt) {
|
|
if (opt.id) {
|
|
this.id = opt.id;
|
|
uni.setNavigationBarTitle({
|
|
title: '修改店铺'
|
|
});
|
|
this.getStoreInfo();
|
|
} else {
|
|
uni.setNavigationBarTitle({
|
|
title: '新增店铺'
|
|
});
|
|
}
|
|
this.getStoreTypeList();
|
|
},
|
|
methods: {
|
|
isShowStoreType() {
|
|
this.showStoreType = true;
|
|
},
|
|
selectStoreType(index) {
|
|
this.form.store_type = index.name;
|
|
console.log(this.form.store_type);
|
|
},
|
|
getStoreTypeList() {
|
|
this.storeTypeList = [];
|
|
this.$api.sendRequest({
|
|
url: '/api/member/getStoreTypeList',
|
|
success: res => {
|
|
res.data.forEach(item => {
|
|
this.storeTypeList.push({ name: item });
|
|
});
|
|
console.log(this.storeTypeList);
|
|
}
|
|
});
|
|
},
|
|
getStoreInfo(id) {
|
|
this.$api.sendRequest({
|
|
url: '/api/member/getStoreInfo',
|
|
data: {
|
|
id: this.id
|
|
},
|
|
success: ({ data }) => {
|
|
data.trust_book_images = data.trust_book_images[0];
|
|
data.card_images = data.card_images[0];
|
|
this.form = data;
|
|
this.addressName = data.province_name + data.city_name + data.district_name;
|
|
}
|
|
});
|
|
},
|
|
submit() {
|
|
let {
|
|
title,
|
|
contacts,
|
|
phone,
|
|
province_id,
|
|
license,
|
|
drugs_license,
|
|
card_images,
|
|
trust_book_images,
|
|
invoice_images,
|
|
logo
|
|
} = this.form;
|
|
console.log(this.form);
|
|
if (!title) {
|
|
this.$util.showToast({
|
|
title: '请填写公司或店铺名称'
|
|
});
|
|
return;
|
|
}
|
|
if (!contacts) {
|
|
this.$util.showToast({
|
|
title: '请填写联系人'
|
|
});
|
|
return;
|
|
}
|
|
if (!phone) {
|
|
this.$util.showToast({
|
|
title: '请填写电话号码'
|
|
});
|
|
return;
|
|
}
|
|
if (!province_id) {
|
|
this.$util.showToast({
|
|
title: '请选择所属地'
|
|
});
|
|
return;
|
|
}
|
|
if (!license) {
|
|
this.$util.showToast({
|
|
title: '请上传营业执照'
|
|
});
|
|
return;
|
|
}
|
|
if (!drugs_license) {
|
|
this.$util.showToast({
|
|
title: '请上传药品经营许可证'
|
|
});
|
|
return;
|
|
}
|
|
if (!card_images) {
|
|
this.$util.showToast({
|
|
title: '请上传法人身份证'
|
|
});
|
|
return;
|
|
}
|
|
// if (!trust_book_images.length) {
|
|
// this.$util.showToast({
|
|
// title: '请上传法人委托书'
|
|
// });
|
|
// return;
|
|
// }
|
|
|
|
let url = this.id ? '/api/member/editStore' : '/api/member/addStore';
|
|
this.$api.sendRequest({
|
|
url,
|
|
data: this.form,
|
|
success: res => {
|
|
this.$util.showToast({
|
|
title: res.message
|
|
});
|
|
setTimeout(() => {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
}, 800);
|
|
}
|
|
});
|
|
},
|
|
delImg(type, index) {
|
|
this.form[type].splice(index, 1);
|
|
},
|
|
// 获取选择的地区
|
|
handleGetRegions(regions) {
|
|
this.defaultRegions = regions;
|
|
this.addressName = '';
|
|
let arr = ['province_id', 'city_id', 'district_id'].map((v, i) => {
|
|
this.form[v] = regions[i].value;
|
|
this.addressName += regions[i].label;
|
|
});
|
|
},
|
|
// 上传图片
|
|
upload(type, size = 1) {
|
|
this.$util.upload(
|
|
size, {
|
|
path: 'storeRegister'
|
|
},
|
|
res => {
|
|
if (size == 1) {
|
|
this.form[type] = res[0];
|
|
} else {
|
|
this.form[type] = [...this.form[type], ...res];
|
|
}
|
|
}
|
|
);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.view {
|
|
background-color: #fff;
|
|
padding: 30rpx 30rpx 160rpx;
|
|
|
|
.cover {
|
|
border-radius: 16rpx;
|
|
width: 100%;
|
|
height: 332rpx;
|
|
margin: 24rpx 0;
|
|
display: block;
|
|
}
|
|
|
|
.item {
|
|
margin-bottom: 48rpx;
|
|
|
|
.title {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #222222;
|
|
|
|
.star {
|
|
margin-left: 8rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
color: #f33b50;
|
|
}
|
|
|
|
.sub_title {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
.input {
|
|
margin-top: 24rpx;
|
|
|
|
::v-deep {
|
|
.u-input--radius {
|
|
background: #f6f6f6;
|
|
border-radius: 16rpx;
|
|
border: 0;
|
|
padding: 20rpx 28rpx !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.picker {
|
|
.select {
|
|
margin-top: 24rpx;
|
|
height: 80rpx;
|
|
background: #f6f6f6;
|
|
border-radius: 16rpx;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.left {
|
|
margin-left: 28rpx;
|
|
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
color: #bfbfbf;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.right {
|
|
margin-right: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.upload {
|
|
margin-top: 24rpx;
|
|
height: 320rpx;
|
|
background: #f6f6f6;
|
|
border-radius: 16rpx;
|
|
position: relative;
|
|
|
|
.box {
|
|
text-align: center;
|
|
position: absolute;
|
|
transform: translate(-50%, -50%);
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 800rpx;
|
|
|
|
.desc {
|
|
margin-top: 16rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #bfbfbf;
|
|
}
|
|
|
|
.text {
|
|
margin-top: 8rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #bfbfbf;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.btnBox {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
position: fixed;
|
|
bottom: 0;
|
|
padding: 32rpx;
|
|
background-color: #fff;
|
|
|
|
// box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.3);
|
|
.btn {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
height: 80rpx;
|
|
background: $base-color;
|
|
border-radius: 16rpx;
|
|
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
</style>
|