2e7cbefdcd
feat(shopro_huifu): 添加汇付进件管理功能 - 新增汇付进件管理模块，支持新建、编辑进件流程 - 实现用户角色绑定验证功能，确保进件角色的有效性 - 集成Vue.js前端界面，提供完整的表单操作体验 - 支持个人和企业两种账户类型的进件资料录入 - 添加银行支行搜索功能，方便结算账户信息填写 - 完善进件状态管理和审核流程控制 - 增加图片上传组件，支持身份证、营业执照等证件上传 ```
145 行
11 KiB
HTML
145 行
11 KiB
HTML
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
|
|
<style>
|
|
[v-cloak] { display: none; }
|
|
.status-draft { color: #909399; }
|
|
.status-submitting, .status-basic_ok, .status-busi_pending { color: #e6a23c; }
|
|
.status-approved { color: #67c23a; }
|
|
.status-rejected, .status-failed { color: #f56c6c; }
|
|
.onboard-detail .section-title { font-size: 14px; font-weight: 600; margin: 16px 0 10px; padding-left: 8px; border-left: 3px solid #409EFF; }
|
|
.onboard-detail .info-grid { display: flex; flex-wrap: wrap; }
|
|
.onboard-detail .info-item { width: 50%; margin-bottom: 10px; font-size: 13px; line-height: 1.6; }
|
|
.onboard-detail .info-label { color: #909399; margin-right: 6px; }
|
|
.onboard-detail .photo-grid { display: flex; flex-wrap: wrap; gap: 16px; }
|
|
.onboard-detail .photo-box { width: 220px; }
|
|
.onboard-detail .photo-label { font-size: 12px; color: #606266; margin-bottom: 6px; }
|
|
.onboard-detail .photo-img { width: 220px; height: 140px; border: 1px solid #ebeef5; border-radius: 4px; background: #f5f7fa; }
|
|
.onboard-detail .biz-tip { margin-top: 12px; padding: 10px 12px; background: #fdf6ec; border: 1px solid #faecd8; border-radius: 4px; color: #e6a23c; font-size: 13px; line-height: 1.6; }
|
|
</style>
|
|
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
|
|
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
|
|
<div id="huifuOnboardIndex" v-cloak>
|
|
<div class="panel panel-default panel-intro">
|
|
<div class="panel-heading">
|
|
汇付个人进件
|
|
<span class="text-muted" style="font-size:12px;margin-left:12px;">先审核进件资料，业务审核通过后再提交汇付</span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div style="margin-bottom:12px;">
|
|
<el-select v-model="filterStatus" placeholder="全部状态" clearable size="small" style="width:180px" @change="getList">
|
|
<el-option label="待后台审核(draft)" value="draft"></el-option>
|
|
<el-option label="提交中" value="submitting"></el-option>
|
|
<el-option label="汇付审核中" value="busi_pending"></el-option>
|
|
<el-option label="已通过" value="approved"></el-option>
|
|
<el-option label="已驳回" value="rejected"></el-option>
|
|
<el-option label="失败" value="failed"></el-option>
|
|
</el-select>
|
|
<el-button size="small" type="success" @click="openCreate" style="margin-left:8px;">新建进件</el-button>
|
|
<el-button size="small" type="primary" @click="getList" style="margin-left:8px;">刷新列表</el-button>
|
|
</div>
|
|
<el-table :data="listData" v-loading="loading" border empty-text="暂无进件记录">
|
|
<el-table-column prop="id" label="ID" width="70"></el-table-column>
|
|
<el-table-column prop="user_id" label="用户ID" width="90"></el-table-column>
|
|
<el-table-column prop="user_nickname" label="用户昵称" min-width="120" show-overflow-tooltip></el-table-column>
|
|
<el-table-column prop="payload_name" label="姓名" width="100"></el-table-column>
|
|
<el-table-column prop="payload_mobile" label="手机号" width="120"></el-table-column>
|
|
<el-table-column prop="role_type" label="角色" width="100">
|
|
<template slot-scope="scope">{{ roleText(scope.row.role_type) }}</template>
|
|
</el-table-column>
|
|
<el-table-column prop="business_status_text" label="业务状态" width="110"></el-table-column>
|
|
<el-table-column prop="onboard_status" label="进件状态" width="120">
|
|
<template slot-scope="scope">
|
|
<span :class="'status-' + scope.row.onboard_status">{{ statusText(scope.row.onboard_status) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="payload_cert_no" label="身份证号" min-width="160"></el-table-column>
|
|
<el-table-column prop="payload_card_tail" label="银行卡" width="100"></el-table-column>
|
|
<el-table-column prop="updatetime" label="更新时间" width="160">
|
|
<template slot-scope="scope">{{ formatTime(scope.row.updatetime) }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="300" fixed="right">
|
|
<template slot-scope="scope">
|
|
<el-button size="mini" type="text" @click="openDetail(scope.row.id)">查看资料</el-button>
|
|
<el-button size="mini" type="text" @click="openEdit(scope.row.id)" v-if="canEditRow(scope.row)">编辑</el-button>
|
|
<el-button size="mini" type="primary" @click="submitRow(scope.row.id)" v-if="scope.row.onboard_status === 'draft'">提交汇付</el-button>
|
|
<el-button size="mini" @click="pollRow(scope.row.id)" v-if="scope.row.onboard_status !== 'draft' && scope.row.onboard_status !== 'approved'">刷新</el-button>
|
|
<el-button size="mini" type="warning" @click="retryRow(scope.row.id)" v-if="scope.row.onboard_status === 'rejected' || scope.row.onboard_status === 'failed'">重提</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
|
|
<el-dialog title="进件资料审核" :visible.sync="detailVisible" width="860px" top="5vh" @closed="detailData = null">
|
|
<div v-loading="detailLoading" class="onboard-detail" v-if="detailData">
|
|
<el-descriptions :column="3" border size="small">
|
|
<el-descriptions-item label="记录ID">{{ detailData.record.id }}</el-descriptions-item>
|
|
<el-descriptions-item label="用户">{{ detailData.user.nickname || '-' }} (ID: {{ detailData.user.id }})</el-descriptions-item>
|
|
<el-descriptions-item label="角色">{{ roleText(detailData.record.role_type) }}</el-descriptions-item>
|
|
<el-descriptions-item label="进件状态">
|
|
<span :class="'status-' + detailData.record.onboard_status">{{ statusText(detailData.record.onboard_status) }}</span>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="业务状态">{{ detailData.business.status_text }}</el-descriptions-item>
|
|
<el-descriptions-item label="汇付ID">{{ detailData.record.huifu_id || '-' }}</el-descriptions-item>
|
|
<el-descriptions-item label="申请单号" :span="2">{{ detailData.record.apply_no || '-' }}</el-descriptions-item>
|
|
<el-descriptions-item label="提交时间">{{ formatTime(detailData.record.updatetime) }}</el-descriptions-item>
|
|
</el-descriptions>
|
|
|
|
<div class="biz-tip" v-if="detailData.business.status === 'pending'">
|
|
该用户业务身份仍为「待审核」，请先在{{ detailData.business.type_text }}管理中审核通过；通过后将自动提交汇付进件。
|
|
<el-button type="text" size="mini" @click="goAudit(detailData.business.audit_url)">前往业务审核</el-button>
|
|
</div>
|
|
<div class="biz-tip" v-else-if="detailData.record.onboard_status === 'draft' && detailData.business.status === 'normal'">
|
|
业务已审核通过，请核对下方资料无误后点击「提交汇付」。
|
|
</div>
|
|
|
|
<div class="section-title">身份信息</div>
|
|
<div class="info-grid">
|
|
<div class="info-item"><span class="info-label">真实姓名</span>{{ detailData.form.name || '-' }}</div>
|
|
<div class="info-item"><span class="info-label">身份证号</span>{{ detailData.form.cert_no || detailData.form.cert_no_masked || '-' }}</div>
|
|
<div class="info-item"><span class="info-label">证件有效期</span>{{ detailData.form.cert_validity_text }}</div>
|
|
<div class="info-item"><span class="info-label">证件开始</span>{{ detailData.form.cert_begin_date || '-' }}</div>
|
|
<div class="info-item"><span class="info-label">证件截止</span>{{ detailData.form.cert_end_date || (detailData.form.cert_validity_type === '1' ? '长期' : '-') }}</div>
|
|
<div class="info-item"><span class="info-label">手机号</span>{{ detailData.form.mobile_no || '-' }}</div>
|
|
</div>
|
|
|
|
<div class="section-title">银行卡信息</div>
|
|
<div class="info-grid">
|
|
<div class="info-item"><span class="info-label">开户名</span>{{ detailData.form.card_name || '-' }}</div>
|
|
<div class="info-item"><span class="info-label">银行卡号</span>{{ detailData.form.card_no || detailData.form.card_no_masked || '-' }}</div>
|
|
<div class="info-item"><span class="info-label">联行号</span>{{ detailData.form.branch_code || '-' }}</div>
|
|
<div class="info-item"><span class="info-label">省份编码</span>{{ detailData.form.prov_id || '-' }}</div>
|
|
<div class="info-item"><span class="info-label">城市编码</span>{{ detailData.form.area_id || '-' }}</div>
|
|
</div>
|
|
|
|
<div class="section-title">证件照片</div>
|
|
<div class="photo-grid">
|
|
<div class="photo-box" v-if="detailData.form.id_card_front_url">
|
|
<div class="photo-label">身份证人像面</div>
|
|
<el-image class="photo-img" :src="detailData.form.id_card_front_url" :preview-src-list="previewList" fit="contain"></el-image>
|
|
</div>
|
|
<div class="photo-box" v-if="detailData.form.id_card_back_url">
|
|
<div class="photo-label">身份证国徽面</div>
|
|
<el-image class="photo-img" :src="detailData.form.id_card_back_url" :preview-src-list="previewList" fit="contain"></el-image>
|
|
</div>
|
|
<div class="photo-box" v-if="detailData.form.bank_card_url">
|
|
<div class="photo-label">银行卡照片</div>
|
|
<el-image class="photo-img" :src="detailData.form.bank_card_url" :preview-src-list="previewList" fit="contain"></el-image>
|
|
</div>
|
|
<div v-if="!detailData.form.id_card_front_url && !detailData.form.id_card_back_url" style="color:#909399;font-size:13px;">暂无图片资料</div>
|
|
</div>
|
|
|
|
<div v-if="detailData.record.reject_reason">
|
|
<div class="section-title">驳回/失败原因</div>
|
|
<div style="color:#f56c6c;font-size:13px;line-height:1.6;">{{ detailData.record.reject_reason }}</div>
|
|
</div>
|
|
</div>
|
|
<span slot="footer">
|
|
<el-button @click="detailVisible = false">关闭</el-button>
|
|
<el-button v-if="detailData && canEditRow(detailData.record)" @click="editFromDetail">编辑资料</el-button>
|
|
<el-button type="primary" v-if="detailData && detailData.can_submit_huifu" @click="submitFromDetail">提交汇付</el-button>
|
|
<el-button v-if="detailData && detailData.can_poll" @click="pollFromDetail">刷新状态</el-button>
|
|
<el-button type="warning" v-if="detailData && detailData.can_retry_huifu" @click="retryFromDetail">重新提交</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|