375bc7af20
- 在Onboard控制器中添加searchUser方法，支持按昵称、手机号、ID搜索用户 - 修改noNeedRight权限配置，添加searchUser访问权限 - 重构用户选择逻辑，使用新的fetchUserPublic和formatUserOption方法 - 实现用户搜索功能，支持关键词模糊匹配并返回格式化的用户选项 - 优化前端页面样式，采用卡片式布局提升用户体验 - 添加用户头像显示和个人信息展示功能 - 调整页面结构，增加标题栏、底部操作栏等组件 ```
392 行
22 KiB
HTML
392 行
22 KiB
HTML
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
|
||
<style>
|
||
[v-cloak] { display: none; }
|
||
#huifuOnboardAdd {
|
||
padding: 0;
|
||
color: #303133;
|
||
max-height: 82vh;
|
||
overflow-y: auto;
|
||
background: #f5f7fa;
|
||
}
|
||
#huifuOnboardAdd .page-header {
|
||
padding: 16px 20px 12px;
|
||
background: #fff;
|
||
border-bottom: 1px solid #ebeef5;
|
||
}
|
||
#huifuOnboardAdd .page-title { font-size: 16px; font-weight: 600; color: #303133; margin-bottom: 4px; }
|
||
#huifuOnboardAdd .page-desc { font-size: 12px; color: #909399; line-height: 1.6; }
|
||
#huifuOnboardAdd .form-body { padding: 12px 16px 0; }
|
||
#huifuOnboardAdd .section-card {
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
padding: 14px 16px 4px;
|
||
margin-bottom: 12px;
|
||
border: 1px solid #ebeef5;
|
||
}
|
||
#huifuOnboardAdd .section-title {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
margin: 0 0 14px;
|
||
padding-left: 10px;
|
||
border-left: 3px solid #7536D0;
|
||
line-height: 1.2;
|
||
}
|
||
#huifuOnboardAdd .form-input { width: 100%; }
|
||
#huifuOnboardAdd .field-tip { color: #909399; font-size: 12px; line-height: 1.5; margin-top: 4px; }
|
||
#huifuOnboardAdd .upload-box {
|
||
width: 148px;
|
||
height: 96px;
|
||
border: 1px dashed #dcdfe6;
|
||
border-radius: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
background: #fafafa;
|
||
cursor: pointer;
|
||
transition: border-color .2s;
|
||
}
|
||
#huifuOnboardAdd .upload-box:hover { border-color: #7536D0; }
|
||
#huifuOnboardAdd .upload-box img { width: 100%; height: 100%; object-fit: cover; }
|
||
#huifuOnboardAdd .upload-grid { display: flex; flex-wrap: wrap; gap: 16px; }
|
||
#huifuOnboardAdd .upload-item-label { font-size: 12px; color: #606266; margin-bottom: 6px; }
|
||
#huifuOnboardAdd .branch-item { padding: 8px 0; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
|
||
#huifuOnboardAdd .branch-item:hover { background: #f5f7fa; }
|
||
#huifuOnboardAdd .branch-panel {
|
||
max-height: 180px;
|
||
overflow-y: auto;
|
||
border: 1px solid #ebeef5;
|
||
border-radius: 6px;
|
||
padding: 0 10px;
|
||
margin-top: 6px;
|
||
background: #fff;
|
||
}
|
||
#huifuOnboardAdd .user-selected-card {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 8px;
|
||
padding: 8px 12px;
|
||
background: #f8f5ff;
|
||
border: 1px solid #e8dff5;
|
||
border-radius: 6px;
|
||
}
|
||
#huifuOnboardAdd .user-selected-avatar {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
margin-right: 10px;
|
||
background: #7536D0;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
flex-shrink: 0;
|
||
}
|
||
#huifuOnboardAdd .user-selected-name { font-size: 14px; font-weight: 600; color: #303133; }
|
||
#huifuOnboardAdd .user-selected-meta { font-size: 12px; color: #909399; margin-top: 2px; }
|
||
#huifuOnboardAdd .form-footer {
|
||
position: sticky;
|
||
bottom: 0;
|
||
z-index: 2;
|
||
padding: 12px 20px;
|
||
background: #fff;
|
||
border-top: 1px solid #ebeef5;
|
||
text-align: right;
|
||
}
|
||
.user-select-dropdown .el-select-dropdown__item { height: auto; line-height: 1.4; padding: 8px 12px; }
|
||
.user-option { display: flex; align-items: center; min-width: 320px; }
|
||
.user-option-avatar {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
margin-right: 10px;
|
||
flex-shrink: 0;
|
||
background: #7536D0;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 13px;
|
||
}
|
||
.user-option-body { flex: 1; min-width: 0; }
|
||
.user-option-name { font-size: 13px; color: #303133; font-weight: 600; }
|
||
.user-option-nick { margin-right: 4px; }
|
||
.user-option-real { font-weight: 400; color: #7536D0; font-size: 12px; }
|
||
.user-option-meta { font-size: 12px; color: #909399; margin-top: 2px; }
|
||
</style>
|
||
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
|
||
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
|
||
<div id="huifuOnboardAdd" v-cloak>
|
||
<div class="page-header">
|
||
<div class="page-title">{{ isEdit ? '编辑汇付进件资料' : '新建汇付进件' }}</div>
|
||
<div class="page-desc">请按用户真实信息填写；个人进件持卡人姓名需与身份证姓名一致。保存后为草稿，可在列表中提交汇付审核。</div>
|
||
</div>
|
||
<div class="form-body">
|
||
<el-form label-width="110px" size="small">
|
||
<div class="section-card">
|
||
<div class="section-title">用户与角色</div>
|
||
<el-form-item label="选择用户" v-if="!isEdit">
|
||
<el-select
|
||
v-model="userId"
|
||
filterable
|
||
remote
|
||
reserve-keyword
|
||
clearable
|
||
popper-class="user-select-dropdown"
|
||
placeholder="输入昵称/手机号/ID搜索"
|
||
:remote-method="searchUser"
|
||
:loading="userLoading"
|
||
class="form-input"
|
||
@change="onUserChange">
|
||
<el-option v-for="item in userOptions" :key="item.id" :label="item.option_label" :value="item.id">
|
||
<div class="user-option">
|
||
<img v-if="item.avatar" :src="item.avatar" class="user-option-avatar">
|
||
<div v-else class="user-option-avatar">{{ userAvatarText(item) }}</div>
|
||
<div class="user-option-body">
|
||
<div class="user-option-name">
|
||
<span class="user-option-nick">{{ item.display_name }}</span>
|
||
<span v-if="item.real_name && item.real_name !== item.display_name" class="user-option-real">（实名：{{ item.real_name }}）</span>
|
||
</div>
|
||
<div class="user-option-meta">
|
||
ID {{ item.id }}
|
||
<template v-if="item.mobile"> · 手机 {{ item.mobile }}</template>
|
||
<template v-if="item.nickname && item.nickname !== item.display_name"> · 昵称 {{ item.nickname }}</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-option>
|
||
</el-select>
|
||
<div class="user-selected-card" v-if="selectedUser && selectedUser.id">
|
||
<img v-if="selectedUser.avatar" :src="selectedUser.avatar" class="user-selected-avatar" style="border-radius:50%;">
|
||
<div v-else class="user-selected-avatar">{{ userAvatarText(selectedUser) }}</div>
|
||
<div>
|
||
<div class="user-selected-name">{{ selectedUser.option_label }}</div>
|
||
<div class="user-selected-meta" v-if="selectedUser.real_name">实名：{{ selectedUser.real_name }}</div>
|
||
</div>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="用户" v-else>
|
||
<span>{{ userLabel }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="进件角色" v-if="!isEdit">
|
||
<el-select v-model="roleKey" placeholder="请先选择用户" class="form-input" :disabled="!roleOptions.length" @change="onRoleChange">
|
||
<el-option v-for="item in roleOptions" :key="item.role_type + '-' + item.role_ref_id" :label="item.role_label + (item.onboard_status ? ' [' + item.onboard_status + ']' : '')" :value="item.role_type + ':' + item.role_ref_id" :disabled="!item.can_save">
|
||
<span>{{ item.role_label }}</span>
|
||
<span style="color:#909399;font-size:12px;margin-left:8px;">{{ item.disabled_reason || (item.onboard_status ? '已有记录:' + item.onboard_status : '新建') }}</span>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="进件角色" v-else>
|
||
<span>{{ roleLabel }}</span>
|
||
</el-form-item>
|
||
</div>
|
||
|
||
<div class="section-card">
|
||
<div class="section-title">账户类型</div>
|
||
<el-form-item label="结算账户类型">
|
||
<el-radio-group v-model="form.account_type">
|
||
<el-radio label="indv">个人</el-radio>
|
||
<el-radio label="ent">个体户/企业</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="银行卡类型" v-if="form.account_type === 'ent'">
|
||
<el-radio-group v-model="form.bank_account_type">
|
||
<el-radio label="0">对私</el-radio>
|
||
<el-radio label="1">对公</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</div>
|
||
|
||
<template v-if="form.account_type === 'indv'">
|
||
<div class="section-card">
|
||
<div class="section-title">身份实名信息</div>
|
||
<el-row :gutter="16">
|
||
<el-col :span="12">
|
||
<el-form-item label="真实姓名" required>
|
||
<el-input v-model="form.name" class="form-input" placeholder="与身份证一致"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="身份证号" required>
|
||
<el-input v-model="form.cert_no" maxlength="18" class="form-input"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="手机号" required>
|
||
<el-input v-model="form.mobile_no" maxlength="11" class="form-input"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="证件有效期">
|
||
<el-radio-group v-model="form.cert_validity_type">
|
||
<el-radio label="1">长期有效</el-radio>
|
||
<el-radio label="0">有截止日期</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="证件开始日期" required>
|
||
<el-date-picker v-model="form.cert_begin_date" type="date" value-format="yyyyMMdd" format="yyyy-MM-dd" placeholder="选择日期" class="form-input"></el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12" v-if="form.cert_validity_type === '0'">
|
||
<el-form-item label="证件截止日期" required>
|
||
<el-date-picker v-model="form.cert_end_date" type="date" value-format="yyyyMMdd" format="yyyy-MM-dd" placeholder="长期可填20991231" class="form-input"></el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="所在区域" required>
|
||
<el-cascader v-model="regionPath" :options="areaOptions" :props="areaProps" filterable clearable class="form-input" @change="onRegionChange"></el-cascader>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="详细地址" required>
|
||
<el-input v-model="form.reg_detail" class="form-input" placeholder="详细居住地址"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-form-item label="证件照片" required>
|
||
<div class="upload-grid">
|
||
<div>
|
||
<div class="upload-item-label">身份证人像面</div>
|
||
<el-upload :action="uploadUrl" :show-file-list="false" accept="image/*" :on-success="(res) => onUploadSuccess('id_card_front_url', res)">
|
||
<div class="upload-box">
|
||
<img v-if="form.id_card_front_url" :src="form.id_card_front_url">
|
||
<span v-else style="color:#909399;font-size:12px;">点击上传</span>
|
||
</div>
|
||
</el-upload>
|
||
</div>
|
||
<div>
|
||
<div class="upload-item-label">身份证国徽面</div>
|
||
<el-upload :action="uploadUrl" :show-file-list="false" accept="image/*" :on-success="(res) => onUploadSuccess('id_card_back_url', res)">
|
||
<div class="upload-box">
|
||
<img v-if="form.id_card_back_url" :src="form.id_card_back_url">
|
||
<span v-else style="color:#909399;font-size:12px;">点击上传</span>
|
||
</div>
|
||
</el-upload>
|
||
</div>
|
||
</div>
|
||
</el-form-item>
|
||
</div>
|
||
</template>
|
||
|
||
<template v-else>
|
||
<div class="section-card">
|
||
<div class="section-title">商户信息</div>
|
||
<el-row :gutter="16">
|
||
<el-col :span="12"><el-form-item label="商户名称" required><el-input v-model="form.reg_name" class="form-input"></el-input></el-form-item></el-col>
|
||
<el-col :span="12"><el-form-item label="统一社会信用代码" required><el-input v-model="form.license_code" maxlength="18" class="form-input"></el-input></el-form-item></el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="执照有效期">
|
||
<el-radio-group v-model="form.license_validity_type"><el-radio label="1">长期</el-radio><el-radio label="0">有截止</el-radio></el-radio-group>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="执照开始日期" required>
|
||
<el-date-picker v-model="form.license_begin_date" type="date" value-format="yyyyMMdd" format="yyyy-MM-dd" class="form-input"></el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12" v-if="form.license_validity_type === '0'">
|
||
<el-form-item label="执照截止日期" required>
|
||
<el-date-picker v-model="form.license_end_date" type="date" value-format="yyyyMMdd" format="yyyy-MM-dd" class="form-input"></el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="所在区域" required>
|
||
<el-cascader v-model="regionPath" :options="areaOptions" :props="areaProps" filterable clearable class="form-input" @change="onRegionChange"></el-cascader>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24"><el-form-item label="详细地址" required><el-input v-model="form.reg_detail" class="form-input"></el-input></el-form-item></el-col>
|
||
<el-col :span="12"><el-form-item label="法人姓名" required><el-input v-model="form.legal_name" class="form-input"></el-input></el-form-item></el-col>
|
||
<el-col :span="12"><el-form-item label="法人手机号" required><el-input v-model="form.legal_mobile" maxlength="11" class="form-input"></el-input></el-form-item></el-col>
|
||
<el-col :span="12"><el-form-item label="法人身份证号" required><el-input v-model="form.legal_cert_no" maxlength="18" class="form-input"></el-input></el-form-item></el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="法人证件有效期">
|
||
<el-radio-group v-model="form.legal_cert_validity_type"><el-radio label="1">长期</el-radio><el-radio label="0">有截止</el-radio></el-radio-group>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="法人证件开始" required>
|
||
<el-date-picker v-model="form.legal_cert_begin_date" type="date" value-format="yyyyMMdd" format="yyyy-MM-dd" class="form-input"></el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12" v-if="form.legal_cert_validity_type === '0'">
|
||
<el-form-item label="法人证件截止" required>
|
||
<el-date-picker v-model="form.legal_cert_end_date" type="date" value-format="yyyyMMdd" format="yyyy-MM-dd" class="form-input"></el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-form-item label="证照上传" required>
|
||
<div class="upload-grid">
|
||
<div>
|
||
<div class="upload-item-label">营业执照</div>
|
||
<el-upload :action="uploadUrl" :show-file-list="false" accept="image/*" :on-success="(res) => onUploadSuccess('license_url', res)">
|
||
<div class="upload-box"><img v-if="form.license_url" :src="form.license_url"><span v-else style="color:#909399;font-size:12px;">点击上传</span></div>
|
||
</el-upload>
|
||
</div>
|
||
<div>
|
||
<div class="upload-item-label">法人身份证人像面</div>
|
||
<el-upload :action="uploadUrl" :show-file-list="false" accept="image/*" :on-success="(res) => onUploadSuccess('legal_id_front_url', res)">
|
||
<div class="upload-box"><img v-if="form.legal_id_front_url" :src="form.legal_id_front_url"><span v-else style="color:#909399;font-size:12px;">点击上传</span></div>
|
||
</el-upload>
|
||
</div>
|
||
<div>
|
||
<div class="upload-item-label">法人身份证国徽面</div>
|
||
<el-upload :action="uploadUrl" :show-file-list="false" accept="image/*" :on-success="(res) => onUploadSuccess('legal_id_back_url', res)">
|
||
<div class="upload-box"><img v-if="form.legal_id_back_url" :src="form.legal_id_back_url"><span v-else style="color:#909399;font-size:12px;">点击上传</span></div>
|
||
</el-upload>
|
||
</div>
|
||
</div>
|
||
</el-form-item>
|
||
</div>
|
||
</template>
|
||
|
||
<div class="section-card">
|
||
<div class="section-title">结算账户信息</div>
|
||
<el-row :gutter="16">
|
||
<el-col :span="12">
|
||
<el-form-item label="银行卡号" required>
|
||
<el-input v-model="form.card_no" class="form-input" placeholder="一类借记卡"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="银行预留手机号" required>
|
||
<el-input v-model="bankMobile" maxlength="11" class="form-input"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="开户银行支行" required>
|
||
<el-input v-model="branchKeyword" class="form-input" placeholder="搜索支行名称" @input="onBranchInput"></el-input>
|
||
<div class="field-tip" v-if="form.branch_name">已选：{{ form.branch_name }}（{{ form.branch_code }}）</div>
|
||
<div class="branch-panel" v-if="branchResults.length">
|
||
<div class="branch-item" v-for="(item, idx) in branchResults" :key="idx" @click="selectBranch(item)">
|
||
<div>{{ item.branch_name }}</div>
|
||
<div style="color:#909399;font-size:12px;">{{ item.branch_code }}</div>
|
||
</div>
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-form-item label="银行卡正面照">
|
||
<el-upload :action="uploadUrl" :show-file-list="false" accept="image/*" :on-success="(res) => onUploadSuccess('bank_card_url', res)">
|
||
<div class="upload-box"><img v-if="form.bank_card_url" :src="form.bank_card_url"><span v-else style="color:#909399;font-size:12px;">点击上传</span></div>
|
||
</el-upload>
|
||
<div class="field-tip">建议上传，可加快审核</div>
|
||
</el-form-item>
|
||
<el-form-item label="开户许可证" v-if="form.account_type === 'ent' && form.bank_account_type === '1'" required>
|
||
<el-upload :action="uploadUrl" :show-file-list="false" accept="image/*" :on-success="(res) => onUploadSuccess('account_permit_url', res)">
|
||
<div class="upload-box"><img v-if="form.account_permit_url" :src="form.account_permit_url"><span v-else style="color:#909399;font-size:12px;">点击上传</span></div>
|
||
</el-upload>
|
||
</el-form-item>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
<div class="form-footer">
|
||
<el-button @click="closeForm">取消</el-button>
|
||
<el-button type="primary" :loading="saving" @click="submitForm">{{ isEdit ? '保存修改' : '保存进件资料' }}</el-button>
|
||
</div>
|
||
</div>
|