taibai_shopping/app/templates/index.html

{% extends "base.html" %}

{% block title %}首页 - 太白购物商城{% endblock %}

{% block head %}
<link href="{{ url_for('static', filename='css/index.css') }}" rel="stylesheet">
{% endblock %}

{% block content %}
<!-- 欢迎横幅 -->
<div class="jumbotron text-white rounded p-5 mb-4">
    <div class="container-fluid py-5">
        <h1 class="display-5 fw-bold">欢迎来到太白购物商城</h1>
        {% if user %}
            <p class="col-md-8 fs-4">你好，{{ user.nickname or user.username }}！开始您的购物之旅吧！</p>
        {% else %}
            <p class="col-md-8 fs-4">发现优质商品，享受便捷购物体验</p>
            <a class="btn btn-light btn-lg" href="{{ url_for('auth.register') }}" role="button">立即注册</a>
        {% endif %}
    </div>
</div>

<!-- 商品分类导航 -->
{% if top_categories %}
<div class="row mb-4">
    <div class="col-12">
        <h4><i class="bi bi-grid"></i> 商品分类</h4>
        <hr>
    </div>
    {% for category in top_categories %}
    <div class="col-md-2 col-6 mb-3">
        <a href="{{ url_for('main.product_list', category_id=category.id) }}" class="text-decoration-none">
            <div class="card text-center h-100 category-card">
                <div class="card-body">
                    {% if category.icon_url %}
                        <img src="{{ category.icon_url }}" alt="{{ category.name }}" class="mb-2" style="width: 48px; height: 48px; object-fit: cover;">
                    {% else %}
                        <i class="bi bi-tag display-4 text-primary mb-2"></i>
                    {% endif %}
                    <h6 class="card-title">{{ category.name }}</h6>
                </div>
            </div>
        </a>
    </div>
    {% endfor %}
</div>
{% endif %}

<!-- 热门商品 -->
{% if hot_products %}
<div class="row mb-4">
    <div class="col-12 d-flex justify-content-between align-items-center">
        <h4><i class="bi bi-fire"></i> 热门商品</h4>
        <a href="{{ url_for('main.product_list', sort='sales') }}" class="btn btn-outline-primary btn-sm">
            查看更多 <i class="bi bi-arrow-right"></i>
        </a>
    </div>
    <hr>
    {% for product in hot_products %}
    <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
        <div class="card h-100 product-card">
            <a href="{{ url_for('main.product_detail', product_id=product.id) }}" class="text-decoration-none">
                {% if product.main_image %}
                    <img src="{{ product.main_image }}" class="card-img-top product-image" alt="{{ product.name }}">
                {% else %}
                    <div class="card-img-top product-image-placeholder">
                        <i class="bi bi-image text-muted" style="font-size: 3rem;"></i>
                    </div>
                {% endif %}
            </a>
            <div class="card-body">
                <h6 class="card-title">
                    <a href="{{ url_for('main.product_detail', product_id=product.id) }}" class="text-decoration-none text-dark">
                        {{ product.name[:50] }}{% if product.name|length > 50 %}...{% endif %}
                    </a>
                </h6>
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <span class="price-current">¥{{ "%.2f"|format(product.price) }}</span>
                        {% if product.original_price and product.original_price > product.price %}
                            <small class="price-original">¥{{ "%.2f"|format(product.original_price) }}</small>
                        {% endif %}
                    </div>
                    <small class="text-muted">销量{{ product.sales_count }}</small>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endif %}

<!-- 最新商品 -->
{% if new_products %}
<div class="row mb-4">
    <div class="col-12 d-flex justify-content-between align-items-center">
        <h4><i class="bi bi-stars"></i> 最新商品</h4>
        <a href="{{ url_for('main.product_list', sort='newest') }}" class="btn btn-outline-primary btn-sm">
            查看更多 <i class="bi bi-arrow-right"></i>
        </a>
    </div>
    <hr>
    {% for product in new_products %}
    <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
        <div class="card h-100 product-card">
            <a href="{{ url_for('main.product_detail', product_id=product.id) }}" class="text-decoration-none">
                {% if product.main_image %}
                    <img src="{{ product.main_image }}" class="card-img-top product-image" alt="{{ product.name }}">
                {% else %}
                    <div class="card-img-top product-image-placeholder">
                        <i class="bi bi-image text-muted" style="font-size: 3rem;"></i>
                    </div>
                {% endif %}
            </a>
            <div class="card-body">
                <h6 class="card-title">
                    <a href="{{ url_for('main.product_detail', product_id=product.id) }}" class="text-decoration-none text-dark">
                        {{ product.name[:50] }}{% if product.name|length > 50 %}...{% endif %}
                    </a>
                </h6>
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <span class="price-current">¥{{ "%.2f"|format(product.price) }}</span>
                        {% if product.original_price and product.original_price > product.price %}
                            <small class="price-original">¥{{ "%.2f"|format(product.original_price) }}</small>
                        {% endif %}
                    </div>
                    <small class="text-muted">销量{{ product.sales_count }}</small>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endif %}

{% if user %}
<!-- 用户专区 -->
<div class="row mt-5">
    <div class="col-12">
        <h4><i class="bi bi-person-circle"></i> 我的专区</h4>
        <hr>
    </div>

    <div class="col-md-3 mb-3">
        <div class="card text-center user-zone-card">
            <div class="card-body">
                <i class="bi bi-person display-4 text-info mb-2"></i>
                <h6 class="card-title">个人中心</h6>
                <a href="{{ url_for('user.profile') }}" class="btn btn-sm btn-outline-info">进入</a>
            </div>
        </div>
    </div>

    <div class="col-md-3 mb-3">
        <div class="card text-center user-zone-card">
            <div class="card-body">
                <i class="bi bi-bag display-4 text-primary mb-2"></i>
                <h6 class="card-title">我的订单</h6>
                <a href="{{ url_for('user.orders') }}" class="btn btn-sm btn-outline-primary">查看</a>
            </div>
        </div>
    </div>

    <div class="col-md-3 mb-3">
        <div class="card text-center user-zone-card">
            <div class="card-body">
                <i class="bi bi-cart display-4 text-success mb-2"></i>
                <h6 class="card-title">购物车</h6>
                <a href="{{ url_for('cart.index') }}" class="btn btn-sm btn-outline-success">查看</a>
            </div>
        </div>
    </div>

    <div class="col-md-3 mb-3">
        <div class="card text-center user-zone-card">
            <div class="card-body">
                <i class="bi bi-heart display-4 text-danger mb-2"></i>
                <h6 class="card-title">我的收藏</h6>
                <a href="#" class="btn btn-sm btn-outline-danger">查看</a>
            </div>
        </div>
    </div>
</div>
{% endif %}

<!-- 功能特色 -->
<div class="row mt-5">
    <div class="col-12">
        <h4><i class="bi bi-star"></i> 服务特色</h4>
        <hr>
    </div>

    <div class="col-md-4 mb-4">
        <div class="card h-100 feature-card">
            <div class="card-body text-center">
                <i class="bi bi-tags display-4 text-primary mb-3"></i>
                <h5 class="card-title">精选商品</h5>
                <p class="card-text">汇聚全球优质商品，品质保证，价格实惠</p>
                <a href="{{ url_for('main.product_list') }}" class="btn btn-outline-primary">浏览商品</a>
            </div>
        </div>
    </div>

    <div class="col-md-4 mb-4">
        <div class="card h-100 feature-card">
            <div class="card-body text-center">
                <i class="bi bi-truck display-4 text-success mb-3"></i>
                <h5 class="card-title">快速配送</h5>
                <p class="card-text">全国包邮，快速配送，让您尽快收到心仪商品</p>
                <a href="#" class="btn btn-outline-success">了解更多</a>
            </div>
        </div>
    </div>

    <div class="col-md-4 mb-4">
        <div class="card h-100 feature-card">
            <div class="card-body text-center">
                <i class="bi bi-shield-check display-4 text-warning mb-3"></i>
                <h5 class="card-title">安全保障</h5>
                <p class="card-text">正品保证，售后无忧，让您购物更放心</p>
                <a href="#" class="btn btn-outline-warning">服务保障</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}