add
This commit is contained in:
@@ -22,7 +22,7 @@
|
||||
label-width="10em"
|
||||
class="enterprise-form-content"
|
||||
>
|
||||
<div class="form-section">
|
||||
<div class="form-section">
|
||||
<h3 class="section-title">基本信息</h3>
|
||||
|
||||
<!-- 企业名称和OCR识别区域 -->
|
||||
@@ -42,21 +42,7 @@
|
||||
<div class="ocr-compact">
|
||||
<div class="ocr-header-compact">
|
||||
<el-icon class="text-green-600"><DocumentIcon /></el-icon>
|
||||
<span class="ocr-title-compact">OCR识别</span>
|
||||
<el-upload
|
||||
ref="uploadRef"
|
||||
:auto-upload="false"
|
||||
:show-file-list="false"
|
||||
:on-change="handleFileChange"
|
||||
:before-upload="beforeUpload"
|
||||
accept="image/jpeg,image/jpg,image/png,image/webp"
|
||||
class="ocr-uploader-compact"
|
||||
>
|
||||
<el-button type="success" size="small" plain>
|
||||
<el-icon><ArrowUpTrayIcon /></el-icon>
|
||||
上传营业执照
|
||||
</el-button>
|
||||
</el-upload>
|
||||
<span class="ocr-title-compact">可进行OCR识别，请在下方上传营业执照</span>
|
||||
</div>
|
||||
<div v-if="ocrLoading" class="ocr-status-compact">
|
||||
<el-icon class="is-loading"><Loading /></el-icon>
|
||||
@@ -84,6 +70,7 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row :gutter="16" class="mb-4">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="法人姓名" prop="legalPersonName">
|
||||
@@ -96,21 +83,9 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="法人身份证号" prop="legalPersonID">
|
||||
<el-input
|
||||
v-model="form.legalPersonID"
|
||||
placeholder="请输入法人身份证号"
|
||||
clearable
|
||||
size="default"
|
||||
class="form-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="16" class="mb-4">
|
||||
<el-col :span="24">
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item label="企业地址" prop="enterpriseAddress">
|
||||
<el-input
|
||||
v-model="form.enterpriseAddress"
|
||||
@@ -122,8 +97,78 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 营业执照图片上传（对应 BusinessLicenseImageURL） -->
|
||||
<el-row :gutter="16" class="mb-4">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="营业执照图片" prop="businessLicenseImageURL">
|
||||
<el-upload
|
||||
class="upload-area single-upload-area"
|
||||
action="#"
|
||||
list-type="picture-card"
|
||||
:auto-upload="false"
|
||||
:file-list="businessLicenseFileList"
|
||||
:limit="1"
|
||||
:on-change="handleBusinessLicenseChange"
|
||||
:on-remove="handleBusinessLicenseRemove"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<el-icon class="upload-icon"><ArrowUpTrayIcon /></el-icon>
|
||||
<div class="el-upload__text">上传清晰可辨的营业执照图片</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 办公场地图片上传 -->
|
||||
<el-row :gutter="16" class="mb-4">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="办公场地照片">
|
||||
<div class="text-xs mb-1 text-blue-500">
|
||||
请在非 IE 浏览器下上传大小不超过 3M 的图片，最多 10 张，需体现门楣 LOGO、办公设备与工作人员。
|
||||
</div>
|
||||
<div
|
||||
class="upload-drop-zone"
|
||||
:class="{ 'is-dragover': officePlaceDragover }"
|
||||
@dragover.prevent="officePlaceDragover = true"
|
||||
@dragleave.prevent="officePlaceDragover = false"
|
||||
@drop.prevent="onOfficePlaceDrop"
|
||||
>
|
||||
<el-upload
|
||||
ref="officePlaceUploadRef"
|
||||
class="upload-area"
|
||||
action="#"
|
||||
list-type="picture-card"
|
||||
:auto-upload="false"
|
||||
v-model:file-list="officePlaceFileList"
|
||||
accept="image/jpeg,image/jpg,image/png,image/webp"
|
||||
multiple
|
||||
:limit="10"
|
||||
:on-change="handleOfficePlaceChange"
|
||||
:on-remove="handleOfficePlaceRemove"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<div class="upload-trigger-inner">
|
||||
<el-icon class="upload-icon"><ArrowUpTrayIcon /></el-icon>
|
||||
<div class="el-upload__text">上传办公场地环境照片</div>
|
||||
</div>
|
||||
</el-upload>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row :gutter="16" class="mb-4">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="法人身份证号" prop="legalPersonID">
|
||||
<el-input
|
||||
v-model="form.legalPersonID"
|
||||
placeholder="请输入法人身份证号"
|
||||
clearable
|
||||
size="default"
|
||||
class="form-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="法人手机号" prop="legalPersonPhone">
|
||||
<el-input
|
||||
@@ -161,6 +206,149 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<h3 class="section-title">授权代表信息</h3>
|
||||
<p class="section-desc">授权代表信息用于证明该人员已获得企业授权，请确保姓名、身份证号、手机号及身份证正反面照片真实有效。</p>
|
||||
|
||||
<!-- 授权代表信息 -->
|
||||
<el-row :gutter="16" class="mb-4">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="授权代表姓名" prop="authorizedRepName">
|
||||
<el-input
|
||||
v-model="form.authorizedRepName"
|
||||
placeholder="请输入授权代表姓名"
|
||||
clearable
|
||||
size="default"
|
||||
class="form-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="授权代表身份证号" prop="authorizedRepID">
|
||||
<el-input
|
||||
v-model="form.authorizedRepID"
|
||||
placeholder="请输入授权代表身份证号"
|
||||
clearable
|
||||
size="default"
|
||||
class="form-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="授权代表手机号" prop="authorizedRepPhone">
|
||||
<el-input
|
||||
v-model="form.authorizedRepPhone"
|
||||
placeholder="请输入授权代表手机号"
|
||||
clearable
|
||||
size="default"
|
||||
maxlength="11"
|
||||
class="form-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 授权代表身份证图片上传 -->
|
||||
<el-row :gutter="16" class="mb-4">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="身份证人像面" prop="authorizedRepIDImageURLs">
|
||||
<el-upload
|
||||
class="upload-area single-upload-area"
|
||||
action="#"
|
||||
list-type="picture-card"
|
||||
:auto-upload="false"
|
||||
:file-list="authorizedRepIDFrontFileList"
|
||||
:limit="1"
|
||||
:on-change="handleAuthorizedRepIDFrontChange"
|
||||
:on-remove="handleAuthorizedRepIDFrontRemove"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<el-icon class="upload-icon"><ArrowUpTrayIcon /></el-icon>
|
||||
<div class="el-upload__text">上传授权代表身份证人像面</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="身份证国徽面" prop="authorizedRepIDImageURLs">
|
||||
<el-upload
|
||||
class="upload-area single-upload-area"
|
||||
action="#"
|
||||
list-type="picture-card"
|
||||
:auto-upload="false"
|
||||
:file-list="authorizedRepIDBackFileList"
|
||||
:limit="1"
|
||||
:on-change="handleAuthorizedRepIDBackChange"
|
||||
:on-remove="handleAuthorizedRepIDBackRemove"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<el-icon class="upload-icon"><ArrowUpTrayIcon /></el-icon>
|
||||
<div class="el-upload__text">上传授权代表身份证国徽面</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<h3 class="section-title">应用场景填写</h3>
|
||||
<p class="section-desc">请描述您调用接口的具体业务场景</p>
|
||||
|
||||
<!-- 接口用途描述（对应 APIUsage） -->
|
||||
<el-row :gutter="16" class="mb-4">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="应用场景" prop="apiUsage">
|
||||
<el-input
|
||||
v-model="form.apiUsage"
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
placeholder="请描述您调用接口的具体业务场景和用途"
|
||||
maxlength="500"
|
||||
show-word-limit
|
||||
class="form-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
|
||||
<!-- 应用场景附件图片上传 -->
|
||||
<el-row :gutter="16" class="mb-4">
|
||||
<el-col :span="24">
|
||||
|
||||
<el-form-item label="应用场景附件">
|
||||
<div class="text-xs mb-1 text-blue-500">
|
||||
请在非IE浏览器下上传大小不超过3M的图片，要求:不超过10张后台应用截图
|
||||
</div>
|
||||
<div
|
||||
class="upload-drop-zone"
|
||||
:class="{ 'is-dragover': scenarioDragover }"
|
||||
@dragover.prevent="scenarioDragover = true"
|
||||
@dragleave.prevent="scenarioDragover = false"
|
||||
@drop.prevent="onScenarioDrop"
|
||||
>
|
||||
<el-upload
|
||||
ref="scenarioUploadRef"
|
||||
class="upload-area"
|
||||
action="#"
|
||||
list-type="picture-card"
|
||||
:auto-upload="false"
|
||||
v-model:file-list="scenarioFileList"
|
||||
accept="image/jpeg,image/jpg,image/png,image/webp"
|
||||
multiple
|
||||
:limit="10"
|
||||
:on-change="handleScenarioChange"
|
||||
:on-remove="handleScenarioRemove"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<div class="upload-trigger-inner">
|
||||
<el-icon class="upload-icon"><ArrowUpTrayIcon /></el-icon>
|
||||
<div class="el-upload__text">上传业务场景相关截图或证明材料</div>
|
||||
</div>
|
||||
</el-upload>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
@@ -190,7 +378,7 @@ import {
|
||||
CheckIcon,
|
||||
DocumentIcon
|
||||
} from '@heroicons/vue/24/outline'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { ElMessage, ElMessageBox, genFileId } from 'element-plus'
|
||||
import { useAliyunCaptcha } from '@/composables/useAliyunCaptcha'
|
||||
|
||||
const props = defineProps({
|
||||
@@ -203,7 +391,17 @@ const props = defineProps({
|
||||
legalPersonID: '',
|
||||
legalPersonPhone: '',
|
||||
enterpriseAddress: '',
|
||||
legalPersonCode: ''
|
||||
legalPersonCode: '',
|
||||
// 扩展：营业执照 & 办公场地 & 场景
|
||||
businessLicenseImageURL: '',
|
||||
officePlaceImageURLs: [],
|
||||
apiUsage: '',
|
||||
scenarioAttachmentURLs: [],
|
||||
// 授权代表信息
|
||||
authorizedRepName: '',
|
||||
authorizedRepID: '',
|
||||
authorizedRepPhone: '',
|
||||
authorizedRepIDImageURLs: []
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -224,7 +422,17 @@ const form = ref({
|
||||
legalPersonID: '',
|
||||
legalPersonPhone: '',
|
||||
enterpriseAddress: '',
|
||||
legalPersonCode: ''
|
||||
legalPersonCode: '',
|
||||
// 扩展：营业执照 & 办公场地 & 场景
|
||||
businessLicenseImageURL: '',
|
||||
officePlaceImageURLs: [],
|
||||
apiUsage: '',
|
||||
scenarioAttachmentURLs: [],
|
||||
// 授权代表信息
|
||||
authorizedRepName: '',
|
||||
authorizedRepID: '',
|
||||
authorizedRepPhone: '',
|
||||
authorizedRepIDImageURLs: []
|
||||
})
|
||||
|
||||
// 验证码相关状态
|
||||
@@ -239,6 +447,17 @@ const submitting = ref(false)
|
||||
const ocrLoading = ref(false)
|
||||
const ocrResult = ref(false)
|
||||
const uploadRef = ref()
|
||||
const officePlaceUploadRef = ref()
|
||||
const scenarioUploadRef = ref()
|
||||
const officePlaceDragover = ref(false)
|
||||
const scenarioDragover = ref(false)
|
||||
|
||||
// 上传文件列表（前端展示用）
|
||||
const officePlaceFileList = ref([])
|
||||
const scenarioFileList = ref([])
|
||||
const businessLicenseFileList = ref([])
|
||||
const authorizedRepIDFrontFileList = ref([])
|
||||
const authorizedRepIDBackFileList = ref([])
|
||||
|
||||
// 计算属性
|
||||
const canSendCode = computed(() => {
|
||||
@@ -326,6 +545,30 @@ const enterpriseRules = {
|
||||
legalPersonCode: [
|
||||
{ required: true, message: '请输入验证码', trigger: 'blur' },
|
||||
{ len: 6, message: '验证码应为6位数字', trigger: 'blur' }
|
||||
],
|
||||
// 扩展字段简单校验（可按需加强）
|
||||
businessLicenseImageURL: [
|
||||
{ required: true, message: '请上传营业执照图片', trigger: 'change' }
|
||||
],
|
||||
apiUsage: [
|
||||
{ required: true, message: '请填写接口用途', trigger: 'blur' },
|
||||
{ min: 5, max: 500, message: '接口用途长度应在5-500个字符之间', trigger: 'blur' }
|
||||
],
|
||||
// 授权代表信息简单校验（可按需加强）
|
||||
authorizedRepName: [
|
||||
{ required: true, message: '请输入授权代表姓名', trigger: 'blur' },
|
||||
{ min: 2, max: 20, message: '授权代表姓名长度应在2-20个字符之间', trigger: 'blur' }
|
||||
],
|
||||
authorizedRepID: [
|
||||
{ required: true, message: '请输入授权代表身份证号', trigger: 'blur' },
|
||||
{ validator: validateIDCard, trigger: 'blur' }
|
||||
],
|
||||
authorizedRepPhone: [
|
||||
{ required: true, message: '请输入授权代表手机号', trigger: 'blur' },
|
||||
{ validator: validatePhone, trigger: 'blur' }
|
||||
],
|
||||
authorizedRepIDImageURLs: [
|
||||
{ required: true, message: '请上传授权代表身份证正反面图片', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
|
||||
@@ -395,7 +638,7 @@ const beforeUpload = (file) => {
|
||||
return true
|
||||
}
|
||||
|
||||
// 处理文件变化
|
||||
// 处理文件变化：触发 OCR，并保存营业执照原图 URL（若有上传地址）
|
||||
const handleFileChange = async (file) => {
|
||||
if (!beforeUpload(file.raw)) {
|
||||
return
|
||||
@@ -419,6 +662,11 @@ const handleFileChange = async (file) => {
|
||||
form.value.legalPersonID = ocrData.legal_person_id || ''
|
||||
form.value.enterpriseAddress = ocrData.address || ''
|
||||
|
||||
// 如果后端返回了已保存的营业执照图片URL，可以直接写入
|
||||
if (ocrData.license_image_url) {
|
||||
form.value.businessLicenseImageURL = ocrData.license_image_url
|
||||
}
|
||||
|
||||
ocrResult.value = true
|
||||
ElMessage.success('营业执照识别成功，已自动填充表单')
|
||||
} else {
|
||||
@@ -432,8 +680,211 @@ const handleFileChange = async (file) => {
|
||||
}
|
||||
}
|
||||
|
||||
// 判断是否为前端 blob 预览地址（需上传到服务器后替换为真实 URL）
|
||||
const isBlobUrl = (url) => typeof url === 'string' && url.startsWith('blob:')
|
||||
|
||||
// 上传单张图片到七牛云，返回可访问 URL
|
||||
const uploadFileToServer = async (file) => {
|
||||
const res = await certificationApi.uploadFile(file)
|
||||
if (!res?.success || !res?.data?.url) {
|
||||
throw new Error(res?.error?.message || '图片上传失败')
|
||||
}
|
||||
return res.data.url
|
||||
}
|
||||
|
||||
// 提交前将 blob 图片全部上传到七牛云，并更新表单中的 URL
|
||||
const uploadAllBlobFilesAndFillForm = async () => {
|
||||
const tasks = []
|
||||
|
||||
// 营业执照：若当前是 blob 则上传
|
||||
if (isBlobUrl(form.value.businessLicenseImageURL) && businessLicenseFileList.value.length > 0 && businessLicenseFileList.value[0].raw) {
|
||||
tasks.push(
|
||||
uploadFileToServer(businessLicenseFileList.value[0].raw).then((url) => {
|
||||
form.value.businessLicenseImageURL = url
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
// 办公场地多图：按顺序上传
|
||||
if (officePlaceFileList.value.length > 0) {
|
||||
const files = officePlaceFileList.value.filter((f) => f.raw).map((f) => f.raw)
|
||||
if (files.length > 0) {
|
||||
tasks.push(
|
||||
Promise.all(files.map((f) => uploadFileToServer(f))).then((urls) => {
|
||||
form.value.officePlaceImageURLs = urls
|
||||
})
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// 应用场景附件多图：按顺序上传
|
||||
if (scenarioFileList.value.length > 0) {
|
||||
const files = scenarioFileList.value.filter((f) => f.raw).map((f) => f.raw)
|
||||
if (files.length > 0) {
|
||||
tasks.push(
|
||||
Promise.all(files.map((f) => uploadFileToServer(f))).then((urls) => {
|
||||
form.value.scenarioAttachmentURLs = urls
|
||||
})
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// 授权代表身份证正反面：人像面 + 国徽面
|
||||
const frontRaw = authorizedRepIDFrontFileList.value[0]?.raw
|
||||
const backRaw = authorizedRepIDBackFileList.value[0]?.raw
|
||||
if (frontRaw || backRaw) {
|
||||
tasks.push(
|
||||
(async () => {
|
||||
const urls = []
|
||||
if (frontRaw) urls.push(await uploadFileToServer(frontRaw))
|
||||
if (backRaw) urls.push(await uploadFileToServer(backRaw))
|
||||
form.value.authorizedRepIDImageURLs = urls
|
||||
})()
|
||||
)
|
||||
}
|
||||
|
||||
await Promise.all(tasks)
|
||||
}
|
||||
|
||||
// 从 el-upload 的 fileList 中提取 URL 数组（后端接好上传接口后可用 response.url）
|
||||
const extractUrls = (fileList) => {
|
||||
return fileList
|
||||
.map(f => f.url || f.response?.url || f.name)
|
||||
.filter(Boolean)
|
||||
}
|
||||
|
||||
// 营业执照图片变更（同时触发 OCR 识别）
|
||||
const handleBusinessLicenseChange = async (file, fileList) => {
|
||||
businessLicenseFileList.value = fileList
|
||||
const urls = extractUrls(fileList)
|
||||
form.value.businessLicenseImageURL = urls[0] || ''
|
||||
|
||||
// 使用当前选择的营业执照图片触发 OCR 识别
|
||||
if (file && file.raw) {
|
||||
await handleFileChange(file)
|
||||
}
|
||||
}
|
||||
|
||||
const handleBusinessLicenseRemove = (file, fileList) => {
|
||||
businessLicenseFileList.value = fileList
|
||||
const urls = extractUrls(fileList)
|
||||
form.value.businessLicenseImageURL = urls[0] || ''
|
||||
}
|
||||
|
||||
// 手动清除营业执照图片（预览区域中的“删除”按钮）
|
||||
const clearBusinessLicense = () => {
|
||||
businessLicenseFileList.value = []
|
||||
form.value.businessLicenseImageURL = ''
|
||||
}
|
||||
|
||||
// 授权代表身份证人像面图片变更
|
||||
const handleAuthorizedRepIDFrontChange = (file, fileList) => {
|
||||
authorizedRepIDFrontFileList.value = fileList
|
||||
updateAuthorizedRepIDImageURLs()
|
||||
}
|
||||
|
||||
const handleAuthorizedRepIDFrontRemove = (file, fileList) => {
|
||||
authorizedRepIDFrontFileList.value = fileList
|
||||
updateAuthorizedRepIDImageURLs()
|
||||
}
|
||||
|
||||
// 授权代表身份证国徽面图片变更
|
||||
const handleAuthorizedRepIDBackChange = (file, fileList) => {
|
||||
authorizedRepIDBackFileList.value = fileList
|
||||
updateAuthorizedRepIDImageURLs()
|
||||
}
|
||||
|
||||
const handleAuthorizedRepIDBackRemove = (file, fileList) => {
|
||||
authorizedRepIDBackFileList.value = fileList
|
||||
updateAuthorizedRepIDImageURLs()
|
||||
}
|
||||
|
||||
// 手动清除授权代表身份证人像面
|
||||
const clearAuthorizedRepFront = () => {
|
||||
authorizedRepIDFrontFileList.value = []
|
||||
updateAuthorizedRepIDImageURLs()
|
||||
}
|
||||
|
||||
// 手动清除授权代表身份证国徽面
|
||||
const clearAuthorizedRepBack = () => {
|
||||
authorizedRepIDBackFileList.value = []
|
||||
updateAuthorizedRepIDImageURLs()
|
||||
}
|
||||
|
||||
// 汇总授权代表身份证正反面图片URL到一个数组字段
|
||||
const updateAuthorizedRepIDImageURLs = () => {
|
||||
const frontUrl = extractUrls(authorizedRepIDFrontFileList.value)[0] || ''
|
||||
const backUrl = extractUrls(authorizedRepIDBackFileList.value)[0] || ''
|
||||
const urls = []
|
||||
if (frontUrl) urls.push(frontUrl)
|
||||
if (backUrl) urls.push(backUrl)
|
||||
form.value.authorizedRepIDImageURLs = urls
|
||||
}
|
||||
|
||||
// 办公场地：拖放文件时通过 handleStart 加入列表
|
||||
const onOfficePlaceDrop = (e) => {
|
||||
officePlaceDragover.value = false
|
||||
const upload = officePlaceUploadRef.value
|
||||
if (!upload) return
|
||||
const files = Array.from(e.dataTransfer?.files || []).filter(
|
||||
(f) => f.type && /^image\/(jpeg|jpg|png|webp)$/i.test(f.type)
|
||||
)
|
||||
const limit = 10
|
||||
const remain = Math.max(0, limit - officePlaceFileList.value.length)
|
||||
const toAdd = files.slice(0, remain)
|
||||
for (const file of toAdd) {
|
||||
if (!beforeUpload(file)) continue
|
||||
if (typeof file.uid === 'undefined') file.uid = genFileId()
|
||||
upload.handleStart(file)
|
||||
}
|
||||
if (files.length > remain && remain > 0) ElMessage.warning(`最多上传 ${limit} 张，已忽略多余文件`)
|
||||
}
|
||||
|
||||
// 应用场景：拖放文件时通过 handleStart 加入列表
|
||||
const onScenarioDrop = (e) => {
|
||||
scenarioDragover.value = false
|
||||
const upload = scenarioUploadRef.value
|
||||
if (!upload) return
|
||||
const files = Array.from(e.dataTransfer?.files || []).filter(
|
||||
(f) => f.type && /^image\/(jpeg|jpg|png|webp)$/i.test(f.type)
|
||||
)
|
||||
const limit = 10
|
||||
const remain = Math.max(0, limit - scenarioFileList.value.length)
|
||||
const toAdd = files.slice(0, remain)
|
||||
for (const file of toAdd) {
|
||||
if (!beforeUpload(file)) continue
|
||||
if (typeof file.uid === 'undefined') file.uid = genFileId()
|
||||
upload.handleStart(file)
|
||||
}
|
||||
if (files.length > remain && remain > 0) ElMessage.warning(`最多上传 ${limit} 张，已忽略多余文件`)
|
||||
}
|
||||
|
||||
// 办公场地图片变更
|
||||
const handleOfficePlaceChange = (file, fileList) => {
|
||||
officePlaceFileList.value = fileList
|
||||
form.value.officePlaceImageURLs = extractUrls(fileList)
|
||||
}
|
||||
|
||||
const handleOfficePlaceRemove = (file, fileList) => {
|
||||
officePlaceFileList.value = fileList
|
||||
form.value.officePlaceImageURLs = extractUrls(fileList)
|
||||
}
|
||||
|
||||
// 应用场景附件图片变更
|
||||
const handleScenarioChange = (file, fileList) => {
|
||||
scenarioFileList.value = fileList
|
||||
form.value.scenarioAttachmentURLs = extractUrls(fileList)
|
||||
}
|
||||
|
||||
const handleScenarioRemove = (file, fileList) => {
|
||||
scenarioFileList.value = fileList
|
||||
form.value.scenarioAttachmentURLs = extractUrls(fileList)
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
const submitForm = async () => {
|
||||
if (submitting.value) return
|
||||
submitting.value = true
|
||||
try {
|
||||
await enterpriseFormRef.value.validate()
|
||||
|
||||
@@ -450,12 +901,42 @@ const submitForm = async () => {
|
||||
}
|
||||
)
|
||||
|
||||
submitting.value = true
|
||||
// 先将所有 blob 图片上传到七牛云，再提交企业信息
|
||||
try {
|
||||
await uploadAllBlobFilesAndFillForm()
|
||||
} catch (err) {
|
||||
ElMessage.error(err?.message || '图片上传失败，请重试')
|
||||
submitting.value = false
|
||||
return
|
||||
}
|
||||
|
||||
// Mock API 调用
|
||||
await new Promise(resolve => setTimeout(resolve, 2000))
|
||||
// 调用后端提交接口
|
||||
const payload = {
|
||||
company_name: form.value.companyName,
|
||||
unified_social_code: form.value.unifiedSocialCode,
|
||||
legal_person_name: form.value.legalPersonName,
|
||||
legal_person_id: form.value.legalPersonID,
|
||||
legal_person_phone: form.value.legalPersonPhone,
|
||||
enterprise_address: form.value.enterpriseAddress,
|
||||
verification_code: form.value.legalPersonCode,
|
||||
// 扩展字段
|
||||
business_license_image_url: form.value.businessLicenseImageURL,
|
||||
office_place_image_urls: form.value.officePlaceImageURLs,
|
||||
api_usage: form.value.apiUsage,
|
||||
scenario_attachment_urls: form.value.scenarioAttachmentURLs,
|
||||
// 授权代表信息
|
||||
authorized_rep_name: form.value.authorizedRepName,
|
||||
authorized_rep_id: form.value.authorizedRepID,
|
||||
authorized_rep_phone: form.value.authorizedRepPhone,
|
||||
authorized_rep_id_image_urls: form.value.authorizedRepIDImageURLs
|
||||
}
|
||||
|
||||
emit('submit', form.value)
|
||||
const res = await certificationApi.submitEnterpriseInfo(payload)
|
||||
if (!res.success) {
|
||||
throw new Error(res?.error?.message || '提交企业信息失败')
|
||||
}
|
||||
|
||||
emit('submit', { formData: form.value, response: res })
|
||||
|
||||
} catch (error) {
|
||||
// 用户点击取消或关闭对话框，不处理
|
||||
@@ -609,6 +1090,13 @@ onUnmounted(() => {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
margin: 0 0 20px 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 表单输入框 */
|
||||
.form-input :deep(.el-input__wrapper) {
|
||||
border-radius: 8px;
|
||||
@@ -633,6 +1121,45 @@ onUnmounted(() => {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
/* 拖放区域：包裹 picture-card 上传，支持拖拽图片到整块区域 */
|
||||
.upload-drop-zone {
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
}
|
||||
.upload-drop-zone.is-dragover {
|
||||
background: var(--el-color-primary-light-9, #ecf5ff);
|
||||
outline: 2px dashed var(--el-color-primary);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
/* 上传区域基础样式 */
|
||||
.upload-area {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 保证 picture-card 触发区域整块可点击、可拖拽 */
|
||||
.upload-trigger-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 148px;
|
||||
cursor: pointer;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
/* 当已有一张图片时，隐藏单图上传的“+ 选择文件”入口 */
|
||||
.single-upload-area :deep(.el-upload-list__item + .el-upload--picture-card) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 验证码按钮 */
|
||||
.code-btn {
|
||||
min-width: 100px;
|
||||
|
||||
100
src/pages/certification/components/ManualReviewPending.vue
Normal file
100
src/pages/certification/components/ManualReviewPending.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<el-card class="step-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<div class="header-icon">
|
||||
<el-icon class="text-amber-600">
|
||||
<ClockIcon />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="header-content">
|
||||
<h2 class="header-title">人工审核</h2>
|
||||
<p class="header-subtitle">您的企业信息已提交，请等待管理员审核</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="manual-review-content">
|
||||
<div class="review-status-box">
|
||||
<el-icon class="status-icon"><ClockIcon /></el-icon>
|
||||
<p class="status-text">我们正在审核您提交的企业信息，请耐心等待。</p>
|
||||
<p v-if="submitTime" class="submit-time">提交时间：{{ submitTime }}</p>
|
||||
<p v-if="companyName" class="company-name">企业名称：{{ companyName }}</p>
|
||||
</div>
|
||||
<el-button type="primary" class="refresh-btn" :loading="refreshing" @click="handleRefresh">
|
||||
刷新状态
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ClockIcon } from '@heroicons/vue/24/outline'
|
||||
|
||||
defineProps({
|
||||
certificationData: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
submitTime: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
companyName: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['refresh'])
|
||||
|
||||
const refreshing = ref(false)
|
||||
|
||||
const handleRefresh = async () => {
|
||||
refreshing.value = true
|
||||
try {
|
||||
emit('refresh')
|
||||
} finally {
|
||||
refreshing.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.manual-review-content {
|
||||
padding: 24px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.review-status-box {
|
||||
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
|
||||
border: 1px solid rgba(245, 158, 11, 0.3);
|
||||
border-radius: 12px;
|
||||
padding: 32px 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
font-size: 48px;
|
||||
color: #d97706;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 16px;
|
||||
color: #92400e;
|
||||
margin: 0 0 12px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.submit-time,
|
||||
.company-name {
|
||||
font-size: 14px;
|
||||
color: #b45309;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
min-width: 120px;
|
||||
}
|
||||
</style>
|
||||
@@ -68,6 +68,14 @@
|
||||
@submit="handleEnterpriseSubmit"
|
||||
/>
|
||||
|
||||
<ManualReviewPending
|
||||
v-if="currentStep === 'manual_review'"
|
||||
:certification-data="certificationData"
|
||||
:submit-time="manualReviewSubmitTime"
|
||||
:company-name="enterpriseForm.companyName"
|
||||
@refresh="getCertificationDetails"
|
||||
/>
|
||||
|
||||
<EnterpriseVerify
|
||||
v-if="currentStep === 'enterprise_verify'"
|
||||
:enterprise-data="enterpriseForm"
|
||||
@@ -120,6 +128,7 @@ import { useUserStore } from '@/stores/user'
|
||||
import {
|
||||
BuildingOfficeIcon,
|
||||
CheckCircleIcon,
|
||||
ClockIcon,
|
||||
CodeBracketIcon,
|
||||
DocumentTextIcon,
|
||||
UserIcon,
|
||||
@@ -133,6 +142,7 @@ import ContractRejected from './components/ContractRejected.vue'
|
||||
import ContractSign from './components/ContractSign.vue'
|
||||
import EnterpriseInfo from './components/EnterpriseInfo.vue'
|
||||
import EnterpriseVerify from './components/EnterpriseVerify.vue'
|
||||
import ManualReviewPending from './components/ManualReviewPending.vue'
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
// 认证步骤配置
|
||||
@@ -143,6 +153,12 @@ const certificationSteps = [
|
||||
description: '填写企业基本信息和法人信息',
|
||||
icon: BuildingOfficeIcon,
|
||||
},
|
||||
{
|
||||
key: 'manual_review',
|
||||
title: '人工审核',
|
||||
description: '等待管理员审核企业信息',
|
||||
icon: ClockIcon,
|
||||
},
|
||||
{
|
||||
key: 'enterprise_verify',
|
||||
title: '企业认证',
|
||||
@@ -176,6 +192,18 @@ const currentStepIndex = computed(() => {
|
||||
// 步骤特定元数据
|
||||
const stepMeta = ref({}) // 用于存储当前步骤的metadata
|
||||
|
||||
// 人工审核步骤的提交时间展示
|
||||
const manualReviewSubmitTime = computed(() => {
|
||||
const at = certificationData.value?.metadata?.enterprise_info?.submit_at ?? certificationData.value?.info_submitted_at
|
||||
if (!at) return ''
|
||||
try {
|
||||
const d = new Date(at)
|
||||
return Number.isNaN(d.getTime()) ? '' : d.toLocaleString('zh-CN')
|
||||
} catch {
|
||||
return ''
|
||||
}
|
||||
})
|
||||
|
||||
// 表单数据
|
||||
const enterpriseForm = ref({
|
||||
companyName: '',
|
||||
@@ -188,35 +216,32 @@ const enterpriseForm = ref({
|
||||
enterpriseEmail: '',
|
||||
})
|
||||
|
||||
// 开发模式控制
|
||||
//
|
||||
const isDevelopment = ref(false)
|
||||
const devCurrentStep = ref('enterprise_info')
|
||||
|
||||
// 合同签署加载状态
|
||||
const contractSignLoading = ref(false)
|
||||
|
||||
// 事件处理
|
||||
const handleEnterpriseSubmit = async (formData) => {
|
||||
// 事件处理：优先用提交接口返回的认证数据更新步骤，确保进入「人工审核」页，避免依赖二次请求
|
||||
const handleEnterpriseSubmit = async (payload) => {
|
||||
try {
|
||||
loading.value = true
|
||||
// 字段映射
|
||||
const payload = {
|
||||
company_name: formData.companyName,
|
||||
unified_social_code: formData.unifiedSocialCode,
|
||||
legal_person_name: formData.legalPersonName,
|
||||
legal_person_id: formData.legalPersonID,
|
||||
legal_person_phone: formData.legalPersonPhone,
|
||||
enterprise_address: formData.enterpriseAddress,
|
||||
enterprise_email: formData.enterpriseEmail,
|
||||
verification_code: formData.legalPersonCode,
|
||||
const nextAction = payload?.response?.data?.metadata?.next_action
|
||||
if (nextAction) {
|
||||
ElMessage.success(nextAction)
|
||||
} else {
|
||||
ElMessage.success('企业信息提交成功，请等待管理员审核')
|
||||
}
|
||||
if (payload?.response?.data?.status) {
|
||||
certificationData.value = payload.response.data
|
||||
stepMeta.value = payload.response.data?.metadata || {}
|
||||
await setCurrentStepByStatus()
|
||||
} else {
|
||||
await getCertificationDetails()
|
||||
}
|
||||
await certificationApi.submitEnterpriseInfo(payload)
|
||||
ElMessage.success('企业信息提交成功')
|
||||
// 提交成功后刷新认证详情
|
||||
await getCertificationDetails()
|
||||
} catch (error) {
|
||||
ElMessage.error(error?.message || '提交失败，请检查表单信息')
|
||||
// 提交失败时不刷新认证详情，保持用户填写的信息
|
||||
ElMessage.error(error?.message || '获取认证状态失败，请刷新页面')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
@@ -355,6 +380,9 @@ const setCurrentStepByStatus = async () => {
|
||||
case 'pending':
|
||||
currentStep.value = 'enterprise_info'
|
||||
break
|
||||
case 'info_pending_review':
|
||||
currentStep.value = 'manual_review'
|
||||
break
|
||||
case 'info_submitted':
|
||||
currentStep.value = 'enterprise_verify'
|
||||
break
|
||||
|
||||
Reference in New Issue
Block a user