Files
xst 5e4e978cd5 chore: 入库 9 月积压成果(滇中好运原型评估、小象开票需求与原型、工具配置)
- 原型评估_滇中好运物流云_20260917/:物流云原型评估产物(含核对表与字段对比表)
- requirements/小象开票收款方创建需求.md + prototypes/小象开票原型.html:小象开票建司机/车辆/收款信息需求
- requirements.txt:Execute 战区依赖调整(移除 pytest/allure-pytest/requests,改用 pytest-html,Appium 默认注释)
- .claude/launch.json:新增物流公司管理原型预览服务(wuliu-proto:8138)
- .agents/skills:agent 技能定义
2026-09-29 10:03:43 +08:00

629 lines
46 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>小象开票 - 收款方创建 - 交互原型</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif; font-size:14px; color:#333; background:#f0f2f5; }
.app { display:flex; min-height:100vh; }
.sidebar { width:200px; background:#263445; color:#bfcbd9; flex-shrink:0; min-height:100vh; overflow-y:auto; }
.logo { height:56px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; font-weight:bold; background:#1f2d3d; letter-spacing:1px; }
.menu { list-style:none; padding-bottom:40px; }
.menu > li { line-height:44px; }
.menu .mi { display:block; padding:0 20px; cursor:pointer; white-space:nowrap; }
.menu .mi:hover { background:#1f2d3d; }
.menu .mi .arrow { float:right; font-size:12px; color:#8a9bb0; }
.submenu { list-style:none; background:#1f2d3d; display:none; }
.submenu.open { display:block; }
.submenu li { padding-left:34px; line-height:40px; cursor:pointer; white-space:nowrap; }
.submenu li:hover { color:#fff; }
.submenu li.active { color:#409eff; }
.submenu .sub2 { list-style:none; background:#1a2433; display:none; }
.submenu .sub2.open { display:block; }
.submenu .sub2 li { padding-left:50px; line-height:36px; font-size:13px; }
.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar { height:50px; background:#fff; display:flex; align-items:center; padding:0 16px; border-bottom:1px solid #e6e6e6; box-shadow:0 1px 4px rgba(0,21,41,.08); position:relative; z-index:5; }
.crumb { color:#97a8be; font-size:13px; }
.crumb b { color:#333; font-weight:normal; }
.crumb .sep { margin:0 6px; }
.topbar .right { margin-left:auto; display:flex; align-items:center; gap:16px; color:#5a5e66; }
.avatar { width:30px; height:30px; border-radius:50%; background:#409eff; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:12px; }
.tabsbar { background:#fff; padding:6px 12px 0; border-bottom:1px solid #e6e6e6; display:flex; gap:6px; flex-wrap:wrap; }
.chip { background:#fff; border:1px solid #d8dce5; color:#495060; padding:4px 10px; font-size:12px; border-radius:2px; cursor:pointer; margin-bottom:6px; display:inline-flex; align-items:center; gap:6px; }
.chip .x { color:#9aa2b1; font-size:13px; }
.chip.active { background:#67c23a; border-color:#67c23a; color:#fff; }
.chip.active .x { color:#e6f7dd; }
.demo-strip { background:#fdf6ec; color:#b88230; font-size:12px; padding:5px 16px; border-bottom:1px solid #faecd8; }
.content { flex:1; padding:14px; }
.page { display:none; }
.page.active { display:block; }
.card { background:#fff; border-radius:4px; padding:18px; box-shadow:0 1px 2px rgba(0,0,0,.03); margin-bottom:14px; }
.page-title { font-size:15px; font-weight:bold; color:#303133; margin-bottom:14px; padding-left:8px; border-left:3px solid #409eff; }
.btn { display:inline-block; padding:8px 16px; font-size:13px; border-radius:3px; border:1px solid #dcdfe6; background:#fff; color:#606266; cursor:pointer; outline:none; }
.btn.primary { background:#409eff; border-color:#409eff; color:#fff; }
.btn.success { background:#67c23a; border-color:#67c23a; color:#fff; }
.btn.mini { padding:4px 10px; font-size:12px; }
.link { color:#409eff; cursor:pointer; margin-right:10px; font-size:13px; }
.link.danger { color:#f56c6c; }
.btn-row { margin-top:18px; padding-top:14px; border-top:1px solid #ebeef5; }
.btn-row .btn { margin-right:10px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:2px 30px; }
.form-item { display:flex; align-items:flex-start; padding:8px 0; }
.form-item.full { grid-column:1 / -1; }
.form-item label { width:130px; text-align:right; padding-right:10px; line-height:32px; color:#606266; flex-shrink:0; font-size:13px; }
.req::before { content:"*"; color:#f56c6c; margin-right:3px; }
.form-item .ctrl { flex:1; min-width:0; }
.input, .select { width:100%; height:32px; border:1px solid #dcdfe6; border-radius:3px; padding:0 10px; font-size:13px; color:#606266; outline:none; background:#fff; }
.input:focus, .select:focus { border-color:#409eff; }
.input[readonly] { background:#f5f7fa; color:#909399; }
.tip { color:#909399; font-size:12px; line-height:32px; margin-left:8px; }
.upload-btn { display:inline-block; padding:6px 12px; background:#409eff; color:#fff; border-radius:3px; font-size:12px; cursor:pointer; }
.file-name { margin-left:8px; color:#67c23a; font-size:12px; }
.hint { color:#909399; font-size:12px; margin-top:6px; }
details { border:1px solid #ebeef5; border-radius:3px; padding:8px 12px; margin:10px 0; }
details summary { cursor:pointer; color:#409eff; font-size:13px; }
.btn-bar { display:flex; gap:10px; margin-bottom:14px; }
.table-wrap { overflow-x:auto; }
table.tbl { width:100%; border-collapse:collapse; font-size:13px; }
.tbl th, .tbl td { border-bottom:1px solid #ebeef5; padding:10px 8px; text-align:left; color:#606266; white-space:nowrap; }
.tbl th { background:#f8f8f9; color:#515a6e; font-weight:bold; }
.tbl tbody tr:nth-child(even) { background:#fafbfc; }
.tbl tbody tr:hover { background:#f5f7fa; }
.tbl tr.frow th { padding:6px 4px; }
.frow .input, .frow .select { height:28px; font-size:12px; color:#909399; }
.tag { display:inline-block; padding:2px 8px; font-size:12px; border-radius:3px; line-height:18px; }
.tag.green { background:#f0f9eb; color:#67c23a; border:1px solid #e1f3d8; }
.tag.orange { background:#fdf6ec; color:#e6a23c; border:1px solid #faecd8; }
.tag.red { background:#fef0f0; color:#f56c6c; border:1px solid #fde2e2; }
.tag.blue { background:#ecf5ff; color:#409eff; border:1px solid #d9ecff; }
.pagination { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:14px; font-size:13px; color:#606266; }
.pg-btn { min-width:28px; height:28px; border:1px solid #dcdfe6; border-radius:3px; background:#fff; color:#606266; cursor:pointer; font-size:12px; }
.pg-btn.cur { background:#409eff; border-color:#409eff; color:#fff; }
.empty { text-align:center; color:#909399; padding:30px 0; font-size:13px; }
.mask { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:100; align-items:flex-start; justify-content:center; }
.mask.open { display:flex; }
.dialog { background:#fff; border-radius:4px; width:680px; max-width:94vw; margin-top:60px; box-shadow:0 4px 20px rgba(0,0,0,.2); max-height:86vh; display:flex; flex-direction:column; }
.dialog .dlg-head { display:flex; align-items:center; padding:14px 18px; border-bottom:1px solid #ebeef5; font-weight:bold; color:#303133; }
.dialog .dlg-head .close { margin-left:auto; cursor:pointer; color:#909399; font-size:18px; line-height:1; }
.dialog .dlg-body { padding:18px 22px 6px; overflow-y:auto; }
.dialog .dlg-foot { padding:12px 18px 16px; text-align:right; }
.dialog .dlg-foot .btn { margin-left:10px; min-width:70px; }
.section-title { font-size:13px; color:#303133; font-weight:bold; margin:6px 0 4px; padding-left:8px; border-left:3px solid #409eff; }
#toast-wrap { position:fixed; top:60px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:10px; align-items:center; }
.toast { padding:9px 18px; border-radius:4px; color:#fff; font-size:13px; box-shadow:0 2px 12px rgba(0,0,0,.15); }
.toast.success { background:#67c23a; }
.toast.error { background:#f56c6c; }
.toast.warning { background:#e6a23c; }
.home-cards { display:flex; gap:14px; flex-wrap:wrap; }
.stat-card { background:#fff; border-radius:4px; padding:18px 22px; min-width:190px; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.stat-card .num { font-size:24px; font-weight:bold; color:#303133; margin-top:6px; }
.stat-card .lbl { color:#909399; font-size:13px; }
</style>
</head>
<body>
<div class="app">
<aside class="sidebar">
<div class="logo">Ⓦ 运八网络货运平台系统</div>
<ul class="menu">
<li><span class="mi" onclick="go('home')">✈ 首页</span></li>
<li><span class="mi" onclick="todo()">🎧 客服运维 <span class="arrow">⌃</span></span></li>
<li><span class="mi" onclick="todo()">📋 补单管理 <span class="arrow">⌃</span></span></li>
<li><span class="mi" onclick="todo()">🧾 发票管理 <span class="arrow">⌃</span></span></li>
<li>
<span class="mi" onclick="toggleMenu('m-36',this)">🧮 三十六匠发票 <span class="arrow">⌃</span></span>
<ul class="submenu open" id="m-36">
<li onclick="todo()">轨迹异常运单</li>
<li onclick="todo()">司机上传</li>
<li onclick="todo()">车辆上传</li>
<li onclick="todo()">运单上传</li>
<li onclick="todo()">资金上传</li>
<li onclick="todo()">上传查询</li>
</ul>
</li>
<li><span class="mi" onclick="todo()">📄 满货达发票 <span class="arrow">⌃</span></span></li>
<li><span class="mi" onclick="todo()">🧾 滇运通开票 <span class="arrow">⌃</span></span></li>
<li>
<span class="mi" onclick="toggleMenu('m-xx',this)">🐘 小象开票 <span class="arrow">⌃</span></span>
<ul class="submenu open" id="m-xx">
<li onclick="todo()">承运人管理</li>
<li class="active" onclick="go('driver')">创建司机 <span style="color:#67c23a;font-size:11px;">NEW</span></li>
<li onclick="go('vehicle')">创建车辆 <span style="color:#67c23a;font-size:11px;">NEW</span></li>
<li onclick="go('payee')">新增收款信息 <span style="color:#67c23a;font-size:11px;">NEW</span></li>
<li onclick="todo()">创建运单</li>
<li onclick="todo()">提货</li>
<li onclick="todo()">运抵</li>
<li onclick="todo()">开票结果查询</li>
</ul>
</li>
<li><span class="mi" onclick="todo()">🛠 管理服务 <span class="arrow">⌃</span></span></li>
<li><span class="mi" onclick="todo()">✨ 增值服务 <span class="arrow">⌃</span></span></li>
<li><span class="mi" onclick="todo()">📊 财务统计 <span class="arrow">⌃</span></span></li>
</ul>
</aside>
<div class="main">
<header class="topbar">
<span class="crumb" id="crumb"></span>
<div class="right">
<span class="avatar">管</span><span style="font-size:13px;">超级管理员</span>
</div>
</header>
<nav class="tabsbar" id="tabsbar">
<span class="chip" data-page="home" onclick="go('home')">首页 <span class="x">×</span></span>
<span class="chip" data-page="driver" onclick="go('driver')">创建司机 <span class="x">×</span></span>
<span class="chip" data-page="vehicle" onclick="go('vehicle')">创建车辆 <span class="x">×</span></span>
<span class="chip" data-page="payee" onclick="go('payee')">新增收款信息 <span class="x">×</span></span>
</nav>
<div class="demo-strip">交互原型:数据为演示数据、不落库;对接 xxyb 接口(创建司机 / 创建车辆 / 新增收款信息);筛选样式参照真实页面(表头筛选行)。</div>
<main class="content">
<section class="page" id="page-home">
<div class="home-cards">
<div class="stat-card"><div class="lbl">已创建司机</div><div class="num" id="st-d">0</div></div>
<div class="stat-card"><div class="lbl">已创建车辆</div><div class="num" id="st-v">0</div></div>
<div class="stat-card"><div class="lbl">收款信息</div><div class="num" id="st-p">0</div></div>
<div class="stat-card"><div class="lbl">待审核</div><div class="num" style="color:#e6a23c;" id="st-wait">0</div></div>
</div>
<div class="card" style="margin-top:14px;">
<div class="page-title">快捷入口(小象开票)</div>
<div class="btn-bar" style="margin-bottom:0;">
<button class="btn primary" onclick="go('driver')">创建司机</button>
<button class="btn primary" onclick="go('vehicle')">创建车辆</button>
<button class="btn success" onclick="go('payee')">新增收款信息</button>
</div>
</div>
</section>
<!-- 创建司机 -->
<section class="page" id="page-driver">
<div class="card">
<div class="page-title">创建司机(小象开票)</div>
<div class="btn-bar">
<button class="btn primary" onclick="renderDrivers()">查询</button>
<button class="btn success" onclick="openDriverDlg(-1)">新增司机</button>
<button class="btn" onclick="toast('演示:批量上传(Excel 模板导入,Q1)','warning')">批量上传</button>
<button class="btn" onclick="toast('演示:司机身份证批量上传(Q1)','warning')">司机身份证批量上传</button>
<button class="btn" onclick="toast('演示:导出成功','success')">导出</button>
</div>
<div class="table-wrap">
<table class="tbl">
<thead><tr class="frow">
<th style="width:34px;"></th>
<th><select class="select" id="df-tax" onchange="renderDrivers()"><option value="">请选择税源地</option></select></th>
<th><select class="select" id="df-status" onchange="renderDrivers()"><option value="">请选择审核状态</option><option>WAITING</option><option>SUCCESS</option><option>FAILURE</option></select></th>
<th><input type="date" class="input" id="df-d1" onchange="renderDrivers()" style="width:125px;"><input type="date" class="input" id="df-d2" onchange="renderDrivers()" style="width:125px;"></th>
<th><input class="input" id="df-name" placeholder="请输入司机" oninput="renderDrivers()"></th>
<th><input class="input" id="df-idcard" placeholder="请输入身份证号" oninput="renderDrivers()"></th>
<th></th><th></th><th></th>
</tr><tr>
<th style="width:34px;"><input type="checkbox" onchange="document.querySelectorAll('.ck-d').forEach(c=>c.checked=this.checked)"></th>
<th>税源地</th><th>审核状态</th><th>审核时间</th><th>司机姓名</th><th>身份证号</th><th>身份证有效期</th><th>手机号</th><th style="width:110px;">操作</th>
</tr></thead>
<tbody id="driver-tbody"></tbody>
</table>
</div>
<div class="pagination"><span id="driver-pg"></span><button class="pg-btn">«</button><button class="pg-btn cur">1</button><button class="pg-btn">»</button><select><option>20条/页</option></select></div>
</div>
</section>
<!-- 创建车辆 -->
<section class="page" id="page-vehicle">
<div class="card">
<div class="page-title">创建车辆(小象开票)</div>
<div class="btn-bar">
<button class="btn primary" onclick="renderVehicles()">查询</button>
<button class="btn success" onclick="openVehicleDlg(-1)">新增车辆</button>
<button class="btn" onclick="toast('演示:批量上传(Q1)','warning')">批量上传</button>
<button class="btn" onclick="toast('演示:车牌号批量上传(Q1)','warning')">车牌号批量上传</button>
<button class="btn" onclick="toast('演示:导出成功','success')">导出</button>
</div>
<div class="table-wrap">
<table class="tbl">
<thead><tr class="frow">
<th style="width:34px;"></th>
<th><select class="select" id="vf-tax" onchange="renderVehicles()"><option value="">请选择税源地</option></select></th>
<th><select class="select" id="vf-status" onchange="renderVehicles()"><option value="">请选择审核状态</option><option>WAITING</option><option>SUCCESS</option><option>FAILURE</option></select></th>
<th><input type="date" class="input" id="vf-d1" onchange="renderVehicles()" style="width:125px;"><input type="date" class="input" id="vf-d2" onchange="renderVehicles()" style="width:125px;"></th>
<th><input class="input" id="vf-plate" placeholder="请输入车牌" oninput="renderVehicles()"></th>
<th><input class="input" id="vf-owner" placeholder="请输入车辆所有人" oninput="renderVehicles()"></th>
<th><select class="select" id="vf-type" onchange="renderVehicles()"><option value="">请选择车辆分类</option></select></th>
<th><select class="select" id="vf-color" onchange="renderVehicles()"><option value="">请选择车牌颜色</option></select></th>
<th><select class="select" id="vf-energy" onchange="renderVehicles()"><option value="">请选择能源类型</option></select></th>
</tr><tr>
<th style="width:34px;"><input type="checkbox" onchange="document.querySelectorAll('.ck-v').forEach(c=>c.checked=this.checked)"></th>
<th>税源地</th><th>审核状态</th><th>审核时间</th><th>车牌号</th><th>车辆所有人</th><th>车辆分类</th><th>车牌颜色</th><th>车辆能源类型</th><th style="width:110px;">操作</th>
</tr></thead>
<tbody id="vehicle-tbody"></tbody>
</table>
</div>
<div class="pagination"><span id="vehicle-pg"></span><button class="pg-btn">«</button><button class="pg-btn cur">1</button><button class="pg-btn">»</button><select><option>20条/页</option></select></div>
</div>
</section>
<!-- 新增收款信息 -->
<section class="page" id="page-payee">
<div class="card">
<div class="page-title">新增收款信息(小象开票)</div>
<div class="btn-bar">
<button class="btn primary" onclick="renderPayees()">查询</button>
<button class="btn success" onclick="openPayeeDlg(-1)">新增收款信息</button>
<button class="btn" onclick="toast('演示:导出成功','success')">导出</button>
</div>
<div class="table-wrap">
<table class="tbl">
<thead><tr class="frow">
<th style="width:34px;"></th>
<th><input class="input" id="pf-name" placeholder="请输入收款人姓名" oninput="renderPayees()"></th>
<th><input class="input" id="pf-idcard" placeholder="请输入身份证号" oninput="renderPayees()"></th>
<th><select class="select" id="pf-type" onchange="renderPayees()"><option value="">请选择收款人类型</option><option value="PERSONAL">个人</option><option value="ENTERPRISE">企业</option></select></th>
<th></th><th></th><th></th><th></th>
</tr><tr>
<th style="width:34px;"><input type="checkbox" onchange="document.querySelectorAll('.ck-p').forEach(c=>c.checked=this.checked)"></th>
<th>收款人姓名</th><th>身份证号</th><th>收款银行卡号</th><th>收款银行</th><th>收款手机号</th><th>收款人类型</th><th style="width:130px;">第三方ID / 操作</th>
</tr></thead>
<tbody id="payee-tbody"></tbody>
</table>
</div>
<div class="pagination"><span id="payee-pg"></span><button class="pg-btn">«</button><button class="pg-btn cur">1</button><button class="pg-btn">»</button><select><option>20条/页</option></select></div>
</div>
</section>
</main>
</div>
</div>
<!-- 新增/查看 司机 -->
<div class="mask" id="mask-driver">
<div class="dialog">
<div class="dlg-head"><span id="driver-dlg-title">新增司机</span><span class="close" onclick="closeDialog('mask-driver')">×</span></div>
<div class="dlg-body">
<div class="section-title">基础信息(司机实名)</div>
<div class="form-grid">
<div class="form-item"><label class="req" id="lb-d-phone">司机手机号</label><div class="ctrl"><input class="input" id="d-phone" placeholder="请输入司机手机号" maxlength="11"></div></div>
<div class="form-item"><label class="req" id="lb-d-name">司机姓名</label><div class="ctrl"><input class="input" id="d-name" placeholder="请输入司机姓名"></div></div>
<div class="form-item"><label class="req" id="lb-d-idcard">身份证号</label><div class="ctrl"><input class="input" id="d-idcard" placeholder="请输入18位身份证号" maxlength="18"></div></div>
<div class="form-item"><label id="lb-d-addr">身份证地址</label><div class="ctrl"><input class="input" id="d-addr" placeholder="请输入身份证地址"></div></div>
<div class="form-item"><label id="lb-d-front">身份证人像面</label><div class="ctrl"><span class="upload-btn" onclick="mockFile('d-front')">点击上传</span><span class="file-name" id="d-front"></span></div></div>
<div class="form-item"><label id="lb-d-back">身份证国徽面</label><div class="ctrl"><span class="upload-btn" onclick="mockFile('d-back')">点击上传</span><span class="file-name" id="d-back"></span></div></div>
</div>
<details>
<summary>司机认证信息(选填,driverAuthDomain)</summary>
<div class="form-grid" style="margin-top:8px;">
<div class="form-item"><label id="lb-d-license">驾驶证号</label><div class="ctrl"><input class="input" id="d-license"></div></div>
<div class="form-item"><label id="lb-d-dltype">准驾车型</label><div class="ctrl"><select class="select" id="d-dltype"><option value="">请选择</option></select></div></div>
<div class="form-item"><label id="lb-d-authority">驾驶证发证机关</label><div class="ctrl"><input class="input" id="d-authority"></div></div>
<div class="form-item"><label id="lb-d-lfront">驾驶证正面</label><div class="ctrl"><span class="upload-btn" onclick="mockFile('d-lfront')">点击上传</span><span class="file-name" id="d-lfront"></span></div></div>
<div class="form-item"><label id="lb-d-lback">驾驶证反面</label><div class="ctrl"><span class="upload-btn" onclick="mockFile('d-lback')">点击上传</span><span class="file-name" id="d-lback"></span></div></div>
<div class="form-item"><label id="lb-d-lrange">驾驶证有效期</label><div class="ctrl"><input class="input" id="d-lstart" placeholder="起 yyyy-MM-dd" style="margin-bottom:4px;"><input class="input" id="d-lend" placeholder="止 yyyy-MM-dd 或 长期"></div></div>
<div class="form-item"><label id="lb-d-pqc">从业资格证</label><div class="ctrl"><input class="input" id="d-pqc"></div></div>
<div class="form-item"><label id="lb-d-pqcimg">从业资格证图片</label><div class="ctrl"><span class="upload-btn" onclick="mockFile('d-pqcimg')">点击上传</span><span class="file-name" id="d-pqcimg"></span></div></div>
<div class="form-item"><label id="lb-d-prange">资格证有效期</label><div class="ctrl"><input class="input" id="d-pstart" placeholder="起 yyyy-MM-dd" style="margin-bottom:4px;"><input class="input" id="d-pend" placeholder="止 yyyy-MM-dd 或 长期"></div></div>
</div>
<div class="hint">非必填字段按 xxyb 平台实际配置填写(接口文档注意事项);证件有效期为长期时填"长期"。</div>
</details>
</div>
<div class="dlg-foot">
<button class="btn" onclick="closeDialog('mask-driver')">取 消</button>
<button class="btn primary" id="driver-ok" onclick="saveDriver()">确 定</button>
</div>
</div>
</div>
<!-- 新增/查看 车辆 -->
<div class="mask" id="mask-vehicle">
<div class="dialog">
<div class="dlg-head"><span id="vehicle-dlg-title">新增车辆</span><span class="close" onclick="closeDialog('mask-vehicle')">×</span></div>
<div class="dlg-body">
<div class="section-title">车辆基础信息</div>
<div class="form-grid">
<div class="form-item"><label class="req" id="lb-v-plate">车牌号</label><div class="ctrl"><input class="input" id="v-plate" placeholder="如 云A12345"></div></div>
<div class="form-item"><label class="req" id="lb-v-color">车牌颜色</label><div class="ctrl"><select class="select" id="v-color"><option value="">请选择</option></select></div></div>
</div>
<div class="section-title" style="margin-top:10px;">车辆认证信息</div>
<div class="form-grid">
<div class="form-item"><label class="req" id="lb-v-type">车型</label><div class="ctrl"><select class="select" id="v-type"><option value="">请选择</option></select></div></div>
<div class="form-item"><label class="req" id="lb-v-length">车长(米)</label><div class="ctrl"><input class="input" id="v-length" placeholder="如 9.6"></div></div>
<div class="form-item"><label class="req" id="lb-v-energy">能源类型</label><div class="ctrl"><select class="select" id="v-energy"><option value="">请选择</option></select></div></div>
<div class="form-item"><label id="lb-v-vin">车辆识别代码</label><div class="ctrl"><input class="input" id="v-vin"></div></div>
<div class="form-item"><label class="req" id="lb-v-lfront">行驶证正面</label><div class="ctrl"><span class="upload-btn" onclick="mockFile('v-lfront')">点击上传</span><span class="file-name" id="v-lfront"></span></div></div>
<div class="form-item"><label class="req" id="lb-v-lback">行驶证反面</label><div class="ctrl"><span class="upload-btn" onclick="mockFile('v-lback')">点击上传</span><span class="file-name" id="v-lback"></span></div></div>
<div class="form-item"><label class="req" id="lb-v-lexp">行驶证有效期</label><div class="ctrl"><input class="input" id="v-lexp" placeholder="yyyy-MM-dd 或 长期"></div></div>
<div class="form-item"><label id="lb-v-rtl">道路运输证</label><div class="ctrl"><input class="input" id="v-rtl"></div></div>
<div class="form-item"><label id="lb-v-rbl">道路运输经营许可证</label><div class="ctrl"><input class="input" id="v-rbl"></div></div>
<div class="form-item"><label id="lb-v-owner">车辆所有人</label><div class="ctrl"><input class="input" id="v-owner"></div></div>
</div>
<div class="hint">其余字段(行驶证副页/注册日期/发证机关、道路运输证年检与有效期、挂车信息、总质量/核定载质量/整备质量、外廓尺寸、使用性质、挂靠协议等)见接口文档,正式表单全量保留。</div>
</div>
<div class="dlg-foot">
<button class="btn" onclick="closeDialog('mask-vehicle')">取 消</button>
<button class="btn primary" id="vehicle-ok" onclick="saveVehicle()">确 定</button>
</div>
</div>
</div>
<!-- 新增/查看 收款信息 -->
<div class="mask" id="mask-payee">
<div class="dialog" style="width:620px;">
<div class="dlg-head"><span id="payee-dlg-title">新增收款信息</span><span class="close" onclick="closeDialog('mask-payee')">×</span></div>
<div class="dlg-body">
<div class="form-grid">
<div class="form-item"><label class="req" id="lb-p-type">收款人类型</label><div class="ctrl"><select class="select" id="p-type" onchange="payeeTypeChange()"><option value="">请选择</option><option value="PERSONAL">个人</option><option value="ENTERPRISE">企业</option></select></div></div>
<div class="form-item"><label class="req" id="lb-p-name">收款人姓名</label><div class="ctrl"><input class="input" id="p-name"></div></div>
<div class="form-item"><label class="req" id="lb-p-idcard">身份证号</label><div class="ctrl"><input class="input" id="p-idcard" maxlength="18"></div></div>
<div class="form-item"><label class="req" id="lb-p-bankcard">收款银行卡号</label><div class="ctrl"><input class="input" id="p-bankcard"></div></div>
<div class="form-item"><label id="lb-p-bankimg">银行卡图片</label><div class="ctrl"><span class="upload-btn" onclick="mockFile('p-bankimg')">点击上传</span><span class="file-name" id="p-bankimg"></span></div></div>
<div class="form-item"><label id="lb-p-bankname">收款银行</label><div class="ctrl"><input class="input" id="p-bankname" placeholder="如 中国工商银行"></div></div>
<div class="form-item"><label id="lb-p-phone">收款手机号</label><div class="ctrl"><input class="input" id="p-phone" maxlength="11"><div class="hint" id="p-phone-hint" style="display:none;">收款人类型为个人时必填</div></div></div>
</div>
</div>
<div class="dlg-foot">
<button class="btn" onclick="closeDialog('mask-payee')">取 消</button>
<button class="btn primary" id="payee-ok" onclick="savePayee()">确 定</button>
</div>
</div>
</div>
<div id="toast-wrap"></div>
<script>
/* ============ 枚举(来源:xxyb Code.html) ============ */
const TAX = ['云南运八数据科技有限公司','富源运八数据科技有限公司','曲靖市马龙区呈钢加油站有限公司'];
const STATUS = { WAITING:['待审核','orange'], SUCCESS:['审核通过','green'], FAILURE:['审核不通过','red'] };
const COLORS = [['BLUE','蓝色'],['YELLOW','黄色'],['GREEN','绿色']];
const ETYPES = [['A','汽油'],['B','柴油'],['C','电'],['D','混合油'],['E','天然气'],['F','液化石油气'],['L','甲醇'],['M','乙醇'],['N','太阳能'],['O','混合动力'],['Y','无'],['Z','其他']];
const VTYPES = ['重型半挂牵引车','重型自卸货车','重型仓栅式半挂车','重型普通货车','重型厢式货车','重型箱式货车','轻型仓栅式货车','轻型厢式货车','轻型普通货车','中型自卸货车','小型轿车','小型面包车'];
const DLTYPES = ['A1','A2','A3','B1','B2','B3','C1','C2','C3','A1A2','A2B2','B1B2','B2C1','C1C2'];
const TODAY = '2026-09-28';
let drivers = [
{ uid:'DRV20260927001', tax:0, status:'SUCCESS', auditTime:'2026-09-27 13:39:39', name:'杜锦兵', idCard:'532129198803050731', expire:'2040-12-07', phone:'13800002001' },
{ uid:'DRV20260927002', tax:0, status:'SUCCESS', auditTime:'2026-09-27 10:23:25', name:'郑国金', idCard:'513426198312224017', expire:'2046-06-11', phone:'13800002002' },
{ uid:'DRV20260926003', tax:0, status:'SUCCESS', auditTime:'2026-09-26 21:01:50', name:'龚稳全', idCard:'530325198410111111', expire:'2044-04-12', phone:'13800002003' },
{ uid:'DRV20260926004', tax:1, status:'WAITING', auditTime:'', name:'张必亮', idCard:'532323198509110716', expire:'2037-03-08', phone:'13800002004' },
{ uid:'DRV20260926005', tax:0, status:'FAILURE', auditTime:'2026-09-26 16:07:16', name:'张林', idCard:'532527198812072018', expire:'2036-09-12', phone:'13800002005' },
{ uid:'DRV20260926006', tax:0, status:'SUCCESS', auditTime:'2026-09-26 12:00:04', name:'郭锐', idCard:'21142119831102043X', expire:'2031-05-13', phone:'13800002006' }
];
let vehicles = [
{ uid:'VEH20260927001', tax:0, status:'SUCCESS', auditTime:'2026-09-27 14:38:09', plate:'云A06361D', owner:'安宁驰诺商贸有限公司', vtype:'重型半挂牵引车', color:'GREEN', energy:'C' },
{ uid:'VEH20260927002', tax:0, status:'SUCCESS', auditTime:'2026-09-26 23:51:58', plate:'川D76975', owner:'攀枝花市虹樾贸易有限公司', vtype:'重型半挂牵引车', color:'YELLOW', energy:'E' },
{ uid:'VEH20260926003', tax:0, status:'SUCCESS', auditTime:'2026-09-26 21:13:58', plate:'云D07951D', owner:'南雄建信物流有限公司', vtype:'重型半挂牵引车', color:'GREEN', energy:'C' },
{ uid:'VEH20260926004', tax:0, status:'WAITING', auditTime:'', plate:'云G07125D', owner:'弥勒市浩源物流有限公司', vtype:'重型半挂牵引车', color:'GREEN', energy:'C' },
{ uid:'VEH20260926005', tax:1, status:'SUCCESS', auditTime:'2026-09-26 13:49:41', plate:'云AD6641', owner:'李桂花', vtype:'重型半挂牵引车', color:'YELLOW', energy:'E' },
{ uid:'VEH20260926006', tax:0, status:'FAILURE', auditTime:'2026-09-26 08:24:02', plate:'云AJ9383', owner:'普发美', vtype:'重型自卸货车', color:'YELLOW', energy:'B' }
];
let payees = [
{ uid:'PAY20260928001', name:'杜锦兵', idCard:'532129198803050731', bankCard:'6222021001123456789', bankName:'中国工商银行', phone:'13800002001', type:'PERSONAL', createdAt:'2026-09-28 09:12:00' },
{ uid:'PAY20260928002', name:'郑国金', idCard:'513426198312224017', bankCard:'6228480402564890018', bankName:'中国农业银行', phone:'13800002002', type:'PERSONAL', createdAt:'2026-09-28 09:15:40' },
{ uid:'PAY20260928003', name:'云南顺达物流有限公司', idCard:'91530100MA6N5X2P7A', bankCard:'110901234567890012', bankName:'浦发银行', phone:'', type:'ENTERPRISE', createdAt:'2026-09-28 09:20:11' },
{ uid:'PAY20260928004', name:'龚稳全', idCard:'530325198410111111', bankCard:'6217000010012345678', bankName:'中国建设银行', phone:'13800002003', type:'PERSONAL', createdAt:'2026-09-28 10:02:33' },
{ uid:'PAY20260928005', name:'郭锐', idCard:'21142119831102043X', bankCard:'6216610101234567890', bankName:'中国银行', phone:'13800002006', type:'PERSONAL', createdAt:'2026-09-28 10:31:07' }
];
let driverIdx = -1, vehicleIdx = -1, payeeIdx = -1;
let seqD = 7, seqV = 7, seqP = 6;
/* ============ 工具 ============ */
function esc(x){ return String(x==null?'':x).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
function taxOf(i){ return TAX[i] || '-'; }
function statusTag(k){ const st = STATUS[k]||['未知','gray']; return '<span class="tag '+st[1]+'">'+st[0]+'</span>'; }
function mockFile(id){ document.getElementById(id).textContent = 'IMG_' + Math.floor(Math.random()*9000+1000) + '.jpg'; }
function toast(msg, type){
const t = document.createElement('div');
t.className = 'toast ' + (type||'success');
t.textContent = msg;
document.getElementById('toast-wrap').appendChild(t);
setTimeout(()=>t.remove(), 2600);
}
function closeDialog(id){ document.getElementById(id).classList.remove('open'); }
function toggleMenu(id){ document.getElementById(id).classList.toggle('open'); }
function todo(){ toast('原型未实现该菜单','warning'); }
function val(id){ const el = document.getElementById(id); return el ? el.value.trim() : ''; }
function fileType(id){ const el = document.getElementById(id); return el ? el.textContent.trim() : ''; }
const CRUMBS = {
home: ['首页'],
driver: ['首页','小象开票','创建司机'],
vehicle: ['首页','小象开票','创建车辆'],
payee: ['首页','小象开票','新增收款信息']
};
function go(page){
document.querySelectorAll('.page').forEach(x=>x.classList.remove('active'));
document.getElementById('page-'+page).classList.add('active');
document.querySelectorAll('.chip').forEach(c=>c.classList.toggle('active', c.dataset.page===page));
document.getElementById('crumb').innerHTML = CRUMBS[page].map((x,i)=>
i===CRUMBS[page].length-1 ? '<b>'+x+'</b>' : x).join('<span class="sep">/</span>');
if (page==='driver') renderDrivers();
if (page==='vehicle') renderVehicles();
if (page==='payee') renderPayees();
if (page==='home') renderStats();
window.scrollTo(0,0);
}
function renderStats(){
document.getElementById('st-d').textContent = drivers.length;
document.getElementById('st-v').textContent = vehicles.length;
document.getElementById('st-p').textContent = payees.length;
document.getElementById('st-wait').textContent =
drivers.filter(d=>d.status==='WAITING').length + vehicles.filter(v=>v.status==='WAITING').length;
}
/* ============ 创建司机 ============ */
function renderDrivers(){
const tax = val('df-tax'), st = val('df-status');
const d1 = val('df-d1'), d2 = val('df-d2');
const name = val('df-name'), idcard = val('df-idcard');
const rows = drivers.map((d,i)=>({d,i})).filter(({d})=>
(!tax || String(d.tax)===tax) && (!st || d.status===st) &&
(!name || d.name.includes(name)) && (!idcard || d.idCard.includes(idcard)) &&
(!d1 || (d.auditTime && d.auditTime.slice(0,10) >= d1)) &&
(!d2 || (d.auditTime && d.auditTime.slice(0,10) <= d2)));
const tb = document.getElementById('driver-tbody');
tb.innerHTML = rows.length ? rows.map(({d,i})=>`<tr>
<td><input type="checkbox" class="ck-d"></td>
<td>${esc(taxOf(d.tax))}</td>
<td>${statusTag(d.status)}</td>
<td>${esc(d.auditTime||'-')}</td>
<td>${esc(d.name)}</td>
<td>${esc(d.idCard)}</td>
<td>${esc(d.expire||'-')}</td>
<td>${esc(d.phone)}</td>
<td><span class="link" onclick="openDriverDlg(${i})">查看</span>${d.status==='FAILURE'?'<span class="link" onclick="toast(\'演示:已重新上传并提交(Q3)\',\'success\')">重新上传</span>':''}</td>
</tr>`).join('') : '<tr><td colspan="9" class="empty">未找到符合条件的司机</td></tr>';
document.getElementById('driver-pg').textContent = '共 '+rows.length+' 条记录';
}
function openDriverDlg(i){
driverIdx = i;
document.getElementById('driver-dlg-title').textContent = i<0 ? '新增司机' : '司机详情(只读)';
const d = i<0 ? null : drivers[i];
['d-phone','d-name','d-idcard','d-addr'].forEach(k=>{ const el=document.getElementById(k); el.value = d?(d[k.slice(2)]||''):''; el.readOnly = !!d; });
['d-front','d-back','d-lfront','d-lback','d-pqcimg'].forEach(k=>{ document.getElementById(k).textContent=''; });
['d-license','d-authority','d-lstart','d-lend','d-pqc','d-pstart','d-pend'].forEach(k=>{ const el=document.getElementById(k); el.value=''; el.readOnly = !!d; });
document.getElementById('d-dltype').value = '';
document.getElementById('driver-ok').style.display = i<0 ? '' : 'none';
document.getElementById('mask-driver').classList.add('open');
}
function saveDriver(){
const phone = val('d-phone'), name = val('d-name'), idcard = val('d-idcard');
if (!/^1\d{10}$/.test(phone)){ toast('请输入正确的11位司机手机号','error'); return; }
if (!name){ toast('请输入司机姓名','error'); return; }
if (!/^\d{17}[\dXx]$/.test(idcard)){ toast('请输入正确的18位身份证号','error'); return; }
const uid = 'DRV' + TODAY.replace(/-/g,'') + String(seqD++).padStart(3,'0');
drivers.unshift({ uid, tax:0, status:'WAITING', auditTime:'', name, idCard:idcard, expire: val('d-lend') || '-', phone });
closeDialog('mask-driver');
renderDrivers();
toast('创建成功:司机ID ' + uid + '(已提交 xxyb,待审核)','success');
}
/* ============ 创建车辆 ============ */
function renderVehicles(){
const tax = val('vf-tax'), st = val('vf-status');
const d1 = val('vf-d1'), d2 = val('vf-d2');
const plate = val('vf-plate'), owner = val('vf-owner');
const vt = val('vf-type'), color = val('vf-color'), energy = val('vf-energy');
const rows = vehicles.map((v,i)=>({v,i})).filter(({v})=>
(!tax || String(v.tax)===tax) && (!st || v.status===st) &&
(!plate || v.plate.includes(plate)) && (!owner || v.owner.includes(owner)) &&
(!vt || v.vtype===vt) && (!color || v.color===color) && (!energy || v.energy===energy) &&
(!d1 || (v.auditTime && v.auditTime.slice(0,10) >= d1)) &&
(!d2 || (v.auditTime && v.auditTime.slice(0,10) <= d2)));
const tb = document.getElementById('vehicle-tbody');
tb.innerHTML = rows.length ? rows.map(({v,i})=>`<tr>
<td><input type="checkbox" class="ck-v"></td>
<td>${esc(taxOf(v.tax))}</td>
<td>${statusTag(v.status)}</td>
<td>${esc(v.auditTime||'-')}</td>
<td>${esc(v.plate)}</td>
<td>${esc(v.owner||'-')}</td>
<td>${esc(v.vtype)}</td>
<td>${esc(colorName(v.color))}</td>
<td>${esc(energyName(v.energy))}</td>
<td><span class="link" onclick="openVehicleDlg(${i})">查看</span>${v.status==='FAILURE'?'<span class="link" onclick="toast(\'演示:已重新上传并提交(Q3)\',\'success\')">重新上传</span>':''}</td>
</tr>`).join('') : '<tr><td colspan="10" class="empty">未找到符合条件的车辆</td></tr>';
document.getElementById('vehicle-pg').textContent = '共 '+rows.length+' 条记录';
}
function colorName(k){ const c = COLORS.find(x=>x[0]===k); return c ? c[1] : (k||'-'); }
function energyName(k){ const c = ETYPES.find(x=>x[0]===k); return c ? c[1] : (k||'-'); }
function openVehicleDlg(i){
vehicleIdx = i;
document.getElementById('vehicle-dlg-title').textContent = i<0 ? '新增车辆' : '车辆详情(只读)';
const v = i<0 ? null : vehicles[i];
['v-plate','v-length','v-vin','v-lexp','v-rtl','v-rbl','v-owner'].forEach(k=>{ const el=document.getElementById(k); el.value = v?(v[k.slice(2)]||''):''; el.readOnly = !!v; });
['v-lfront','v-lback'].forEach(k=>{ document.getElementById(k).textContent=''; });
document.getElementById('v-color').value = v ? v.color : '';
document.getElementById('v-type').value = v ? v.vtype : '';
document.getElementById('v-energy').value = v ? v.energy : '';
document.getElementById('vehicle-ok').style.display = i<0 ? '' : 'none';
document.getElementById('mask-vehicle').classList.add('open');
}
function saveVehicle(){
const plate = val('v-plate'), color = val('v-color'), vtype = val('v-type');
const length = val('v-length'), energy = val('v-energy'), lexp = val('v-lexp');
if (!/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[挂学警港澳]?$/.test(plate)){
toast('请输入正确的车牌号','error'); return;
}
if (!color){ toast('请选择车牌颜色','error'); return; }
if (!vtype){ toast('请选择车型','error'); return; }
if (!/^\d+(\.\d+)?$/.test(length)){ toast('请输入正确的车长(米)','error'); return; }
if (!energy){ toast('请选择能源类型','error'); return; }
if (!lexp){ toast('请填写行驶证有效期(yyyy-MM-dd 或 长期)','error'); return; }
if (!fileType('v-lfront')){ toast('请上传行驶证正面图片','error'); return; }
if (!fileType('v-lback')){ toast('请上传行驶证反面图片','error'); return; }
const uid = 'VEH' + TODAY.replace(/-/g,'') + String(seqV++).padStart(3,'0');
vehicles.unshift({ uid, tax:0, status:'WAITING', auditTime:'', plate, owner: val('v-owner'),
vtype, color, energy });
closeDialog('mask-vehicle');
renderVehicles();
toast('创建成功:车辆ID ' + uid + '(已提交 xxyb,待审核)','success');
}
/* ============ 新增收款信息 ============ */
function renderPayees(){
const name = val('pf-name'), idcard = val('pf-idcard'), type = val('pf-type');
const rows = payees.map((x,i)=>({x,i})).filter(({x})=>
(!name || x.name.includes(name)) && (!idcard || x.idCard.includes(idcard)) && (!type || x.type===type));
const tb = document.getElementById('payee-tbody');
tb.innerHTML = rows.length ? rows.map(({x,i})=>`<tr>
<td><input type="checkbox" class="ck-p"></td>
<td>${esc(x.name)}</td>
<td>${esc(x.idCard)}</td>
<td>${esc(x.bankCard)}</td>
<td>${esc(x.bankName||'-')}</td>
<td>${esc(x.phone||'-')}</td>
<td><span class="tag ${x.type==='PERSONAL'?'blue':'green'}">${x.type==='PERSONAL'?'个人':'企业'}</span></td>
<td><span class="tip">${esc(x.uid)}</span> <span class="link" onclick="openPayeeDlg(${i})">查看</span></td>
</tr>`).join('') : '<tr><td colspan="8" class="empty">未找到符合条件的收款信息</td></tr>';
document.getElementById('payee-pg').textContent = '共 '+rows.length+' 条记录';
}
function openPayeeDlg(i){
payeeIdx = i;
document.getElementById('payee-dlg-title').textContent = i<0 ? '新增收款信息' : '收款信息详情(只读)';
const x = i<0 ? null : payees[i];
['p-name','p-idcard','p-bankcard','p-bankname','p-phone'].forEach(k=>{ const el=document.getElementById(k); el.value = x?(x[k.slice(2)]||''):''; el.readOnly = !!x; });
document.getElementById('p-bankimg').textContent = '';
document.getElementById('p-type').value = x ? x.type : '';
document.getElementById('payee-ok').style.display = i<0 ? '' : 'none';
payeeTypeChange();
document.getElementById('mask-payee').classList.add('open');
}
function payeeTypeChange(){
const personal = document.getElementById('p-type').value === 'PERSONAL';
document.getElementById('lb-p-phone').className = personal ? 'req' : '';
document.getElementById('p-phone-hint').style.display = personal ? '' : 'none';
}
function savePayee(){
const type = val('p-type'), name = val('p-name'), idcard = val('p-idcard');
const bankCard = val('p-bankcard'), phone = val('p-phone');
if (!type){ toast('请选择收款人类型','error'); return; }
if (!name){ toast('请输入收款人姓名','error'); return; }
const idOk = type==='PERSONAL' ? /^\d{17}[\dXx]$/.test(idcard) : /^[\dA-HJ-NPQRTUWXY]{18}$/.test(idcard);
if (!idOk){ toast(type==='PERSONAL' ? '请输入正确的18位身份证号' : '请输入正确的18位统一社会信用代码','error'); return; }
if (!/^\d{15,19}$/.test(bankCard)){ toast('请输入正确的银行卡号(15-19位数字)','error'); return; }
if (type==='PERSONAL' && !/^1\d{10}$/.test(phone)){ toast('收款人类型为个人时,收款手机号必填(11位)','error'); return; }
const uid = 'PAY' + TODAY.replace(/-/g,'') + String(seqP++).padStart(3,'0');
payees.unshift({ uid, name, idCard:idcard, bankCard, bankName: val('p-bankname'), phone,
type, createdAt: TODAY + ' ' + new Date().toTimeString().slice(0,8) });
closeDialog('mask-payee');
renderPayees();
toast('创建成功:收款人ID ' + uid + '(已提交 xxyb)','success');
}
/* ============ 初始化 ============ */
(function init(){
document.querySelectorAll('#df-tax,#vf-tax').forEach(sel=>{
sel.innerHTML = '<option value="">请选择税源地</option>' + TAX.map((t,i)=>'<option value="'+i+'">'+esc(t)+'</option>').join('');
});
document.getElementById('vf-type').innerHTML = '<option value="">请选择车辆分类</option>' + VTYPES.map(v=>'<option>'+esc(v)+'</option>').join('');
document.getElementById('vf-color').innerHTML = '<option value="">请选择车牌颜色</option>' + COLORS.map(c=>'<option value="'+c[0]+'">'+c[1]+'</option>').join('');
document.getElementById('vf-energy').innerHTML = '<option value="">请选择能源类型</option>' + ETYPES.map(c=>'<option value="'+c[0]+'">'+c[1]+'</option>').join('');
document.getElementById('v-type').innerHTML = '<option value="">请选择</option>' + VTYPES.map(v=>'<option>'+esc(v)+'</option>').join('');
document.getElementById('v-color').innerHTML = '<option value="">请选择</option>' + COLORS.map(c=>'<option value="'+c[0]+'">'+c[1]+'</option>').join('');
document.getElementById('v-energy').innerHTML = '<option value="">请选择</option>' + ETYPES.map(c=>'<option value="'+c[0]+'">'+c[1]+'</option>').join('');
document.getElementById('d-dltype').innerHTML = '<option value="">请选择</option>' + DLTYPES.map(v=>'<option>'+v+'</option>').join('');
go('home');
})();
</script>
</body>
</html>