郭庆泰
cf5790229a
主要改动: - SQL: biz_support_unit → biz_org, 加 org_type, 加 business_nature; 删 biz_execution_unit, biz_service_org - SQL: biz_project.support_unit_id/name + service_org_id/name → org_id/name/type - SQL: biz_meeting.support_unit_name → org_name - SQL: biz_person.work_unit → org_id (FK) - 后端: 新 BizOrg entity/mapper/service/controller - 后端: BizProject/BizMeeting 字段重命名 - 后端: 删 12 个 BizSupportUnit/BizExecutionUnit/BizServiceOrg Java 文件 - 后端: BizPersonImportVO.workUnit → orgName (导入时查 biz_org 取 org_id) - 后端: BizAuthController.registerExecutor 完整实现 (原 registerSupplier stub) - 前端: 新 admin/Orgs.vue + manager/Orgs.vue (原 SupportUnits) - 前端: RegisterExecutor.vue (原 RegisterSupplier, 单页 2 步) - 前端: sponsor/executor/manager 多个文件 workUnit → orgId/orgName 重命名 - 前端: 统一 supplier → executor, 业务命名 sponsor(赞助方) / executor(执行方=供应商) - 前端: 全工程 execution → executor (company type / role / person unit_type)
837 lines
32 KiB
HTML
837 lines
32 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>账号信息 - 项目管理系统</title>
|
||
<style>
|
||
/* ============= 全局(沿用组件库约定) ============= */
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
color: #333;
|
||
background: #fafafa;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.content { padding: 24px 32px; }
|
||
|
||
/* ============= 面包屑 ============= */
|
||
.breadcrumb {
|
||
font-size: 13px;
|
||
color: #8c8c8c;
|
||
margin-bottom: 12px;
|
||
}
|
||
.breadcrumb a {
|
||
color: #1890ff;
|
||
text-decoration: none;
|
||
}
|
||
.breadcrumb a:hover { text-decoration: underline; }
|
||
|
||
/* ============= 页面标题 ============= */
|
||
.page-title {
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
color: #1a1a1a;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
/* ============= Tab 导航(原型 u12429 / u12431) ============= */
|
||
.tabs {
|
||
display: flex;
|
||
gap: 0;
|
||
border-bottom: 1px solid #e8e8e8;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.tab {
|
||
padding: 12px 24px;
|
||
font-size: 15px;
|
||
color: #595959;
|
||
cursor: pointer;
|
||
border-bottom: 2px solid transparent;
|
||
transition: all 0.2s;
|
||
background: none;
|
||
border-top: none;
|
||
border-left: none;
|
||
border-right: none;
|
||
font-weight: normal;
|
||
margin-bottom: -1px;
|
||
}
|
||
|
||
.tab:hover { color: #1890ff; }
|
||
|
||
.tab.active {
|
||
color: #1890ff;
|
||
border-bottom-color: #1890ff;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* ============= 卡片 ============= */
|
||
.card {
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
padding: 32px 40px;
|
||
border: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.tab-panel { display: none; }
|
||
.tab-panel.active { display: block; }
|
||
|
||
/* ============= 头像(原型截图左侧) ============= */
|
||
.avatar-block {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
margin-bottom: 28px;
|
||
padding-bottom: 20px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.avatar-circle {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #1890ff, #722ed1);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: 28px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
position: relative;
|
||
}
|
||
|
||
.avatar-circle .avatar-tip {
|
||
position: absolute;
|
||
bottom: -18px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
font-size: 11px;
|
||
color: #8c8c8c;
|
||
white-space: nowrap;
|
||
font-weight: normal;
|
||
}
|
||
|
||
/* ============= 表单网格(原型 u12433 截图布局) ============= */
|
||
.form-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 20px 32px;
|
||
max-width: 900px;
|
||
}
|
||
|
||
.form-grid .form-row {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.form-label {
|
||
flex: 0 0 110px;
|
||
font-size: 13px;
|
||
color: #595959;
|
||
text-align: right;
|
||
padding-right: 12px;
|
||
white-space: nowrap;
|
||
}
|
||
.form-label .required {
|
||
color: #ff4d4f;
|
||
margin-right: 2px;
|
||
}
|
||
|
||
.form-input,
|
||
.form-select {
|
||
flex: 1;
|
||
height: 32px;
|
||
padding: 0 12px;
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 4px;
|
||
font-size: 13px;
|
||
color: #333;
|
||
background: #fff;
|
||
outline: none;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.form-input:focus,
|
||
.form-select:focus {
|
||
border-color: #1890ff;
|
||
box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.1);
|
||
}
|
||
|
||
.form-input[readonly] {
|
||
background: #fafafa;
|
||
color: #595959;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.form-select {
|
||
cursor: pointer;
|
||
appearance: none;
|
||
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-position: right 10px center;
|
||
background-size: 14px;
|
||
padding-right: 28px;
|
||
}
|
||
|
||
/* 验证码字段:输入 + 获取按钮 */
|
||
.input-with-btn {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex: 1;
|
||
}
|
||
.input-with-btn .form-input { flex: 1; }
|
||
.input-with-btn .btn-sms {
|
||
flex: 0 0 90px;
|
||
height: 32px;
|
||
background: #fff;
|
||
border: 1px solid #1890ff;
|
||
color: #1890ff;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
white-space: nowrap;
|
||
}
|
||
.input-with-btn .btn-sms:hover {
|
||
background: #1890ff;
|
||
color: #fff;
|
||
}
|
||
|
||
.form-error {
|
||
grid-column: 1 / -1;
|
||
font-size: 12px;
|
||
color: #ff4d4f;
|
||
margin-top: 4px;
|
||
min-height: 16px;
|
||
}
|
||
|
||
/* ============= 修改密码 Tab(单列布局,不用 form-grid) ============= */
|
||
.password-form {
|
||
max-width: 420px;
|
||
}
|
||
|
||
.password-form .form-row {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 18px;
|
||
}
|
||
.password-form .form-row:last-of-type { margin-bottom: 0; }
|
||
|
||
.password-form .form-label {
|
||
flex: 0 0 90px;
|
||
font-size: 14px;
|
||
color: #595959;
|
||
text-align: right;
|
||
padding-right: 16px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.password-form .form-input {
|
||
flex: 1;
|
||
height: 36px;
|
||
padding: 0 12px;
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
color: #333;
|
||
background: #fff;
|
||
outline: none;
|
||
transition: all 0.2s;
|
||
}
|
||
.password-form .form-input:focus {
|
||
border-color: #1890ff;
|
||
box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.1);
|
||
}
|
||
.password-form .form-input[readonly] {
|
||
background: #fafafa;
|
||
color: #595959;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.password-form .form-error {
|
||
grid-column: auto;
|
||
font-size: 12px;
|
||
color: #ff4d4f;
|
||
margin-top: 4px;
|
||
min-height: 16px;
|
||
padding-left: 106px;
|
||
}
|
||
|
||
.password-form .form-actions {
|
||
margin-top: 28px;
|
||
padding-top: 20px;
|
||
border-top: none;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
/* ============= 红字提示(原型 u12456 + u12458) ============= */
|
||
.hint-list {
|
||
font-size: 12px;
|
||
color: #ff4d4f;
|
||
line-height: 1.9;
|
||
margin-bottom: 24px;
|
||
margin-top: 28px;
|
||
padding-top: 20px;
|
||
border-top: 1px solid #f0f0f0;
|
||
}
|
||
.hint-list p { margin-bottom: 4px; }
|
||
.hint-list p:last-child { margin-bottom: 0; }
|
||
|
||
/* ============= 上传区(原型 u12439/u12441/u12443 / u12445/u12447 / u12449/u12451) ============= */
|
||
.upload-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 16px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.upload-row:last-of-type { margin-bottom: 0; }
|
||
|
||
.upload-row-label {
|
||
flex: 0 0 130px;
|
||
font-size: 14px;
|
||
color: #595959;
|
||
text-align: right;
|
||
padding-top: 6px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.upload-row-content {
|
||
flex: 1;
|
||
display: flex;
|
||
gap: 16px;
|
||
align-items: flex-start;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* 单张卡片:175×100 占位 + 上传按钮 */
|
||
.upload-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.upload-thumb {
|
||
width: 175px;
|
||
height: 100px;
|
||
border: 1px dashed #d9d9d9;
|
||
border-radius: 4px;
|
||
background: #fafafa;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
color: #8c8c8c;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.upload-thumb:hover {
|
||
border-color: #1890ff;
|
||
color: #1890ff;
|
||
background: #f0f8ff;
|
||
}
|
||
.upload-thumb.has-file {
|
||
border-style: solid;
|
||
border-color: #52c41a;
|
||
background: #fff;
|
||
}
|
||
|
||
.upload-thumb .thumb-icon {
|
||
font-size: 24px;
|
||
opacity: 0.6;
|
||
}
|
||
.upload-thumb .thumb-text {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.upload-thumb img {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
/* 原型 u12453/54/55: 140×25 上传按钮 */
|
||
.upload-btn {
|
||
width: 140px;
|
||
height: 25px;
|
||
background: #fff;
|
||
border: 1px solid #d9d9d9;
|
||
color: #595959;
|
||
border-radius: 3px;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
align-self: flex-start;
|
||
}
|
||
.upload-btn:hover {
|
||
border-color: #1890ff;
|
||
color: #1890ff;
|
||
}
|
||
|
||
/* ============= 分节标题(对应截图:个人资料/银行信息) ============= */
|
||
.section-title {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #1a1a1a;
|
||
margin: 24px 0 16px;
|
||
padding-left: 10px;
|
||
border-left: 3px solid #1890ff;
|
||
line-height: 1;
|
||
}
|
||
|
||
.section-title:first-of-type { margin-top: 0; }
|
||
|
||
/* ============= 按钮区(原型 u12435 保存 + u12437 取消) ============= */
|
||
.form-actions {
|
||
display: flex;
|
||
gap: 12px;
|
||
justify-content: center;
|
||
margin-top: 32px;
|
||
padding-top: 24px;
|
||
border-top: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.btn {
|
||
height: 40px;
|
||
padding: 0 24px;
|
||
border-radius: 5px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
min-width: 140px;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: #169bd5;
|
||
color: #fff;
|
||
border: 1px solid #169bd5;
|
||
}
|
||
.btn-primary:hover { background: #0f8db8; border-color: #0f8db8; }
|
||
|
||
.btn-default {
|
||
background: #fff;
|
||
color: #333;
|
||
border: 1px solid #797979;
|
||
}
|
||
.btn-default:hover { border-color: #1890ff; color: #1890ff; }
|
||
|
||
/* ============= 响应式 ============= */
|
||
@media (max-width: 768px) {
|
||
.content { padding: 16px; }
|
||
.card { padding: 20px; }
|
||
.form-grid { grid-template-columns: 1fr; }
|
||
.form-row { flex-direction: column; align-items: stretch; }
|
||
.form-label { text-align: left; padding-right: 0; margin-bottom: 6px; }
|
||
.form-input, .form-select { flex: 1; width: 100%; }
|
||
.upload-row { flex-direction: column; align-items: stretch; }
|
||
.upload-row-label { text-align: left; padding-top: 0; margin-bottom: 6px; }
|
||
.upload-row-content { flex-direction: column; }
|
||
.upload-thumb { width: 100%; }
|
||
.upload-btn { width: 100%; height: 32px; }
|
||
.form-actions { flex-direction: column; }
|
||
.btn { width: 100%; }
|
||
.tab { padding: 10px 16px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!--
|
||
============================================================
|
||
来源: /原型/账号信息_2.html
|
||
/原型/files/账号信息_2/styles.css
|
||
/原型/images/账号信息_2/u12433.png ← 个人信息 tab 表单截图
|
||
============================================================
|
||
按 top 排序的内容区模块:
|
||
#1 u12427 "首页" (287, 52) → 面包屑根
|
||
#2 u12429 "个人信息" (512, 197) → Tab 1
|
||
#3 u12431 "修改密码" (801, 197) → Tab 2
|
||
#4 u12433 个人信息表单截图(265, 270, 1054×386) → 截图内容还原(见下)
|
||
#5 u12439 身份证照片 (861, 625) → label
|
||
#6 u12441 正面 (942, 625) → 175×100 占位
|
||
#7 u12443 反面 (1145, 625) → 175×100 占位
|
||
#8 u12455 上传 (942, 747) → 140×25 按钮(身份证)
|
||
#9 u12445 执业证书/证明 (351, 673) → label
|
||
#10 u12447 证书 (450, 673) → 175×100 占位
|
||
#11 u12454 上传 (650, 747) → 140×25 按钮(证书)
|
||
#12 u12449 职称证明 (383, 817) → label
|
||
#13 u12451 证明 (450, 817) → 175×100 占位
|
||
#14 u12453 上传 (650, 891) → 140×25 按钮(证明)
|
||
#15 u12456 红字提示1 (784, 817) → *专家可更新上传...
|
||
#16 u12458 红字提示2 (808, 859) → *签署劳务协议时...
|
||
#17 u12435 保存 (595, 1020) → 主按钮(140×40)
|
||
#18 u12437 取消 (808, 1020) → 次按钮(140×40)
|
||
|
||
u12433.png 截图内容(原型放在个人信息 tab 上方):
|
||
左侧栏:
|
||
- 头像(圆形)
|
||
- * 联系电话
|
||
- * 专家姓名
|
||
- * 地区(下拉)
|
||
- * 工作单位
|
||
- * 开户行省份
|
||
- * 开户行地址
|
||
- * 证件号码
|
||
右侧栏:
|
||
- * 验证码 + 获取验证码按钮
|
||
- * 科室(下拉)
|
||
- * 银行卡号
|
||
- * 医生职称(下拉)
|
||
- * 开户行城市
|
||
- * 银行名称
|
||
============================================================
|
||
框架元素(由父级 doctor.html 渲染,本页面不输出):
|
||
- u12407/u12409/u12411/u12413/u12415/u12417/u12419/u12421/u12423/u12425 侧边栏+顶栏
|
||
============================================================
|
||
新增项(非原型):
|
||
- 修改密码 Tab 内的表单(原型只有 2 个 tab 标题,未设计表单)
|
||
- 分节标题(个人资料/银行信息)便于阅读
|
||
- 表单校验(#errMsg)
|
||
- 响应式 768px
|
||
============================================================
|
||
-->
|
||
<main class="content">
|
||
|
||
<!-- #1 面包屑(对应 u12427) -->
|
||
<div class="breadcrumb">
|
||
<a href="javascript:void(0)" onclick="goHome()">首页</a> > 账号信息
|
||
</div>
|
||
|
||
<!-- 页面标题 -->
|
||
<h1 class="page-title">账号信息</h1>
|
||
|
||
<!-- #2+#3 Tab 导航(对应 u12429 / u12431) -->
|
||
<div class="tabs" role="tablist">
|
||
<button class="tab active" data-tab="profile" onclick="switchTab('profile', this)">
|
||
个人信息
|
||
</button>
|
||
<button class="tab" data-tab="password" onclick="switchTab('password', this)">
|
||
修改密码
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Tab 1: 个人信息(对应 u12439~u12458 + u12433 截图) -->
|
||
<div id="panel-profile" class="tab-panel active">
|
||
<div class="card">
|
||
|
||
<!-- #4 头像(对应 u12433 截图左上) -->
|
||
<div class="avatar-block">
|
||
<div class="avatar-circle">
|
||
张
|
||
<span class="avatar-tip">点击更换</span>
|
||
</div>
|
||
<div>
|
||
<div style="font-size:16px;font-weight:600;color:#1a1a1a;">张三</div>
|
||
<div style="font-size:12px;color:#8c8c8c;margin-top:4px;">专家账号</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- #4 基本资料(对应 u12433 截图左列前 4 项 + 右列前 4 项) -->
|
||
<div class="section-title">基本资料</div>
|
||
<div class="form-grid">
|
||
<div class="form-row">
|
||
<label class="form-label" for="contactPhone"><span class="required">*</span>联系电话</label>
|
||
<input type="tel" id="contactPhone" class="form-input" placeholder="请填写联系电话" value="13534621147">
|
||
</div>
|
||
<div class="form-row">
|
||
<label class="form-label" for="smsCode"><span class="required">*</span>验证码</label>
|
||
<div class="input-with-btn">
|
||
<input type="text" id="smsCode" class="form-input" placeholder="请填写验证码" maxlength="6">
|
||
<button type="button" class="btn-sms" onclick="sendSmsCode()">获取验证码</button>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<label class="form-label" for="expertName"><span class="required">*</span>专家姓名</label>
|
||
<input type="text" id="expertName" class="form-input" placeholder="请填写姓名" value="张三">
|
||
</div>
|
||
<div class="form-row">
|
||
<label class="form-label" for="department"><span class="required">*</span>科室</label>
|
||
<select id="department" class="form-select">
|
||
<option value="">输入关键词搜索</option>
|
||
<option value="内科">内科</option>
|
||
<option value="外科">外科</option>
|
||
<option value="儿科">儿科</option>
|
||
<option value="妇产科">妇产科</option>
|
||
<option value="其他">其他</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-row">
|
||
<label class="form-label" for="region"><span class="required">*</span>地区</label>
|
||
<select id="region" class="form-select">
|
||
<option value="">请选择地区</option>
|
||
<option value="北京">北京</option>
|
||
<option value="上海">上海</option>
|
||
<option value="广东">广东</option>
|
||
<option value="其他">其他</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-row">
|
||
<label class="form-label" for="idCardNo"><span class="required">*</span>证件号码</label>
|
||
<input type="text" id="idCardNo" class="form-input" placeholder="请填写证件号码">
|
||
</div>
|
||
<div class="form-row">
|
||
<label class="form-label" for="company"><span class="required">*</span>工作单位</label>
|
||
<input type="text" id="company" class="form-input" placeholder="请填写工作单位">
|
||
</div>
|
||
<div class="form-row">
|
||
<label class="form-label" for="doctorTitle"><span class="required">*</span>医生职称</label>
|
||
<select id="doctorTitle" class="form-select">
|
||
<option value="">请填写医生职称</option>
|
||
<option value="主任医师">主任医师</option>
|
||
<option value="副主任医师">副主任医师</option>
|
||
<option value="主治医师">主治医师</option>
|
||
<option value="住院医师">住院医师</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- #4 银行信息(对应 u12433 截图剩余字段) -->
|
||
<div class="section-title">银行信息</div>
|
||
<div class="form-grid">
|
||
<div class="form-row">
|
||
<label class="form-label" for="bankCardNo"><span class="required">*</span>银行卡号</label>
|
||
<input type="text" id="bankCardNo" class="form-input" placeholder="请填写银行卡号" maxlength="19">
|
||
</div>
|
||
<div class="form-row">
|
||
<label class="form-label" for="bankName"><span class="required">*</span>银行名称</label>
|
||
<input type="text" id="bankName" class="form-input" placeholder="请填写开户银行名称(到支行)">
|
||
</div>
|
||
<div class="form-row">
|
||
<label class="form-label" for="bankProvince"><span class="required">*</span>开户行省份</label>
|
||
<input type="text" id="bankProvince" class="form-input" placeholder="请填写开户行省份">
|
||
</div>
|
||
<div class="form-row">
|
||
<label class="form-label" for="bankCity"><span class="required">*</span>开户行城市</label>
|
||
<input type="text" id="bankCity" class="form-input" placeholder="请填写开户行城市">
|
||
</div>
|
||
<div class="form-row">
|
||
<label class="form-label" for="bankAddress"><span class="required">*</span>开户行地址</label>
|
||
<input type="text" id="bankAddress" class="form-input" placeholder="请填写开户行地址">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- #15+#16 红字提示(对应 u12456 + u12458) -->
|
||
<div class="hint-list">
|
||
<p>*专家可更新上传相应的证明文件及身份证照片</p>
|
||
<p>*签署劳务协议时,先验证是否有执业证书、职称证明、身份证照片,如果没有,必须先上传</p>
|
||
</div>
|
||
|
||
<!-- 上传区(对应 u12439/u12441/u12443/u12445/u12447/u12449/u12451/u12453/u12454/u12455) -->
|
||
<div class="section-title">资质证件</div>
|
||
|
||
<!-- 身份证照片 -->
|
||
<div class="upload-row">
|
||
<label class="upload-row-label">身份证照片:</label>
|
||
<div class="upload-row-content">
|
||
<div class="upload-card">
|
||
<div class="upload-thumb" id="idcard-front" onclick="simulateUpload('idcard-front')">
|
||
<span class="thumb-icon">🪪</span>
|
||
<span class="thumb-text">正面</span>
|
||
</div>
|
||
</div>
|
||
<div class="upload-card">
|
||
<div class="upload-thumb" id="idcard-back" onclick="simulateUpload('idcard-back')">
|
||
<span class="thumb-icon">🪪</span>
|
||
<span class="thumb-text">反面</span>
|
||
</div>
|
||
</div>
|
||
<div class="upload-card">
|
||
<button class="upload-btn" onclick="simulateUpload('idcard')">上传</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 执业证书/证明 -->
|
||
<div class="upload-row">
|
||
<label class="upload-row-label">执业证书/证明:</label>
|
||
<div class="upload-row-content">
|
||
<div class="upload-card">
|
||
<div class="upload-thumb" id="cert" onclick="simulateUpload('cert')">
|
||
<span class="thumb-icon">📜</span>
|
||
<span class="thumb-text">证书</span>
|
||
</div>
|
||
</div>
|
||
<div class="upload-card">
|
||
<button class="upload-btn" onclick="simulateUpload('cert')">上传</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 职称证明 -->
|
||
<div class="upload-row">
|
||
<label class="upload-row-label">职称证明:</label>
|
||
<div class="upload-row-content">
|
||
<div class="upload-card">
|
||
<div class="upload-thumb" id="title-cert" onclick="simulateUpload('title-cert')">
|
||
<span class="thumb-icon">🏅</span>
|
||
<span class="thumb-text">证明</span>
|
||
</div>
|
||
</div>
|
||
<div class="upload-card">
|
||
<button class="upload-btn" onclick="simulateUpload('title-cert')">上传</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- #17+#18 按钮(对应 u12435 / u12437) -->
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-primary" onclick="saveProfile()">保存</button>
|
||
<button type="button" class="btn btn-default" onclick="cancelProfile()">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab 2: 修改密码(新增项,原型未设计) -->
|
||
<div id="panel-password" class="tab-panel">
|
||
<div class="card">
|
||
<form id="changePwdForm" class="password-form" onsubmit="return false;">
|
||
|
||
<!-- 姓名(只读) -->
|
||
<div class="form-row">
|
||
<label class="form-label" for="name">姓名</label>
|
||
<input type="text" id="name" class="form-input" value="张三" readonly>
|
||
</div>
|
||
|
||
<!-- 手机号(只读) -->
|
||
<div class="form-row">
|
||
<label class="form-label" for="phone">手机号</label>
|
||
<input type="text" id="phone" class="form-input" value="13534621147" readonly>
|
||
</div>
|
||
|
||
<!-- 原密码 -->
|
||
<div class="form-row">
|
||
<label class="form-label" for="oldPwd">
|
||
<span class="required">*</span>原密码
|
||
</label>
|
||
<input type="password" id="oldPwd" class="form-input" placeholder="请输入原密码">
|
||
</div>
|
||
|
||
<!-- 新密码 -->
|
||
<div class="form-row">
|
||
<label class="form-label" for="newPwd">
|
||
<span class="required">*</span>新密码
|
||
</label>
|
||
<input type="password" id="newPwd" class="form-input" placeholder="请输入新密码">
|
||
</div>
|
||
|
||
<!-- 确认密码 -->
|
||
<div class="form-row">
|
||
<label class="form-label" for="confirmPwd">
|
||
<span class="required">*</span>确认密码
|
||
</label>
|
||
<input type="password" id="confirmPwd" class="form-input" placeholder="请再次输入新密码">
|
||
</div>
|
||
|
||
<div id="errMsg" class="form-error"></div>
|
||
|
||
<!-- 按钮 -->
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-primary" onclick="savePassword()">保存</button>
|
||
<button type="button" class="btn btn-default" onclick="cancelPassword()">取消</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
</main>
|
||
|
||
<script>
|
||
function goHome() {
|
||
try {
|
||
if (window.parent && window.parent.document.getElementById('contentFrame')) {
|
||
window.parent.document.getElementById('contentFrame').src = 'home.html';
|
||
}
|
||
} catch (e) { /* 跨域或非 iframe 环境,忽略 */ }
|
||
}
|
||
|
||
// Tab 切换
|
||
function switchTab(tabId, btn) {
|
||
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
||
document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
document.getElementById('panel-' + tabId).classList.add('active');
|
||
}
|
||
|
||
// 上传演示
|
||
function simulateUpload(id) {
|
||
const el = document.getElementById(id);
|
||
if (el) el.classList.toggle('has-file');
|
||
}
|
||
|
||
// 获取验证码
|
||
function sendSmsCode() {
|
||
const phone = document.getElementById('contactPhone').value.trim();
|
||
if (!/^1[3-9]\d{9}$/.test(phone)) {
|
||
alert('请先填写正确的联系电话');
|
||
return;
|
||
}
|
||
alert('验证码已发送至 ' + phone);
|
||
}
|
||
|
||
// 个人信息保存
|
||
function saveProfile() {
|
||
const required = ['contactPhone', 'expertName', 'region', 'company', 'department', 'doctorTitle', 'idCardNo', 'bankCardNo', 'bankName', 'bankProvince', 'bankCity', 'bankAddress'];
|
||
for (const id of required) {
|
||
const el = document.getElementById(id);
|
||
if (el && !el.value.trim()) {
|
||
el.focus();
|
||
alert('请填写完整必填字段');
|
||
return;
|
||
}
|
||
}
|
||
alert('个人信息已保存');
|
||
}
|
||
|
||
function cancelProfile() {
|
||
if (confirm('确定取消已修改的内容吗?')) {
|
||
// 实际项目中刷新原始数据
|
||
}
|
||
}
|
||
|
||
// 修改密码校验
|
||
function validatePassword() {
|
||
const oldPwd = document.getElementById('oldPwd').value;
|
||
const newPwd = document.getElementById('newPwd').value;
|
||
const confirmPwd = document.getElementById('confirmPwd').value;
|
||
if (newPwd || confirmPwd) {
|
||
if (!oldPwd) return '请先填写原密码';
|
||
if (newPwd.length < 6) return '新密码长度不能少于 6 位';
|
||
if (newPwd !== confirmPwd) return '两次输入的新密码不一致';
|
||
}
|
||
return '';
|
||
}
|
||
|
||
['oldPwd', 'newPwd', 'confirmPwd'].forEach(id => {
|
||
document.getElementById(id).addEventListener('input', () => {
|
||
document.getElementById('errMsg').textContent = '';
|
||
});
|
||
});
|
||
|
||
function savePassword() {
|
||
const err = validatePassword();
|
||
const errEl = document.getElementById('errMsg');
|
||
if (err) {
|
||
errEl.textContent = err;
|
||
return;
|
||
}
|
||
errEl.textContent = '';
|
||
alert('密码修改成功');
|
||
}
|
||
|
||
function cancelPassword() {
|
||
document.getElementById('oldPwd').value = '';
|
||
document.getElementById('newPwd').value = '';
|
||
document.getElementById('confirmPwd').value = '';
|
||
document.getElementById('errMsg').textContent = '';
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |