编辑页面

页面标题

有效期修改后将从当前时间重新计算过期时间

CSS文件（可选）

/* 刺猬云印 - 网上打印店样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #FF6B35;
    --primary-light: #FFE4D6;
    --success: #52C41A;
    --text-primary: #333;
    --text-secondary: #666;
    --text-light: #999;
    --border: #eee;
    --bg-light: #f7f7f7;
    --shadow: 0 2px 8px rgba(0,0,0,0.08);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg-light);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
    max-width: 100%;
    min-height: 100vh;
}

#app {
    min-height: 100vh;
    padding-bottom: 60px;
}

/* 顶部导航 */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 100;
    box-shadow: var(--shadow);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    max-width: 750px;
    margin: 0 auto;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-icon {
    width: 32px;
    height: 32px;
}

.logo-text {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-btn {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    position: relative;
}

.header-btn svg {
    width: 24px;
    height: 24px;
    fill: var(--text-secondary);
}

.cart-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--primary);
    color: #fff;
    font-size: 10px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* 主内容区 */
.main-content {
    padding-top: 56px;
}

/* 页面通用样式 */
.page {
    display: none;
    animation: fadeIn 0.2s ease;
}

.page.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 56px;
    z-index: 50;
}

.page-title {
    font-size: 17px;
    font-weight: 600;
    flex: 1;
    text-align: center;
}

.back-btn {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
}

.back-btn svg {
    width: 24px;
    height: 24px;
    fill: var(--text-primary);
}

/* 首页样式 */
#page-home {
    padding: 0;
}

/* 欢迎Banner */
.welcome-banner {
    background: linear-gradient(135deg, var(--primary) 0%, #FF8F65 100%);
    color: #fff;
    padding: 16px;
    margin: 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: transform 0.2s;
}

.welcome-banner:active {
    transform: scale(0.98);
}

.banner-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.banner-icon {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-icon svg {
    width: 24px;
    height: 24px;
    fill: #fff;
}

.banner-text {
    display: flex;
    flex-direction: column;
}

.banner-title {
    font-size: 16px;
    font-weight: 600;
}

.banner-desc {
    font-size: 12px;
    opacity: 0.9;
}

.banner-btn {
    background: #fff;
    color: var(--primary);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* 服务卡片 */
.service-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 12px;
    margin-top: 16px;
}

.service-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px 16px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: var(--shadow);
}

.service-card:active {
    transform: scale(0.97);
}

.card-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-icon svg {
    width: 40px;
    height: 40px;
}

.doc-icon {
    background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
}

.doc-icon svg {
    fill: #2E7D32;
}

.photo-icon {
    background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
}

.photo-icon svg {
    fill: #E65100;
}

.card-title {
    font-size: 16px;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.card-desc {
    font-size: 12px;
    color: var(--text-light);
    display: block;
    margin-bottom: 8px;
}

.card-price {
    font-size: 12px;
    color: var(--primary);
    font-weight: 600;
}

/* 快捷功能 */
.quick-actions {
    display: flex;
    justify-content: space-around;
    padding: 20px 12px;
    background: #fff;
    margin: 16px 12px;
    border-radius: 12px;
}

.quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.quick-item svg {
    width: 28px;
    height: 28px;
}

.quick-item span {
    font-size: 12px;
    color: var(--text-secondary);
}

/* 热门场景 */
.section-title {
    padding: 0 16px;
    margin: 20px 0 12px;
}

.section-title h3 {
    font-size: 16px;
    font-weight: 600;
}

.scene-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 16px;
}

.scene-tag {
    background: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.scene-tag:active {
    background: var(--primary-light);
    color: var(--primary);
}

/* 价格说明 */
.price-info {
    background: #fff;
    margin: 16px 12px;
    border-radius: 12px;
    padding: 16px;
}

.price-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--primary);
    font-weight: 600;
}

.price-header svg {
    width: 20px;
    height: 20px;
}

.price-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.price-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.price-row:last-child {
    border-bottom: none;
}

.price-highlight {
    color: var(--primary);
    font-weight: 600;
}

/* 文件上传页 */
#page-upload {
    padding-bottom: 80px;
}

.upload-area {
    background: #fff;
    margin: 16px;
    border-radius: 16px;
    border: 2px dashed var(--border);
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.upload-area:active {
    border-color: var(--primary);
    background: var(--primary-light);
}

.upload-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
}

.upload-text {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.upload-hint {
    font-size: 12px;
    color: var(--text-light);
}

/* 上传源 */
.upload-sources {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 16px;
}

.source-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.source-item svg {
    width: 40px;
    height: 40px;
}

.source-item span {
    font-size: 12px;
    color: var(--text-secondary);
}

/* 文件列表 */
.file-list {
    background: #fff;
    margin: 16px;
    border-radius: 12px;
    padding: 12px;
}

.file-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-weight: 600;
}

.clear-btn {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 12px;
    cursor: pointer;
}

.file-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.file-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-light);
    border-radius: 8px;
}

.file-icon {
    width: 40px;
    height: 40px;
    background: var(--primary-light);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-icon svg {
    width: 24px;
    height: 24px;
    fill: var(--primary);
}

.file-info {
    flex: 1;
}

.file-name {
    font-size: 14px;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-meta {
    font-size: 12px;
    color: var(--text-light);
}

.file-remove {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
}

.file-remove svg {
    width: 20px;
    height: 20px;
    fill: var(--text-light);
}

/* 底部操作栏 */
.bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    z-index: 100;
    max-width: 750px;
    margin: 0 auto;
}

.bar-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.file-count, .total-pages {
    font-size: 12px;
    color: var(--text-light);
}

.next-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 12px 32px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.next-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* 打印设置页 */
#page-settings {
    padding-bottom: 100px;
}

.settings-content {
    padding: 16px;
}

.preview-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.preview-info {
    flex: 1;
}

.preview-name {
    font-size: 14px;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.preview-pages {
    font-size: 12px;
    color: var(--text-light);
}

.preview-thumb {
    width: 60px;
    height: 80px;
    background: var(--bg-light);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-thumb svg {
    width: 32px;
    height: 32px;
}

/* 设置组 */
.settings-group {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}

.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.setting-item:last-child {
    border-bottom: none;
}

.setting-label {
    font-size: 14px;
}

.setting-value {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-light);
}

.setting-value svg {
    width: 20px;
    height: 20px;
}

.count-ctrl {
    display: flex;
    align-items: center;
    gap: 12px;
}

.count-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-input {
    border: none;
    outline: none;
    font-size: 14px;
    text-align: right;
    width: 100px;
}

/* 选项面板 */
.option-panel {
    display: none;
    background: #fff;
    margin-top: -1px;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}

.option-panel.show {
    display: block;
}

.panel-content {
    padding: 16px;
}

.panel-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}

.panel-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.panel-option {
    padding: 10px 16px;
    background: var(--bg-light);
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    border: 2px solid transparent;
}

.panel-option.selected {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}

/* 价格明细 */
.price-detail {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
}

.price-detail h4 {
    font-size: 14px;
    margin-bottom: 12px;
}

.price-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.discount {
    color: var(--success);
}

.price-total {
    display: flex;
    justify-content: space-between;
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1px solid var(--border);
    font-weight: 600;
}

.price-total span:last-child {
    color: var(--primary);
    font-size: 18px;
}

.preview-btn {
    background: #fff;
    color: var(--primary);
    border: 1px solid var(--primary);
    padding: 12px 24px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.add-cart-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 12px 32px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* 预览页 */
.preview-content {
    padding: 16px;
    background: var(--bg-light);
    min-height: 60vh;
}

.preview-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.preview-page {
    width: 120px;
    height: 170px;
    background: #fff;
    border-radius: 4px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.preview-page::before {
    content: attr(data-page);
    position: absolute;
    bottom: -20px;
    font-size: 10px;
    color: var(--text-light);
}

.page-content {
    font-size: 10px;
    color: #999;
    text-align: center;
}

.preview-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    z-index: 100;
    max-width: 750px;
    margin: 0 auto;
}

.preview-info-bar {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.preview-info-bar span:first-child {
    font-size: 14px;
    font-weight: 600;
}

.preview-info-bar span:last-child {
    font-size: 12px;
    color: var(--text-light);
}

.confirm-print-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 12px 32px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* 购物车页 */
#page-cart {
    padding-bottom: 80px;
}

.clear-cart-btn {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 14px;
    cursor: pointer;
}

.cart-content {
    padding: 16px;
}

.cart-empty {
    text-align: center;
    padding: 60px 0;
}

.cart-empty svg {
    width: 80px;
    height: 80px;
    margin-bottom: 16px;
}

.cart-empty p {
    color: var(--text-light);
    margin-bottom: 20px;
}

.go-shopping-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 12px 32px;
    border-radius: 24px;
    font-size: 14px;
    cursor: pointer;
}

.cart-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cart-item {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
}

.cart-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.cart-item-name {
    font-weight: 600;
}

.cart-item-remove {
    color: var(--text-light);
    font-size: 12px;
    cursor: pointer;
}

.cart-item-specs {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 12px;
}

.cart-item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-item-price {
    color: var(--primary);
    font-weight: 600;
}

.cart-item-count {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cart-count-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: #fff;
    font-size: 16px;
    cursor: pointer;
}

.cart-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    z-index: 100;
    max-width: 750px;
    margin: 0 auto;
}

.cart-total {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.total-amount {
    color: var(--primary);
    font-weight: 600;
    font-size: 18px;
}

.checkout-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 12px 32px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* 订单确认页 */
#page-checkout {
    padding-bottom: 80px;
}

.checkout-content {
    padding: 16px;
}

/* 收货地址 */
.address-section {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.address-section svg {
    width: 20px;
    height: 20px;
}

.address-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.address-default {
    background: var(--primary);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
}

.address-detail {
    flex: 1;
}

.address-contact {
    margin-bottom: 4px;
}

.address-text {
    font-size: 12px;
    color: var(--text-secondary);
}

/* 订单商品 */
.order-items {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-top: 12px;
}

.order-items h4 {
    font-size: 14px;
    margin-bottom: 12px;
}

.order-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.order-item:last-child {
    border-bottom: none;
}

.order-item-icon {
    width: 60px;
    height: 80px;
    background: var(--bg-light);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-item-icon svg {
    width: 32px;
    height: 32px;
    fill: #999;
}

.order-item-info {
    flex: 1;
}

.order-item-name {
    font-size: 14px;
    margin-bottom: 4px;
}

.order-item-specs {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 8px;
}

.order-item-price {
    color: var(--primary);
    font-weight: 600;
}

/* 配送方式 */
.shipping-section {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-top: 12px;
}

.shipping-section h4 {
    font-size: 14px;
    margin-bottom: 12px;
}

.shipping-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.shipping-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
}

.shipping-option.selected {
    border-color: var(--primary);
    background: var(--primary-light);
}

.shipping-name {
    font-size: 14px;
    font-weight: 600;
}

.shipping-time {
    font-size: 12px;
    color: var(--text-light);
}

.shipping-price {
    color: var(--primary);
    font-weight: 600;
}

/* 优惠券 */
.coupon-section {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-top: 12px;
}

.coupon-section h4 {
    font-size: 14px;
    margin-bottom: 12px;
}

.coupon-input-wrap {
    display: flex;
    gap: 8px;
}

.coupon-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    outline: none;
}

.coupon-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.coupon-tip {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-light);
}

.coupon-count {
    color: var(--primary);
}

/* 支付方式 */
.payment-section {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-top: 12px;
}

.payment-section h4 {
    font-size: 14px;
    margin-bottom: 12px;
}

.payment-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.payment-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    cursor: pointer;
}

.payment-option.selected .payment-check {
    background: var(--primary);
    border-color: var(--primary);
}

.payment-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.payment-info svg {
    width: 24px;
    height: 24px;
}

.payment-check {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-radius: 50%;
    position: relative;
}

.payment-option.selected .payment-check::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
}

/* 支付栏 */
.payment-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    z-index: 100;
    max-width: 750px;
    margin: 0 auto;
}

.payment-total {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.payment-total .amount {
    color: var(--primary);
    font-weight: 600;
    font-size: 20px;
}

.pay-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 14px 40px;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

/* 支付成功页 */
.success-content {
    text-align: center;
    padding: 60px 20px;
}

.success-icon {
    margin-bottom: 24px;
}

.success-icon svg {
    width: 80px;
    height: 80px;
}

.success-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 12px;
}

.success-desc {
    color: var(--text-secondary);
    margin-bottom: 32px;
}

.order-info {
    background: var(--bg-light);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 32px;
}

.order-info p {
    margin: 8px 0;
    color: var(--text-secondary);
}

.order-info span {
    color: var(--text-primary);
    font-weight: 600;
}

.success-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.view-order-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 14px 40px;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.back-home-btn {
    background: #fff;
    color: var(--primary);
    border: 1px solid var(--primary);
    padding: 14px 40px;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

/* 订单列表页 */
.order-tabs {
    display: flex;
    background: #fff;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
}

.order-tabs .tab {
    flex: 1;
    text-align: center;
    padding: 14px 0;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    position: relative;
}

.order-tabs .tab.active {
    color: var(--primary);
    font-weight: 600;
}

.order-tabs .tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
}

.order-list {
    padding: 16px;
}

.order-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.order-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.order-card-id {
    font-size: 12px;
    color: var(--text-light);
}

.order-card-status {
    font-size: 12px;
    color: var(--primary);
    font-weight: 600;
}

.order-card-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
}

.order-card-icon {
    width: 60px;
    height: 80px;
    background: var(--bg-light);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-card-icon svg {
    width: 32px;
    height: 32px;
    fill: #999;
}

.order-card-info {
    flex: 1;
}

.order-card-name {
    font-size: 14px;
    margin-bottom: 4px;
}

.order-card-specs {
    font-size: 12px;
    color: var(--text-light);
}

.order-card-price {
    text-align: right;
}

.order-card-amount {
    color: var(--primary);
    font-weight: 600;
}

.order-card-count {
    font-size: 12px;
    color: var(--text-light);
}

.order-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.order-card-total {
    font-size: 14px;
}

.order-card-total span {
    color: var(--primary);
    font-weight: 600;
}

.order-card-actions {
    display: flex;
    gap: 8px;
}

.action-outline {
    background: #fff;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
}

.action-filled {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
}

/* 订单详情页 */
.order-detail-content {
    padding: 16px;
    padding-bottom: 80px;
}

.order-status-bar {
    background: linear-gradient(135deg, var(--primary) 0%, #FF8F65 100%);
    color: #fff;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.status-icon {
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-icon svg {
    width: 28px;
    height: 28px;
    fill: #fff;
}

.status-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.status-desc {
    font-size: 12px;
    opacity: 0.9;
}

/* 物流信息 */
.logistics-info {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.logistics-info h4 {
    font-size: 14px;
    margin-bottom: 16px;
}

.logistics-timeline {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.timeline-item {
    display: flex;
    gap: 12px;
    position: relative;
}

.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 16px;
    bottom: -16px;
    width: 2px;
    background: var(--border);
}

.timeline-item.active::before {
    background: var(--primary);
}

.timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--border);
    flex-shrink: 0;
    margin-top: 4px;
}

.timeline-item.active .timeline-dot {
    background: var(--primary);
}

.timeline-content {
    flex: 1;
}

.timeline-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.timeline-time {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 4px;
}

.timeline-desc {
    font-size: 12px;
    color: var(--text-secondary);
}

/* 订单信息 */
.order-info-section {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.order-info-section h4 {
    font-size: 14px;
    margin-bottom: 12px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    color: var(--text-light);
    font-size: 13px;
}

.info-value {
    font-size: 13px;
}

/* 商品信息 */
.order-goods {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.order-goods h4 {
    font-size: 14px;
    margin-bottom: 12px;
}

/* 价格信息 */
.order-price {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.order-price .price-row.total {
    border-top: 1px solid var(--border);
    padding-top: 12px;
    margin-top: 8px;
    font-weight: 600;
}

.order-price .price-row.total span:last-child {
    color: var(--primary);
    font-size: 18px;
}

/* 收货地址 */
.order-address {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
}

.order-address h4 {
    font-size: 14px;
    margin-bottom: 8px;
}

.order-address p:first-of-type {
    margin-bottom: 4px;
}

.order-address p:last-of-type {
    color: var(--text-light);
    font-size: 12px;
}

/* 订单详情底部 */
.order-detail-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    z-index: 100;
    max-width: 750px;
    margin: 0 auto;
}

.footer-amount {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.footer-amount span:last-child {
    color: var(--primary);
    font-weight: 600;
    font-size: 18px;
}

.action-btn {
    padding: 10px 24px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    border: none;
}

.action-btn.primary {
    background: var(--primary);
    color: #fff;
}

.action-btn.secondary {
    background: #fff;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

/* 个人中心页 */
.profile-header {
    background: linear-gradient(135deg, var(--primary) 0%, #FF8F65 100%);
    color: #fff;
    padding: 24px 16px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.user-avatar svg {
    width: 60px;
    height: 60px;
}

.user-name {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}

.user-level {
    font-size: 12px;
    opacity: 0.9;
}

.user-stats {
    display: flex;
    justify-content: space-around;
}

.stat-item {
    text-align: center;
}

.stat-value {
    font-size: 20px;
    font-weight: 600;
    display: block;
}

.stat-label {
    font-size: 12px;
    opacity: 0.9;
}

/* 个人菜单 */
.profile-menu {
    background: #fff;
    margin: 16px 12px;
    border-radius: 12px;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.menu-item:last-child {
    border-bottom: none;
}

.menu-item svg:first-child {
    width: 24px;
    height: 24px;
    margin-right: 12px;
}

.menu-item span:first-of-type {
    flex: 1;
    font-size: 14px;
}

.menu-item .arrow {
    width: 20px;
    height: 20px;
}

/* 底部标签栏 */
.tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    display: flex;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    z-index: 100;
    max-width: 750px;
    margin: 0 auto;
}

.tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    color: var(--text-light);
    cursor: pointer;
    position: relative;
}

.tab-item.active {
    color: var(--primary);
}

.tab-item svg {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
}

.tab-item span {
    font-size: 10px;
}

.tab-badge {
    position: absolute;
    top: 2px;
    right: 50%;
    transform: translateX(16px);
    background: var(--primary);
    color: #fff;
    font-size: 10px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* 地址管理页 */
.add-address-btn {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 14px;
    cursor: pointer;
}

.address-list {
    padding: 16px;
}

.address-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.address-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.address-main {
    flex: 1;
}

.address-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    margin-bottom: 8px;
}

.address-tag.default {
    background: var(--primary);
    color: #fff;
}

.address-detail {
    font-size: 14px;
    margin-bottom: 8px;
}

.address-contact {
    font-size: 12px;
    color: var(--text-light);
}

.address-contact span:first-child {
    margin-right: 16px;
}

.address-actions {
    display: flex;
    gap: 12px;
}

.edit-btn, .set-default-btn {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 12px;
    cursor: pointer;
}

/* 优惠券页 */
.coupon-tabs {
    display: flex;
    background: #fff;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
}

.coupon-tabs .tab {
    flex: 1;
    text-align: center;
    padding: 14px 0;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    position: relative;
}

.coupon-tabs .tab.active {
    color: var(--primary);
    font-weight: 600;
}

.coupon-tabs .tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
}

.coupon-list {
    padding: 16px;
}

.coupon-card {
    background: linear-gradient(135deg, var(--primary) 0%, #FF8F65 100%);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.coupon-card.available {
    background: linear-gradient(135deg, var(--primary) 0%, #FF8F65 100%);
}

.coupon-card.used, .coupon-card.expired {
    background: #ccc;
}

.coupon-left {
    text-align: center;
    padding-right: 16px;
    border-right: 1px dashed rgba(255,255,255,0.5);
    margin-right: 16px;
}

.coupon-price {
    font-size: 28px;
    font-weight: 600;
    display: block;
}

.coupon-limit {
    font-size: 10px;
    opacity: 0.9;
}

.coupon-right {
    flex: 1;
}

.coupon-name {
    font-size: 14px;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.coupon-desc {
    font-size: 12px;
    opacity: 0.9;
    display: block;
    margin-bottom: 4px;
}

.coupon-date {
    font-size: 10px;
    opacity: 0.8;
}

.coupon-use-btn {
    background: #fff;
    color: var(--primary);
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* 帮助中心页 */
.help-content {
    padding: 16px;
}

.help-section {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.help-section h4 {
    font-size: 14px;
    margin-bottom: 16px;
}

.help-item {
    border-bottom: 1px solid var(--border);
}

.help-item:last-child {
    border-bottom: none;
}

.help-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    cursor: pointer;
}

.help-q svg {
    width: 20px;
    height: 20px;
    transition: transform 0.2s;
}

.help-item.open .help-q svg {
    transform: rotate(90deg);
}

.help-a {
    display: none;
    padding: 0 0 14px 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.8;
}

.help-item.open .help-a {
    display: block;
}

.contact-section {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
}

.contact-section h4 {
    font-size: 14px;
    margin-bottom: 16px;
}

.contact-btn {
    width: 100%;
    background: #07C160;
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.contact-btn svg {
    width: 24px;
    height: 24px;
}

.service-time {
    text-align: center;
    font-size: 12px;
    color: var(--text-light);
    margin-top: 12px;
}

/* 意见反馈页 */
.feedback-content {
    padding: 16px;
}

.feedback-type {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.type-label {
    font-size: 14px;
    font-weight: 600;
    display: block;
    margin-bottom: 12px;
}

.type-options {
    display: flex;
    gap: 10px;
}

.type-option {
    padding: 8px 16px;
    background: var(--bg-light);
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
}

.type-option.selected {
    background: var(--primary-light);
    color: var(--primary);
}

.feedback-textarea {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.feedback-textarea textarea {
    width: 100%;
    height: 150px;
    border: none;
    outline: none;
    font-size: 14px;
    resize: none;
}

.feedback-contact {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
}

.feedback-contact input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 14px;
}

.submit-feedback-btn {
    width: 100%;
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

/* 打印记录页 */
.history-list {
    padding: 16px;
}

.history-item {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.history-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.history-name {
    font-size: 14px;
    font-weight: 600;
}

.history-time {
    font-size: 12px;
    color: var(--text-light);
}

.history-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-light);
}

/* Toast提示 */
.toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.75);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.toast.show {
    opacity: 1;
    visibility: visible;
}

/* 分享Banner */
.share-banner {
    background: linear-gradient(135deg, #FF6B35 0%, #FF8F65 100%);
    color: #fff;
    padding: 14px 16px;
    margin: 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.share-banner-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.share-icon {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.share-icon svg {
    width: 24px;
    height: 24px;
}

.share-text {
    display: flex;
    flex-direction: column;
}

.share-title {
    font-size: 15px;
    font-weight: 600;
}

.share-desc {
    font-size: 11px;
    opacity: 0.9;
}

.share-btn {
    background: #fff;
    color: var(--primary);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* 菜单标签 */
.menu-tag {
    background: var(--primary-light);
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    margin-left: auto;
    margin-right: 8px;
}

/* 积分页面 */
.points-header {
    background: linear-gradient(135deg, var(--primary) 0%, #FF8F65 100%);
    color: #fff;
    padding: 24px 16px;
    text-align: center;
}

.points-balance {
    margin-bottom: 16px;
}

.points-label {
    font-size: 14px;
    opacity: 0.9;
    display: block;
    margin-bottom: 8px;
}

.points-value {
    font-size: 36px;
    font-weight: 700;
}

.points-actions {
    display: flex;
    justify-content: center;
}

.share-invite-btn {
    background: rgba(255,255,255,0.2);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.share-invite-btn svg {
    width: 18px;
    height: 18px;
}

.points-tabs {
    display: flex;
    background: #fff;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
}

.points-tabs .tab {
    flex: 1;
    text-align: center;
    padding: 14px 0;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    position: relative;
}

.points-tabs .tab.active {
    color: var(--primary);
    font-weight: 600;
}

.points-tabs .tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
}

.points-list {
    padding: 12px 16px;
}

.points-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    margin-bottom: 10px;
}

.points-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.points-item-icon.earn {
    background: #E6F7E9;
}

.points-item-icon.spend {
    background: #FFF1F0;
}

.points-item-icon svg {
    width: 24px;
    height: 24px;
}

.points-item-info {
    flex: 1;
}

.points-item-title {
    font-size: 14px;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.points-item-time {
    font-size: 12px;
    color: var(--text-light);
}

.points-item-amount {
    font-size: 18px;
    font-weight: 600;
}

.points-item-amount.earn {
    color: #52C41A;
}

.points-item-amount.spend {
    color: #FF4D4F;
}

.points-earn-tips {
    background: #fff;
    margin: 16px 12px;
    border-radius: 12px;
    padding: 16px;
}

.points-earn-tips h4 {
    font-size: 14px;
    margin-bottom: 16px;
}

.earn-method {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.method-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    background: var(--bg-light);
    border-radius: 12px;
}

.method-icon {
    width: 40px;
    height: 40px;
    background: var(--primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.method-icon svg {
    width: 22px;
    height: 22px;
}

.method-name {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

.method-reward {
    font-size: 12px;
    color: var(--primary);
}

/* 分享弹窗 */
.share-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    display: none;
    align-items: flex-end;
    justify-content: center;
}

.share-modal.show {
    display: flex;
}

.share-modal-content {
    background: #fff;
    width: 100%;
    max-width: 750px;
    border-radius: 16px 16px 0 0;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.share-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.share-modal-header h3 {
    font-size: 16px;
    font-weight: 600;
}

.share-modal-close {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
}

.share-modal-close svg {
    width: 24px;
    height: 24px;
}

.share-modal-body {
    padding: 24px 16px 40px;
}

.share-reward-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 24px;
}

.reward-item {
    text-align: center;
}

.reward-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary);
    display: block;
}

.reward-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.reward-divider {
    font-size: 14px;
    color: var(--text-light);
}

.share-invite-code {
    text-align: center;
    background: var(--bg-light);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.code-label {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 8px;
}

.code-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 4px;
}

.share-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #07C160;
    color: #fff;
    padding: 14px;
    border-radius: 24px;
    cursor: pointer;
    margin-bottom: 20px;
}

.share-link svg {
    width: 20px;
    height: 20px;
}

.share-link span {
    font-size: 15px;
    font-weight: 600;
}

.share-platforms {
    display: flex;
    justify-content: center;
    gap: 24px;
}

.platform-btn {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.platform-btn svg {
    width: 44px;
    height: 44px;
}

.platform-btn span {
    font-size: 12px;
    color: var(--text-secondary);
}

JS文件（可选）

// 刺猬云印 - 网上打印店 JavaScript

// ==================== 数据状态 ====================
const state = {
    currentPage: 'home',
    pageHistory: ['home'],
    printType: 'document', // document | photo
    files: [],
    settings: {
        paper: 'A4',
        color: 'black',
        side: 'single',
        binding: 'none',
        copies: 1,
        pageRange: ''
    },
    cart: [],
    orders: [],
    selectedShipping: 0,
    selectedCoupon: null,
    orderFilter: 'all',
    couponFilter: 'available',
    points: 2580,
    pointsFilter: 'all',
    inviteCode: 'YINP' + Math.random().toString(36).substring(2, 6).toUpperCase()
};

// ==================== 页面导航 ====================
function showPage(pageId) {
    // 隐藏所有页面
    document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
    
    // 显示目标页面
    const targetPage = document.getElementById('page-' + pageId);
    if (targetPage) {
        targetPage.classList.add('active');
        
        // 记录历史
        if (state.currentPage !== pageId) {
            state.pageHistory.push(pageId);
        }
        state.currentPage = pageId;
    }
    
    // 刷新页面数据
    refreshPageData(pageId);
}

function goBack() {
    if (state.pageHistory.length > 1) {
        state.pageHistory.pop();
        const prevPage = state.pageHistory[state.pageHistory.length - 1];
        showPage(prevPage);
        state.pageHistory.pop(); // 移除重复添加的
    } else {
        showPage('home');
    }
}

// ==================== 页面数据刷新 ====================
function refreshPageData(page) {
    switch(page) {
        case 'cart':
            renderCart();
            break;
        case 'orders':
            renderOrders();
            break;
        case 'checkout':
            renderCheckout();
            break;
        case 'address':
            renderAddresses();
            break;
        case 'coupon':
            renderCoupons();
            break;
    }
    updateCartBadge();
}

// ==================== 打印流程 ====================
function startPrint(type) {
    state.printType = type;
    state.files = [];
    state.settings = {
        paper: type === 'document' ? 'A4' : '6寸',
        color: 'color',
        side: 'single',
        binding: 'none',
        copies: 1,
        pageRange: ''
    };
    
    document.getElementById('uploadTitle').textContent = type === 'document' ? '文档打印' : '照片冲印';
    clearFileList();
    showPage('upload');
}

function handleFileSelect(event) {
    const files = event.target.files;
    for (let file of files) {
        addFile(file);
    }
    event.target.value = '';
}

function addFile(file) {
    const fileData = {
        id: Date.now() + Math.random(),
        name: file.name,
        size: file.size,
        type: file.type,
        file: file,
        pages: Math.ceil(Math.random() * 10) + 1 // 模拟页数
    };
    
    state.files.push(fileData);
    renderFileList();
    updateUploadSummary();
}

function removeFile(id) {
    state.files = state.files.filter(f => f.id !== id);
    renderFileList();
    updateUploadSummary();
}

function clearFiles() {
    state.files = [];
    renderFileList();
    updateUploadSummary();
}

function renderFileList() {
    const container = document.getElementById('fileItems');
    if (!container) return;
    
    if (state.files.length === 0) {
        container.innerHTML = '<div class="empty-hint" style="text-align:center;padding:20px;color:#999;">暂无上传文件</div>';
        return;
    }
    
    container.innerHTML = state.files.map(file => {
        const size = formatFileSize(file.size);
        const icon = getFileIcon(file.type);
        return `
            <div class="file-item">
                <div class="file-icon">
                    <svg viewBox="0 0 24 24" fill="currentColor">${icon}</svg>
                </div>
                <div class="file-info">
                    <p class="file-name">${file.name}</p>
                    <p class="file-meta">${size} · ${file.pages}页</p>
                </div>
                <button class="file-remove" onclick="removeFile(${file.id})">
                    <svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
                </button>
            </div>
        `;
    }).join('');
}

function formatFileSize(bytes) {
    if (bytes < 1024) return bytes + 'B';
    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + 'KB';
    return (bytes / (1024 * 1024)).toFixed(1) + 'MB';
}

function getFileIcon(type) {
    if (type.includes('pdf')) return '<path d="M8 5v14l11-7z"/>';
    if (type.includes('word') || type.includes('document')) return '<path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>';
    if (type.includes('image')) return '<path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>';
    return '<path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>';
}

function updateUploadSummary() {
    const fileCount = state.files.length;
    const totalPages = state.files.reduce((sum, f) => sum + f.pages, 0) * state.settings.copies;
    
    document.getElementById('fileCount').textContent = `已选 ${fileCount} 个文件`;
    document.getElementById('totalPages').textContent = `共 ${totalPages} 页`;
    document.getElementById('nextBtn').disabled = fileCount === 0;
}

function clearFileList() {
    const container = document.getElementById('fileItems');
    if (container) {
        container.innerHTML = '<div class="empty-hint" style="text-align:center;padding:20px;color:#999;">暂无上传文件</div>';
    }
}

function selectSource(source) {
    showToast('请从微信聊天记录或相册选择文件');
}

// ==================== 打印设置 ====================
function goToSettings() {
    if (state.files.length === 0) {
        showToast('请先上传文件');
        return;
    }
    showPage('settings');
    renderSettings();
}

function renderSettings() {
    if (state.files.length === 0) return;
    
    const file = state.files[0];
    document.getElementById('previewName').textContent = file.name;
    document.getElementById('previewPages').textContent = `共 ${file.pages} 页`;
    document.getElementById('copyCount').textContent = state.settings.copies;
    document.getElementById('pageRange').value = state.settings.pageRange;
    
    // 更新选项显示
    document.getElementById('paperValue').textContent = 
        state.printType === 'document' ? 'A4 (210x297mm)' : '6寸 (4x6英寸)';
    document.getElementById('colorValue').textContent = 
        state.settings.color === 'black' ? '黑白' : '彩色';
    document.getElementById('sideValue').textContent = 
        state.settings.side === 'single' ? '单面' : '双面';
    document.getElementById('bindingValue').textContent = 
        getBindingName(state.settings.binding);
    
    calculatePrice();
}

function getBindingName(binding) {
    const names = {
        'none': '无装订',
        'staple': '订书钉',
        'riding': '骑马钉',
        'glue': '胶装'
    };
    return names[binding] || binding;
}

function toggleOption(type) {
    const panel = document.getElementById('optionPanel');
    const content = document.getElementById('panelContent');
    
    // 关闭其他面板
    panel.classList.remove('show');
    
    let options = [];
    switch(type) {
        case 'paper':
            options = state.printType === 'document' 
                ? [['A4', 'A4 (210x297mm)'], ['A3', 'A3 (297x420mm)'], ['B5', 'B5 (182x257mm)']]
                : [['6寸', '6寸 (4x6英寸)'], ['5寸', '5寸 (3.5x5英寸)'], ['8寸', '8寸 (6x8英寸)']];
            break;
        case 'color':
            options = [['black', '黑白'], ['color', '彩色']];
            break;
        case 'side':
            options = [['single', '单面'], ['double', '双面']];
            break;
        case 'binding':
            options = [['none', '无装订'], ['staple', '订书钉'], ['riding', '骑马钉'], ['glue', '胶装']];
            break;
    }
    
    content.innerHTML = `
        <div class="panel-options">
            ${options.map(opt => `
                <div class="panel-option ${state.settings[type] === opt[0] ? 'selected' : ''}" 
                     onclick="selectOption('${type}', '${opt[0]}', '${opt[1]}')">
                    ${opt[1]}
                </div>
            `).join('')}
        </div>
    `;
    
    panel.classList.add('show');
}

function selectOption(type, value, display) {
    state.settings[type] = value;
    document.getElementById(type + 'Value').textContent = display;
    document.getElementById('optionPanel').classList.remove('show');
    calculatePrice();
}

function changeCount(delta) {
    state.settings.copies = Math.max(1, state.settings.copies + delta);
    document.getElementById('copyCount').textContent = state.settings.copies;
    updateUploadSummary();
    calculatePrice();
}

function calculatePrice() {
    const totalPages = state.files.reduce((sum, f) => sum + f.pages, 0) * state.settings.copies;
    const pricePerPage = 0.05; // 5分/页
    const printFee = totalPages * pricePerPage;
    
    // 模拟运费
    const subtotal = printFee;
    const shippingFee = subtotal >= 1.9 ? 0 : 6;
    const discount = state.selectedCoupon ? state.selectedCoupon.value : 0;
    
    const total = printFee + shippingFee - discount;
    
    document.getElementById('printFee').textContent = '¥' + printFee.toFixed(2);
    document.getElementById('shippingFee').textContent = shippingFee === 0 ? '¥0.00' : '¥' + shippingFee.toFixed(2);
    document.getElementById('discountFee').textContent = '-¥' + discount.toFixed(2);
    document.getElementById('totalPrice').textContent = '¥' + Math.max(0, total).toFixed(2);
    
    return Math.max(0, total);
}

function addToCart() {
    if (state.files.length === 0) {
        showToast('请先上传文件');
        return;
    }
    
    const cartItem = {
        id: Date.now(),
        files: [...state.files],
        settings: {...state.settings},
        printType: state.printType,
        price: calculatePrice()
    };
    
    state.cart.push(cartItem);
    showToast('已加入购物车');
    updateCartBadge();
    
    // 清空当前选择
    state.files = [];
    showPage('cart');
}

function goToPreview() {
    showPage('preview');
    renderPreview();
}

function renderPreview() {
    const container = document.getElementById('previewPagesContainer');
    const totalPages = state.files.reduce((sum, f) => sum + f.pages, 0);
    
    document.getElementById('previewFileName').textContent = state.files[0]?.name || 'document.pdf';
    document.getElementById('previewFileInfo').textContent = `第 1-${totalPages} 页`;
    
    container.innerHTML = Array.from({length: Math.min(totalPages, 5)}, (_, i) => `
        <div class="preview-page" data-page="第${i + 1}页">
            <div class="page-content">
                <svg viewBox="0 0 48 48" fill="#ccc"><path d="M28 4H12C9.79 4 8 5.79 8 8v32c0 2.21 1.79 4 4 4h24c2.21 0 4-1.79 4-4V16L28 4z"/></svg>
                <p style="margin-top:8px;">第 ${i + 1} 页</p>
            </div>
        </div>
    `).join('');
}

function goToCheckout() {
    if (state.cart.length === 0 && state.files.length > 0) {
        addToCart();
        return;
    }
    
    if (state.cart.length === 0) {
        showToast('购物车为空');
        return;
    }
    
    showPage('checkout');
    renderCheckout();
}

// ==================== 购物车 ====================
function renderCart() {
    const emptyEl = document.getElementById('cartEmpty');
    const listEl = document.getElementById('cartList');
    const footerEl = document.getElementById('cartFooter');
    
    if (state.cart.length === 0) {
        emptyEl.style.display = 'block';
        listEl.style.display = 'none';
        footerEl.style.display = 'none';
        return;
    }
    
    emptyEl.style.display = 'none';
    listEl.style.display = 'flex';
    footerEl.style.display = 'flex';
    
    listEl.innerHTML = state.cart.map((item, index) => {
        const fileName = item.files[0]?.name || '未命名';
        const specs = `${item.settings.paper} ${item.settings.color === 'black' ? '黑白' : '彩色'} ${item.settings.side === 'single' ? '单面' : '双面'}`;
        const totalPages = item.files.reduce((sum, f) => sum + f.pages, 0) * item.settings.copies;
        
        return `
            <div class="cart-item">
                <div class="cart-item-header">
                    <span class="cart-item-name">${fileName}</span>
                    <span class="cart-item-remove" onclick="removeCartItem(${index})">删除</span>
                </div>
                <p class="cart-item-specs">${specs} · 共${totalPages}页 · ${item.settings.copies}份</p>
                <div class="cart-item-footer">
                    <span class="cart-item-price">¥${item.price.toFixed(2)}</span>
                    <div class="cart-item-count">
                        <button class="cart-count-btn" onclick="updateCartCount(${index}, -1)">-</button>
                        <span>${item.settings.copies}</span>
                        <button class="cart-count-btn" onclick="updateCartCount(${index}, 1)">+</button>
                    </div>
                </div>
            </div>
        `;
    }).join('');
    
    const total = state.cart.reduce((sum, item) => sum + item.price, 0);
    document.getElementById('cartTotalAmount').textContent = '¥' + total.toFixed(2);
}

function removeCartItem(index) {
    state.cart.splice(index, 1);
    renderCart();
    updateCartBadge();
}

function updateCartCount(index, delta) {
    const item = state.cart[index];
    item.settings.copies = Math.max(1, item.settings.copies + delta);
    item.price = item.price; // 重新计算价格
    renderCart();
}

function clearCart() {
    state.cart = [];
    renderCart();
    updateCartBadge();
}

function updateCartBadge() {
    const count = state.cart.length;
    document.getElementById('cartBadge').textContent = count;
    document.getElementById('tabCartBadge').textContent = count;
}

// ==================== 订单确认 ====================
function renderCheckout() {
    const container = document.getElementById('checkoutItems');
    
    container.innerHTML = state.cart.map(item => {
        const fileName = item.files[0]?.name || '未命名';
        const specs = `${item.settings.paper} | ${item.settings.color === 'black' ? '黑白' : '彩色'} | ${item.settings.side === 'single' ? '单面' : '双面'}`;
        const totalPages = item.files.reduce((sum, f) => sum + f.pages, 0) * item.settings.copies;
        
        return `
            <div class="order-item">
                <div class="order-item-icon">
                    <svg viewBox="0 0 48 48"><path d="M28 4H12C9.79 4 8 5.79 8 8v32c0 2.21 1.79 4 4 4h24c2.21 0 4-1.79 4-4V16L28 4z"/></svg>
                </div>
                <div class="order-item-info">
                    <p class="order-item-name">${fileName}</p>
                    <p class="order-item-specs">${specs}</p>
                    <p class="order-item-specs">共 ${totalPages} 页</p>
                </div>
                <span class="order-item-price">¥${item.price.toFixed(2)}</span>
            </div>
        `;
    }).join('');
    
    updatePaymentAmount();
}

function selectShipping(el, price) {
    document.querySelectorAll('.shipping-option').forEach(opt => opt.classList.remove('selected'));
    el.classList.add('selected');
    state.selectedShipping = price;
    updatePaymentAmount();
}

function updatePaymentAmount() {
    const goodsTotal = state.cart.reduce((sum, item) => sum + item.price, 0);
    const total = goodsTotal + state.selectedShipping - (state.selectedCoupon?.value || 0);
    document.getElementById('paymentAmount').textContent = '¥' + Math.max(0, total).toFixed(2);
}

function selectPayment(el) {
    document.querySelectorAll('.payment-option').forEach(opt => opt.classList.remove('selected'));
    el.classList.add('selected');
}

function applyCoupon() {
    const input = document.getElementById('couponInput');
    if (input.value === 'HEDGEHOG') {
        state.selectedCoupon = { value: 2, name: '测试优惠券' };
        showToast('优惠码已使用，减免¥2.00');
    } else {
        state.selectedCoupon = null;
        showToast('优惠码无效');
    }
    updatePaymentAmount();
}

function submitOrder() {
    // 生成订单号
    const orderNo = 'HP' + new Date().getFullYear() + 
        String(new Date().getMonth() + 1).padStart(2, '0') + 
        String(new Date().getDate()).padStart(2, '0') + 
        String(Date.now()).slice(-6);
    
    const order = {
        id: Date.now(),
        orderNo: orderNo,
        items: [...state.cart],
        total: parseFloat(document.getElementById('paymentAmount').textContent.replace('¥', '')),
        shipping: state.selectedShipping,
        address: {
            name: document.getElementById('consignee').textContent,
            phone: document.getElementById('phone').textContent,
            address: document.getElementById('addressText').textContent
        },
        status: 'pending',
        createTime: new Date().toLocaleString('zh-CN')
    };
    
    state.orders.push(order);
    
    // 显示支付成功
    document.getElementById('orderNo').textContent = orderNo;
    document.getElementById('payAmount').textContent = '¥' + order.total.toFixed(2);
    
    // 清空购物车
    state.cart = [];
    updateCartBadge();
    
    showPage('success');
}

function viewOrder() {
    showPage('orderDetail');
    renderOrderDetail(state.orders[state.orders.length - 1]);
}

// ==================== 订单列表 ====================
function renderOrders() {
    const container = document.getElementById('orderList');
    
    let filteredOrders = state.orders;
    if (state.orderFilter !== 'all') {
        filteredOrders = state.orders.filter(o => o.status === state.orderFilter);
    }
    
    if (filteredOrders.length === 0) {
        container.innerHTML = `
            <div style="text-align:center;padding:60px 20px;color:#999;">
                <p>暂无订单</p>
            </div>
        `;
        return;
    }
    
    container.innerHTML = filteredOrders.map(order => {
        const statusText = {
            'pending': '待付款',
            'processing': '处理中',
            'shipped': '已发货',
            'completed': '已完成'
        };
        
        const fileName = order.items[0]?.files[0]?.name || '未命名';
        
        return `
            <div class="order-card" onclick="showOrderDetail(${order.id})">
                <div class="order-card-header">
                    <span class="order-card-id">${order.orderNo}</span>
                    <span class="order-card-status">${statusText[order.status]}</span>
                </div>
                <div class="order-card-item">
                    <div class="order-card-icon">
                        <svg viewBox="0 0 48 48"><path d="M28 4H12C9.79 4 8 5.79 8 8v32c0 2.21 1.79 4 4 4h24c2.21 0 4-1.79 4-4V16L28 4z"/></svg>
                    </div>
                    <div class="order-card-info">
                        <p class="order-card-name">${fileName}</p>
                        <p class="order-card-specs">共${order.items.length}件商品</p>
                    </div>
                    <div class="order-card-price">
                        <span class="order-card-amount">¥${order.total.toFixed(2)}</span>
                    </div>
                </div>
                <div class="order-card-footer">
                    <span class="order-card-total">合计：<span>¥${order.total.toFixed(2)}</span></span>
                    <div class="order-card-actions">
                        ${order.status === 'pending' ? '<button class="action-filled" onclick="event.stopPropagation();payOrder(' + order.id + ')">去支付</button>' : ''}
                        <button class="action-outline" onclick="event.stopPropagation();showOrderDetail(${order.id})">查看详情</button>
                    </div>
                </div>
            </div>
        `;
    }).join('');
}

function filterOrders(filter) {
    state.orderFilter = filter;
    document.querySelectorAll('.order-tabs .tab').forEach(tab => {
        tab.classList.toggle('active', tab.textContent.includes(
            filter === 'all' ? '全部' : 
            filter === 'pending' ? '待付款' : 
            filter === 'processing' ? '处理中' : 
            filter === 'shipped' ? '已发货' : '已完成'
        ));
    });
    renderOrders();
}

function showOrderDetail(orderId) {
    const order = state.orders.find(o => o.id === orderId);
    if (order) {
        showPage('orderDetail');
        renderOrderDetail(order);
    }
}

function renderOrderDetail(order) {
    if (!order) return;
    
    const statusMap = {
        'pending': { name: '等待付款', desc: '请在30分钟内完成支付', icon: 'M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4z' },
        'processing': { name: '处理中', desc: '商品正在打印中', icon: 'M19.5 3.5L18 2l-1.5 1.5L15 2l-1.5 1.5L12 2l-1.5 1.5L9 2 7.5 3.5 6 2v14H3v3c0 1.66 1.34 3 3 3h12c1.66 0 3-1.34 3-3V2l-1.5 1.5zm-.5 15c0 .55-.45 1-1 1H6c-.55 0-1-.45-1-1v-1h14v1zm0-3H8V7h11v8.5z' },
        'shipped': { name: '已发货', desc: '商品已从工厂发出', icon: 'M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4z' },
        'completed': { name: '已完成', desc: '订单已完成', icon: 'M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' }
    };
    
    const status = statusMap[order.status];
    
    document.getElementById('orderStatusName').textContent = status.name;
    document.getElementById('orderStatusDesc').textContent = status.desc;
    document.getElementById('detailOrderNo').textContent = order.orderNo;
    document.getElementById('detailOrderTime').textContent = order.createTime;
    document.getElementById('detailTotalPrice').textContent = '¥' + order.total.toFixed(2);
    document.getElementById('detailFooterAmount').textContent = '¥' + order.total.toFixed(2);
    document.getElementById('detailAddress').textContent = order.address.address;
    document.getElementById('detailContact').textContent = order.address.name + ' ' + order.address.phone;
    
    // 渲染商品
    const goodsContainer = document.getElementById('detailGoods');
    goodsContainer.innerHTML = order.items.map(item => {
        const fileName = item.files[0]?.name || '未命名';
        return `
            <div class="order-item">
                <div class="order-item-icon">
                    <svg viewBox="0 0 48 48"><path d="M28 4H12C9.79 4 8 5.79 8 8v32c0 2.21 1.79 4 4 4h24c2.21 0 4-1.79 4-4V16L28 4z"/></svg>
                </div>
                <div class="order-item-info">
                    <p class="order-item-name">${fileName}</p>
                </div>
            </div>
        `;
    }).join('');
    
    // 更新按钮状态
    const actionBtn = document.getElementById('orderActionBtn');
    if (order.status === 'pending') {
        actionBtn.textContent = '去支付';
        actionBtn.onclick = () => payOrder(order.id);
    } else if (order.status === 'shipped') {
        actionBtn.textContent = '查看物流';
        actionBtn.onclick = () => showToast('物流信息：顺丰SF1234567890');
    } else {
        actionBtn.style.display = 'none';
    }
}

function payOrder(orderId) {
    const order = state.orders.find(o => o.id === orderId);
    if (order) {
        order.status = 'processing';
        showToast('支付成功');
        showPage('orders');
        renderOrders();
    }
}

function handleOrderAction() {
    showToast('操作完成');
}

// ==================== 地址管理 ====================
function renderAddresses() {
    // 使用默认地址
}

function addNewAddress() {
    showToast('添加地址功能');
}

function editAddress(index) {
    showToast('编辑地址功能');
}

function setDefaultAddress(index) {
    showToast('已设为默认地址');
}

// ==================== 优惠券 ====================
function renderCoupons() {
    // 静态展示
}

function filterCoupons(filter) {
    state.couponFilter = filter;
    document.querySelectorAll('.coupon-tabs .tab').forEach(tab => {
        tab.classList.toggle('active', tab.textContent.includes(
            filter === 'available' ? '可用' : 
            filter === 'used' ? '已使用' : '已过期'
        ));
    });
}

// ==================== 帮助中心 ====================
function toggleHelp(el) {
    el.parentElement.classList.toggle('open');
}

// ==================== 意见反馈 ====================
function selectFeedbackType(el, type) {
    document.querySelectorAll('.type-option').forEach(opt => opt.classList.remove('selected'));
    el.classList.add('selected');
}

function submitFeedback() {
    const text = document.getElementById('feedbackText').value;
    if (!text.trim()) {
        showToast('请输入反馈内容');
        return;
    }
    showToast('反馈已提交，感谢您的建议');
    document.getElementById('feedbackText').value = '';
}

// ==================== 积分功能 ====================
function renderPoints() {
    // 更新积分显示
    const pointsStr = state.points.toLocaleString();
    document.getElementById('pointsValue').textContent = pointsStr;
    document.getElementById('userPoints').textContent = pointsStr;
    document.getElementById('inviteCode').textContent = state.inviteCode;
}

function filterPoints(filter) {
    state.pointsFilter = filter;
    document.querySelectorAll('.points-tabs .tab').forEach(tab => {
        tab.classList.toggle('active', tab.textContent.includes(
            filter === 'all' ? '全部' : 
            filter === 'earn' ? '收入' : '支出'
        ));
    });
    // 实际项目中这里会重新渲染积分列表
}

function showShareModal() {
    document.getElementById('shareModal').classList.add('show');
    document.getElementById('inviteCode').textContent = state.inviteCode;
}

function closeShareModal() {
    document.getElementById('shareModal').classList.remove('show');
}

function copyInviteLink() {
    const inviteLink = 'https://yinpu.example.com/invite?code=' + state.inviteCode;
    // 模拟复制到剪贴板
    if (navigator.clipboard) {
        navigator.clipboard.writeText(inviteLink).then(() => {
            showToast('邀请链接已复制到剪贴板');
        }).catch(() => {
            showToast('复制成功，请分享给好友');
        });
    } else {
        showToast('邀请链接已生成');
    }
}

function shareTo(platform) {
    const inviteLink = 'https://yinpu.example.com/invite?code=' + state.inviteCode;
    const shareText = '邀请码：' + state.inviteCode + '，注册云印铺，双方各得50积分！';
    
    switch(platform) {
        case 'wechat':
            showToast('请在微信中粘贴分享');
            // 模拟分享
            break;
        case 'qq':
            showToast('请在QQ中粘贴分享');
            break;
        case 'moments':
            showToast('朋友圈分享功能');
            break;
    }
    
    // 模拟获得积分（实际项目中需要在后台验证）
    setTimeout(() => {
        state.points += 50;
        renderPoints();
        showToast('恭喜获得50积分！');
    }, 1000);
}

// ==================== 工具函数 ====================
function showToast(message) {
    const toast = document.getElementById('toast');
    toast.textContent = message;
    toast.classList.add('show');
    
    setTimeout(() => {
        toast.classList.remove('show');
    }, 2000);
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    // 初始化首页显示
    showPage('home');
    
    // 初始化积分显示
    renderPoints();
    
    // 点击面板外部关闭选项面板
    document.addEventListener('click', function(e) {
        if (!e.target.closest('.setting-item') && !e.target.closest('.option-panel')) {
            document.getElementById('optionPanel')?.classList.remove('show');
        }
    });
    
    // 点击弹窗外部关闭分享弹窗
    document.getElementById('shareModal')?.addEventListener('click', function(e) {
        if (e.target === this) {
            closeShareModal();
        }
    });
});

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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
        <!-- 顶部导航 -->
        <header class="header">
            <div class="header-content">
                <div class="logo">
                    <svg class="logo-icon" viewBox="0 0 40 40" fill="none">
                        <circle cx="20" cy="20" r="18" fill="#FF6B35"/>
                        <path d="M12 16C12 14 14 12 20 12C26 12 28 14 28 16V28C28 30 26 32 20 32C14 32 12 30 12 28V16Z" fill="#FFE4D6"/>
                        <circle cx="16" cy="20" r="2" fill="#333"/>
                        <circle cx="24" cy="20" r="2" fill="#333"/>
                        <path d="M16 25C16 25 18 27 20 27C22 27 24 25 24 25" stroke="#333" stroke-width="1.5" stroke-linecap="round"/>
                        <path d="M8 20L12 18M32 20L28 18M8 24L12 26M32 24L28 26" stroke="#FF6B35" stroke-width="2" stroke-linecap="round"/>
                    </svg>
                    <span class="logo-text">云印铺</span>
                </div>
                <div class="header-right">
                    <button class="header-btn" onclick="showPage('help')">
                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></svg>
                    </button>
                    <button class="header-btn" onclick="showPage('cart')">
                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
                        <span class="cart-badge" id="cartBadge">0</span>
                    </button>
                </div>
            </div>
        </header>

        <!-- 页面容器 -->
        <main class="main-content">
            <!-- 首页 -->
            <div class="page active" id="page-home">
                <!-- 新用户福利Banner -->
                <div class="welcome-banner" onclick="showPage('coupon')">
                    <div class="banner-left">
                        <div class="banner-icon">
                            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z"/></svg>
                        </div>
                        <div class="banner-text">
                            <span class="banner-title">新用户专享</span>
                            <span class="banner-desc">首单0元，免费打印100页</span>
                        </div>
                    </div>
                    <span class="banner-btn">立即领取</span>
                </div>

                <!-- 打印服务入口 -->
                <div class="service-cards">
                    <div class="service-card" onclick="startPrint('document')">
                        <div class="card-icon doc-icon">
                            <svg viewBox="0 0 48 48" fill="currentColor">
                                <path d="M28 4H12C9.79 4 8 5.79 8 8v32c0 2.21 1.79 4 4 4h24c2.21 0 4-1.79 4-4V16L28 4zm0 3l12 12H28V7zm-2 18h4v4h-4v-4zm0 6h4v4h-4v-4zm-6-6h4v4h-4v-4zm0 6h4v4h-4v-4zm-6-6h4v4H14v-4zm0 6h4v4h-4v-4z"/>
                            </svg>
                        </div>
                        <span class="card-title">文档打印</span>
                        <span class="card-desc">PDF/Word/PPT</span>
                        <span class="card-price">5分/页起</span>
                    </div>
                    <div class="service-card" onclick="startPrint('photo')">
                        <div class="card-icon photo-icon">
                            <svg viewBox="0 0 48 48" fill="currentColor">
                                <path d="M40 8H8c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zm0 28H8V12h32v24zM12 32c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-12c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm24 8l-4 5h-3l4-5h-4l3-4 3 4h-4l4 5h-3l-4-5z"/>
                            </svg>
                        </div>
                        <span class="card-title">照片冲印</span>
                        <span class="card-desc">证件照/生活照</span>
                        <span class="card-price">4毛5/张起</span>
                    </div>
                </div>

                <!-- 快捷功能 -->
                <div class="quick-actions">
                    <div class="quick-item" onclick="showPage('history')">
                        <svg viewBox="0 0 24 24" fill="#666"><path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.039-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/></svg>
                        <span>打印记录</span>
                    </div>
                    <div class="quick-item" onclick="showPage('address')">
                        <svg viewBox="0 0 24 24" fill="#666"><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>
                        <span>收货地址</span>
                    </div>
                    <div class="quick-item" onclick="showPage('coupon')">
                        <svg viewBox="0 0 24 24" fill="#666"><path d="M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z"/></svg>
                        <span>优惠券</span>
                    </div>
                    <div class="quick-item" onclick="showPage('help')">
                        <svg viewBox="0 0 24 24" fill="#666"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></svg>
                        <span>帮助中心</span>
                    </div>
                </div>

                <!-- 热门推荐 -->
                <div class="section-title">
                    <h3>热门场景</h3>
                </div>
                <div class="scene-tags">
                    <span class="scene-tag">考研资料</span>
                    <span class="scene-tag">期末复习</span>
                    <span class="scene-tag">简历打印</span>
                    <span class="scene-tag">证件照</span>
                    <span class="scene-tag">手抄报</span>
                    <span class="scene-tag">错题整理</span>
                </div>

                <!-- 价格说明 -->
                <div class="price-info">
                    <div class="price-header">
                        <svg viewBox="0 0 24 24" fill="#FF6B35"><path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"/></svg>
                        <span>价格透明</span>
                    </div>
                    <div class="price-table">
                        <div class="price-row">
                            <span>A4黑白打印</span>
                            <span class="price-highlight">5分/页</span>
                        </div>
                        <div class="price-row">
                            <span>A4彩色打印</span>
                            <span class="price-highlight">5分/页</span>
                        </div>
                        <div class="price-row">
                            <span>照片冲印(6寸)</span>
                            <span class="price-highlight">4毛5/张</span>
                        </div>
                        <div class="price-row">
                            <span>包邮门槛</span>
                            <span class="price-highlight">满1.9元</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 文件上传页 -->
            <div class="page" id="page-upload">
                <div class="page-header">
                    <button class="back-btn" onclick="goBack()">
                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
                    </button>
                    <h2 class="page-title" id="uploadTitle">文档打印</h2>
                </div>

                <div class="upload-area" id="uploadArea" onclick="document.getElementById('fileInput').click()">
                    <div class="upload-content">
                        <svg class="upload-icon" viewBox="0 0 64 64" fill="#FF6B35">
                            <path d="M32 8c-2.21 0-4 1.79-4 4v20h-8c-2.21 0-4 1.79-4 4s1.79 4 4 4h24c2.21 0 4-1.79 4-4s-1.79-4-4-4h-8V12c0-2.21-1.79-4-4-4zm-4 20V12c0-1.1.9-2 2-2s2 .9 2 2v16h-4zm14 8c0 4.41-3.59 8-8 8H10c-4.41 0-8-3.59-8-8s3.59-8 8-8h24c4.41 0 8 3.59 8 8z"/>
                            <path d="M28 48h8v8h-8z"/>
                        </svg>
                        <p class="upload-text">点击上传文件</p>
                        <p class="upload-hint">支持 PDF、Word、PPT、图片等格式</p>
                    </div>
                    <input type="file" id="fileInput" multiple accept=".pdf,.doc,.docx,.ppt,.pptx,.jpg,.jpeg,.png,.gif" style="display:none" onchange="handleFileSelect(event)">
                </div>

                <!-- 上传源选择 -->
                <div class="upload-sources">
                    <div class="source-item" onclick="selectSource('wechat')">
                        <svg viewBox="0 0 24 24" fill="#07C160"><path d="M8.69 13.3c-.19 0-.36-.05-.52-.12-.16-.08-.29-.19-.39-.32-.1-.14-.17-.29-.2-.47-.04-.17-.05-.35-.05-.52 0-.18.02-.36.05-.54.03-.18.1-.35.2-.49.1-.14.23-.25.4-.33.16-.08.35-.13.56-.13s.4.04.56.13c.16.08.29.19.39.33.1.14.17.31.2.49.03.18.05.36.05.54 0 .17-.01.35-.05.52-.03.18-.1.33-.2.47-.1.13-.23.24-.39.32-.16.07-.33.12-.52.12-.18 0-.36-.04-.52-.12-.16-.08-.29-.19-.39-.32-.1-.14-.17-.29-.2-.47-.04-.17-.05-.35-.05-.52s.02-.36.05-.54c.03-.18.1-.35.2-.49.1-.14.23-.25.39-.33.16-.08.35-.13.56-.13.19 0 .36.05.52.13.16.08.29.19.39.33.1.14.17.31.2.49.03.18.05.36.05.54 0 .17-.01.35-.05.52-.03.18-.1.33-.2.47-.1.13-.23.24-.39.32-.16.08-.33.12-.52.12-.19 0-.36-.05-.52-.13-.16-.08-.29-.19-.39-.32-.1-.14-.17-.29-.2-.47-.04-.17-.05-.35-.05-.52s.02-.36.05-.54c.03-.18.1-.35.2-.49.1-.14.23-.25.39-.33.16-.08.35-.13.56-.13.19 0 .36.05.52.13.16.08.29.19.39.33.1.14.17.31.2.49.03.18.05.36.05.54 0 .17-.01.35-.05.52-.03.18-.1.33-.2.47-.1.13-.23.24-.39.32-.16.08-.33.12-.52.12zm8.62 7.5c-.36 0-.71-.05-1.03-.15-.33-.1-.63-.25-.89-.44-.26-.19-.48-.42-.65-.69-.17-.27-.29-.57-.37-.9-.08-.33-.11-.68-.11-1.04 0-.36.04-.7.11-1.03.08-.33.2-.63.37-.89.17-.26.39-.49.65-.67.26-.18.55-.32.89-.43.33-.1.67-.15 1.03-.15.36 0 .71.05 1.04.15.33.1.63.25.89.43.26.18.48.41.65.67.17.26.29.56.37.89.08.33.11.67.11 1.03 0 .36-.04.7-.11 1.04-.08.33-.2.63-.37.9-.17.27-.39.5-.65.69-.26.19-.55.34-.89.44-.33.1-.67.15-1.04.15zm0-1.85c.2 0 .38-.04.56-.11.17-.08.33-.18.46-.32.13-.14.23-.3.31-.49.08-.19.11-.39.11-.62 0-.22-.04-.43-.11-.62-.08-.19-.18-.35-.31-.49-.13-.14-.29-.24-.46-.32-.17-.07-.36-.11-.56-.11s-.38.04-.55.11c-.17.08-.33.18-.46.32-.13.14-.23.3-.31.49-.08.19-.11.39-.11.62 0 .22.04.43.11.62.08.19.18.35.31.49.13.14.29.24.46.32.17.07.36.11.55.11zM17.5 6c.83 0 1.5.67 1.5 1.5S18.33 9 17.5 9 16 8.33 16 7.5 16.67 6 17.5 6zm-7 0c.83 0 1.5.67 1.5 1.5S11.33 9 10.5 9 9 8.33 9 7.5 9.67 6 10.5 6zm7 12c-1.38 0-2.5 1.12-2.5 2.5 0 .43.11.83.3 1.19.05.1.11.2.16.3l-.97.97c-.28.28-.44.67-.44 1.09V24.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-.45c0-.42-.16-.81-.44-1.09l-.97-.97c.05-.1.11-.2.16-.3.19-.36.3-.76.3-1.19 0-1.38-1.12-2.5-2.5-2.5zm-7 0c-1.38 0-2.5 1.12-2.5 2.5 0 .43.11.83.3 1.19.05.1.11.2.16.3l-.97.97c-.28.28-.44.67-.44 1.09V24.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-.45c0-.42-.16-.81-.44-1.09l-.97-.97c.05-.1.11-.2.16-.3.19-.36.3-.76.3-1.19 0-1.38-1.12-2.5-2.5-2.5z"/></svg>
                        <span>微信文件</span>
                    </div>
                    <div class="source-item" onclick="selectSource('album')">
                        <svg viewBox="0 0 24 24" fill="#07C160"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>
                        <span>相册图片</span>
                    </div>
                    <div class="source-item" onclick="selectSource('cloud')">
                        <svg viewBox="0 0 24 24" fill="#07C160"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/></svg>
                        <span>云盘文件</span>
                    </div>
                </div>

                <!-- 已上传文件列表 -->
                <div class="file-list" id="fileList">
                    <div class="file-list-header">
                        <span>已上传文件</span>
                        <button class="clear-btn" onclick="clearFiles()">清空</button>
                    </div>
                    <div class="file-items" id="fileItems"></div>
                </div>

                <!-- 底部操作栏 -->
                <div class="bottom-bar">
                    <div class="bar-info">
                        <span class="file-count" id="fileCount">已选 0 个文件</span>
                        <span class="total-pages" id="totalPages">共 0 页</span>
                    </div>
                    <button class="next-btn" id="nextBtn" onclick="goToSettings()" disabled>下一步</button>
                </div>
            </div>

            <!-- 打印设置页 -->
            <div class="page" id="page-settings">
                <div class="page-header">
                    <button class="back-btn" onclick="goBack()">
                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
                    </button>
                    <h2 class="page-title">打印设置</h2>
</div>

                <div class="settings-content">
                    <!-- 文件预览卡片 -->
                    <div class="preview-card" id="previewCard">
                        <div class="preview-info">
                            <span class="preview-name" id="previewName">document.pdf</span>
                            <span class="preview-pages" id="previewPages">共 5 页</span>
                        </div>
                        <div class="preview-thumb">
                            <svg viewBox="0 0 48 48" fill="#999"><path d="M28 4H12C9.79 4 8 5.79 8 8v32c0 2.21 1.79 4 4 4h24c2.21 0 4-1.79 4-4V16L28 4zm0 3l12 12H28V7z"/></svg>
                        </div>
                    </div>

                    <!-- 设置选项 -->
                    <div class="settings-group">
                        <div class="setting-item" onclick="toggleOption('paper')">
                            <span class="setting-label">纸张规格</span>
                            <div class="setting-value">
                                <span id="paperValue">A4 (210x297mm)</span>
                                <svg viewBox="0 0 24 24" fill="#999"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
                            </div>
                        </div>
                        <div class="setting-item" onclick="toggleOption('color')">
                            <span class="setting-label">打印颜色</span>
                            <div class="setting-value">
                                <span id="colorValue">黑白</span>
                                <svg viewBox="0 0 24 24" fill="#999"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
                            </div>
                        </div>
                        <div class="setting-item" onclick="toggleOption('side')">
                            <span class="setting-label">单双面</span>
                            <div class="setting-value">
                                <span id="sideValue">单面</span>
                                <svg viewBox="0 0 24 24" fill="#999"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
                            </div>
                        </div>
                        <div class="setting-item" onclick="toggleOption('binding')">
                            <span class="setting-label">装订方式</span>
                            <div class="setting-value">
                                <span id="bindingValue">无装订</span>
                                <svg viewBox="0 0 24 24" fill="#999"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
                            </div>
                        </div>
                        <div class="setting-item">
                            <span class="setting-label">打印份数</span>
                            <div class="setting-value count-ctrl">
                                <button class="count-btn" onclick="changeCount(-1)">-</button>
                                <span id="copyCount">1</span>
                                <button class="count-btn" onclick="changeCount(1)">+</button>
                            </div>
                        </div>
                        <div class="setting-item">
                            <span class="setting-label">页数范围</span>
                            <div class="setting-value">
                                <input type="text" class="page-input" id="pageRange" placeholder="全部" value="">
                            </div>
                        </div>
                    </div>

                    <!-- 选项面板 -->
                    <div class="option-panel" id="optionPanel">
                        <div class="panel-content" id="panelContent"></div>
                    </div>

                    <!-- 价格明细 -->
                    <div class="price-detail">
                        <h4>价格明细</h4>
                        <div class="price-row">
                            <span>打印费用</span>
                            <span id="printFee">¥0.25</span>
                        </div>
                        <div class="price-row">
                            <span>运费</span>
                            <span id="shippingFee">¥0.00</span>
                        </div>
                        <div class="price-row">
                            <span>优惠</span>
                            <span class="discount" id="discountFee">-¥0.00</span>
                        </div>
                        <div class="price-total">
                            <span>合计</span>
                            <span id="totalPrice">¥0.25</span>
                        </div>
                    </div>
                </div>

                <!-- 底部操作栏 -->
                <div class="bottom-bar">
                    <button class="preview-btn" onclick="goToPreview()">预览</button>
                    <button class="add-cart-btn" onclick="addToCart()">加入购物车</button>
                </div>
            </div>

            <!-- 预览页 -->
            <div class="page" id="page-preview">
                <div class="page-header">
                    <button class="back-btn" onclick="goBack()">
                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
                    </button>
                    <h2 class="page-title">预览打印</h2>
                </div>

                <div class="preview-content">
                    <div class="preview-pages" id="previewPagesContainer">
                        <!-- 模拟预览页 -->
                    </div>
                </div>

                <div class="preview-footer">
                    <div class="preview-info-bar">
                        <span id="previewFileName">document.pdf</span>
                        <span id="previewFileInfo">第 1-5 页</span>
                    </div>
                    <button class="confirm-print-btn" onclick="goToCheckout()">确认下单</button>
                </div>
            </div>

            <!-- 购物车页 -->
            <div class="page" id="page-cart">
                <div class="page-header">
                    <button class="back-btn" onclick="goBack()">
                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
                    </button>
                    <h2 class="page-title">购物车</h2>
                    <button class="clear-cart-btn" onclick="clearCart()">清空</button>
                </div>

                <div class="cart-content">
                    <div class="cart-empty" id="cartEmpty">
                        <svg viewBox="0 0 64 64" fill="#ccc">
                            <path d="M48 16H16c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V20c0-2.21-1.79-4-4-4zm0 32H16V20h32v28z"/>
                            <path d="M24 36h4v4h-4zm8 0h4v4h-4zm8 0h4v4h-4zm-16 8h4v4h-4zm8 0h4v4h-4zm8 0h4v4h-4z"/>
                        </svg>
                        <p>购物车空空如也</p>
                        <button class="go-shopping-btn" onclick="showPage('home')">去打印</button>
                    </div>
                    <div class="cart-list" id="cartList"></div>
                </div>

                <div class="cart-footer" id="cartFooter">
                    <div class="cart-total">
                        <span>合计：</span>
                        <span class="total-amount" id="cartTotalAmount">¥0.00</span>
                    </div>
                    <button class="checkout-btn" onclick="goToCheckout()">结算</button>
                </div>
            </div>

            <!-- 订单确认页 -->
            <div class="page" id="page-checkout">
                <div class="page-header">
                    <button class="back-btn" onclick="goBack()">
                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
                    </button>
                    <h2 class="page-title">确认订单</h2>
                </div>

                <div class="checkout-content">
                    <!-- 收货地址 -->
                    <div class="address-section" onclick="showPage('address')">
                        <div class="address-info">
                            <div class="address-default">默认</div>
                            <div class="address-detail">
                                <p class="address-contact"><span id="consignee">张三</span> <span id="phone">138****8888</span></p>
                                <p class="address-text" id="addressText">北京市朝阳区建国路88号SOHO现代城1号楼101室</p>
                            </div>
                        </div>
                        <svg viewBox="0 0 24 24" fill="#999"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
                    </div>

                    <!-- 订单商品 -->
                    <div class="order-items">
                        <h4>订单详情</h4>
                        <div id="checkoutItems"></div>
                    </div>

                    <!-- 配送方式 -->
                    <div class="shipping-section">
                        <h4>配送方式</h4>
                        <div class="shipping-options">
                            <div class="shipping-option selected" onclick="selectShipping(this, 0)">
                                <div class="shipping-info">
                                    <span class="shipping-name">普通快递</span>
                                    <span class="shipping-time">预计3-5天送达</span>
                                </div>
                                <span class="shipping-price">免费</span>
                            </div>
                            <div class="shipping-option" onclick="selectShipping(this, 2.9)">
                                <div class="shipping-info">
                                    <span class="shipping-name">顺丰快递</span>
                                    <span class="shipping-time">预计1-2天送达</span>
                                </div>
                                <span class="shipping-price">¥2.90</span>
                            </div>
                        </div>
                    </div>

                    <!-- 优惠码 -->
                    <div class="coupon-section">
                        <h4>优惠</h4>
                        <div class="coupon-input-wrap">
                            <input type="text" class="coupon-input" id="couponInput" placeholder="请输入优惠码">
                            <button class="coupon-btn" onclick="applyCoupon()">使用</button>
                        </div>
                        <p class="coupon-tip">可用优惠券：<span class="coupon-count">1</span> 张</p>
                    </div>

                    <!-- 支付方式 -->
                    <div class="payment-section">
                        <h4>支付方式</h4>
                        <div class="payment-options">
                            <div class="payment-option selected" onclick="selectPayment(this)">
                                <div class="payment-info">
                                    <svg viewBox="0 0 24 24" fill="#07C160"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
                                    <span>微信支付</span>
                                </div>
                                <div class="payment-check"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 底部支付栏 -->
                <div class="payment-bar">
                    <div class="payment-total">
                        <span>应付金额：</span>
                        <span class="amount" id="paymentAmount">¥0.25</span>
                    </div>
                    <button class="pay-btn" onclick="submitOrder()">立即支付</button>
                </div>
            </div>

            <!-- 支付成功页 -->
            <div class="page" id="page-success">
                <div class="success-content">
                    <div class="success-icon">
                        <svg viewBox="0 0 64 64" fill="#52C41A">
                            <circle cx="32" cy="32" r="30" fill="#52C41A"/>
                            <path d="M26 32l6 6 12-12" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <h2 class="success-title">支付成功</h2>
                    <p class="success-desc">订单已提交，我们将尽快为您发货</p>
                    <div class="order-info">
                        <p>订单编号：<span id="orderNo">HP20240603123456</span></p>
                        <p>支付金额：<span id="payAmount">¥0.25</span></p>
                    </div>
                    <div class="success-actions">
                        <button class="view-order-btn" onclick="viewOrder()">查看订单</button>
                        <button class="back-home-btn" onclick="showPage('home')">返回首页</button>
                    </div>
                </div>
            </div>

            <!-- 订单列表页 -->
            <div class="page" id="page-orders">
                <div class="page-header">
                    <button class="back-btn" onclick="goBack()">
                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
                    </button>
                    <h2 class="page-title">我的订单</h2>
                </div>

                <div class="order-tabs">
                    <span class="tab active" onclick="filterOrders('all')">全部</span>
                    <span class="tab" onclick="filterOrders('pending')">待付款</span>
                    <span class="tab" onclick="filterOrders('processing')">处理中</span>
                    <span class="tab" onclick="filterOrders('shipped')">已发货</span>
                    <span class="tab" onclick="filterOrders('completed')">已完成</span>
                </div>

                <div class="order-list" id="orderList"></div>
            </div>

            <!-- 订单详情页 -->
            <div class="page" id="page-orderDetail">
                <div class="page-header">
                    <button class="back-btn" onclick="goBack()">
                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
                    </button>
                    <h2 class="page-title">订单详情</h2>
                </div>

                <div class="order-detail-content">
                    <!-- 订单状态 -->
                    <div class="order-status-bar">
                        <div class="status-icon" id="orderStatusIcon">
                            <svg viewBox="0 0 24 24" fill="#FF6B35"><path d="M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></svg>
                        </div>
                        <div class="status-text">
                            <p class="status-name" id="orderStatusName">等待付款</p>
                            <p class="status-desc" id="orderStatusDesc">请在30分钟内完成支付</p>
                        </div>
                    </div>

                    <!-- 物流信息 -->
                    <div class="logistics-info" id="logisticsInfo">
                        <h4>物流信息</h4>
                        <div class="logistics-detail">
                            <div class="logistics-timeline">
                                <div class="timeline-item active">
                                    <div class="timeline-dot"></div>
                                    <div class="timeline-content">
                                        <p class="timeline-title">已发货</p>
                                        <p class="timeline-time">2024-06-03 14:30</p>
                                        <p class="timeline-desc">商品已从【北京工厂】发出</p>
                                    </div>
                                </div>
                                <div class="timeline-item">
                                    <div class="timeline-dot"></div>
                                    <div class="timeline-content">
                                        <p class="timeline-title">已支付</p>
                                        <p class="timeline-time">2024-06-03 10:00</p>
                                    </div>
                                </div>
                                <div class="timeline-item">
                                    <div class="timeline-dot"></div>
                                    <div class="timeline-content">
                                        <p class="timeline-title">已下单</p>
                                        <p class="timeline-time">2024-06-03 09:55</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 订单信息 -->
                    <div class="order-info-section">
                        <h4>订单信息</h4>
                        <div class="info-row">
                            <span class="info-label">订单编号</span>
                            <span class="info-value" id="detailOrderNo">HP20240603123456</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">下单时间</span>
                            <span class="info-value" id="detailOrderTime">2024-06-03 09:55:30</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">支付方式</span>
                            <span class="info-value">微信支付</span>
                        </div>
                    </div>

                    <!-- 商品信息 -->
                    <div class="order-goods">
                        <h4>商品信息</h4>
                        <div id="detailGoods"></div>
                    </div>

                    <!-- 价格信息 -->
                    <div class="order-price">
                        <div class="price-row">
                            <span>商品金额</span>
                            <span>¥0.25</span>
                        </div>
                        <div class="price-row">
                            <span>运费</span>
                            <span>¥0.00</span>
                        </div>
                        <div class="price-row">
                            <span>优惠</span>
                            <span>-¥0.00</span>
                        </div>
                        <div class="price-row total">
                            <span>实付金额</span>
                            <span id="detailTotalPrice">¥0.25</span>
                        </div>
                    </div>

                    <!-- 收货地址 -->
                    <div class="order-address">
                        <h4>收货地址</h4>
                        <p id="detailAddress">北京市朝阳区建国路88号SOHO现代城1号楼101室</p>
                        <p id="detailContact">张三 138****8888</p>
                    </div>
                </div>

                <div class="order-detail-footer" id="orderDetailFooter">
                    <div class="footer-amount">
                        <span>合计：</span>
                        <span id="detailFooterAmount">¥0.25</span>
                    </div>
                    <button class="action-btn primary" id="orderActionBtn" onclick="handleOrderAction()">去支付</button>
                </div>
            </div>

            <!-- 个人中心页 -->
            <div class="page" id="page-profile">
                <div class="profile-header">
                    <div class="user-info">
                        <div class="user-avatar">
                            <svg viewBox="0 0 48 48" fill="#FF6B35"><circle cx="24" cy="24" r="24"/><circle cx="24" cy="20" r="8" fill="#fff"/><path d="M12 44c0-8 5.37-12 12-12s12 4 12 12" fill="#fff"/></svg>
                        </div>
                        <div class="user-detail">
                            <p class="user-name">用户123456</p>
                            <p class="user-level">VIP会员</p>
                        </div>
                    </div>
                    <div class="user-stats">
                        <div class="stat-item" onclick="showPage('points')">
                            <span class="stat-value" id="userPoints">2,580</span>
                            <span class="stat-label">积分</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-value">5</span>
                            <span class="stat-label">优惠券</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-value" id="printCount">12</span>
                            <span class="stat-label">已打印(页)</span>
                        </div>
                    </div>
                </div>

                <!-- 分享得积分Banner -->
                <div class="share-banner" onclick="showShareModal()">
                    <div class="share-banner-left">
                        <div class="share-icon">
                            <svg viewBox="0 0 24 24" fill="#fff"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z"/></svg>
                        </div>
                        <div class="share-text">
                            <span class="share-title">邀请好友得积分</span>
                            <span class="share-desc">每成功邀请1位好友，双方各得50积分</span>
                        </div>
                    </div>
                    <span class="share-btn">立即邀请</span>
                </div>

                <div class="profile-menu">
                    <div class="menu-item" onclick="showPage('orders')">
                        <svg viewBox="0 0 24 24" fill="#FF6B35"><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 16H5V5h14v14zM7 10h2v7H7zm4-3h2v10h-2zm4 6h2v4h-2z"/></svg>
                        <span>我的订单</span>
                        <svg class="arrow" viewBox="0 0 24 24" fill="#ccc"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
                    </div>
                    <div class="menu-item" onclick="showPage('points')">
                        <svg viewBox="0 0 24 24" fill="#FF6B35"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
                        <span>我的积分</span>
                        <span class="menu-tag">赚积分</span>
                        <svg class="arrow" viewBox="0 0 24 24" fill="#ccc"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
                    </div>
                    <div class="menu-item" onclick="showPage('address')">
                        <svg viewBox="0 0 24 24" fill="#FF6B35"><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>
                        <span>收货地址</span>
                        <svg class="arrow" viewBox="0 0 24 24" fill="#ccc"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
                    </div>
                    <div class="menu-item" onclick="showPage('coupon')">
                        <svg viewBox="0 0 24 24" fill="#FF6B35"><path d="M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z"/></svg>
                        <span>我的优惠券</span>
                        <svg class="arrow" viewBox="0 0 24 24" fill="#ccc"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
                    </div>
                    <div class="menu-item" onclick="showPage('help')">
                        <svg viewBox="0 0 24 24" fill="#FF6B35"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></svg>
                        <span>帮助中心</span>
                        <svg class="arrow" viewBox="0 0 24 24" fill="#ccc"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
                    </div>
                    <div class="menu-item" onclick="showPage('feedback')">
                        <svg viewBox="0 0 24 24" fill="#FF6B35"><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-7 12h-2v-2h2v2zm0-4h-2V6h2v4z"/></svg>
                        <span>意见反馈</span>
                        <svg class="arrow" viewBox="0 0 24 24" fill="#ccc"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
                    </div>
                </div>

            </div>
        </main>

        <!-- 底部标签栏 -->
        <nav class="tab-bar">
            <div class="tab-item active" onclick="showPage('home')">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
                <span>首页</span>
            </div>
            <div class="tab-item" onclick="showPage('orders')">
                <svg viewBox="0 0 24 24" fill="currentColor"><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>
                <span>订单</span>
            </div>
            <div class="tab-item" onclick="showPage('cart')">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
                <span>购物车</span>
                <span class="tab-badge" id="tabCartBadge">0</span>
            </div>
            <div class="tab-item" onclick="showPage('profile')">
                <svg viewBox="0 0 24 24" fill="currentColor"><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>
                <span>我的</span>
            </div>
        </nav>
    </div>
            <div class="page" id="page-address">
                <div class="page-header">
                    <button class="back-btn" onclick="goBack()">
                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
                    </button>
                    <h2 class="page-title">收货地址</h2>
                    <button class="add-address-btn" onclick="addNewAddress()">添加</button>
                </div>

                <div class="address-list" id="addressList">
                    <div class="address-card selected">
                        <div class="address-content">
                            <div class="address-main">
                                <span class="address-tag default">默认</span>
                                <p class="address-detail">北京市朝阳区建国路88号SOHO现代城1号楼101室</p>
                                <p class="address-contact"><span>张三</span> <span>138****8888</span></p>
                            </div>
                            <div class="address-actions">
                                <button class="edit-btn" onclick="editAddress(0)">编辑</button>
                            </div>
                        </div>
                    </div>
                    <div class="address-card">
                        <div class="address-content">
                            <div class="address-main">
                                <p class="address-detail">上海市浦东新区陆家嘴环路1000号</p>
                                <p class="address-contact"><span>李四</span> <span>139****9999</span></p>
                            </div>
                            <div class="address-actions">
                                <button class="set-default-btn" onclick="setDefaultAddress(1)">设为默认</button>
                                <button class="edit-btn" onclick="editAddress(1)">编辑</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 优惠券页 -->
            <div class="page" id="page-coupon">
                <div class="page-header">
                    <button class="back-btn" onclick="goBack()">
                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
                    </button>
                    <h2 class="page-title">我的优惠券</h2>
                </div>

                <div class="coupon-tabs">
                    <span class="tab active" onclick="filterCoupons('available')">可用(2)</span>
                    <span class="tab" onclick="filterCoupons('used')">已使用(1)</span>
                    <span class="tab" onclick="filterCoupons('expired')">已过期(3)</span>
                </div>

                <div class="coupon-list" id="couponList">
                    <div class="coupon-card available">
                        <div class="coupon-left">
                            <span class="coupon-price">¥5</span>
                            <span class="coupon-limit">满20元可用</span>
                        </div>
                        <div class="coupon-right">
                            <span class="coupon-name">新用户专享券</span>
                            <span class="coupon-desc">限打印订单使用</span>
                            <span class="coupon-date">有效期至 2024-12-31</span>
                        </div>
                        <div class="coupon-use-btn">立即使用</div>
                    </div>
                    <div class="coupon-card available">
                        <div class="coupon-left">
                            <span class="coupon-price">¥2</span>
                            <span class="coupon-limit">满10元可用</span>
                        </div>
                        <div class="coupon-right">
                            <span class="coupon-name">限时优惠券</span>
                            <span class="coupon-desc">全场通用</span>
                            <span class="coupon-date">有效期至 2024-06-30</span>
                        </div>
                        <div class="coupon-use-btn">立即使用</div>
                    </div>
                </div>
            </div>

            <!-- 帮助中心页 -->
            <div class="page" id="page-help">
                <div class="page-header">
                    <button class="back-btn" onclick="goBack()">
                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
                    </button>
                    <h2 class="page-title">帮助中心</h2>
                </div>

                <div class="help-content">
                    <div class="help-section">
                        <h4>常见问题</h4>
                        <div class="help-item">
                            <div class="help-q" onclick="toggleHelp(this)">
                                <span>如何上传文件打印？</span>
                                <svg viewBox="0 0 24 24" fill="#999"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
                            </div>
                            <div class="help-a">
                                <p>您可以通过以下方式上传文件：</p>
                                <p>1. 点击"文档打印"或"照片冲印"入口</p>
                                <p>2. 选择从微信聊天记录、相册或云盘上传文件</p>
                                <p>3. 支持PDF、Word、PPT、图片等格式</p>
                            </div>
                        </div>
                        <div class="help-item">
                            <div class="help-q" onclick="toggleHelp(this)">
                                <span>打印价格是怎么计算的？</span>
                                <svg viewBox="0 0 24 24" fill="#999"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
                            </div>
                            <div class="help-a">
                                <p>A4黑白/彩色打印统一5分/页，照片冲印4毛5/张起。</p>
                                <p>满1.9元包邮，顺丰快递需额外支付2.9元。</p>
                                <p>批量打印可享更低价格。</p>
                            </div>
                        </div>
                        <div class="help-item">
                            <div class="help-q" onclick="toggleHelp(this)">
                                <span>多长时间可以收到打印文件？</span>
                                <svg viewBox="0 0 24 24" fill="#999"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
                            </div>
                            <div class="help-a">
                                <p>20:00前下单当天发货。</p>
                                <p>普通快递：预计3-5天送达。</p>
                                <p>顺丰快递：预计1-2天送达。</p>
                            </div>
                        </div>
                        <div class="help-item">
                            <div class="help-q" onclick="toggleHelp(this)">
                                <span>如果打印质量有问题怎么办？</span>
                                <svg viewBox="0 0 24 24" fill="#999"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
                            </div>
                            <div class="help-a">
                                <p>如收到打印文件有质量问题（漏印、模糊等），请在收到货后48小时内联系客服处理。</p>
                                <p>我们提供免费补印或退款服务。</p>
                            </div>
                        </div>
                    </div>

                    <div class="contact-section">
                        <h4>联系客服</h4>
                        <button class="contact-btn">
                            <svg viewBox="0 0 24 24" fill="#07C160"><path d="M12 2C6.48 2 2 6.48 2 12c0 1.54.36 2.98.97 4.29L2 22l5.71-.97C8.02 21.64 9.46 22 12 22c5.52 0 10-4.48 10-10S17.52 2 12 2zm4.64 14.36c-.4.8-1.2 1.44-2.12 1.6-1.02.17-2.04-.08-2.82-.68-.33-.25-.58-.56-.78-.9-.19.31-.44.6-.78.87-.45.36-1.07.6-1.74.68-.88.1-1.76-.17-2.42-.75-.55-.49-.87-1.15-.91-1.88-.04-.72.18-1.4.61-1.92-.3.09-.58.21-.87.34-.62.27-1.24.31-1.83.13-.59-.19-1.08-.58-1.39-1.09-.32-.53-.44-1.14-.35-1.73.09-.6.38-1.12.84-1.53.46-.4 1.05-.65 1.67-.72.62-.07 1.25.05 1.78.35.44.25.81.62 1.09 1.06.31-.24.64-.44 1-.61.76-.36 1.65-.43 2.45-.19.8.24 1.47.77 1.87 1.49.4.72.53 1.57.37 2.38-.16.81-.6 1.53-1.25 2.04.8.3 1.45.89 1.85 1.67.4.78.49 1.66.25 2.5-.24.83-.75 1.55-1.45 2.03-.7.48-1.54.7-2.38.62-.84-.08-1.62-.46-2.21-1.07l-.45.36c-.16.13-.2.16-.22.16s-.06-.02-.1-.04c.35.5.86.9 1.47 1.14.62.25 1.28.32 1.93.21.65-.11 1.24-.4 1.71-.84.48-.44.81-1 .96-1.63.15-.63.09-1.28-.16-1.87-.25-.59-.69-1.09-1.26-1.42l.48-.51c.58.37 1.04.88 1.33 1.48z"/></svg>
                            <span>在线客服</span>
                        </button>
                        <p class="service-time">服务时间：9:00 - 21:00</p>
                    </div>
                </div>
            </div>

            <!-- 意见反馈页 -->
            <div class="page" id="page-feedback">
                <div class="page-header">
                    <button class="back-btn" onclick="goBack()">
                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
                    </button>
                    <h2 class="page-title">意见反馈</h2>
                </div>

                <div class="feedback-content">
                    <div class="feedback-type">
                        <span class="type-label">反馈类型</span>
                        <div class="type-options">
                            <span class="type-option selected" onclick="selectFeedbackType(this, 'suggest')">功能建议</span>
                            <span class="type-option" onclick="selectFeedbackType(this, 'bug')">问题反馈</span>
                            <span class="type-option" onclick="selectFeedbackType(this, 'other')">其他</span>
                        </div>
                    </div>
                    <div class="feedback-textarea">
                        <textarea id="feedbackText" placeholder="请输入您的意见或建议...">

编辑页面

打印记录

我的积分

赚积分方式

邀请好友得积分