1856 lines
54 KiB
Vue
1856 lines
54 KiB
Vue
<template>
|
||
<div class="signUp-container">
|
||
<!-- 步骤条 -->
|
||
<div class="steps-container">
|
||
<div class="tit" style="margin-bottom: 0">免费开店资料填写</div>
|
||
</div>
|
||
|
||
<div class="form-submit">
|
||
<el-form
|
||
:model="applyFormData"
|
||
:rules="rules"
|
||
ref="formRef"
|
||
label-width="160px"
|
||
style="max-width: 600px"
|
||
v-loading.fullscreen.lock="loading"
|
||
element-loading-text="数据加载中..."
|
||
element-loading-background="rgba(0,0,0,.75)"
|
||
>
|
||
<div class="from_box">
|
||
<div class="tit">店铺信息</div>
|
||
|
||
<el-form-item label="主体类型" prop="entity_type">
|
||
<el-radio-group
|
||
v-model="applyFormData.entity_type"
|
||
@change="clearOtherFields"
|
||
>
|
||
<el-radio-button :value="1">企业</el-radio-button>
|
||
<el-radio-button :value="2">个人</el-radio-button>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="联系人" prop="contact_name">
|
||
<el-input
|
||
v-model="applyFormData.contact_name"
|
||
placeholder="请输入联系人姓名"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="联系电话" prop="login_mobile">
|
||
<el-input
|
||
v-model="applyFormData.login_mobile"
|
||
placeholder="请输入联系人电话"
|
||
disabled
|
||
/>
|
||
</el-form-item>
|
||
<!-- <el-form-item label="邮箱" prop="email">
|
||
<el-input v-model="applyFormData.email" placeholder="请输入邮箱" />
|
||
</el-form-item> -->
|
||
<el-form-item label="经营品类" prop="biz_category">
|
||
<el-cascader
|
||
v-model="applyFormData.biz_category"
|
||
:options="cascaderOptions"
|
||
placeholder="请选择经营品类"
|
||
:show-all-levels="false"
|
||
@change="handleChangeBizCategory"
|
||
clearable
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="门店名称" prop="store_name">
|
||
<el-input
|
||
v-model="applyFormData.store_name"
|
||
placeholder="请输入门店名称"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="所在地区" prop="map_address">
|
||
<el-cascader
|
||
style="marginright: 5px"
|
||
v-model="applyFormData.map_address"
|
||
:options="cascaderOptions2"
|
||
@change="handleChange"
|
||
/>
|
||
<el-autocomplete
|
||
v-if="applyFormData.map_address"
|
||
style="width: 180px"
|
||
v-model="applyFormData.position"
|
||
placeholder="试试搜索，快速填写地址"
|
||
:fetch-suggestions="querySearch"
|
||
value-key="value"
|
||
:options="autocompleteOptions"
|
||
@select="handleSelect"
|
||
>
|
||
<template #default="{ item }">
|
||
<div class="auto-item" v-if="item">
|
||
<div>
|
||
<p>{{ item.name }}</p>
|
||
<!-- 显示名称 -->
|
||
</div>
|
||
<div>
|
||
<span>{{ item.address }}</span>
|
||
<!-- 显示地址 -->
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-autocomplete>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="详细地址"
|
||
prop="store_address"
|
||
v-if="applyFormData.map_address"
|
||
>
|
||
<el-input
|
||
v-model="applyFormData.store_address"
|
||
placeholder="请输入详细地址"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
:label="getLabel('front_facade_image', 1)"
|
||
prop="front_facade_image"
|
||
>
|
||
<el-upload
|
||
ref="uploadRef"
|
||
multiple
|
||
:limit="1"
|
||
list-type="picture-card"
|
||
:auto-upload="true"
|
||
:on-remove="
|
||
(file, fileList) =>
|
||
handleRemove(file, fileList, 'front_facade_image')
|
||
"
|
||
:on-success="
|
||
(response, file, fileList) =>
|
||
handleUploadSuccess(
|
||
response,
|
||
file,
|
||
fileList,
|
||
'front_facade_image'
|
||
)
|
||
"
|
||
:on-preview="handlePictureCardPreview"
|
||
:on-error="handleUploadError"
|
||
:on-exceed="handleExceed"
|
||
:before-upload="beforeUpload"
|
||
:action="uploadUrl"
|
||
name="upfile"
|
||
:class="{ 'upload-hidden': isUploadHidden('front_facade_image') }"
|
||
>
|
||
<el-icon class="avatar-uploader-icon">
|
||
<Plus />
|
||
</el-icon>
|
||
<div class="uploader-tips">上传门店图</div>
|
||
</el-upload>
|
||
</el-form-item>
|
||
<el-form-item
|
||
:label="getLabel('environment_image', 1)"
|
||
prop="environment_image"
|
||
>
|
||
<el-upload
|
||
ref="uploadRef"
|
||
multiple
|
||
:limit="1"
|
||
list-type="picture-card"
|
||
:auto-upload="true"
|
||
:on-preview="handlePictureCardPreview"
|
||
v-model="applyFormData.environment_image"
|
||
:on-remove="
|
||
(file, fileList) =>
|
||
handleRemove(file, fileList, 'environment_image')
|
||
"
|
||
:on-success="
|
||
(response, file, fileList) =>
|
||
handleUploadSuccess(
|
||
response,
|
||
file,
|
||
fileList,
|
||
'environment_image'
|
||
)
|
||
"
|
||
:on-error="handleUploadError"
|
||
:before-upload="beforeUpload"
|
||
:action="uploadUrl"
|
||
name="upfile"
|
||
:class="{ 'upload-hidden': isUploadHidden('environment_image') }"
|
||
>
|
||
<el-icon>
|
||
<Plus />
|
||
</el-icon>
|
||
<div class="uploader-tips">上传环境图</div>
|
||
</el-upload>
|
||
</el-form-item>
|
||
</div>
|
||
|
||
<div class="from_box">
|
||
<div class="tit">营业信息</div>
|
||
<div v-if="applyFormData.entity_type === 1">
|
||
<el-form-item
|
||
:label="getLabel('biz_license_image', 1)"
|
||
prop="biz_license_image"
|
||
>
|
||
<el-upload
|
||
:ref="
|
||
(el) => {
|
||
el && (uploadRefs.biz_license_image = el);
|
||
}
|
||
"
|
||
v-model:file-list="uploadFiles.biz_license_image"
|
||
multiple
|
||
:limit="1"
|
||
list-type="picture-card"
|
||
:auto-upload="true"
|
||
v-model="applyFormData.biz_license_image"
|
||
:on-remove="
|
||
(file, fileList) =>
|
||
handleRemove(file, fileList, 'biz_license_image')
|
||
"
|
||
:on-preview="handlePictureCardPreview"
|
||
:on-success="
|
||
(response, file, fileList) =>
|
||
handleUploadSuccess(
|
||
response,
|
||
file,
|
||
fileList,
|
||
'biz_license_image'
|
||
)
|
||
"
|
||
:on-error="handleUploadError"
|
||
:before-upload="beforeUpload"
|
||
:action="uploadUrl"
|
||
name="upfile"
|
||
:class="{
|
||
'upload-hidden': isUploadHidden('biz_license_image'),
|
||
}"
|
||
>
|
||
<el-icon>
|
||
<Plus />
|
||
</el-icon>
|
||
<div class="uploader-tips">上传营业执照</div>
|
||
</el-upload>
|
||
|
||
<el-button
|
||
type="info"
|
||
plain
|
||
v-if="
|
||
applyFormData.biz_license_image &&
|
||
!applyFormData.biz_license_company &&
|
||
currentBbatchNo
|
||
"
|
||
@click="handleOcrText(currentBbatchNo, 'biz_license_image')"
|
||
>点击免填营业执照信息</el-button
|
||
>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="公司名称"
|
||
prop="biz_license_company"
|
||
v-if="applyFormData.biz_license_image"
|
||
>
|
||
<el-input
|
||
v-model="applyFormData.biz_license_company"
|
||
placeholder="请输入公司名称"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="法人姓名"
|
||
prop="legal_person_name"
|
||
v-if="applyFormData.biz_license_image"
|
||
>
|
||
<el-input
|
||
v-model="applyFormData.legal_person_name"
|
||
placeholder="请输入法人姓名"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="法人手机号"
|
||
prop="legal_person_mobile"
|
||
v-if="applyFormData.biz_license_image"
|
||
>
|
||
<el-input
|
||
v-model="applyFormData.legal_person_mobile"
|
||
placeholder="请输入法人手机号"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="注册号"
|
||
prop="biz_license_number"
|
||
v-if="applyFormData.biz_license_image"
|
||
>
|
||
<el-input
|
||
v-model="applyFormData.biz_license_number"
|
||
placeholder="请输入注册号"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="经营范围"
|
||
prop="biz_license_content"
|
||
v-if="applyFormData.biz_license_image"
|
||
>
|
||
<el-input
|
||
:rows="2"
|
||
type="textarea"
|
||
v-model="applyFormData.biz_license_content"
|
||
placeholder="请输入经营范围"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="许可证类型"
|
||
prop="license_type"
|
||
v-if="applyFormData.biz_license_image"
|
||
>
|
||
<el-select
|
||
v-model="applyFormData.license_type"
|
||
value-key=""
|
||
placeholder="请选择类型"
|
||
clearable
|
||
@change=""
|
||
>
|
||
<el-option
|
||
v-for="item in optionsPermitType"
|
||
:key="item.value2"
|
||
:label="item.label"
|
||
:value="item.value2"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item
|
||
:label="getLabel('license_image', 5)"
|
||
prop="license_image"
|
||
v-if="applyFormData.license_type != 1"
|
||
>
|
||
<el-upload
|
||
ref="uploadRef"
|
||
multiple
|
||
:limit="5"
|
||
list-type="picture-card"
|
||
:auto-upload="true"
|
||
v-model="applyFormData.license_image"
|
||
:on-preview="handlePictureCardPreview"
|
||
:on-remove="
|
||
(file, fileList) =>
|
||
handleRemove(file, fileList, 'license_image')
|
||
"
|
||
:on-success="
|
||
(response, file, fileList) =>
|
||
handleUploadSuccess(
|
||
response,
|
||
file,
|
||
fileList,
|
||
'license_image'
|
||
)
|
||
"
|
||
:on-error="handleUploadError"
|
||
:before-upload="beforeUpload"
|
||
:action="uploadUrl"
|
||
name="upfile"
|
||
:class="{ 'upload-hidden': isUploadHidden('license_image') }"
|
||
>
|
||
<el-icon>
|
||
<Plus />
|
||
</el-icon>
|
||
<div class="uploader-tips">上传许可证</div>
|
||
</el-upload>
|
||
</el-form-item>
|
||
|
||
<el-form-item
|
||
label="许可证编号"
|
||
prop="license_number"
|
||
v-if="applyFormData.license_type != 1"
|
||
>
|
||
<el-input
|
||
v-model="applyFormData.license_number"
|
||
placeholder="请输入许可证编号"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<!-- 法人身份证正反面 -->
|
||
<el-form-item
|
||
:label="getLabel('legal_person_id_images', 1)"
|
||
prop="legal_person_id_images"
|
||
>
|
||
<el-upload
|
||
:ref="
|
||
(el) => {
|
||
el && (uploadRefs.legal_person_id_images = el);
|
||
}
|
||
"
|
||
v-model:file-list="uploadFiles.legal_person_id_images"
|
||
:limit="1"
|
||
list-type="picture-card"
|
||
:auto-upload="true"
|
||
:on-preview="handlePictureCardPreview"
|
||
v-model="applyFormData.legal_person_id_images"
|
||
:on-remove="
|
||
(file, fileList) =>
|
||
handleRemove(file, fileList, 'legal_person_id_images')
|
||
"
|
||
:on-success="
|
||
(response, file, fileList) =>
|
||
handleUploadSuccess(
|
||
response,
|
||
file,
|
||
fileList,
|
||
'legal_person_id_images'
|
||
)
|
||
"
|
||
:on-error="handleUploadError"
|
||
:before-upload="beforeUpload"
|
||
:action="uploadUrl"
|
||
name="upfile"
|
||
:class="{
|
||
'upload-hidden': isUploadHidden('legal_person_id_images'),
|
||
}"
|
||
>
|
||
<el-icon class="avatar-uploader-icon">
|
||
<Plus />
|
||
</el-icon>
|
||
<div class="uploader-tips">上传证件正面</div>
|
||
</el-upload>
|
||
<el-button
|
||
type="info"
|
||
plain
|
||
v-if="
|
||
applyFormData.legal_person_id_images &&
|
||
!applyFormData.legal_person_id_number &&
|
||
currentBbatchNo
|
||
"
|
||
@click="
|
||
handleOcrText(currentBbatchNo, 'legal_person_id_images')
|
||
"
|
||
>点击免填身份证</el-button
|
||
>
|
||
</el-form-item>
|
||
<el-form-item
|
||
:label="getLabel('legal_person_id_images2', 1)"
|
||
prop="legal_person_id_images2"
|
||
>
|
||
<el-upload
|
||
:ref="
|
||
(el) => {
|
||
el && (uploadRefs.legal_person_id_images2 = el);
|
||
}
|
||
"
|
||
v-model:file-list="uploadFiles.legal_person_id_images2"
|
||
:limit="1"
|
||
list-type="picture-card"
|
||
:auto-upload="true"
|
||
:on-preview="handlePictureCardPreview"
|
||
v-model="applyFormData.legal_person_id_images2"
|
||
:on-remove="
|
||
(file, fileList) =>
|
||
handleRemove(file, fileList, 'legal_person_id_images2')
|
||
"
|
||
:on-success="
|
||
(response, file, fileList) =>
|
||
handleUploadSuccess(
|
||
response,
|
||
file,
|
||
fileList,
|
||
'legal_person_id_images2'
|
||
)
|
||
"
|
||
:on-error="handleUploadError"
|
||
:before-upload="beforeUpload"
|
||
:action="uploadUrl"
|
||
name="upfile"
|
||
:class="{
|
||
'upload-hidden': isUploadHidden('legal_person_id_images2'),
|
||
}"
|
||
>
|
||
<el-icon class="avatar-uploader-icon">
|
||
<Plus />
|
||
</el-icon>
|
||
<div class="uploader-tips">上传证件反面</div>
|
||
</el-upload>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="法人身份证号码"
|
||
prop="legal_person_id_number"
|
||
v-if="applyFormData.legal_person_id_images"
|
||
>
|
||
<el-input
|
||
v-model="applyFormData.legal_person_id_number"
|
||
placeholder="请输入法人身份证号码"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="身份证详细地址"
|
||
prop="legal_person_id_addr"
|
||
v-if="applyFormData.legal_person_id_images"
|
||
>
|
||
<el-input
|
||
v-model="applyFormData.legal_person_id_addr"
|
||
placeholder="请输入身份证详细地址"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="身份证生效日期"
|
||
prop="legal_person_id_period_begin"
|
||
v-if="applyFormData.legal_person_id_images2"
|
||
>
|
||
<el-date-picker
|
||
v-model="applyFormData.legal_person_id_period_begin"
|
||
type="date"
|
||
placeholder="请选择有效日期"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="身份证截止日期"
|
||
prop="legal_person_id_period_end"
|
||
v-if="applyFormData.legal_person_id_images2"
|
||
>
|
||
<el-radio-group v-model="legal_person_date_type">
|
||
<el-radio :label="1">长期</el-radio>
|
||
<el-radio :label="2">非长期</el-radio>
|
||
</el-radio-group>
|
||
<el-date-picker
|
||
v-if="legal_person_date_type == 2"
|
||
v-model="applyFormData.legal_person_id_period_end"
|
||
type="date"
|
||
placeholder="请选择截止日期"
|
||
/>
|
||
</el-form-item>
|
||
</div>
|
||
<div v-if="applyFormData.entity_type === 2">
|
||
<!-- 个人身份证正反面 -->
|
||
<el-form-item
|
||
:label="getLabel('individual_id_images', 1)"
|
||
prop="individual_id_images"
|
||
>
|
||
<el-upload
|
||
:ref="
|
||
(el) => {
|
||
el && (uploadRefs.individual_id_images = el);
|
||
}
|
||
"
|
||
v-model:file-list="uploadFiles.individual_id_images"
|
||
:limit="1"
|
||
list-type="picture-card"
|
||
:auto-upload="true"
|
||
:on-preview="handlePictureCardPreview"
|
||
v-model="applyFormData.individual_id_images"
|
||
:on-remove="
|
||
(file, fileList) =>
|
||
handleRemove(file, fileList, 'individual_id_images')
|
||
"
|
||
:on-success="
|
||
(response, file, fileList) =>
|
||
handleUploadSuccess(
|
||
response,
|
||
file,
|
||
fileList,
|
||
'individual_id_images'
|
||
)
|
||
"
|
||
:on-error="handleUploadError"
|
||
:before-upload="beforeUpload"
|
||
:action="uploadUrl"
|
||
name="upfile"
|
||
:class="{
|
||
'upload-hidden': isUploadHidden('individual_id_images'),
|
||
}"
|
||
>
|
||
<el-icon class="avatar-uploader-icon">
|
||
<Plus />
|
||
</el-icon>
|
||
<div class="uploader-tips">上传证件正面</div>
|
||
</el-upload>
|
||
</el-form-item>
|
||
|
||
<el-form-item
|
||
:label="getLabel('individual_id_images2', 1)"
|
||
prop="individual_id_images2"
|
||
>
|
||
<el-upload
|
||
:ref="
|
||
(el) => {
|
||
el && (uploadRefs.individual_id_images2 = el);
|
||
}
|
||
"
|
||
v-model:file-list="uploadFiles.individual_id_images2"
|
||
:limit="1"
|
||
list-type="picture-card"
|
||
:auto-upload="true"
|
||
:on-preview="handlePictureCardPreview"
|
||
v-model="applyFormData.individual_id_images2"
|
||
:on-remove="
|
||
(file, fileList) =>
|
||
handleRemove(file, fileList, 'individual_id_images2')
|
||
"
|
||
:on-success="
|
||
(response, file, fileList) =>
|
||
handleUploadSuccess(
|
||
response,
|
||
file,
|
||
fileList,
|
||
'individual_id_images2'
|
||
)
|
||
"
|
||
:on-error="handleUploadError"
|
||
:before-upload="beforeUpload"
|
||
:action="uploadUrl"
|
||
name="upfile"
|
||
:class="{
|
||
'upload-hidden': isUploadHidden('individual_id_images2'),
|
||
}"
|
||
>
|
||
<el-icon class="avatar-uploader-icon">
|
||
<Plus />
|
||
</el-icon>
|
||
<div class="uploader-tips">上传证件反面</div>
|
||
</el-upload>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="个人身份证姓名"
|
||
prop="individual_id_name"
|
||
v-if="applyFormData.individual_id_images"
|
||
>
|
||
<el-input
|
||
v-model="applyFormData.individual_id_name"
|
||
placeholder="请输入个人身份证姓名"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="个人身份证号"
|
||
prop="individual_id_number"
|
||
v-if="applyFormData.individual_id_images"
|
||
>
|
||
<el-input
|
||
v-model="applyFormData.individual_id_number"
|
||
placeholder="请输入个人身份证号"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="身份证详细地址"
|
||
prop="individual_id_addr"
|
||
v-if="applyFormData.individual_id_images"
|
||
>
|
||
<el-input
|
||
v-model="applyFormData.individual_id_addr"
|
||
placeholder="请输入身份证详细地址"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="身份证生效日期"
|
||
prop="individual_id_period_begin"
|
||
v-if="applyFormData.individual_id_images2"
|
||
>
|
||
<el-date-picker
|
||
v-model="applyFormData.individual_id_period_begin"
|
||
type="date"
|
||
placeholder="请选择有效日期"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="身份证截止日期"
|
||
prop="individual_id_period_end"
|
||
v-if="applyFormData.individual_id_images2"
|
||
>
|
||
<el-radio-group v-model="individual_date_type">
|
||
<el-radio :label="1">长期</el-radio>
|
||
<el-radio :label="2">非长期</el-radio>
|
||
</el-radio-group>
|
||
<el-date-picker
|
||
v-if="individual_date_type == 2"
|
||
v-model="applyFormData.individual_id_period_end"
|
||
type="date"
|
||
placeholder="请选择截止日期"
|
||
/>
|
||
</el-form-item>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="from_box">
|
||
<div class="tit">结算信息</div>
|
||
<el-form-item label="银行卡" prop="bank_image">
|
||
<el-upload
|
||
:ref="
|
||
(el) => {
|
||
el && (uploadRefs.bank_image = el);
|
||
}
|
||
"
|
||
v-model:file-list="uploadFiles.bank_image"
|
||
:limit="1"
|
||
list-type="picture-card"
|
||
:auto-upload="true"
|
||
:on-preview="handlePictureCardPreview"
|
||
v-model="applyFormData.bank_image"
|
||
:on-remove="
|
||
(file, fileList) => handleRemove(file, fileList, 'bank_image')
|
||
"
|
||
:on-success="
|
||
(response, file, fileList) =>
|
||
handleUploadSuccess(response, file, fileList, 'bank_image')
|
||
"
|
||
:on-error="handleUploadError"
|
||
:before-upload="beforeUpload"
|
||
:action="uploadUrl"
|
||
name="upfile"
|
||
:class="{
|
||
'upload-hidden': isUploadHidden('bank_image'),
|
||
}"
|
||
>
|
||
<el-icon class="avatar-uploader-icon">
|
||
<Plus />
|
||
</el-icon>
|
||
<div class="uploader-tips">上传银行卡<br />免填卡号</div>
|
||
</el-upload>
|
||
<el-button
|
||
type="info"
|
||
plain
|
||
v-if="
|
||
applyFormData.bank_image &&
|
||
!applyFormData.account_number &&
|
||
currentBbatchNo
|
||
"
|
||
@click="handleOcrText(currentBbatchNo, 'bank_image')"
|
||
>点击免填卡号</el-button
|
||
>
|
||
</el-form-item>
|
||
<template
|
||
v-if="applyFormData.entity_type == 1 || applyFormData.bank_image"
|
||
>
|
||
<el-form-item label="开户名称" prop="account_holder_name">
|
||
<el-input
|
||
v-model="applyFormData.account_holder_name"
|
||
placeholder="请输入开户名称"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="银行卡号" prop="account_number">
|
||
<el-input
|
||
v-model="applyFormData.account_number"
|
||
placeholder="请输入银行卡号"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="开户银行" prop="bank_branch_name">
|
||
<el-select-v2
|
||
clearable
|
||
filterable
|
||
remote
|
||
@change="bankListChange"
|
||
:remote-method="bankListRemoteMethod"
|
||
v-model="applyFormData.bank_branch_name"
|
||
placeholder="中国工商银行桂平"
|
||
placement="top-start"
|
||
style="width: 350px"
|
||
:options="bankList2"
|
||
>
|
||
<template #prefix>
|
||
<el-icon>
|
||
<Search />
|
||
</el-icon>
|
||
</template>
|
||
</el-select-v2>
|
||
|
||
<div class="bank_name_tip">
|
||
<el-tooltip placement="top" effect="light">
|
||
<template #content>
|
||
<div class="bank_name_cont">
|
||
<p>
|
||
如开户地为县级市或乡镇区无法搜索到，可选择相同银行的市级支行网点
|
||
</p>
|
||
</div>
|
||
</template>
|
||
|
||
<el-button type="info" link>
|
||
<el-icon
|
||
color="#e6a23c"
|
||
size="14"
|
||
style="margin-right: 5px"
|
||
>
|
||
<WarningFilled /> </el-icon
|
||
>搜不到我的开户银行，怎么处理？</el-button
|
||
>
|
||
</el-tooltip>
|
||
</div>
|
||
</el-form-item>
|
||
</template>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
|
||
<div class="form-button">
|
||
<div class="myui_check_text">检查并确认店铺信息和证件信息无误</div>
|
||
<el-button type="primary" @click="merchToApply">提交审核</el-button>
|
||
</div>
|
||
|
||
<el-dialog v-model="dialogVisible" width="max-content">
|
||
<img w-full :src="dialogImageUrl" alt="Preview Image" />
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, reactive, onMounted, watch } from "vue";
|
||
import { useRouter, useRoute } from "vue-router";
|
||
import { ElMessage } from "element-plus";
|
||
import { Plus, Search, WarningFilled } from "@element-plus/icons-vue";
|
||
|
||
import cityData from "../../stores/cityData";
|
||
import type { CityDataStructure } from "../../stores/cityData";
|
||
import { useUserStore } from "@/stores/userStore";
|
||
|
||
import {
|
||
GetStoreCategories,
|
||
transformStoreCategories,
|
||
GetPostion,
|
||
GetBank,
|
||
merchApply,
|
||
GetAppDistrict,
|
||
} from "@/api/login";
|
||
import { batchNoApi, imgOcrResultApi } from "@/api/upload";
|
||
import { compressImage } from "@/utils/file";
|
||
import { isNumber } from "lodash";
|
||
|
||
interface Bank {
|
||
id: number;
|
||
bank_name: string;
|
||
}
|
||
|
||
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",
|
||
};
|
||
|
||
const userStore = useUserStore();
|
||
const router = useRouter();
|
||
const route = useRoute();
|
||
|
||
const processData = () => {
|
||
const { provinceData, cityData: cityList, areaData } = cityData;
|
||
return provinceData.map((province, provinceIndex) => {
|
||
const provinceItem = {
|
||
...province,
|
||
children: cityList[provinceIndex].map((city, cityIndex) => {
|
||
const cityItem = {
|
||
...city,
|
||
};
|
||
if (areaData[provinceIndex] && areaData[provinceIndex][cityIndex]) {
|
||
cityItem.children = areaData[provinceIndex][cityIndex];
|
||
}
|
||
return cityItem;
|
||
}),
|
||
};
|
||
return provinceItem;
|
||
});
|
||
};
|
||
|
||
const isLoggedIn = ref(!!userStore.token);
|
||
const active = ref(1);
|
||
const loading = ref(false);
|
||
const formRef = ref(null);
|
||
const dialogVisible = ref(false);
|
||
const dialogImageUrl = ref("");
|
||
const cascaderOptions = ref([]);
|
||
const cascaderOptions2 = ref(processData());
|
||
const cityData2 = ref<CityDataStructure>();
|
||
const cascaderOptions3 = ref();
|
||
const bankList2 = ref([]);
|
||
const uploadRefs = ref({
|
||
biz_license_image: null,
|
||
individual_id_images: null,
|
||
individual_id_images2: null,
|
||
legal_person_id_images: null,
|
||
legal_person_id_images2: null,
|
||
bank_image: null,
|
||
});
|
||
const uploadFiles = reactive({
|
||
biz_license_image: [],
|
||
individual_id_images: [],
|
||
individual_id_images2: [],
|
||
legal_person_id_images: [],
|
||
legal_person_id_images2: [],
|
||
bank_image: [],
|
||
});
|
||
|
||
let orcTimeout = 0;
|
||
let currentFile = ref(null);
|
||
let pid = ref<string|number>("");
|
||
let currentBbatchNo = ref("");
|
||
let legal_person_date_type = ref(2);
|
||
let individual_date_type = ref(2);
|
||
|
||
const handleChangeBizCategory = (value) => {
|
||
if (value && value.length === 2) {
|
||
const [bizCategoryId, bizSecondCategoryId] = value;
|
||
applyFormData.biz_category = bizCategoryId;
|
||
applyFormData.biz_second_category = bizSecondCategoryId;
|
||
}
|
||
};
|
||
const applyFormData = reactive({
|
||
bank_name: "",
|
||
bank_district: "",
|
||
bank_area: "",
|
||
openning_bank_code: "",
|
||
clearing_bank_code: "",
|
||
bank_branch_name: "",
|
||
account_number: "",
|
||
account_holder_name: "",
|
||
biz_license_period_end: "9999-12-31",
|
||
biz_category: null,
|
||
biz_license_company: "",
|
||
biz_license_image: "",
|
||
biz_license_number: "",
|
||
biz_second_category: null,
|
||
biz_license_content: "",
|
||
city_id: null,
|
||
contact_name: "",
|
||
county_id: null,
|
||
entity_type: 1,
|
||
environment_image: "",
|
||
front_facade_image: "",
|
||
individual_id_images: "",
|
||
individual_id_images2: "",
|
||
individual_id_number: "",
|
||
individual_id_name: "",
|
||
individual_id_addr: "",
|
||
individual_id_period_begin: "",
|
||
individual_id_period_end: "",
|
||
legal_person_id_images: "",
|
||
legal_person_id_images2: "",
|
||
legal_person_id_number: "",
|
||
legal_person_mobile: "",
|
||
legal_person_name: "",
|
||
legal_person_id_addr: "",
|
||
legal_person_id_period_begin: "",
|
||
legal_person_id_period_end: "",
|
||
license_image: [],
|
||
license_number: "",
|
||
license_type: 1,
|
||
login_mobile: localStorage.getItem("mobilePhone"),
|
||
province_id: null,
|
||
store_address: "",
|
||
map_address: "",
|
||
position: "",
|
||
store_latitude: null,
|
||
store_longitude: null,
|
||
store_name: "",
|
||
mapAddressLabel: "",
|
||
license_imageToString: "",
|
||
store_area: "",
|
||
user_status: "",
|
||
bank_image: "",
|
||
email: "",
|
||
biz_license_period_begin: "",
|
||
});
|
||
const optionsPermitType = [
|
||
{
|
||
value2: 1,
|
||
label: "无需特殊资质",
|
||
},
|
||
{
|
||
value2: 2,
|
||
label: "需许可证资质",
|
||
},
|
||
{
|
||
value2: 3,
|
||
label: "需特许证件资质",
|
||
},
|
||
];
|
||
const rules = reactive({
|
||
contact_name: [
|
||
{ required: true, message: "请输入联系人姓名", trigger: "blur" },
|
||
],
|
||
legal_person_id_addr: [
|
||
{ required: true, message: "请输入法人身份证详细地址", trigger: "blur" },
|
||
],
|
||
biz_license_content: [
|
||
{ required: true, message: "请输入经营范围内容", trigger: "blur" },
|
||
],
|
||
// email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
|
||
biz_category: [
|
||
{ required: true, message: "请选择经营品类", trigger: "change" },
|
||
],
|
||
store_name: [{ required: true, message: "请输入门店名称", trigger: "blur" }],
|
||
map_address: [
|
||
{ required: true, message: "请选择地图地址", trigger: "change" },
|
||
],
|
||
// position: [{ required: true, message: "请选择地图地址", trigger: "change" }],
|
||
store_address: [
|
||
{ required: true, message: "请输入详细地址", trigger: "blur" },
|
||
],
|
||
front_facade_image: [
|
||
{ required: true, message: "请上传门脸图", trigger: ["change", "blur"] },
|
||
],
|
||
environment_image: [
|
||
{ required: true, message: "请上传环境图", trigger: ["change", "blur"] },
|
||
],
|
||
entity_type: [{ required: true, message: "请主体类型", trigger: "change" }],
|
||
// license_type: [{ required: true, message: "请选择许可证类型", trigger: "change" }],
|
||
// license_number: [{ required: true, message: "请输入许可证编号", trigger: "blur" }],
|
||
biz_license_number: [
|
||
{ required: true, message: "请输入注册号", trigger: "blur" },
|
||
],
|
||
biz_license_company: [
|
||
{ required: true, message: "请输入公司名称", trigger: "blur" },
|
||
],
|
||
legal_person_name: [
|
||
{ required: true, message: "请输入法人姓名", trigger: "blur" },
|
||
],
|
||
legal_person_mobile: [
|
||
{ required: true, message: "请输入法人手机号", trigger: "blur" },
|
||
],
|
||
legal_person_id_period_begin: [
|
||
{
|
||
required: true,
|
||
message: "请输入法人身份证开始有效日期",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
legal_person_id_period_end: [
|
||
{
|
||
required: true,
|
||
message: "请输入法人身份证截止有效日期",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
legal_person_id_number: [
|
||
{ required: true, message: "请输入法人身份证号", trigger: "blur" },
|
||
],
|
||
biz_license_image: [
|
||
{ required: true, message: "请上传营业执照", trigger: "change" },
|
||
],
|
||
legal_person_id_images: [
|
||
{ required: true, message: "请上传法人身份证正面", trigger: "change" },
|
||
],
|
||
legal_person_id_images2: [
|
||
{ required: true, message: "请上传法人身份证反面", trigger: "change" },
|
||
],
|
||
individual_id_name: [
|
||
{ required: true, message: "请输入个人身份证姓名", trigger: "blur" },
|
||
],
|
||
individual_id_number: [
|
||
{ required: true, message: "请输入个人身份证号", trigger: "blur" },
|
||
],
|
||
individual_id_images: [
|
||
{ required: true, message: "请上传个人身份证正面", trigger: "change" },
|
||
],
|
||
individual_id_images2: [
|
||
{ required: true, message: "请上传个人身份证反面", trigger: "change" },
|
||
],
|
||
individual_id_addr: [
|
||
{ required: true, message: "请输入个人身份证详细地址", trigger: "change" },
|
||
],
|
||
individual_id_period_begin: [
|
||
{
|
||
required: true,
|
||
message: "请选择个人身份证开始有效日期",
|
||
trigger: "change",
|
||
},
|
||
],
|
||
individual_id_period_end: [
|
||
{
|
||
required: true,
|
||
message: "请选择个人身份证截止有效日期",
|
||
trigger: "change",
|
||
},
|
||
],
|
||
bank_branch_name: [
|
||
{ required: true, message: "请选择银行", trigger: "change" },
|
||
],
|
||
// bank_branch_name: [{ required: true, message: '请输入支行名称', trigger: 'blur' }],
|
||
account_number: [
|
||
{ required: true, message: "请输入银行卡号", trigger: "blur" },
|
||
],
|
||
account_holder_name: [
|
||
{ required: true, message: "请输入开户名称", trigger: "blur" },
|
||
],
|
||
});
|
||
|
||
watch(legal_person_date_type, (newVal) => {
|
||
if (newVal == 1) {
|
||
applyFormData.legal_person_id_period_end = "9999-12-31";
|
||
} else {
|
||
applyFormData.legal_person_id_period_end = "";
|
||
}
|
||
(formRef.value as any).validate("legal_person_id_period_end");
|
||
});
|
||
|
||
watch(individual_date_type, (newVal) => {
|
||
if (newVal == 1) {
|
||
applyFormData.individual_id_period_end = "9999-12-31";
|
||
} else {
|
||
applyFormData.individual_id_period_end = "";
|
||
}
|
||
(formRef.value as any).validate("individual_id_period_end");
|
||
});
|
||
|
||
const handleMerchApply = async () => {
|
||
const {
|
||
bank_name,
|
||
bank_district,
|
||
bank_area,
|
||
openning_bank_code,
|
||
clearing_bank_code,
|
||
account_number,
|
||
account_holder_name,
|
||
biz_license_company,
|
||
biz_license_image,
|
||
biz_license_number,
|
||
biz_second_category,
|
||
city_id,
|
||
contact_name,
|
||
county_id,
|
||
entity_type,
|
||
environment_image,
|
||
front_facade_image,
|
||
individual_id_images,
|
||
individual_id_images2,
|
||
individual_id_number,
|
||
individual_id_name,
|
||
legal_person_id_images,
|
||
legal_person_id_images2,
|
||
legal_person_id_number,
|
||
legal_person_mobile,
|
||
legal_person_name,
|
||
license_image,
|
||
license_number,
|
||
license_type,
|
||
login_mobile,
|
||
province_id,
|
||
store_address,
|
||
store_latitude,
|
||
store_longitude,
|
||
store_name,
|
||
store_area,
|
||
biz_category,
|
||
biz_license_content,
|
||
legal_person_id_addr,
|
||
legal_person_id_period_begin,
|
||
legal_person_id_period_end,
|
||
individual_id_addr,
|
||
individual_id_period_begin,
|
||
individual_id_period_end,
|
||
} = applyFormData;
|
||
|
||
let ext = {};
|
||
|
||
if (isNumber(pid.value)) {
|
||
ext = {
|
||
id: pid.value,
|
||
};
|
||
}
|
||
|
||
const res = await merchApply({
|
||
...ext,
|
||
bank_name,
|
||
bank_district,
|
||
bank_area,
|
||
openning_bank_code,
|
||
clearing_bank_code,
|
||
account_number,
|
||
account_holder_name,
|
||
biz_category,
|
||
biz_license_content,
|
||
biz_license_company,
|
||
biz_license_image,
|
||
biz_license_number,
|
||
biz_second_category,
|
||
city_id,
|
||
contact_name,
|
||
county_id,
|
||
entity_type,
|
||
environment_image,
|
||
front_facade_image,
|
||
individual_id_images,
|
||
individual_id_images2,
|
||
individual_id_number,
|
||
individual_id_name,
|
||
legal_person_id_images,
|
||
legal_person_id_images2,
|
||
legal_person_id_number,
|
||
legal_person_mobile,
|
||
legal_person_name,
|
||
license_image,
|
||
license_number,
|
||
license_type,
|
||
login_mobile,
|
||
province_id,
|
||
store_address: store_area.replace(/\//g, "") + store_address,
|
||
store_latitude,
|
||
store_longitude,
|
||
store_name,
|
||
store_area,
|
||
legal_person_id_addr,
|
||
legal_person_id_period_begin,
|
||
legal_person_id_period_end,
|
||
individual_id_addr,
|
||
individual_id_period_begin,
|
||
individual_id_period_end,
|
||
email: `${login_mobile}@qq.com`,
|
||
});
|
||
if (res.code == 0 && res.status == 200) {
|
||
ElMessage.success("已提交开店申请~");
|
||
setTimeout(() => {
|
||
router.push({ name: "check" });
|
||
}, 1000);
|
||
}
|
||
};
|
||
|
||
const checkForm = async () => {
|
||
const isValid = await (formRef.value as any).validate((valid) => {
|
||
return valid;
|
||
});
|
||
|
||
if (applyFormData.entity_type == 2 && !applyFormData.bank_image) {
|
||
ElMessage.error("请上传银行卡");
|
||
return;
|
||
}
|
||
|
||
if (isValid) {
|
||
handleMerchApply();
|
||
}
|
||
};
|
||
|
||
const next = () => {
|
||
if (active.value < 3) {
|
||
active.value++;
|
||
window.scrollTo({
|
||
top: 0, //回到顶部
|
||
left: 0,
|
||
behavior: "smooth",
|
||
});
|
||
}
|
||
};
|
||
const pre = () => {
|
||
if (active.value > 1) {
|
||
active.value--;
|
||
window.scrollTo({
|
||
top: 0, //回到顶部
|
||
left: 0,
|
||
behavior: "smooth",
|
||
});
|
||
}
|
||
};
|
||
|
||
const getLabel = (field: string, limit: number) => {
|
||
const labels = {
|
||
front_facade_image: "门脸图",
|
||
environment_image: "环境图",
|
||
biz_license_image: "营业执照",
|
||
license_image: "许可证",
|
||
legal_person_id_images: "法人身份证正面",
|
||
legal_person_id_images2: "法人身份证反面",
|
||
individual_id_images: "个人身份证正面",
|
||
individual_id_images2: "个人身份证反面",
|
||
};
|
||
|
||
if (field === "license_image") {
|
||
return `${labels[field]}(${applyFormData[field].length}/${limit})`;
|
||
} else {
|
||
const count = applyFormData[field] ? 1 : 0;
|
||
return `${labels[field]}(${count}/${limit})`;
|
||
}
|
||
};
|
||
|
||
const showAll = () => {
|
||
applyFormData.license_imageToString = applyFormData.license_image
|
||
.map((url) => `${url}`)
|
||
.join(",");
|
||
};
|
||
|
||
const merchToApply = async () => {
|
||
console.log("formdata", applyFormData);
|
||
// showAll();
|
||
checkForm();
|
||
};
|
||
|
||
const bankListChange = (val) => {
|
||
const item: any = bankList2.value.find((item: any) => item.value == val);
|
||
if (item) {
|
||
applyFormData.bank_name = item.label;
|
||
applyFormData.bank_district = item.district;
|
||
applyFormData.bank_area = item.area;
|
||
applyFormData.openning_bank_code = item.branch_bank_no;
|
||
applyFormData.clearing_bank_code = item.clear_no;
|
||
}
|
||
};
|
||
|
||
const bankListRemoteMethod = (val) => {
|
||
if (!val) {
|
||
bankList2.value = [];
|
||
return;
|
||
}
|
||
|
||
GetBank({
|
||
keyword: val, // 银行名称关键字,小地方支行，查不到，调整关键字范围，尝试市级银行
|
||
pageNum: 1,
|
||
pageSize: 2000,
|
||
}).then((res) => {
|
||
if (res.status == 200) {
|
||
bankList2.value = res.data.items.map((item) => {
|
||
return {
|
||
district: item.district,
|
||
area: item.area,
|
||
branch_bank_no: item.branch_bank_no,
|
||
clear_no: item.clear_no,
|
||
label: item.branch_bank_name,
|
||
value: item.branch_bank_no,
|
||
};
|
||
});
|
||
}
|
||
});
|
||
};
|
||
|
||
const handleChange = (value) => {
|
||
// 假设 cascader 的值是一个数组，格式为 [省份ID, 城市ID, 区县ID]
|
||
console.log(11, value);
|
||
|
||
if (value && value.length === 3) {
|
||
const [provinceId, cityId, countyId] = value;
|
||
applyFormData.province_id = provinceId;
|
||
applyFormData.city_id = cityId;
|
||
applyFormData.county_id = countyId;
|
||
}
|
||
|
||
const names = value.map((id, level) => {
|
||
const findName = (options, targetId) => {
|
||
for (const item of options) {
|
||
if (item.value === targetId) {
|
||
return item.label;
|
||
}
|
||
if (item.children) {
|
||
const childName = findName(item.children, targetId);
|
||
if (childName) return childName;
|
||
}
|
||
}
|
||
return "";
|
||
};
|
||
|
||
return findName(cascaderOptions2.value, id);
|
||
});
|
||
|
||
const str = names?.join("/");
|
||
|
||
applyFormData.mapAddressLabel = str;
|
||
applyFormData.store_area = str;
|
||
(formRef.value as any).validate();
|
||
};
|
||
|
||
const autocompleteOptions = ref([]);
|
||
const querySearch = async (queryString, cb) => {
|
||
if (!queryString) {
|
||
cb([]);
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const params = {
|
||
query: queryString,
|
||
region:
|
||
applyFormData.mapAddressLabel.indexOf("/") &&
|
||
applyFormData.mapAddressLabel?.split("/")[1],
|
||
city_limit: true,
|
||
ret_coordtype: "gcj02ll",
|
||
};
|
||
|
||
const res = await GetPostion(params);
|
||
|
||
if (res?.result?.length) {
|
||
const results = res.result
|
||
.filter((item) => "location" in item)
|
||
.map((item) => ({
|
||
value: item.name, // 确保有 value 属性
|
||
label: item.name, // 确保有 label 属性
|
||
name: item.name,
|
||
address: item.address || "", // 确保 address 属性存在
|
||
lat: item.location?.lat || "", // 确保 lat 属性存在
|
||
lng: item.location?.lng || "", // 确保 lng 属性存在
|
||
}));
|
||
cb(results);
|
||
} else {
|
||
ElMessage.error("搜索失败");
|
||
cb([]);
|
||
}
|
||
} catch (error) {
|
||
ElMessage.error("搜索失败");
|
||
cb([]);
|
||
}
|
||
};
|
||
|
||
const handleSelect = (item) => {
|
||
applyFormData.position = "";
|
||
applyFormData.store_address = item.value;
|
||
applyFormData.store_latitude = item.lat;
|
||
applyFormData.store_longitude = item.lng;
|
||
(formRef.value as any).validate();
|
||
};
|
||
|
||
const beforeUpload = async (file) => {
|
||
const isJPG = file.type === "image/jpeg";
|
||
const isPNG = file.type === "image/png";
|
||
const isLarge = file.size / 1024 / 1024 < 10;
|
||
|
||
loading.value = true;
|
||
|
||
if (!isJPG && !isPNG) {
|
||
loading.value = false;
|
||
ElMessage.error("上传的图片必须是JPG或PNG格式！");
|
||
return false;
|
||
}
|
||
|
||
if (!isLarge) {
|
||
loading.value = false;
|
||
ElMessage.error("上传的图片大小不能超过10MB！");
|
||
return false;
|
||
}
|
||
|
||
return true;
|
||
};
|
||
|
||
const uploadUrl = ref("https://mall.gpxscs.cn/mobile/shop/oss/upload");
|
||
|
||
const handleRemove = (file, fileList, field) => {
|
||
if (field === "license_image") {
|
||
const removedUrl = file.url;
|
||
applyFormData[field] = applyFormData[field].filter(
|
||
(url) => url !== removedUrl
|
||
);
|
||
} else {
|
||
applyFormData[field] = "";
|
||
}
|
||
};
|
||
|
||
const isUploadHidden = (field: string) => {
|
||
const limits = {
|
||
license_image: 5,
|
||
};
|
||
const limit = limits[field] || 1;
|
||
|
||
if (field === "license_image") {
|
||
return applyFormData[field].length >= limit;
|
||
} else {
|
||
return applyFormData[field] != "" || applyFormData[field].length != 0;
|
||
}
|
||
};
|
||
|
||
const handleExceed = (files, fileList) => {
|
||
ElMessage.warning(`最多只能上传1张图片`);
|
||
};
|
||
|
||
const handlePictureCardPreview = (uploadFile) => {
|
||
dialogImageUrl.value = uploadFile.url!;
|
||
dialogVisible.value = true;
|
||
};
|
||
|
||
const getBatchNo = async (file, type, field) => {
|
||
loading.value = true;
|
||
currentBbatchNo.value = "";
|
||
file = await compressImage(file);
|
||
const rsp = await batchNoApi(file, type)
|
||
.then((res) => {
|
||
loading.value = false;
|
||
return res;
|
||
})
|
||
.catch(() => {
|
||
loading.value = false;
|
||
const _uploadRef = uploadRefs.value[field];
|
||
if (_uploadRef) {
|
||
_uploadRef.clearFiles();
|
||
uploadFiles[field] = [];
|
||
cleanFile(field);
|
||
}
|
||
ElMessage.error("网络异常，请重试！");
|
||
});
|
||
|
||
if (rsp?.code == 0 && rsp?.status == 200) {
|
||
return rsp?.data;
|
||
} else {
|
||
return null;
|
||
}
|
||
};
|
||
|
||
const getOcrText = async (batchNo, type) => {
|
||
return new Promise(async (resolve, reject) => {
|
||
let formData: null | FormData = new FormData();
|
||
|
||
formData.append("batchNo", batchNo);
|
||
formData.append("imgType", type);
|
||
|
||
clearTimeout(orcTimeout);
|
||
|
||
orcTimeout = setTimeout(async () => {
|
||
const imgOcrRes = await imgOcrResultApi(formData).finally(() => {
|
||
loading.value = false;
|
||
});
|
||
|
||
formData = null;
|
||
clearTimeout(orcTimeout);
|
||
|
||
if (imgOcrRes.status != 200) {
|
||
reject(imgOcrRes?.data);
|
||
} else {
|
||
resolve(imgOcrRes?.data);
|
||
}
|
||
|
||
loading.value = false;
|
||
}, 2000);
|
||
});
|
||
};
|
||
|
||
const handleOcrText = async (batchNo, imgType) => {
|
||
loading.value = true;
|
||
|
||
switch (imgType) {
|
||
case "biz_license_image":
|
||
var res = (await getOcrText(
|
||
batchNo,
|
||
orcImgTypeConf.BUSINESS_LICENCE
|
||
)) as any;
|
||
|
||
console.log("biz_license_image", res);
|
||
applyFormData.biz_license_company = res.bizLicenseCompanyName;
|
||
applyFormData.legal_person_name = res.bizLicenseOwnerName;
|
||
applyFormData.biz_license_number = res.bizLicenseCreditCode;
|
||
applyFormData.biz_license_content = res.bizLicenseScope;
|
||
applyFormData.account_holder_name = res.bizLicenseCompanyName;
|
||
applyFormData.biz_license_period_begin = res.bizLicenseStartTime
|
||
.replace(/年|月|日/g, "-")
|
||
.replace(/-$/g, "")
|
||
.replace(/-+/g, "-");
|
||
break;
|
||
case "legal_person_id_images":
|
||
var res = (await getOcrText(
|
||
batchNo,
|
||
orcImgTypeConf.FR_ID_CARD_FRONT
|
||
)) as any;
|
||
|
||
console.log("legal_person_id_images", res);
|
||
applyFormData.legal_person_id_number = res.idNumber;
|
||
applyFormData.legal_person_id_addr = res.address;
|
||
break;
|
||
case "legal_person_id_images2":
|
||
var res = (await getOcrText(
|
||
batchNo,
|
||
orcImgTypeConf.FR_ID_CARD_BEHIND
|
||
)) as any;
|
||
var validity = res.validity.split("-");
|
||
|
||
console.log("legal_person_id_images2", res);
|
||
applyFormData.legal_person_id_period_begin = validity[0];
|
||
|
||
if (validity[1] != "长期") {
|
||
applyFormData.legal_person_id_period_end = validity[1];
|
||
} else {
|
||
legal_person_date_type.value = 1;
|
||
applyFormData.legal_person_id_period_end = "9999-12-31";
|
||
}
|
||
break;
|
||
case "individual_id_images":
|
||
var res = (await getOcrText(
|
||
batchNo,
|
||
orcImgTypeConf.ID_CARD_FRONT
|
||
)) as any;
|
||
|
||
console.log("individual_id_images", res);
|
||
applyFormData.individual_id_name = res.name;
|
||
applyFormData.account_holder_name = res.name;
|
||
applyFormData.individual_id_number = res.idNumber;
|
||
applyFormData.individual_id_addr = res.address;
|
||
break;
|
||
case "individual_id_images2":
|
||
var res = (await getOcrText(
|
||
batchNo,
|
||
orcImgTypeConf.ID_CARD_BEHIND
|
||
)) as any;
|
||
|
||
var validity = res.validity.split("-");
|
||
|
||
console.log("individual_id_images2", res);
|
||
applyFormData.individual_id_period_begin = validity[0];
|
||
|
||
if (validity[1] != "长期") {
|
||
applyFormData.individual_id_period_end = validity[1];
|
||
} else {
|
||
legal_person_date_type.value = 1;
|
||
applyFormData.individual_id_period_end = "9999-12-31";
|
||
}
|
||
break;
|
||
case "bank_image":
|
||
var res = (await getOcrText(batchNo, orcImgTypeConf.BANK_CARD)) as any;
|
||
console.log("bank_image", res);
|
||
applyFormData.account_number = res.card_number;
|
||
break;
|
||
}
|
||
|
||
loading.value = false;
|
||
(formRef.value as any).validate();
|
||
};
|
||
|
||
const cleanFile = (field) => {
|
||
if (field === "license_image") {
|
||
applyFormData[field] = [];
|
||
} else {
|
||
applyFormData[field] = "";
|
||
}
|
||
currentFile.value = null;
|
||
};
|
||
|
||
const handleUploadSuccess = async (response, file, fileList, field) => {
|
||
if (response && response.status === 200 && response.code === 0) {
|
||
if (response.data && response.data.url) {
|
||
file.url = response.data.url;
|
||
|
||
if (field === "license_image") {
|
||
applyFormData[field].push(file.url);
|
||
} else {
|
||
applyFormData[field] = file.url;
|
||
}
|
||
|
||
currentFile.value = file.raw;
|
||
loading.value = false;
|
||
|
||
switch (field) {
|
||
case "biz_license_image":
|
||
var res = await getBatchNo(
|
||
file.raw,
|
||
orcImgTypeConf.BUSINESS_LICENCE,
|
||
field
|
||
);
|
||
currentBbatchNo.value = res.batchNo;
|
||
handleOcrText(res.batchNo, field);
|
||
break;
|
||
case "legal_person_id_images":
|
||
var res = await getBatchNo(
|
||
file.raw,
|
||
orcImgTypeConf.FR_ID_CARD_FRONT,
|
||
field
|
||
);
|
||
currentBbatchNo.value = res.batchNo;
|
||
handleOcrText(res.batchNo, field);
|
||
break;
|
||
case "legal_person_id_images2":
|
||
var res = await getBatchNo(
|
||
file.raw,
|
||
orcImgTypeConf.FR_ID_CARD_BEHIND,
|
||
field
|
||
);
|
||
currentBbatchNo.value = res.batchNo;
|
||
handleOcrText(res.batchNo, field);
|
||
break;
|
||
case "individual_id_images":
|
||
var res = await getBatchNo(
|
||
file.raw,
|
||
orcImgTypeConf.ID_CARD_FRONT,
|
||
field
|
||
);
|
||
currentBbatchNo.value = res.batchNo;
|
||
handleOcrText(res.batchNo, field);
|
||
break;
|
||
case "individual_id_images2":
|
||
var res = await getBatchNo(
|
||
file.raw,
|
||
orcImgTypeConf.ID_CARD_BEHIND,
|
||
field
|
||
);
|
||
currentBbatchNo.value = res.batchNo;
|
||
handleOcrText(res.batchNo, field);
|
||
break;
|
||
case "bank_image":
|
||
var res = await getBatchNo(file.raw, orcImgTypeConf.BANK_CARD, field);
|
||
currentBbatchNo.value = res.batchNo;
|
||
handleOcrText(res.batchNo, field);
|
||
break;
|
||
}
|
||
} else {
|
||
ElMessage.error("文件上传成功，但未返回文件 URL");
|
||
loading.value = false;
|
||
}
|
||
} else {
|
||
ElMessage.error(response.msg || "文件上传失败");
|
||
loading.value = false;
|
||
}
|
||
|
||
(formRef.value as any).validate();
|
||
};
|
||
|
||
const handleUploadError = (error, file) => {
|
||
loading.value = false;
|
||
ElMessage.error("文件上传失败");
|
||
};
|
||
|
||
const clearOtherFields = () => {
|
||
applyFormData.individual_id_number = "";
|
||
applyFormData.individual_id_name = "";
|
||
applyFormData.individual_id_images = "";
|
||
applyFormData.individual_id_images2 = "";
|
||
applyFormData.individual_id_addr = "";
|
||
applyFormData.individual_id_period_begin = "";
|
||
applyFormData.individual_id_period_end = "";
|
||
|
||
applyFormData.license_type = 1;
|
||
applyFormData.license_number = "";
|
||
applyFormData.license_image = [];
|
||
applyFormData.biz_license_image = "";
|
||
applyFormData.biz_license_number = "";
|
||
applyFormData.biz_license_company = "";
|
||
applyFormData.biz_license_content = "";
|
||
applyFormData.legal_person_name = "";
|
||
applyFormData.legal_person_mobile = "";
|
||
applyFormData.legal_person_id_number = "";
|
||
applyFormData.legal_person_id_images = "";
|
||
applyFormData.legal_person_id_images2 = "";
|
||
applyFormData.legal_person_id_addr = "";
|
||
applyFormData.legal_person_id_period_begin = "";
|
||
applyFormData.legal_person_id_period_end = "";
|
||
};
|
||
|
||
onMounted(() => {
|
||
if (!isLoggedIn.value) {
|
||
router.push({ name: "index" });
|
||
return;
|
||
}
|
||
|
||
const id = route.query?.id;
|
||
|
||
if (isNumber(id)) {
|
||
pid.value = id;
|
||
}
|
||
|
||
GetStoreCategories()
|
||
.then((res) => {
|
||
if (res.code === 0 && res.status === 200) {
|
||
cascaderOptions.value = transformStoreCategories(res.data);
|
||
} else {
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
ElMessage.error("获取店铺分类失败");
|
||
});
|
||
|
||
GetAppDistrict()
|
||
.then((res) => {
|
||
if (res.code === 0 && res.status === 200) {
|
||
cityData2.value = res.data;
|
||
console.log(cascaderOptions3.value);
|
||
} else {
|
||
ElMessage.error("获取银行失败");
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
ElMessage.error("获取银行失败");
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
:deep(.el-upload--picture-card),
|
||
:deep(.el-upload-list__item) {
|
||
width: 96px;
|
||
height: 96px;
|
||
text-align: center;
|
||
flex-direction: column;
|
||
color: #666;
|
||
line-height: 20px;
|
||
}
|
||
|
||
.signUp-container {
|
||
display: flex;
|
||
padding-top: 12px;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #eee;
|
||
|
||
.tit {
|
||
font-size: 16px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.steps-container {
|
||
width: 50%;
|
||
padding: 15px;
|
||
border-radius: 5px;
|
||
background: #fff;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
:deep(.upload-hidden .el-upload--picture-card) {
|
||
display: none;
|
||
}
|
||
|
||
.form-submit {
|
||
width: 50%;
|
||
min-height: 300px;
|
||
|
||
:deep(.el-form) {
|
||
max-width: 100% !important;
|
||
}
|
||
|
||
.from_box {
|
||
width: 100%;
|
||
padding: 15px;
|
||
margin: 0 0 12px;
|
||
border-radius: 5px;
|
||
background: #fff;
|
||
}
|
||
}
|
||
|
||
.form-button {
|
||
width: 100%;
|
||
text-align: center;
|
||
padding: 20px;
|
||
background: #fff;
|
||
}
|
||
}
|
||
|
||
.bank_name_tip {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.bank_name_cont {
|
||
width: 360px;
|
||
|
||
h3 {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
p {
|
||
font-size: 14px;
|
||
margin-bottom: 12px;
|
||
}
|
||
}
|
||
|
||
.myui_check_text {
|
||
color: #999;
|
||
padding-bottom: 10px;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.auto-item {
|
||
p {
|
||
font-size: 15px;
|
||
font-weight: 900;
|
||
}
|
||
|
||
span {
|
||
font-size: 10px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.el-cascader-menu {
|
||
width: 120px;
|
||
min-width: 120px;
|
||
}
|
||
|
||
.signUp-container {
|
||
.steps-container {
|
||
width: 100%;
|
||
}
|
||
|
||
.form-submit {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.bank_name_tip {
|
||
margin-left: 0px;
|
||
}
|
||
}
|
||
</style>
|