sqxp/docs/原型图/小程序/客户我的订单.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>叁强鲜配 - 客户我的订单</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@3/lib/index.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; background: #f5f5f5; color: #333; }
        .phone-container { max-width: 414px; margin: 20px auto; background: #fff; border-radius: 40px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.15); min-height: 850px; }
        .page-header { padding: 24px 20px; color: #fff; background: linear-gradient(135deg, #07c160 0%, #1989fa 100%); }
        .page-header h2 { font-size: 24px; font-weight: 600; margin-bottom: 8px; }
        .back-btn { color: #fff; background: none; border: none; font-size: 24px; margin-bottom: 12px; }
        .content { padding: 16px; }
        .tab-bar { display: flex; background: #fff; padding: 12px; gap: 6px; margin-bottom: 12px; border-radius: 8px; }
        .tab { flex: 1; text-align: center; padding: 10px; font-size: 14px; color: #666; background: #f5f5f5; border-radius: 20px; }
        .tab.active { background: #07c160; color: #fff; }
        .order-card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; }
        .order-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #f5f5f5; }
        .order-no { font-size: 14px; color: #666; }
        .status-tag { padding: 4px 10px; border-radius: 4px; font-size: 12px; }
        .status-tag.warning { background: #fff7e6; color: #ff976a; }
        .status-tag.success { background: #f6ffed; color: #07c160; }
        .status-tag.primary { background: #e6f7ff; color: #1989fa; }
        .status-tag.info { background: #f5f5f5; color: #999; }
        .order-items { margin-bottom: 12px; }
        .item-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; color: #333; }
        .item-qty { color: #999; font-size: 12px; }
        .order-footer { display: flex; justify-content: space-between; align-items: center; }
        .order-total { font-size: 16px; color: #ee0a24; font-weight: 600; }
        .order-total span { font-size: 12px; color: #999; font-weight: normal; }
        .order-actions { display: flex; gap: 8px; }
        .action-btn { padding: 6px 16px; border-radius: 16px; font-size: 13px; }
        .action-btn.default { background: #fff; color: #666; border: 1px solid #ddd; }
        .action-btn.primary { background: #07c160; color: #fff; border: none; }
    </style>
</head>
<body>
    <div class="phone-container">
        <div class="page-header">
            <button class="back-btn" onclick="history.back()">&#8249;</button>
            <h2>我的订单</h2>
        </div>
        <div class="content">
            <div class="tab-bar">
                <div class="tab active">全部</div>
                <div class="tab">待支付</div>
                <div class="tab">进行中</div>
                <div class="tab">已完成</div>
            </div>
            <div class="order-card">
                <div class="order-header">
                    <span class="order-no">订单号：ORD202603190001</span>
                    <span class="status-tag primary">待支付</span>
                </div>
                <div class="order-items">
                    <div class="item-row"><span>新鲜猪肉</span><span class="item-qty">x10斤</span></div>
                    <div class="item-row"><span>新鲜蔬菜</span><span class="item-qty">x5斤</span></div>
                </div>
                <div class="order-footer">
                    <div class="order-total">&#165;380.00 <span>(含配送费)</span></div>
                    <div class="order-actions">
                        <button class="action-btn default">取消</button>
                        <button class="action-btn primary">去支付</button>
                    </div>
                </div>
            </div>
            <div class="order-card">
                <div class="order-header">
                    <span class="order-no">订单号：ORD202603180023</span>
                    <span class="status-tag warning">配送中</span>
                </div>
                <div class="order-items">
                    <div class="item-row"><span>新鲜水果</span><span class="item-qty">x8斤</span></div>
                    <div class="item-row"><span>牛奶</span><span class="item-qty">x2箱</span></div>
                </div>
                <div class="order-footer">
                    <div class="order-total">&#165;256.00 <span>(含配送费)</span></div>
                    <div class="order-actions">
                        <button class="action-btn default">查看详情</button>
                    </div>
                </div>
            </div>
            <div class="order-card">
                <div class="order-header">
                    <span class="order-no">订单号：ORD202603150015</span>
                    <span class="status-tag success">已完成</span>
                </div>
                <div class="order-items">
                    <div class="item-row"><span>大米</span><span class="item-qty">x2袋</span></div>
                    <div class="item-row"><span>食用油</span><span class="item-qty">x3桶</span></div>
                </div>
                <div class="order-footer">
                    <div class="order-total">&#165;420.00 <span>(含配送费)</span></div>
                    <div class="order-actions">
                        <button class="action-btn default">再来一单</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>