| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122 |
- <!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="css/style.css">
- </head>
- <body>
- <!-- 顶部商家信息 -->
- <header class="header">
- <div class="shop-info">
- <h1 class="shop-name">美味餐厅</h1>
- <div class="shop-tags">
- <span class="tag">月售1000+</span>
- <span class="tag">配送费¥5</span>
- </div>
- </div>
- </header>
- <!-- 主体内容区 -->
- <div class="main-container">
- <!-- 左侧分类导航 -->
- <aside class="category-sidebar">
- <div class="category-list" id="categoryList">
- <!-- 动态加载分类 -->
- </div>
- </aside>
- <!-- 右侧菜品列表 -->
- <main class="dish-content">
- <div class="dish-container" id="dishContainer">
- <!-- 动态加载菜品 -->
- </div>
- </main>
- </div>
- <!-- 底部购物车 -->
- <footer class="cart-bar">
- <div class="cart-icon-wrapper" id="cartIcon">
- <div class="cart-icon">
- 🛒
- <span class="cart-count" id="cartCount">0</span>
- </div>
- <div class="cart-tip" id="cartTip">点击查看已选商品</div>
- </div>
- <div class="cart-info">
- <div class="cart-price">
- <span class="price-label">¥</span>
- <span class="price-value" id="totalPrice">0</span>
- </div>
- <div class="delivery-fee">配送费¥5</div>
- </div>
- <button class="checkout-btn" id="checkoutBtn" disabled>
- 还差¥20起送
- </button>
- </footer>
- <!-- 购物车详情弹窗 -->
- <div class="cart-detail-mask" id="cartMask"></div>
- <div class="cart-detail" id="cartDetail">
- <div class="cart-detail-header">
- <span>已选商品</span>
- <span class="clear-cart" id="clearCart">清空</span>
- </div>
- <div class="cart-detail-list" id="cartDetailList">
- <!-- 动态加载购物车商品 -->
- </div>
- </div>
- <!-- 菜品详情弹窗 -->
- <div class="dish-detail-mask" id="dishDetailMask"></div>
- <div class="dish-detail" id="dishDetail">
- <div class="dish-detail-content">
- <img class="dish-detail-img" id="dishDetailImg" src="" alt="">
- <div class="dish-detail-info">
- <h3 class="dish-detail-name" id="dishDetailName"></h3>
- <p class="dish-detail-desc" id="dishDetailDesc"></p>
- <div class="dish-detail-tags" id="dishDetailTags"></div>
- <div class="dish-detail-footer">
- <span class="dish-detail-price">¥<span id="dishDetailPrice"></span></span>
- <button class="add-to-cart-btn" id="addToCartBtn">加入购物车</button>
- </div>
- </div>
- </div>
- <div class="close-detail" id="closeDetail">×</div>
- </div>
- <!-- 支付二维码弹窗 -->
- <div class="payment-mask" id="paymentMask"></div>
- <div class="payment-modal" id="paymentModal">
- <div class="payment-header">
- <h3>扫码支付</h3>
- <div class="close-payment" id="closePayment">×</div>
- </div>
- <div class="payment-content">
- <div class="payment-info">
- <div class="info-row">
- <span class="label">订单号：</span>
- <span class="value" id="payOrderNumber">-</span>
- </div>
- <div class="info-row">
- <span class="label">支付金额：</span>
- <span class="value amount" id="payAmount">¥0.00</span>
- </div>
- </div>
- <div class="qrcode-container">
- <img id="qrcodeImage" src="" alt="支付二维码" class="qrcode-image">
- <p class="qrcode-tip">请使用微信或支付宝扫码支付</p>
- </div>
- <div class="payment-status" id="paymentStatus">
- <div class="status-checking">
- <div class="loading-spinner"></div>
- <p>等待支付中...</p>
- </div>
- </div>
- </div>
- </div>
- <script src="js/app.js"></script>
- </body>
- </html>
|
