编辑页面

HTML内容
<!-- 电子合同H5签署入口 - 点击链接直接进入签署流程 -->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>合同签署 - 电子合同平台</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        :root {
            --primary: #48C0B0;
            --primary-light: #E6F5F3;
            --text: #1a1a1a;
            --text2: #666;
            --text3: #999;
            --bg: #f5f7fa;
            --white: #fff;
            --border: #e5e5e5;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            background: var(--bg);
            color: var(--text);
            font-size: 14px;
            line-height: 1.5;
            min-height: 100vh;
        }
        .app { max-width: 430px; margin: 0 auto; min-height: 100vh; background: var(--white); }

        .detail-page {
            position: fixed;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 430px;
            height: 100vh;
            background: var(--white);
            z-index: 200;
            display: none;
            flex-direction: column;
        }
        .detail-page.active { display: flex; }

        .detail-header {
            background: var(--white);
            padding: 14px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--bg);
        }
        .detail-header h2 { font-size: 16px; font-weight: 600; }
        .detail-header .back {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .detail-header .back svg { width: 20px; height: 20px; color: var(--text); }

        .detail-body { flex: 1; overflow-y: auto; }

        /* 合同信息卡片 */
        .info-card {
            background: var(--white);
            border-radius: 12px;
            padding: 16px;
            margin: 16px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
        }
        .info-card h4 {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 12px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--bg);
        }
        .info-card .row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 13px; }
        .info-card .row .lb { color: var(--text3); }
        .info-card .row .val { color: var(--text); }

        /* 签署流程步骤 */
        .sign-steps { padding: 0 16px 16px; }
        .sign-steps .step-item {
            display: flex;
            align-items: flex-start;
            padding: 14px 0;
            border-bottom: 1px solid var(--bg);
        }
        .sign-steps .step-item:last-child { border-bottom: none; }
        .sign-steps .step-num {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--primary);
            color: var(--white);
            font-size: 13px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-right: 12px;
        }
        .sign-steps .step-num.pending { background: var(--bg); color: var(--text3); }
        .sign-steps .step-num.current { background: var(--primary); color: var(--white); }
        .sign-steps .step-num.done { background: #52C41A; color: var(--white); }
        .sign-steps .step-info { flex: 1; }
        .sign-steps .step-title { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
        .sign-steps .step-desc { font-size: 12px; color: var(--text3); }
        .sign-steps .step-btn {
            padding: 6px 14px;
            border-radius: 16px;
            font-size: 12px;
            border: none;
            cursor: pointer;
        }
        .sign-steps .step-btn.go { background: var(--primary); color: var(--white); }
        .sign-steps .step-btn.done { background: var(--primary-light); color: var(--primary); }

        /* 身份认证样式 */
        .verify-guide {
            text-align: center;
            padding: 24px 16px;
        }
        .verify-icon-box {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--primary-light);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 14px;
        }
        .verify-icon-box svg { width: 28px; height: 28px; color: var(--primary); }
        .verify-guide h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
        .verify-guide p { font-size: 12px; color: var(--text3); }

        .verify-type-section { padding: 0 16px 16px; }
        .verify-type-title { font-size: 13px; font-weight: 600; color: var(--text3); margin-bottom: 10px; }
        .verify-type-card {
            display: flex;
            align-items: center;
            padding: 14px;
            background: var(--bg);
            border-radius: 10px;
            margin-bottom: 10px;
            cursor: pointer;
        }
        .verify-type-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
        }
        .verify-type-icon svg { width: 20px; height: 20px; }
        .verify-type-info { flex: 1; }
        .verify-type-name { font-size: 14px; font-weight: 600; }
        .verify-type-desc { font-size: 11px; color: var(--text3); }

        /* 上传区域 */
        .upload-guide { padding: 0 16px; margin-bottom: 12px; }
        .upload-guide p { font-size: 13px; color: var(--text2); }
        .upload-area-group { padding: 0 16px; }
        .upload-area { margin-bottom: 14px; }
        .upload-area-label { font-size: 12px; color: var(--text3); margin-bottom: 8px; }
        .upload-area-box {
            border: 2px dashed var(--border);
            border-radius: 10px;
            padding: 30px;
            text-align: center;
            cursor: pointer;
        }
        .upload-area-box svg { width: 36px; height: 36px; color: var(--text3); margin-bottom: 8px; }
        .upload-area-box span { font-size: 13px; color: var(--text3); display: block; }
        .upload-note {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 16px;
            font-size: 12px;
            color: var(--text3);
        }
        .upload-note svg { width: 16px; height: 16px; color: var(--text3); flex-shrink: 0; }

        /* 签署流程页 */
        .sign-flow { padding: 16px; }
        .sign-notice {
            background: var(--primary-light);
            border-radius: 10px;
            padding: 14px;
            margin-bottom: 16px;
        }
        .sign-notice h4 { font-size: 13px; font-weight: 600; color: var(--primary); margin-bottom: 6px; }
        .sign-notice p { font-size: 12px; color: var(--text2); line-height: 1.6; }

        .sign-party { margin-bottom: 16px; }
        .sign-party h4 {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 12px;
        }
        .sign-party h4 svg { width: 16px; height: 16px; color: var(--primary); }
        .sign-party-item {
            display: flex;
            align-items: center;
            padding: 12px;
            background: var(--bg);
            border-radius: 10px;
            margin-bottom: 8px;
        }
        .sign-party-item .avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
        }
        .sign-party-item .avatar svg { width: 18px; height: 18px; color: var(--white); }
        .sign-party-item .info { flex: 1; }
        .sign-party-item .name { font-size: 13px; font-weight: 600; }
        .sign-party-item .role { font-size: 11px; color: var(--text3); }
        .sign-party-item .status { font-size: 11px; padding: 3px 8px; border-radius: 4px; }
        .sign-party-item .status.done { background: var(--primary-light); color: var(--primary); }
        .sign-party-item .status.pending { background: #FFF2E8; color: #FF7A44; }

        .sign-method { margin-bottom: 16px; }
        .sign-method h4 { font-size: 13px; font-weight: 600; margin-bottom: 12px; }
        .method-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .method-item {
            padding: 14px;
            border-radius: 10px;
            border: 2px solid var(--bg);
            text-align: center;
            cursor: pointer;
        }
        .method-item.active { border-color: var(--primary); background: var(--primary-light); }
        .method-item svg { width: 24px; height: 24px; color: var(--text3); margin-bottom: 6px; }
        .method-item.active svg { color: var(--primary); }
        .method-item .label { display: block; font-size: 13px; font-weight: 600; }
        .method-item .sub { display: block; font-size: 11px; color: var(--text3); margin-top: 2px; }

        .verify-box { margin-bottom: 16px; }
        .verify-box h4 { font-size: 13px; font-weight: 600; margin-bottom: 12px; }
        .verify-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
        .verify-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); }
        .verify-item label { font-size: 13px; color: var(--text2); }

        .btn-sign {
            display: block;
            width: calc(100% - 32px);
            margin: 0 16px 16px;
            padding: 14px;
            border-radius: 10px;
            background: var(--primary);
            color: var(--white);
            font-size: 15px;
            font-weight: 600;
            text-align: center;
            border: none;
            cursor: pointer;
        }
        .btn-sign:disabled { background: var(--bg); color: var(--text3); }

        /* 签署成功页 */
        .sign-success { text-align: center; padding: 24px 16px; }
        .sign-success .icon-box {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: #E8FFF0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
        }
        .sign-success .icon-box svg { width: 36px; height: 36px; color: #52C41A; }
        .sign-success h3 { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
        .sign-success .desc { font-size: 13px; color: var(--text3); margin-bottom: 20px; }
        .sign-success .info-card { text-align: left; margin: 0 0 20px; }

        .btn-back {
            display: block;
            width: calc(100% - 32px);
            margin: 0 16px;
            padding: 14px;
            border-radius: 10px;
            background: var(--primary);
            color: var(--white);
            font-size: 15px;
            font-weight: 600;
            text-align: center;
            border: none;
            cursor: pointer;
        }

        /* 合同正文 */
        .contract-content { padding: 16px; }
        .doc-header { text-align: center; margin-bottom: 20px; }
        .doc-title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
        .doc-num { font-size: 12px; color: var(--text3); }
        .chapter { margin-bottom: 16px; }
        .chapter-title { font-size: 14px; font-weight: 600; margin-bottom: 10px; color: var(--primary); }
        .article { margin-bottom: 12px; }
        .article-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
        .article-content { font-size: 13px; color: var(--text2); line-height: 1.7; }
        .sign-area { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
        .sign-row { display: flex; font-size: 13px; padding: 8px 0; }
        .sign-label { color: var(--text3); width: 80px; }
        .sign-value { color: var(--text); }
        .sign-block { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
        .sign-block-item { text-align: center; }
        .sign-placeholder {
            height: 60px;
            border: 1px dashed var(--border);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: var(--text3);
            cursor: pointer;
        }
        .sign-placeholder.signed { border: none; background: var(--primary-light); color: var(--primary); }
        .sign-placeholder.signed svg { width: 18px; height: 18px; margin-right: 4px; }
        .sign-block-item .sign-label { width: 100%; }

        /* 签名弹窗 */
        .sign-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            display: none;
            align-items: flex-end;
            justify-content: center;
            z-index: 300;
        }
        .sign-modal.active { display: flex; }
        .modal-content {
            width: 100%;
            max-width: 430px;
            background: var(--white);
            border-radius: 16px 16px 0 0;
            overflow: hidden;
        }
        .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px;
            border-bottom: 1px solid var(--bg);
        }
        .modal-header h3 { font-size: 15px; font-weight: 600; }
        .modal-header .close { cursor: pointer; }
        .modal-header .close svg { width: 20px; height: 20px; color: var(--text3); }
        .modal-body { padding: 16px; }
        .sign-canvas-wrap { margin-bottom: 16px; }
        .canvas-tip { font-size: 12px; color: var(--text3); margin-bottom: 10px; }
        .sign-canvas-wrap canvas {
            width: 100%;
            height: 180px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: #FAFAFA;
            display: block;
        }
        .sign-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .btn-clear {
            padding: 12px;
            border-radius: 8px;
            background: var(--bg);
            color: var(--text);
            font-size: 14px;
            border: none;
            cursor: pointer;
        }
        .btn-confirm {
            padding: 12px;
            border-radius: 8px;
            background: var(--primary);
            color: var(--white);
            font-size: 14px;
            border: none;
            cursor: pointer;
        }

        /* Toast提示 */
        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.75);
            color: var(--white);
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 14px;
            z-index: 9999;
            animation: fadeIn 0.3s;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
            to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        }
    </style>
</head>
<body>
    <div class="app">
        <!-- H5签署入口页 - 直接进入签署流程 -->
        <div class="detail-page active" id="pg-h5-sign">
            <div class="detail-header">
                <div class="back" onclick="toast('签署进行中')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"></path></svg>
                </div>
                <h2>合同签署</h2>
                <div style="width:30px;"></div>
            </div>
            <div class="detail-body">
                <!-- 合同基本信息 -->
                <div class="info-card" style="margin-top: 16px;">
                    <h4>合同信息</h4>
                    <div class="row"><span class="lb">合同名称</span><span class="val">软件采购合同</span></div>
                    <div class="row"><span class="lb">合同编号</span><span class="val">HT2026050001</span></div>
                    <div class="row"><span class="lb">发起方</span><span class="val">云签科技有限公司</span></div>
                    <div class="row"><span class="lb">合同金额</span><span class="val" style="color:#FF4A4A;">¥500,000.00</span></div>
                </div>
                
                <!-- 签署流程步骤 -->
                <div class="sign-steps">
                    <div class="step-item">
                        <div class="step-num current" id="step1-num">1</div>
                        <div class="step-info">
                            <div class="step-title">身份认证</div>
                            <div class="step-desc">上传身份证或营业执照完成实名认证</div>
                        </div>
                        <button class="step-btn go" id="step1-btn" onclick="openPage('pg-identity-verify')">去认证</button>
                    </div>
                    <div class="step-item">
                        <div class="step-num pending" id="step2-num">2</div>
                        <div class="step-info">
                            <div class="step-title">查看合同</div>
                            <div class="step-desc">阅读并确认合同内容</div>
                        </div>
                        <button class="step-btn go" id="step2-btn" onclick="openPage('pg-contract-view')">查看合同</button>
                    </div>
                    <div class="step-item">
                        <div class="step-num pending" id="step3-num">3</div>
                        <div class="step-info">
                            <div class="step-title">在线签署</div>
                            <div class="step-desc">手写签名或使用电子印章完成签署</div>
                        </div>
                        <button class="step-btn go" id="step3-btn" onclick="openSignProcess()">立即签署</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 身份认证页 -->
        <div class="detail-page" id="pg-identity-verify">
            <div class="detail-header">
                <div class="back" onclick="closePage('pg-identity-verify')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"></path></svg>
                </div>
                <h2>身份认证</h2>
            </div>
            <div class="detail-body">
                <div class="verify-guide">
                    <div class="verify-icon-box">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                            <path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                        </svg>
                    </div>
                    <h3>实名认证</h3>
                    <p>根据《电子签名法》相关规定，签署合同前需完成身份认证</p>
                </div>
                
                <div class="verify-type-section">
                    <div class="verify-type-title">选择认证方式</div>
                    <div class="verify-type-card" onclick="openPage('pg-upload-idcard')">
                        <div class="verify-type-icon" style="background:linear-gradient(135deg, #E6F4FF, #BAE0FF);">
                            <svg viewBox="0 0 24 24" fill="none" stroke="#1677FF" stroke-width="1.5"><rect x="3" y="4" width="18" height="14" rx="2"></rect><circle cx="9" cy="10" r="2"></circle><path d="M15 8h2M15 12h2M7 16h10"></path></svg>
                        </div>
                        <div class="verify-type-info">
                            <div class="verify-type-name">上传身份证</div>
                            <div class="verify-type-desc">个人用户认证</div>
                        </div>
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:18px;height:18px;color:#ccc;"><path d="M9 18l6-6-6-6"></path></svg>
                    </div>
                    <div class="verify-type-card" onclick="openPage('pg-upload-license')">
                        <div class="verify-type-icon" style="background:linear-gradient(135deg, #F6FFED, #D9F7BE);">
                            <svg viewBox="0 0 24 24" fill="none" stroke="#52C41A" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"></rect><path d="M9 9h6M9 13h6M9 17h4"></path></svg>
                        </div>
                        <div class="verify-type-info">
                            <div class="verify-type-name">上传营业执照</div>
                            <div class="verify-type-desc">企业用户认证</div>
                        </div>
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:18px;height:18px;color:#ccc;"><path d="M9 18l6-6-6-6"></path></svg>
                    </div>
                </div>
                
                <div style="padding: 0 16px;">
                    <div style="display:flex; align-items:center; gap:8px; padding:10px 0; font-size:12px; color:var(--text3);">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px;"><path d="M9 12l2 2 4-4"></path></svg>
                        <span>证件信息银行级加密传输</span>
                    </div>
                    <div style="display:flex; align-items:center; gap:8px; padding:10px 0; font-size:12px; color:var(--text3);">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px;"><path d="M9 12l2 2 4-4"></path></svg>
                        <span>仅用于身份验证，不做他用</span>
                    </div>
                    <div style="display:flex; align-items:center; gap:8px; padding:10px 0; font-size:12px; color:var(--text3);">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px;"><path d="M9 12l2 2 4-4"></path></svg>
                        <span>认证成功后可签署任意合同</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 上传身份证页 -->
        <div class="detail-page" id="pg-upload-idcard">
            <div class="detail-header">
                <div class="back" onclick="closePage('pg-upload-idcard')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"></path></svg>
                </div>
                <h2>上传身份证</h2>
            </div>
            <div class="detail-body">
                <div class="upload-guide">
                    <p>请上传身份证正反面照片，要求清晰可辨</p>
                </div>
                
                <div class="upload-area-group">
                    <div class="upload-area">
                        <div class="upload-area-label">人像面</div>
                        <div class="upload-area-box" onclick="toast('请上传身份证人像面')">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><path d="M21 15l-5-5L5 21"></path></svg>
                            <span>点击上传</span>
                        </div>
                    </div>
                    <div class="upload-area">
                        <div class="upload-area-label">国徽面</div>
                        <div class="upload-area-box" onclick="toast('请上传身份证国徽面')">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><path d="M21 15l-5-5L5 21"></path></svg>
                            <span>点击上传</span>
                        </div>
                    </div>
                </div>
                
                <div class="upload-note">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    <span>提交后将进行人脸核验，请确保为本人操作</span>
                </div>
                
                <button class="btn-sign" onclick="submitIdCardVerify()">提交认证</button>
            </div>
        </div>

        <!-- 上传营业执照页 -->
        <div class="detail-page" id="pg-upload-license">
            <div class="detail-header">
                <div class="back" onclick="closePage('pg-upload-license')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"></path></svg>
                </div>
                <h2>上传营业执照</h2>
            </div>
            <div class="detail-body">
                <div class="upload-guide">
                    <p>请上传企业营业执照和法人身份证照片</p>
                </div>
                
                <div class="upload-area-group">
                    <div class="upload-area">
                        <div class="upload-area-label">营业执照</div>
                        <div class="upload-area-box" onclick="toast('请上传营业执照')">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><path d="M21 15l-5-5L5 21"></path></svg>
                            <span>点击上传</span>
                        </div>
                    </div>
                    <div class="upload-area">
                        <div class="upload-area-label">法人身份证</div>
                        <div class="upload-area-box" onclick="toast('请上传法人身份证')">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><path d="M21 15l-5-5L5 21"></path></svg>
                            <span>点击上传</span>
                        </div>
                    </div>
                </div>
                
                <div class="upload-note">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    <span>提交后将进行企业信息核验</span>
                </div>
                
                <button class="btn-sign" onclick="submitLicenseVerify()">提交认证</button>
            </div>
        </div>

        <!-- 合同正文页 -->
        <div class="detail-page" id="pg-contract-view">
            <div class="detail-header">
                <div class="back" onclick="closePage('pg-contract-view')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"></path></svg>
                </div>
                <h2>合同正文</h2>
                <div style="width:30px;"></div>
            </div>
            <div class="detail-body">
                <div class="contract-content">
                    <div class="doc-header">
                        <div class="doc-title">软件采购合同</div>
                        <div class="doc-num">合同编号：HT2026050001</div>
                    </div>
                    <div class="chapter">
                        <div class="chapter-title">第一章 总则</div>
                        <div class="article">
                            <div class="article-title">第一条 合同目的</div>
                            <div class="article-content">为保护合同当事人的合法权益，维护社会经济秩序，促进社会主义现代化建设，特制定本协议。</div>
                        </div>
                        <div class="article">
                            <div class="article-title">第二条 合同依据</div>
                            <div class="article-content">根据《中华人民共和国民法典》及相关法律法规的规定，甲乙双方经友好协商，达成如下协议。</div>
                        </div>
                    </div>
                    <div class="chapter">
                        <div class="chapter-title">第二章 商品信息</div>
                        <div class="article">
                            <div class="article-title">第三条 商品清单</div>
                            <div class="article-content">甲方向乙方采购以下软件产品及服务，具体明细见附件《软件采购清单》。</div>
                        </div>
                        <div class="article">
                            <div class="article-title">第四条 合同总价</div>
                            <div class="article-content">本合同总价为人民币大写：伍拾万元整（¥500,000.00元），此价格为含税价。</div>
                        </div>
                    </div>
                    <div class="chapter">
                        <div class="chapter-title">第三章 交付与验收</div>
                        <div class="article">
                            <div class="article-title">第五条 交付时间</div>
                            <div class="article-content">乙方应于合同签订后30个工作日内完成软件产品的交付，并提供相关技术文档。</div>
                        </div>
                        <div class="article">
                            <div class="article-title">第六条 验收标准</div>
                            <div class="article-content">软件产品交付后，甲乙双方应按照合同约定的功能清单进行验收，验收合格后签署验收报告。</div>
                        </div>
                    </div>
                    <div class="sign-area">
                        <div class="sign-row"><span class="sign-label">甲方（盖章）：</span><span class="sign-value">云签科技有限公司</span></div>
                        <div class="sign-row"><span class="sign-label">法定代表人：</span><span class="sign-value">张明</span></div>
                        <div class="sign-row"><span class="sign-label">签署日期：</span><span class="sign-value">2026年5月18日</span></div>
                        <div class="sign-block">
                            <div class="sign-block-item">
                                <div class="sign-placeholder signed">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4"></path></svg>
                                    <span>已签署</span>
                                </div>
                                <div class="sign-label">甲方签章</div>
                            </div>
                            <div class="sign-block-item">
                                <div class="sign-placeholder" id="sign-area-B" onclick="openSignProcess()">点击签署</div>
                                <div class="sign-label">乙方签章</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 签署流程页 -->
        <div class="detail-page" id="pg-sign-process">
            <div class="detail-header">
                <div class="back" onclick="backFromSignProcess()">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"></path></svg>
                </div>
                <h2>在线签署</h2>
                <div style="width:30px;"></div>
            </div>
            <div class="detail-body">
                <div class="sign-flow">
                    <div class="sign-notice">
                        <h4>温馨提示</h4>
                        <p>签署前请仔细阅读合同内容，确认无误后再进行签署。签署完成后合同将自动存证上链，具有法律效力。</p>
                    </div>

                    <div class="sign-party">
                        <h4>
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"></path><circle cx="9" cy="7" r="4"></circle></svg>
                            合同签署方
                        </h4>
                        <div class="sign-party-item">
                            <div class="avatar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></div>
                            <div class="info"><div class="name">云签科技有限公司</div><div class="role">甲方 · 已签署</div></div>
                            <span class="status done">已完成</span>
                        </div>
                        <div class="sign-party-item">
                            <div class="avatar" style="background: var(--text3);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></div>
                            <div class="info"><div class="name">华为技术有限公司</div><div class="role">乙方 · 待签署</div></div>
                            <span class="status pending">待签署</span>
                        </div>
                    </div>

                    <div class="sign-method">
                        <h4>选择签署方式</h4>
                        <div class="method-list">
                            <div class="method-item active" id="method-handwrite" onclick="selectSignMethod('handwrite')">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
                                <span class="label">手写签名</span>
                                <span class="sub">在屏幕上手写</span>
                            </div>
                            <div class="method-item" id="method-seal" onclick="selectSignMethod('seal')">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"></circle><path d="M12 8v8M8 12h8"></path></svg>
                                <span class="label">电子印章</span>
                                <span class="sub">使用已认证印章</span>
                            </div>
                        </div>
                    </div>

                    <div class="verify-box">
                        <h4>意愿认证</h4>
                        <div class="verify-item">
                            <input type="checkbox" id="verify-consent" onchange="updateSignBtn()">
                            <label for="verify-consent">本人知情并同意签署本合同</label>
                        </div>
                        <div class="verify-item">
                            <input type="checkbox" id="verify-identity" onchange="updateSignBtn()">
                            <label for="verify-identity">已完成身份验证</label>
                        </div>
                    </div>

                    <button class="btn-sign" id="btn-start-sign" onclick="openSignModal()" disabled="">开始签署</button>
                </div>
            </div>
        </div>

        <!-- 签署成功页 -->
        <div class="detail-page" id="pg-sign-success">
            <div class="detail-header">
                <div class="back" onclick="closeSuccessAndGoHome()">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"></path></svg>
                </div>
                <h2>签署完成</h2>
                <div style="width:30px;"></div>
            </div>
            <div class="detail-body">
                <div class="sign-success">
                    <div class="icon-box">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    </div>
                    <h3>签署成功</h3>
                    <p class="desc">合同已签署完成并自动存证上链</p>
                    <div class="info-card">
                        <h4>签署信息</h4>
                        <div class="row"><span class="lb">合同名称</span><span class="val">软件采购合同</span></div>
                        <div class="row"><span class="lb">签署时间</span><span class="val" id="success-time">2026-05-25 10:40:04</span></div>
                        <div class="row"><span class="lb">存证哈希</span><span class="val" style="font-size:11px; word-break:break-all;">0x7f3e8a9b2c1d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1d2e3f4a5b6c7d8e9f0a</span></div>
                    </div>
                    <button class="btn-back" onclick="closeSuccessAndGoHome()">返回</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 手写签名弹窗 -->
    <div class="sign-modal" id="signModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>请手写签名</h3>
                <div class="close" onclick="closeSignModal()">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 18L18 6M6 6l12 12"></path></svg>
                </div>
            </div>
            <div class="modal-body">
                <div class="sign-canvas-wrap">
                    <div class="canvas-tip">请在下方区域内手写您的签名</div>
                    <canvas id="signCanvas"></canvas>
                </div>
                <div class="sign-actions">
                    <button class="btn-clear" onclick="clearCanvas()">清除</button>
                    <button class="btn-confirm" onclick="confirmSign()">确认签名</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        var selectedMethod = 'handwrite';
        var canvas, ctx;
        var isDrawing = false;
        var isVerified = false;

        function openPage(id) {
            document.getElementById(id).classList.add('active');
        }

        function closePage(id) {
            document.getElementById(id).classList.remove('active');
        }

        function toast(msg) {
            var t = document.createElement('div');
            t.className = 'toast';
            t.textContent = msg;
            document.body.appendChild(t);
            setTimeout(() => t.remove(), 1500);
        }

        // 打开签署流程
        function openSignProcess() {
            if (!isVerified) {
                toast('请先完成身份认证');
                openPage('pg-identity-verify');
                return;
            }
            document.getElementById('verify-consent').checked = false;
            document.getElementById('verify-identity').checked = false;
            document.getElementById('btn-start-sign').disabled = true;
            selectSignMethod('handwrite');
            openPage('pg-sign-process');
        }

        // 选择签署方式
        function selectSignMethod(method) {
            selectedMethod = method;
            document.getElementById('method-handwrite').classList.toggle('active', method === 'handwrite');
            document.getElementById('method-seal').classList.toggle('active', method === 'seal');
        }

        // 更新签署按钮状态
        function updateSignBtn() {
            var consent = document.getElementById('verify-consent').checked;
            var identity = document.getElementById('verify-identity').checked;
            document.getElementById('btn-start-sign').disabled = !(consent && identity);
        }

        // 更新步骤状态
        function updateStepStatus(stepNum, status, btnText) {
            var numEl = document.getElementById('step' + stepNum + '-num');
            var btnEl = document.getElementById('step' + stepNum + '-btn');
            if (numEl) numEl.className = 'step-num ' + status;
            if (btnEl && btnText) {
                btnEl.className = 'step-btn ' + (status === 'done' ? 'done' : 'go');
                btnEl.textContent = btnText;
            }
        }

        // 提交身份证认证
        function submitIdCardVerify() {
            toast('提交成功，正在进行人脸核验...');
            setTimeout(function() {
                toast('身份认证成功');
                isVerified = true;
                updateStepStatus(1, 'done', '已完成');
                updateStepStatus(2, 'current', '查看合同');
                closePage('pg-upload-idcard');
                closePage('pg-identity-verify');
            }, 1500);
        }

        // 提交营业执照认证
        function submitLicenseVerify() {
            toast('提交成功，正在进行企业信息核验...');
            setTimeout(function() {
                toast('企业认证成功');
                isVerified = true;
                updateStepStatus(1, 'done', '已完成');
                updateStepStatus(2, 'current', '查看合同');
                closePage('pg-upload-license');
                closePage('pg-identity-verify');
            }, 1500);
        }

        // 从签署流程返回
        function backFromSignProcess() {
            closePage('pg-sign-process');
            openPage('pg-h5-sign');
        }

        // 打开手写签名弹窗
        function openSignModal() {
            document.getElementById('signModal').classList.add('active');
            initCanvas();
        }

        // 关闭手写签名弹窗
        function closeSignModal() {
            document.getElementById('signModal').classList.remove('active');
            clearCanvas();
        }

        // 初始化画布
        function initCanvas() {
            canvas = document.getElementById('signCanvas');
            ctx = canvas.getContext('2d');
            
            var wrap = canvas.parentElement;
            var width = wrap.offsetWidth - 4;
            canvas.width = width;
            canvas.height = 180;
            
            ctx.strokeStyle = '#1a1a1a';
            ctx.lineWidth = 2;
            ctx.lineCap = 'round';
            ctx.lineJoin = 'round';
            
            canvas.addEventListener('mousedown', startDraw);
            canvas.addEventListener('mousemove', draw);
            canvas.addEventListener('mouseup', endDraw);
            canvas.addEventListener('mouseleave', endDraw);
            
            canvas.addEventListener('touchstart', function(e) {
                e.preventDefault();
                var touch = e.touches[0];
                var rect = canvas.getBoundingClientRect();
                isDrawing = true;
                ctx.beginPath();
                ctx.moveTo(touch.clientX - rect.left, touch.clientY - rect.top);
            });
            canvas.addEventListener('touchmove', function(e) {
                e.preventDefault();
                var touch = e.touches[0];
                var rect = canvas.getBoundingClientRect();
                if (isDrawing) {
                    ctx.lineTo(touch.clientX - rect.left, touch.clientY - rect.top);
                    ctx.stroke();
                }
            });
            canvas.addEventListener('touchend', endDraw);
        }

        function startDraw(e) {
            isDrawing = true;
            var rect = canvas.getBoundingClientRect();
            ctx.beginPath();
            ctx.moveTo(e.clientX - rect.left, e.clientY - rect.top);
        }

        function draw(e) {
            if (isDrawing) {
                var rect = canvas.getBoundingClientRect();
                ctx.lineTo(e.clientX - rect.left, e.clientY - rect.top);
                ctx.stroke();
            }
        }

        function endDraw() {
            isDrawing = false;
        }

        function clearCanvas() {
            if (ctx && canvas) {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
            }
        }

        // 确认签名
        function confirmSign() {
            closeSignModal();
            completeSign();
        }

        // 完成签署
        function completeSign() {
            document.getElementById('success-time').textContent = new Date().toLocaleString('zh-CN');
            
            updateStepStatus(3, 'done', '已完成');
            
            var signAreaB = document.getElementById('sign-area-B');
            if (signAreaB) {
                signAreaB.className = 'sign-placeholder signed';
                signAreaB.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4"></path></svg><span>已签署</span>';
                signAreaB.onclick = null;
            }
            
            closePage('pg-sign-process');
            openPage('pg-sign-success');
        }

        // 签署成功后返回
        function closeSuccessAndGoHome() {
            closePage('pg-sign-success');
            toast('签署已完成，合同已生效');
        }
    </script>
</body>
</html>