编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灵活用工平台</title>
    <style>
        *{margin:0;padding:0;box-sizing:border-box}
        body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px}
        .phone{width:375px;height:812px;background:#1a1a2e;border-radius:50px;padding:12px;box-shadow:0 25px 80px rgba(0,0,0,0.5);position:relative}
        .screen{width:100%;height:100%;background:#f5f5f7;border-radius:40px;overflow:hidden;position:relative}
        .notch{width:150px;height:30px;background:#000;border-radius:20px;position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:100}
        .status-bar{height:44px;background:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 24px;font-size:14px;font-weight:600}
        .page{display:none;flex-direction:column;height:calc(100% - 44px);position:relative}
        .page.active{display:flex}
        .scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
        .scroll::-webkit-scrollbar{display:none}
        
        /* 登录页 */
        .login-bg{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:60px 30px 40px;color:#fff;flex:1;display:flex;flex-direction:column}
        .login-logo{font-size:48px;margin-bottom:16px}
        .login-title{font-size:28px;font-weight:700;margin-bottom:8px}
        .login-sub{opacity:0.9;font-size:14px;margin-bottom:40px}
        .login-form{flex:1}
        .form-group{margin-bottom:16px}
        .form-group label{font-size:13px;color:rgba(255,255,255,0.8);margin-bottom:8px;display:block}
        .form-input{width:100%;padding:14px 16px;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);border-radius:12px;color:#fff;font-size:16px;outline:none}
        .form-input::placeholder{color:rgba(255,255,255,0.5)}
        .code-row{display:flex;gap:10px}
        .code-row input{flex:1}
        .code-btn{padding:14px 16px;background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.3);border-radius:12px;color:#fff;cursor:pointer;font-size:14px}
        .login-btn{width:100%;padding:16px;background:#fff;color:#667eea;border:none;border-radius:12px;font-size:18px;font-weight:600;cursor:pointer;margin-top:20px}
        .login-btn:active{transform:scale(0.98)}
        .login-agree{font-size:12px;color:rgba(255,255,255,0.7);text-align:center;margin-top:20px}
        .login-agree a{color:#fff;text-decoration:underline}
        
        /* 首页 */
        .home-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:50px 20px 30px;color:#fff}
        .home-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
        .user-info{display:flex;align-items:center;gap:12px}
        .avatar{width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-size:24px}
        .user-name{font-size:18px;font-weight:600}
        .user-tag{font-size:12px;opacity:0.8;background:rgba(255,255,255,0.2);padding:2px 8px;border-radius:10px;margin-top:4px;display:inline-block}
        .msg-btn{width:40px;height:40px;background:rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;position:relative}
        .msg-badge{position:absolute;top:-2px;right:-2px;width:18px;height:18px;background:#ff4757;border-radius:50%;font-size:11px;display:flex;align-items:center;justify-content:center}
        .stats-card{background:rgba(255,255,255,0.15);border-radius:16px;padding:16px;display:flex;justify-content:space-around}
        .stat-item{text-align:center}
        .stat-val{font-size:22px;font-weight:700}
        .stat-label{font-size:12px;opacity:0.8;margin-top:4px}
        .stat-item:not(:last-child){border-right:1px solid rgba(255,255,255,0.2);padding-right:20px}
        
        /* 功能入口 */
        .quick-section{padding:20px}
        .section-title{font-size:16px;font-weight:600;color:#333;margin-bottom:14px}
        .quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
        .quick-item{background:#fff;border-radius:12px;padding:14px 8px;text-align:center;cursor:pointer;transition:all 0.2s;box-shadow:0 2px 8px rgba(0,0,0,0.04)}
        .quick-item:active{transform:scale(0.95);background:#f0f0f0}
        .quick-icon{font-size:26px;margin-bottom:6px}
        .quick-name{font-size:12px;color:#333}
        
        /* 订单列表 */
        .order-section{padding:0 20px 20px}
        .tab-row{display:flex;gap:8px;margin-bottom:14px}
        .tab{ padding:8px 16px;background:#fff;border-radius:20px;font-size:13px;color:#666;cursor:pointer;border:none}
        .tab.active{background:#667eea;color:#fff}
        .order-card{background:#fff;border-radius:16px;padding:16px;margin-bottom:12px;cursor:pointer}
        .order-card:active{background:#f8f8fa}
        .order-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
        .order-title{font-size:15px;font-weight:600;color:#333}
        .order-status{padding:4px 10px;border-radius:12px;font-size:12px}
        .status-new{background:#fff3e0;color:#ff9800}
        .status-ing{background:#e3f2fd;color:#2196f3}
        .status-done{background:#e8f5e9;color:#4caf50}
        .status-pay{background:#fce4ec;color:#e91e63}
        .order-middle{display:flex;gap:16px;font-size:13px;color:#666;margin-bottom:10px}
        .order-bottom{display:flex;justify-content:space-between;align-items:center}
        .order-price{font-size:18px;font-weight:700;color:#f12711}
        .order-unit{font-size:12px;color:#999}
        .order-btn{padding:8px 16px;background:#667eea;color:#fff;border-radius:20px;font-size:13px;border:none;cursor:pointer}
        .order-btn:active{opacity:0.8}
        
        /* 详情页通用 */
        .detail-header{background:#fff;padding:16px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #eee}
        .back-btn{width:32px;height:32px;background:#f5f5f7;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer}
        .detail-title{font-size:16px;font-weight:600;flex:1}
        
        /* 接单中心页 */
        .filter-bar{display:flex;gap:8px;padding:12px 20px;background:#fff;overflow-x:auto}
        .filter-btn{padding:8px 14px;background:#f5f5f7;border-radius:16px;font-size:13px;color:#666;white-space:nowrap;border:none;cursor:pointer}
        .filter-btn.active{background:#667eea;color:#fff}
        .job-card{background:#fff;margin:12px 20px;border-radius:16px;padding:16px}
        .job-card:active{background:#f8f8fa}
        .job-header{display:flex;justify-content:space-between;margin-bottom:10px}
        .job-title{font-size:15px;font-weight:600}
        .job-salary{color:#f12711;font-weight:700;font-size:18px}
        .job-tags{display:flex;gap:6px;margin-bottom:10px}
        .job-tag{padding:4px 8px;background:#f0f0f5;border-radius:6px;font-size:11px;color:#666}
        .job-info{display:flex;gap:16px;font-size:13px;color:#999}
        .job-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid #f0f0f0}
        .employer{display:flex;align-items:center;gap:8px}
        .emp-avatar{width:28px;height:28px;background:#ddd;border-radius:50%}
        .emp-name{font-size:13px;color:#666}
        .take-btn{padding:8px 20px;background:#667eea;color:#fff;border-radius:20px;border:none;font-size:13px;cursor:pointer}
        
        /* 订单详情页 */
        .order-detail-content{padding:20px}
        .detail-card{background:#fff;border-radius:16px;padding:16px;margin-bottom:16px}
        .detail-card-title{font-size:14px;color:#999;margin-bottom:8px}
        .detail-card-value{font-size:16px;color:#333;font-weight:500}
        .address-row{display:flex;gap:10px;align-items:flex-start}
        .address-icon{font-size:20px}
        .address-text{font-size:14px;color:#333;line-height:1.5}
        .action-btns{display:flex;gap:12px;margin-top:16px}
        .action-btn{flex:1;padding:14px;border-radius:12px;border:none;font-size:15px;font-weight:500;cursor:pointer}
        .btn-primary{background:#667eea;color:#fff}
        .btn-secondary{background:#f5f5f5;color:#666}
        
        /* 收入页 */
        .balance-card{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);margin:20px;border-radius:20px;padding:24px;color:#fff}
        .balance-label{font-size:14px;opacity:0.9;margin-bottom:8px}
        .balance-amount{font-size:36px;font-weight:700;margin-bottom:20px}
        .balance-amount small{font-size:16px}
        .balance-btns{display:flex;gap:12px}
        .balance-btn{flex:1;padding:12px;background:rgba(255,255,255,0.2);border-radius:12px;text-align:center;border:none;color:#fff;cursor:pointer}
        .balance-btn:active{background:rgba(255,255,255,0.3)}
        .income-list{padding:0 20px 20px}
        .income-item{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid #f0f0f0}
        .income-left{display:flex;flex-direction:column;gap:4px}
        .income-title{font-size:14px;color:#333}
        .income-time{font-size:12px;color:#999}
        .income-amount{font-size:16px;color:#333;font-weight:500}
        .income-plus{color:#4caf50}
        .income-minus{color:#f12711}
        
        /* 消息页 */
        .msg-item{display:flex;gap:12px;padding:16px 20px;background:#fff;border-bottom:1px solid #f0f0f0;cursor:pointer}
        .msg-item:active{background:#f8f8fa}
        .msg-item.unread{background:#f0f4ff}
        .msg-avatar{width:48px;height:48px;background:#667eea;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff}
        .msg-content{flex:1}
        .msg-sender{font-size:15px;font-weight:600;color:#333;margin-bottom:4px}
        .msg-text{font-size:13px;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .msg-meta{text-align:right;flex-shrink:0}
        .msg-time{font-size:12px;color:#999;margin-bottom:4px}
        .msg-dot{width:8px;height:8px;background:#ff4757;border-radius:50%;display:inline-block}
        
        /* 个人中心页 */
        .profile-header{background:#fff;padding:20px;display:flex;gap:16px;align-items:center}
        .profile-avatar{width:64px;height:64px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px}
        .profile-info{flex:1}
        .profile-name{font-size:18px;font-weight:600;color:#333;margin-bottom:6px}
        .profile-tags{display:flex;gap:6px}
        .profile-tag{padding:4px 8px;background:#e8f4ff;border-radius:6px;font-size:11px;color:#667eea}
        .vip-tag{background:linear-gradient(135deg,#f5af19,#f12711);color:#fff}
        .menu-section{padding:20px}
        .menu-group{background:#fff;border-radius:16px;overflow:hidden;margin-bottom:12px}
        .menu-item{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;cursor:pointer}
        .menu-item:last-child{border-bottom:none}
        .menu-item:active{background:#f8f8fa}
        .menu-left{display:flex;align-items:center;gap:10px}
        .menu-icon{font-size:20px}
        .menu-name{font-size:15px;color:#333}
        .menu-arrow{color:#ccc;font-size:18px}
        
        /* 模态框 */
        .modal{position:absolute;inset:0;background:rgba(0,0,0,0.5);display:none;justify-content:center;align-items:flex-end;z-index:200}
        .modal.active{display:flex}
        .modal-content{background:#fff;border-radius:24px 24px 0 0;width:100%;max-height:80%;animation:slideUp 0.3s ease}
        @keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
        .modal-header{padding:16px 20px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center}
        .modal-title{font-size:16px;font-weight:600}
        .modal-close{width:28px;height:28px;background:#f5f5f5;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}
        .modal-body{padding:20px;max-height:400px;overflow-y:auto}
        
        /* Toast */
        .toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.8);color:#fff;padding:14px 28px;border-radius:12px;font-size:14px;z-index:300;display:none}
        .toast.show{display:block;animation:fadeIn 0.3s ease}
        @keyframes fadeIn{from{opacity:0;transform:translate(-50%,-50%) scale(0.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
        
        /* 底部导航 */
        .bottom-nav{position:absolute;bottom:0;left:0;right:0;height:84px;background:#fff;display:flex;justify-content:space-around;padding-top:8px;border-top:1px solid #eee;z-index:50}
        .nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 16px;cursor:pointer;transition:all 0.2s}
        .nav-item:active{transform:scale(0.9)}
        .nav-icon{font-size:22px}
        .nav-label{font-size:10px;color:#999}
        .nav-item.active .nav-label{color:#667eea}
        
        /* 商品卡片 */
        .goods-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:0 20px 20px}
        .goods-card{background:#fff;border-radius:12px;overflow:hidden;cursor:pointer}
        .goods-card:active{transform:scale(0.98)}
        .goods-img{height:120px;background:#f0f0f5;display:flex;align-items:center;justify-content:center;font-size:40px}
        .goods-info{padding:10px}
        .goods-name{font-size:14px;color:#333;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
        .goods-price{color:#f12711;font-weight:600;font-size:16px}
        .goods-price small{font-size:12px}
        .goods-sales{font-size:11px;color:#999;margin-top:4px}
    </style>
</head>
<body>
    <div class="phone">
        <div class="screen">
            <div class="notch"></div>
            <div class="status-bar"><span>9:41</span><span>📶 📡 🔋</span></div>
            
            <!-- 登录页 -->
            <div class="page active" id="page-login">
                <div class="login-bg">
                    <div class="login-logo">🛠️</div>
                    <div class="login-title">灵活用工平台</div>
                    <div class="login-sub">随时接单，轻松赚钱</div>
                    <div class="login-form">
                        <div class="form-group">
                            <label>手机号</label>
                            <input type="tel" class="form-input" placeholder="请输入手机号" value="138****8888">
                        </div>
                        <div class="form-group">
                            <label>验证码</label>
                            <div class="code-row">
                                <input type="text" class="form-input" placeholder="请输入验证码" value="8888">
                                <button class="code-btn" onclick="sendCode()">获取验证码</button>
                            </div>
                        </div>
                        <button class="login-btn" onclick="doLogin()">登录 / 注册</button>
                        <div class="login-agree">登录即表示同意<a href="#">《用户协议》</a>和<a href="#">《隐私政策》</a></div>
                    </div>
                </div>
            </div>
            
            <!-- 首页 -->
            <div class="page" id="page-home">
                <div class="home-header">
                    <div class="home-top">
                        <div class="user-info">
                            <div class="avatar">👨‍🔧</div>
                            <div>
                                <div class="user-name">张师傅</div>
                                <div class="user-tag">已实名 · 水电专家</div>
                            </div>
                        </div>
                        <div class="msg-btn" onclick="goPage('message')">🔔<span class="msg-badge">3</span></div>
                    </div>
                    <div class="stats-card">
                        <div class="stat-item" onclick="goPage('wallet')">
                            <div class="stat-val" id="stat-balance">2,568</div>
                            <div class="stat-label">账户余额(元)</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-val" id="stat-month">8,520</div>
                            <div class="stat-label">本月收入(元)</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-val" id="stat-orders">156</div>
                            <div class="stat-label">完成订单</div>
                        </div>
                    </div>
                </div>
                
                <div class="scroll">
                    <div class="quick-section">
                        <div class="section-title">快捷服务</div>
                        <div class="quick-grid">
                            <div class="quick-item" onclick="goPage('jobs')"><div class="quick-icon">📋</div><div class="quick-name">接单中心</div></div>
                            <div class="quick-item" onclick="goPage('orders')"><div class="quick-icon">📦</div><div class="quick-name">我的订单</div></div>
                            <div class="quick-item" onclick="goPage('wallet')"><div class="quick-icon">💰</div><div class="quick-name">我的钱包</div></div>
                            <div class="quick-item" onclick="goPage('mall')"><div class="quick-icon">🛒</div><div class="quick-name">工具商城</div></div>
                            <div class="quick-item" onclick="goPage('vip')"><div class="quick-icon">👑</div><div class="quick-name">会员中心</div></div>
                            <div class="quick-item" onclick="goPage('insurance')"><div class="quick-icon">🏥</div><div class="quick-name">保险服务</div></div>
                            <div class="quick-item" onclick="goPage('map')"><div class="quick-icon">🗺️</div><div class="quick-name">地图找活</div></div>
                            <div class="quick-item" onclick="goPage('profile')"><div class="quick-icon">👤</div><div class="quick-name">个人中心</div></div>
                        </div>
                    </div>
                    
                    <div class="order-section">
                        <div class="section-title">推荐岗位</div>
                        <div class="tab-row">
                            <button class="tab active" onclick="filterOrders('all',this)">全部</button>
                            <button class="tab" onclick="filterOrders('new',this)">新岗位</button>
                            <button class="tab" onclick="filterOrders('ing',this)">服务中</button>
                            <button class="tab" onclick="filterOrders('done',this)">已完成</button>
                        </div>
                        <div id="orderList"></div>
                    </div>
                </div>
                
                <div class="bottom-nav">
                    <div class="nav-item active" onclick="goPage('home')"><span class="nav-icon">🏠</span><span class="nav-label">首页</span></div>
                    <div class="nav-item" onclick="goPage('jobs')"><span class="nav-icon">📋</span><span class="nav-label">接单</span></div>
                    <div class="nav-item" onclick="goPage('orders')"><span class="nav-icon">📦</span><span class="nav-label">订单</span></div>
                    <div class="nav-item" onclick="goPage('wallet')"><span class="nav-icon">💼</span><span class="nav-label">钱包</span></div>
                    <div class="nav-item" onclick="goPage('profile')"><span class="nav-icon">👤</span><span class="nav-label">我的</span></div>
                </div>
            </div>
            
            <!-- 接单中心页 -->
            <div class="page" id="page-jobs">
                <div class="detail-header"><div class="back-btn" onclick="goPage('home')">←</div><div class="detail-title">接单中心</div></div>
                <div class="filter-bar">
                    <button class="filter-btn active">全部</button>
                    <button class="filter-btn">水电维修</button>
                    <button class="filter-btn">安装服务</button>
                    <button class="filter-btn">搬家配送</button>
                    <button class="filter-btn">保洁清洗</button>
                </div>
                <div class="scroll">
                    <div class="job-card" onclick="showJobDetail(0)">
                        <div class="job-header"><span class="job-title">家庭水电维修</span><span class="job-salary">¥300-500</span></div>
                        <div class="job-tags"><span class="job-tag">急招</span><span class="job-tag">附近</span><span class="job-tag">日结</span></div>
                        <div class="job-info"><span>📍 距您2.5km</span><span>⏰ 今日14:00</span><span>🕐 约2小时</span></div>
                        <div class="job-bottom">
                            <div class="employer"><div class="emp-avatar">🏠</div><span class="emp-name">李先生</span></div>
                            <button class="take-btn" onclick="event.stopPropagation();takeOrder(0)">立即接单</button>
                        </div>
                    </div>
                    <div class="job-card" onclick="showJobDetail(1)">
                        <div class="job-header"><span class="job-title">办公室网络布线</span><span class="job-salary">¥600-800</span></div>
                        <div class="job-tags"><span class="job-tag">长期</span><span class="job-tag">包材料</span></div>
                        <div class="job-info"><span>📍 距您5.8km</span><span>⏰ 明日09:00</span><span>🕐 约4小时</span></div>
                        <div class="job-bottom">
                            <div class="employer"><div class="emp-avatar">🏢</div><span class="emp-name">华创科技公司</span></div>
                            <button class="take-btn" onclick="event.stopPropagation();takeOrder(1)">立即接单</button>
                        </div>
                    </div>
                    <div class="job-card" onclick="showJobDetail(2)">
                        <div class="job-header"><span class="job-title">商铺灯具更换</span><span class="job-salary">¥150-200</span></div>
                        <div class="job-tags"><span class="job-tag">简单</span><span class="job-tag">随时</span></div>
                        <div class="job-info"><span>📍 距您1.2km</span><span>⏰ 随时</span><span>🕐 约1小时</span></div>
                        <div class="job-bottom">
                            <div class="employer"><div class="emp-avatar">🏪</div><span class="emp-name">好又多超市</span></div>
                            <button class="take-btn" onclick="event.stopPropagation();takeOrder(2)">立即接单</button>
                        </div>
                    </div>
                    <div class="job-card" onclick="showJobDetail(3)">
                        <div class="job-header"><span class="job-title">新房装修监工</span><span class="job-salary">¥800/天</span></div>
                        <div class="job-tags"><span class="job-tag">包餐</span><span class="job-tag">周结</span></div>
                        <div class="job-info"><span>📍 距您8.3km</span><span>⏰ 长期</span><span>🕐 每天8小时</span></div>
                        <div class="job-bottom">
                            <div class="employer"><div class="emp-avatar">🏗️</div><span class="emp-name">业主王先生</span></div>
                            <button class="take-btn" onclick="event.stopPropagation();takeOrder(3)">立即接单</button>
                        </div>
                    </div>
                    <div style="height:20px"></div>
                </div>
                <div class="bottom-nav">
                    <div class="nav-item" onclick="goPage('home')"><span class="nav-icon">🏠</span><span class="nav-label">首页</span></div>
                    <div class="nav-item active" onclick="goPage('jobs')"><span class="nav-icon">📋</span><span class="nav-label">接单</span></div>
                    <div class="nav-item" onclick="goPage('orders')"><span class="nav-icon">📦</span><span class="nav-label">订单</span></div>
                    <div class="nav-item" onclick="goPage('wallet')"><span class="nav-icon">💼</span><span class="nav-label">钱包</span></div>
                    <div class="nav-item" onclick="goPage('profile')"><span class="nav-icon">👤</span><span class="nav-label">我的</span></div>
                </div>
            </div>
            
            <!-- 订单管理页 -->
            <div class="page" id="page-orders">
                <div class="detail-header"><div class="back-btn" onclick="goPage('home')">←</div><div class="detail-title">我的订单</div></div>
                <div class="filter-bar">
                    <button class="filter-btn active">全部</button>
                    <button class="filter-btn">待接单</button>
                    <button class="filter-btn">服务中</button>
                    <button class="filter-btn">待支付</button>
                    <button class="filter-btn">已完成</button>
                </div>
                <div class="scroll">
                    <div class="order-list" id="myOrders"></div>
                    <div style="height:20px"></div>
                </div>
                <div class="bottom-nav">
                    <div class="nav-item" onclick="goPage('home')"><span class="nav-icon">🏠</span><span class="nav-label">首页</span></div>
                    <div class="nav-item" onclick="goPage('jobs')"><span class="nav-icon">📋</span><span class="nav-label">接单</span></div>
                    <div class="nav-item active" onclick="goPage('orders')"><span class="nav-icon">📦</span><span class="nav-label">订单</span></div>
                    <div class="nav-item" onclick="goPage('wallet')"><span class="nav-icon">💼</span><span class="nav-label">钱包</span></div>
                    <div class="nav-item" onclick="goPage('profile')"><span class="nav-icon">👤</span><span class="nav-label">我的</span></div>
                </div>
            </div>
            
            <!-- 钱包页 -->
            <div class="page" id="page-wallet">
                <div class="detail-header"><div class="back-btn" onclick="goPage('home')">←</div><div class="detail-title">我的钱包</div></div>
                <div class="scroll">
                    <div class="balance-card">
                        <div class="balance-label">账户余额（元）</div>
                        <div class="balance-amount">¥<span id="wallet-balance">2,568.00</span></div>
                        <div class="balance-btns">
                            <button class="balance-btn" onclick="showWithdraw()">💰 提现</button>
                            <button class="balance-btn" onclick="showRecharge()">💳 充值</button>
                        </div>
                    </div>
                    <div class="menu-section" style="padding-top:0">
                        <div class="section-title">收入明细</div>
                        <div id="incomeList"></div>
                    </div>
                </div>
                <div class="bottom-nav">
                    <div class="nav-item" onclick="goPage('home')"><span class="nav-icon">🏠</span><span class="nav-label">首页</span></div>
                    <div class="nav-item" onclick="goPage('jobs')"><span class="nav-icon">📋</span><span class="nav-label">接单</span></div>
                    <div class="nav-item" onclick="goPage('orders')"><span class="nav-icon">📦</span><span class="nav-label">订单</span></div>
                    <div class="nav-item active" onclick="goPage('wallet')"><span class="nav-icon">💼</span><span class="nav-label">钱包</span></div>
                    <div class="nav-item" onclick="goPage('profile')"><span class="nav-icon">👤</span><span class="nav-label">我的</span></div>
                </div>
            </div>
            
            <!-- 消息页 -->
            <div class="page" id="page-message">
                <div class="detail-header"><div class="back-btn" onclick="goPage('home')">←</div><div class="detail-title">消息通知</div></div>
                <div class="scroll">
                    <div id="msgList"></div>
                </div>
                <div class="bottom-nav">
                    <div class="nav-item" onclick="goPage('home')"><span class="nav-icon">🏠</span><span class="nav-label">首页</span></div>
                    <div class="nav-item" onclick="goPage('jobs')"><span class="nav-icon">📋</span><span class="nav-label">接单</span></div>
                    <div class="nav-item" onclick="goPage('orders')"><span class="nav-icon">📦</span><span class="nav-label">订单</span></div>
                    <div class="nav-item" onclick="goPage('wallet')"><span class="nav-icon">💼</span><span class="nav-label">钱包</span></div>
                    <div class="nav-item" onclick="goPage('profile')"><span class="nav-icon">👤</span><span class="nav-label">我的</span></div>
                </div>
            </div>
            
            <!-- 个人中心页 -->
            <div class="page" id="page-profile">
                <div class="scroll">
                    <div class="profile-header">
                        <div class="profile-avatar">👨‍🔧</div>
                        <div class="profile-info">
                            <div class="profile-name">张师傅</div>
                            <div class="profile-tags">
                                <span class="profile-tag">已实名</span>
                                <span class="profile-tag">水电维修</span>
                                <span class="profile-tag vip-tag">黄金会员</span>
                            </div>
                        </div>
                    </div>
                    <div class="menu-section">
                        <div class="menu-group">
                            <div class="menu-item" onclick="showModal('实名认证','您的实名认证已通过审核<br>认证时间：2024-03-15')"><span class="menu-icon">📋</span><span class="menu-name">实名认证</span><span class="menu-arrow">›</span></div>
                            <div class="menu-item" onclick="showModal('技能设置','当前技能：水电路维修、安装服务<br>可添加更多技能标签提升接单率')"><span class="menu-icon">🏷️</span><span class="menu-name">技能标签</span><span class="menu-arrow">›</span></div>
                            <div class="menu-item" onclick="showModal('工作简历','在线简历已生成<br>可前往查看和编辑')"><span class="menu-icon">📄</span><span class="menu-name">求职简历</span><span class="menu-arrow">›</span></div>
                        </div>
                        <div class="menu-group">
                            <div class="menu-item" onclick="goPage('orders')"><span class="menu-icon">📦</span><span class="menu-name">我的订单</span><span class="menu-arrow">›</span></div>
                            <div class="menu-item" onclick="goPage('wallet')"><span class="menu-icon">💰</span><span class="menu-name">我的钱包</span><span class="menu-arrow">›</span></div>
                            <div class="menu-item" onclick="goPage('vip')"><span class="menu-icon">👑</span><span class="menu-name">会员中心</span><span class="menu-arrow">›</span></div>
                            <div class="menu-item" onclick="goPage('mall')"><span class="menu-icon">🛒</span><span class="menu-name">工具商城</span><span class="menu-arrow">›</span></div>
                        </div>
                        <div class="menu-group">
                            <div class="menu-item" onclick="goPage('insurance')"><span class="menu-icon">🏥</span><span class="menu-name">保险服务</span><span class="menu-arrow">›</span></div>
                            <div class="menu-item" onclick="showModal('地址管理','已保存地址：3个<br>可管理常用服务地址')"><span class="menu-icon">📍</span><span class="menu-name">常用地址</span><span class="menu-arrow">›</span></div>
                            <div class="menu-item" onclick="showModal('设置','账号设置、通知设置、隐私设置等')"><span class="menu-icon">⚙️</span><span class="menu-name">设置</span><span class="menu-arrow">›</span></div>
                        </div>
                        <button class="action-btn btn-secondary" style="width:100%;margin-top:20px" onclick="logout()">退出登录</button>
                    </div>
                    <div style="height:20px"></div>
                </div>
                <div class="bottom-nav">
                    <div class="nav-item" onclick="goPage('home')"><span class="nav-icon">🏠</span><span class="nav-label">首页</span></div>
                    <div class="nav-item" onclick="goPage('jobs')"><span class="nav-icon">📋</span><span class="nav-label">接单</span></div>
                    <div class="nav-item" onclick="goPage('orders')"><span class="nav-icon">📦</span><span class="nav-label">订单</span></div>
                    <div class="nav-item" onclick="goPage('wallet')"><span class="nav-icon">💼</span><span class="nav-label">钱包</span></div>
                    <div class="nav-item active" onclick="goPage('profile')"><span class="nav-icon">👤</span><span class="nav-label">我的</span></div>
                </div>
            </div>
            
            <!-- 商城页 -->
            <div class="page" id="page-mall">
                <div class="detail-header"><div class="back-btn" onclick="goPage('home')">←</div><div class="detail-title">工具商城</div></div>
                <div class="filter-bar">
                    <button class="filter-btn active">全部</button>
                    <button class="filter-btn">工具套装</button>
                    <button class="filter-btn">防护用品</button>
                    <button class="filter-btn">维修配件</button>
                </div>
                <div class="scroll">
                    <div class="goods-grid" id="goodsList"></div>
                    <div style="height:20px"></div>
                </div>
                <div class="bottom-nav">
                    <div class="nav-item" onclick="goPage('home')"><span class="nav-icon">🏠</span><span class="nav-label">首页</span></div>
                    <div class="nav-item" onclick="goPage('jobs')"><span class="nav-icon">📋</span><span class="nav-label">接单</span></div>
                    <div class="nav-item" onclick="goPage('orders')"><span class="nav-icon">📦</span><span class="nav-label">订单</span></div>
                    <div class="nav-item" onclick="goPage('wallet')"><span class="nav-icon">💼</span><span class="nav-label">钱包</span></div>
                    <div class="nav-item" onclick="goPage('profile')"><span class="nav-icon">👤</span><span class="nav-label">我的</span></div>
                </div>
            </div>
            
            <!-- 会员页 -->
            <div class="page" id="page-vip">
                <div class="detail-header"><div class="back-btn" onclick="goPage('home')">←</div><div class="detail-title">会员中心</div></div>
                <div class="scroll" style="padding:20px">
                    <div style="background:linear-gradient(135deg,#f5af19,#f12711);border-radius:20px;padding:24px;color:#fff;text-align:center;margin-bottom:20px">
                        <div style="font-size:48px;margin-bottom:10px">👑</div>
                        <div style="font-size:20px;font-weight:700;margin-bottom:8px">黄金会员</div>
                        <div style="font-size:14px;opacity:0.9;margin-bottom:16px">有效期至 2025-12-31</div>
                        <div style="display:flex;justify-content:center;gap:8px;flex-wrap:wrap">
                            <span style="background:rgba(255,255,255,0.2);padding:6px 12px;border-radius:20px;font-size:12px">接单不限量</span>
                            <span style="background:rgba(255,255,255,0.2);padding:6px 12px;border-radius:20px;font-size:12px">排名加权</span>
                            <span style="background:rgba(255,255,255,0.2);padding:6px 12px;border-radius:20px;font-size:12px">优先派单</span>
                            <span style="background:rgba(255,255,255,0.2);padding:6px 12px;border-radius:20px;font-size:12px">电话直显</span>
                        </div>
                    </div>
                    <div class="section-title">升级套餐</div>
                    <div id="vipPackages"></div>
                    <div style="height:20px"></div>
                </div>
                <div class="bottom-nav">
                    <div class="nav-item" onclick="goPage('home')"><span class="nav-icon">🏠</span><span class="nav-label">首页</span></div>
                    <div class="nav-item" onclick="goPage('jobs')"><span class="nav-icon">📋</span><span class="nav-label">接单</span></div>
                    <div class="nav-item" onclick="goPage('orders')"><span class="nav-icon">📦</span><span class="nav-label">订单</span></div>
                    <div class="nav-item" onclick="goPage('wallet')"><span class="nav-icon">💼</span><span class="nav-label">钱包</span></div>
                    <div class="nav-item" onclick="goPage('profile')"><span class="nav-icon">👤</span><span class="nav-label">我的</span></div>
                </div>
            </div>
            
            <!-- 保险页 -->
            <div class="page" id="page-insurance">
                <div class="detail-header"><div class="back-btn" onclick="goPage('home')">←</div><div class="detail-title">保险服务</div></div>
                <div class="scroll" style="padding:20px">
                    <div class="section-title">我的保单</div>
                    <div class="detail-card">
                        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
                            <span style="font-size:16px;font-weight:600">意外伤害险</span>
                            <span class="order-status status-done">生效中</span>
                        </div>
                        <div style="font-size:14px;color:#666;margin-bottom:8px">保单号：BX20240315001</div>
                        <div style="font-size:14px;color:#666;margin-bottom:8px">保障期限：2024-03-15 至 2025-03-14</div>
                        <div style="font-size:14px;color:#666">保费：¥199/年</div>
                        <button class="take-btn" style="margin-top:12px" onclick="showToast('理赔申请已提交')">申请理赔</button>
                    </div>
                    <div class="section-title">保险产品</div>
                    <div id="insuranceList"></div>
                    <div style="height:20px"></div>
                </div>
                <div class="bottom-nav">
                    <div class="nav-item" onclick="goPage('home')"><span class="nav-icon">🏠</span><span class="nav-label">首页</span></div>
                    <div class="nav-item" onclick="goPage('jobs')"><span class="nav-icon">📋</span><span class="nav-label">接单</span></div>
                    <div class="nav-item" onclick="goPage('orders')"><span class="nav-icon">📦</span><span class="nav-label">订单</span></div>
                    <div class="nav-item" onclick="goPage('wallet')"><span class="nav-icon">💼</span><span class="nav-label">钱包</span></div>
                    <div class="nav-item" onclick="goPage('profile')"><span class="nav-icon">👤</span><span class="nav-label">我的</span></div>
                </div>
            </div>
            
            <!-- 地图页 -->
            <div class="page" id="page-map">
                <div class="detail-header"><div class="back-btn" onclick="goPage('home')">←</div><div class="detail-title">地图找活</div></div>
                <div style="flex:1;background:#e5e5e5;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#666">
                    <div style="font-size:60px;margin-bottom:16px">🗺️</div>
                    <div style="font-size:16px;margin-bottom:8px">附近岗位地图</div>
                    <div style="font-size:14px">共有 <span style="color:#667eea;font-weight:600">12</span> 个岗位在您周围</div>
                    <div style="margin-top:20px;display:flex;gap:10px">
                        <span style="background:#667eea;color:#fff;padding:10px 20px;border-radius:20px;font-size:14px;cursor:pointer" onclick="goPage('jobs')">查看岗位列表</span>
                        <span style="background:#4caf50;color:#fff;padding:10px 20px;border-radius:20px;font-size:14px;cursor:pointer" onclick="showToast('正在为您导航...')">导航上门</span>
                    </div>
                </div>
                <div class="bottom-nav">
                    <div class="nav-item" onclick="goPage('home')"><span class="nav-icon">🏠</span><span class="nav-label">首页</span></div>
                    <div class="nav-item" onclick="goPage('jobs')"><span class="nav-icon">📋</span><span class="nav-label">接单</span></div>
                    <div class="nav-item" onclick="goPage('orders')"><span class="nav-icon">📦</span><span class="nav-label">订单</span></div>
                    <div class="nav-item" onclick="goPage('wallet')"><span class="nav-icon">💼</span><span class="nav-label">钱包</span></div>
                    <div class="nav-item" onclick="goPage('profile')"><span class="nav-icon">👤</span><span class="nav-label">我的</span></div>
                </div>
            </div>
            
            <!-- 模态框 -->
            <div class="modal" id="modal">
                <div class="modal-content">
                    <div class="modal-header">
                        <span class="modal-title" id="modalTitle">提示</span>
                        <div class="modal-close" onclick="closeModal()">×</div>
                    </div>
                    <div class="modal-body" id="modalBody"></div>
                </div>
            </div>
            
            <!-- Toast -->
            <div class="toast" id="toast"></div>
        </div>
    </div>
    
    <script>
        // 业务数据
        const ordersData = [
            {id:1,title:'家庭水电维修',status:'new',price:'300-500',distance:'2.5km',time:'今日14:00',duration:'约2小时',employer:'李先生'},
            {id:2,title:'办公室网络布线',status:'ing',price:'600-800',distance:'5.8km',time:'服务中',duration:'进行中',employer:'华创科技'},
            {id:3,title:'商铺灯具更换',status:'done',price:'150',distance:'1.2km',time:'已完成',duration:'1小时',employer:'好又多超市'},
            {id:4,title:'新房监工服务',status:'pay',price:'800',distance:'8.3km',time:'待支付',duration:'1天',employer:'业主王先生'}
        ];
        
        const incomeData = [
            {title:'订单收入-家庭水电维修',time:'今天 14:30',amount:'+350.00'},
            {title:'订单收入-灯具更换',time:'昨天 16:20',amount:'+180.00'},
            {title:'提现到账',time:'03-10 10:00',amount:'-2000.00'},
            {title:'订单收入-管道疏通',time:'03-08 11:30',amount:'+280.00'},
            {title:'订单收入-开关安装',time:'03-06 15:45',amount:'+120.00'}
        ];
        
        const msgData = [
            {sender:'系统通知',text:'您有一笔新的订单入账 ¥350.00',time:'10分钟前',unread:true,icon:'📢'},
            {sender:'华创科技公司',text:'师傅您好，明天9点的网络布线工作...',time:'30分钟前',unread:true,icon:'🏢'},
            {sender:'李先生',text:'请问师傅什么时候能到？',time:'1小时前',unread:true,icon:'🏠'},
            {sender:'平台公告',text:'【会员专享】3月会员礼包已到账',time:'昨天',unread:false,icon:'🎁'}
        ];
        
        const goodsData = [
            {name:'电工工具套装',price:'299',original:'399',sales:'已售 1.2万',emoji:'🔧'},
            {name:'安全防护手套',price:'29.9',original:'49',sales:'已售 8562',emoji:'🧤'},
            {name:'万能扳手套装',price:'89',original:'129',sales:'已售 5230',emoji:'🔩'},
            {name:'LED测电笔',price:'19.9',original:'35',sales:'已售 2.1万',emoji:'💡'}
        ];
        
        const vipData = [
            {name:'月度会员',price:'29',original:'59',desc:'30天有效，优先派单'},
            {name:'季度会员',price:'79',original:'159',desc:'90天有效，赠送优惠券',hot:true},
            {name:'年度会员',price:'199',original:'399',desc:'365天有效，全额返还'}
        ];
        
        const insuranceData = [
            {name:'意外伤害险',price:'199',period:'1年',desc:'保额50万，意外医疗2万'},
            {name:'工作保障险',price:'399',period:'1年',desc:'保额100万，第三者责任'},
            {name:'综合意外险',price:'599',period:'1年',desc:'保额150万，含猝死保障'}
        ];
        
        // 页面跳转
        function goPage(page){
            document.querySelectorAll('.page').forEach(p=>p.classList.remove('active'));
            document.getElementById('page-'+page).classList.add('active');
            if(page==='home') renderOrders();
            if(page==='orders') renderMyOrders();
            if(page==='wallet') renderIncome();
            if(page==='message') renderMsgs();
            if(page==='mall') renderGoods();
            if(page==='vip') renderVip();
            if(page==='insurance') renderInsurance();
        }
        
        // 渲染订单列表
        function renderOrders(){
            const html = ordersData.map(o=>`
                <div class="order-card" onclick="showOrderDetail(${o.id})">
                    <div class="order-top">
                        <span class="order-title">${o.title}</span>
                        <span class="order-status status-${o.status==='new'?'new':o.status==='ing'?'ing':o.status==='pay'?'pay':'done'}">${o.status==='new'?'待接单':o.status==='ing'?'服务中':o.status==='pay'?'待支付':'已完成'}</span>
                    </div>
                    <div class="order-middle">
                        <span>📍${o.distance}</span>
                        <span>⏰${o.time}</span>
                        <span>🕐${o.duration}</span>
                    </div>
                    <div class="order-bottom">
                        <div class="order-price">¥${o.price}<small>/次</small></div>
                        ${o.status==='new'?'<button class="order-btn" onclick="event.stopPropagation();takeOrder('+o.id+')">接单</button>':''}
                        ${o.status==='done'?'<button class="order-btn" onclick="event.stopPropagation();showToast(\'感谢您的评价！\')">评价</button>':''}
                        ${o.status==='pay'?'<button class="order-btn" onclick="event.stopPropagation();confirmPay('+o.id+')">确认收款</button>':''}
                    </div>
                </div>
            `).join('');
            document.getElementById('orderList').innerHTML = html;
        }
        
        // 渲染我的订单
        function renderMyOrders(){
            const html = ordersData.map(o=>`
                <div class="order-card" onclick="showOrderDetail(${o.id})">
                    <div class="order-top">
                        <span class="order-title">${o.title}</span>
                        <span class="order-status status-${o.status==='new'?'new':o.status==='ing'?'ing':o.status==='pay'?'pay':'done'}">${o.status==='new'?'待接单':o.status==='ing'?'服务中':o.status==='pay'?'待支付':'已完成'}</span>
                    </div>
                    <div class="order-middle">
                        <span>📍${o.distance}</span>
                        <span>⏰${o.time}</span>
                    </div>
                    <div class="order-bottom">
                        <div class="order-price">¥${o.price}</div>
                    </div>
                </div>
            `).join('');
            document.getElementById('myOrders').innerHTML = html;
        }
        
        // 渲染收入明细
        function renderIncome(){
            const html = incomeData.map(i=>`
                <div class="income-item">
                    <div class="income-left">
                        <div class="income-title">${i.title}</div>
                        <div class="income-time">${i.time}</div>
                    </div>
                    <div class="income-amount ${i.amount.startsWith('+')?'income-plus':'income-minus'}">${i.amount}</div>
                </div>
            `).join('');
            document.getElementById('incomeList').innerHTML = html;
        }
        
        // 渲染消息
        function renderMsgs(){
            const html = msgData.map(m=>`
                <div class="msg-item ${m.unread?'unread':''}">
                    <div class="msg-avatar">${m.icon}</div>
                    <div class="msg-content">
                        <div class="msg-sender">${m.sender}</div>
                        <div class="msg-text">${m.text}</div>
                    </div>
                    <div class="msg-meta">
                        <div class="msg-time">${m.time}</div>
                        ${m.unread?'<span class="msg-dot"></span>':''}
                    </div>
                </div>
            `).join('');
            document.getElementById('msgList').innerHTML = html;
        }
        
        // 渲染商品
        function renderGoods(){
            const html = goodsData.map(g=>`
                <div class="goods-card" onclick="buyGoods('${g.name}')">
                    <div class="goods-img">${g.emoji}</div>
                    <div class="goods-info">
                        <div class="goods-name">${g.name}</div>
                        <div class="goods-price">¥${g.price}<small> <s>¥${g.original}</s></small></div>
                        <div class="goods-sales">${g.sales}</div>
                    </div>
                </div>
            `).join('');
            document.getElementById('goodsList').innerHTML = html;
        }
        
        // 渲染会员
        function renderVip(){
            const html = vipData.map(v=>`
                <div class="detail-card" style="cursor:pointer" onclick="buyVip('${v.name}')">
                    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
                        <span style="font-size:16px;font-weight:600">${v.name}</span>
                        ${v.hot?'<span style="background:#ff4757;color:#fff;padding:2px 8px;border-radius:10px;font-size:11px">限时特惠</span>':''}
                    </div>
                    <div style="font-size:24px;color:#f12711;font-weight:700;margin-bottom:4px">¥${v.price}<small style="font-size:12px;color:#999;text-decoration:line-through;margin-left:8px">¥${v.original}</small></div>
                    <div style="font-size:13px;color:#666">${v.desc}</div>
                </div>
            `).join('');
            document.getElementById('vipPackages').innerHTML = html;
        }
        
        // 渲染保险
        function renderInsurance(){
            const html = insuranceData.map(i=>`
                <div class="detail-card" style="cursor:pointer" onclick="buyInsurance('${i.name}')">
                    <div style="font-size:16px;font-weight:600;margin-bottom:8px">${i.name}</div>
                    <div style="font-size:20px;color:#f12711;font-weight:700;margin-bottom:4px">¥${i.price}<small style="font-size:12px;color:#999;margin-left:4px">/${i.period}</small></div>
                    <div style="font-size:13px;color:#666">${i.desc}</div>
                    <button class="take-btn" style="margin-top:12px">立即投保</button>
                </div>
            `).join('');
            document.getElementById('insuranceList').innerHTML = html;
        }
        
        // 登录
        function sendCode(){
            showToast('验证码已发送');
        }
        function doLogin(){
            showToast('登录成功');
            setTimeout(()=>goPage('home'),800);
        }
        function logout(){
            showModal('退出登录','确定要退出当前账号吗？','<button class="action-btn btn-secondary" onclick="closeModal()">取消</button><button class="action-btn btn-primary" onclick="closeModal();goPage(\'login\')">确定退出</button>');
        }
        
        // 接单
        function takeOrder(id){
            showModal('确认接单','是否接取此订单？','<button class="action-btn btn-secondary" onclick="closeModal()">取消</button><button class="action-btn btn-primary" onclick="closeModal();confirmTake('+id+')">确认接单</button>');
        }
        function confirmTake(id){
            const order = ordersData.find(o=>o.id===id);
            if(order) order.status='ing';
            showToast('接单成功');
            renderOrders();
        }
        
        // 订单详情
        function showOrderDetail(id){
            const order = ordersData.find(o=>o.id===id);
            if(!order) return;
            showModal('订单详情',
                `<div class="detail-card"><div class="detail-card-title">服务项目</div><div class="detail-card-value">${order.title}</div></div>
                <div class="detail-card"><div class="detail-card-title">服务地址</div><div class="address-row"><span class="address-icon">📍</span><span class="address-text">北京市朝阳区建国路88号SOHO现代城A座1201室</span></div></div>
                <div class="detail-card"><div class="detail-card-title">预约时间</div><div class="detail-card-value">${order.time}</div></div>
                <div class="detail-card"><div class="detail-card-title">预估费用</div><div class="detail-card-value" style="color:#f12711">¥${order.price}</div></div>
                <div class="detail-card"><div class="detail-card-title">雇主信息</div><div class="detail-card-value">${order.employer}</div></div>
                <div class="action-btns">
                    ${order.status==='ing'?'<button class="action-btn btn-primary" onclick="closeModal();showToast(\'导航已开启\')">导航上门</button>':''}
                    <button class="action-btn btn-secondary" onclick="closeModal()">返回</button>
                </div>`);
        }
        
        // 岗位详情
        function showJobDetail(id){
            const order = ordersData.find(o=>o.id===id);
            showOrderDetail(id);
        }
        
        // 确认收款
        function confirmPay(id){
            showModal('确认收款','确认已收到雇主付款？','<button class="action-btn btn-secondary" onclick="closeModal()">取消</button><button class="action-btn btn-primary" onclick="closeModal();doPay('+id+')">确认收款</button>');
        }
        function doPay(id){
            const order = ordersData.find(o=>o.id===id);
            if(order) order.status='done';
            document.getElementById('wallet-balance').textContent = (parseFloat(document.getElementById('wallet-balance').textContent.replace(',','')) + parseFloat(order.price)).toFixed(2);
            document.getElementById('stat-balance').textContent = document.getElementById('wallet-balance').textContent;
            showToast('收款成功');
            renderOrders();
        }
        
        // 提现
        function showWithdraw(){
            showModal('提现','当前可提现余额：¥'+document.getElementById('wallet-balance').textContent,'<div class="form-group"><label>提现金额</label><input type="number" class="form-input" placeholder="请输入提现金额" style="background:#fff;color:#333;border:1px solid #ddd" value="1000"></div><div class="form-group"><label>到账方式</label><div style="display:flex;gap:10px"><span style="flex:1;padding:12px;background:#667eea;color:#fff;border-radius:12px;text-align:center">微信</span><span style="flex:1;padding:12px;background:#f5f5f5;color:#666;border-radius:12px;text-align:center">支付宝</span><span style="flex:1;padding:12px;background:#f5f5f5;color:#666;border-radius:12px;text-align:center">银行卡</span></div></div><div class="action-btns" style="margin-top:16px"><button class="action-btn btn-primary" onclick="closeModal();doWithdraw()">确认提现</button></div>');
        }
        function doWithdraw(){
            showToast('提现申请已提交');
        }
        
        // 充值
        function showRecharge(){
            showModal('充值','选择充值金额','<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px"><span style="padding:16px;text-align:center;background:#f5f5f5;border-radius:12px;cursor:pointer" onclick="this.style.background=\'#667eea\';this.style.color=\'#fff\'">¥100</span><span style="padding:16px;text-align:center;background:#f5f5f5;border-radius:12px;cursor:pointer" onclick="this.style.background=\'#667eea\';this.style.color=\'#fff\'">¥200</span><span style="padding:16px;text-align:center;background:#667eea;color:#fff;border-radius:12px;cursor:pointer" onclick="this.style.background=\'#667eea\';this.style.color=\'#fff\'">¥500</span></div><button class="action-btn btn-primary" onclick="closeModal();showToast(\'充值成功\')">立即充值</button>');
        }
        
        // 购买商品
        function buyGoods(name){
            showModal('购买确认','确定购买 '+name+' 吗？','<button class="action-btn btn-secondary" onclick="closeModal()">取消</button><button class="action-btn btn-primary" onclick="closeModal();showToast(\'下单成功\')">确认购买</button>');
        }
        
        // 购买会员
        function buyVip(name){
            showModal('开通会员','确定开通 '+name+' 吗？','<button class="action-btn btn-secondary" onclick="closeModal()">取消</button><button class="action-btn btn-primary" onclick="closeModal();showToast(\'开通成功\')">确认开通</button>');
        }
        
        // 购买保险
        function buyInsurance(name){
            showModal('投保确认','确定购买 '+name+' 吗？','<button class="action-btn btn-secondary" onclick="closeModal()">取消</button><button class="action-btn btn-primary" onclick="closeModal();showToast(\'投保成功，保单已生效\')">确认投保</button>');
        }
        
        // 筛选订单
        function filterOrders(type,btn){
            document.querySelectorAll('#page-home .tab').forEach(t=>t.classList.remove('active'));
            btn.classList.add('active');
            let filtered = ordersData;
            if(type!=='all'){
                const map = {new:'new',ing:'ing',done:'done'};
                filtered = ordersData.filter(o=>o.status===map[type]);
            }
            const html = filtered.map(o=>`
                <div class="order-card" onclick="showOrderDetail(${o.id})">
                    <div class="order-top">
                        <span class="order-title">${o.title}</span>
                        <span class="order-status status-${o.status==='new'?'new':o.status==='ing'?'ing':o.status==='pay'?'pay':'done'}">${o.status==='new'?'待接单':o.status==='ing'?'服务中':o.status==='pay'?'待支付':'已完成'}</span>
                    </div>
                    <div class="order-middle">
                        <span>📍${o.distance}</span>
                        <span>⏰${o.time}</span>
                        <span>🕐${o.duration}</span>
                    </div>
                    <div class="order-bottom">
                        <div class="order-price">¥${o.price}<small>/次</small></div>
                        ${o.status==='new'?'<button class="order-btn" onclick="event.stopPropagation();takeOrder('+o.id+')">接单</button>':''}
                        ${o.status==='done'?'<button class="order-btn" onclick="event.stopPropagation();showToast(\'感谢您的评价！\')">评价</button>':''}
                        ${o.status==='pay'?'<button class="order-btn" onclick="event.stopPropagation();confirmPay('+o.id+')">确认收款</button>':''}
                    </div>
                </div>
            `).join('');
            document.getElementById('orderList').innerHTML = html || '<div style="text-align:center;padding:40px;color:#999">暂无订单</div>';
        }
        
        // 模态框
        function showModal(title,content,buttons=''){
            document.getElementById('modalTitle').textContent = title;
            document.getElementById('modalBody').innerHTML = content + (buttons?'<div class="action-btns">'+buttons+'</div>':'');
            document.getElementById('modal').classList.add('active');
        }
        function closeModal(){
            document.getElementById('modal').classList.remove('active');
        }
        
        // Toast
        function showToast(msg){
            const toast = document.getElementById('toast');
            toast.textContent = msg;
            toast.classList.add('show');
            setTimeout(()=>toast.classList.remove('show'),2000);
        }
        
        // 初始化
        renderOrders();
    </script>
</body>
</html>