SMANAGE/backup/Manage/User/idcard.html

<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>银河锋锐工作室账户后台系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <link rel="stylesheet" href="/css/win10ui.css">
    <link rel="stylesheet" href="/css/theme.css">
    <link rel="stylesheet" href="/css/idcard.css">
    <link rel="stylesheet" href="/lib/layui/css/layui.css">
    <script type="text/javascript" src="/js/i18n.js"></script>
    <script type="text/javascript" src="https://www.gvsds.com/assets/js/i18n.lib.js"></script>
    <script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <script type="text/javascript" src="/js/tables.js"></script>
    <script>window.breadcrumbs = [{ name: i18n("Home"), url: "" }, { name: i18n("Manage"), url: "" }, { name: "实名身份证" }];</script>
    <script src="/js/address.bar.js"></script>
    <!--[if lt IE 9]>
            <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
            <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>
    <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="Sex">未提供</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; // Start with front side (国徽面) visible
            $('#toggleBtn').on('click', function () {
                rotation += 180;
                $('#idCard').css('transform', 'rotateY(' + rotation + 'deg)');
                if (rotation % 360 === 0) {
                    $(this).text('查看背面');
                } else {
                    $(this).text('查看正面');
                }
            });
            $.get("/api/gerp/user/idcard/", {}, function (res) {
                if (res.code === 0) {
                    console.log('用户数据:', res.data);
                    $("#Name").text(res.data.Name || '未提供');
                    if (res.data.Sex === "1") {
                        $("#Sex").text("男");
                    } else if (res.data.Sex === "2") {
                        $("#Sex").text("女");
                    } else {
                        $("#Sex").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>
</body>

</html>