编辑页面

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;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: #f5f5f5;
            min-height: 100vh;
            max-width: 430px;
            margin: 0 auto;
        }
        .header {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            color: #fff;
            padding: 40px 20px 20px;
            text-align: center;
        }
        .header h1 {
            font-size: 20px;
            font-weight: 600;
            letter-spacing: 2px;
        }
        .header .status-bar {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            margin-bottom: 15px;
            opacity: 0.8;
        }
        .page {
            display: none;
            padding-bottom: 80px;
            min-height: calc(100vh - 180px);
        }
        .page.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .card {
            background: #fff;
            border-radius: 12px;
            margin: 15px;
            padding: 18px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .card:active {
            transform: scale(0.98);
            background: #f8f8f8;
        }
        .order-card {
            position: relative;
        }
        .order-card .badge {
            position: absolute;
            top: 15px;
            right: 15px;
            background: #e74c3c;
            color: #fff;
            font-size: 10px;
            padding: 4px 10px;
            border-radius: 20px;
            font-weight: 500;
        }
        .order-card .badge.waiting {
            background: #f39c12;
        }
        .order-card .badge.active {
            background: #27ae60;
        }
        .order-card .badge.completed {
            background: #95a5a6;
        }
        .card-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .card-title .icon {
            width: 24px;
            height: 24px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 12px;
        }
        .info-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px dashed #eee;
            font-size: 14px;
        }
        .info-row:last-child {
            border-bottom: none;
        }
        .info-label {
            color: #888;
        }
        .info-value {
            color: #333;
            font-weight: 500;
        }
        .btn-group {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }
        .btn {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .btn-accept {
            background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
            color: #fff;
        }
        .btn-reject {
            background: #fff;
            color: #e74c3c;
            border: 1px solid #e74c3c;
        }
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
        }
        .nav-bar {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 430px;
            background: #fff;
            display: flex;
            justify-content: space-around;
            padding: 10px 0 20px;
            box-shadow: 0 -2px 20px rgba(0,0,0,0.1);
            z-index: 100;
        }
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            padding: 8px 20px;
            border-radius: 12px;
            transition: all 0.3s ease;
        }
        .nav-item.active {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
        }
        .nav-item.active .nav-icon {
            color: #fff;
        }
        .nav-icon {
            font-size: 24px;
            color: #888;
        }
        .nav-text {
            font-size: 11px;
            color: #888;
        }
        .nav-item.active .nav-text {
            color: #fff;
        }
        .profile-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
            padding: 30px 20px;
            text-align: center;
        }
        .avatar {
            width: 80px;
            height: 80px;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            margin: 0 auto 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            border: 3px solid rgba(255,255,255,0.5);
        }
        .profile-name {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 5px;
        }
        .profile-status {
            font-size: 13px;
            opacity: 0.9;
        }
        .menu-list {
            background: #fff;
            border-radius: 12px;
            margin: 15px;
            overflow: hidden;
        }
        .menu-item {
            display: flex;
            align-items: center;
            padding: 16px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            transition: background 0.2s;
        }
        .menu-item:last-child {
            border-bottom: none;
        }
        .menu-item:active {
            background: #f8f8f8;
        }
        .menu-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 18px;
            margin-right: 15px;
        }
        .menu-text {
            flex: 1;
            font-size: 15px;
            color: #333;
        }
        .menu-arrow {
            color: #ccc;
            font-size: 14px;
        }
        .detail-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 200;
            animation: fadeIn 0.3s;
        }
        .detail-overlay.show {
            display: block;
        }
        .detail-panel {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%) translateY(100%);
            width: 100%;
            max-width: 430px;
            background: #fff;
            border-radius: 20px 20px 0 0;
            padding: 20px;
            padding-bottom: 40px;
            z-index: 201;
            transition: transform 0.3s ease;
        }
        .detail-panel.show {
            transform: translateX(-50%) translateY(0);
        }
        .panel-handle {
            width: 40px;
            height: 4px;
            background: #ddd;
            border-radius: 2px;
            margin: 0 auto 20px;
        }
        .panel-title {
            font-size: 18px;
            font-weight: 600;
            text-align: center;
            margin-bottom: 20px;
        }
        .timeline {
            position: relative;
            padding-left: 30px;
            margin: 20px 0;
        }
        .timeline::before {
            content: '';
            position: absolute;
            left: 8px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: linear-gradient(to bottom, #667eea, #764ba2);
        }
        .timeline-item {
            position: relative;
            margin-bottom: 25px;
        }
        .timeline-item::before {
            content: '';
            position: absolute;
            left: -26px;
            top: 5px;
            width: 12px;
            height: 12px;
            background: #667eea;
            border-radius: 50%;
            border: 3px solid #fff;
            box-shadow: 0 0 0 2px #667eea;
        }
        .timeline-label {
            font-size: 12px;
            color: #888;
            margin-bottom: 4px;
        }
        .timeline-content {
            font-size: 15px;
            color: #333;
            font-weight: 500;
        }
        .user-info-card {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 12px;
            padding: 15px;
            margin: 15px 0;
        }
        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.8);
            color: #fff;
            padding: 15px 30px;
            border-radius: 8px;
            font-size: 14px;
            z-index: 300;
            animation: toastIn 0.3s ease;
        }
        @keyframes toastIn {
            from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
            to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        }
        .section-title {
            padding: 15px 20px 10px;
            font-size: 13px;
            color: #888;
            font-weight: 500;
        }
        .history-list .card {
            margin: 0 15px 10px;
        }
        .rate-stars {
            color: #f39c12;
            font-size: 14px;
        }
        .login-screen {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            padding: 20px;
        }
        .login-logo {
            font-size: 48px;
            margin-bottom: 20px;
        }
        .login-title {
            color: #fff;
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 40px;
        }
        .login-form {
            width: 100%;
            max-width: 320px;
        }
        .login-input {
            width: 100%;
            padding: 15px;
            margin-bottom: 15px;
            border: none;
            border-radius: 10px;
            font-size: 15px;
            background: rgba(255,255,255,0.1);
            color: #fff;
            outline: none;
        }
        .login-input::placeholder {
            color: rgba(255,255,255,0.5);
        }
        .login-btn {
            width: 100%;
            padding: 15px;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
            cursor: pointer;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
    </style>
</head>
<body>
    <!-- 登录页面 -->
    <div id="loginPage" class="login-screen">
        <div class="login-logo">🚗</div>
        <div class="login-title">司机端</div>
        <div class="login-form">
            <input type="tel" class="login-input" placeholder="请输入手机号" maxlength="11">
            <input type="password" class="login-input" placeholder="请输入密码">
            <button class="login-btn" onclick="handleLogin()">登 录</button>
        </div>
    </div>

    <!-- 主页面 -->
    <div id="mainApp" style="display:none;">
        <header class="header">
            <div class="status-bar">
                <span>9:41</span>
                <span>●●●●● WiFi</span>
            </div>
            <h1>司机端</h1>
        </header>

        <!-- 首页 - 新订单 -->
        <div id="pageHome" class="page active">
            <div class="section-title">📍 待接订单</div>
            <div class="card order-card" onclick="showOrderDetail('new1')">
                <span class="badge">新订单</span>
                <div class="card-title">
                    <span class="icon">📍</span>
                    预约单 #1001
                </div>
                <div class="info-row">
                    <span class="info-label">出发地</span>
                    <span class="info-value">北京市朝阳区建国路88号</span>
                </div>
                <div class="info-row">
                    <span class="info-label">目的地</span>
                    <span class="info-value">首都国际机场T3航站楼</span>
                </div>
                <div class="info-row">
                    <span class="info-label">用车时间</span>
                    <span class="info-value">今天 14:30</span>
                </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">13812348888</span>
                </div>
                <div class="btn-group">
                    <button class="btn btn-accept" onclick="event.stopPropagation(); acceptOrder('1001')">接 单</button>
                    <button class="btn btn-reject" onclick="event.stopPropagation(); rejectOrder('1001')">拒 绝</button>
                </div>
            </div>

            <div class="card order-card" onclick="showOrderDetail('new2')">
                <span class="badge waiting">等待确认</span>
                <div class="card-title">
                    <span class="icon">📍</span>
                    预约单 #1002
                </div>
                <div class="info-row">
                    <span class="info-label">出发地</span>
                    <span class="info-value">海淀区中关村大街1号</span>
                </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">今天 15:00</span>
                </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">13912346666</span>
                </div>
                <div class="btn-group">
                    <button class="btn btn-accept" onclick="event.stopPropagation(); acceptOrder('1002')">接 单</button>
                    <button class="btn btn-reject" onclick="event.stopPropagation(); rejectOrder('1002')">拒 绝</button>
                </div>
            </div>

            <div class="card order-card" onclick="showOrderDetail('new3')">
                <span class="badge">新订单</span>
                <div class="card-title">
                    <span class="icon">📍</span>
                    预约单 #1003
                </div>
                <div class="info-row">
                    <span class="info-label">出发地</span>
                    <span class="info-value">东城区王府井大街138号</span>
                </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">今天 16:00</span>
                </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">13712345555</span>
                </div>
                <div class="btn-group">
                    <button class="btn btn-accept" onclick="event.stopPropagation(); acceptOrder('1003')">接 单</button>
                    <button class="btn btn-reject" onclick="event.stopPropagation(); rejectOrder('1003')">拒 绝</button>
                </div>
            </div>
        </div>

        <!-- 订单页面 - 进行中 -->
        <div id="pageOrders" class="page">
            <div class="section-title">🚗 进行中订单</div>
            
            <div class="card order-card" onclick="showOrderDetail('active1')">
                <span class="badge active">服务中</span>
                <div class="card-title">
                    <span class="icon">🚕</span>
                    进行中订单 #1001
                </div>
                <div class="info-row">
                    <span class="info-label">起点</span>
                    <span class="info-value">北京市朝阳区建国路88号</span>
                </div>
                <div class="info-row">
                    <span class="info-label">终点</span>
                    <span class="info-value">首都国际机场T3航站楼</span>
                </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">13812348888</span>
                </div>
                <div class="info-row">
                    <span class="info-label">预计时间</span>
                    <span class="info-value">约25分钟</span>
                </div>
                <div class="btn-group">
                    <button class="btn btn-primary" onclick="event.stopPropagation(); completeOrder('1001')">完成订单</button>
                </div>
            </div>

            <div class="card order-card" onclick="showOrderDetail('active2')">
                <span class="badge waiting">已接单</span>
                <div class="card-title">
                    <span class="icon">🚕</span>
                    进行中订单 #1002
                </div>
                <div class="info-row">
                    <span class="info-label">起点</span>
                    <span class="info-value">海淀区中关村大街1号</span>
                </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">李女士</span>
                </div>
                <div class="info-row">
                    <span class="info-label">手机号</span>
                    <span class="info-value">13912346666</span>
                </div>
                <div class="info-row">
                    <span class="info-label">出发时间</span>
                    <span class="info-value">15分钟后</span>
                </div>
                <div class="btn-group">
                    <button class="btn btn-primary" onclick="event.stopPropagation(); startService('1002')">开始服务</button>
                </div>
            </div>
        </div>

        <!-- 我的页面 -->
        <div id="pageMe" class="page">
            <div class="profile-section">
                <div class="avatar">👤</div>
                <div class="profile-name">李师傅</div>
                <div class="profile-status">在线接单中</div>
            </div>

            <div class="menu-list">
                <div class="menu-item" onclick="switchTab('history')">
                    <div class="menu-icon">📋</div>
                    <div class="menu-text">历史订单</div>
                    <span class="menu-arrow">›</span>
                </div>
                <div class="menu-item" onclick="showProfileDetail()">
                    <div class="menu-icon">👤</div>
                    <div class="menu-text">我的信息</div>
                    <span class="menu-arrow">›</span>
                </div>
                <div class="menu-item" onclick="showChangePassword()">
                    <div class="menu-icon">🔑</div>
                    <div class="menu-text">修改密码</div>
                    <span class="menu-arrow">›</span>
                </div>
                <div class="menu-item" onclick="showToast('已退出登录')">
                    <div class="menu-icon" style="background:#e74c3c;">🚪</div>
                    <div class="menu-text" style="color:#e74c3c;">退出登录</div>
                    <span class="menu-arrow">›</span>
                </div>
            </div>
        </div>

        <!-- 历史订单页面 -->
        <div id="pageHistory" class="page">
            <div class="header" style="padding:15px 20px;">
                <div style="display:flex;align-items:center;gap:15px;">
                    <span onclick="switchTab('me')" style="font-size:20px;cursor:pointer;">←</span>
                    <h1 style="font-size:18px;">历史订单</h1>
                </div>
            </div>
            
            <div class="history-list">
                <div class="card order-card">
                    <span class="badge completed">已完成</span>
                    <div class="card-title">
                        <span class="icon">✓</span>
                        订单 #0999
                    </div>
                    <div class="info-row">
                        <span class="info-label">行程</span>
                        <span class="info-value">望京SOHO → 国贸CBD</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">完成时间</span>
                        <span class="info-value">今天 11:30</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">客户评分</span>
                        <span class="rate-stars">★★★★★</span>
                    </div>
                </div>

                <div class="card order-card">
                    <span class="badge completed">已完成</span>
                    <div class="card-title">
                        <span class="icon">✓</span>
                        订单 #0998
                    </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">昨天 18:45</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">客户评分</span>
                        <span class="rate-stars">★★★★☆</span>
                    </div>
                </div>

                <div class="card order-card">
                    <span class="badge completed">已完成</span>
                    <div class="card-title">
                        <span class="icon">✓</span>
                        订单 #0997
                    </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">昨天 14:20</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">客户评分</span>
                        <span class="rate-stars">★★★★★</span>
                    </div>
                </div>

                <div class="card order-card">
                    <span class="badge completed">已完成</span>
                    <div class="card-title">
                        <span class="icon">✓</span>
                        订单 #0996
                    </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">前天 09:15</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">客户评分</span>
                        <span class="rate-stars">★★★★★</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部导航 -->
        <nav class="nav-bar">
            <div class="nav-item active" onclick="switchTab('home')">
                <span class="nav-icon">🏠</span>
                <span class="nav-text">首页</span>
            </div>
            <div class="nav-item" onclick="switchTab('orders')">
                <span class="nav-icon">📋</span>
                <span class="nav-text">订单</span>
            </div>
            <div class="nav-item" onclick="switchTab('me')">
                <span class="nav-icon">👤</span>
                <span class="nav-text">我的</span>
            </div>
        </nav>
    </div>

    <!-- 订单详情面板 -->
    <div id="orderDetailOverlay" class="detail-overlay" onclick="closeDetail()"></div>
    <div id="orderDetailPanel" class="detail-panel">
        <div class="panel-handle"></div>
        <div class="panel-title" id="detailTitle">订单详情</div>
        <div class="timeline">
            <div class="timeline-item">
                <div class="timeline-label">出发地</div>
                <div class="timeline-content" id="detailStart">北京市朝阳区建国路88号</div>
            </div>
            <div class="timeline-item">
                <div class="timeline-label">目的地</div>
                <div class="timeline-content" id="detailEnd">首都国际机场T3航站楼</div>
            </div>
            <div class="timeline-item">
                <div class="timeline-label">用车时间</div>
                <div class="timeline-content" id="detailTime">今天 14:30</div>
            </div>
        </div>
        <div class="user-info-card">
            <div class="info-row">
                <span class="info-label">客户姓名</span>
                <span class="info-value" id="detailName">张先生</span>
            </div>
            <div class="info-row">
                <span class="info-label">联系电话</span>
                <span class="info-value" id="detailPhone">13812348888</span>
            </div>
            <div class="info-row">
                <span class="info-label">订单编号</span>
                <span class="info-value" id="detailId">#1001</span>
            </div>
        </div>
        <button class="btn btn-primary" onclick="closeDetail()" style="width:100%;margin-top:10px;">关 闭</button>
    </div>

    <script>
        const orderData = {
            'new1': { start: '北京市朝阳区建国路88号', end: '首都国际机场T3航站楼', time: '今天 14:30', name: '张先生', phone: '13812348888', id: '#1001' },
            'new2': { start: '海淀区中关村大街1号', end: '北京南站', time: '今天 15:00', name: '李女士', phone: '13912346666', id: '#1002' },
            'new3': { start: '东城区王府井大街138号', end: '大兴国际机场', time: '今天 16:00', name: '王先生', phone: '13712345555', id: '#1003' },
            'active1': { start: '北京市朝阳区建国路88号', end: '首都国际机场T3航站楼', time: '服务中', name: '张先生', phone: '13812348888', id: '#1001' },
            'active2': { start: '海淀区中关村大街1号', end: '北京南站', time: '等待出发', name: '李女士', phone: '13912346666', id: '#1002' }
        };

        function handleLogin() {
            document.getElementById('loginPage').style.display = 'none';
            document.getElementById('mainApp').style.display = 'block';
            showToast('登录成功');
        }

        function switchTab(tab) {
            const pages = ['pageHome', 'pageOrders', 'pageMe', 'pageHistory'];
            const navItems = document.querySelectorAll('.nav-item');
            
            pages.forEach(p => {
                document.getElementById(p).classList.remove('active');
            });
            navItems.forEach(n => n.classList.remove('active'));

            if (tab === 'home') {
                document.getElementById('pageHome').classList.add('active');
                navItems[0].classList.add('active');
            } else if (tab === 'orders') {
                document.getElementById('pageOrders').classList.add('active');
                navItems[1].classList.add('active');
            } else if (tab === 'me') {
                document.getElementById('pageMe').classList.add('active');
                navItems[2].classList.add('active');
            } else if (tab === 'history') {
                document.getElementById('pageHistory').classList.add('active');
            }
        }

        function showOrderDetail(orderId) {
            const data = orderData[orderId];
            if (data) {
                document.getElementById('detailStart').textContent = data.start;
                document.getElementById('detailEnd').textContent = data.end;
                document.getElementById('detailTime').textContent = data.time;
                document.getElementById('detailName').textContent = data.name;
                document.getElementById('detailPhone').textContent = data.phone;
                document.getElementById('detailId').textContent = data.id;
            }
            document.getElementById('orderDetailOverlay').classList.add('show');
            document.getElementById('orderDetailPanel').classList.add('show');
        }

        function closeDetail() {
            document.getElementById('orderDetailOverlay').classList.remove('show');
            document.getElementById('orderDetailPanel').classList.remove('show');
        }

        function acceptOrder(orderId) {
            showToast('接单成功');
            setTimeout(() => {
                switchTab('orders');
            }, 1000);
        }

        function rejectOrder(orderId) {
            showToast('已拒绝该订单');
        }

        function completeOrder(orderId) {
            showToast('订单已完成');
            setTimeout(() => {
                switchTab('orders');
            }, 1000);
        }

        function startService(orderId) {
            showToast('开始服务');
        }

        function showProfileDetail() {
            showToast('个人信息：工号 D-00886，电话 13812341234');
        }

        function showChangePassword() {
            showToast('请前往设置修改密码');
        }

        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'toast';
            toast.textContent = message;
            document.body.appendChild(toast);
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }
    </script>
</body>
</html>