merchapp/java-mall-app-shop-admin/pages/audit/shop2.vue
2025-05-10 12:24:07 +08:00

810 lines
23 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="shop-2-container">
<u-navbar
:autoBack="true"
:safeAreaInsetTop="true"
title="填写店铺信息第2步 / 共3步"
>
<template slot="right">
<view class="btn-login-out" @click="loginOut">退出登录</view>
</template>
</u-navbar>
<view class="shop-2-content">
<u-subsection
class="subsection"
:list="list"
:current="active"
@change="handleSubsection"
></u-subsection>
<view class="up-block" v-show="active == 0">
<view class="up-title">
营业执照 <text class="color_red">(必传项)</text>
</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-3" v-show="active == 0">
<view class="up-title">
法人身份证正反面({{ fileList3.length + fileList4.length }} /2
<text class="color_red">(必传项)</text>
</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-2" v-show="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-show="active == 1">
<view class="up-title">
法人身份证正反面({{ fileList5.length + fileList6.length }} /2<text
class="color_red"
>(必传项)</text
>
</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 class="up-block up-block-2" v-show="active == 0">
<u-form :model="form" class="form" ref="uForm" label-width="120">
<u-form-item
label="许可证类型"
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="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-item label="营业执照编号" prop="biz_license_number">
<u-input
class="form-input"
v-model="form.biz_license_number"
placeholder="请输入营业执照编号"
/>
</u-form-item>
<u-form-item label="许可证编号" prop="license_number">
<u-input
class="form-input"
v-model="form.license_number"
placeholder="请输入许可证编号"
/>
</u-form-item>
</u-form>
</view>
<view class="up-block up-block-2" v-show="active == 1">
<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>
<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 { mapActions } from "vuex";
import {
UploadFilePromise,
batchNoApi,
imgOcrResultApi,
} from "../../api/upload";
const orcImgTypeConf = {
FR_ID_CARD_FRONT: "FR_ID_CARD_FRONT",
FR_ID_CARD_BEHIND: "FR_ID_CARD_BEHIND",
ID_CARD_FRONT: "ID_CARD_FRONT",
ID_CARD_BEHIND: "ID_CARD_BEHIND",
BUSINESS_LICENCE: "BUSINESS_LICENCE",
BANK_CARD: "BANK_CARD",
};
export default {
data() {
return {
active: 0,
showPopup: false,
showPicker: false,
list: [
{
name: "企业",
},
{
name: "个人",
},
],
form: {
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: "请选择您的许可证类型",
},
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"],
},
],
orcTimeout: null,
},
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: {
getOcrText(filePath, file, type) {
return new Promise(async (resolve, reject) => {
const batchNoRes = await batchNoApi(filePath, file, type);
const batchNo = batchNoRes.batchNo;
const formData = new FormData();
let formDataStr = "";
formData.append("batchNo", batchNo);
formData.append("imgType", type);
clearTimeout(this.orcTimeout);
this.orcTimeout = setTimeout(async () => {
formData.forEach((value, key) => {
if (formDataStr !== "") {
formDataStr += "&";
}
formDataStr +=
encodeURIComponent(key) + "=" + encodeURIComponent(value);
});
const imgOcrRes = await imgOcrResultApi(formDataStr);
clearTimeout(this.orcTimeout);
resolve(imgOcrRes?.data);
}, 1000);
});
},
//营业执照
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;
}
}
switch (type) {
case "businessLicense":
var ocr = await this.getOcrText(
imgUrl,
item,
orcImgTypeConf.BUSINESS_LICENCE
);
this.form.biz_license_company = ocr.bizLicenseCompanyName;
this.form.legal_person_name = ocr.bizLicenseOwnerName;
console.log("BUSINESS_LICENCE", ocr);
break;
case "licenseNumber":
break;
case "idFront":
var ocr = await this.getOcrText(
imgUrl,
item,
orcImgTypeConf.ID_CARD_FRONT
);
this.form.legal_person_name = ocr.name;
this.form.legal_person_id_number = ocr.idNumber;
console.log("ID_CARD_FRONT", ocr);
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;
},
loginOut() {
this.$store.dispatch("user/LoginOut");
},
},
};
</script>
<style lang="scss">
.shop-2-container {
background: #f2f2f2;
// height: 100vh;
.u-navbar {
height: 88rpx;
}
.subsection {
height: 80rpx;
}
.up-block {
background: #fff;
padding: 24rpx;
margin-bottom: 20rpx;
.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;
padding: 24rpx 24rpx 24rpx 32rpx;
}
.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;
}
.btn-login-out {
font-size: 28rpx;
color: #4b71ff;
}
.color_red {
color: red;
}
}
</style>