编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>医疗器械门店小程序</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        :root {
            --primary: #1890ff;
            --success: #52c41a;
            --warning: #faad14;
            --danger: #ff4d4f;
            --text: #333;
            --text-secondary: #666;
            --text-light: #999;
            --bg: #f5f5f5;
            --white: #fff;
            --border: #e8e8e8;
            --shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
            background: var(--bg);
            color: var(--text);
            max-width: 430px;
            margin: 0 auto;
            min-height: 100vh;
            position: relative;
        }
        /* 手机框架 */
        .phone-frame {
            position: relative;
            min-height: 100vh;
            background: var(--bg);
        }
        /* 页面容器 */
        .page {
            display: none;
            min-height: calc(100vh - 60px);
            padding-bottom: 20px;
        }
        .page.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        /* 状态栏 */
        .status-bar {
            background: var(--white);
            padding: 10px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            border-bottom: 1px solid var(--border);
        }
        /* 顶部导航 */
        .header {
            background: var(--white);
            padding: 12px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .header-back {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .header-back svg {
            width: 20px;
            height: 20px;
        }
        .header-title {
            font-size: 16px;
            font-weight: 600;
            flex: 1;
            text-align: center;
        }
        .header-right {
            width: 24px;
        }
        /* 搜索栏 */
        .search-bar {
            background: var(--white);
            padding: 12px 16px;
        }
        .search-input {
            background: var(--bg);
            border-radius: 20px;
            padding: 10px 16px;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
        }
        .search-input svg {
            width: 16px;
            height: 16px;
            color: var(--text-light);
        }
        .search-input span {
            color: var(--text-light);
            font-size: 14px;
        }
        /* 分类Tab */
        .category-tabs {
            background: var(--white);
            padding: 12px 16px 0;
            display: flex;
            gap: 12px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        .category-tabs::-webkit-scrollbar {
            display: none;
        }
        .category-tab {
            padding: 8px 16px;
            font-size: 14px;
            color: var(--text-secondary);
            white-space: nowrap;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.3s;
        }
        .category-tab.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
        }
        /* 产品列表 */
        .product-list {
            padding: 12px 16px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        .product-card {
            background: var(--white);
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .product-card:active {
            transform: scale(0.98);
        }
        .product-image {
            width: 100%;
            aspect-ratio: 1;
            background: linear-gradient(135deg, #f0f5ff, #e6f0ff);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
        }
        .product-info {
            padding: 10px;
        }
        .product-name {
            font-size: 14px;
            font-weight: 500;
            color: var(--text);
            margin-bottom: 6px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .product-meta {
            font-size: 12px;
            color: var(--text-light);
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .product-tag {
            display: inline-block;
            padding: 2px 6px;
            background: #fff7e6;
            color: #fa8c16;
            font-size: 10px;
            border-radius: 2px;
        }
        /* 门店信息页 */
        .store-header {
            background: var(--white);
            padding: 20px 16px;
            text-align: center;
            border-bottom: 1px solid var(--border);
        }
        .store-logo {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--primary), #69b1ff);
            border-radius: 16px;
            margin: 0 auto 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
        }
        .store-name {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        .store-desc {
            font-size: 13px;
            color: var(--text-secondary);
        }
        .info-section {
            background: var(--white);
            margin-top: 10px;
        }
        .info-item {
            padding: 14px 16px;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
        }
        .info-item:last-child {
            border-bottom: none;
        }
        .info-icon {
            width: 36px;
            height: 36px;
            background: var(--bg);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }
        .info-content {
            flex: 1;
        }
        .info-title {
            font-size: 15px;
            font-weight: 500;
            margin-bottom: 4px;
        }
        .info-desc {
            font-size: 13px;
            color: var(--text-secondary);
        }
        .info-arrow {
            color: var(--text-light);
            font-size: 14px;
        }
        .license-images {
            display: flex;
            gap: 10px;
            margin-top: 8px;
        }
        .license-thumb {
            width: 60px;
            height: 80px;
            background: var(--bg);
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }
        /* 产品详情页 */
        .product-detail-banner {
            width: 100%;
            aspect-ratio: 1;
            background: linear-gradient(135deg, #f0f5ff, #e6f0ff);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 80px;
        }
        .product-detail-content {
            background: var(--white);
            padding: 16px;
            margin-bottom: 10px;
        }
        .detail-name {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 8px;
        }
        .detail-tags {
            display: flex;
            gap: 8px;
            margin-bottom: 12px;
        }
        .detail-tag {
            padding: 4px 8px;
            background: #fff7e6;
            color: #fa8c16;
            font-size: 12px;
            border-radius: 4px;
        }
        .detail-tag.blue {
            background: #e6f4ff;
            color: var(--primary);
        }
        .detail-section {
            margin-top: 16px;
        }
        .detail-section-title {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .detail-table {
            width: 100%;
            border-collapse: collapse;
        }
        .detail-table td {
            padding: 8px 0;
            font-size: 13px;
            border-bottom: 1px solid var(--border);
        }
        .detail-table td:first-child {
            color: var(--text-secondary);
            width: 100px;
        }
        .license-preview {
            background: var(--bg);
            border-radius: 8px;
            padding: 16px;
            text-align: center;
        }
        .license-preview-icon {
            font-size: 48px;
            margin-bottom: 8px;
        }
        .license-preview-text {
            font-size: 13px;
            color: var(--text-secondary);
        }
        /* 预约页面 */
        .booking-form {
            background: var(--white);
            padding: 16px;
            margin-bottom: 10px;
        }
        .form-item {
            margin-bottom: 16px;
        }
        .form-label {
            font-size: 14px;
            color: var(--text);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .form-label .required {
            color: var(--danger);
        }
        .form-input {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 14px;
            outline: none;
            transition: border-color 0.3s;
        }
        .form-input:focus {
            border-color: var(--primary);
        }
        textarea.form-input {
            min-height: 80px;
            resize: none;
        }
        .service-options {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .service-option {
            padding: 10px 16px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .service-option.selected {
            border-color: var(--primary);
            background: #e6f4ff;
            color: var(--primary);
        }
        .time-slots {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
        .time-slot {
            padding: 12px;
            text-align: center;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .time-slot.selected {
            border-color: var(--primary);
            background: #e6f4ff;
            color: var(--primary);
        }
        .time-slot.disabled {
            background: var(--bg);
            color: var(--text-light);
            cursor: not-allowed;
        }
        .notice-box {
            background: #fffbe6;
            border-radius: 8px;
            padding: 12px;
            margin-top: 12px;
        }
        .notice-title {
            font-size: 14px;
            font-weight: 600;
            color: #ad6800;
            margin-bottom: 8px;
        }
        .notice-content {
            font-size: 13px;
            color: #ad6800;
            line-height: 1.6;
        }
        .booking-submit {
            background: var(--primary);
            color: var(--white);
            border: none;
            border-radius: 24px;
            padding: 14px;
            font-size: 16px;
            width: 100%;
            cursor: pointer;
            margin-top: 20px;
        }
        .booking-submit:active {
            opacity: 0.8;
        }
        /* 预约成功页 */
        .success-page {
            text-align: center;
            padding: 40px 20px;
        }
        .success-icon {
            width: 80px;
            height: 80px;
            background: #f6ffed;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 40px;
        }
        .success-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 8px;
        }
        .success-desc {
            font-size: 14px;
            color: var(--text-secondary);
            margin-bottom: 24px;
        }
        .booking-detail-card {
            background: var(--white);
            border-radius: 12px;
            padding: 20px;
            text-align: left;
            margin-bottom: 20px;
        }
        .booking-detail-row {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid var(--border);
        }
        .booking-detail-row:last-child {
            border-bottom: none;
        }
        .booking-detail-label {
            color: var(--text-secondary);
            font-size: 14px;
        }
        .booking-detail-value {
            color: var(--text);
            font-size: 14px;
            font-weight: 500;
        }
        .success-actions {
            display: flex;
            gap: 12px;
        }
        .success-btn {
            flex: 1;
            padding: 12px;
            border-radius: 24px;
            font-size: 14px;
            cursor: pointer;
            text-align: center;
        }
        .success-btn.primary {
            background: var(--primary);
            color: var(--white);
            border: none;
        }
        .success-btn.secondary {
            background: var(--white);
            color: var(--text);
            border: 1px solid var(--border);
        }
        /* 咨询页面 */
        .consult-tabs {
            background: var(--white);
            padding: 12px 16px;
            display: flex;
            gap: 24px;
            border-bottom: 1px solid var(--border);
        }
        .consult-tab {
            font-size: 15px;
            color: var(--text-secondary);
            padding-bottom: 12px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
        }
        .consult-tab.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
        }
        .faq-list {
            background: var(--white);
        }
        .faq-item {
            padding: 16px;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
        }
        .faq-question {
            font-size: 14px;
            font-weight: 500;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .faq-answer {
            font-size: 13px;
            color: var(--text-secondary);
            margin-top: 10px;
            line-height: 1.6;
            display: none;
        }
        .faq-item.expanded .faq-answer {
            display: block;
        }
        .faq-item.expanded .faq-arrow {
            transform: rotate(180deg);
        }
        .faq-arrow {
            transition: transform 0.3s;
            color: var(--text-light);
        }
        .consult-form {
            padding: 16px;
        }
        .consult-submit {
            background: var(--primary);
            color: var(--white);
            border: none;
            border-radius: 24px;
            padding: 14px;
            font-size: 16px;
            width: 100%;
            cursor: pointer;
            margin-top: 20px;
        }
        /* 我的页面 */
        .my-header {
            background: linear-gradient(135deg, var(--primary), #69b1ff);
            padding: 30px 16px;
            color: var(--white);
        }
        .my-user {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .my-avatar {
            width: 60px;
            height: 60px;
            background: rgba(255,255,255,0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
        }
        .my-info h3 {
            font-size: 18px;
            margin-bottom: 4px;
        }
        .my-info p {
            font-size: 13px;
            opacity: 0.8;
        }
        .my-orders {
            background: var(--white);
            padding: 16px;
            margin: -20px 12px 12px;
            border-radius: 12px;
            position: relative;
            box-shadow: var(--shadow);
        }
        .my-orders-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        .my-orders-title {
            font-size: 15px;
            font-weight: 600;
        }
        .my-orders-more {
            font-size: 13px;
            color: var(--text-secondary);
        }
        .order-tabs {
            display: flex;
            justify-content: space-around;
        }
        .order-tab {
            text-align: center;
            cursor: pointer;
        }
        .order-tab-icon {
            font-size: 24px;
            margin-bottom: 4px;
        }
        .order-tab-text {
            font-size: 12px;
            color: var(--text-secondary);
        }
        .my-menu {
            background: var(--white);
            margin: 12px;
            border-radius: 12px;
            overflow: hidden;
        }
        .my-menu-item {
            padding: 14px 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
        }
        .my-menu-item:last-child {
            border-bottom: none;
        }
        .my-menu-icon {
            width: 32px;
            height: 32px;
            background: var(--bg);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }
        .my-menu-text {
            flex: 1;
            font-size: 14px;
        }
        .my-menu-arrow {
            color: var(--text-light);
        }
        /* 预约记录 */
        .record-list {
            padding: 12px 16px;
        }
        .record-item {
            background: var(--white);
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 12px;
        }
        .record-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        .record-title {
            font-size: 15px;
            font-weight: 600;
        }
        .record-status {
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
        }
        .record-status.pending {
            background: #fff7e6;
            color: #fa8c16;
        }
        .record-status.confirmed {
            background: #e6f4ff;
            color: var(--primary);
        }
        .record-status.completed {
            background: #f6ffed;
            color: var(--success);
        }
        .record-status.cancelled {
            background: #fff1f0;
            color: var(--danger);
        }
        .record-info {
            font-size: 13px;
            color: var(--text-secondary);
        }
        .record-info div {
            margin-bottom: 6px;
            display: flex;
            gap: 8px;
        }
        .record-info span:first-child {
            color: var(--text-light);
            min-width: 60px;
        }
        /* 底部导航 */
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 430px;
            background: var(--white);
            display: flex;
            justify-content: space-around;
            padding: 8px 0;
            border-top: 1px solid var(--border);
            z-index: 1000;
        }
        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            cursor: pointer;
            padding: 4px 12px;
        }
        .tab-icon {
            font-size: 22px;
            color: var(--text-light);
        }
        .tab-text {
            font-size: 10px;
            color: var(--text-light);
        }
        .tab-item.active .tab-icon,
        .tab-item.active .tab-text {
            color: var(--primary);
        }
        /* 弹出层 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 2000;
            display: none;
            align-items: flex-end;
            justify-content: center;
        }
        .modal-overlay.active {
            display: flex;
        }
        .modal-content {
            background: var(--white);
            border-radius: 16px 16px 0 0;
            width: 100%;
            max-width: 430px;
            max-height: 80vh;
            overflow-y: auto;
            padding: 20px;
            animation: slideUp 0.3s ease;
        }
        @keyframes slideUp {
            from { transform: translateY(100%); }
            to { transform: translateY(0); }
        }
        .modal-handle {
            width: 40px;
            height: 4px;
            background: var(--border);
            border-radius: 2px;
            margin: 0 auto 16px;
        }
        .modal-title {
            font-size: 17px;
            font-weight: 600;
            text-align: center;
            margin-bottom: 20px;
}
        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 4px;
            text-align: center;
        }
        .calendar-header {
            font-size: 12px;
            color: var(--text-light);
            padding: 8px 0;
        }
        .calendar-day {
            padding: 10px;
            font-size: 14px;
            border-radius: 50%;
            cursor: pointer;
        }
        .calendar-day.selected {
            background: var(--primary);
            color: var(--white);
        }
        .calendar-day.disabled {
            color: var(--text-light);
            cursor: not-allowed;
        }
        .calendar-day.today {
            border: 1px solid var(--primary);
            color: var(--primary);
        }
        /* 页面内滚动 */
        .page-scroll {
            height: calc(100vh - 120px);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
    </style>
</head>
<body>
    <div class="phone-frame">
        <!-- 首页 -->
        <div id="page-home" class="page active">
            <div class="status-bar">
                <span>9:41</span>
                <span>医疗器械门店</span>
                <span>📶 📡 🔋</span>
            </div>
            <div class="search-bar" onclick="showPage('page-search')">
                <div class="search-input">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
                    <span>搜索产品名称、分类、适用范围</span>
                </div>
            </div>
            <div class="category-tabs">
                <div class="category-tab active" onclick="switchCategory(this)">全部</div>
                <div class="category-tab" onclick="switchCategory(this)">二类器械</div>
                <div class="category-tab" onclick="switchCategory(this)">三类器械</div>
                <div class="category-tab" onclick="switchCategory(this)">医用耗材</div>
                <div class="category-tab" onclick="switchCategory(this)">康复器械</div>
                <div class="category-tab" onclick="switchCategory(this)">家用医疗</div>
            </div>
            <div class="product-list">
                <div class="product-card" onclick="showPage('page-product-detail')">
                    <div class="product-image">💉</div>
                    <div class="product-info">
                        <div class="product-name">一次性使用无菌注射器 带针</div>
                        <div class="product-meta">
                            <span class="product-tag">二类器械</span>
                            <span>国械注准2023xxxx</span>
                        </div>
                    </div>
                </div>
                <div class="product-card" onclick="showPage('page-product-detail')">
                    <div class="product-image">🩺</div>
                    <div class="product-info">
                        <div class="product-name">电子血压计（臂式）</div>
                        <div class="product-meta">
                            <span class="product-tag">二类器械</span>
                            <span>国械注准2022xxxx</span>
                        </div>
                    </div>
                </div>
                <div class="product-card" onclick="showPage('page-product-detail')">
                    <div class="product-image">🦷</div>
                    <div class="product-info">
                        <div class="product-name">定制式义齿（烤瓷冠）</div>
                        <div class="product-meta">
                            <span class="product-tag">三类器械</span>
                            <span>国械注准2021xxxx</span>
                        </div>
                    </div>
                </div>
                <div class="product-card" onclick="showPage('page-product-detail')">
                    <div class="product-image">🦽</div>
                    <div class="product-info">
                        <div class="product-name">手动轮椅车</div>
                        <div class="product-meta">
                            <span class="product-tag">二类器械</span>
                            <span>国械注准2020xxxx</span>
                        </div>
                    </div>
                </div>
                <div class="product-card" onclick="showPage('page-product-detail')">
                    <div class="product-image">😷</div>
                    <div class="product-info">
                        <div class="product-name">医用外科口罩（独立装）</div>
                        <div class="product-meta">
                            <span class="product-tag">二类器械</span>
                            <span>冀械注准2020xxxx</span>
                        </div>
                    </div>
                </div>
                <div class="product-card" onclick="showPage('page-product-detail')">
                    <div class="product-image">🩻</div>
                    <div class="product-info">
                        <div class="product-name">医用防护服 连体式</div>
                        <div class="product-meta">
                            <span class="product-tag">三类器械</span>
                            <span>国械注准2020xxxx</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 产品详情页 -->
        <div id="page-product-detail" class="page">
            <div class="header">
                <div class="header-back" onclick="goBack()">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6"/></svg>
                </div>
                <div class="header-title">产品详情</div>
                <div class="header-right"></div>
            </div>
            <div class="page-scroll">
                <div class="product-detail-banner">💉</div>
                <div class="product-detail-content">
                    <div class="detail-name">一次性使用无菌注射器 带针 1ml</div>
                    <div class="detail-tags">
                        <span class="detail-tag blue">二类医疗器械</span>
                        <span class="detail-tag">注册证有效</span>
                    </div>
                </div>
                <div class="product-detail-content">
                    <div class="detail-section">
                        <div class="detail-section-title">📋 注册信息</div>
                        <table class="detail-table">
                            <tr><td>注册证号</td><td>国械注准2023XXXXXX</td></tr>
                            <tr><td>产品名称</td><td>一次性使用无菌注射器 带针</td></tr>
                            <tr><td>规格型号</td><td>1ml、2ml、5ml、10ml、20ml、50ml</td></tr>
                            <tr><td>结构及组成</td><td>由针座、针筒、活塞、活塞柄、针芯组成</td></tr>
                            <tr><td>适用范围</td><td>用于临床皮下、肌肉、静脉注射</td></tr>
                            <tr><td>禁忌症</td><td>对材料过敏者禁用</td></tr>
                            <tr><td>有效期</td><td>3年（自生产日期起）</td></tr>
                        </table>
                    </div>
                </div>
                <div class="product-detail-content">
                    <div class="detail-section">
                        <div class="detail-section-title">📄 资质证照</div>
                        <div class="license-preview" onclick="showPage('page-store')">
                            <div class="license-preview-icon">📜</div>
                            <div class="license-preview-text">点击查看医疗器械注册证</div>
                        </div>
                    </div>
                </div>
                <div style="padding: 0 16px;">
                    <button class="booking-submit" onclick="showPage('page-booking')">立即预约到店</button>
                </div>
            </div>
        </div>

        <!-- 门店信息页 -->
        <div id="page-store" class="page">
            <div class="header">
                <div class="header-back" onclick="goBack()">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6"/></svg>
                </div>
                <div class="header-title">门店信息</div>
                <div class="header-right"></div>
            </div>
            <div class="page-scroll">
                <div class="store-header">
                    <div class="store-logo">🏥</div>
                    <div class="store-name">康泰医疗器械专营店</div>
                    <div class="store-desc">专业医疗器械 品质保障 正品授权</div>
                </div>
                <div class="info-section">
                    <div class="info-item">
                        <div class="info-icon">📞</div>
                        <div class="info-content">
                            <div class="info-title">联系电话</div>
                            <div class="info-desc">400-888-9999</div>
                        </div>
                    </div>
                    <div class="info-item" onclick="showMapModal()">
                        <div class="info-icon">📍</div>
                        <div class="info-content">
                            <div class="info-title">门店地址</div>
                            <div class="info-desc">北京市朝阳区建国路88号SOHO现代城A座108</div>
                        </div>
                        <div class="info-arrow">›</div>
                    </div>
                    <div class="info-item">
                        <div class="info-icon">🕐</div>
                        <div class="info-content">
                            <div class="info-title">营业时间</div>
                            <div class="info-desc">周一至周六 09:00-18:00<br>周日休息</div>
                        </div>
                    </div>
                </div>
                <div class="info-section">
                    <div class="info-item">
                        <div class="info-icon">🏆</div>
                        <div class="info-content">
                            <div class="info-title">资质证照公示</div>
                            <div class="license-images">
                                <div class="license-thumb">📜</div>
                                <div class="license-thumb">📄</div>
                                <div class="license-thumb">📋</div>
                            </div>
                            <div class="info-desc" style="margin-top:8px">医疗器械经营许可证 | 营业执照 | 税务登记证</div>
                        </div>
                    </div>
                </div>
                <div style="padding: 16px;">
                    <button class="booking-submit" onclick="showPage('page-booking')">立即预约到店</button>
                </div>
            </div>
        </div>

        <!-- 预约页面 -->
        <div id="page-booking" class="page">
            <div class="header">
                <div class="header-back" onclick="goBack()">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6"/></svg>
                </div>
                <div class="header-title">预约到店</div>
                <div class="header-right"></div>
            </div>
            <div class="page-scroll">
                <div class="booking-form">
                    <div class="form-item">
                        <div class="form-label"><span class="required">*</span> 选择服务类型</div>
                        <div class="service-options">
                            <div class="service-option selected" onclick="selectService(this)">产品咨询</div>
                            <div class="service-option" onclick="selectService(this)">体验试用</div>
                            <div class="service-option" onclick="selectService(this)">购买指导</div>
                            <div class="service-option" onclick="selectService(this)">售后服务</div>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="form-label"><span class="required">*</span> 选择到店日期</div>
                        <div class="form-input" style="cursor:pointer" onclick="showCalendarModal()">
                            <span id="selected-date">请选择日期</span>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="form-label"><span class="required">*</span> 选择时间段</div>
                        <div class="time-slots">
                            <div class="time-slot" onclick="selectTime(this)">09:00-10:00</div>
                            <div class="time-slot" onclick="selectTime(this)">10:00-11:00</div>
                            <div class="time-slot selected" onclick="selectTime(this)">11:00-12:00</div>
                            <div class="time-slot" onclick="selectTime(this)">14:00-15:00</div>
                            <div class="time-slot" onclick="selectTime(this)">15:00-16:00</div>
                            <div class="time-slot disabled">16:00-17:00</div>
                            <div class="time-slot" onclick="selectTime(this)">17:00-18:00</div>
                        </div>
                    </div>
                </div>
                <div class="booking-form">
                    <div class="form-item">
                        <div class="form-label"><span class="required">*</span> 预约人姓名</div>
                        <input type="text" class="form-input" placeholder="请输入您的姓名" value="张三">
                    </div>
                    <div class="form-item">
                        <div class="form-label"><span class="required">*</span> 联系电话</div>
                        <input type="tel" class="form-input" placeholder="请输入手机号码" value="138****8888">
                    </div>
                    <div class="form-item">
                        <div class="form-label">备注信息</div>
                        <textarea class="form-input" placeholder="如有特殊需求请在此说明">想了解这款注射器的价格和库存