中科集团HTML托管
返回管理
编辑页面
页面标题
有效期
7天
30天
90天
修改后将从当前时间重新计算过期时间
CSS文件（可选）
JS文件（可选）
HTML内容
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>农产品分销小程序</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="app" class="app-container"> <!-- 底部导航 --> <nav class="bottom-nav"> <div class="nav-item active" data-page="home"> <svg viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg> <span>首页</span> </div> <div class="nav-item" data-page="category"> <svg viewBox="0 0 24 24"><path d="M12 2l-5.5 9h11L12 2zm0 3.84L13.93 9h-3.87L12 5.84zM17.5 13c-2.49 0-4.5 2.01-4.5 4.5s2.01 4.5 4.5 4.5 4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5zm0 7c-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.5zM3 21.5h8v-8H3v8zm2-6h4v4H5v-4z"/></svg> <span>分类</span> </div> <div class="nav-item" data-page="cart"> <svg viewBox="0 0 24 24"><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="cart-badge" id="cartBadge">3</span> </div> <div class="nav-item" data-page="distribution"> <svg viewBox="0 0 24 24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg> <span>分销</span> </div> <div class="nav-item" data-page="profile"> <svg viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg> <span>我的</span> </div> </nav> <!-- 首页 --> <div class="page active" id="home"> <div class="search-bar"> <input type="text" placeholder="搜索农产品"> </div> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="https://images.unsplash.com/photo-1542838132-92c53300491e?w=400&h=200&fit=crop" alt="新鲜水果"></div> <div class="swiper-slide"><img src="https://images.unsplash.com/photo-1506484381205-f7945b51d469?w=400&h=200&fit=crop" alt="有机蔬菜"></div> <div class="swiper-slide"><img src="https://images.unsplash.com/photo-1464226184884-fa280b87c399?w=400&h=200&fit=crop" alt="农家特产"></div> </div> <div class="swiper-pagination"></div> </div> <div class="category-nav"> <div class="category-item" onclick="showProductList('蔬菜')"><div class="category-icon" style="background:#e8f5e9">🥬</div><span>蔬菜</span></div> <div class="category-item" onclick="showProductList('水果')"><div class="category-icon" style="background:#fff3e0">🍎</div><span>水果</span></div> <div class="category-item" onclick="showProductList('粮油')"><div class="category-icon" style="background:#fce4ec">🌾</div><span>粮油</span></div> <div class="category-item" onclick="showProductList('菌菇')"><div class="category-icon" style="background:#e3f2fd">🍄</div><span>菌菇</span></div> <div class="category-item" onclick="showProductList('蜂蜜')"><div class="category-icon" style="background:#f3e5f5">🍯</div><span>蜂蜜</span></div> <div class="category-item" onclick="showProductList('坚果')"><div class="category-icon" style="background:#fff8e1">🥜</div><span>坚果</span></div> <div class="category-item" onclick="showProductList('禽蛋')"><div class="category-icon" style="background:#e0f7fa">🐔</div><span>禽蛋</span></div> <div class="category-item" onclick="showProductList('茶叶')"><div class="category-icon" style="background:#efebe9">🍵</div><span>茶叶</span></div> </div> <div class="section"> <div class="section-header"> <div class="seckill-title"><span class="seckill-icon">⏰</span><span>限时秒杀</span> <div class="countdown"><span class="countdown-num" id="hours">02</span>:<span class="countdown-num" id="minutes">35</span>:<span class="countdown-num" id="seconds">48</span></div> </div> <span class="more" onclick="showProductList('秒杀')">更多 ></span> </div> <div class="seckill-products"> <div class="seckill-item" onclick="showProductDetail(1)"><img src="https://images.unsplash.com/photo-1567306226416-28f0efdc88ce?w=120&h=120&fit=crop" alt="有机西红柿"><div class="seckill-price"><span class="original">¥29.9</span><span class="current">¥19.9</span></div></div> <div class="seckill-item" onclick="showProductDetail(2)"><img src="https://images.unsplash.com/photo-1560806887-1e4cd0b6cbd6?w=120&h=120&fit=crop" alt="新鲜草莓"><div class="seckill-price"><span class="original">¥49.9</span><span class="current">¥29.9</span></div></div> <div class="seckill-item" onclick="showProductDetail(3)"><img src="https://images.unsplash.com/photo-1546549032-9571cd6b27df?w=120&h=120&fit=crop" alt="土鸡蛋"><div class="seckill-price"><span class="original">¥39.9</span><span class="current">¥25.8</span></div></div> </div> </div> <div class="section"> <div class="section-header"><h3>🏆 畅销产品</h3><span class="more" onclick="showProductList('畅销')">更多 ></span></div> <div class="product-grid"> <div class="product-card" onclick="showProductDetail(4)"><img src="https://images.unsplash.com/photo-1587049352846-4a222e784d38?w=160&h=160&fit=crop" alt="红富士苹果"><div class="product-info"><h4>红富士苹果 5斤装</h4><p class="product-desc">产自甘肃静宁 脆甜多汁</p><div class="product-bottom"><span class="price">¥38.8</span><button class="add-cart-btn" onclick="event.stopPropagation();addToCart()">+</button></div></div></div> <div class="product-card" onclick="showProductDetail(5)"><img src="https://images.unsplash.com/photo-1518843875459-f738682238a6?w=160&h=160&fit=crop" alt="东北大米"><div class="product-info"><h4>东北五常大米 10斤</h4><p class="product-desc">稻花香二号 新米上市</p><div class="product-bottom"><span class="price">¥68.0</span><button class="add-cart-btn" onclick="event.stopPropagation();addToCart()">+</button></div></div></div> </div> </div> <div class="section"> <div class="section-header"><h3>🆕 新品推荐</h3><span class="more" onclick="showProductList('新品')">更多 ></span></div> <div class="product-grid"> <div class="product-card" onclick="showProductDetail(6)"><img src="https://images.unsplash.com/photo-1621866925219-1e1092fba91c?w=160&h=160&fit=crop" alt="春笋"><div class="product-info"><h4>临安春笋 2斤装</h4><p class="product-desc">新鲜采挖 当日达</p><div class="product-bottom"><span class="price">¥32.0</span><button class="add-cart-btn" onclick="event.stopPropagation();addToCart()">+</button></div></div></div> <div class="product-card" onclick="showProductDetail(7)"><img src="https://images.unsplash.com/photo-1598170845058-32b9d6a5da37?w=160&h=160&fit=crop" alt="槐花蜜"><div class="product-info"><h4>秦岭槐花蜜 500g</h4><p class="product-desc">天然原蜜 农家自产</p><div class="product-bottom"><span class="price">¥58.0</span><button class="add-cart-btn" onclick="event.stopPropagation();addToCart()">+</button></div></div></div> </div> </div> <div class="section"> <div class="section-header"><h3>👥 拼团活动</h3><span class="more" onclick="showProductList('拼团')">更多 ></span></div> <div class="group-buy"> <div class="group-item" onclick="showProductDetail(8)"><img src="https://images.unsplash.com/photo-1560717789-0ac7c58ac90a?w=120&h=120&fit=crop" alt="赣南脐橙"><div class="group-info"><h4>赣南脐橙 5斤</h4><div class="group-price"><span class="group-current">¥24.9</span><span class="group-original">¥39.9</span></div><div class="group-progress"><div class="progress-bar"><div style="width:75%"></div></div><span>已拼68%</span></div></div><button class="group-btn">去拼团</button></div> <div class="group-item" onclick="showProductDetail(9)"><img src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=120&h=120&fit=crop" alt="核桃"><div class="group-info"><h4>新疆薄皮核桃 3斤</h4><div class="group-price"><span class="group-current">¥35.8</span><span class="group-original">¥55.0</span></div><div class="group-progress"><div class="progress-bar"><div style="width:45%"></div></div><span>已拼45%</span></div></div><button class="group-btn">去拼团</button></div> </div> </div> </div> <!-- 分类页 --> <div class="page" id="category"> <div class="category-header">商品分类</div> <div class="category-content"> <div class="category-left"> <div class="category-name active" onclick="switchCategory(this, '时令水果')">新鲜水果</div> <div class="category-name" onclick="switchCategory(this, '有机蔬菜')">有机蔬菜</div> <div class="category-name" onclick="switchCategory(this, '粮油调味')">粮油调味</div> <div class="category-name" onclick="switchCategory(this, '菌菇干货')">菌菇干货</div> <div class="category-name" onclick="switchCategory(this, '坚果炒货')">坚果炒货</div> <div class="category-name" onclick="switchCategory(this, '蜂蜜蜂胶')">蜂蜜蜂胶</div> <div class="category-name" onclick="switchCategory(this, '禽蛋肉类')">禽蛋肉类</div> <div class="category-name" onclick="switchCategory(this, '茶叶茶具')">茶叶茶具</div> </div> <div class="category-right" id="categoryRight"> <div class="sub-category"><h4>时令水果</h4><div class="sub-items"><div class="sub-item" onclick="showProductDetail(10)"><img src="https://images.unsplash.com/photo-1550258987-190a2d41a8ba?w=80&h=80&fit=crop" alt="芒果"><span>芒果</span></div><div class="sub-item" onclick="showProductDetail(11)"><img src="https://images.unsplash.com/photo-1528821128474-27f963b062bf?w=80&h=80&fit=crop" alt="草莓"><span>草莓</span></div><div class="sub-item" onclick="showProductDetail(12)"><img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=80&h=80&fit=crop" alt="蓝莓"><span>蓝莓</span></div></div></div> <div class="sub-category"><h4>苹果梨</h4><div class="sub-items"><div class="sub-item" onclick="showProductDetail(13)"><img src="https://images.unsplash.com/photo-1587049352846-4a222e784d38?w=80&h=80&fit=crop" alt="红富士"><span>红富士</span></div><div class="sub-item" onclick="showProductDetail(14)"><img src="https://images.unsplash.com/photo-1570913149827-d2ac84ab3f9a?w=80&h=80&fit=crop" alt="皇冠梨"><span>皇冠梨</span></div></div></div> </div> </div> </div> <!-- 商品列表页 --> <div class="page" id="productList"> <div class="list-header"> <button class="back-btn" onclick="goBack()"><</button> <div class="list-title" id="listTitle">商品列表</div> <span class="list-filter" onclick="showToast('筛选')">筛选</span> </div> <div class="list-tabs"> <span class="active">综合</span> <span>销量</span> <span>价格</span> <span>新品</span> </div> <div class="list-content"> <div class="product-grid"> <div class="product-card" onclick="showProductDetail(1)"><img src="https://images.unsplash.com/photo-1567306226416-28f0efdc88ce?w=160&h=160&fit=crop" alt="西红柿"><div class="product-info"><h4>有机西红柿 3斤</h4><p class="product-desc">新鲜采摘 自然成熟</p><div class="product-bottom"><span class="price">¥19.9</span><button class="add-cart-btn" onclick="event.stopPropagation();addToCart()">+</button></div></div></div> <div class="product-card" onclick="showProductDetail(2)"><img src="https://images.unsplash.com/photo-1560806887-1e4cd0b6cbd6?w=160&h=160&fit=crop" alt="草莓"><div class="product-info"><h4>新鲜草莓 2盒装</h4><p class="product-desc">丹东草莓 空运直达</p><div class="product-bottom"><span class="price">¥29.9</span><button class="add-cart-btn" onclick="event.stopPropagation();addToCart()">+</button></div></div></div> <div class="product-card" onclick="showProductDetail(3)"><img src="https://images.unsplash.com/photo-1546549032-9571cd6b27df?w=160&h=160&fit=crop" alt="土鸡蛋"><div class="product-info"><h4>农家土鸡蛋 30枚</h4><p class="product-desc">散养土鸡 营养健康</p><div class="product-bottom"><span class="price">¥25.8</span><button class="add-cart-btn" onclick="event.stopPropagation();addToCart()">+</button></div></div></div> <div class="product-card" onclick="showProductDetail(4)"><img src="https://images.unsplash.com/photo-1587049352846-4a222e784d38?w=160&h=160&fit=crop" alt="苹果"><div class="product-info"><h4>红富士苹果 5斤装</h4><p class="product-desc">产自甘肃静宁 脆甜多汁</p><div class="product-bottom"><span class="price">¥38.8</span><button class="add-cart-btn" onclick="event.stopPropagation();addToCart()">+</button></div></div></div> </div> </div> </div> <!-- 购物车页 --> <div class="page" id="cart"> <div class="cart-header"><span>购物车</span><span class="edit-btn" onclick="toggleEdit()">编辑</span></div> <div class="cart-content"> <div class="cart-item"><div class="cart-check active" onclick="toggleSelect(this)"></div><img src="https://images.unsplash.com/photo-1587049352846-4a222e784d38?w=80&h=80&fit=crop" alt="红富士苹果"><div class="cart-info"><h4>红富士苹果 5斤装</h4><p>产自甘肃静宁 脆甜多汁</p><div class="cart-bottom"><span class="cart-price">¥38.8</span><div class="quantity"><button class="qty-btn" onclick="changeQty(this, -1)">-</button><span>2</span><button class="qty-btn" onclick="changeQty(this, 1)">+</button></div></div></div></div> <div class="cart-item"><div class="cart-check active" onclick="toggleSelect(this)"></div><img src="https://images.unsplash.com/photo-1518843875459-f738682238a6?w=80&h=80&fit=crop" alt="东北大米"><div class="cart-info"><h4>东北五常大米 10斤</h4><p>稻花香二号 新米上市</p><div class="cart-bottom"><span class="cart-price">¥68.0</span><div class="quantity"><button class="qty-btn" onclick="changeQty(this, -1)">-</button><span>1</span><button class="qty-btn" onclick="changeQty(this, 1)">+</button></div></div></div></div> <div class="cart-item"><div class="cart-check" onclick="toggleSelect(this)"></div><img src="https://images.unsplash.com/photo-1560806887-1e4cd0b6cbd6?w=80&h=80&fit=crop" alt="草莓"><div class="cart-info"><h4>新鲜草莓 2盒装</h4><p>当日采摘 空运直达</p><div class="cart-bottom"><span class="cart-price">¥49.9</span><div class="quantity"><button class="qty-btn" onclick="changeQty(this, -1)">-</button><span>1</span><button class="qty-btn" onclick="changeQty(this, 1)">+</button></div></div></div></div> </div> <div class="cart-footer"> <div class="cart-select-all" onclick="selectAll()"><div class="cart-check" id="selectAll"></div><span>全选</span></div> <div class="cart-total"><p>合计: <span>¥145.6</span></p></div> <button class="checkout-btn" onclick="showOrderConfirm()">结算(2)</button> </div> </div> <!-- 分销中心 --> <div class="page" id="distribution"> <div class="distribution-header"><div class="user-info"><img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=60&h=60&fit=crop" alt="头像"><div class="user-detail"><h4>张三</h4><p>分销商</p></div></div></div> <div class="commission-overview"> <div class="commission-item"><h3>¥2,568.00</h3><p>累计佣金</p></div> <div class="commission-item"><h3>¥1,280.50</h3><p>可提现</p></div> <div class="commission-item"><h3>¥860.00</h3><p>已提现</p></div> </div> <button class="withdraw-btn" onclick="showPage('withdraw')">立即提现</button> <div class="distribution-menu"> <div class="menu-item" onclick="showPage('myCustomers')"><span class="menu-icon">👥</span><span>我的客户</span><span class="arrow">></span></div> <div class="menu-item" onclick="showPage('customerOrders')"><span class="menu-icon">📦</span><span>客户订单</span><span class="arrow">></span></div> <div class="menu-item" onclick="showPage('distributionProducts')"><span class="menu-icon">🎁</span><span>分销商品</span><span class="arrow">></span></div> <div class="menu-item" onclick="showPage('shareLink')"><span class="menu-icon">🔗</span><span>分享链接</span><span class="arrow">></span></div> <div class="menu-item" onclick="showPage('sharePoster')"><span class="menu-icon">🖼️</span><span>分享海报</span><span class="arrow">></span></div> </div> <div class="distribution-stats"><h4>本月数据</h4><div class="stats-grid"><div class="stat-item"><span class="stat-num">128</span><span class="stat-label">访问人数</span></div><div class="stat-item"><span class="stat-num">45</span><span class="stat-label">下单客户</span></div><div class="stat-item"><span class="stat-num">86</span><span class="stat-label">订单数</span></div><div class="stat-item"><span class="stat-num">¥3,280</span><span class="stat-label">销售额</span></div></div></div> </div> <!-- 个人中心 --> <div class="page" id="profile"> <div class="profile-header"> <div class="profile-user"><img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&fit=crop" alt="头像"><div class="profile-info"><h3>张三</h3><p>会员ID: 888888</p></div></div> <div class="profile-stats"><div class="stat-box" onclick="showPage('points')"><span class="stat-value">1,280</span><span class="stat-name">积分</span></div><div class="stat-box" onclick="showPage('myCoupons')"><span class="stat-value">5</span><span class="stat-name">优惠券</span></div><div class="stat-box" onclick="showPage('myCollection')"><span class="stat-value">12</span><span class="stat-name">收藏</span></div></div> </div> <div class="order-section"> <div class="section-title"><h4>我的订单</h4><span onclick="showPage('allOrders')">全部订单 ></span></div> <div class="order-status"> <div class="status-item" onclick="showPage('pendingPay')"><span class="status-icon">💰</span><span>待付款</span><span class="badge">2</span></div> <div class="status-item" onclick="showPage('pendingShip')"><span class="status-icon">🚚</span><span>待发货</span><span class="badge">1</span></div> <div class="status-item" onclick="showPage('pendingReceive')"><span class="status-icon">📦</span><span>待收货</span><span class="badge">3</span></div> <div class="status-item" onclick="showPage('pendingReview')"><span class="status-icon">⭐</span><span>待评价</span><span class="badge">2</span></div> </div> </div> <div class="menu-section"> <div class="menu-item" onclick="showPage('address')"><span class="menu-icon">📍</span><span>收货地址</span><span class="arrow">></span></div> <div class="menu-item" onclick="showPage('myCoupons')"><span class="menu-icon">🎟️</span><span>我的优惠券</span><span class="arrow">></span></div> <div class="menu-item" onclick="showPage('myCollection')"><span class="menu-icon">❤️</span><span>我的收藏</span><span class="arrow">></span></div> <div class="menu-item" onclick="showPage('points')"><span class="menu-icon">💎</span><span>积分中心</span><span class="arrow">></span></div> <div class="menu-item" onclick="showPage('customerService')"><span class="menu-icon">💬</span><span>联系客服</span><span class="arrow">></span></div> <div class="menu-item" onclick="showPage('settings')"><span class="menu-icon">⚙️</span><span>设置</span><span class="arrow">></span></div> </div> </div> <!-- ========== 二级页面 ========== --> <!-- 产品详情页 --> <div class="page product-detail" id="productDetail"> <div class="detail-header"><button class="back-btn" onclick="goBack()"><</button><div class="header-tabs"><span class="active">商品</span><span onclick="showToast('查看详情')">详情</span><span onclick="showToast('查看评价')">评价</span></div><button class="share-btn" onclick="showToast('分享商品')">分享</button></div> <div class="detail-content"> <div class="product-images"><div class="main-image"><img src="https://images.unsplash.com/photo-1587049352846-4a222e784d38?w=400&h=400&fit=crop" alt="红富士苹果"></div></div> <div class="product-base"><div class="product-price"><span class="current-price">¥38.8</span><span class="original-price">¥48.8</span><span class="sales">已售 1234 件</span></div><h2 class="product-title">红富士苹果 5斤装 产自甘肃静宁 脆甜多汁</h2></div> <div class="product-specs"> <div class="spec-item" onclick="showSpecSelector()"><span class="spec-label">规格</span><span class="spec-value">5斤装 12-15个 <span class="arrow">></span></span></div> <div class="spec-item"><span class="spec-label">配送</span><span class="spec-value">快递 · 预计2-3天送达</span></div> </div> <div class="product-reviews"><div class="reviews-header"><h4>商品评价 (128)</h4><span onclick="showPage('allReviews')">查看全部 ></span></div><div class="review-item"><div class="review-user"><img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=40&h=40&fit=crop" alt=""><span>小红</span><span class="review-stars">⭐⭐⭐⭐⭐</span></div><p class="review-content">苹果非常新鲜，脆甜多汁，家人都很喜欢吃，已经回购多次了！</p><p class="review-meta">2024-03-15</p></div></div> <div class="product-detail-desc"><h4>商品详情</h4><p>产地：甘肃省静宁县</p><p>规格：5斤装，约12-15个</p><p>储存方式：冷藏保存</p><p>特点：皮薄肉厚、脆甜多汁，自然成熟</p></div> </div> <div class="product-footer"><div class="footer-icons"><div class="footer-icon" onclick="toggleFavorite(this)"><span>❤️</span><span>收藏</span></div><div class="footer-icon" onclick="navigateTo('cart')"><span>🛒</span><span>购物车</span></div></div><div class="footer-btns"><button class="add-cart-btn" onclick="addToCart()">加入购物车</button><button class="buy-now-btn" onclick="buyNow()">立即购买</button></div></div> </div> <!-- 确认订单页 --> <div class="page order-confirm" id="orderConfirm"> <div class="confirm-header"><button class="back-btn" onclick="goBack()"><</button><span>确认订单</span><span></span></div> <div class="confirm-content"> <div class="address-section" onclick="showPage('selectAddress')"> <div class="address-icon">📍</div><div class="address-info"><div class="address-top"><span class="name">张三</span><span class="phone">138****8888</span></div><p class="address-detail">北京市朝阳区建国路88号SOHO现代城1号楼1501室</p></div><span class="arrow">></span> </div> <div class="order-item"><img src="https://images.unsplash.com/photo-1587049352846-4a222e784d38?w=80&h=80&fit=crop" alt="红富士苹果"><div class="order-item-info"><h4>红富士苹果 5斤装</h4><p>x2</p></div><span class="item-price">¥77.6</span></div> <div class="order-item"><img src="https://images.unsplash.com/photo-1518843875459-f738682238a6?w=80&h=80&fit=crop" alt="东北大米"><div class="order-item-info"><h4>东北五常大米 10斤</h4><p>x1</p></div><span class="item-price">¥68.0</span></div> <div class="order-options"> <div class="option-item" onclick="showToast('选择配送方式')"><span>配送方式</span><span>快递配送 <span class="arrow">></span></span></div> <div class="option-item" onclick="showPage('selectCoupon')"><span>优惠券</span><span class="coupon-highlight">-¥10.00 <span class="arrow">></span></span></div> <div class="option-item"><span>备注</span><input type="text" placeholder="选填，可备注特殊需求"></div> </div> <div class="order-summary"><div class="summary-row"><span>商品金额</span><span>¥145.6</span></div><div class="summary-row"><span>运费</span><span>¥0.0</span></div><div class="summary-row"><span>优惠券</span><span class="highlight">-¥10.0</span></div></div> </div> <div class="confirm-footer"><div class="total-price"><span>合计: </span><span class="price">¥135.6</span></div><button class="submit-order-btn" onclick="submitOrder()">提交订单</button></div> </div> <!-- 全部订单页 --> <div class="page" id="allOrders"> <div class="sub-header"><button class="back-btn" onclick="goBack()"><</button><span>我的订单</span><span></span></div> <div class="order-tabs"><span class="active">全部</span><span>待付款</span><span>待发货</span><span>待收货</span><span>待评价</span></div> <div class="order-list"> <div class="order-card"><div class="order-top"><span class="order-id">订单号: 20240315001</span><span class="order-status-text">待发货</span></div><div class="order-goods"><img src="https://images.unsplash.com/photo-1587049352846-4a222e784d38?w=60&h=60&fit=crop"><div class="goods-info"><h4>红富士苹果 5斤装</h4><p>x2</p></div><span>¥77.6</span></div><div class="order-total"><span>共2件商品 合计: ¥77.6</span></div><div class="order-actions"><button class="btn-gray" onclick="showToast('提醒发货')">提醒发货</button></div></div> <div class="order-card"><div class="order-top"><span class="order-id">订单号: 20240314002</span><span class="order-status-text">待收货</span></div><div class="order-goods"><img src="https://images.unsplash.com/photo-1518843875459-f738682238a6?w=60&h=60&fit=crop"><div class="goods-info"><h4>东北五常大米 10斤</h4><p>x1</p></div><span>¥68.0</span></div><div class="order-total"><span>共1件商品 合计: ¥68.0</span></div><div class="order-actions"><button class="btn-gray" onclick="showToast('查看物流')">查看物流</button><button class="btn-primary" onclick="showToast('确认收货')">确认收货</button></div></div> <div class="order-card"><div class="order-top"><span class="order-id">订单号: 20240313003</span><span class="order-status-text">待评价</span></div><div class="order-goods"><img src="https://images.unsplash.com/photo-1560806887-1e4cd0b6cbd6?w=60&h=60&fit=crop"><div class="goods-info"><h4>新鲜草莓 2盒装</h4><p>x1</p></div><span>¥49.9</span></div><div class="order-total"><span>共1件商品 合计: ¥49.9</span></div><div class="order-actions"><button class="btn-primary" onclick="showToast('去评价')">去评价</button></div></div> </div> </div> <!-- 收货地址页 --> <div class="page" id="address"> <div class="sub-header"><button class="back-btn" onclick="goBack()"><</button><span>收货地址</span><span class="add-address" onclick="showToast('新增地址')">+ 新增</span></div> <div class="address-list"> <div class="address-card default"> <div class="address-main"><h4>张三 <span>138****8888</span></h4><p>北京市朝阳区建国路88号SOHO现代城1号楼1501室</p></div> <div class="address-tags"><span class="tag-default">默认</span></div> <div class="address-action"><span onclick="showToast('编辑地址')">编辑</span><span onclick="showToast('删除地址')">删除</span></div> </div> <div class="address-card"> <div class="address-main"><h4>李四 <span>139****6666</span></h4><p>上海市浦东新区陆家嘴环路1000号</p></div> <div class="address-action"><span onclick="showToast('编辑地址')">编辑</span><span onclick="showToast('删除地址')">删除</span><span onclick="showToast('设为默认')">设为默认</span></div> </div> <div class="address-card"> <div class="address-main"><h4>王五 <span>137****5555</span></h4><p>广州市天河区珠江新城花城大道88号</p></div> <div class="address-action"><span onclick="showToast('编辑地址')">编辑</span><span onclick="showToast('删除地址')">删除</span><span onclick="showToast('设为默认')">设为默认</span></div> </div> </div> </div> <!-- 我的优惠券页 --> <div class="page" id="myCoupons"> <div class="sub-header"><button class="back-btn" onclick="goBack()"><</button><span>我的优惠券</span><span class="add-address" onclick="showToast('领取优惠券')">领取</span></div> <div class="coupon-tabs"><span class="active">未使用</span><span>已使用</span><span>已过期</span></div> <div class="coupon-list"> <div class="coupon-item available"> <div class="coupon-left"><span class="coupon-price">¥<em>10</em></span><span class="coupon-condition">满50可用</span></div> <div class="coupon-right"><h4>新人专享券</h4><p>有效期至 2024-04-30</p><span class="coupon-status">立即使用</span></div> </div> <div class="coupon-item available"> <div class="coupon-left"><span class="coupon-price">¥<em>20</em></span><span class="coupon-condition">满100可用</span></div> <div class="coupon-right"><h4>限时折扣券</h4><p>有效期至 2024-04-25</p><span class="coupon-status">立即使用</span></div> </div> <div class="coupon-item used"><div class="coupon-left"><span class="coupon-price used">¥<em>5</em></span><span class="coupon-condition">满30可用</span></div><div class="coupon-right"><h4>会员专享券</h4><p>有效期至 2024-03-31</p><span class="coupon-status used">已使用</span></div></div> </div> </div> <!-- 我的收藏页 --> <div class="page" id="myCollection"> <div class="sub-header"><button class="back-btn" onclick="goBack()"><</button><span>我的收藏</span><span class="add-address" onclick="showToast('管理收藏')">管理</span></div> <div class="collection-content"> <div class="product-grid"> <div class="product-card" onclick="showProductDetail(1)"><div class="collection-btn active" onclick="event.stopPropagation();toggleCollection(this)">❤️</div><img src="https://images.unsplash.com/photo-1567306226416-28f0efdc88ce?w=160&h=160&fit=crop" alt="西红柿"><div class="product-info"><h4>有机西红柿 3斤</h4><p class="product-desc">新鲜采摘 自然成熟</p><div class="product-bottom"><span class="price">¥19.9</span><button class="add-cart-btn" onclick="event.stopPropagation();addToCart()">+</button></div></div></div> <div class="product-card" onclick="showProductDetail(4)"><div class="collection-btn active" onclick="event.stopPropagation();toggleCollection(this)">❤️</div><img src="https://images.unsplash.com/photo-1587049352846-4a222e784d38?w=160&h=160&fit=crop" alt="苹果"><div class="product-info"><h4>红富士苹果 5斤装</h4><p class="product-desc">产自甘肃静宁 脆甜多汁</p><div class="product-bottom"><span class="price">¥38.8</span><button class="add-cart-btn" onclick="event.stopPropagation();addToCart()">+</button></div></div></div> </div> </div> </div> <!-- 积分中心页 --> <div class="page" id="points"> <div class="sub-header"><button class="back-btn" onclick="goBack()"><</button><span>积分中心</span><span></span></div> <div class="points-overview"><h2>1,280</h2><p>可用积分</p><button class="points-rule" onclick="showToast('积分规则')">积分规则</button></div> <div class="points-mall"><h4>积分商城</h4><div class="mall-items"><div class="mall-item" onclick="showToast('查看商品')"><img src="https://images.unsplash.com/photo-1598170845058-32b9d6a5da37?w=60&h=60&fit=crop"><p>槐花蜜500g</p><span>500积分</span></div><div class="mall-item" onclick="showToast('查看商品')"><img src="https://images.unsplash.com/photo-1546549032-9571cd6b27df?w=60&h=60&fit=crop"><p>土鸡蛋10枚</p><span>200积分</span></div></div></div> <div class="points-record"><h4>积分记录</h4><div class="record-item"><span>订单抵扣</span><span class="red">-100</span></div><div class="record-item"><span>购物奖励</span><span class="green">+50</span></div><div class="record-item"><span>签到奖励</span><span class="green">+10</span></div></div> </div> <!-- 联系客服页 --> <div class="page" id="customerService"> <div class="sub-header"><button class="back-btn" onclick="goBack()"><</button><span>联系客服</span><span></span></div> <div class="service-content"> <div class="service-hotline"><h3>📞 客服热线</h3><p class="phone">400-888-8888</p><p>工作时间: 9:00-21:00</p></div> <div class="service-items"><div class="service-item" onclick="showToast('在线客服')"><span class="service-icon">💬</span><span>在线客服</span></div><div class="service-item" onclick="showToast('常见问题')"><span class="service-icon">❓</span><span>常见问题</span></div><div class="service-item" onclick="showToast('意见反馈')"><span class="service-icon">📝</span><span>意见反馈</span></div></div> </div> </div> <!-- 设置页 --> <div class="page" id="settings"> <div class="sub-header"><button class="back-btn" onclick="goBack()"><</button><span>设置</span><span></span></div> <div class="settings-content"> <div class="settings-item" onclick="showToast('账户与安全')"><span>账户与安全</span><span class="arrow">></span></div> <div class="settings-item" onclick="showToast('消息通知')"><span>消息通知</span><span class="arrow">></span></div> <div class="settings-item" onclick="showToast('隐私设置')"><span>隐私设置</span><span class="arrow">></span></div> <div class="settings-item" onclick="showToast('清除缓存')"><span>清除缓存</span><span class="arrow">></span></div> <div class="settings-item" onclick="showToast('关于我们')"><span>关于我们</span><span class="arrow">></span></div> <div class="settings-item logout" onclick="showToast('退出登录')"><span>退出登录</span></div> </div> </div> <!-- 我的客户页 --> <div class="page" id="myCustomers"> <div class="sub-header"><button class="back-btn" onclick="goBack()"><</button><span>我的客户</span><span></span></div> <div class="customers-stats"><div class="stat-item"><span class="num">45</span><span>总客户数</span></div><div class="stat-item"><span class="num">28</span><span>本月新增</span></div></div> <div class="customer-list"> <div class="customer-item"><img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=40&h=40&fit=crop"><div class="customer-info"><h4>小红</h4><p>注册时间: 2024-03-01</p></div><div class="customer-order"><span>订单: 5</span><span>消费: ¥328</span></div></div> <div class="customer-item"><img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=40&h=40&fit=crop"><div class="customer-info"><h4>小王</h4><p>注册时间: 2024-02-15</p></div><div class="customer-order"><span>订单: 3</span><span>消费: ¥156</span></div></div> </div> </div> <!-- 客户订单页 --> <div class="page" id="customerOrders"> <div class="sub-header"><button class="back-btn" onclick="goBack()"><</button><span>客户订单</span><span></span></div> <div class="order-list"> <div class="customer-order-card"><div class="order-user"><img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=30&h=30&fit=crop"><span>小红</span><span class="commission">佣金 ¥12.80</span></div><div class="order-goods"><span>红富士苹果 x2</span><span>¥77.6</span></div><div class="order-time">2024-03-15 14:30</div></div> <div class="customer-order-card"><div class="order-user"><img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=30&h=30&fit=crop"><span>小王</span><span class="commission">佣金 ¥6.80</span></div><div class="order-goods"><span>东北大米 x1</span><span>¥68.0</span></div><div class="order-time">2024-03-14 10:20</div></div> </div> </div> <!-- 分销商品页 --> <div class="page" id="distributionProducts"> <div class="sub-header"><button class="back-btn" onclick="goBack()"><</button><span>分销商品</span><span onclick="showToast('筛选')">筛选</span></div> <div class="dist-product-list"> <div class="dist-product-item"><img src="https://images.unsplash.com/photo-1587049352846-4a222e784d38?w=80&h=80&fit=crop"><div class="dist-info"><h4>红富士苹果 5斤装</h4><p>佣金比例: 5%</p><p class="commission-amount">预估佣金: ¥1.94</p></div><button class="share-product-btn" onclick="showToast('分享商品')">分享</button></div> <div class="dist-product-item"><img src="https://images.unsplash.com/photo-1518843875459-f738682238a6?w=80&h=80&fit=crop"><div class="dist-info"><h4>东北五常大米 10斤</h4><p>佣金比例: 3%</p><p class="commission-amount">预估佣金: ¥2.04</p></div><button class="share-product-btn" onclick="showToast('分享商品')">分享</button></div> </div> </div> <!-- 分享链接页 --> <div class="page" id="shareLink"> <div class="sub-header"><button class="back-btn" onclick="goBack()"><</button><span>分享链接</span><span></span></div> <div class="share-content"> <div class="share-qr"><img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://m.example.com/invite?code=ABC123" alt="二维码"><p>扫码进入分销店铺</p></div> <div class="share-link"><p class="link-text">https://m.example.com/invite?code=ABC123</p><button onclick="showToast('复制链接')">复制链接</button></div> <div class="share-methods"><button onclick="showToast('分享到微信')">📱 微信</button><button onclick="showToast('分享到朋友圈')">� moments 朋友圈</button><button onclick="showToast('分享到微博')">🌐 微博</button></div> </div> </div> <!-- 分享海报页 --> <div class="page" id="sharePoster"> <div class="sub-header"><button class="back-btn" onclick="goBack()"><</button><span>分享海报</span><span></span></div> <div class="poster-content"> <div class="poster-preview"><img src="https://images.unsplash.com/photo-1542838132-92c53300491e?w=300&h=400&fit=crop" alt="海报预览"><button class="save-poster" onclick="showToast('保存海报')">保存到相册</button></div> <div class="poster-templates"><h4>选择海报模板</h4><div class="template-list"><img src="https://images.unsplash.com/photo-1542838132-92c53300491e?w=60&h=80&fit=crop" class="active"><img src="https://images.unsplash.com/photo-1506484381205-f7945b51d469?w=60&h=80&fit=crop"><img src="https://images.unsplash.com/photo-1464226184884-fa280b87c399?w=60&h=80&fit=crop"></div></div> </div> </div> <!-- 提现页 --> <div class="page" id="withdraw"> <div class="sub-header"><button class="back-btn" onclick="goBack()"><</button><span>提现</span><span></span></div> <div class="withdraw-content"> <div class="withdraw-balance"><p>可提现余额</p><h2>¥1,280.50</h2></div> <div class="withdraw-form"><label>提现金额</label><div class="amount-input"><span>¥</span><input type="number" value="1280" placeholder="请输入提现金额"></div><p class="withdraw-hint">最低提现金额10元</p></div> <div class="withdraw-methods"><h4>提现方式</h4><div class="method-item selected"><span class="method-icon">💳</span><span>银行卡</span><span class="check">✓</span></div></div> <button class="withdraw-submit" onclick="showToast('提现申请已提交')">确认提现</button> </div> </div> <!-- 全部评价页 --> <div class="page" id="allReviews"> <div class="sub-header"><button class="back-btn" onclick="goBack()"><</button><span>商品评价</span><span></span></div> <div class="review-list"> <div class="review-item"><div class="review-user"><img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=40&h=40&fit=crop" alt=""><span>小红</span><span class="review-stars">⭐⭐⭐⭐⭐</span></div><p class="review-content">苹果非常新鲜，脆甜多汁，家人都很喜欢吃，已经回购多次了！</p><p class="review-meta">2024-03-15</p></div> <div class="review-item"><div class="review-user"><img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=40&h=40&fit=crop" alt=""><span>小王</span><span class="review-stars">⭐⭐⭐⭐</span></div><p class="review-content">味道不错，包装也很好，就是稍微小了一点。</p><p class="review-meta">2024-03-14</p></div> </div> </div> <!-- Toast --> <div class="toast" id="toast"></div> <!-- Modal --> <div class="modal" id="modal"><div class="modal-content"><div class="modal-header"><span class="modal-title"></span><span class="modal-close" onclick="closeModal()">×</span></div><div class="modal-body"></div><div class="modal-footer"></div></div></div> </div> <script src="script.js"></script> </body> </html>
保存更改
取消
访问码:
445itb9w
复制链接
重新生成