编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>医疗设备维修小程序</title>
    <style>
        :root{--primary:#1890ff;--primary-dark:#096dd9;--primary-light:#e6f7ff;--success:#52c41a;--warning:#faad14;--danger:#ff4d4f;--text:#262626;--text2:#8c8c8c;--text3:#bfbfbf;--border:#d9d9d9;--bg:#f5f5f5;--white:#fff;--shadow:0 2px 8px rgba(0,0,0,.1);--shadow-lg:0 4px 16px rgba(0,0,0,.15);--r:8px;--r-lg:12px;--top:env(safe-area-inset-top,20px);--bottom:env(safe-area-inset-bottom,20px)}
        *{margin:0;padding:0;box-sizing:border-box}
        body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;min-height:100vh}
        .app{max-width:430px;margin:0 auto;min-height:100vh;background:var(--white);position:relative;box-shadow:var(--shadow-lg)}
        .status{height:calc(var(--top) + 10px);background:linear-gradient(135deg,var(--primary),var(--primary-dark));display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px}
        .status span{color:#fff;font-size:12px;font-weight:500}
        .header{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;padding:15px 20px;display:flex;align-items:center;justify-content:space-between}
        .header h1{font-size:18px;font-weight:600}
        .header .icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer}
        .content{padding-bottom:calc(70px + var(--bottom));min-height:calc(100vh - 60px)}
        .page{display:none;animation:fadeIn .3s ease}
        .page.active{display:block}
        @keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
        
        /* 首页 */
        .banner{background:linear-gradient(135deg,var(--primary),#69c0ff);padding:25px 20px;color:#fff;position:relative;overflow:hidden}
        .banner::before{content:'';position:absolute;top:-50%;right:-30%;width:200px;height:200px;background:rgba(255,255,255,.1);border-radius:50%}
        .banner h1{font-size:22px;margin-bottom:8px}
        .banner p{font-size:14px;opacity:.9}
        .quick{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;padding:20px;margin-top:-30px;position:relative;z-index:1}
        .quick-item{background:var(--white);border-radius:var(--r);padding:15px 10px;text-align:center;box-shadow:var(--shadow);cursor:pointer;transition:transform .2s,box-shadow .2s}
        .quick-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
        .quick-item:active{transform:scale(.98)}
        .quick-icon{width:40px;height:40px;margin:0 auto 8px;background:var(--primary-light);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:18px}
        .quick-item span{font-size:12px}
        .section{padding:15px 20px}
        .section-title{font-size:16px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
        .section-title .more{font-size:12px;color:var(--text2);cursor:pointer}
        
        /* 卡片 */
        .card{background:var(--white);border-radius:var(--r-lg);padding:15px;margin-bottom:12px;box-shadow:0 1px 3px rgba(0,0,0,.08);cursor:pointer;transition:transform .2s}
        .card:active{transform:scale(.99)}
        
        /* 工单卡片 */
        .wo-card{display:flex;align-items:flex-start;gap:12px}
        .wo-icon{width:45px;height:45px;background:var(--primary-light);border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:20px;flex-shrink:0}
        .wo-info{flex:1;min-width:0}
        .wo-info h4{font-size:14px;font-weight:500;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .wo-info p{font-size:12px;color:var(--text2);margin-bottom:4px}
        .wo-status{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500}
        .s-pending{background:#fff7e6;color:#fa8c16}
        .s-processing{background:#e6f7ff;color:var(--primary)}
        .s-completed{background:#f6ffed;color:var(--success)}
        
        /* 设备卡片 */
        .dev-card{display:flex;align-items:center;gap:12px}
        .dev-icon{width:50px;height:50px;background:linear-gradient(135deg,#f0f5ff,#e6f4ff);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
        .dev-info{flex:1}
        .dev-info h4{font-size:14px;font-weight:500;margin-bottom:4px}
        .dev-info p{font-size:12px;color:var(--text2)}
        .dev-arrow{color:var(--text3);font-size:14px}
        
        /* 底部导航 */
        .nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:var(--white);border-top:1px solid var(--border);display:flex;padding:8px 0;padding-bottom:calc(8px + var(--bottom));z-index:100}
        .nav-item{flex:1;text-align:center;cursor:pointer;padding:5px 0;transition:color .2s}
        .nav-item.active{color:var(--primary)}
        .nav-item:not(.active){color:var(--text2)}
        .nav-icon{font-size:22px;margin-bottom:2px;position:relative}
        .nav-text{font-size:11px}
        .nav-badge{position:absolute;top:-2px;right:calc(50% - 18px);background:var(--danger);color:#fff;font-size:10px;padding:1px 5px;border-radius:10px;min-width:16px}
        
        /* 表单 */
        .form-group{margin-bottom:15px}
        .form-label{font-size:14px;font-weight:500;margin-bottom:8px;display:block}
        .form-input{width:100%;padding:12px 15px;border:1px solid var(--border);border-radius:var(--r);font-size:14px;transition:border-color .2s;background:var(--white)}
        .form-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,.1)}
        .form-textarea{min-height:100px;resize:vertical}
        .form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238c8c8c' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:35px}
        
        /* 按钮 */
        .btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border-radius:var(--r);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;border:none;gap:8px}
        .btn-primary{background:var(--primary);color:#fff}
        .btn-primary:hover{background:var(--primary-dark)}
        .btn-primary:active{transform:scale(.98)}
        .btn-block{width:100%}
        .btn-outline{background:transparent;border:1px solid var(--primary);color:var(--primary)}
        .btn-success{background:var(--success);color:#fff}
        
        /* 上传 */
        .upload{border:2px dashed var(--border);border-radius:var(--r);padding:30px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s}
        .upload:hover{border-color:var(--primary);background:var(--primary-light)}
        .upload-icon{font-size:32px;color:var(--text3);margin-bottom:10px}
        .upload-text{font-size:14px;color:var(--text2)}
        .upload-hint{font-size:12px;color:var(--text3);margin-top:5px}
        
        /* 详情页 */
        .detail-section{padding:15px 20px;border-bottom:1px solid var(--bg)}
        .detail-section:last-child{border-bottom:none}
        .detail-title{font-size:13px;color:var(--text2);margin-bottom:8px}
        .detail-content{font-size:14px}
        .detail-content p{margin-bottom:5px}
        
        /* 时间线 */
        .timeline{position:relative;padding-left:25px}
        .timeline::before{content:'';position:absolute;left:7px;top:5px;bottom:5px;width:2px;background:var(--border)}
        .timeline-item{position:relative;padding-bottom:20px}
        .timeline-item:last-child{padding-bottom:0}
        .timeline-dot{position:absolute;left:-25px;top:3px;width:14px;height:14px;background:var(--white);border:2px solid var(--primary);border-radius:50%}
        .timeline-item.done .timeline-dot{background:var(--primary)}
        .timeline-time{font-size:12px;color:var(--text2);margin-bottom:3px}
        .timeline-content{font-size:13px}
        
        /* 工程师卡片 */
        .eng-card{display:flex;align-items:center;gap:15px;padding:15px;background:var(--primary-light);border-radius:var(--r-lg)}
        .eng-avatar{width:50px;height:50px;background:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px}
        .eng-info{flex:1}
        .eng-info h4{font-size:15px;font-weight:500;margin-bottom:4px}
        .eng-info p{font-size:12px;color:var(--text2)}
        .eng-actions{display:flex;gap:10px;margin-left:auto}
        .eng-btn{width:36px;height:36px;border-radius:50%;background:var(--white);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s}
        .eng-btn:active{transform:scale(.9)}
        
        /* 列表项 */
        .list-item{display:flex;align-items:center;padding:15px 20px;background:var(--white);cursor:pointer;transition:background .2s}
        .list-item:active{background:var(--bg)}
        .list-item + .list-item{border-top:1px solid var(--bg)}
        .list-icon{width:36px;height:36px;background:var(--primary-light);border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:16px;margin-right:12px}
        .list-content{flex:1}
        .list-content h4{font-size:14px;font-weight:500}
        .list-content p{font-size:12px;color:var(--text2)}
        .list-arrow{color:var(--text3);font-size:14px}
        
        /* 消息 */
        .msg-item{display:flex;align-items:flex-start;gap:12px;padding:15px 20px;background:var(--white);cursor:pointer;transition:background .2s}
        .msg-item:active{background:var(--bg)}
        .msg-item + .msg-item{border-top:1px solid var(--bg)}
        .msg-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
        .msg-icon.order{background:#fff7e6;color:#fa8c16}
        .msg-icon.progress{background:#e6f7ff;color:var(--primary)}
        .msg-icon.pay{background:#f6ffed;color:var(--success)}
        .msg-icon.system{background:#f5f5f5;color:var(--text2)}
        .msg-content{flex:1;min-width:0}
        .msg-content h4{font-size:14px;font-weight:500;margin-bottom:4px;display:flex;align-items:center;justify-content:space-between}
        .msg-content p{font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .msg-time{font-size:11px;color:var(--text3)}
        .unread{width:8px;height:8px;background:var(--danger);border-radius:50%;flex-shrink:0}
        
        /* 用户信息 */
        .profile-header{display:flex;align-items:center;gap:15px;padding:25px 20px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff}
        .profile-avatar{width:60px;height:60px;background:rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px}
        .profile-info h3{font-size:18px;margin-bottom:4px}
        .profile-info p{font-size:13px;opacity:.9}
        
        /* 统计 */
        .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);margin:15px 20px;border-radius:var(--r);overflow:hidden}
        .stat{background:var(--white);padding:12px 5px;text-align:center}
        .stat-value{font-size:20px;font-weight:600;color:var(--primary);margin-bottom:4px}
        .stat-label{font-size:11px;color:var(--text2)}
        
        /* 弹窗 */
        .modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:none;align-items:flex-end;justify-content:center;z-index:1000}
        .modal.active{display:flex}
        .modal-content{background:var(--white);border-radius:var(--r-lg) var(--r-lg) 0 0;width:100%;max-width:430px;max-height:80vh;overflow-y:auto;animation:slideUp .3s ease}
        @keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
        .modal-header{padding:15px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--white)}
        .modal-title{font-size:16px;font-weight:600}
        .modal-close{font-size:20px;color:var(--text2);cursor:pointer;width:30px;height:30px;display:flex;align-items:center;justify-content:center}
        .modal-body{padding:20px}
        
        /* Toast */
        .toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.75);color:#fff;padding:15px 30px;border-radius:var(--r);font-size:14px;z-index:2000;animation:toastShow .3s ease;display:none}
        .toast.show{display:block}
        @keyframes toastShow{from{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
        
        /* 搜索 */
        .search{padding:12px 20px;background:var(--white)}
        .search-input{display:flex;align-items:center;background:var(--bg);border-radius:20px;padding:8px 15px;gap:8px}
        .search-input input{flex:1;border:none;background:transparent;font-size:14px;outline:none}
        
        /* Tab */
        .tab{display:flex;background:var(--white);border-bottom:1px solid var(--border);padding:0 20px;overflow-x:auto}
        .tab::-webkit-scrollbar{display:none}
        .tab-item{padding:12px 15px;font-size:14px;color:var(--text2);white-space:nowrap;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s}
        .tab-item.active{color:var(--primary);border-bottom-color:var(--primary)}
        .tab-content{display:none}
        .tab-content.active{display:block}
        
        /* 紧急程度 */
        .urgency{display:flex;gap:10px}
        .urgency-item{flex:1;padding:10px;border:1px solid var(--border);border-radius:var(--r);text-align:center;cursor:pointer;transition:all .2s}
        .urgency-item.selected{border-color:var(--primary);background:var(--primary-light);color:var(--primary)}
        .urgency-item span{display:block;font-size:12px}
        .urgency-item strong{font-size:14px}
        
        /* 星级评分 */
        .stars{display:flex;gap:5px;margin:10px 0}
        .star{font-size:28px;color:var(--border);cursor:pointer;transition:color .2s}
        .star.active{color:#ffc53d}
        
        /* 信息网格 */
        .info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);margin:15px 20px;border-radius:var(--r);overflow:hidden}
        .info-item{background:var(--white);padding:15px}
        .info-label{font-size:12px;color:var(--text2);margin-bottom:5px}
        .info-value{font-size:14px;font-weight:500}
        
        /* 设备详情头部 */
        .dev-header{background:linear-gradient(135deg,var(--primary),#69c0ff);padding:30px 20px;color:#fff}
        .dev-header-icon{font-size:60px;margin-bottom:15px}
        .dev-header h2{font-size:20px;font-weight:600;margin-bottom:5px}
        .dev-header p{font-size:14px;opacity:.9}
        
        /* 产品卡片 */
        .product-card{background:var(--white);border-radius:var(--r-lg);overflow:hidden;margin-bottom:12px;cursor:pointer;transition:transform .2s}
        .product-card:active{transform:scale(.99)}
        .product-img{width:100%;height:150px;background:linear-gradient(135deg,#f0f5ff,#e6f4ff);display:flex;align-items:center;justify-content:center;font-size:48px}
        .product-info{padding:12px 15px}
        .product-info h4{font-size:14px;font-weight:500;margin-bottom:4px}
        .product-info p{font-size:12px;color:var(--text2)}
        .product-price{color:var(--danger);font-weight:600}
        
        /* 公司介绍 */
        .intro-header{background:linear-gradient(135deg,var(--primary),var(--primary-dark));padding:40px 20px;color:#fff;text-align:center}
        .intro-logo{font-size:60px;margin-bottom:15px}
        .intro-header h1{font-size:22px;margin-bottom:8px}
        .intro-header p{font-size:14px;opacity:.9}
        
        /* 联系卡片 */
        .contact-card{background:var(--white);border-radius:var(--r-lg);padding:20px;margin:15px 20px;box-shadow:var(--shadow)}
        .contact-item{display:flex;align-items:center;gap:12px;padding:12px 0}
        .contact-item + .contact-item{border-top:1px solid var(--bg)}
        .contact-icon{width:40px;height:40px;background:var(--primary-light);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--primary)}
        
        /* 签名区 */
        .signature{border:2px dashed var(--border);border-radius:var(--r);height:150px;display:flex;align-items:center;justify-content:center;color:var(--text3);margin-top:10px;cursor:crosshair}
        
        /* 支付方式 */
        .pay-method{display:flex;align-items:center;padding:15px;background:var(--white);border-radius:var(--r);margin-bottom:10px;cursor:pointer;border:1px solid var(--border)}
        .pay-method.selected{border-color:var(--primary);background:var(--primary-light)}
        .pay-icon{font-size:24px;margin-right:12px;color:#07c160}
        .pay-name{flex:1;font-size:14px}
        .pay-check{color:var(--primary)}
        
        /* 工具类 */
        .text-primary{color:var(--primary)}
        .text-success{color:var(--success)}
        .text-warning{color:var(--warning)}
        .text-danger{color:var(--danger)}
        .text-secondary{color:var(--text2)}
        .text-center{text-align:center}
        .mt-10{margin-top:10px}.mt-15{margin-top:15px}
        .mb-10{margin-bottom:10px}.mb-15{margin-bottom:15px}
        .flex{display:flex}
        .flex-center{display:flex;align-items:center;justify-content:center}
        .flex-between{display:flex;align-items:center;justify-content:space-between}
        .gap-10{gap:10px}.gap-15{gap:15px}
        .w-full{width:100%}
    </style>
</head>
<body>
<div class="app">
    <div class="status"><span id="status-time">11:42</span></div>
    <div class="content">
        <!-- 首页 -->
        <div id="page-home" class="page active">
            <div class="header"><h1>医疗设备维修</h1><div class="icon"><svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></div></div>
            <div class="banner"><h1>专业医疗设备维修服务</h1><p>快速响应 · 工程师上门 · 原厂配件</p></div>
            <div class="quick">
                <div class="quick-item" onclick="go('page-scan')"><div class="quick-icon"><svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M9.5 6.5v3h-3v-3h3M11 5H5v6h6V5zm-1.5 9.5v3h-3v-3h3M11 13H5v6h6v-6zm6.5-6.5v3h-3v-3h3M19 5h-6v6h6V5z"/></svg></div><span>扫码报修</span></div>
                <div class="quick-item" onclick="go('page-orders');openTab('orders-tab','orders-all')"><div class="quick-icon"><svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg></div><span>我的工单</span></div>
                <div class="quick-item" onclick="go('page-devices')"><div class="quick-icon"><svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/></svg></div><span>我的设备</span></div>
                <div class="quick-item" onclick="go('page-messages')"><div class="quick-icon"><svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg></div><span>消息中心</span></div>
            </div>
            <div class="section"><div class="section-title">进行中的工单<span class="more" onclick="go('page-orders');openTab('orders-tab','orders-processing')">查看全部</span></div></div>
            <div style="padding:0 20px">
                <div class="card" onclick="go('page-order-detail')"><div class="wo-card"><div class="wo-icon"><svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></div><div class="wo-info"><h4>心电监护仪 - 显示屏异常</h4><p>工单编号：WO20260423001</p><span class="wo-status s-processing">维修中</span></div></div></div>
                <div class="card" onclick="go('page-order-detail')"><div class="wo-card"><div class="wo-icon" style="background:#fff7e6;color:#fa8c16"><svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg></div><div class="wo-info"><h4>输液泵 - 报警故障</h4><p>工单编号：WO20260422003</p><span class="wo-status s-pending">待派单</span></div></div></div>
            </div>
            <div class="section"><div class="section-title">我的设备<span class="more" onclick="go('page-devices')">查看全部</span></div></div>
            <div style="padding:0 20px">
<div class="card" onclick="go('page-device-detail')"><div class="dev-card"><div class="dev-icon">💻</div><div class="dev-info"><h4>迈瑞心电监护仪 PM-9000</h4><p>序列号：MR2024010567</p></div><div class="dev-arrow">></div></div></div>
                <div class="card" onclick="go('page-device-detail')"><div class="dev-card"><div class="dev-icon">💡</div><div class="dev-info"><h4>贝朗输液泵 Infusomat</h4><p>序列号：BB2024021890</p></div><div class="dev-arrow">></div></div></div>
            </div>
        </div>

        <!-- 公司简介 -->
        <div id="page-intro" class="page">
            <div class="header"><div class="icon" onclick="go('page-home')"><svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg></div><h1>关于我们</h1><div style="width:24px"></div></div>
            <div class="intro-header"><div class="intro-logo">🏥</div><h1>XX医疗设备维修有限公司</h1><p>专业 · 高效 · 诚信</p></div>
            <div class="section">
                <h3 class="mb-15">发展历程</h3>
                <div class="card"><p style="font-size:14px;line-height:1.8">2008年 公司成立，开始从事医疗设备维修服务<br>2012年 获得多项设备维修资质认证<br>2016年 服务客户超过500家医疗机构<br>2020年 推出小程序在线报修服务<br>2024年 覆盖全国20+省份的维修网络</p></div>
            </div>
            <div class="section">
                <h3 class="mb-15">核心优势</h3>
                <div class="card"><p style="font-size:14px;line-height:1.8">✅ 原厂配件：全部使用原厂正品配件<br>✅ 专业团队：持证工程师平均5年以上经验<br>✅ 快速响应：7×24小时在线受理<br>✅ 透明价格：维修前提供详细报价<br>✅ 质保服务：维修部分享90天质保</p></div>
            </div>
            <div class="contact-card">
                <h3 class="mb-15">联系方式</h3>
                <div class="contact-item"><div class="contact-icon"><svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg></div><div><p style="font-size:14px">客服热线</p><p style="font-size:16px;font-weight:600">400-888-8888</p></div></div>
                <div class="contact-item"><div class="contact-icon"><svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/></svg></div><div><p style="font-size:14px">电子邮箱</p><p style="font-size:14px">service@medical-repair.com</p></div></div>
                <div class="contact-item"><div class="contact-icon"><svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg></div><div><p style="font-size:14px">公司地址</p><p style="font-size:14px">北京市朝阳区XX路88号</p></div></div>
            </div>
        </div>

        <!-- 产品列表 -->
        <div id="page-products" class="page">
            <div class="header"><div class="icon" onclick="go('page-home')"><svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg></div><h1>产品展示</h1><div style="width:24px"></div></div>
            <div class="section">
                <div class="product-card" onclick="go('page-product-detail')"><div class="product-img">💻</div><div class="product-info"><h4>迈瑞心电监护仪 PM-9000</h4><p>适用于ICU、手术室等场景</p><p class="product-price">¥88,000起</p></div></div>
                <div class="product-card" onclick="go('page-product-detail')"><div class="product-img">💡</div><div class="product-info"><h4>贝朗输液泵 Infusomat</h4><p>精准输液，适合各科室</p><p class="product-price">¥45,000起</p></div></div>
                <div class="product-card" onclick="go('page-product-detail')"><div class="product-img">❤️</div><div class="product-info"><h4>飞利浦除颤仪 HeartStart</h4><p>快速除颤，挽救生命</p><p class="product-price">¥120,000起</p></div></div>
                <div class="product-card" onclick="go('page-product-detail')"><div class="product-img">🫁</div><div class="product-info"><h4>德尔格呼吸机 Evita V300</h4><p>重症监护首选</p><p class="product-price">¥280,000起</p></div></div>
            </div>
        </div>

        <!-- 产品详情 -->
        <div id="page-product-detail" class="page">
            <div class="header"><div class="icon" onclick="go('page-products')"><svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg></div><h1>产品详情</h1><div style="width:24px"></div></div>
            <div style="background:linear-gradient(135deg,#f0f5ff,#e6f4ff);padding:60px;text-align:center;font-size:80px">💻</div>
            <div class="section">
                <h2 style="font-size:20px;margin-bottom:10px">迈瑞心电监护仪 PM-9000</h2>
                <p class="text-secondary mb-15">型号：PM-9000 Express · 品牌：迈瑞</p>
                <p class="product-price" style="font-size:24px;margin-bottom:15px">¥88,000起</p>
                <button class="btn btn-outline btn-block" onclick="go('page-scan')"><svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M9.5 6.5v3h-3v-3h3M11 5H5v6h6V5zm-1.5 9.5v3h-3v-3h3M11 13H5v6h6v-6z"/></svg> 扫码咨询</button>
            </div>
            <div class="detail-section"><div class="detail-title">产品参数</div><div class="detail-content"><p><strong>屏幕尺寸：</strong>12.1英寸 TFT触摸屏</p><p><strong>分辨率：</strong>1280×800</p><p><strong>心电导联：</strong>3/5/12导联</p><p><strong>血压测量：</strong>支持双侧无创血压</p><p><strong>血氧监测：</strong>SpO2/脉率</p><p><strong>体温监测：</strong>双通道体温</p></div></div>
            <div class="detail-section"><div class="detail-title">应用场景</div><div class="detail-content"><p>ICU病房 · 手术室 · 急诊科 · 普通病房 · 导管室</p></div></div>
            <div class="detail-section"><div class="detail-title">典型案例</div><div class="detail-content"><p>北京协和医院 · 上海华山医院 · 广州中山医院等1000+医疗机构正在使用</p></div></div>
        </div>

        <!-- 扫码报修 -->
        <div id="page-scan" class="page">
            <div class="header"><div class="icon" onclick="go('page-home')"><svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg></div><h1>扫码报修</h1><div style="width:24px"></div></div>
            <div class="section">
                <div class="card" style="text-align:center;padding:40px 20px">
                    <div style="width:180px;height:180px;margin:0 auto 20px;background:var(--bg);border-radius:var(--r);display:flex;align-items:center;justify-content:center;border:2px dashed var(--border)"><svg width="80" height="80" fill="var(--text3)" viewBox="0 0 24 24"><path d="M9.5 6.5v3h-3v-3h3M11 5H5v6h6V5zm-1.5 9.5v3h-3v-3h3M11 13H5v6h6v-6zm6.5-6.5v3h-3v-3h3M19 5h-6v6h6V5z"/></svg></div>
                    <p style="color:var(--text2);margin-bottom:15px">将设备二维码放入框内</p>
                    <p style="font-size:12px;color:var(--text3)">也可手动输入设备编号</p>
                </div>
            </div>
            <div class="section"><button class="btn btn-primary btn-block" onclick="showModal('modal-device')"><svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M9.5 6.5v3h-3v-3h3M11 5H5v6h6V5zm-1.5 9.5v3h-3v-3h3M11 13H5v6h6v-6zm6.5-6.5v3h-3v-3h3M19 5h-6v6h6V5z"/></svg> 扫描二维码</button></div>
            <div class="section">
                <div class="form-group"><label class="form-label">或输入设备编号</label><input type="text" class="form-input" placeholder="请输入设备编号" id="device-code"></div>
                <button class="btn btn-outline btn-block" onclick="searchDevice()">查询设备</button>
            </div>
        </div>

        <!-- 工单列表 -->
        <div id="page-orders" class="page">
            <div class="header"><h1>我的工单</h1></div>
            <div class="search"><div class="search-input"><svg width="16" height="16" fill="var(--text2)" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5z"/></svg><input type="text" placeholder="搜索工单编号或设备名称"></div></div>
            <div class="tab" id="orders-tab"><div class="tab-item active" onclick="openTab('orders-tab','orders-all')">全部</div><div class="tab-item" onclick="openTab('orders-tab','orders-pending')">待处理</div><div class="tab-item" onclick="openTab('orders-tab','orders-processing')">进行中</div><div class="tab-item" onclick="openTab('orders-tab','orders-completed')">已完成</div></div>
            <div id="orders-all" class="tab-content active"><div style="padding:15px 20px"><div class="card" onclick="go('page-order-detail')"><div class="wo-card"><div class="wo-icon"><svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></div><div class="wo-info"><h4>心电监护仪 - 显示屏异常</h4><p>WO20260423001</p><span class="wo-status s-processing">维修中</span></div></div></div><div class="card" onclick="go('page-order-detail')"><div class="wo-card"><div class="wo-icon" style="background:#fff7e6;color:#fa8c16"><svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg></div><div class="wo-info"><h4>输液泵 - 报警故障</h4><p>WO20260422003</p><span class="wo-status s-pending">待派单</span></div></div></div><div class="card" onclick="go('page-order-detail')"><div class="wo-card"><div class="wo-icon" style="background:#f6ffed;color:var(--success)"><svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></div><div class="wo-info"><h4>呼吸机 - 保养维护</h4><p>WO20260418002</p><span class="wo-status s-completed">已完成</span></div></div></div></div></div>
            <div id="orders-pending" class="tab-content"><div style="padding:15px 20px"><div class="card"><div class="wo-card"><div class="wo-icon" style="background:#fff7e6;color:#fa8c16"><svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg></div><div class="wo-info"><h4>输液泵 - 报警故障</h4><p>WO20260422003</p><span class="wo-status s-pending">待派单</span></div></div></div></div></div>
            <div id="orders-processing" class="tab-content"><div style="padding:15px 20px"><div class="card" onclick="go('page-order-detail')"><div class="wo-card"><div class="wo-icon"><svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></div><div class="wo-info"><h4>心电监护仪 - 显示屏异常</h4><p>WO20260423001</p><span class="wo-status s-processing">维修中</span></div></div></div></div></div>
            <div id="orders-completed" class="tab-content"><div style="padding:15px 20px"><div class="card" onclick="go('page-order-detail')"><div class="wo-card"><div class="wo-icon" style="background:#f6ffed;color:var(--success)"><svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></div><div class="wo-info"><h4>呼吸机 - 保养维护</h4><p>WO20260418002</p><span class="wo-status s-completed">已完成</span></div></div></div></div></div>
        </div>

        <!-- 工单详情 -->
        <div id="page-order-detail" class="page">
            <div class="header"><div class="icon" onclick="go('page-orders')"><svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg></div><h1>工单详情</h1><div style="width:24px"></div></div>
            <div class="detail-section" style="background:var(--primary-light)"><div class="flex-between mb-10"><span class="wo-status s-processing">维修中</span><span style="font-size:12px;color:var(--text2)">WO20260423001</span></div><h3 style="font-size:16px;margin-bottom:5px">心电监护仪 - 显示屏异常</h3><p style="font-size:12px;color:var(--text2)">提交时间：2024-04-23 09:30</p></div>
            <div class="detail-section"><div class="eng-card"><div class="eng-avatar"><svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg></div><div class="eng-info"><h4>张师傅</h4><p>工龄8年 · 高级维修工程师</p></div><div class="eng-actions"><div class="eng-btn" onclick="toast('拨打电话：138-0013-8000')"><svg width="18" height="18" fill="var(--primary)" viewBox="0 0 24 24"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg></div><div class="eng-btn" onclick="toast('发送消息')"><svg width="18" height="18" fill="var(--primary)" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/></svg></div></div></div></div>
            <div class="detail-section"><div class="detail-title">设备信息</div><div class="detail-content"><p><strong>设备名称：</strong>迈瑞心电监护仪 PM-9000</p><p><strong>设备编号：</strong>MR2024010567</p><p><strong>安装位置：</strong>内科住院部 302病房</p></div></div>
            <div class="detail-section"><div class="detail-title">故障信息</div><div class="detail-content"><p><strong>故障类型：</strong>显示屏异常</p><p><strong>故障描述：</strong>显示屏出现花屏，无法正常显示数据</p><p><strong>紧急程度：</strong>加急（24小时内上门）</p><p><strong>预约时间：</strong>2024-04-24 上午</p></div></div>
            <div class="detail-section"><div class="detail-title">维修进度</div><div class="detail-content"><div class="timeline"><div class="timeline-item done"><div class="timeline-dot"></div><div class="timeline-time">04-23 09:30</div><div class="timeline-content">用户提交工单</div></div><div class="timeline-item done"><div class="timeline-dot"></div><div class="timeline-time">04-23 09:45</div><div class="timeline-content">系统派单给张师傅</div></div><div class="timeline-item done"><div class="timeline-dot"></div><div class="timeline-time">04-23 10:15</div><div class="timeline-content">工程师已接单</div></div><div class="timeline-item"><div class="timeline-dot"></div><div class="timeline-time">04-23 14:00</div><div class="timeline-content">预计上门维修</div></div></div></div></div>
            <div class="detail-section"><div class="detail-title">预计费用</div><div class="info-grid" style="margin:0"><div class="info-item"><div class="info-label">人工费</div><div class="info-value">¥300</div></div><div class="info-item"><div class="info-label">配件费</div><div class="info-value">待定</div></div><div class="info-item"><div class="info-label">上门费</div><div class="info-value">¥0</div></div><div class="info-item"><div class="info-label">合计</div><div class="info-value text-primary">¥300+</div></div></div></div>
            <div class="section"><button class="btn btn-primary btn-block" onclick="go('page-confirm')">确认维修完成</button></div>
        </div>

        <!-- 提交工单 -->
        <div id="page-submit" class="page">
            <div class="header"><div class="icon" onclick="go('page-scan')"><svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg></div><h1>提交工单</h1><div style="width:24px"></div></div>
            <div class="section">
                <div class="card" style="background:var(--primary-light);margin-bottom:20px"><div class="flex gap-15" style="align-items:center"><div style="font-size:32px">💻</div><div><h4 style="font-size:14px;margin-bottom:4px">迈瑞心电监护仪 PM-9000</h4><p style="font-size:12px;color:var(--text2)">序列号：MR2024010567</p></div></div></div>
                <div class="form-group"><label class="form-label">故障类型</label><select class="form-input form-select"><option value="">请选择故障类型</option><option>显示屏异常</option><option>无法开机</option><option>传感器故障</option><option>报警异常</option><option>其他故障</option></select></div>
                <div class="form-group"><label class="form-label">故障描述</label><textarea class="form-input form-textarea" placeholder="请详细描述故障现象...">
维修工程师：张师傅
故障原因：显示屏排线松动
维修方案：更换显示屏排线并重新固定
更换配件：显示屏排线 ×1
编辑页面

我的设备

迈瑞心电监护仪 PM-9000

贝朗输液泵 Infusomat

飞利浦除颤仪 HeartStart

德尔格呼吸机 Evita V300

迈瑞心电监护仪 PM-9000

定期保养维护

显示屏维修

添加设备

消息中心

工单进度更新

维修提醒

费用确认

系统通知

确认维修

上传维修后图片

评价服务

心电监护仪维修

费用支付

支付方式

我的账单

心电监护仪维修

呼吸机保养维护

输液泵传感器更换

发票申请

我的评价

呼吸机保养维护

心电监护仪校准

张三

我的工单

我的设备

我的账单

我的评价

账号管理

通知设置

意见反馈

关于我们

联系客服

账号管理

修改头像

修改昵称

绑定手机

修改密码

通知设置

工单通知

进度通知

支付通知

系统通知

清除缓存

意见反馈

医疗设备维修

迈瑞心电监护仪 PM-9000
