234 lines
12 KiB
HTML
234 lines
12 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}浏览历史 - 太白购物商城{% endblock %}
|
|
|
|
{% block head %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/history.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">
|
|
<i class="bi bi-heart"></i> 我的收藏
|
|
</a>
|
|
<a href="{{ url_for('history.index') }}" class="list-group-item list-group-item-action active">
|
|
<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-clock-history text-primary"></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>
|
|
<button class="btn btn-sm btn-outline-warning ms-1" onclick="clearHistory()">
|
|
<i class="bi bi-arrow-clockwise"></i> 清空历史
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
{% if history.items %}
|
|
<div class="row">
|
|
{% for item in history.items %}
|
|
<div class="col-lg-6 col-xl-4 mb-4">
|
|
<div class="card history-item h-100" data-product-id="{{ item.product_id }}">
|
|
<div class="card-body">
|
|
<div class="d-flex">
|
|
<div class="form-check me-3">
|
|
<input class="form-check-input history-checkbox" type="checkbox"
|
|
value="{{ item.product_id }}" id="history-{{ item.product_id }}">
|
|
</div>
|
|
|
|
<div class="flex-shrink-0 me-3">
|
|
<a href="{{ url_for('main.product_detail', product_id=item.product_id) }}">
|
|
{% if item.product.main_image %}
|
|
<img src="{{ item.product.main_image }}"
|
|
alt="{{ item.product.name }}"
|
|
class="history-image">
|
|
{% else %}
|
|
<div class="history-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=item.product_id) }}"
|
|
class="text-decoration-none">
|
|
{{ item.product.name }}
|
|
</a>
|
|
</h6>
|
|
|
|
<div class="mb-2">
|
|
<span class="text-danger fw-bold">
|
|
¥{{ "%.2f"|format(item.product.price) }}
|
|
</span>
|
|
<small class="text-muted ms-2">
|
|
销量 {{ item.product.sales_count }}
|
|
</small>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<span class="badge bg-light text-dark border">
|
|
<i class="bi bi-tag"></i> {{ item.product.category.name if item.product.category else "未分类" }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<small class="text-muted">
|
|
{{ item.viewed_at.strftime('%Y-%m-%d %H:%M') }}
|
|
</small>
|
|
{% if item.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">
|
|
{% if item.product.status == 1 %}
|
|
<button class="btn btn-outline-primary"
|
|
onclick="addToCart({{ item.product_id }})"
|
|
data-bs-toggle="tooltip" data-bs-placement="top" title="加入购物车">
|
|
<i class="bi bi-cart-plus"></i>
|
|
</button>
|
|
<button class="btn btn-outline-danger"
|
|
onclick="addToFavorites({{ item.product_id }})"
|
|
data-bs-toggle="tooltip" data-bs-placement="top" title="收藏商品">
|
|
<i class="bi bi-heart"></i>
|
|
</button>
|
|
{% endif %}
|
|
<button class="btn btn-outline-secondary"
|
|
onclick="removeHistory({{ item.product_id }})"
|
|
data-bs-toggle="tooltip" data-bs-placement="top" title="删除记录">
|
|
<i class="bi bi-x-circle"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- 分页 -->
|
|
{% if history.pages > 1 %}
|
|
<nav aria-label="浏览历史分页">
|
|
<ul class="pagination justify-content-center">
|
|
{% if history.has_prev %}
|
|
<li class="page-item">
|
|
<a class="page-link" href="{{ url_for('history.index', page=history.prev_num) }}">
|
|
<i class="bi bi-chevron-left"></i>
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
|
|
{% for page_num in history.iter_pages() %}
|
|
{% if page_num %}
|
|
{% if page_num != history.page %}
|
|
<li class="page-item">
|
|
<a class="page-link" href="{{ url_for('history.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 history.has_next %}
|
|
<li class="page-item">
|
|
<a class="page-link" href="{{ url_for('history.index', page=history.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-clock-history 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/history.js') }}"></script>
|
|
{% endblock %}
|