99 lines
4.4 KiB
HTML
99 lines
4.4 KiB
HTML
<resource-share type="style" href="/assets/css/idcard.css"></resource-share>
|
|
<div class="id-card-container">
|
|
<div class="id-card" id="idCard">
|
|
<div class="id-card-front">
|
|
<div class="back-header">
|
|
<img src="/img/3.png" alt="国徽" class="emblem">
|
|
<div class="title">
|
|
<div class="main-title">中华人民共和国</div>
|
|
<div class="sub-title">居民身份证</div>
|
|
</div>
|
|
</div>
|
|
<div class="back-footer">
|
|
<table class="footer-table">
|
|
<tr>
|
|
<th>签发机关</th>
|
|
<td>银河锋锐 PAH 系统</td>
|
|
</tr>
|
|
<tr>
|
|
<th>签证机关</th>
|
|
<td>银河锋锐 GWSM 系统</td>
|
|
</tr>
|
|
<tr>
|
|
<th>有效期限</th>
|
|
<td>2025.07.06-3000.01.01</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="id-card-back">
|
|
<div class="info-section">
|
|
<div class="info-item">
|
|
<span class="info-label info-50">姓名</span><span id="Name">未提供</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label info-50">性别</span><span id="Gender">未提供</span>
|
|
<span class="info-space"></span>
|
|
<span class="info-label info-50">民族</span><span id="Ethnic">未提供</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label info-50">出生</span><span id="Year">----</span><span
|
|
class="info-label">年</span><span id="Month">--</span><span class="info-label">月</span><span
|
|
id="Day">--</span><span class="info-label">日</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label info-50">住址</span><span id="CorrespondenceAddress">未提供</span>
|
|
</div>
|
|
<div class="card-number">
|
|
<span class="info-label">公民身份号码</span><span id="IdentificationNumber">------------------</span>
|
|
</div>
|
|
</div>
|
|
<div class="photo-section">
|
|
<div class="photo-placeholder"><img width="100%" height="100%" id="Photo" alt="未提供"></img></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="layui-btn toggle-btn" id="toggleBtn">查看背面</button>
|
|
<script>
|
|
layui.use(['jquery'], function () {
|
|
var $ = layui.jquery;
|
|
var rotation = 0;
|
|
$('#toggleBtn').on('click', function () {
|
|
rotation += 180;
|
|
$('#idCard').css('transform', 'rotateY(' + rotation + 'deg)');
|
|
if (rotation % 360 === 0) {
|
|
$(this).text('查看背面');
|
|
} else {
|
|
$(this).text('查看正面');
|
|
}
|
|
});
|
|
$.get("/API/User/UserTIdCard", {}, function (res) {
|
|
if (res.code === 0) {
|
|
console.log('用户数据:', res.data);
|
|
$("#Name").text(res.data.Name || '未提供');
|
|
if (res.data.Gender === 1) {
|
|
$("#Gender").text("男");
|
|
} else if (res.data.Gender === 2) {
|
|
$("#Gender").text("女");
|
|
} else {
|
|
$("#Gender").text("未提供");
|
|
}
|
|
$("#Ethnic").text(res.data.Ethnic || '未提供');
|
|
$("#Year").text(res.data.Year || '--');
|
|
$("#Month").text(res.data.Month || '--');
|
|
$("#Day").text(res.data.Day || '--');
|
|
$("#CorrespondenceAddress").text(res.data.CorrespondenceAddress || '未提供');
|
|
$("#IdentificationNumber").text(res.data.IdentificationNumber || '未提供');
|
|
if (res.data.HeadImage) {
|
|
$("#Photo").attr("src", res.data.HeadImage);
|
|
} else {
|
|
$("#Photo").removeAttr("src");
|
|
$("#Photo").text("暂无头像");
|
|
}
|
|
} else {
|
|
layer.msg(res.msg || '获取用户失败');
|
|
}
|
|
});
|
|
});
|
|
</script> |