编辑页面

页面标题
有效期修改后将从当前时间重新计算过期时间
CSS文件（可选）
JS文件（可选）
HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>生鲜小程序交互原型</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#f5f5f5;color:#333;max-width:430px;margin:0 auto;min-height:100vh;position:relative}
.page{display:none;min-height:calc(100vh - 60px);background:#fff;padding-bottom:80px}
.page.active{display:block}
.status-bar{background:#07c160;height:24px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px}
.header{background:#07c160;padding:12px 16px;display:flex;align-items:center;color:#fff}
.header-back{width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:20px}
.header-title{flex:1;text-align:center;font-size:16px;font-weight:500}
.header-more{width:30px;height:30px;display:flex;align-items:center;justify-content:center}
.home-banner{height:150px;background:linear-gradient(135deg,#07c160,#2eb82e);display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:bold;position:relative;overflow:hidden}
.home-search{background:#fff;padding:10px 16px;display:flex;gap:10px}
.home-search input{flex:1;background:#f5f5f5;border:none;border-radius:20px;padding:10px 16px;font-size:14px;outline:none}
.home-nav{padding:15px;display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.nav-item{text-align:center}
.nav-icon{width:50px;height:50px;background:#e8f5e9;border-radius:12px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:24px}
.nav-item span{font-size:12px;color:#666}
.home-section{padding:15px}
.home-section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.home-section-title h3{font-size:16px;font-weight:600}
.home-section-title span{color:#999;font-size:12px}
.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.product-card{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.08);cursor:pointer}
.product-card .pimg{width:100%;height:120px;display:flex;align-items:center;justify-content:center;font-size:40px}
.product-card .info{padding:10px}
.product-card .name{font-size:14px;margin-bottom:6px}
.product-card .meta{display:flex;justify-content:space-between;align-items:center}
.product-card .price{color:#ff4d4f;font-size:16px;font-weight:600}
.product-card .tag{font-size:10px;background:#fff3e0;color:#ff6b00;padding:2px 6px;border-radius:2px}
.announcement{background:#fff;margin:0 15px;padding:12px;border-radius:8px;display:flex;align-items:center;gap:10px}
.announcement-icon{width:30px;height:30px;background:#07c160;color:#fff;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px}
.announcement-text{flex:1;font-size:13px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tab-bar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:#fff;display:flex;height:60px;box-shadow:0 -2px 10px rgba(0,0,0,0.1);z-index:100}
.tab-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#999;gap:2px}
.tab-item.active{color:#07c160}
.tab-icon{font-size:24px;margin-bottom:2px}
.tab-text{font-size:10px}

/* 分类页 */
.category-content{display:flex;height:calc(100vh - 100px)}
.category-left{flex:1;background:#f5f5f5;padding:15px 0}
.category-left li{padding:12px 15px;font-size:14px;color:#666;cursor:pointer}
.category-left li.active{background:#fff;color:#07c160;font-weight:500}
.category-right{flex:2;padding:15px;display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.cat-item{text-align:center;cursor:pointer}
.cat-icon{width:50px;height:50px;background:#f0f0f0;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:20px}
.cat-item span{font-size:12px}

/* 商品详情 */
.detail-content{padding-bottom:70px}
.detail-images{height:300px;background:linear-gradient(135deg,#f0f0f0,#e0e0e0);display:flex;align-items:center;justify-content:center;font-size:60px}
.detail-info{padding:15px}
.detail-name{font-size:18px;font-weight:600;margin-bottom:10px}
.detail-price-row{display:flex;align-items:baseline;gap:10px;margin-bottom:15px}
.detail-price{color:#ff4d4f;font-size:24px;font-weight:600}
.detail-origin{font-size:12px;color:#999;margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid #f5f5}
.detail-tags{display:flex;gap:8px;margin-bottom:15px}
.detail-tag{padding:4px 10px;background:#e8f5e9;color:#07c160;border-radius:4px;font-size:11px}
.detail-bottom{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:#fff;padding:10px 15px;display:flex;gap:10px;box-shadow:0 -2px 10px rgba(0,0,0,0.1);z-index:100}
.detail-bottom button{flex:1;padding:12px;border-radius:20px;font-size:14px;font-weight:500;border:none}
.btn-cart{background:#ffedd5;color:#ff6b00}
.btn-buy{background:#07c160;color:#fff}

/* 规格页 */
.spec-page{padding:15px}
.spec-product{display:flex;align-items:center;padding:15px;background:#fafafa;border-radius:8px;margin-bottom:20px}
.spec-product .pimg{width:80px;height:80px;background:#f0f0f0;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:30px;margin-right:12px}
.spec-product-info{flex:1}
.spec-product-info h4{font-size:16px;margin-bottom:5px}
.spec-product-info .price{color:#ff4d4f;font-size:18px;font-weight:600}
.spec-group{margin-bottom:20px}
.spec-group h4{font-size:14px;color:#666;margin-bottom:10px}
.spec-options{display:flex;flex-wrap:wrap;gap:10px}
.spec-option{padding:10px 16px;background:#f5f5f5;border-radius:4px;font-size:13px;cursor:pointer}
.spec-option.active{background:#07c160;color:#fff}
.qty-row{display:flex;align-items:center;justify-content:space-between}
.qty-label{font-size:14px}
.qty-control{display:flex;align-items:center;gap:12px}
.qty-control button{width:32px;height:32px;border:1px solid #ddd;border-radius:50%;background:#fff;font-size:16px}
.qty-control span{min-width:30px;text-align:center;font-size:16px}

/* 购物车 */
.cart-list{padding:15px}
.cart-store{margin-bottom:15px}
.cart-store-header{display:flex;align-items:center;padding:10px;background:#f5f5f5;border-radius:8px 8px 0 0}
.cart-store-header input{margin-right:10px}
.cart-store-header .store-name{flex:1;font-weight:500}
.cart-item{display:flex;padding:12px;border-bottom:1px solid #f0f0f0}
.cart-item .cimg{width:70px;height:70px;background:#f0f0f0;border-radius:4px;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:24px}
.cart-item-info{flex:1}
.cart-item-name{font-size:14px;margin-bottom:5px}
.cart-item-spec{font-size:12px;color:#999;margin-bottom:8px}
.cart-item-bottom{display:flex;justify-content:space-between;align-items:center}
.cart-item-price{color:#ff4d4f;font-size:14px;font-weight:500}
.cart-qty{display:flex;align-items:center;gap:8px}
.cart-qty button{width:26px;height:26px;border:1px solid #ddd;border-radius:4px;background:#fff;font-size:14px}
.cart-qty span{min-width:24px;text-align:center}
.cart-bottom-bar{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:#fff;padding:10px 15px;display:flex;align-items:center;gap:10px;box-shadow:0 -2px 10px rgba(0,0,0,0.1);z-index:99}
.cart-bottom-bar label{display:flex;align-items:center;font-size:14px}
.cart-bottom-bar .total{flex:1;text-align:right}
.cart-bottom-bar .total span{color:#666;font-size:12px}
.cart-bottom-bar .total .price{color:#ff4d4f;font-size:18px;font-weight:600}
.cart-bottom-bar button{padding:10px 20px;background:#07c160;color:#fff;border:none;border-radius:20px;font-size:14px}

/* 订单确认 */
.order-content{padding:15px}
.order-address{background:#e8f5e9;padding:15px;border-radius:8px;margin-bottom:15px;display:flex;align-items:center;gap:10px;cursor:pointer}
.order-address-icon{font-size:24px}
.order-address-info{flex:1}
.order-address-name{font-size:15px;font-weight:500;margin-bottom:4px}
.order-address-detail{font-size:13px;color:#666}
.order-items{border-radius:8px;overflow:hidden;margin-bottom:15px}
.order-items-title{padding:12px;background:#fafafa;font-size:14px;font-weight:500}
.order-item{display:flex;padding:12px;border-bottom:1px solid #f0f0f0}
.order-item .oimg{width:50px;height:50px;background:#f0f0f0;border-radius:4px;margin-right:10px;display:flex;align-items:center;justify-content:center;font-size:20px}
.order-item-info{flex:1}
.order-item-name{font-size:13px;margin-bottom:4px}
.order-item-price{font-size:13px;color:#666}
.order-options{margin-top:15px}
.order-option{padding:12px;background:#fafafa;margin-bottom:10px;border-radius:8px;display:flex;justify-content:space-between;cursor:pointer}
.order-option-left{display:flex;align-items:center;gap:8px}
.order-option-icon{font-size:18px}
.order-coupon{color:#ff4d4f}
.order-summary{padding:15px;background:#fafafa;border-radius:8px}
.order-summary-row{display:flex;justify-content:space-between;margin-bottom:8px}
.order-summary-row span{color:#666}
.order-summary-row.total{border-top:1px solid #eee;padding-top:8px;margin-top:8px}
.order-summary-row .final{color:#ff4d4f;font-size:18px;font-weight:600}
.order-bottom-bar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:#fff;padding:10px 15px;display:flex;align-items:center;gap:15px;box-shadow:0 -2px 10px rgba(0,0,0,0.1);z-index:100}
.order-bottom-bar .total{flex:1}
.order-bottom-bar .price{color:#ff4d4f;font-size:18px;font-weight:600}
.order-bottom-bar button{padding:12px 30px;background:#07c160;color:#fff;border:none;border-radius:20px;font-size:14px}

/* 订单列表 */
.order-tabs{display:flex;padding:15px;gap:10px}
.order-tab{flex:1;padding:8px;text-align:center;font-size:14px;border-radius:20px;cursor:pointer;background:#f5f5f5;color:#666}
.order-tab.active{background:#07c160;color:#fff}
.order-list{padding:15px}
.order-card{background:#fff;border-radius:8px;margin-bottom:15px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.order-card-header{padding:12px;display:flex;justify-content:space-between;border-bottom:1px solid #f0f0f0}
.order-store-name{font-size:14px;font-weight:500}
.order-status{font-size:12px;color:#07c160}
.order-card-body{padding:12px}
.order-card-item{display:flex;align-items:center;margin-bottom:10px;cursor:pointer}
.order-card-item .oimg{width:50px;height:50px;background:#f0f0f0;border-radius:4px;margin-right:10px;display:flex;align-items:center;justify-content:center;font-size:20px}
.order-card-item-info{flex:1}
.order-card-item-name{font-size:13px;margin-bottom:4px}
.order-card-item-price{font-size:13px;color:#666}
.order-card-footer{padding:12px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #f0f0f0}
.order-total-text{font-size:13px;color:#666}
.order-btns{display:flex;gap:10px}
.order-btn{padding:6px 12px;border-radius:15px;font-size:12px;border:1px solid #07c160;color:#07c160;background:#fff}
.order-btn.primary{background:#07c160;color:#fff;border:none}

/* 订单详情 */
.detail-section{padding:15px;border-bottom:1px solid #f0f0f0}
.detail-section-title{font-size:14px;font-weight:500;margin-bottom:10px;color:#999}

/* 地址管理 */
.address-list{padding:15px}
.address-card{padding:15px;background:#e8f5e9;border-radius:8px;margin-bottom:12px;position:relative}
.address-card .default-tag{position:absolute;top:15px;right:15px;font-size:11px;background:#07c160;color:#fff;padding:2px 8px;border-radius:4px}
.address-card-name{font-size:16px;font-weight:500;margin-bottom:5px}
.address-card-phone{font-size:14px;color:#666;margin-bottom:8px}
.address-card-detail{font-size:13px}
.address-card-actions{position:absolute;bottom:15px;right:15px;display:flex;gap:15px}
.address-card-action{font-size:13px;color:#07c160;cursor:pointer}
.address-add-btn{display:block;width:calc(100% - 30px);margin:15px;padding:15px;background:#fff;border:1px dashed #07c160;color:#07c160;text-align:center;border-radius:8px;cursor:pointer}

/* 搜索页 */
.search-header{padding:10px 15px;display:flex;gap:10px}
.search-header input{flex:1;background:#f5f5f5;border:none;border-radius:20px;padding:10px 16px;font-size:14px;outline:none}
.search-header button{background:none;border:none;color:#07c160;font-size:14px}
.search-section{padding:15px}
.search-title{display:flex;justify-content:space-between;margin-bottom:12px}
.search-title span{font-size:12px}
.search-tags{display:flex;flex-wrap:wrap;gap:8px}
.search-tag{padding:6px 12px;background:#f5f5f5;border-radius:15px;font-size:12px;cursor:pointer}

/* 商品列表 */
.filter-bar{display:flex;padding:10px 15px;background:#fff;border-bottom:1px solid #f0f0f0;gap:10px}
.filter-btn{flex:1;padding:8px;text-align:center;font-size:13px;background:#f5f5f5;border-radius:4px;cursor:pointer}
.filter-btn.active{background:#e8f5e9;color:#07c160}
.product-list{padding:15px}
.product-list-item{display:flex;padding:12px 0;border-bottom:1px solid #f0f0f0;cursor:pointer}
.product-list-item .limg{width:80px;height:80px;background:#f0f0f0;border-radius:4px;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:30px}
.product-list-item .linfo{flex:1}
.product-list-item .liname{font-size:14px;margin-bottom:8px}
.product-list-item .limeta{display:flex;gap:5px;margin-bottom:8px}
.product-list-item .litag{font-size:10px;background:#e8f5e9;color:#07c160;padding:2px 6px;border-radius:2px}
.product-list-item .liprice{color:#ff4d4f;font-size:16px;font-weight:600}

/* 评价页 */
.rate-stars{padding:20px;text-align:center}
.rate-star{font-size:36px;color:#ddd;margin:0 3px;cursor:pointer;display:inline-block}
.rate-star.active{color:#ffb800}
.rate-content{padding:15px}
.rate-content textarea{width:100%;height:100px;padding:12px;border:1px solid #f0f0f0;border-radius:8px;font-size:14px;resize:none;outline:none}
.rate-images{padding:15px;display:flex;gap:10px;flex-wrap:wrap}
.rate-image-add{width:70px;height:70px;background:#f5f5f5;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:24px;color:#999;cursor:pointer}
.rate-submit{padding:15px}
.rate-submit button{width:100%;padding:14px;background:#07c160;color:#fff;border:none;border-radius:8px;font-size:15px}

/* 物流页 */
.logistics-info{padding:15px}
.logistics-header{padding:15px;background:#f5f5f5;border-radius:8px;margin-bottom:15px}
.logistics-header-row{display:flex;justify-content:space-between;margin-bottom:8px}
.logistics-header-row span{font-size:13px}
.logistics-steps{}
.logistics-step{display:flex;padding:15px 0;border-left:2px solid #ddd;margin-left:10px;position:relative}
.logistics-step:first-child{border-left-color:#07c160}
.logistics-step::before{content:'';width:10px;height:10px;background:#ddd;border-radius:50%;position:absolute;left:-6px}
.logistics-step:first-child::before{background:#07c160}
.logistics-step-content{padding-left:15px}
.logistics-time{font-size:12px;color:#999;margin-bottom:4px}
.logistics-desc{font-size:14px}

/* 售后申请 */
.service-content{padding:15px}
.service-product{display:flex;align-items:center;padding:15px;background:#fafafa;border-radius:8px;margin-bottom:15px}
.service-product .pimg{width:60px;height:60px;background:#f0f0f0;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-right:12px}
.service-product-info{flex:1}
.service-product-info h4{font-size:14px;margin-bottom:4px}
.service-product-info .price{color:#ff4d4f}
.service-types{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:15px}
.service-type{padding:12px;background:#f5f5f5;text-align:center;border-radius:8px;cursor:pointer}
.service-type.active{background:#e8f5e9;border:1px solid #07c160}
.service-type-icon{font-size:20px;margin-bottom:5px}
.service-type-text{font-size:12px}
.service-reasons{margin-bottom:15px}
.service-reasons h4{font-size:14px;margin-bottom:10px}
.reason-item{padding:12px;background:#fafafa;margin-bottom:8px;border-radius:8px;display:flex;align-items:center;cursor:pointer}
.reason-item input{margin-right:10px}
.service-images h4{font-size:14px;margin-bottom:10px}
.service-images-list{display:flex;gap:10px;flex-wrap:wrap}
.service-image-add{width:70px;height:70px;background:#f5f5f5;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:24px;color:#999;cursor:pointer}
.service-submit{margin-top:20px}
.service-submit button{width:100%;padding:14px;background:#07c160;color:#fff;border:none;border-radius:8px;font-size:15px}

/* 支付页 */
.pay-methods{padding:15px}
.pay-method{padding:15px;display:flex;align-items:center;margin-bottom:10px;background:#fafafa;border-radius:8px;cursor:pointer}
.pay-method.active{background:#e8f5e9}
.pay-method-icon{font-size:24px;margin-right:12px}
.pay-method-info{flex:1}
.pay-method-name{font-size:14px;margin-bottom:4px}
.pay-method-desc{font-size:12px;color:#999}
.pay-submit{padding:15px;position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:#fff;padding:15px;box-shadow:0 -2px 10px rgba(0,0,0,0.1);z-index:100}
.pay-submit button{width:100%;padding:14px;background:#07c160;color:#fff;border:none;border-radius:8px;font-size:15px}

/* 收藏/历史 */
.collect-list{padding:15px}
.collect-item{display:flex;padding:12px 0;border-bottom:1px solid #f0f0f0}
.collect-item .cimg{width:80px;height:80px;background:#f0f0f0;border-radius:4px;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:30px}
.collect-item-info{flex:1}
.collect-item-name{font-size:14px;margin-bottom:8px}
.collect-item-price{color:#ff4d4f;font-size:16px;font-weight:600}
.collect-item .delete{color:#999;font-size:12px}

/* 帮助/客服 */
.help-list{padding:15px}
.help-item{padding:15px;border-bottom:1px solid #f0f0f0;cursor:pointer}
.help-q{display:flex;justify-content:space-between;align-items:center}
.help-q span{font-size:14px}
.help-a{padding:10px 0;font-size:13px;color:#666;display:none}
.help-item.open .help-a{display:block}
.help-item.open .help-q span:first-child{color:#07c160}

/* 个人中心 */
.profile-header{background:linear-gradient(135deg,#07c160,#2eb82e);padding:30px 20px;color:#fff;text-align:center}
.profile-avatar{width:70px;height:70px;background:#fff;border-radius:50%;margin:0 auto 15px;display:flex;align-items:center;justify-content:center;font-size:36px}
.profile-name{font-size:18px;font-weight:500;margin-bottom:5px}
.profile-phone{font-size:13px;opacity:0.8}
.profile-orders{padding:15px;background:#fff;margin:15px;border-radius:8px;display:flex;justify-content:space-around}
.order-item-btn{text-align:center;cursor:pointer}
.order-item-icon{font-size:24px;margin-bottom:5px;position:relative}
.order-item-count{position:absolute;top:-5px;right:-10px;background:#ff4d4f;color:#fff;font-size:10px;padding:1px 5px;border-radius:10px}
.order-item-text{font-size:12px;color:#666}
.profile-menu{padding:0 15px;background:#fff;margin:0}
.profile-menu-item{padding:15px 0;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;cursor:pointer}
.profile-menu-icon{width:36px;height:36px;background:#f0f0f0;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-right:12px;font-size:18px}
.profile-menu-text{flex:1;font-size:14px}
.profile-menu-arrow{color:#ccc}

/* 弹窗 */
.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:200}
.modal-overlay.active{display:block}
.modal{position:fixed;bottom:0;left:50%;transform:translateX(-50%) translateY(100%);width:100%;max-width:430px;background:#fff;border-radius:16px 16px 0 0;z-index:201;transition:transform 0.3s;max-height:80vh;overflow-y:auto}
.modal.active{transform:translateX(-50%) translateY(0)}
.modal-header{padding:15px;text-align:center;border-bottom:1px solid #f0f0f0;position:relative}
.modal-header h3{font-size:16px}
.modal-close{position:absolute;right:15px;top:50%;transform:translateY(-50%);font-size:20px;color:#999;cursor:pointer}
.modal-body{padding:15px}

/* 分享弹窗 */
.share-actions{display:flex;justify-content:center;gap:40px;padding:30px 0}
.share-action{text-align:center;cursor:pointer}
.share-action-icon{width:50px;height:50px;background:#07c160;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;font-size:20px;color:#fff}
.share-action-text{font-size:12px;color:#666}

/* 提示 */
.toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.7);color:#fff;padding:15px 25px;border-radius:8px;font-size:14px;z-index:300;opacity:0;transition:opacity 0.3s}
.toast.show{opacity:1}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn 0.3s ease}
</style>
</head>
<body>
<div class="status-bar">14:00</div>

<!-- 首页 -->
<div class="page active" id="page-home">
  <div class="home-banner">🍓 新鲜生活</div>
  <div class="home-search">
    <input type="text" placeholder="搜索商品" onclick="showPage('search')">
    <div style="background:#f5f5f5;width:40px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:16px">📷</div>
  </div>
  <div class="announcement">
    <div class="announcement-icon">📢</div>
    <div class="announcement-text">🔥 限时特惠：新鲜草莓仅需19.9元/斤！</div>
  </div>
  <div class="home-nav">
    <div class="nav-item" onclick="showPage('category')"><div class="nav-icon">🥬</div><span>分类</span></div>
    <div class="nav-item" onclick="showPage('cart')"><div class="nav-icon">🛒</div><span>购物车</span></div>
    <div class="nav-item" onclick="showPage('orders')"><div class="nav-icon">📋</div><span>订单</span></div>
    <div class="nav-item" onclick="showPage('profile')"><div class="nav-icon">👤</div><span>我的</span></div>
  </div>
  <div class="home-section">
    <div class="home-section-title"><h3>🍅 今日推荐</h3><span onclick="showPage('product-list')">查看更多 ></span></div>
    <div class="product-grid">
      <div class="product-card fade-in" onclick="showPage('detail')"><div class="pimg" style="background:linear-gradient(135deg,#ff6b6b,#ee5a5a);color:#fff">🍓</div><div class="info"><div class="name">新鲜草莓 500g/盒</div><div class="meta"><span class="price">¥19.9</span><span class="tag">新品</span></div></div></div>
      <div class="product-card fade-in" onclick="showPage('detail')"><div class="pimg" style="background:linear-gradient(135deg,#ffa94d,#ff922b);color:#fff">🥭</div><div class="info"><div class="name">台湾金钻芒果 2斤装</div><div class="meta"><span class="price">¥28.8</span><span class="tag">热卖</span></div></div></div>
      <div class="product-card fade-in" onclick="showPage('detail')"><div class="pimg" style="background:linear-gradient(135deg,#69db7c,#40c057);color:#fff">🥑</div><div class="info"><div class="name">进口牛油果 4个装</div><div class="meta"><span class="price">¥35.0</span></div></div></div>
      <div class="product-card fade-in" onclick="showPage('detail')"><div class="pimg" style="background:linear-gradient(135deg,#4dabf7,#339af0);color:#fff">🦐</div><div class="info"><div class="name">鲜活大虾 500g</div><div class="meta"><span class="price">¥42.0</span><span class="tag">冷链</span></div></div></div>
    </div>
  </div>
  <div class="home-section">
    <div class="home-section-title"><h3>🥬 新品上架</h3><span onclick="showPage('product-list')">查看更多 ></span></div>
    <div class="product-grid">
      <div class="product-card fade-in" onclick="showPage('detail')"><div class="pimg" style="background:linear-gradient(135deg,#da77f2,#be4bdb);color:#fff">🍇</div><div class="info"><div class="name">智利进口蓝莓 125g</div><div class="meta"><span class="price">¥25.8</span><span class="tag">新品</span></div></div></div>
      <div class="product-card fade-in" onclick="showPage('detail')"><div class="pimg" style="background:linear-gradient(135deg,#ffd43b,#fab005);color:#fff">🍋</div><div class="info"><div class="name">云南高原柠檬 3个</div><div class="meta"><span class="price">¥9.9</span><span class="tag">新品</span></div></div></div>
    </div>
  </div>
</div>

<!-- 分类页 -->
<div class="page" id="page-category">
  <div class="header"><div class="header-back" onclick="showPage('home')">←</div><div class="header-title">商品分类</div><div style="width:30px"></div></div>
  <div class="category-content">
    <div class="category-left">
      <ul id="categoryList">
        <li class="active" onclick="selectCategory(0)">时令水果</li>
        <li onclick="selectCategory(1)">蔬菜菌菇</li>
        <li onclick="selectCategory(2)">肉禽蛋奶</li>
        <li onclick="selectCategory(3)">海鲜水产</li>
        <li onclick="selectCategory(4)">速冻食品</li>
        <li onclick="selectCategory(5)">饮料酒水</li>
      </ul>
    </div>
    <div class="category-right" id="categoryRight"></div>
  </div>
</div>

<!-- 搜索页 -->
<div class="page" id="page-search">
  <div class="header"><div class="header-back" onclick="showPage('home')">←</div><div class="header-title">搜索</div><div style="width:30px"></div></div>
  <div class="search-header">
    <input type="text" placeholder="搜索商品" id="searchInput">
    <button onclick="doSearch()">搜索</button>
  </div>
  <div class="search-section">
    <div class="search-title"><span>搜索历史</span><span style="color:#07c160">清空</span></div>
    <div class="search-tags">
      <span class="search-tag" onclick="doSearch('草莓')">草莓</span>
      <span class="search-tag" onclick="doSearch('芒果')">芒果</span>
      <span class="search-tag" onclick="doSearch('牛油果')">牛油果</span>
      <span class="search-tag" onclick="doSearch('蓝莓')">蓝莓</span>
    </div>
  </div>
  <div class="search-section">
    <div class="search-title"><span>热门搜索</span></div>
    <div class="search-tags">
      <span class="search-tag" onclick="doSearch('时令水果')">时令水果</span>
      <span class="search-tag" onclick="doSearch('有机蔬菜')">有机蔬菜</span>
      <span class="search-tag" onclick="doSearch('进口海鲜')">进口海鲜</span>
      <span class="search-tag" onclick="doSearch('今日特惠')">今日特惠</span>
    </div>
  </div>
</div>

<!-- 商品列表页 -->
<div class="page" id="page-product-list">
  <div class="header"><div class="header-back" onclick="showPage('home')">←</div><div class="header-title">商品列表</div><div style="width:30px"></div></div>
  <div class="filter-bar">
    <div class="filter-btn active" onclick="setFilter(this)">综合</div>
    <div class="filter-btn" onclick="setFilter(this)">销量</div>
    <div class="filter-btn" onclick="setFilter(this)">价格</div>
    <div class="filter-btn" onclick="setFilter(this)">筛选</div>
  </div>
  <div class="product-list">
    <div class="product-list-item" onclick="showPage('detail')"><div class="limg" style="background:linear-gradient(135deg,#ff6b6b,#ee5a5a);color:#fff">🍓</div><div class="linfo"><div class="liname">新鲜草莓 500g/盒 当日采摘</div><div class="limeta"><span class="litag">当日达</span><span class="litag">冷链</span></div><div class="liprice">¥19.9</div></div></div>
    <div class="product-list-item" onclick="showPage('detail')"><div class="limg" style="background:linear-gradient(135deg,#ffa94d,#ff922b);color:#fff">🥭</div><div class="linfo"><div class="liname">台湾金钻芒果 2斤装</div><div class="limeta"><span class="litag">热卖</span></div><div class="liprice">¥28.8</div></div></div>
    <div class="product-list-item" onclick="showPage('detail')"><div class="limg" style="background:linear-gradient(135deg,#69db7c,#40c057);color:#fff">🥑</div><div class="linfo"><div class="liname">进口牛油果 4个装</div><div class="limeta"><span class="litag">新品</span></div><div class="liprice">¥35.0</div></div></div>
    <div class="product-list-item" onclick="showPage('detail')"><div class="limg" style="background:linear-gradient(135deg,#4dabf7,#339af0);color:#fff">🦐</div><div class="linfo"><div class="liname">鲜活大虾 500g</div><div class="limeta"><span class="litag">冷链</span></div><div class="liprice">¥42.0</div></div></div>
  </div>
</div>

<!-- 商品详情页 -->
<div class="page" id="page-detail">
  <div class="header"><div class="header-back" onclick="historyBack()">←</div><div class="header-title">商品详情</div><div class="header-more" onclick="showShareModal()">⋮</div></div>
  <div class="detail-content">
    <div class="detail-images">🍓</div>
    <div class="detail-info">
      <div class="detail-name">新鲜草莓 500g/盒 当日采摘</div>
      <div class="detail-price-row"><span class="detail-price">¥19.9</span><span style="font-size:12px;color:#999">已售 1285 件</span></div>
      <div class="detail-tags"><span class="detail-tag">当日达</span><span class="detail-tag">新鲜直采</span><span class="detail-tag">冷链配送</span></div>
      <div class="detail-origin">
        <p>产地：辽宁丹东 | 生产日期：今日 | 保质期：3天</p>
        <p>储存方式：冷藏保存，0-4℃</p>
      </div>
      <div class="detail-tags" style="margin-top:15px"><span class="detail-tag" onclick="showPage('spec-select')">选择规格 ></span></div>
    </div>
  </div>
  <div class="detail-bottom">
    <button class="btn-cart" onclick="showPage('spec-select')">加入购物车</button>
    <button class="btn-buy" onclick="showPage('spec-select')">立即购买</button>
  </div>
</div>

<!-- 规格选择页 -->
<div class="page" id="page-spec-select">
  <div class="header"><div class="header-back" onclick="showPage('detail')">←</div><div class="header-title">选择规格</div><div style="width:30px"></div></div>
  <div class="spec-page">
    <div class="spec-product">
      <div class="pimg" style="background:linear-gradient(135deg,#ff6b6b,#ee5a5a);color:#fff;font-size:30px">🍓</div>
      <div class="spec-product-info"><h4>新鲜草莓 500g/盒</h4><div class="price">¥19.9</div></div>
    </div>
    <div class="spec-group">
      <h4>规格</h4>
      <div class="spec-options">
        <span class="spec-option active" onclick="setSpec(this)">500g装</span>
        <span class="spec-option" onclick="setSpec(this)">1000g装 ¥35.0</span>
        <span class="spec-option" onclick="setSpec(this)">礼盒装 ¥58.0</span>
      </div>
    </div>
    <div class="spec-group">
      <h4>数量</h4>
      <div class="qty-row">
        <span class="qty-label">购买数量</span>
        <div class="qty-control">
          <button onclick="changeQty(-1)">-</button>
          <span id="qtyNum">1</span>
          <button onclick="changeQty(1)">+</button>
        </div>
      </div>
    </div>
    <div style="position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:#fff;padding:15px;display:flex;gap:10px;box-shadow:0 -2px 10px rgba(0,0,0,0.1)">
      <button style="flex:1;padding:12px;background:#ff6b00;color:#fff;border:none;border-radius:20px;font-size:14px" onclick="addToCart()">加入购物车</button>
      <button style="flex:1;padding:12px;background:#07c160;color:#fff;border:none;border-radius:20px;font-size:14px" onclick="buyNow()">立即购买</button>
    </div>
  </div>
</div>

<!-- 购物车页 -->
<div class="page" id="page-cart">
  <div class="header"><div class="header-back" onclick="showPage('home')">←</div><div class="header-title">购物车</div><div style="width:30px;color:#07c160;font-size:14px">编辑</div></div>
  <div class="cart-list">
    <div class="cart-store">
      <div class="cart-store-header"><input type="checkbox" checked><span class="store-name">🍓 鲜果多旗舰店</span></div>
      <div class="cart-item"><input type="checkbox" checked><div class="cimg" style="background:linear-gradient(135deg,#ff6b6b,#ee5a5a);color:#fff">🍓</div><div class="cart-item-info"><div class="cart-item-name">新鲜草莓 500g/盒</div><div class="cart-item-spec">500g装</div><div class="cart-item-bottom"><span class="cart-item-price">¥19.9</span><div class="cart-qty"><button onclick="changeCartQty(this,-1)">-</button><span>2</span><button onclick="changeCartQty(this,1)">+</button></div></div></div></div>
      <div class="cart-item"><input type="checkbox" checked><div class="cimg" style="background:linear-gradient(135deg,#ffa94d,#ff922b);color:#fff">🥭</div><div class="cart-item-info"><div class="cart-item-name">台湾金钻芒果 2斤装</div><div class="cart-item-spec">2斤装</div><div class="cart-item-bottom"><span class="cart-item-price">¥28.8</span><div class="cart-qty"><button onclick="changeCartQty(this,-1)">-</button><span>1</span><button onclick="changeCartQty(this,1)">+</button></div></div></div></div>
    </div>
    <div style="padding:12px;background:#fff3e0;border-radius:8px;margin:15px 0"><p style="font-size:13px;color:#ff6b00">💡 还差 ¥30.2 即可免运费</p></div>
  </div>
  <div class="cart-bottom-bar">
    <label><input type="checkbox" checked style="margin-right:5px">全选</label>
    <div class="total"><span style="color:#666;font-size:12px">合计：</span><span class="price">¥68.6</span></div>
    <button onclick="showPage('order')">去结算</button>
  </div>
</div>

<!-- 订单确认页 -->
<div class="page" id="page-order">
  <div class="header"><div class="header-back" onclick="showPage('cart')">←</div><div class="header-title">确认订单</div><div style="width:30px"></div></div>
  <div class="order-content">
    <div class="order-address" onclick="showPage('address')">
      <div class="order-address-icon">📍</div>
      <div class="order-address-info"><div class="order-address-name">张三 138****8888</div><div class="order-address-detail">北京市朝阳区建国路88号SOHO现代城A座1201</div></div>
      <div style="color:#999">></div>
    </div>
    <div class="order-items">
      <div class="order-items-title">🍓 鲜果多旗舰店</div>
      <div class="order-item"><div class="oimg" style="background:linear-gradient(135deg,#ff6b6b,#ee5a5a);color:#fff">🍓</div><div class="order-item-info"><div class="order-item-name">新鲜草莓 500g/盒 x2</div><div class="order-item-price">¥39.8</div></div></div>
      <div class="order-item"><div class="oimg" style="background:linear-gradient(135deg,#ffa94d,#ff922b);color:#fff">🥭</div><div class="order-item-info"><div class="order-item-name">台湾金钻芒果 2斤装 x1</div><div class="order-item-price">¥28.8</div></div></div>
    </div>
    <div class="order-options">
      <div class="order-option" onclick="showPage('delivery')"><div class="order-option-left"><span class="order-option-icon">🚚</span><span>配送方式</span></div><div><span>送货上门</span><span style="color:#999;margin-left:5px">></span></div></div>
      <div class="order-option" onclick="showPage('delivery')"><div class="order-option-left"><span class="order-option-icon">🕐</span><span>配送时间</span></div><div><span>立即配送</span><span style="color:#999;margin-left:5px">></span></div></div>
      <div class="order-option" onclick="showPage('coupon')"><div class="order-option-left"><span class="order-option-icon">🎫</span><span>优惠券</span></div><div><span class="order-coupon">-¥5.00</span></div></div>
      <div class="order-option" onclick="showPage('remark')"><div class="order-option-left"><span class="order-option-icon">📝</span><span>订单备注</span></div><div><span style="color:#999">点击添加备注</span></div></div>
    </div>
    <div class="order-summary">
      <div class="order-summary-row"><span>商品金额</span><span>¥68.6</span></div>
      <div class="order-summary-row"><span>运费</span><span>¥0.00</span></div>
      <div class="order-summary-row"><span>优惠券</span><span style="color:#ff4d4f">-¥5.00</span></div>
      <div class="order-summary-row total"><span>合计</span><span class="final">¥63.6</span></div>
    </div>
  </div>
  <div class="order-bottom-bar">
    <div class="total"><span style="font-size:12px;color:#666">应付金额：</span><span class="price">¥63.6</span></div>
    <button onclick="showPage('pay')">提交订单</button>
  </div>
</div>

<!-- 支付页 -->
<div class="page" id="page-pay">
  <div class="header"><div class="header-back" onclick="showPage('order')">←</div><div class="header-title">订单支付</div><div style="width:30px"></div></div>
  <div style="padding:30px;text-align:center">
    <div style="font-size:14px;color:#666;margin-bottom:10px">应付金额</div>
    <div style="font-size:36px;font-weight:600;color:#ff4d4f">¥63.6</div>
  </div>
  <div class="pay-methods">
    <div class="pay-method active" onclick="selectPay(this)"><div class="pay-method-icon">💳</div><div class="pay-method-info"><div class="pay-method-name">微信支付</div><div class="pay-method-desc">推荐使用</div></div><div style="color:#07c160">✓</div></div>
    <div class="pay-method" onclick="selectPay(this)"><div class="pay-method-icon">💰</div><div class="pay-method-info"><div class="pay-method-name">余额支付</div><div class="pay-method-desc">当前余额 ¥128.00</div></div></div>
    <div class="pay-method" onclick="selectPay(this)"><div class="pay-method-icon">🏦</div><div class="pay-method-info"><div class="pay-method-name">银行卡</div><div class="pay-method-desc">招商银行 **** 8888</div></div></div>
  </div>
  <div class="pay-submit"><button onclick="doPay()">确认支付 ¥63.6</button></div>
</div>

<!-- 配送选择页 -->
<div class="page" id="page-delivery">
  <div class="header"><div class="header-back" onclick="showPage('order')">←</div><div class="header-title">配送方式</div><div style="width:30px"></div></div>
  <div style="padding:15px">
    <div class="spec-group">
      <h4>配送方式</h4>
      <div class="spec-options">
        <span class="spec-option active" onclick="setSpec(this)">🚚 送货上门</span>
        <span class="spec-option" onclick="setSpec(this)">🏪 到店自提</span>
      </div>
    </div>
    <div class="spec-group">
      <h4>配送时间</h4>
      <div class="spec-options">
        <span class="spec-option active" onclick="setSpec(this)">立即配送</span>
        <span class="spec-option" onclick="setSpec(this)">下午 15:00-17:00</span>
        <span class="spec-option" onclick="setSpec(this)">下午 17:00-19:00</span>
        <span class="spec-option" onclick="setSpec(this)">明天上午 9:00-11:00</span>
      </div>
    </div>
    <button style="width:100%;padding:14px;background:#07c160;color:#fff;border:none;border-radius:8px;font-size:15px;margin-top:30px" onclick="showPage('order')">确认</button>
  </div>
</div>

<!-- 优惠券页 -->
<div class="page" id="page-coupon">
  <div class="header"><div class="header-back" onclick="showPage('order')">←</div><div class="header-title">优惠券</div><div style="width:30px"></div></div>
  <div style="padding:15px">
    <div style="padding:15px;background:#07c160;color:#fff;border-radius:8px;margin-bottom:10px;display:flex;align-items:center">
      <div style="flex:1"><div style="font-size:24px;font-weight:600">¥5</div><div style="font-size:12px">满68元可用</div></div>
      <div style="text-align:right"><div style="font-size:12px;margin-bottom:5px">新人专享</div><span style="font-size:12px;padding:4px 10px;background:#fff;color:#07c160;border-radius:4px">立即使用</span></div>
    </div>
    <div style="padding:15px;background:#f5f5f5;border-radius:8px;margin-bottom:10px;display:flex;align-items:center;opacity:0.6">
      <div style="flex:1"><div style="font-size:24px;font-weight:600;color:#999">¥3</div><div style="font-size:12px;color:#999">满50元可用</div></div>
      <div style="font-size:12px;color:#999">已使用</div>
    </div>
  </div>
</div>

<!-- 备注页 -->
<div class="page" id="page-remark">
  <div class="header"><div class="header-back" onclick="showPage('order')">←</div><div class="header-title">订单备注</div><div style="width:30px;color:#07c160" onclick="showPage('order')">保存</div></div>
  <div style="padding:15px">
    <textarea style="width:100%;height:150px;padding:12px;border:1px solid #f0f0f0;border-radius:8px;font-size:14px;resize:none;outline:none" placeholder="请输入备注信息，如：水果要甜一些">
全部
待付款
待发货
待收货
已完成
🍓 鲜果多旗舰店待收货
🍓
新鲜草莓 500g/盒 x2
¥39.8
🥭
台湾金钻芒果 2斤装 x1
¥28.8
共3件合计：¥68.6
🥬 绿色田园已完成
🥬
有机西兰花 500g x1
¥12.8
共1件合计：¥12.8
🦐 海鲜世界待付款
🦐
鲜活大虾 500g x2
¥84.0
共2件合计：¥84.0
🚚
配送中
预计 15:30 送达
收货信息
张三 138****8888
北京市朝阳区建国路88号SOHO现代城A座1201
🍓 鲜果多旗舰店
🍓
新鲜草莓 500g/盒 x2
¥39.8
🥭
台湾金钻芒果 2斤装 x1
¥28.8
订单信息
订单编号：SF202405120001
下单时间：2024-05-12 14:00
支付方式：微信支付
商品金额¥68.6
运费¥0.00
实付金额¥63.6
顺丰速运配送中
运单号：SF1234567890
骑手：李师傅 138****1234
14:30
骑手正在配送，预计15:30送达
14:15
骑手已取货，正在赶往目的地
13:50
骑手已到店，正在取货
13:45
骑手已接单，正在前往门店
13:40
订单已发货，正在分配骑手
★ ★ ★ ★ ★
🍓
新鲜草莓 500g/盒

¥19.9
💰
退款
📦
退货退款
🔄
换货
上传凭证

默认
张三
138****8888
北京市朝阳区建国路88号SOHO现代城A座1201
编辑删除
李四
139****6666
北京市海淀区中关村大街1号科贸中心B座502
编辑删除
+ 添加新地址
收货人
手机号码
所在地区
详细地址
设为默认地址
🍓
新鲜草莓 500g/盒
¥19.9
取消收藏
🥭
台湾金钻芒果 2斤装
¥28.8
取消收藏
🍓
新鲜草莓 500g/盒
¥19.9
🍇
智利进口蓝莓 125g
¥25.8
🍓 新鲜草莓★★★★★
草莓很新鲜，包装也很好，物流很快！
2024-05-10
🥭 金钻芒果★★★★☆
芒果很甜很好吃，下次还会回购
2024-05-08
💬
在线客服
工作时间：9:00-22:00
或拨打客服热线
400-888-8888
如何修改收货地址？+
您可以在"我的-收货地址"中新增、编辑或删除收货地址。
订单如何取消？+
待付款状态的订单可以取消，点击订单详情页的"取消订单"按钮即可。
如何申请售后？+
在"我的订单"中找到需要售后的订单，点击"申请售后"即可。
退款多久到账？+
退款会在1-3个工作日内原路返回到您的支付账户。
配送范围是什么？+
目前支持全城配送，具体以实际配送地址为准。
🍓
鲜果多生鲜
版本 1.0.0
鲜果多是一家专注于生鲜水果的电商平台，致力于为用户提供新鲜、优质、便捷的生鲜购物体验。
我们与各大农场直连，确保水果从采摘到送达全程冷链保鲜。
客服热线：400-888-8888
商务合作：business@xianguoduo.com
👤
张三
138****8888
💰1
待付款
📦
待发货
🚚
待收货
⭐
待评价
🏠
首页
📂
分类
🛒
购物车
📋
订单
👤
我的
编辑页面

新鲜草莓 500g/盒

退款原因

上传凭证

分享商品
