编辑页面

HTML内容
<!DOCTYPE html>
<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; }
        html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif; background: #f0f0f0; }
        .wrapper { display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px 0; }
        .app-container { width: 375px; min-height: 667px; background: #fff; border-radius: 40px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.15); position: relative; }
        
        /* 顶部导航栏 */
        .top-nav { height: 44px; background: #fff; display: flex; position: relative; border-bottom: 1px solid #eee; }
        .top-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; color: #999; font-size: 12px; }
        .top-nav-item.active { color: #43C6AC; }
        .top-nav-item .icon { font-size: 18px; margin-bottom: 2px; }
        .top-nav-item .text { font-size: 11px; }
        
        /* 内容区域 */
        .content { height: calc(100vh - 134px); overflow-y: auto; background: #f5f5f5; }
        .page { display: none; min-height: 100%; }
        .page.active { display: block; }
        
        /* 页面标题 */
        .page-title { font-size: 16px; font-weight: 600; color: #333; padding: 15px 15px 10px; }
        
        /* 登录页 */
        .login-screen { height: 100vh; background: linear-gradient(135deg, #43C6AC 0%, #191654 100%); display: flex; flex-direction: column; justify-content: center; padding: 30px; }
        .login-logo { text-align: center; margin-bottom: 50px; }
        .login-logo .icon { width: 80px; height: 80px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40px; margin: 0 auto 15px; }
        .login-logo h1 { font-size: 24px; color: #fff; margin-bottom: 8px; }
        .login-logo p { font-size: 14px; color: rgba(255,255,255,0.8); }
        .login-form { background: #fff; border-radius: 16px; padding: 25px; }
        .form-item { margin-bottom: 20px; }
        .form-item label { display: block; font-size: 13px; color: #666; margin-bottom: 8px; }
        .form-item input { width: 100%; padding: 14px; border: 1px solid #ddd; border-radius: 10px; font-size: 15px; }
        .form-item input:focus { outline: none; border-color: #43C6AC; }
        .login-btn { width: 100%; background: linear-gradient(135deg, #43C6AC 0%, #191654 100%); color: #fff; border: none; padding: 14px; border-radius: 25px; font-size: 16px; cursor: pointer; }
        
        /* 用户卡片 */
        .user-card { background: linear-gradient(135deg, #43C6AC 0%, #191654 100%); margin: 15px; border-radius: 16px; padding: 20px; display: flex; align-items: center; color: #fff; }
        .user-avatar { width: 50px; height: 50px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-right: 12px; }
        .user-name { font-size: 18px; font-weight: 600; }
        .user-role { font-size: 12px; opacity: 0.8; margin-top: 2px; }
        
        /* 订单卡片 */
        .order-list { padding: 0 15px 15px; }
        .order-card { background: #fff; border-radius: 12px; padding: 15px; margin-bottom: 12px; }
        .order-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed #eee; }
        .order-id { font-size: 13px; color: #666; }
        .order-status { padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 500; }
        .status-pending { background: #fff7e6; color: #fa8c16; }
        .status-progress { background: #e6f7ff; color: #43C6AC; }
        .status-completed { background: #f6ffed; color: #52c41a; }
        .order-row { display: flex; margin-bottom: 6px; }
        .order-row .label { width: 70px; font-size: 13px; color: #999; }
        .order-row .value { font-size: 13px; color: #333; flex: 1; }
        .order-remark { background: #f9f9f9; padding: 8px 10px; border-radius: 6px; margin-top: 8px; font-size: 12px; color: #666; }
        .btn-group { display: flex; gap: 10px; margin-top: 12px; }
        .btn-primary { flex: 2; background: linear-gradient(135deg, #43C6AC 0%, #191654 100%); color: #fff; border: none; padding: 10px; border-radius: 20px; font-size: 14px; cursor: pointer; }
        .btn-secondary { flex: 1; background: #fff; color: #999; border: 1px solid #ddd; padding: 10px; border-radius: 20px; font-size: 14px; cursor: pointer; }
        .btn-success { width: 100%; background: linear-gradient(135deg, #43C6AC 0%, #191654 100%); color: #fff; border: none; padding: 12px; border-radius: 25px; font-size: 14px; cursor: pointer; }
        
        /* 菜单卡片 */
        .menu-card { margin: 0 15px 15px; background: #fff; border-radius: 12px; overflow: hidden; }
        .menu-item { display: flex; align-items: center; padding: 15px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
        .menu-item:last-child { border-bottom: none; }
        .menu-icon { width: 36px; height: 36px; background: linear-gradient(135deg, #43C6AC 0%, #191654 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; margin-right: 12px; }
        .menu-icon.green { background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%); }
        .menu-icon.red { background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%); }
        .menu-text { flex: 1; }
        .menu-text .title { font-size: 15px; color: #333; }
        .menu-text .desc { font-size: 12px; color: #999; margin-top: 2px; }
        .menu-arrow { color: #ccc; font-size: 14px; }
        
        /* 个人中心头部 */
        .profile-header { background: linear-gradient(135deg, #43C6AC 0%, #191654 100%); padding: 30px; text-align: center; color: #fff; }
        .profile-avatar { width: 70px; height: 70px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; margin: 0 auto 10px; }
        .profile-name { font-size: 18px; }
        .profile-phone { font-size: 13px; opacity: 0.8; margin-top: 4px; }
        
        /* 详情页 */
        .detail-page { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #fff; z-index: 100; display: none; }
        .detail-page.active { display: block; }
        .detail-header { height: 44px; display: flex; align-items: center; padding: 0 15px; background: #fff; border-bottom: 1px solid #eee; }
        .back-btn { font-size: 24px; color: #333; padding-right: 15px; cursor: pointer; }
        .detail-title { flex: 1; text-align: center; font-size: 16px; font-weight: 600; color: #333; }
        .detail-content { height: calc(100% - 44px); overflow-y: auto; padding: 15px; background: #f5f5f5; }
        .info-card { background: #fff; border-radius: 12px; padding: 15px; margin-bottom: 15px; }
        .info-title { font-size: 14px; color: #43C6AC; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px dashed #eee; }
        .info-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
        .info-row:last-child { border-bottom: none; }
        .info-label { font-size: 14px; color: #999; }
        .info-value { font-size: 14px; color: #333; }
        
        /* 底部导航 */
        .bottom-nav { height: 50px; background: #fff; display: flex; position: absolute; bottom: 0; left: 0; right: 0; border-top: 1px solid #eee; }
        .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; color: #999; font-size: 10px; }
        .nav-item.active { color: #43C6AC; }
        .nav-icon { font-size: 20px; margin-bottom: 2px; }
        
        /* Toast */
        .toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.75); color: #fff; padding: 12px 24px; border-radius: 8px; font-size: 14px; z-index: 1000; opacity: 0; transition: opacity 0.3s; }
        .toast.show { opacity: 1; }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="app-container">
            <!-- 登录页 -->
            <div class="login-screen" id="loginScreen">
                <div class="login-logo">
                    <div class="icon">👨‍⚕️</div>
                    <h1>陪诊师端</h1>
                    <p>专业陪诊服务</p>
                </div>
                <div class="login-form">
                    <div class="form-item"><label>手机号</label><input type="tel" placeholder="请输入手机号"></div>
                    <div class="form-item"><label>密码</label><input type="password" placeholder="请输入密码"></div>
                    <button class="login-btn" onclick="doLogin()">登 录</button>
                </div>
            </div>
            
            <!-- 主内容区 -->
            <div id="mainContent" style="display:none">
                <div class="content" id="content">
                    <!-- 首页：待接订单 -->
                    <div class="page active" id="page-home">
                        <div class="user-card">
                            <div class="user-avatar">👨‍⚕️</div>
                            <div>
                                <div class="user-name">张三</div>
                                <div class="user-role">陪诊师</div>
                            </div>
                        </div>
                        <div class="page-title">待接订单</div>
                        <div class="order-list">
                            <div class="order-card">
                                <div class="order-top">
                                    <span class="order-id">PC20260512001</span>
                                    <span class="order-status status-pending">待接单</span>
                                </div>
                                <div class="order-row"><span class="label">患者姓名</span><span class="value">李阿姨</span></div>
                                <div class="order-row"><span class="label">就诊医院</span><span class="value">北京协和医院</span></div>
                                <div class="order-row"><span class="label">就诊科室</span><span class="value">骨科门诊</span></div>
                                <div class="order-row"><span class="label">预约时间</span><span class="value">2026-05-13 09:00</span></div>
                                <div class="order-row"><span class="label">联系电话</span><span class="value">138****1234</span></div>
                                <div class="order-remark">备注：需轮椅辅助</div>
                                <div class="btn-group">
                                    <button class="btn-primary" onclick="acceptOrder(this)">接 单</button>
                                    <button class="btn-secondary" onclick="rejectOrder(this)">拒 绝</button>
                                </div>
                            </div>
                            <div class="order-card">
                                <div class="order-top">
                                    <span class="order-id">PC20260512002</span>
                                    <span class="order-status status-pending">待接单</span>
                                </div>
                                <div class="order-row"><span class="label">患者姓名</span><span class="value">王先生</span></div>
                                <div class="order-row"><span class="label">就诊医院</span><span class="value">北京大学第一医院</span></div>
                                <div class="order-row"><span class="label">就诊科室</span><span class="value">心内科</span></div>
                                <div class="order-row"><span class="label">预约时间</span><span class="value">2026-05-13 14:30</span></div>
                                <div class="order-row"><span class="label">联系电话</span><span class="value">139****5678</span></div>
                                <div class="order-remark">备注：行动不便，需要搀扶</div>
                                <div class="btn-group">
                                    <button class="btn-primary" onclick="acceptOrder(this)">接 单</button>
                                    <button class="btn-secondary" onclick="rejectOrder(this)">拒 绝</button>
                                </div>
                            </div>
                            <div class="order-card">
                                <div class="order-top">
                                    <span class="order-id">PC20260512003</span>
                                    <span class="order-status status-pending">待接单</span>
                                </div>
                                <div class="order-row"><span class="label">患者姓名</span><span class="value">张奶奶</span></div>
                                <div class="order-row"><span class="label">就诊医院</span><span class="value">中国人民解放军总医院</span></div>
                                <div class="order-row"><span class="label">就诊科室</span><span class="value">神经内科</span></div>
                                <div class="order-row"><span class="label">预约时间</span><span class="value">2026-05-14 10:00</span></div>
                                <div class="order-row"><span class="label">联系电话</span><span class="value">136****9012</span></div>
                                <div class="order-remark">备注：听不懂普通话，请讲粤语</div>
                                <div class="btn-group">
                                    <button class="btn-primary" onclick="acceptOrder(this)">接 单</button>
                                    <button class="btn-secondary" onclick="rejectOrder(this)">拒 绝</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 订单：进行中订单 -->
                    <div class="page" id="page-orders">
                        <div class="page-title">进行中订单</div>
                        <div class="order-list">
                            <div class="order-card">
                                <div class="order-top">
                                    <span class="order-id">PC20260511008</span>
                                    <span class="order-status status-progress">服务中</span>
                                </div>
                                <div class="order-row"><span class="label">患者姓名</span><span class="value">陈大爷</span></div>
                                <div class="order-row"><span class="label">就诊医院</span><span class="value">中日友好医院</span></div>
                                <div class="order-row"><span class="label">就诊科室</span><span class="value">消化内科</span></div>
                                <div class="order-row"><span class="label">预约时间</span><span class="value">2026-05-12 15:00</span></div>
                                <div class="order-row"><span class="label">联系电话</span><span class="value">139****8832</span></div>
                                <div class="order-remark">备注：糖尿病患者，注意饮食</div>
                                <div class="btn-group">
                                    <button class="btn-success" onclick="completeOrder(this)">完成服务</button>
                                </div>
                            </div>
                            <div class="order-card">
                                <div class="order-top">
                                    <span class="order-id">PC20260511007</span>
                                    <span class="order-status status-progress">服务中</span>
                                </div>
                                <div class="order-row"><span class="label">患者姓名</span><span class="value">刘叔叔</span></div>
                                <div class="order-row"><span class="label">就诊医院</span><span class="value">北京天坛医院</span></div>
                                <div class="order-row"><span class="label">就诊科室</span><span class="value">泌尿外科</span></div>
                                <div class="order-row"><span class="label">预约时间</span><span class="value">2026-05-12 16:30</span></div>
                                <div class="order-row"><span class="label">联系电话</span><span class="value">138****2231</span></div>
                                <div class="order-remark">备注：需代取药品</div>
                                <div class="btn-group">
                                    <button class="btn-success" onclick="completeOrder(this)">完成服务</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 我的：个人中心 -->
                    <div class="page" id="page-my">
                        <div class="profile-header">
                            <div class="profile-avatar">👨‍⚕️</div>
                            <div class="profile-name">张三</div>
                            <div class="profile-phone">138****0000 · 已认证</div>
                        </div>
                        
                        <div class="menu-card">
                            <div class="menu-item" onclick="showDetail('history')">
                                <div class="menu-icon">📋</div>
                                <div class="menu-text"><div class="title">历史订单</div><div class="desc">查看已完成的历史订单</div></div>
                                <span class="menu-arrow">›</span>
                            </div>
                        </div>
                        
                        <div class="menu-card">
                            <div class="menu-item" onclick="showDetail('profile')">
                                <div class="menu-icon">👤</div>
                                <div class="menu-text"><div class="title">个人信息</div><div class="desc">查看个人资料</div></div>
                                <span class="menu-arrow">›</span>
                            </div>
                            <div class="menu-item" onclick="showDetail('password')">
                                <div class="menu-icon green">🔑</div>
                                <div class="menu-text"><div class="title">修改密码</div><div class="desc">修改登录密码</div></div>
                                <span class="menu-arrow">›</span>
                            </div>
                            <div class="menu-item" onclick="showDetail('logout')">
                                <div class="menu-icon red">🚪</div>
                                <div class="menu-text"><div class="title">退出登录</div><div class="desc">退出当前账号</div></div>
                                <span class="menu-arrow">›</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="bottom-nav">
                    <div class="nav-item active" onclick="switchTab('home', this)">
                        <div class="nav-icon">🏠</div>
                        <div>首页</div>
                    </div>
                    <div class="nav-item" onclick="switchTab('orders', this)">
                        <div class="nav-icon">📋</div>
                        <div>订单</div>
                    </div>
                    <div class="nav-item" onclick="switchTab('my', this)">
                        <div class="nav-icon">👤</div>
                        <div>我的</div>
                    </div>
                </div>
            </div>
            
            <!-- 详情页 -->
            <div class="detail-page" id="detailPage">
                <div class="detail-header">
                    <div class="back-btn" onclick="closeDetail()">‹</div>
                    <div class="detail-title" id="detailTitle">详情</div>
                </div>
                <div class="detail-content" id="detailContent"></div>
            </div>
        </div>
    </div>
    
    <div class="toast" id="toast"></div>
    
    <script>
        const detailData = {
            history: {
                title: '历史订单',
                content: '<div class="info-card"><div class="info-title">已完成订单 · 3</div><div class="order-card" style="margin-bottom:10px"><div class="order-top"><span class="order-id">PC20260511005</span><span class="order-status status-completed">已完成</span></div><div class="order-row"><span class="label">患者姓名</span><span class="value">赵阿姨</span></div><div class="order-row"><span class="label">就诊医院</span><span class="value">北京积水潭医院</span></div><div class="order-row"><span class="label">完成时间</span><span class="value">2026-05-11 12:30</span></div></div><div class="order-card" style="margin-bottom:10px"><div class="order-top"><span class="order-id">PC20260511004</span><span class="order-status status-completed">已完成</span></div><div class="order-row"><span class="label">患者姓名</span><span class="value">孙奶奶</span></div><div class="order-row"><span class="label">就诊医院</span><span class="value">首都医科大学宣武医院</span></div><div class="order-row"><span class="label">完成时间</span><span class="value">2026-05-11 11:00</span></div></div><div class="order-card"><div class="order-top"><span class="order-id">PC20260510003</span><span class="order-status status-completed">已完成</span></div><div class="order-row"><span class="label">患者姓名</span><span class="value">周先生</span></div><div class="order-row"><span class="label">就诊医院</span><span class="value">北京医院</span></div><div class="order-row"><span class="label">完成时间</span><span class="value">2026-05-10 17:00</span></div></div></div>'
            },
            profile: {
                title: '个人信息',
                content: '<div class="info-card"><div class="info-title">个人信息</div><div class="info-row"><span class="info-label">姓名</span><span class="info-value">张三</span></div><div class="info-row"><span class="info-label">手机号</span><span class="info-value">138****0000</span></div><div class="info-row"><span class="info-label">认证状态</span><span class="info-value" style="color:#52c41a">已认证 ✓</span></div><div class="info-row"><span class="info-label">累计服务</span><span class="info-value">186单</span></div><div class="info-row"><span class="info-label">注册时间</span><span class="info-value">2026-01-15</span></div></div>'
            },
            password: {
                title: '修改密码',
                content: '<div class="info-card"><div class="info-title">修改登录密码</div><div class="form-item" style="margin-bottom:15px"><label>当前密码</label><input type="password" placeholder="请输入当前密码" style="width:100%;padding:12px;border:1px solid #ddd;border-radius:8px;font-size:14px"></div><div class="form-item" style="margin-bottom:15px"><label>新密码</label><input type="password" placeholder="请输入新密码（6-20位）" style="width:100%;padding:12px;border:1px solid #ddd;border-radius:8px;font-size:14px"></div><div class="form-item" style="margin-bottom:15px"><label>确认密码</label><input type="password" placeholder="请再次输入新密码" style="width:100%;padding:12px;border:1px solid #ddd;border-radius:8px;font-size:14px"></div><button class="btn-success" onclick="showToast(\'密码修改成功\')">确认修改</button></div>'
            },
            logout: {
                title: '退出登录',
                content: '<div class="info-card" style="text-align:center;padding:40px"><div style="font-size:48px;margin-bottom:15px">👋</div><h3 style="font-size:18px;margin-bottom:10px">确定退出登录？</h3><p style="font-size:14px;color:#999;margin-bottom:20px">退出后将返回登录页面</p><button onclick="doLogout()" style="width:100%;padding:14px;border:1px solid #ff4d4f;background:#fff;color:#ff4d4f;border-radius:25px;font-size:15px;cursor:pointer">确认退出</button></div>'
            }
        };
        
        function switchTab(tab, el) {
            document.querySelectorAll('.nav-item').forEach(item => item.classList.remove('active'));
            el.classList.add('active');
            document.querySelectorAll('.page').forEach(page => page.classList.remove('active'));
            document.getElementById('page-' + tab).classList.add('active');
            document.getElementById('content').scrollTop = 0;
        }
        
        function doLogin() {
            showToast('登录成功');
            setTimeout(() => { document.getElementById('loginScreen').style.display = 'none'; document.getElementById('mainContent').style.display = 'block'; }, 800);
        }
        
        function acceptOrder(btn) { btn.textContent = '已接单'; btn.style.background = '#ccc'; btn.disabled = true; btn.parentElement.querySelector('.btn-secondary').style.display = 'none'; showToast('接单成功'); }
        function rejectOrder(btn) { const card = btn.closest('.order-card'); card.style.opacity = '0.5'; card.style.pointerEvents = 'none'; showToast('已拒绝订单'); }
        function completeOrder(btn) { const card = btn.closest('.order-card'); const statusEl = card.querySelector('.order-status'); statusEl.textContent = '已完成'; statusEl.className = 'order-status status-completed'; btn.textContent = '已完成'; btn.style.background = '#ccc'; btn.disabled = true; showToast('服务已完成'); }
        function showDetail(key) { const data = detailData[key]; document.getElementById('detailTitle').textContent = data.title; document.getElementById('detailContent').innerHTML = data.content; document.getElementById('detailPage').classList.add('active'); }
        function closeDetail() { document.getElementById('detailPage').classList.remove('active'); }
        function doLogout() { closeDetail(); document.getElementById('mainContent').style.display = 'none'; document.getElementById('loginScreen').style.display = 'flex'; }
        function showToast(msg) { const toast = document.getElementById('toast'); toast.textContent = msg; toast.classList.add('show'); setTimeout(() => toast.classList.remove('show'), 1500); }
    </script>
</body>
</html>