731 lines
21 KiB
Vue
731 lines
21 KiB
Vue
<template>
|
||
<view class="shop-2-container">
|
||
<view class="shop-2-content">
|
||
<u-subsection
|
||
class="subsection"
|
||
:list="list"
|
||
:current="active"
|
||
@change="handleSubsection"
|
||
></u-subsection>
|
||
<view
|
||
class="up-block up-block-2"
|
||
v-show="active == 0"
|
||
style="margin-top: 0"
|
||
>
|
||
<u-form :model="form" class="form" ref="uForm" label-width="100">
|
||
<u-form-item
|
||
label="许可证类型"
|
||
required
|
||
prop="license_type"
|
||
@click="showPicker = true"
|
||
>
|
||
<u-input
|
||
style="pointer-events: none"
|
||
class="form-input"
|
||
v-model="form.license_type"
|
||
placeholder="请选择许可证类型"
|
||
readonly
|
||
/>
|
||
<u-icon
|
||
style="display: inline-block; margin-left: 8rpx"
|
||
name="arrow-down"
|
||
size="12"
|
||
color="#aaaaaa"
|
||
></u-icon>
|
||
</u-form-item>
|
||
<u-form-item label="许可证编号" prop="license_number" required>
|
||
<u-input
|
||
class="form-input"
|
||
v-model="form.license_number"
|
||
placeholder="请输入许可证编号"
|
||
/>
|
||
</u-form-item>
|
||
<u-form-item label="营业执照编号" prop="biz_license_number" required>
|
||
<u-input
|
||
class="form-input"
|
||
v-model="form.biz_license_number"
|
||
placeholder="请输入营业执照编号"
|
||
/>
|
||
</u-form-item>
|
||
<u-form-item
|
||
label="营业执照公司名或真实的公司名"
|
||
prop="biz_license_company"
|
||
required
|
||
>
|
||
<u-input
|
||
class="form-input"
|
||
v-model="form.biz_license_company"
|
||
placeholder="请输入营业执照公司名或真实的公司名"
|
||
/>
|
||
</u-form-item>
|
||
<u-form-item label="法人姓名" prop="legal_person_name" required>
|
||
<u-input
|
||
class="form-input"
|
||
v-model="form.legal_person_name"
|
||
placeholder="请输入法人姓名"
|
||
/>
|
||
</u-form-item>
|
||
<u-form-item label="法人手机号" prop="legal_person_mobile" required>
|
||
<u-input
|
||
class="form-input"
|
||
v-model="form.legal_person_mobile"
|
||
maxlength="11"
|
||
placeholder="请输入法人手机号"
|
||
/>
|
||
</u-form-item>
|
||
<u-form-item
|
||
label="法人身份证号码"
|
||
prop="legal_person_id_number"
|
||
required
|
||
>
|
||
<u-input
|
||
class="form-input"
|
||
maxlength="18"
|
||
v-model="form.legal_person_id_number"
|
||
placeholder="请输入法人证号码"
|
||
/>
|
||
</u-form-item>
|
||
</u-form>
|
||
</view>
|
||
<view
|
||
class="up-block up-block-2"
|
||
v-show="active == 1"
|
||
style="margin-top: 0"
|
||
>
|
||
<u-form :model="form2" class="form" ref="uForm2" label-width="100">
|
||
<u-form-item label="身份证号码" prop="individual_id_number" required>
|
||
<u-input
|
||
class="form-input"
|
||
maxlength="18"
|
||
v-model="form2.individual_id_number"
|
||
placeholder="请输入身份证号码"
|
||
/>
|
||
</u-form-item>
|
||
</u-form>
|
||
</view>
|
||
|
||
<view class="up-block" v-if="active == 0">
|
||
<view class="up-title"> 营业执照 点击上传 </view>
|
||
<u-upload
|
||
:class="fileList.length == 0 ? 'shop2-2-upload' : ''"
|
||
class="shop2-2-upload"
|
||
@afterRead="afterRead($event, 'businessLicense')"
|
||
@delete="deletePic($event, 'businessLicense')"
|
||
accept="image"
|
||
uploadIcon=""
|
||
:fileList="fileList"
|
||
:max-count="1"
|
||
width="125"
|
||
height="88"
|
||
></u-upload>
|
||
</view>
|
||
<view class="up-block up-block-2" v-if="active == 0">
|
||
<view class="up-title">
|
||
许可证(最大上传{{ fileList2.length }}/5)
|
||
<u-icon
|
||
style="display: inline-block; margin: 0 8rpx"
|
||
@click="handlePopup"
|
||
name="question-circle"
|
||
size="12"
|
||
color="aaaaaa"
|
||
>
|
||
</u-icon>
|
||
点击上传
|
||
</view>
|
||
<u-upload
|
||
:class="fileList2.length == 0 ? 'shop2-3-upload' : ''"
|
||
@afterRead="afterRead($event, 'licenseNumber')"
|
||
@delete="deletePic($event, 'licenseNumber')"
|
||
accept="image"
|
||
:uploadIcon="fileList2.length == 0 ? '' : 'camera-fill'"
|
||
:fileList="fileList2"
|
||
:max-count="5"
|
||
width="125"
|
||
height="88"
|
||
></u-upload>
|
||
</view>
|
||
<view class="up-block up-block-3" v-if="active == 0">
|
||
<view class="up-title">
|
||
法人身份证正反面（{{ fileList3.length + fileList4.length }} /2）
|
||
</view>
|
||
<view class="up-block-3-content">
|
||
<u-upload
|
||
:class="fileList3.length == 0 ? 'shop2-4-upload' : ''"
|
||
@afterRead="afterRead($event, 'idFront')"
|
||
@delete="deletePic($event, 'idFront')"
|
||
accept="image"
|
||
:fileList="fileList3"
|
||
:max-count="1"
|
||
width="180"
|
||
height="110"
|
||
uploadIcon=""
|
||
></u-upload>
|
||
<u-upload
|
||
:class="fileList4.length == 0 ? 'shop2-5-upload' : ''"
|
||
@afterRead="afterRead($event, 'idReverse')"
|
||
@delete="deletePic($event, 'idReverse')"
|
||
accept="image"
|
||
:fileList="fileList4"
|
||
:max-count="1"
|
||
width="180"
|
||
height="110"
|
||
uploadIcon=""
|
||
></u-upload>
|
||
</view>
|
||
</view>
|
||
<!--个人-->
|
||
<view class="up-block up-block-3" v-if="active == 1">
|
||
<view class="up-title">
|
||
法人身份证正反面（{{ fileList5.length + fileList6.length }} /2）
|
||
</view>
|
||
<view class="up-block-3-content">
|
||
<u-upload
|
||
:class="fileList5.length == 0 ? 'shop2-4-upload' : ''"
|
||
@afterRead="afterRead($event, 'personIdFront')"
|
||
@delete="deletePic($event, 'personIdFront')"
|
||
accept="image"
|
||
:fileList="fileList5"
|
||
:max-count="1"
|
||
width="180"
|
||
height="110"
|
||
:upload-text="''"
|
||
uploadIcon=""
|
||
></u-upload>
|
||
<u-upload
|
||
:class="fileList6.length == 0 ? 'shop2-5-upload' : ''"
|
||
@afterRead="afterRead($event, 'personIdReverse')"
|
||
@delete="deletePic($event, 'personIdReverse')"
|
||
accept="image"
|
||
:fileList="fileList6"
|
||
:max-count="1"
|
||
width="180"
|
||
height="110"
|
||
:upload-text="''"
|
||
uploadIcon=""
|
||
></u-upload>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="btn-content">
|
||
<u-button class="btn-next" @click="handleNext">下一步</u-button>
|
||
</view>
|
||
<u-popup
|
||
class="shop2-popup"
|
||
:mask="true"
|
||
@close="closePopup"
|
||
:show="showPopup"
|
||
:closeable="true"
|
||
mode="bottom"
|
||
:mask-close-able="true"
|
||
:safe-area-inset-bottom="true"
|
||
>
|
||
<view class="popup-content">
|
||
<view class="popup-title">可上传证件类型</view>
|
||
<view class="popup-tips"
|
||
>请根据您的主营品类上传真实有效的许可证，能够提高入驻通过的效率。目前支持的许可证如下：</view
|
||
>
|
||
<view class="popuo-prove-item">
|
||
<view class="item-title">许可证</view>
|
||
<view class="item-content">
|
||
《食品经营许可证》丶《餐饮服务许可证》丶《食品流通许可证》丶《药品经营许可证》丶《医疗器械经营许可证》丶《互联网药品信息服务资格证书》
|
||
</view>
|
||
</view>
|
||
<view class="popuo-prove-item">
|
||
<view class="item-title">特许证件</view>
|
||
<view class="item-content">
|
||
《第二类医疗器械经营备案凭证》丶《上海便民饮食店临时备案公示卡》丶《兽药经营许可证》丶《动物诊疗许可证》丶《食品生产经营登记证》
|
||
</view>
|
||
</view>
|
||
<view class="popuo-prove-item">
|
||
<view class="item-title">其他证件</view>
|
||
<view class="item-content">
|
||
支持各种小证,因各地监管规则不一,请联系客服获取其他小证支持情况的详细。
|
||
</view>
|
||
</view>
|
||
<u-button class="btn-queren" @click="showPopup = false"
|
||
>我知道了</u-button
|
||
>
|
||
</view>
|
||
</u-popup>
|
||
<u-picker
|
||
:show="showPicker"
|
||
:columns="columns"
|
||
:safe-area-inset-bottom="true"
|
||
:default-selector="[0]"
|
||
:keyName="'name'"
|
||
@cancel="handleCancel"
|
||
@confirm="handleConfirm"
|
||
></u-picker>
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { UploadFilePromise } from "../../api/upload";
|
||
export default {
|
||
data() {
|
||
return {
|
||
active: 0,
|
||
showPopup: false,
|
||
showPicker: false,
|
||
list: [
|
||
{
|
||
name: "企业",
|
||
},
|
||
{
|
||
name: "个人",
|
||
},
|
||
],
|
||
form: {
|
||
license_type: "", // 许可证类型
|
||
license_number: "", // 许可证编号
|
||
license_image: "", // 许可证路径
|
||
biz_license_number: "", //营业执照编号
|
||
biz_license_company: "", // 公司真实名字
|
||
biz_license_image: "", // 营业执照路径
|
||
legal_person_name: "", //法人姓名
|
||
legal_person_mobile: "", //法人手机号
|
||
legal_person_id_number: "", //法人身份证号
|
||
legal_person_id_images: "", //身份证图片正面路径
|
||
legal_person_id_images2: "", // 身份证图片反面路径
|
||
},
|
||
form2: {
|
||
individual_id_number: "",
|
||
individual_id_images: "",
|
||
individual_id_images2: "",
|
||
},
|
||
action: "",
|
||
fileList: [],
|
||
fileList2: [],
|
||
fileList3: [],
|
||
fileList4: [],
|
||
fileList5: [], //个人身份证正面
|
||
fileList6: [], //个人身份证反面
|
||
columns: [
|
||
[
|
||
{
|
||
id: 1,
|
||
name: "许可证",
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "特许证件",
|
||
},
|
||
{
|
||
id: 3,
|
||
name: "其他证件",
|
||
},
|
||
],
|
||
],
|
||
rules: {
|
||
entity_type: {
|
||
required: true,
|
||
trigger: ["blur"],
|
||
message: "请选择您的许可证类型",
|
||
},
|
||
license_number: {
|
||
required: true,
|
||
message: "请输入许可证编号",
|
||
trigger: ["change", "blur"],
|
||
},
|
||
biz_license_number: {
|
||
required: true,
|
||
message: "请输入营业执照编号",
|
||
trigger: ["change", "blur"],
|
||
},
|
||
biz_license_company: {
|
||
required: true,
|
||
message: "请输入营业执照公司名或真实的公司名",
|
||
trigger: ["blur"],
|
||
},
|
||
legal_person_name: {
|
||
required: true,
|
||
message: "请输入法人姓名",
|
||
trigger: ["change", "blur"],
|
||
},
|
||
legal_person_mobile: [
|
||
{
|
||
required: true,
|
||
message: "请输入法人手机号",
|
||
trigger: ["change", "blur"],
|
||
},
|
||
{
|
||
validator: (rule, value, callback) => {
|
||
// 上面有说，返回true表示校验通过，返回false表示不通过
|
||
// uni.$u.test.mobile()就是返回true或者false的
|
||
return uni.$u.test.mobile(value);
|
||
},
|
||
message: "手机号码不正确",
|
||
// 触发器可以同时用blur和change
|
||
trigger: ["blur"],
|
||
},
|
||
],
|
||
legal_person_id_number: [
|
||
{
|
||
required: true,
|
||
message: "请输入法人身份证号",
|
||
trigger: ["change", "blur"],
|
||
},
|
||
{
|
||
validator: (rule, value, callback) => {
|
||
// 上面有说，返回true表示校验通过，返回false表示不通过
|
||
// uni.$u.test.mobile()就是返回true或者false的
|
||
return uni.$u.test.idCard(value);
|
||
},
|
||
message: "身份证号不正确",
|
||
// 触发器可以同时用blur和change
|
||
trigger: ["blur"],
|
||
},
|
||
],
|
||
},
|
||
rules2: {
|
||
individual_id_number: [
|
||
{
|
||
required: true,
|
||
message: "请输入身份证号",
|
||
trigger: ["change", "blur"],
|
||
},
|
||
{
|
||
validator: (rule, value, callback) => {
|
||
// 上面有说，返回true表示校验通过，返回false表示不通过
|
||
// uni.$u.test.mobile()就是返回true或者false的
|
||
return uni.$u.test.idCard(value);
|
||
},
|
||
message: "身份证号不正确",
|
||
// 触发器可以同时用blur和change
|
||
trigger: ["blur"],
|
||
},
|
||
],
|
||
},
|
||
};
|
||
},
|
||
onReady() {
|
||
this.$refs["uForm"].setRules(this.rules);
|
||
this.$refs["uForm2"].setRules(this.rules2);
|
||
},
|
||
methods: {
|
||
//营业执照
|
||
async afterRead(e, type) {
|
||
const item = e.file;
|
||
const imgUrl = item.url;
|
||
|
||
const group = {
|
||
url: imgUrl,
|
||
};
|
||
|
||
switch (type) {
|
||
case "businessLicense":
|
||
this.fileList.push(group);
|
||
break;
|
||
case "licenseNumber":
|
||
this.fileList2.push(group);
|
||
break;
|
||
case "idFront":
|
||
this.fileList3.push(group);
|
||
break;
|
||
case "idReverse":
|
||
this.fileList4.push(group);
|
||
break;
|
||
case "personIdFront":
|
||
this.fileList5.push(group);
|
||
break;
|
||
case "personIdReverse":
|
||
this.fileList6.push(group);
|
||
break;
|
||
}
|
||
|
||
let res = await UploadFilePromise(imgUrl);
|
||
if (res && res.status == 200) {
|
||
switch (type) {
|
||
case "businessLicense":
|
||
this.form.biz_license_image = res.data.url;
|
||
break;
|
||
case "licenseNumber":
|
||
if (this.form.license_image == "") {
|
||
this.form.license_image = String(res.data.url);
|
||
} else {
|
||
this.form.license_image += "," + String(res.data.url);
|
||
}
|
||
break;
|
||
case "idFront":
|
||
this.form.legal_person_id_images = res.data.url;
|
||
break;
|
||
case "idReverse":
|
||
this.form.legal_person_id_images2 = res.data.url;
|
||
break;
|
||
case "personIdFront":
|
||
this.form2.individual_id_images = res.data.url;
|
||
break;
|
||
case "personIdReverse":
|
||
this.form2.individual_id_images2 = res.data.url;
|
||
break;
|
||
}
|
||
}
|
||
},
|
||
deletePic(e, type) {
|
||
switch (type) {
|
||
case "businessLicense":
|
||
this.fileList.splice(0, 1);
|
||
break;
|
||
case "licenseNumber":
|
||
this.fileList2.splice(e.index, 1);
|
||
let arr = this.form.license_image.split(",");
|
||
arr.splice(e.index, 1);
|
||
this.form.license_image = arr.join(",");
|
||
break;
|
||
case "idFront":
|
||
this.fileList3.splice(0, 1);
|
||
break;
|
||
case "idReverse":
|
||
this.fileList4.splice(0, 1);
|
||
break;
|
||
case "personIdFront":
|
||
this.fileList5.splice(0, 1);
|
||
break;
|
||
case "personIdReverse":
|
||
this.fileList6.splice(0, 1);
|
||
break;
|
||
}
|
||
},
|
||
handleSubsection(e) {
|
||
this.active = e;
|
||
this.fileList = [];
|
||
this.fileList2 = [];
|
||
this.fileList3 = [];
|
||
this.fileList4 = [];
|
||
this.fileList5 = [];
|
||
this.fileList6 = [];
|
||
},
|
||
handlePopup() {
|
||
this.showPopup = true;
|
||
},
|
||
closePopup() {
|
||
this.showPopup = false;
|
||
},
|
||
handleNext() {
|
||
let auditItem = uni.getStorageSync("auditItem");
|
||
|
||
if (this.active == 0) {
|
||
this.$refs.uForm.validate().then((valid) => {
|
||
if (!this.form.biz_license_image) {
|
||
this.$refs.uToast.show({
|
||
message: "请上营业执照片",
|
||
type: "error",
|
||
duration: 1000,
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (!this.form.license_image) {
|
||
this.$refs.uToast.show({
|
||
message: "请上许可证照片",
|
||
type: "error",
|
||
duration: 1000,
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (!this.form.legal_person_id_images) {
|
||
this.$refs.uToast.show({
|
||
message: "请上身份证图片正面照片",
|
||
type: "error",
|
||
duration: 1000,
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (!this.form.legal_person_id_images2) {
|
||
this.$refs.uToast.show({
|
||
message: "请上身份证图片反面照片",
|
||
type: "error",
|
||
duration: 1000,
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (valid) {
|
||
auditItem = {
|
||
...auditItem,
|
||
...this.form,
|
||
};
|
||
|
||
auditItem.entity_type = this.active + 1;
|
||
auditItem.license_type = this.licenseType.id;
|
||
// auditItem.license_image = JSON.stringify(this.fileList2.join(","));
|
||
|
||
uni.setStorageSync("auditItem", auditItem);
|
||
|
||
uni.navigateTo({
|
||
url: "/pages/audit/shop3",
|
||
});
|
||
}
|
||
});
|
||
} else {
|
||
this.$refs.uForm2.validate().then((valid) => {
|
||
if (!this.form2.individual_id_images) {
|
||
this.$refs.uToast.show({
|
||
message: "请上身份证图片反面照片",
|
||
type: "error",
|
||
duration: 1000,
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (!this.form2.individual_id_images2) {
|
||
this.$refs.uToast.show({
|
||
message: "请上身份证图片反面照片",
|
||
type: "error",
|
||
duration: 1000,
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (valid) {
|
||
auditItem = {
|
||
...auditItem,
|
||
...this.form2,
|
||
};
|
||
|
||
auditItem.entity_type = this.active + 1;
|
||
|
||
uni.setStorageSync("auditItem", auditItem);
|
||
|
||
uni.navigateTo({
|
||
url: "/pages/audit/shop3",
|
||
});
|
||
}
|
||
});
|
||
}
|
||
},
|
||
handleCancel() {
|
||
this.showPicker = false;
|
||
},
|
||
handleConfirm(e) {
|
||
this.form.license_type = e.value[0].name;
|
||
this.licenseType = e.value[0];
|
||
|
||
this.showPicker = false;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.shop-2-container {
|
||
background: #f2f2f2;
|
||
// height: 100vh;
|
||
|
||
.subsection {
|
||
height: 80rpx;
|
||
}
|
||
|
||
.up-block {
|
||
background: #fff;
|
||
padding: 24rpx;
|
||
|
||
.up-title {
|
||
font-weight: bold;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
}
|
||
|
||
/deep/.shop2-2-upload {
|
||
.u-upload__button {
|
||
// background: url("../../static/shenhe-bg1.png");
|
||
background-image: url("../../static/business-license-bg.png");
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
/deep/.shop2-3-upload {
|
||
.u-upload__button {
|
||
// background: url("../../static/shenhe-bg1.png");
|
||
background-image: url("../../static/permit-bg.png");
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
/deep/.shop2-4-upload {
|
||
.u-upload__button {
|
||
// background: url("../../static/shenhe-bg1.png");
|
||
background-image: url("../../static/id-bg-1.png");
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
/deep/.shop2-5-upload {
|
||
.u-upload__button {
|
||
// background: url("../../static/shenhe-bg1.png");
|
||
background-image: url("../../static/id-bg-2.png");
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
.up-block-2 {
|
||
margin: 20rpx 0;
|
||
}
|
||
|
||
.up-block-3-content {
|
||
display: flex;
|
||
}
|
||
|
||
.shop-2-content {
|
||
z-index: 1;
|
||
}
|
||
|
||
.shop2-popup {
|
||
.popup-content {
|
||
padding: 0 24rpx;
|
||
height: 540px;
|
||
|
||
.popup-title {
|
||
font-weight: bold;
|
||
text-align: center;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.popup-tips {
|
||
margin: 24rpx 0;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.popuo-prove-item {
|
||
margin: 48rpx 0;
|
||
padding: 24rpx;
|
||
border-radius: 24rpx;
|
||
border: 1px solid #ccc;
|
||
|
||
.item-title {
|
||
margin-bottom: 16rpx;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.item-content {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn-queren {
|
||
background: #4b71ff;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.btn-content {
|
||
// position: fixed;
|
||
bottom: 40rpx;
|
||
width: 94%;
|
||
padding: 48rpx 24rpx;
|
||
}
|
||
|
||
.btn-next {
|
||
border-radius: 16rpx;
|
||
background: #4b71ff;
|
||
color: #fff;
|
||
}
|
||
}
|
||
</style> |