1400 lines
42 KiB
Vue
1400 lines
42 KiB
Vue
<template>
|
||
<view class="shop-2-container">
|
||
<!-- <u-navbar
|
||
:autoBack="true"
|
||
:safeAreaInsetTop="true"
|
||
:placeholder="true"
|
||
title="营业信息"
|
||
>
|
||
<template slot="right">
|
||
<view class="btn-login-out" @click="loginOut">退出登录</view>
|
||
</template>
|
||
</u-navbar> -->
|
||
<navBar
|
||
title="营业信息"
|
||
:statusBar="true"
|
||
:border="false"
|
||
:fixed="true"
|
||
:height="44"
|
||
>
|
||
<block slot="left">
|
||
<u-icon
|
||
name="arrow-left"
|
||
color="#303133"
|
||
size="20"
|
||
@click="pageBack()"
|
||
></u-icon>
|
||
</block>
|
||
<block slot="right">
|
||
<view class="btn-login-out" @click="loginOut">退出登录</view>
|
||
</block>
|
||
</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">营业执照信息</view>
|
||
<u-form :model="form" class="form" ref="uForm" label-width="120">
|
||
<u-form-item label="营业执照" prop="businessLicenseFiles">
|
||
<u-upload
|
||
:class="
|
||
form.businessLicenseFiles.length == 0 ? 'shop2-2-upload' : ''
|
||
"
|
||
class="shop2-2-upload"
|
||
@afterRead="afterRead($event, 'businessLicense')"
|
||
@delete="deletePic($event, 'businessLicense')"
|
||
accept="image"
|
||
:fileList="form.businessLicenseFiles"
|
||
:max-count="1"
|
||
width="125"
|
||
height="88"
|
||
:maxSize="8 * 1024 * 1024"
|
||
@oversize="overSize"
|
||
uploadText="点击上传营业执照"
|
||
></u-upload>
|
||
</u-form-item>
|
||
<template
|
||
v-if="form.businessLicenseFiles.length && form.biz_license_company"
|
||
>
|
||
<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="biz_license_number" required>
|
||
<u-input
|
||
class="form-input"
|
||
v-model="form.biz_license_number"
|
||
placeholder="请输入注册号"
|
||
/>
|
||
</u-form-item>
|
||
<u-form-item label="法人手机号" prop="legal_person_mobile" required>
|
||
<u-input
|
||
maxlength="11"
|
||
class="form-input"
|
||
v-model="form.legal_person_mobile"
|
||
placeholder="请输入法人手机号"
|
||
/>
|
||
</u-form-item>
|
||
<u-form-item label="经营范围" prop="biz_license_content" required>
|
||
<u-input
|
||
maxlength="11"
|
||
class="form-input"
|
||
v-model="form.biz_license_content"
|
||
placeholder="请输入经营范围"
|
||
/>
|
||
</u-form-item>
|
||
<u-form-item
|
||
label="所属行业"
|
||
prop="license_type"
|
||
@click="showPicker = true"
|
||
>
|
||
<u-input
|
||
style="pointer-events: none"
|
||
class="form-input"
|
||
v-model="license_type_name"
|
||
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="许可证" v-if="form.license_type != 1">
|
||
<u-upload
|
||
:class="
|
||
form.specialLicenseFiles.length == 0 ? 'shop2-3-upload' : ''
|
||
"
|
||
@afterRead="afterRead($event, 'licenseNumber')"
|
||
@delete="deletePic($event, 'licenseNumber')"
|
||
accept="image"
|
||
:uploadIcon="
|
||
form.specialLicenseFiles.length == 0 ? '' : 'camera-fill'
|
||
"
|
||
:fileList="form.specialLicenseFiles"
|
||
:max-count="5"
|
||
:maxSize="8 * 1024 * 1024"
|
||
@oversize="overSize"
|
||
width="125"
|
||
height="88"
|
||
></u-upload>
|
||
</u-form-item>
|
||
<u-form-item
|
||
label="许可证编号"
|
||
prop="license_number"
|
||
v-if="form.license_type != 1"
|
||
>
|
||
<u-input
|
||
class="form-input"
|
||
v-model="form.license_number"
|
||
placeholder="请输入许可证编号"
|
||
/>
|
||
</u-form-item>
|
||
</template>
|
||
</u-form>
|
||
</view>
|
||
|
||
<view class="up-block up-block-3" v-show="active == 0">
|
||
<view class="up-title">法人信息</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=""
|
||
:maxSize="8 * 1024 * 1024"
|
||
@oversize="overSize"
|
||
></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=""
|
||
:maxSize="8 * 1024 * 1024"
|
||
@oversize="overSize"
|
||
></u-upload>
|
||
</view>
|
||
<u-form
|
||
v-show="fileList3.length && form.legal_person_id_number"
|
||
:model="form"
|
||
class="form"
|
||
ref="uForm3"
|
||
label-width="100"
|
||
>
|
||
<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="legal_person_id_addr" required>
|
||
<u-input
|
||
class="form-input"
|
||
maxlength="18"
|
||
v-model="form.legal_person_id_addr"
|
||
placeholder="请输入身份证地址"
|
||
/>
|
||
</u-form-item>
|
||
<u-form-item
|
||
v-show="fileList4.length && form.legal_person_id_period_begin"
|
||
label="生效日期"
|
||
prop="legal_person_id_number"
|
||
@click="showStartTime = true"
|
||
required
|
||
>
|
||
<u-input
|
||
class="form-input"
|
||
maxlength="18"
|
||
v-model="form.legal_person_id_period_begin"
|
||
placeholder="请选择身份证有效生日"
|
||
/>
|
||
<u-icon
|
||
style="display: inline-block; margin-left: 8rpx"
|
||
name="arrow-down"
|
||
size="12"
|
||
color="#aaaaaa"
|
||
></u-icon>
|
||
</u-form-item>
|
||
<u-form-item
|
||
v-show="fileList4.length && form.legal_person_id_period_end"
|
||
label="截止日期"
|
||
prop="legal_person_id_period_end"
|
||
required
|
||
@click="handelShowEndTime()"
|
||
>
|
||
<u-input
|
||
class="form-input"
|
||
maxlength="18"
|
||
v-model="form.legal_person_id_period_end"
|
||
placeholder="请选择身份证截止日期"
|
||
/>
|
||
<tui-radio-group class="id-radio-group" @change="handelRaddio">
|
||
<view v-for="(item, index) in radioItems">
|
||
<tui-radio
|
||
class="id-radio"
|
||
:key="index"
|
||
:checked="item.checked"
|
||
:value="item.value"
|
||
color="#07c160"
|
||
borderColor="#999"
|
||
></tui-radio>
|
||
<text class="id-radio-text">{{ item.name }}</text>
|
||
</view>
|
||
</tui-radio-group>
|
||
<u-icon
|
||
v-if="form.legal_person_id_period_end != '长期'"
|
||
style="display: inline-block; margin-left: 8rpx"
|
||
name="arrow-down"
|
||
size="12"
|
||
color="#aaaaaa"
|
||
></u-icon>
|
||
</u-form-item>
|
||
</u-form>
|
||
</view>
|
||
|
||
<!--个人-->
|
||
<view class="up-block up-block-3" v-show="active == 1">
|
||
<view class="up-title">个人信息</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=""
|
||
:maxSize="8 * 1024 * 1024"
|
||
@oversize="overSize"
|
||
></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=""
|
||
:maxSize="8 * 1024 * 1024"
|
||
@oversize="overSize"
|
||
></u-upload>
|
||
</view>
|
||
<u-form
|
||
:model="form2"
|
||
class="form"
|
||
ref="uForm2"
|
||
label-width="100"
|
||
v-show="fileList5.length && form2.individual_id_number"
|
||
>
|
||
<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-item label="姓名" prop="individual_id_name" required>
|
||
<u-input
|
||
class="form-input"
|
||
maxlength="18"
|
||
v-model="form2.individual_id_name"
|
||
placeholder="请输入姓名"
|
||
/>
|
||
</u-form-item>
|
||
<u-form-item
|
||
v-show="fileList6.length && form2.individual_id_period_begin"
|
||
label="生效日期"
|
||
prop="individual_id_period_begin"
|
||
@click="showStartTime = true"
|
||
required
|
||
>
|
||
<u-input
|
||
class="form-input"
|
||
maxlength="18"
|
||
v-model="form2.individual_id_period_begin"
|
||
placeholder="请选择身份证有效生日"
|
||
/>
|
||
<u-icon
|
||
style="display: inline-block; margin-left: 8rpx"
|
||
name="arrow-down"
|
||
size="12"
|
||
color="#aaaaaa"
|
||
></u-icon>
|
||
</u-form-item>
|
||
<u-form-item
|
||
v-show="fileList6.length && form2.individual_id_period_end"
|
||
label="截止日期"
|
||
prop="individual_id_period_end"
|
||
required
|
||
@click="handelShowEndTime()"
|
||
>
|
||
<u-input
|
||
class="form-input"
|
||
maxlength="18"
|
||
v-model="form2.individual_id_period_end"
|
||
placeholder="请选择身份证截止日期"
|
||
/>
|
||
<tui-radio-group class="id-radio-group" @change="handelRaddio">
|
||
<view v-for="(item, index) in radioItems">
|
||
<tui-radio
|
||
class="id-radio"
|
||
:key="index"
|
||
:checked="item.checked"
|
||
:value="item.value"
|
||
color="#07c160"
|
||
borderColor="#999"
|
||
></tui-radio>
|
||
<text class="id-radio-text">{{ item.name }}</text>
|
||
</view>
|
||
</tui-radio-group>
|
||
<u-icon
|
||
v-if="form.individual_id_period_end != '长期'"
|
||
style="display: inline-block; margin-left: 8rpx"
|
||
name="arrow-down"
|
||
size="12"
|
||
color="#aaaaaa"
|
||
></u-icon>
|
||
</u-form-item>
|
||
</u-form>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="btn-content">
|
||
<view class="myui_check_text">检查并确认营业证件信息无误</view>
|
||
<u-button text="下一步" color="#fe4119" @click="handleNext"></u-button>
|
||
<u-button
|
||
text="上一步"
|
||
class="myui_btn_prev"
|
||
@click="handlePrev"
|
||
></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-datetime-picker
|
||
:show="showStartTime"
|
||
v-model="startTime"
|
||
mode="date"
|
||
:minDate="startMinDate"
|
||
@cancel="showStartTime = false"
|
||
@confirm="handelStartTime"
|
||
></u-datetime-picker>
|
||
<u-datetime-picker
|
||
:show="showEndTime"
|
||
v-model="endTime"
|
||
:minDate="endMinDate"
|
||
:maxDate="endMaxDate"
|
||
mode="date"
|
||
@confirm="handelEndTime"
|
||
@cancel="showEndTime = false"
|
||
></u-datetime-picker>
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapActions } from "vuex";
|
||
import {
|
||
UploadFilePromise,
|
||
batchNoApi,
|
||
imgOcrResultApi,
|
||
} from "../../api/upload";
|
||
import navBar from "@/components/uni-nav-bar/uni-nav-bar";
|
||
import tuiRadio from "@/components/tui-radio/tui-radio.vue";
|
||
import tuiRadioGroup from "@/components/tui-radio-group/tui-radio-group.vue";
|
||
import { compressImg } from '@/utils/tool.js'
|
||
|
||
|
||
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 {
|
||
components: {
|
||
navBar,
|
||
tuiRadio,
|
||
tuiRadioGroup,
|
||
},
|
||
data() {
|
||
return {
|
||
active: 0,
|
||
showPopup: false,
|
||
showPicker: false,
|
||
showStartTime: false,
|
||
showEndTime: false,
|
||
startTime: null,
|
||
endTime: null,
|
||
startMinDate: 0,
|
||
endMinDate: 0,
|
||
endMaxDate: 0,
|
||
list: [
|
||
{
|
||
name: "企业类型",
|
||
},
|
||
{
|
||
name: "个人类型",
|
||
},
|
||
],
|
||
radioItems: [
|
||
{
|
||
name: "非长期",
|
||
value: "1",
|
||
checked: true,
|
||
},
|
||
{
|
||
name: "长期",
|
||
value: "2",
|
||
checked: false,
|
||
},
|
||
],
|
||
form: {
|
||
license_type: 1, // 所属行业
|
||
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: "", // 身份证图片反面路径
|
||
legal_person_id_addr: "", // 身份证地址
|
||
legal_person_id_period_begin: "", //身份证开始有效日期
|
||
legal_person_id_period_end: "", // 身份证截止日期
|
||
biz_license_period_begin: "",
|
||
biz_license_period_end: "9999-12-31",
|
||
businessLicenseFiles: [],
|
||
specialLicenseFiles: [],
|
||
},
|
||
form2: {
|
||
individual_id_number: "", // 个人身份证号码
|
||
individual_id_images: "", // 个人身份证图片正面路径
|
||
individual_id_images2: "", //个人身份证图片反面路径
|
||
individual_id_name: "", //个人身份证姓名
|
||
individual_id_addr: "", //个人身份证地址
|
||
individual_id_period_begin: "", // 个人身份证开始有效日期
|
||
individual_id_period_end: "", // 个人身份证截止日期
|
||
},
|
||
license_type_name: "",
|
||
orcTimeout: null,
|
||
action: "",
|
||
limitType: ['png', 'jpg', 'jpeg'], //允许的图片后缀
|
||
fileMaxSize: 1 * 1024 * 1024, // 超出1M开启压缩
|
||
maxSize:5 * 1024 * 1024, //图片最大不能超过20M
|
||
fileMinSize: 5 * 1024, // 最小为5KB
|
||
fileList: [],
|
||
fileList2: [],
|
||
fileList3: [],
|
||
fileList4: [],
|
||
fileList5: [], //个人身份证正面
|
||
fileList6: [], //个人身份证反面
|
||
columns: [
|
||
[
|
||
{
|
||
id: 1,
|
||
name: "无需特殊资质",
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "需许可证资质",
|
||
},
|
||
{
|
||
id: 3,
|
||
name: "需特许证件资质",
|
||
},
|
||
],
|
||
],
|
||
rules: {
|
||
biz_license_company: {
|
||
required: true,
|
||
message: "请输入公司名称",
|
||
trigger: ["change", "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_addr: {
|
||
required: true,
|
||
message: "请输入身份证的地址",
|
||
trigger: ["change", "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"],
|
||
},
|
||
],
|
||
legal_person_id_period_begin: [
|
||
{
|
||
type: "string",
|
||
required: true,
|
||
message: "请选择身份证开始有效日期",
|
||
trigger: ["change"],
|
||
},
|
||
],
|
||
legal_person_id_period_end: [
|
||
{
|
||
type: "string",
|
||
required: true,
|
||
message: "请选择身份证截止日期",
|
||
trigger: ["change"],
|
||
},
|
||
],
|
||
biz_license_content: {
|
||
required: true,
|
||
message: "请输入经营范围",
|
||
trigger: ["change", "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"],
|
||
},
|
||
],
|
||
individual_id_name: [
|
||
{
|
||
required: true,
|
||
message: "请输入姓名",
|
||
trigger: ["change", "blur"],
|
||
},
|
||
],
|
||
individual_id_period_begin: [
|
||
{
|
||
type: "string",
|
||
required: true,
|
||
message: "请选择身份证开始有效日期",
|
||
trigger: ["change"],
|
||
},
|
||
],
|
||
individual_id_period_end: [
|
||
{
|
||
type: "string",
|
||
required: true,
|
||
message: "请选择身份证截止日期",
|
||
trigger: ["change"],
|
||
},
|
||
],
|
||
},
|
||
};
|
||
},
|
||
onReady() {
|
||
this.$refs["uForm"].setRules(this.rules);
|
||
// this.$refs["uForm2"]?.setRules(this.rules2);
|
||
},
|
||
mounted() {
|
||
this.license_type_name = this.columns?.[0].filter(
|
||
(item) => item.id == this.form.license_type
|
||
)?.[0].name;
|
||
|
||
const date19300520 = new Date("1930-05-20T00:00:00Z");
|
||
this.startMinDate = date19300520.getTime();
|
||
|
||
const date = new Date();
|
||
date.setFullYear(date.getFullYear() + 20);
|
||
this.endMaxDate = date.getTime();
|
||
|
||
const data2 = new Date();
|
||
data2.setFullYear(data2.getFullYear() + 5);
|
||
this.endMinDate = data2.getTime();
|
||
},
|
||
methods: {
|
||
pageBack() {
|
||
uni.navigateBack();
|
||
},
|
||
overSize(e) {
|
||
uni.$u.toast("上传图片大小不能超过8MB!");
|
||
},
|
||
compressImage(url) {
|
||
return new Promise((reslove, reject) => {
|
||
const tempFilePath = url //url是选中图片的路径
|
||
uni.compressImage({
|
||
src: tempFilePath,
|
||
quality: 90, //压缩的程度
|
||
success: (res) => {
|
||
reslove(res.tempFilePath) //压缩成功返回的路径
|
||
},
|
||
fail: (error) => {
|
||
console.log('压缩失败', error)
|
||
}
|
||
})
|
||
})
|
||
},
|
||
async handerCompressImg(source, compressionRatio) {
|
||
let that = this;
|
||
return new Promise((resolve, reject) => {
|
||
compressImg(source.url, compressionRatio, source.type, compressRes => {
|
||
resolve(compressRes);
|
||
})
|
||
}).then((res) => {
|
||
source.size = res.size
|
||
// window.URL.revokeObjectURL(source.url) // 删除被压缩的缓存文件,这里注意，如果是相册选择上传，可能会删除相册的图片
|
||
source.url = res.source
|
||
source.thumb = res.source
|
||
return source
|
||
}).catch(err => {
|
||
console.log('图片压缩失败', err)
|
||
})
|
||
},
|
||
async getOcrText(filePath, file, type) {
|
||
|
||
return new Promise(async (resolve, reject) => {
|
||
|
||
//#ifdef APP-PLUS
|
||
filePath = await this.compressImage(filePath);
|
||
//#endif
|
||
|
||
|
||
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);
|
||
});
|
||
},
|
||
/**判断文件类型是否正确 */
|
||
isAssetTypeAnImage(ext) {
|
||
const str = ext.split('.')[1];
|
||
return this.limitType.indexOf(str.toLowerCase()) !== -1;
|
||
},
|
||
getCompressionRatio(fileSize) {
|
||
const multiple = (fileSize / this.fileMaxSize).toFixed(2);
|
||
let compressionRatio = 1;
|
||
if (multiple > 5) {
|
||
compressionRatio = 0.5
|
||
} else if (multiple > 4) {
|
||
compressionRatio = 0.6
|
||
} else if (multiple > 3) {
|
||
compressionRatio = 0.7
|
||
} else if (multiple > 2) {
|
||
compressionRatio = 0.8
|
||
} else if (multiple > 1) {
|
||
compressionRatio = 0.9
|
||
} else {
|
||
compressionRatio = 2
|
||
}
|
||
return compressionRatio;
|
||
},
|
||
translate(imgSrc, scale) {
|
||
//imgSrc:图片的路径
|
||
//scale:缩放比例 0-1之间
|
||
return new Promise((reslove, reject) => {
|
||
var img = new Image(); //创建Image对象生成一个<img>标签
|
||
img.src = imgSrc; //将图片路径赋给<img>标签的src
|
||
img.onload = () => {//onload在图片加载成功后触发，在onload中完成压缩功能
|
||
var h = img.height/2; // 获取原本图片的宽高
|
||
var w = img.width/2; //默认按比例压缩,根据需求修改
|
||
var canvas = document.createElement('canvas');//创建画布
|
||
var ctx = canvas.getContext('2d'); //设置为2d效果
|
||
var width = document.createAttribute("width"); //创建属性节点
|
||
width.nodeValue = w; //设置属性值
|
||
var height = document.createAttribute("height");
|
||
height.nodeValue = h;
|
||
canvas.setAttributeNode(width); //设置画布宽高
|
||
canvas.setAttributeNode(height);
|
||
ctx.drawImage(img, 0, 0, w,h);//将图片贴到画布上
|
||
//img:图片 0,0:粘贴的位置 w,h:粘贴图片的大小
|
||
var base64 = canvas.toDataURL('image/png', scale);
|
||
//'image/png':压缩返回图片的类型 scale:图片质量
|
||
//如果要base64的流，可以直接将结果返回了
|
||
canvas = null; //清除画布
|
||
var blob = this.base64ToBlob(base64); //需要二进制流调用该方法拿到
|
||
let blobUrl = window.URL.createObjectURL(blob);//blob地址
|
||
reslove(blobUrl)
|
||
}
|
||
})
|
||
},
|
||
// base64转Blob
|
||
base64ToBlob(base64) {
|
||
var arr = base64.split(','),
|
||
mime = arr[0].match(/:(.*?);/)[1],
|
||
bstr = atob(arr[1]),
|
||
n = bstr.length,
|
||
u8arr = new Uint8Array(n);
|
||
while (n--) {
|
||
u8arr[n] = bstr.charCodeAt(n);
|
||
}
|
||
return new Blob([u8arr], {
|
||
type: mime,
|
||
});
|
||
},
|
||
// 上传图片
|
||
async afterRead(event, type) {
|
||
var item = event.file;
|
||
|
||
console.log("压缩前：",item.url);
|
||
|
||
|
||
var a = await this.translate(item.url,0.9)
|
||
|
||
item.url = a;
|
||
|
||
|
||
|
||
|
||
// let lists = [].concat(event.file);
|
||
// let fileListLen = this[`fileList${event.name}`].length;
|
||
// for (let index in lists) {
|
||
// const fileItem = lists[index];
|
||
// const fileSize = fileItem.size;
|
||
// const fileName = fileItem.name ?? '';
|
||
// if(!this.isAssetTypeAnImage(fileItem.name)) {
|
||
// this.$.msg('不允许该文件类型上传');
|
||
// return false
|
||
// }
|
||
// console.log('文件大小',fileSize);
|
||
// if (fileSize > this.fileMaxSize) {
|
||
// const compressionRatio = this.getCompressionRatio(fileSize);
|
||
// if (compressionRatio > 1) {
|
||
// uni.$u.toast("上传图片大小不能超过5MB!");
|
||
|
||
// return false
|
||
// }
|
||
// // 超出1M自动压缩图片
|
||
// item = await this.handerCompressImg(fileItem, compressionRatio)
|
||
|
||
// if (fileItem.size > this.maxSize) {
|
||
// uni.$u.toast("上传图片大小不能超过5MB!");
|
||
// return false
|
||
// }
|
||
// }
|
||
// if (fileItem.size < this.fileMinSize) {
|
||
// uni.$u.toast("上传图片大小不能超过5MB!");
|
||
// return false
|
||
// }
|
||
// }
|
||
|
||
|
||
|
||
console.log("压缩后：",item.url);
|
||
|
||
var imgUrl = item.url;
|
||
|
||
|
||
|
||
const group = {
|
||
url: imgUrl,
|
||
};
|
||
|
||
switch (type) {
|
||
case "businessLicense":
|
||
this.form.businessLicenseFiles.push(group);
|
||
break;
|
||
case "licenseNumber":
|
||
this.fileList2.push(group);
|
||
this.form.specialLicenseFiles.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;
|
||
}
|
||
console.log(imgUrl)
|
||
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;
|
||
this.form.biz_license_number = ocr.bizLicenseCreditCode;
|
||
this.form.biz_license_content = ocr.bizLicenseScope || "";
|
||
this.form.biz_license_period_begin = ocr.bizLicenseStartTime
|
||
.replace(/年|月|日/g, "-")
|
||
.replace(/-$/g, "")
|
||
.replace(/-+/g, "-");
|
||
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;
|
||
this.form.legal_person_id_addr = ocr.address;
|
||
console.log("ID_CARD_FRONT", ocr);
|
||
break;
|
||
case "idReverse":
|
||
var ocr = await this.getOcrText(
|
||
imgUrl,
|
||
item,
|
||
orcImgTypeConf.FR_ID_CARD_BEHIND
|
||
);
|
||
|
||
if (ocr && ocr.validity) {
|
||
let validity = ocr.validity.split("-");
|
||
this.startTime = validity[0];
|
||
this.endTime = validity[1];
|
||
this.form.legal_person_id_period_begin = this.startTime.replace(
|
||
/\./g,
|
||
"-"
|
||
);
|
||
this.form.legal_person_id_period_end = this.endTime.replace(
|
||
/\./g,
|
||
"-"
|
||
);
|
||
}
|
||
|
||
break;
|
||
case "personIdFront":
|
||
var ocr = await this.getOcrText(
|
||
imgUrl,
|
||
item,
|
||
orcImgTypeConf.ID_CARD_FRONT
|
||
);
|
||
|
||
this.form2.individual_id_name = ocr.name;
|
||
this.form2.individual_id_number = ocr.idNumber;
|
||
this.form2.individual_id_addr = ocr.address;
|
||
console.log("personIdFront", ocr);
|
||
break;
|
||
case "personIdReverse":
|
||
var ocr = await this.getOcrText(
|
||
imgUrl,
|
||
item,
|
||
orcImgTypeConf.ID_CARD_BEHIND
|
||
);
|
||
|
||
if (ocr && ocr.validity) {
|
||
let validity = ocr.validity.split("-");
|
||
this.startTime = validity[0];
|
||
this.endTime = validity[1];
|
||
this.form2.individual_id_period_begin = this.startTime;
|
||
this.form2.individual_id_period_end = this.endTime;
|
||
}
|
||
console.log("personIdFront", ocr);
|
||
break;
|
||
}
|
||
},
|
||
deletePic(e, type) {
|
||
switch (type) {
|
||
case "businessLicense":
|
||
this.form.businessLicenseFiles.splice(0, 1);
|
||
break;
|
||
case "licenseNumber":
|
||
this.form.specialLicenseFiles.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.form.businessLicenseFiles = [];
|
||
// this.form.specialLicenseFiles = [];
|
||
// this.fileList3 = [];
|
||
// this.fileList4 = [];
|
||
// this.fileList5 = [];
|
||
// this.fileList6 = [];
|
||
this.minDate = 0;
|
||
if (e == 1) {
|
||
this.$refs.uForm2.setRules(this.rules2);
|
||
this.form.legal_person_id_period_begin = "";
|
||
this.form.legal_person_id_period_end = "";
|
||
} else {
|
||
this.individual_id_period_begin = "";
|
||
this.individual_id_period_end = "";
|
||
}
|
||
},
|
||
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.form.specialLicenseFiles.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",
|
||
});
|
||
}
|
||
});
|
||
}
|
||
},
|
||
|
||
handlePrev() {
|
||
uni.navigateBack();
|
||
},
|
||
|
||
handleCancel() {
|
||
this.showPicker = false;
|
||
},
|
||
|
||
handleConfirm(e) {
|
||
this.form.license_type = e.value[0].id;
|
||
this.license_type_name = e.value[0].name;
|
||
this.licenseType = e.value[0];
|
||
|
||
this.showPicker = false;
|
||
},
|
||
handelShowEndTime() {
|
||
if (
|
||
this.form.legal_person_id_period_end == "长期" ||
|
||
this.form2.individual_id_period_end == "长期"
|
||
)
|
||
return;
|
||
this.showEndTime = true;
|
||
},
|
||
handelStartTime(e) {
|
||
this.startTime = e.value;
|
||
this.showStartTime = false;
|
||
if (this.active == 0) {
|
||
this.form.legal_person_id_period_begin = uni.$u.timeFormat(
|
||
this.startTime,
|
||
"yyyy-mm-dd"
|
||
);
|
||
} else {
|
||
this.form2.individual_id_period_begin = uni.$u.timeFormat(
|
||
this.startTime,
|
||
"yyyy-mm-dd"
|
||
);
|
||
}
|
||
},
|
||
handelEndTime(e) {
|
||
this.endTime = e.value;
|
||
this.showEndTime = false;
|
||
if (this.active == 0) {
|
||
this.form.legal_person_id_period_end = uni.$u.timeFormat(
|
||
this.endTime,
|
||
"yyyy-mm-dd"
|
||
);
|
||
} else {
|
||
this.form2.individual_id_period_end = uni.$u.timeFormat(
|
||
this.endTime,
|
||
"yyyy-mm-dd"
|
||
);
|
||
}
|
||
},
|
||
handelRaddio(e) {
|
||
if (e && e.detail.value == 2) {
|
||
if (this.active == 0) {
|
||
this.form.legal_person_id_period_end = "长期";
|
||
} else {
|
||
this.form2.individual_id_period_end = "长期";
|
||
}
|
||
} else {
|
||
if (this.active == 0) {
|
||
this.form.legal_person_id_period_end = "";
|
||
} else {
|
||
this.form2.individual_id_period_end = "";
|
||
}
|
||
}
|
||
},
|
||
loginOut() {
|
||
this.$store.dispatch("user/LoginOut");
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "@/styles/variables.scss";
|
||
page {
|
||
background: #f2f2f2;
|
||
}
|
||
.shop-2-container {
|
||
// background: #f2f2f2;
|
||
// height: 100vh;
|
||
|
||
.u-navbar {
|
||
height: 88rpx;
|
||
}
|
||
|
||
.subsection {
|
||
height: 80rpx;
|
||
}
|
||
|
||
.up-block {
|
||
background: #fff;
|
||
padding: 24rpx 24rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
.up-title {
|
||
font-weight: bold;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
}
|
||
|
||
::v-deep.shop2-2-upload {
|
||
.u-upload__button {
|
||
// background: url("../../static/shenhe-bg1.png");
|
||
// background: url("../../static/business-license-bg.png");
|
||
// background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
::v-deep.shop2-3-upload {
|
||
.u-upload__button {
|
||
// background: url("../../static/shenhe-bg1.png");
|
||
background-image: url("../../static/permit-bg.png");
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
::v-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%;
|
||
}
|
||
}
|
||
|
||
::v-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 {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.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: $base-color;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.btn-content {
|
||
padding: 30rpx 48rpx 88rpx;
|
||
}
|
||
|
||
.btn-login-out {
|
||
font-size: 28rpx;
|
||
color: $base-color;
|
||
}
|
||
|
||
.color_red {
|
||
color: red;
|
||
}
|
||
|
||
.id-radio-group {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-right: 20rpx;
|
||
width: 240rpx;
|
||
}
|
||
}
|
||
</style>
|