中科集团HTML托管
返回管理
编辑页面
页面标题
有效期
7天
30天
90天
修改后将从当前时间重新计算过期时间
CSS文件（可选）
JS文件（可选）
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:'PingFang SC','Microsoft YaHei',sans-serif;background:#f5f6fa;min-height:100vh} /* 顶部导航 */ .top-bar{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:12px 24px;display:flex;justify-content:space-between;align-items:center;position:fixed;top:0;left:0;right:0;z-index:100} .top-bar h1{font-size:18px;font-weight:600} .store-select select{background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.3);color:#fff;padding:6px 12px;border-radius:6px;font-size:13px;cursor:pointer} .user-info{display:flex;align-items:center;gap:15px} .user-info span{font-size:13px;opacity:0.9} .logout-btn{background:rgba(255,255,255,0.2);border:none;color:#fff;padding:6px 16px;border-radius:6px;cursor:pointer;font-size:13px} /* 主体布局 */ .main-container{display:flex;padding-top:56px;height:100vh} /* 左侧菜单 */ .sidebar{width:200px;background:#fff;padding:20px 0;flex-shrink:0;overflow-y:auto;box-shadow:2px 0 10px rgba(0,0,0,0.05)} .menu-section{margin-bottom:20px} .menu-title{padding:10px 20px;font-size:11px;color:#999;font-weight:600;text-transform:uppercase;letter-spacing:1px} .menu-item{display:flex;align-items:center;padding:12px 20px;color:#333;font-size:14px;cursor:pointer;transition:all 0.2s;border-left:3px solid transparent} .menu-item:hover{background:#f8f9fa;color:#667eea} .menu-item.active{background:#f0f0ff;color:#667eea;border-left-color:#667eea;font-weight:500} .menu-item .icon{margin-right:10px;font-size:16px} /* 内容区 */ .content{flex:1;padding:20px;overflow-y:auto} .module-view{height:calc(100vh - 96px)} /* ========== 通用样式 ========== */ .module-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:15px} .module-title{font-size:18px;color:#333;font-weight:600} .btn{padding:10px 20px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all 0.3s;border:none;display:inline-flex;align-items:center;gap:6px} .btn-primary{background:#667eea;color:#fff} .btn-primary:hover{background:#5a6fd6} .btn-outline{border:1px solid #ddd;background:#fff;color:#666} .btn-outline:hover{border-color:#667eea;color:#667eea} .search-bar{display:flex;gap:10px;flex-wrap:wrap;background:#fff;padding:15px;border-radius:12px;margin-bottom:20px} .search-bar input{padding:10px 15px;border:1px solid #ddd;border-radius:8px;font-size:14px;flex:1;min-width:200px} .search-bar select{padding:10px 15px;border:1px solid #ddd;border-radius:8px;font-size:14px} .data-table{width:100%;background:#fff;border-radius:12px;overflow:hidden} .data-table th{text-align:left;padding:15px;background:#f8f9fa;color:#666;font-size:12px;font-weight:600;border-bottom:2px solid #eee} .data-table td{padding:15px;border-bottom:1px solid #f0f0f0;font-size:14px} .data-table tr:hover{background:#f8f9fa} .action-btns{display:flex;gap:8px} .action-btns button{padding:5px 12px;border:none;border-radius:4px;cursor:pointer;font-size:12px} .action-btns .edit{background:#e3f2fd;color:#667eea} .action-btns .delete{background:#ffebee;color:#c62828} .level-badge{padding:3px 10px;border-radius:10px;font-size:11px} .level-badge.vip{background:linear-gradient(135deg,#ffd700,#ffb347);color:#fff} .level-badge.gold{background:linear-gradient(135deg,#f5576c,#f093fb);color:#fff} .level-badge.normal{background:#e0e0e0;color:#666} .status-badge{padding:3px 10px;border-radius:10px;font-size:11px} .status-badge.online{background:#e8f5e9;color:#2e7d32} .status-badge.offline{background:#e0e0e0;color:#999} /* ========== 收银台界面 ========== */ .cashier-container{display:grid;grid-template-columns:1fr 380px;gap:20px;height:calc(100vh - 96px)} .cashier-left{background:#fff;border-radius:12px;padding:20px;display:flex;flex-direction:column} .cashier-tabs{display:flex;gap:10px;margin-bottom:20px;border-bottom:2px solid #eee;padding-bottom:10px} .cashier-tab{padding:10px 20px;cursor:pointer;font-size:14px;color:#666;border-radius:8px;transition:all 0.2s} .cashier-tab:hover{background:#f0f0ff} .cashier-tab.active{background:#667eea;color:#fff} .quick-btn{padding:8px 16px;background:#f8f9fa;border:1px solid #ddd;border-radius:20px;font-size:12px;cursor:pointer;transition:all 0.2s} .quick-btn:hover,.quick-btn.active{background:#667eea;color:#fff;border-color:#667eea} .project-item{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid #f0f0f0;cursor:pointer;transition:background 0.2s} .project-item:hover{background:#f8f9fa} .project-item.selected{background:#f0f0ff;border-left:3px solid #667eea} .project-info h4{font-size:14px;color:#333;margin-bottom:4px} .project-info span{font-size:12px;color:#999} .project-price{font-size:16px;font-weight:600;color:#667eea} .selected-items{margin-top:20px;flex:1;overflow-y:auto;max-height:300px} .selected-item{display:flex;justify-content:space-between;align-items:center;padding:12px;background:#f8f9fa;border-radius:8px;margin-bottom:10px} .qty-btn{width:28px;height:28px;border-radius:50%;border:1px solid #ddd;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center} .qty-btn:hover{background:#667eea;color:#fff;border-color:#667eea} .remove-btn{color:#f5576c;cursor:pointer} .cashier-right{background:#fff;border-radius:12px;padding:20px;display:flex;flex-direction:column} .member-info{background:#f8f9fa;border-radius:12px;padding:15px;margin-bottom:20px} .member-info h4{display:flex;align-items:center;gap:8px;font-size:14px;color:#333;margin-bottom:10px} .member-info .vip{background:linear-gradient(135deg,#ffd700,#ffb347);padding:2px 8px;border-radius:10px;font-size:11px;color:#fff} .settle-info{background:#f8f9fa;border-radius:12px;padding:15px;margin-bottom:20px} .settle-row{display:flex;justify-content:space-between;padding:8px 0;font-size:14px} .settle-row.total{border-top:2px solid #ddd;margin-top:10px;padding-top:15px;font-size:16px;font-weight:600} .settle-row .price{color:#667eea} .settle-row.discount .price{color:#43e97b} .pay-method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:15px} .pay-btn{padding:15px 10px;border:2px solid #eee;border-radius:10px;text-align:center;cursor:pointer;transition:all 0.2s} .pay-btn:hover{border-color:#667eea} .pay-btn.active{border-color:#667eea;background:#f0f0ff} .pay-btn .icon{font-size:24px;margin-bottom:5px} .pay-btn .text{font-size:12px;color:#333} .pay-btn-submit{flex:1;padding:15px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer} .clear-btn{padding:15px 20px;background:#fff;border:1px solid #ddd;border-radius:10px;cursor:pointer} /* ========== 会员充值 ========== */ .recharge-container{display:grid;grid-template-columns:1fr 400px;gap:20px;height:calc(100vh - 96px)} .recharge-left,.recharge-right{background:#fff;border-radius:12px;padding:24px} .recharge-title{font-size:18px;color:#333;margin-bottom:20px;padding-bottom:15px;border-bottom:2px solid #f0f0f0} .form-group{margin-bottom:15px} .form-group label{display:block;font-size:13px;color:#666;margin-bottom:8px} .form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 15px;border:1px solid #ddd;border-radius:8px;font-size:14px} .form-group textarea{min-height:80px;resize:vertical} .plan-item{display:flex;justify-content:space-between;align-items:center;padding:15px;border:2px solid #eee;border-radius:10px;margin-bottom:10px;cursor:pointer;transition:all 0.2s} .plan-item:hover{border-color:#667eea} .plan-item.selected{border-color:#667eea;background:#f0f0ff} .plan-item .amount{font-size:18px;font-weight:600;color:#667eea} .plan-item .gift{font-size:12px;color:#43e97b} .recharge-summary{background:#f8f9fa;border-radius:12px;padding:20px;margin-top:20px} .summary-row{display:flex;justify-content:space-between;padding:8px 0;font-size:14px} .summary-row.total{border-top:2px solid #ddd;margin-top:10px;padding-top:15px;font-size:16px;font-weight:600} .recharge-btn{padding:15px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;width:100%;margin-top:20px} /* ========== 会员管理 ========== */ .member-grid{display:grid;grid-template-columns:1fr 320px;gap:20px;height:calc(100vh - 96px)} .member-list{background:#fff;border-radius:12px;padding:20px} .member-table .avatar{width:40px;height:40px;border-radius:50%;background:#667eea;color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px} .member-detail{background:#fff;border-radius:12px;padding:20px} .detail-header{display:flex;align-items:center;gap:15px;padding-bottom:20px;border-bottom:2px solid #f0f0f0;margin-bottom:20px} .detail-avatar{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px} .detail-card{background:#f8f9fa;border-radius:10px;padding:15px;margin-bottom:15px} .detail-card h4{font-size:12px;color:#999;margin-bottom:10px} .detail-card .value{font-size:24px;font-weight:600;color:#667eea} .detail-tabs{display:flex;gap:10px;margin-bottom:15px} .detail-tab{padding:8px 15px;background:#f8f9fa;border-radius:20px;font-size:12px;cursor:pointer} .detail-tab.active{background:#667eea;color:#fff} .record-item{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #f0f0f0} .record-item:last-child{border-bottom:none} /* ========== 项目管理 ========== */ .project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:15px;margin-bottom:20px} .category-card{background:#fff;border-radius:12px;padding:20px;cursor:pointer;transition:all 0.3s;border-left:4px solid #667eea} .category-card:hover{transform:translateY(-3px);box-shadow:0 4px 15px rgba(0,0,0,0.1)} .category-card h4{font-size:15px;color:#333;margin-bottom:5px} .category-card span{font-size:12px;color:#999} .category-card .count{font-size:24px;font-weight:700;color:#667eea;margin-top:10px} .project-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:15px} .tag{padding:6px 12px;background:#f0f0ff;color:#667eea;border-radius:20px;font-size:12px;cursor:pointer;border:none} .tag.active{background:#667eea;color:#fff} /* ========== 员工管理 ========== */ .staff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-bottom:20px} .staff-card{background:#fff;border-radius:12px;padding:20px;display:flex;gap:15px;transition:all 0.3s} .staff-card:hover{transform:translateY(-3px);box-shadow:0 4px 15px rgba(0,0,0,0.1)} .staff-avatar{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0} .staff-info{flex:1} .staff-info h4{font-size:16px;color:#333;margin-bottom:5px} .staff-info p{font-size:12px;color:#999;margin-bottom:8px} .staff-tags{display:flex;gap:5px;flex-wrap:wrap} .staff-tag{padding:2px 8px;background:#f0f0ff;color:#667eea;border-radius:10px;font-size:11px} .staff-stats{display:flex;gap:15px;margin-top:10px;padding-top:10px;border-top:1px solid #f0f0f0} .staff-stat{text-align:center} .staff-stat .val{font-size:18px;font-weight:600;color:#667eea} .staff-stat .lab{font-size:11px;color:#999} .schedule-grid{display:grid;grid-template-columns:100px repeat(7,1fr);gap:1px;background:#eee;border-radius:12px;overflow:hidden} .schedule-header,.schedule-cell{padding:12px 8px;font-size:12px;text-align:center} .schedule-header{background:#667eea;color:#fff;font-weight:500} .schedule-cell{background:#fff;min-height:60px} .schedule-cell .time{font-size:11px;color:#999} .shift{display:inline-block;padding:4px 8px;border-radius:4px;font-size:11px;margin:2px 0} .shift.morning{background:#c8e6c9;color:#2e7d32} .shift.afternoon{background:#fff3e0;color:#ef6c00} .shift.off{background:#f5f5f5;color:#999} /* ========== 门店设置 ========== */ .store-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:20px} .store-card{background:#fff;border-radius:12px;padding:24px;position:relative} .store-card .store-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px} .store-card h4{font-size:18px;color:#333} .store-card .store-status{width:10px;height:10px;border-radius:50%;background:#43e97b} .store-card .info-item{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:14px;color:#666} .store-card .info-item .icon{color:#667eea} .store-actions{position:absolute;top:20px;right:20px;display:flex;gap:8px} /* ========== 营业报表 ========== */ .report-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:20px} .report-card{background:#fff;border-radius:12px;padding:20px;position:relative;overflow:hidden} .report-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px} .report-card.sales::before{background:#667eea} .report-card.orders::before{background:#f5576c} .report-card.members::before{background:#43e97b} .report-card.recharge::before{background:#ffa726} .report-card .value{font-size:28px;font-weight:700;color:#333;margin-bottom:5px} .report-card .label{font-size:13px;color:#999;margin-bottom:10px} .report-card .trend{font-size:12px;padding:4px 10px;border-radius:10px;display:inline-block} .report-card .trend.up{background:#e8f5e9;color:#2e7d32} .report-card .trend.down{background:#ffebee;color:#c62828} .report-tabs{display:flex;gap:10px;margin-bottom:20px} .report-tab{padding:10px 20px;background:#fff;border-radius:8px;cursor:pointer;font-size:14px} .report-tab.active{background:#667eea;color:#fff} .chart-area{display:grid;grid-template-columns:2fr 1fr;gap:20px} .chart-card{background:#fff;border-radius:12px;padding:20px} .chart-card h4{font-size:14px;color:#333;margin-bottom:20px} .chart-placeholder{height:300px;background:#f8f9fa;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#ccc;font-size:14px} /* ========== 数据看板 ========== */ .dashboard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:20px} .dashboard-card{background:#fff;border-radius:12px;padding:20px;position:relative;overflow:hidden} .dashboard-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px} .dashboard-card.today::before{background:linear-gradient(90deg,#667eea,#764ba2)} .dashboard-card.member::before{background:linear-gradient(90deg,#f5576c,#f093fb)} .dashboard-card.recharge::before{background:linear-gradient(90deg,#43e97b,#38f9d7)} .dashboard-card.order::before{background:linear-gradient(90deg,#ffa726,#ff9800)} .dashboard-card .icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:15px} .dashboard-card.today .icon{background:#f0f0ff;color:#667eea} .dashboard-card.member .icon{background:#fff0f0;color:#f5576c} .dashboard-card.recharge .icon{background:#f0fff0;color:#43e97b} .dashboard-card.order .icon{background:#fff8f0;color:#ffa726} .dashboard-card .value{font-size:28px;font-weight:700;color:#333;margin-bottom:5px} .dashboard-card .label{font-size:13px;color:#999;margin-bottom:10px} .store-indicator{display:flex;align-items:center;gap:8px} .store-dot{width:8px;height:8px;border-radius:50%;background:#43e97b} .chart-row{display:grid;grid-template-columns:2fr 1fr;gap:20px} .store-performance{background:#fff;border-radius:12px;padding:20px} .store-performance h4{margin-bottom:15px;font-size:14px;color:#333} .store-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #f0f0f0} .store-item .status{width:6px;height:6px;border-radius:50%} .store-item .status.online{background:#43e97b} .store-item .sales{font-size:14px;font-weight:600;color:#333} .store-item .count{font-size:12px;color:#999} /* ========== 弹窗 ========== */ .modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1000;align-items:center;justify-content:center} .modal.show{display:flex} .modal-content{background:#fff;border-radius:16px;padding:30px;width:90%;max-width:600px;max-height:90vh;overflow-y:auto} .modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px} .modal-header h3{font-size:18px;color:#333} .modal-close{width:36px;height:36px;border:none;background:#f5f5f5;border-radius:50%;cursor:pointer;font-size:18px} .modal-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:20px} @media(max-width:1200px){ .cashier-container,.recharge-container,.member-grid,.chart-area,.report-summary{grid-template-columns:1fr} .chart-row{grid-template-columns:1fr} } @media(max-width:900px){ .sidebar{width:60px} .menu-title,.menu-item span{display:none} .menu-item{justify-content:center} .dashboard-grid{grid-template-columns:repeat(2,1fr)} } </style> </head> <body> <!-- 顶部导航 --> <div class="top-bar"> <h1>🏪 美业会员系统 - 多店版</h1> <div class="store-select"> <div class="store-indicator"> <span class="store-dot"></span> <select id="storeSelect"> <option value="all">全部门店汇总</option> <option value="1">旗舰店</option> <option value="2">二店(万达店)</option> <option value="3">三店(城西店)</option> </select> </div> </div> <div class="user-info"> <span>当前用户: 管理员</span> <button class="logout-btn">退出登录</button> </div> </div> <div class="main-container"> <!-- 左侧菜单 --> <nav class="sidebar"> <div class="menu-section"> <div class="menu-title">核心功能</div> <div class="menu-item active" onclick="showModule('cashier')"> <span class="icon">💰</span><span>收银台</span> </div> <div class="menu-item" onclick="showModule('recharge')"> <span class="icon">💳</span><span>会员充值</span> </div> <div class="menu-item" onclick="showModule('member')"> <span class="icon">👥</span><span>会员管理</span> </div> </div> <div class="menu-section"> <div class="menu-title">门店管理</div> <div class="menu-item" onclick="showModule('dashboard')"> <span class="icon">📊</span><span>数据看板</span> </div> <div class="menu-item" onclick="showModule('project')"> <span class="icon">🛠️</span><span>项目管理</span> </div> <div class="menu-item" onclick="showModule('staff')"> <span class="icon">👨💼</span><span>员工管理</span> </div> </div> <div class="menu-section"> <div class="menu-title">系统设置</div> <div class="menu-item" onclick="showModule('store')"> <span class="icon">🏪</span><span>门店设置</span> </div> <div class="menu-item" onclick="showModule('report')"> <span class="icon">📈</span><span>营业报表</span> </div> </div> </nav> <!-- 内容区 --> <div class="content" id="contentArea"> <!-- 收银台 --> <div id="cashierModule" class="module-view"> <div class="cashier-container"> <div class="cashier-left"> <div class="cashier-tabs"> <div class="cashier-tab active" onclick="switchTab(this)">项目消费</div> <div class="cashier-tab" onclick="switchTab(this)">商品销售</div> <div class="cashier-tab" onclick="switchTab(this)">套餐购买</div> </div> <div class="search-bar" style="background:transparent;padding:0 0 15px 0"> <input type="text" id="memberSearch" placeholder="输入手机号/姓名搜索会员..."> <button class="btn btn-outline" onclick="openMemberSelect()">选择会员</button> </div> <div class="quick-add" style="margin-bottom:15px"> <span style="font-size:12px;color:#999;margin-right:10px;">快捷添加:</span> <button class="quick-btn active" onclick="addQuickProject(this,'深层清洁面部护理',298)">深层清洁</button> <button class="quick-btn" onclick="addQuickProject(this,'补水精华导入',218)">补水导入</button> <button class="quick-btn" onclick="addQuickProject(this,'肩颈放松按摩',168)">肩颈按摩</button> <button class="quick-btn" onclick="addQuickProject(this,'全身经络疏通',428)">经络疏通</button> </div> <div style="flex:1;overflow-y:auto"> <div class="project-item" onclick="selectProject(this)"> <div class="project-info"> <h4>深层清洁面部护理</h4> <span>面部护理 | 约60分钟 | 技师: 小明</span> </div> <div class="project-price">¥298</div> </div> <div class="project-item" onclick="selectProject(this)"> <div class="project-info"> <h4>补水精华导入</h4> <span>面部护理 | 约45分钟 | 技师: 小红</span> </div> <div class="project-price">¥218</div> </div> <div class="project-item" onclick="selectProject(this)"> <div class="project-info"> <h4>全身经络疏通</h4> <span>身体养生 | 约90分钟 | 技师: 小华</span> </div> <div class="project-price">¥428</div> </div> <div class="project-item" onclick="selectProject(this)"> <div class="project-info"> <h4>肩颈放松按摩</h4> <span>身体养生 | 约40分钟 | 技师: 小华</span> </div> <div class="project-price">¥168</div> </div> <div class="project-item" onclick="selectProject(this)"> <div class="project-info"> <h4>日式美睫</h4> <span>美甲美睫 | 约45分钟 | 技师: 小红</span> </div> <div class="project-price">¥128</div> </div> </div> <div class="selected-items" id="selectedItems"> <p style="text-align:center;color:#999;padding:20px;font-size:12px">点击左侧项目添加到此处</p> </div> </div> <div class="cashier-right"> <div class="member-info" id="memberInfo"> <h4>👤 当前顾客 <span class="vip">散客</span></h4> <p>点击左侧"选择会员"或搜索会员信息</p> </div> <div style="margin-bottom:20px"> <label style="display:block;font-size:13px;color:#666;margin-bottom:8px">服务技师</label> <select style="width:100%;padding:10px;border:1px solid #ddd;border-radius:8px;font-size:14px"> <option>请选择技师</option> <option>小明 [面部护理]</option> <option>小红 [面部护理/美甲美睫]</option> <option>小华 [身体养生]</option> </select> </div> <div class="settle-info"> <div class="settle-row"><span>原价合计</span><span class="price" id="originalPrice">¥0</span></div> <div class="settle-row discount"><span>会员折扣</span><span class="price" id="discount">-¥0</span></div> <div class="settle-row"><span>已选项目</span><span class="price" id="itemCount">0项</span></div> <div class="settle-row total"><span>应付金额</span><span class="price" id="totalPrice">¥0</span></div> </div> <div style="margin-bottom:20px"> <label style="display:block;font-size:13px;color:#666;margin-bottom:10px">支付方式</label> <div class="pay-method-grid"> <div class="pay-btn active" onclick="selectPayMethod(this)"><div class="icon">💳</div><div class="text">会员卡</div></div> <div class="pay-btn" onclick="selectPayMethod(this)"><div class="icon">💚</div><div class="text">微信</div></div> <div class="pay-btn" onclick="selectPayMethod(this)"><div class="icon">💙</div><div class="text">支付宝</div></div> <div class="pay-btn" onclick="selectPayMethod(this)"><div class="icon">💵</div><div class="text">现金</div></div> </div> </div> <div style="display:flex;gap:10px;margin-top:auto"> <button class="clear-btn" onclick="clearOrder()">清空</button> <button class="pay-btn-submit" onclick="completePayment()">🎉 完成收款 ¥0</button> </div> </div> </div> </div> <!-- 会员充值 --> <div id="rechargeModule" class="module-view" style="display:none"> <div class="recharge-container"> <div class="recharge-left"> <div class="recharge-title">💳 会员充值</div> <div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:20px"> <div class="form-group"> <label>会员手机号</label> <input type="text" id="rechargePhone" placeholder="输入手机号搜索" value="138****8888"> </div> <div class="form-group"> <label>会员姓名</label> <input type="text" value="李小姐" readonly style="background:#f8f9fa"> </div> </div> <div style="background:#f8f9fa;border-radius:12px;padding:15px;margin-bottom:20px;display:flex;justify-content:space-between;align-items:center"> <div> <div style="font-size:16px;font-weight:600;color:#333;margin-bottom:5px">李小姐 <span class="level-badge vip">VIP</span></div> <div style="font-size:12px;color:#999">储值余额: ¥8,860 | 积分: 12,600</div> </div> <div style="text-align:right"> <div style="font-size:24px;font-weight:700;color:#667eea">¥8,860</div> <div style="font-size:12px;color:#999">可用余额</div> </div> </div> <h4 style="font-size:14px;color:#333;margin-bottom:15px">选择充值方案</h4> <div class="plan-item selected" onclick="selectPlan(this)"> <div class="plan-left"> <h4>💰 基础充值方案A</h4> <span>充500送50 | 约9.1折</span> </div> <div style="text-align:right"> <div class="amount">¥500</div> <div class="gift">送¥50</div> </div> </div> <div class="plan-item" onclick="selectPlan(this)"> <div class="plan-left"> <h4>💰 基础充值方案B</h4> <span>充1000送150 | 约8.7折</span> </div> <div style="text-align:right"> <div class="amount">¥1,000</div> <div class="gift">送¥150</div> </div> </div> <div class="plan-item" onclick="selectPlan(this)"> <div class="plan-left"> <h4>🎁 限时活动(6月底截止)</h4> <span>充1000送300 | 限时特惠</span> </div> <div style="text-align:right"> <div class="amount">¥1,000</div> <div class="gift">送¥300</div> </div> </div> <div class="plan-item" onclick="selectPlan(this)"> <div class="plan-left"> <h4>🌟 VIP专属方案</h4> <span>充3000送900 | VIP专属</span> </div> <div style="text-align:right"> <div class="amount">¥3,000</div> <div class="gift">送¥900</div> </div> </div> </div> <div class="recharge-right"> <h4 style="font-size:16px;color:#333;margin-bottom:20px">支付信息</h4> <div class="form-group"> <label>选择支付方式</label> <div class="pay-method-grid" style="grid-template-columns:repeat(2,1fr)"> <div class="pay-btn active" onclick="selectPayMethod(this)"><div class="icon">💚</div><div class="text">微信支付</div></div> <div class="pay-btn" onclick="selectPayMethod(this)"><div class="icon">💙</div><div class="text">支付宝</div></div> <div class="pay-btn" onclick="selectPayMethod(this)"><div class="icon">💵</div><div class="text">现金</div></div> <div class="pay-btn" onclick="selectPayMethod(this)"><div class="icon">🏦</div><div class="text">银行卡</div></div> </div> </div> <div class="recharge-summary"> <h4>充值明细</h4> <div class="summary-row"><span>实充金额</span><span id="rechargeAmount">¥500</span></div> <div class="summary-row"><span>赠送金额</span><span style="color:#43e97b">+¥50</span></div> <div class="summary-row total"><span>到账合计</span><span style="color:#667eea;font-weight:600">¥550</span></div> </div> <div style="background:#f8f9fa;border-radius:12px;padding:15px;margin-top:20px"> <h4 style="font-size:12px;color:#999;margin-bottom:10px">充值后余额</h4> <div style="display:flex;align-items:baseline;gap:10px"> <span style="font-size:20px;color:#999;text-decoration:line-through">¥8,860</span> <span style="font-size:28px;font-weight:700;color:#667eea">¥9,410</span> </div> </div> <button class="recharge-btn" onclick="completeRecharge()">💳 确认充值 ¥500</button> </div> </div> </div> <!-- 会员管理 --> <div id="memberModule" class="module-view" style="display:none"> <div class="member-grid"> <div class="member-list"> <div class="module-header"> <h3 style="font-size:16px;color:#333">会员列表</h3> <div style="display:flex;gap:10px"> <input type="text" placeholder="搜索会员..." style="padding:8px 15px;border:1px solid #ddd;border-radius:6px;width:180px"> <button class="btn btn-primary" onclick="openModal('新增会员')">+ 新增会员</button> </div> </div> <table class="data-table"> <thead><tr><th>会员信息</th><th>手机号</th><th>等级</th><th>储值余额</th><th>最近到店</th><th>操作</th></tr></thead> <tbody> <tr onclick="showMemberDetail('李小姐')"> <td><div style="display:flex;align-items:center;gap:10px"><div class="avatar">李</div><div><div style="font-size:14px;color:#333">李小姐</div><div style="font-size:12px;color:#999">138****8888</div></div></div></td> <td>138****8888</td><td><span class="level-badge vip">VIP</span></td> <td style="font-weight:600;color:#667eea">¥8,860</td><td>2026-06-02</td> <td><div class="action-btns"><button class="edit" onclick="event.stopPropagation();goToRecharge()">充值</button><button class="edit" onclick="event.stopPropagation()">编辑</button></div></td> </tr> <tr onclick="showMemberDetail('王女士')"> <td><div style="display:flex;align-items:center;gap:10px"><div class="avatar" style="background:#f5576c">王</div><div><div style="font-size:14px;color:#333">王女士</div><div style="font-size:12px;color:#999">139****6666</div></div></div></td> <td>139****6666</td><td><span class="level-badge gold">金卡</span></td> <td style="font-weight:600;color:#667eea">¥3,200</td><td>2026-06-01</td> <td><div class="action-btns"><button class="edit" onclick="event.stopPropagation();goToRecharge()">充值</button><button class="edit" onclick="event.stopPropagation()">编辑</button></div></td> </tr> <tr onclick="showMemberDetail('张帅哥')"> <td><div style="display:flex;align-items:center;gap:10px"><div class="avatar" style="background:#43e97b">张</div><div><div style="font-size:14px;color:#333">张帅哥</div><div style="font-size:12px;color:#999">136****1234</div></div></div></td> <td>136****1234</td><td><span class="level-badge normal">普通</span></td> <td style="font-weight:600;color:#667eea">¥500</td><td>2026-05-28</td> <td><div class="action-btns"><button class="edit" onclick="event.stopPropagation();goToRecharge()">充值</button><button class="edit" onclick="event.stopPropagation()">编辑</button></div></td> </tr> </tbody> </table> </div> <div class="member-detail"> <div class="detail-header"> <div class="detail-avatar">李</div> <div><h3 style="font-size:18px;color:#333">李小姐</h3><p style="font-size:12px;color:#999">VIP会员 | 138****8888</p></div> </div> <div style="display:grid;grid-template-columns:1fr 1fr;gap:15px"> <div class="detail-card"><h4>储值余额</h4><div class="value">¥8,860</div><div style="font-size:12px;color:#666">赠送余额: ¥860</div></div> <div class="detail-card"><h4>积分</h4><div class="value" style="color:#43e97b">12,600</div><div style="font-size:12px;color:#666">可抵 ¥126</div></div> <div class="detail-card"><h4>累计消费</h4><div class="value" style="color:#f5576c">¥56,800</div><div style="font-size:12px;color:#666">共28次</div></div> <div class="detail-card"><h4>会员等级</h4><div class="value" style="font-size:18px">VIP</div><div style="font-size:12px;color:#666">7折 | 3倍积分</div></div> </div> <div class="detail-tabs"> <div class="detail-tab active" onclick="switchDetailTab(this)">消费记录</div> <div class="detail-tab" onclick="switchDetailTab(this)">充值记录</div> <div class="detail-tab" onclick="switchDetailTab(this)">跟进记录</div> </div> <div class="record-list" id="recordList"> <div class="record-item"><div><div style="font-size:14px;color:#333">深层清洁+补水导入</div><div style="font-size:12px;color:#999">2026-06-02 14:30 | 旗舰店</div></div><div style="text-align:right"><div style="font-size:14px;font-weight:600;color:#667eea">¥361</div><div style="font-size:11px;color:#43e97b">VIP7折</div></div></div> <div class="record-item"><div><div style="font-size:14px;color:#333">全身经络疏通</div><div style="font-size:12px;color:#999">2026-05-28 10:15 | 旗舰店</div></div><div style="text-align:right"><div style="font-size:14px;font-weight:600;color:#667eea">¥299</div><div style="font-size:11px;color:#43e97b">VIP7折</div></div></div> </div> </div> </div> </div> <!-- 项目管理 --> <div id="projectModule" class="module-view" style="display:none"> <div class="module-header"> <h2 class="module-title">🛠️ 项目管理</h2> <div style="display:flex;gap:10px"> <button class="btn btn-outline" onclick="openModal('新增分类')">+ 新增分类</button> <button class="btn btn-primary" onclick="openModal('新增项目')">+ 新增项目</button> </div> </div> <div class="project-tags"> <button class="tag active" onclick="filterProject(this,'all')">全部</button> <button class="tag" onclick="filterProject(this,'facial')">面部护理</button> <button class="tag" onclick="filterProject(this,'body')">身体养生</button> <button class="tag" onclick="filterProject(this,'nail')">美甲美睫</button> <button class="tag" onclick="filterProject(this,'hair')">美发</button> </div> <div class="project-grid"> <div class="category-card" style="border-left-color:#667eea" onclick="filterProjectByCategory('facial')"> <h4>👩 面部护理</h4><span>美容SPA核心项目</span><div class="count">23个</div> </div> <div class="category-card" style="border-left-color:#43e97b" onclick="filterProjectByCategory('body')"> <h4>💆 身体养生</h4><span>经络按摩理疗</span><div class="count">18个</div> </div> <div class="category-card" style="border-left-color:#f5576c" onclick="filterProjectByCategory('nail')"> <h4>💅 美甲美睫</h4><span>时尚美妆项目</span><div class="count">15个</div> </div> <div class="category-card" style="border-left-color:#ffa726" onclick="filterProjectByCategory('hair')"> <h4>✂️ 美发造型</h4><span>发型设计与护理</span><div class="count">12个</div> </div> </div> <div style="background:#fff;border-radius:12px;padding:20px"> <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:15px"> <h4 style="font-size:14px;color:#333">项目列表</h4> <input type="text" placeholder="搜索项目名称..." style="padding:8px 15px;border:1px solid #ddd;border-radius:6px;width:200px"> </div> <table class="data-table"> <thead><tr><th>编码</th><th>项目名称</th><th>分类</th><th>时长</th><th>散客价</th><th>会员价</th><th>状态</th><th>操作</th></tr></thead> <tbody> <tr> <td>P001</td><td>深层清洁面部护理</td><td>面部护理</td><td>60分钟</td><td>¥298</td><td>¥208(VIP7折)</td> <td><span class="status-badge online">上架</span></td> <td><div class="action-btns"><button class="edit" onclick="openModal('编辑项目')">编辑</button><button class="delete" onclick="deleteProject(this)">删除</button></div></td> </tr> <tr> <td>P002</td><td>补水精华导入</td><td>面部护理</td><td>45分钟</td><td>¥218</td><td>¥152(VIP7折)</td> <td><span class="status-badge online">上架</span></td> <td><div class="action-btns"><button class="edit" onclick="openModal('编辑项目')">编辑</button><button class="delete" onclick="deleteProject(this)">删除</button></div></td> </tr> <tr> <td>P003</td><td>全身经络疏通</td><td>身体养生</td><td>90分钟</td><td>¥428</td><td>¥299(VIP7折)</td> <td><span class="status-badge online">上架</span></td> <td><div class="action-btns"><button class="edit" onclick="openModal('编辑项目')">编辑</button><button class="delete" onclick="deleteProject(this)">删除</button></div></td> </tr> <tr> <td>P004</td><td>肩颈放松按摩</td><td>身体养生</td><td>40分钟</td><td>¥168</td><td>¥117(VIP7折)</td> <td><span class="status-badge online">上架</span></td> <td><div class="action-btns"><button class="edit" onclick="openModal('编辑项目')">编辑</button><button class="delete" onclick="deleteProject(this)">删除</button></div></td> </tr> <tr> <td>P005</td><td>日式美睫</td><td>美甲美睫</td><td>45分钟</td><td>¥128</td><td>¥89(VIP7折)</td> <td><span class="status-badge online">上架</span></td> <td><div class="action-btns"><button class="edit" onclick="openModal('编辑项目')">编辑</button><button class="delete" onclick="deleteProject(this)">删除</button></div></td> </tr> </tbody> </table> </div> </div> <!-- 员工管理 --> <div id="staffModule" class="module-view" style="display:none"> <div class="module-header"> <h2 class="module-title">👨💼 多店员工管理</h2> <div style="display:flex;gap:10px"> <select style="padding:8px 15px;border:1px solid #ddd;border-radius:6px"> <option>全部门店</option> <option>旗舰店</option> <option>二店(万达店)</option> <option>三店(城西店)</option> </select> <select style="padding:8px 15px;border:1px solid #ddd;border-radius:6px"> <option>全部职位</option> <option>美容师</option> <option>高级美容师</option> <option>养生技师</option> </select> <button class="btn btn-outline" onclick="openModal('批量排班')">📅 批量排班</button> <button class="btn btn-primary" onclick="openModal('新增员工')">+ 新增员工</button> </div> </div> <!-- 多店员工汇总 --> <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:20px"> <div style="background:#fff;border-radius:12px;padding:20px;text-align:center"> <div style="font-size:28px;font-weight:700;color:#667eea">19</div> <div style="font-size:13px;color:#999">在职员工</div> </div> <div style="background:#fff;border-radius:12px;padding:20px;text-align:center"> <div style="font-size:28px;font-weight:700;color:#43e97b">16</div> <div style="font-size:13px;color:#999">在职</div> </div> <div style="background:#fff;border-radius:12px;padding:20px;text-align:center"> <div style="font-size:28px;font-weight:700;color:#f5576c">3</div> <div style="font-size:13px;color:#999">请假/休息</div> </div> <div style="background:#fff;border-radius:12px;padding:20px;text-align:center"> <div style="font-size:28px;font-weight:700;color:#ffa726">¥66,180</div> <div style="font-size:13px;color:#999">本月业绩汇总</div> </div> </div> <!-- 员工筛选标签 --> <div style="display:flex;gap:10px;margin-bottom:15px"> <span style="font-size:12px;color:#999;line-height:32px">快速筛选:</span> <button class="tag active" onclick="filterStaff(this,'all')">全部</button> <button class="tag" onclick="filterStaff(this,'facial')">面部护理</button> <button class="tag" onclick="filterStaff(this,'body')">身体养生</button> <button class="tag" onclick="filterStaff(this,'nail')">美甲美睫</button> </div> <div class="staff-grid"> <div class="staff-card" style="position:relative"> <div class="staff-avatar">明</div> <div class="staff-info"> <h4>小明</h4> <p>138****8888 | 美容师 | 旗舰店</p> <div class="staff-tags"><span class="staff-tag">面部护理</span><span class="staff-tag">经络疏通</span></div> <div class="staff-stats"> <div class="staff-stat"><div class="val">86</div><div class="lab">服务次数</div></div> <div class="staff-stat"><div class="val">¥25,680</div><div class="lab">本月业绩</div></div> </div> </div> <span class="status-badge online" style="position:absolute;top:15px;right:15px">在职</span> </div> <div class="staff-card" style="position:relative"> <div class="staff-avatar" style="background:linear-gradient(135deg,#f5576c,#f093fb)">红</div> <div class="staff-info"> <h4>小红</h4> <p>139****6666 | 高级美容师 | 旗舰店</p> <div class="staff-tags"><span class="staff-tag">面部护理</span><span class="staff-tag">美甲美睫</span></div> <div class="staff-stats"> <div class="staff-stat"><div class="val">72</div><div class="lab">服务次数</div></div> <div class="staff-stat"><div class="val">¥21,600</div><div class="lab">本月业绩</div></div> </div> </div> <span class="status-badge online" style="position:absolute;top:15px;right:15px">在职</span> </div> <div class="staff-card" style="position:relative"> <div class="staff-avatar" style="background:linear-gradient(135deg,#43e97b,#38f9d7)">华</div> <div class="staff-info"> <h4>小华</h4> <p>137****1234 | 养生技师 | 二店(万达店)</p> <div class="staff-tags"><span class="staff-tag">身体养生</span><span class="staff-tag">推拿按摩</span></div> <div class="staff-stats"> <div class="staff-stat"><div class="val">56</div><div class="lab">服务次数</div></div> <div class="staff-stat"><div class="val">¥18,900</div><div class="lab">本月业绩</div></div> </div> </div> <span class="status-badge online" style="position:absolute;top:15px;right:15px">在职</span> </div> <div class="staff-card" style="position:relative"> <div class="staff-avatar" style="background:linear-gradient(135deg,#ffa726,#ff9800)">丽</div> <div class="staff-info"> <h4>小丽</h4> <p>136****1111 | 美甲师 | 二店(万达店)</p> <div class="staff-tags"><span class="staff-tag">美甲美睫</span><span class="staff-tag">手足护理</span></div> <div class="staff-stats"> <div class="staff-stat"><div class="val">45</div><div class="lab">服务次数</div></div> <div class="staff-stat"><div class="val">¥12,800</div><div class="lab">本月业绩</div></div> </div> </div> <span class="status-badge" style="position:absolute;top:15px;right:15px;background:#fff3e0;color:#ef6c00">请假中</span> </div> <div class="staff-card" style="position:relative"> <div class="staff-avatar" style="background:linear-gradient(135deg,#667eea,#764ba2)">强</div> <div class="staff-info"> <h4>小强</h4> <p>135****2222 | 理发师 | 三店(城西店)</p> <div class="staff-tags"><span class="staff-tag">美发</span><span class="staff-tag">染发</span></div> <div class="staff-stats"> <div class="staff-stat"><div class="val">68</div><div class="lab">服务次数</div></div> <div class="staff-stat"><div class="val">¥15,600</div><div class="lab">本月业绩</div></div> </div> </div> <span class="status-badge online" style="position:absolute;top:15px;right:15px">在职</span> </div> <div class="staff-card" style="position:relative"> <div class="staff-avatar" style="background:linear-gradient(135deg,#f5576c,#f093fb)">静</div> <div class="staff-info"> <h4>静静</h4> <p>134****3333 | 美容师 | 三店(城西店)</p> <div class="staff-tags"><span class="staff-tag">面部护理</span><span class="staff-tag">SPA</span></div> <div class="staff-stats"> <div class="staff-stat"><div class="val">38</div><div class="lab">服务次数</div></div> <div class="staff-stat"><div class="val">¥9,200</div><div class="lab">本月业绩</div></div> </div> </div> <span class="status-badge online" style="position:absolute;top:15px;right:15px">在职</span> </div> </div> <div style="background:#fff;border-radius:12px;padding:20px;margin-top:20px"> <div class="module-header" style="margin-bottom:15px"> <h4 style="font-size:14px;color:#333">📅 跨店排班表 - 全部门店</h4> <div style="display:flex;gap:10px;align-items:center"> <select style="padding:6px 12px;border:1px solid #ddd;border-radius:6px;font-size:12px"> <option>全部门店</option> <option>旗舰店</option> <option>二店(万达店)</option> <option>三店(城西店)</option> </select> <span style="font-size:12px;color:#999">◀</span> <span style="font-size:14px;color:#333;font-weight:500">2026年6月第1周 (6月1日-6月7日)</span> <span style="font-size:12px;color:#999">▶</span> </div> </div> <div class="schedule-grid"> <div class="schedule-header">员工/门店</div> <div class="schedule-header">周一 6/1</div> <div class="schedule-header">周二 6/2</div> <div class="schedule-header">周三 6/3</div> <div class="schedule-header">周四 6/4</div> <div class="schedule-header">周五 6/5</div> <div class="schedule-header">周六 6/6</div> <div class="schedule-header">周日 6/7</div> <div class="schedule-cell"><b>小明</b><br><span style="font-size:10px;color:#667eea">旗舰店</span></div> <div class="schedule-cell"><span class="shift morning">早班 9-18</span></div> <div class="schedule-cell"><span class="shift morning">早班 9-18</span></div> <div class="schedule-cell"><span class="shift afternoon">晚班 14-22</span></div> <div class="schedule-cell"><span class="shift morning">早班 9-18</span></div> <div class="schedule-cell"><span class="shift morning">早班 9-18</span></div> <div class="schedule-cell"><span class="shift afternoon">晚班 14-22</span></div> <div class="schedule-cell"><span class="shift off">休息</span></div> <div class="schedule-cell"><b>小红</b><br><span style="font-size:10px;color:#667eea">旗舰店</span></div> <div class="schedule-cell"><span class="shift morning">早班 9-18</span></div> <div class="schedule-cell"><span class="shift off">休息</span></div> <div class="schedule-cell"><span class="shift morning">早班 9-18</span></div> <div class="schedule-cell"><span class="shift morning">早班 9-18</span></div> <div class="schedule-cell"><span class="shift afternoon">晚班 14-22</span></div> <div class="schedule-cell"><span class="shift morning">早班 9-18</span></div> <div class="schedule-cell"><span class="shift afternoon">晚班 14-22</span></div> <div class="schedule-cell"><b>小华</b><br><span style="font-size:10px;color:#43e97b">二店</span></div> <div class="schedule-cell"><span class="shift off">休息</span></div> <div class="schedule-cell"><span class="shift morning">早班 9-18</span></div> <div class="schedule-cell"><span class="shift morning">早班 9-18</span></div> <div class="schedule-cell"><span class="shift afternoon">晚班 14-22</span></div> <div class="schedule-cell"><span class="shift off">休息</span></div> <div class="schedule-cell"><span class="shift morning">早班 9-18</span></div> <div class="schedule-cell"><span class="shift morning">早班 9-18</span></div> </div> </div> </div> <!-- 门店设置 --> <div id="storeModule" class="module-view" style="display:none"> <div class="module-header"> <h2 class="module-title">🏪 多店管理</h2> <div style="display:flex;gap:10px"> <button class="btn btn-outline" onclick="openModal('库存调拨')">🔄 库存调拨</button> <button class="btn btn-primary" onclick="openModal('新增门店')">+ 新增门店</button> </div> </div> <!-- 多店汇总卡片 --> <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:20px"> <div style="background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;padding:20px;color:#fff"> <div style="font-size:32px;font-weight:700">3</div> <div style="font-size:13px;opacity:0.9">门店总数</div> <div style="font-size:11px;opacity:0.7;margin-top:10px">● 3家营业中</div> </div> <div style="background:linear-gradient(135deg,#43e97b,#38f9d7);border-radius:12px;padding:20px;color:#fff"> <div style="font-size:32px;font-weight:700">19</div> <div style="font-size:13px;opacity:0.9">在职员工</div> <div style="font-size:11px;opacity:0.7;margin-top:10px">● 本月新增 2人</div> </div> <div style="background:linear-gradient(135deg,#f5576c,#f093fb);border-radius:12px;padding:20px;color:#fff"> <div style="font-size:32px;font-weight:700">1,286</div> <div style="font-size:13px;opacity:0.9">会员总数</div> <div style="font-size:11px;opacity:0.7;margin-top:10px">● 跨店共享</div> </div> <div style="background:linear-gradient(135deg,#ffa726,#ff9800);border-radius:12px;padding:20px;color:#fff"> <div style="font-size:32px;font-weight:700">¥286,560</div> <div style="font-size:13px;opacity:0.9">本月营业</div> <div style="font-size:11px;opacity:0.7;margin-top:10px">● 全部门店汇总</div> </div> </div> <!-- 门店列表 --> <div class="store-list"> <div class="store-card"> <div class="store-header"> <h4>🏪 旗舰店</h4> <span class="store-status" style="background:#43e97b"></span> </div> <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px"> <div class="info-item"><span class="icon">📍</span><span>北京市朝阳区XX路123号</span></div> <div class="info-item"><span class="icon">📞</span><span>010-88888888</span></div> <div class="info-item"><span class="icon">⏰</span><span>09:00-22:00</span></div> <div class="info-item"><span class="icon">👥</span><span>员工8人</span></div> <div class="info-item"><span class="icon">📊</span><span>今日: ¥8,200 (18单)</span></div> <div class="info-item"><span class="icon">📈</span><span>本月: ¥98,560</span></div> </div> <div style="display:flex;gap:8px;margin-top:15px"> <button class="btn btn-outline" style="padding:6px 12px;font-size:12px" onclick="openModal('编辑门店')">编辑</button> <button class="btn btn-outline" style="padding:6px 12px;font-size:12px" onclick="openModal('门店业绩')">业绩详情</button> <button class="btn btn-outline" style="padding:6px 12px;font-size:12px;color:#c62828" onclick="closeStore()">歇业</button> </div> </div> <div class="store-card"> <div class="store-header"> <h4>🏪 二店(万达店)</h4> <span class="store-status" style="background:#43e97b"></span> </div> <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px"> <div class="info-item"><span class="icon">📍</span><span>北京市海淀区XX街456号</span></div> <div class="info-item"><span class="icon">📞</span><span>010-66666666</span></div> <div class="info-item"><span class="icon">⏰</span><span>10:00-21:00</span></div> <div class="info-item"><span class="icon">👥</span><span>员工6人</span></div> <div class="info-item"><span class="icon">📊</span><span>今日: ¥5,600 (15单)</span></div> <div class="info-item"><span class="icon">📈</span><span>本月: ¥95,000</span></div> </div> <div style="display:flex;gap:8px;margin-top:15px"> <button class="btn btn-outline" style="padding:6px 12px;font-size:12px" onclick="openModal('编辑门店')">编辑</button> <button class="btn btn-outline" style="padding:6px 12px;font-size:12px" onclick="openModal('门店业绩')">业绩详情</button> <button class="btn btn-outline" style="padding:6px 12px;font-size:12px;color:#c62828" onclick="closeStore()">歇业</button> </div> </div> <div class="store-card"> <div class="store-header"> <h4>🏪 三店(城西店)</h4> <span class="store-status" style="background:#ffa726"></span> </div> <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px"> <div class="info-item"><span class="icon">📍</span><span>北京市昌平区XX路789号</span></div> <div class="info-item"><span class="icon">📞</span><span>010-55555555</span></div> <div class="info-item"><span class="icon">⏰</span><span>10:00-21:00</span></div> <div class="info-item"><span class="icon">👥</span><span>员工5人</span></div> <div class="info-item"><span class="icon">📊</span><span>今日: ¥4,760 (12单)</span></div> <div class="info-item"><span class="icon">📈</span><span>本月: ¥93,000</span></div> </div> <div style="display:flex;gap:8px;margin-top:15px"> <button class="btn btn-outline" style="padding:6px 12px;font-size:12px" onclick="openModal('编辑门店')">编辑</button> <button class="btn btn-outline" style="padding:6px 12px;font-size:12px" onclick="openModal('门店业绩')">业绩详情</button> <button class="btn btn-outline" style="padding:6px 12px;font-size:12px;color:#c62828" onclick="closeStore()">歇业</button> </div> </div> </div> <!-- 库存调拨说明 --> <div style="background:#fff;border-radius:12px;padding:20px;margin-top:20px"> <h4 style="font-size:14px;color:#333;margin-bottom:15px">📦 库存调拨记录</h4> <table class="data-table"> <thead><tr><th>调拨单号</th><th>调出门店</th><th>调入门店</th><th>商品名称</th><th>数量</th><th>调拨时间</th><th>状态</th></tr></thead> <tbody> <tr> <td>TB202606001</td><td>旗舰店</td><td>二店(万达店)</td><td>补水精华液</td><td>10瓶</td><td>2026-06-01 10:30</td><td><span class="status-badge online">已完成</span></td> </tr> <tr> <td>TB202606002</td><td>二店(万达店)</td><td>三店(城西店)</td><td>按摩精油</td><td>5瓶</td><td>2026-06-02 14:20</td><td><span class="status-badge online">已完成</span></td> </tr> <tr> <td>TB202606003</td><td>旗舰店</td><td>三店(城西店)</td><td>面膜(10片装)</td><td>20盒</td><td>2026-06-03 09:15</td><td><span class="status-badge" style="background:#fff3e0;color:#ef6c00">待确认</span></td> </tr> </tbody> </table> </div> </div> <!-- 营业报表 --> <div id="reportModule" class="module-view" style="display:none"> <div class="module-header"> <h2 class="module-title">📈 多店营业报表</h2> <div style="display:flex;gap:10px;align-items:center"> <select style="padding:8px 15px;border:1px solid #ddd;border-radius:6px"> <option value="all">全部门店汇总</option> <option value="1">旗舰店</option> <option value="2">二店(万达店)</option> <option value="3">三店(城西店)</option> </select> <select style="padding:8px 15px;border:1px solid #ddd;border-radius:6px"> <option>2026年6月</option> <option>2026年5月</option> <option>2026年4月</option> </select> <button class="btn btn-outline">📥 导出报表</button> </div> </div> <!-- 多店汇总数据 --> <div class="report-summary"> <div class="report-card sales"> <div class="value">¥286,560</div> <div class="label">本月营业额</div> <span class="trend up">↑ 较上月 +12%</span> </div> <div class="report-card orders"> <div class="value">856</div> <div class="label">本月订单数</div> <span class="trend up">↑ 较上月 +8%</span> </div> <div class="report-card members"> <div class="value">1,286</div> <div class="label">会员总数</div> <span class="trend up">↑ 本月新增 86人</span> </div> <div class="report-card recharge"> <div class="value">¥156,800</div> <div class="label">本月充值</div> <span class="trend up">↑ 较上月 +22%</span> </div> </div> <!-- 各店业绩对比表 --> <div style="background:#fff;border-radius:12px;padding:20px;margin-bottom:20px"> <h4 style="font-size:14px;color:#333;margin-bottom:15px">🏪 各店业绩对比</h4> <table class="data-table"> <thead><tr><th>门店名称</th><th>本月营业额</th><th>环比</th><th>本月订单</th><th>客单价</th><th>本月充值</th><th>会员数</th><th>占比</th></tr></thead> <tbody> <tr style="background:#f0f0ff"> <td><b>旗舰店</b></td> <td style="font-weight:600;color:#667eea">¥98,560</td> <td><span style="color:#43e97b">↑ 15%</span></td> <td>286</td> <td>¥344</td> <td>¥58,600</td> <td>520</td> <td><div style="width:80px;height:8px;background:#eee;border-radius:4px;overflow:hidden;display:inline-block;vertical-align:middle"><div style="width:34.4%;height:100%;background:#667eea"></div></div> 34.4%</td> </tr> <tr> <td><b>二店(万达店)</b></td> <td style="font-weight:600;color:#667eea">¥95,000</td> <td><span style="color:#43e97b">↑ 10%</span></td> <td>298</td> <td>¥319</td> <td>¥52,000</td> <td>438</td> <td><div style="width:80px;height:8px;background:#eee;border-radius:4px;overflow:hidden;display:inline-block;vertical-align:middle"><div style="width:33.1%;height:100%;background:#43e97b"></div></div> 33.1%</td> </tr> <tr> <td><b>三店(城西店)</b></td> <td style="font-weight:600;color:#667eea">¥93,000</td> <td><span style="color:#c62828">↓ 5%</span></td> <td>272</td> <td>¥342</td> <td>¥46,200</td> <td>328</td> <td><div style="width:80px;height:8px;background:#eee;border-radius:4px;overflow:hidden;display:inline-block;vertical-align:middle"><div style="width:32.5%;height:100%;background:#f5576c"></div></div> 32.5%</td> </tr> </tbody> </table> </div> <div class="report-tabs"> <div class="report-tab active" onclick="switchReportTab(this,'daily')">日报表</div> <div class="report-tab" onclick="switchReportTab(this,'weekly')">周报表</div> <div class="report-tab" onclick="switchReportTab(this,'monthly')">月报表</div> <div class="report-tab" onclick="switchReportTab(this,'staff')">员工报表</div> </div> <div style="background:#fff;border-radius:12px;padding:20px;margin-bottom:20px"> <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:15px"> <h4 style="font-size:14px;color:#333">营业明细</h4> <div style="font-size:12px;color:#999">数据更新: 2026-06-03 14:30</div> </div> <table class="data-table"> <thead><tr><th>日期</th><th>营业额</th><th>订单数</th><th>客单价</th><th>会员消费</th><th>散客消费</th><th>充值金额</th></tr></thead> <tbody> <tr><td>2026-06-03</td><td>¥18,560</td><td>45</td><td>¥412</td><td>¥14,560</td><td>¥4,000</td><td>¥8,600</td></tr> <tr><td>2026-06-02</td><td>¥22,680</td><td>52</td><td>¥436</td><td>¥18,680</td><td>¥4,000</td><td>¥12,000</td></tr> <tr><td>2026-06-01</td><td>¥15,320</td><td>38</td><td>¥403</td><td>¥12,320</td><td>¥3,000</td><td>¥6,000</td></tr> <tr><td>2026-05-31</td><td>¥25,800</td><td>58</td><td>¥444</td><td>¥20,800</td><td>¥5,000</td><td>¥15,000</td></tr> <tr><td>2026-05-30</td><td>¥28,560</td><td>62</td><td>¥461</td><td>¥23,560</td><td>¥5,000</td><td>¥18,000</td></tr> </tbody> </table> </div> <div class="chart-area"> <div class="chart-card"> <h4>📈 营业趋势</h4> <div class="chart-placeholder">折线图展示区域<br>显示近30天营业额变化趋势</div> </div> <div class="chart-card"> <h4>🥧 消费类型占比</h4> <div class="chart-placeholder">饼图展示区域<br>会员/散客消费占比</div> </div> </div> </div> <!-- 数据看板 --> <div id="dashboardModule" class="module-view" style="display:none"> <div class="module-header"> <h2 class="module-title">📊 多店数据看板</h2> <div style="display:flex;gap:10px;align-items:center"> <select style="padding:8px 15px;border:1px solid #ddd;border-radius:6px"> <option value="all">全部门店汇总</option> <option value="1">旗舰店</option> <option value="2">二店(万达店)</option> <option value="3">三店(城西店)</option> </select> <span style="font-size:12px;color:#999">数据更新: 2026-06-03 16:00</span> </div> </div> <!-- 今日汇总 --> <div class="dashboard-grid"> <div class="dashboard-card today"><div class="icon">💰</div><div class="value">¥18,560</div><div class="label">今日营业额</div><span class="trend up">↑ +15%</span></div> <div class="dashboard-card member"><div class="icon">👥</div><div class="value">32</div><div class="label">今日到店</div><span class="trend up">↑ +8%</span></div> <div class="dashboard-card recharge"><div class="icon">💳</div><div class="value">¥8,600</div><div class="label">今日充值</div><span class="trend up">↑ +22%</span></div> <div class="dashboard-card order"><div class="icon">🧾</div><div class="value">45</div><div class="label">今日订单</div><span class="trend down">↓ -3%</span></div> </div> <!-- 各店实时业绩 --> <div style="background:#fff;border-radius:12px;padding:20px;margin-bottom:20px"> <h4 style="font-size:14px;color:#333;margin-bottom:15px">🏪 各店实时业绩</h4> <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px"> <div style="text-align:center;padding:20px;background:#f8f9fa;border-radius:12px"> <div style="font-size:28px;font-weight:700;color:#667eea">¥8,200</div> <div style="font-size:13px;color:#333;margin-top:5px">旗舰店</div> <div style="font-size:11px;color:#999;margin-top:5px">18单 | 8人服务</div> <div style="margin-top:10px"><span style="background:#c8e6c9;color:#2e7d32;padding:3px 10px;border-radius:10px;font-size:11px">营业中</span></div> </div> <div style="text-align:center;padding:20px;background:#f8f9fa;border-radius:12px"> <div style="font-size:28px;font-weight:700;color:#43e97b">¥5,600</div> <div style="font-size:13px;color:#333;margin-top:5px">二店(万达店)</div> <div style="font-size:11px;color:#999;margin-top:5px">15单 | 5人服务</div> <div style="margin-top:10px"><span style="background:#c8e6c9;color:#2e7d32;padding:3px 10px;border-radius:10px;font-size:11px">营业中</span></div> </div> <div style="text-align:center;padding:20px;background:#f8f9fa;border-radius:12px"> <div style="font-size:28px;font-weight:700;color:#f5576c">¥4,760</div> <div style="font-size:13px;color:#333;margin-top:5px">三店(城西店)</div> <div style="font-size:11px;color:#999;margin-top:5px">12单 | 4人服务</div> <div style="margin-top:10px"><span style="background:#fff3e0;color:#ef6c00;padding:3px 10px;border-radius:10px;font-size:11px">客流较少</span></div> </div> </div> </div> <div class="chart-row"> <div class="chart-card"><h4>📈 本周营业趋势</h4><div class="chart-placeholder">折线图展示区域</div></div> <div class="store-performance"> <h4>🏪 各店今日业绩</h4> <div class="store-item"><div><span class="status online"></span> <span class="store-name">旗舰店</span></div><div><div class="sales">¥8,200</div><div class="count">18单</div></div></div> <div class="store-item"><div><span class="status online"></span> <span class="store-name">二店(万达店)</span></div><div><div class="sales">¥5,600</div><div class="count">15单</div></div></div> <div class="store-item"><div><span class="status online"></span> <span class="store-name">三店(城西店)</span></div><div><div class="sales">¥4,760</div><div class="count">12单</div></div></div> </div> </div> </div> </div> </div> <!-- 弹窗 --> <div class="modal" id="commonModal"> <div class="modal-content" id="modalContent"> <div class="modal-header"><h3 id="modalTitle">标题</h3><button class="modal-close" onclick="closeModal()">×</button></div> <div id="modalBody"></div> <div class="modal-footer"> <button class="btn btn-outline" onclick="closeModal()">取消</button> <button class="btn btn-primary" onclick="saveModal()">保存</button> </div> </div> </div> <script> let currentMember = null; let selectedProjects = []; function showModule(module) { document.querySelectorAll('.module-view').forEach(v => v.style.display = 'none'); document.getElementById(module + 'Module').style.display = 'block'; document.querySelectorAll('.menu-item').forEach(m => m.classList.remove('active')); event.target.closest('.menu-item').classList.add('active'); } function switchTab(el) { el.parentElement.querySelectorAll('.cashier-tab').forEach(t => t.classList.remove('active')); el.classList.add('active'); } function selectProject(el) { el.classList.toggle('selected'); updateSelectedItems(); } function addQuickProject(el, name, price) { el.classList.toggle('active'); const projectList = document.querySelector('.project-list'); const existingItems = projectList.querySelectorAll('.project-item'); let found = false; existingItems.forEach(item => { if (item.querySelector('h4').textContent === name) { item.classList.toggle('selected'); found = true; } }); if (!found) { const newItem = document.createElement('div'); newItem.className = 'project-item selected'; newItem.onclick = function() { selectProject(this); }; newItem.innerHTML = '<div class="project-info"><h4>' + name + '</h4><span>快捷添加 | 可调整</span></div><div class="project-price">¥' + price + '</div>'; projectList.appendChild(newItem); } updateSelectedItems(); } function updateSelectedItems() { const selected = document.querySelectorAll('.project-item.selected'); const container = document.getElementById('selectedItems'); let totalOriginal = 0; let discount = currentMember ? 0.7 : 1; if (selected.length === 0) { container.innerHTML = '<p style="text-align:center;color:#999;padding:20px;font-size:12px">点击左侧项目添加到此处</p>'; } else { container.innerHTML = ''; selected.forEach(item => { const name = item.querySelector('h4').textContent; const price = parseInt(item.querySelector('.project-price').textContent.replace('¥', '')); const memberPrice = Math.round(price * discount); totalOriginal += price; container.innerHTML += '<div class="selected-item"><div><div style="font-size:14px">' + name + '</div><div style="font-size:12px;color:#43e97b">¥' + memberPrice + '</div></div><div style="display:flex;align-items:center;gap:10px"><div class="qty-control"><span class="qty-btn" onclick="changeQty(this,-1)">-</span><span>1</span><span class="qty-btn" onclick="changeQty(this,1)">+</span></div><span class="remove-btn" onclick="removeSelected(this)">×</span></div></div>'; }); } const totalAfterDiscount = Math.round(totalOriginal * discount); document.getElementById('originalPrice').textContent = '¥' + totalOriginal; document.getElementById('discount').textContent = currentMember ? '-¥' + (totalOriginal - totalAfterDiscount) : '-¥0'; document.getElementById('itemCount').textContent = selected.length + '项'; document.getElementById('totalPrice').textContent = '¥' + totalAfterDiscount; document.querySelector('.pay-btn-submit').textContent = '🎉 完成收款 ¥' + totalAfterDiscount; } function changeQty(el, delta) { const span = el.parentElement.querySelector('span:nth-child(2)'); let qty = parseInt(span.textContent) + delta; if (qty < 1) qty = 1; span.textContent = qty; } function removeSelected(el) { el.closest('.selected-item').remove(); updateSelectedItems(); } function clearOrder() { document.querySelectorAll('.project-item.selected').forEach(p => p.classList.remove('selected')); document.querySelectorAll('.quick-btn.active').forEach(b => b.classList.remove('active')); selectedProjects = []; updateSelectedItems(); } function completePayment() { alert('收款成功！正在打印小票...'); clearOrder(); } function openMemberSelect() { const phone = prompt('请输入会员手机号:', '138****8888'); if (phone) { currentMember = {name: '李小姐', level: 'VIP', balance: 8860}; document.getElementById('memberInfo').innerHTML = '<h4>👤 当前顾客 ' + currentMember.name + ' <span class="vip">' + currentMember.level + '</span></h4><p>储值余额: ¥' + currentMember.balance + '</p>'; updateSelectedItems(); } } document.getElementById('memberSearch').addEventListener('input', function(e) { if (e.target.value.length >= 4) { currentMember = {name: '李小姐', level: 'VIP', balance: 8860}; document.getElementById('memberInfo').innerHTML = '<h4>👤 当前顾客 ' + currentMember.name + ' <span class="vip">' + currentMember.level + '</span></h4><p>储值余额: ¥' + currentMember.balance + '</p>'; updateSelectedItems(); } }); function selectPayMethod(el) { el.parentElement.querySelectorAll('.pay-btn').forEach(b => b.classList.remove('active')); el.classList.add('active'); } function selectPlan(el) { el.parentElement.querySelectorAll('.plan-item').forEach(p => p.classList.remove('selected')); el.classList.add('selected'); const amount = el.querySelector('.amount').textContent.replace('¥', ''); const gift = el.querySelector('.gift').textContent.replace('送¥', ''); const total = parseInt(amount) + parseInt(gift); document.getElementById('rechargeAmount').textContent = '¥' + amount; document.querySelector('.recharge-btn').textContent = '💳 确认充值 ¥' + amount; document.querySelector('.recharge-summary .summary-row.total span:last-child').textContent = '¥' + total; } function completeRecharge() { alert('充值成功！'); } function goToRecharge() { showModule('recharge'); } function switchDetailTab(el) { el.parentElement.querySelectorAll('.detail-tab').forEach(t => t.classList.remove('active')); el.classList.add('active'); } function filterProject(el, type) { el.parentElement.querySelectorAll('.tag').forEach(t => t.classList.remove('active')); el.classList.add('active'); } function filterProjectByCategory(cat) { document.querySelectorAll('.tag').forEach(t => t.classList.remove('active')); } function filterStaff(el, type) { el.parentElement.querySelectorAll('.tag').forEach(t => t.classList.remove('active')); el.classList.add('active'); } function deleteProject(el) { if (confirm('确认删除该项目？')) { el.closest('tr').remove(); } } function closeStore() { if (confirm('确认歇业？')) { alert('门店已设为歇业状态'); } } function switchReportTab(el, type) { el.parentElement.querySelectorAll('.report-tab').forEach(t => t.classList.remove('active')); el.classList.add('active'); } function openModal(title) { document.getElementById('modalTitle').textContent = title; let formHtml = ''; if (title === '新增项目' || title === '编辑项目') { formHtml = '<div class="form-group"><label>项目名称</label><input type="text" placeholder="请输入项目名称"></div><div class="form-group"><label>项目分类</label><select><option>面部护理</option><option>身体养生</option><option>美甲美睫</option></select></div><div class="form-group"><label>服务时长</label><input type="text" placeholder="如: 60分钟"></div><div class="form-group"><label>散客价格</label><input type="text" placeholder="请输入价格"></div><div class="form-group"><label>会员价格</label><input type="text" placeholder="请输入会员价格"></div>'; } else if (title === '新增员工' || title === '编辑员工') { formHtml = '<div class="form-group"><label>员工姓名</label><input type="text" placeholder="请输入姓名"></div><div class="form-group"><label>手机号码</label><input type="text" placeholder="请输入手机号"></div><div class="form-group"><label>所属门店</label><select><option>旗舰店</option><option>二店(万达店)</option><option>三店(城西店)</option></select></div><div class="form-group"><label>员工角色</label><select><option>美容师</option><option>高级美容师</option><option>养生技师</option><option>前台</option></select></div><div class="form-group"><label>技能标签</label><input type="text" placeholder="如: 面部护理,经络疏通"></div>'; } else if (title === '新增门店' || title === '编辑门店') { formHtml = '<div class="form-group"><label>门店名称</label><input type="text" placeholder="请输入门店名称"></div><div class="form-group"><label>门店地址</label><input type="text" placeholder="请输入地址"></div><div class="form-group"><label>联系电话</label><input type="text" placeholder="请输入电话"></div><div class="form-group"><label>营业时间</label><input type="text" placeholder="如: 09:00-22:00"></div>'; } else if (title === '库存调拨') { formHtml = '<div class="form-group"><label>调出门店</label><select><option>旗舰店</option><option>二店(万达店)</option><option>三店(城西店)</option></select></div><div class="form-group"><label>调入门店</label><select><option>旗舰店</option><option>二店(万达店)</option><option>三店(城西店)</option></select></div><div class="form-group"><label>商品名称</label><input type="text" placeholder="请输入商品名称"></div><div class="form-group"><label>调拨数量</label><input type="number" placeholder="请输入数量"></div><div class="form-group"><label>调拨原因</label><select><option>库存调配</option><option>门店补货</option><option>促销活动</option></select></div>'; } else if (title === '批量排班') { formHtml = '<div class="form-group"><label>选择门店</label><select><option>全部门店</option><option>旗舰店</option><option>二店(万达店)</option><option>三店(城西店)</option></select></div><div class="form-group"><label>选择员工</label><select><option>全部员工</option><option>小明</option><option>小红</option><option>小华</option></select></div><div class="form-group"><label>排班周期</label><select><option>本周</option><option>下周</option><option>本月</option></select></div><div class="form-group"><label>班次类型</label><select><option>早班 9:00-18:00</option><option>晚班 14:00-22:00</option><option>全天班 9:00-22:00</option><option>休息</option></select></div>'; } else if (title === '门店业绩') { formHtml = '<div style="padding:10px 0"><div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;text-align:center"><div style="padding:15px;background:#f8f9fa;border-radius:8px"><div style="font-size:24px;font-weight:600;color:#667eea">¥98,560</div><div style="font-size:12px;color:#666">本月业绩</div></div><div style="padding:15px;background:#f8f9fa;border-radius:8px"><div style="font-size:24px;font-weight:600;color:#43e97b">286</div><div style="font-size:12px;color:#666">本月订单</div></div></div><div style="margin-top:15px;font-size:13px;color:#666"><p>📊 业绩趋势: 较上月 +15%</p><p>👥 服务人数: 156人</p><p>⭐ 平均客单价: ¥344</p></div></div>'; } else { formHtml = '<div class="form-group"><label>名称</label><input type="text" placeholder="请输入"></div><div class="form-group"><label>描述</label><textarea placeholder="请输入描述">
'; } document.getElementById('modalBody').innerHTML = formHtml; document.getElementById('commonModal').classList.add('show'); } function closeModal() { document.getElementById('commonModal').classList.remove('show'); } function saveModal() { alert('保存成功！'); closeModal(); } document.getElementById('storeSelect').addEventListener('change', function() { alert('已切换至: ' + this.options[this.selectedIndex].text); });