220 lines
11 KiB
HTML
220 lines
11 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}我的收藏 - 太白购物商城{% endblock %}
|
|
|
|
{% block head %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/favorites.css') }}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="row">
|
|
<!-- 侧边栏 -->
|
|
<div class="col-md-3">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="bi bi-person-circle"></i> 个人中心</h5>
|
|
</div>
|
|
<div class="list-group list-group-flush">
|
|
<a href="{{ url_for('user.profile') }}" class="list-group-item list-group-item-action">
|
|
<i class="bi bi-person"></i> 基本信息
|
|
</a>
|
|
<a href="{{ url_for('user.orders') }}" class="list-group-item list-group-item-action">
|
|
<i class="bi bi-bag"></i> 我的订单
|
|
</a>
|
|
<a href="{{ url_for('address.index') }}" class="list-group-item list-group-item-action">
|
|
<i class="bi bi-geo-alt"></i> 收货地址
|
|
</a>
|
|
<a href="{{ url_for('review.my_reviews') }}" class="list-group-item list-group-item-action">
|
|
<i class="bi bi-star"></i> 我的评价
|
|
</a>
|
|
<a href="{{ url_for('favorite.index') }}" class="list-group-item list-group-item-action active">
|
|
<i class="bi bi-heart"></i> 我的收藏
|
|
</a>
|
|
<a href="{{ url_for('history.index') }}" class="list-group-item list-group-item-action">
|
|
<i class="bi bi-clock-history"></i> 浏览历史
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主要内容 -->
|
|
<div class="col-md-9">
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5><i class="bi bi-heart text-danger"></i> 我的收藏</h5>
|
|
<div>
|
|
<span class="badge bg-secondary">共 {{ total_count }} 件商品</span>
|
|
{% if total_count > 0 %}
|
|
<button class="btn btn-sm btn-outline-secondary ms-2" onclick="toggleSelectAll()">
|
|
<i class="bi bi-check-square"></i> 全选
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-danger ms-1" onclick="batchRemove()">
|
|
<i class="bi bi-trash"></i> 批量删除
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
{% if favorites.items %}
|
|
<div class="row">
|
|
{% for favorite in favorites.items %}
|
|
<div class="col-lg-6 col-xl-4 mb-4">
|
|
<div class="card favorite-item h-100" data-product-id="{{ favorite.product_id }}">
|
|
<div class="card-body">
|
|
<div class="d-flex">
|
|
<div class="form-check me-3">
|
|
<input class="form-check-input favorite-checkbox" type="checkbox"
|
|
value="{{ favorite.product_id }}" id="favorite-{{ favorite.product_id }}">
|
|
</div>
|
|
|
|
<div class="flex-shrink-0 me-3">
|
|
<a href="{{ url_for('main.product_detail', product_id=favorite.product_id) }}">
|
|
{% if favorite.product.main_image %}
|
|
<img src="{{ favorite.product.main_image }}"
|
|
alt="{{ favorite.product.name }}"
|
|
class="favorite-image">
|
|
{% else %}
|
|
<div class="favorite-image-placeholder">
|
|
<i class="bi bi-image"></i>
|
|
</div>
|
|
{% endif %}
|
|
</a>
|
|
</div>
|
|
|
|
<div class="flex-grow-1">
|
|
<h6 class="card-title">
|
|
<a href="{{ url_for('main.product_detail', product_id=favorite.product_id) }}"
|
|
class="text-decoration-none">
|
|
{{ favorite.product.name }}
|
|
</a>
|
|
</h6>
|
|
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<span class="text-danger fw-bold">
|
|
¥{{ "%.2f"|format(favorite.product.price) }}
|
|
</span>
|
|
<small class="text-muted">
|
|
销量 {{ favorite.product.sales_count }}
|
|
</small>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<small class="text-muted">
|
|
{{ favorite.created_at.strftime('%Y-%m-%d') }}
|
|
</small>
|
|
{% if favorite.product.status == 1 %}
|
|
<span class="badge bg-success">有货</span>
|
|
{% else %}
|
|
<span class="badge bg-secondary">下架</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="mt-3">
|
|
<div class="btn-group btn-group-sm w-100 icon-buttons">
|
|
{% if favorite.product.status == 1 %}
|
|
<button class="btn btn-outline-primary"
|
|
onclick="addToCart({{ favorite.product_id }})"
|
|
data-bs-toggle="tooltip" data-bs-placement="top" title="加入购物车">
|
|
<i class="bi bi-cart-plus"></i>
|
|
</button>
|
|
{% endif %}
|
|
<button class="btn btn-outline-danger"
|
|
onclick="removeFavorite({{ favorite.product_id }})"
|
|
data-bs-toggle="tooltip" data-bs-placement="top" title="取消收藏">
|
|
<i class="bi bi-heart-fill"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- 分页 -->
|
|
{% if favorites.pages > 1 %}
|
|
<nav aria-label="收藏分页">
|
|
<ul class="pagination justify-content-center">
|
|
{% if favorites.has_prev %}
|
|
<li class="page-item">
|
|
<a class="page-link" href="{{ url_for('favorite.index', page=favorites.prev_num) }}">
|
|
<i class="bi bi-chevron-left"></i>
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
|
|
{% for page_num in favorites.iter_pages() %}
|
|
{% if page_num %}
|
|
{% if page_num != favorites.page %}
|
|
<li class="page-item">
|
|
<a class="page-link" href="{{ url_for('favorite.index', page=page_num) }}">
|
|
{{ page_num }}
|
|
</a>
|
|
</li>
|
|
{% else %}
|
|
<li class="page-item active">
|
|
<span class="page-link">{{ page_num }}</span>
|
|
</li>
|
|
{% endif %}
|
|
{% else %}
|
|
<li class="page-item disabled">
|
|
<span class="page-link">...</span>
|
|
</li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% if favorites.has_next %}
|
|
<li class="page-item">
|
|
<a class="page-link" href="{{ url_for('favorite.index', page=favorites.next_num) }}">
|
|
<i class="bi bi-chevron-right"></i>
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
</nav>
|
|
{% endif %}
|
|
|
|
{% else %}
|
|
<!-- 空状态 -->
|
|
<div class="empty-state">
|
|
<div class="text-center py-5">
|
|
<i class="bi bi-heart display-1 text-muted"></i>
|
|
<h4 class="mt-3 text-muted">还没有收藏任何商品</h4>
|
|
<p class="text-muted">去逛逛，收藏心仪的商品吧~</p>
|
|
<a href="{{ url_for('main.index') }}" class="btn btn-primary">
|
|
<i class="bi bi-house"></i> 去首页逛逛
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 确认删除模态框 -->
|
|
<div class="modal fade" id="confirmModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">确认删除</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p id="confirmMessage">确定要取消收藏这些商品吗？</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
|
<button type="button" class="btn btn-danger" id="confirmBtn">确认删除</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="{{ url_for('static', filename='js/favorites.js') }}"></script>
|
|
{% endblock %}
|