201 lines
10 KiB
HTML
201 lines
10 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}购物车 - 太白购物商城{% endblock %}
|
|
|
|
{% block head %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/cart.css') }}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container">
|
|
<!-- 面包屑导航 -->
|
|
<nav aria-label="breadcrumb" class="mb-3">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{{ url_for('main.index') }}">首页</a></li>
|
|
<li class="breadcrumb-item active">购物车</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<h3><i class="bi bi-cart"></i> 我的购物车</h3>
|
|
<hr>
|
|
</div>
|
|
</div>
|
|
|
|
{% if cart_items %}
|
|
<div class="row">
|
|
<!-- 购物车商品列表 -->
|
|
<div class="col-md-8">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="row align-items-center">
|
|
<div class="col-1">
|
|
<input type="checkbox" class="form-check-input" id="selectAll">
|
|
</div>
|
|
<div class="col-5">商品信息</div>
|
|
<div class="col-2 text-center">单价</div>
|
|
<div class="col-2 text-center">数量</div>
|
|
<div class="col-2 text-center">操作</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
{% for item in cart_items %}
|
|
<div class="cart-item border-bottom p-3" data-cart-id="{{ item.id }}">
|
|
<div class="row align-items-center">
|
|
<!-- 选择框 -->
|
|
<div class="col-1">
|
|
<input type="checkbox" class="form-check-input item-checkbox"
|
|
value="{{ item.id }}" {% if item.is_available() %}{% else %}disabled{% endif %}>
|
|
</div>
|
|
|
|
<!-- 商品信息 -->
|
|
<div class="col-5">
|
|
<div class="d-flex">
|
|
<a href="{{ url_for('main.product_detail', product_id=item.product_id) }}"
|
|
class="text-decoration-none">
|
|
{% if item.product.main_image %}
|
|
<img src="{{ item.product.main_image }}" alt="{{ item.product.name }}"
|
|
class="me-3" style="width: 80px; height: 80px; object-fit: cover;">
|
|
{% else %}
|
|
<div class="bg-light me-3 d-flex align-items-center justify-content-center"
|
|
style="width: 80px; height: 80px;">
|
|
<i class="bi bi-image text-muted"></i>
|
|
</div>
|
|
{% endif %}
|
|
</a>
|
|
<div class="flex-grow-1">
|
|
<h6 class="mb-1">
|
|
<a href="{{ url_for('main.product_detail', product_id=item.product_id) }}"
|
|
class="text-decoration-none text-dark">
|
|
{{ item.product.name }}
|
|
</a>
|
|
</h6>
|
|
{% if item.product.brand %}
|
|
<small class="text-muted">品牌：{{ item.product.brand }}</small><br>
|
|
{% endif %}
|
|
{% if item.spec_combination %}
|
|
<small class="text-muted">规格：{{ item.spec_combination }}</small><br>
|
|
{% endif %}
|
|
<small class="text-muted">库存：{{ item.get_stock() }}件</small>
|
|
|
|
{% if not item.is_available() %}
|
|
<div class="mt-1">
|
|
{% if item.product.status != 1 %}
|
|
<span class="badge bg-danger">商品已下架</span>
|
|
{% elif item.get_stock() < item.quantity %}
|
|
<span class="badge bg-warning">库存不足</span>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 单价 -->
|
|
<div class="col-2 text-center">
|
|
<span class="fw-bold text-danger">¥{{ "%.2f"|format(item.get_price()) }}</span>
|
|
</div>
|
|
|
|
<!-- 数量 -->
|
|
<div class="col-2 text-center">
|
|
<div class="quantity-control d-flex align-items-center justify-content-center">
|
|
<button class="btn btn-outline-secondary btn-sm quantity-btn" type="button"
|
|
onclick="changeQuantity({{ item.id }}, -1)"
|
|
{% if not item.is_available() or item.quantity <= 1 %}disabled{% endif %}>
|
|
<i class="bi bi-dash"></i>
|
|
</button>
|
|
<input type="text" class="form-control form-control-sm text-center quantity-input mx-1"
|
|
value="{{ item.quantity }}"
|
|
data-cart-id="{{ item.id }}"
|
|
data-max-stock="{{ item.get_stock() }}"
|
|
oninput="validateQuantityInput(this)"
|
|
onblur="updateQuantityFromInput({{ item.id }}, this)"
|
|
onkeydown="handleQuantityKeyPress(event, {{ item.id }}, this)"
|
|
{% if not item.is_available() %}disabled{% endif %}>
|
|
<button class="btn btn-outline-secondary btn-sm quantity-btn" type="button"
|
|
onclick="changeQuantity({{ item.id }}, 1)"
|
|
{% if not item.is_available() or item.quantity >= item.get_stock() %}disabled{% endif %}>
|
|
<i class="bi bi-plus"></i>
|
|
</button>
|
|
</div>
|
|
<div class="mt-1">
|
|
<small class="text-muted">小计：¥<span class="item-total">{{ "%.2f"|format(item.get_total_price()) }}</span></small>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 操作 -->
|
|
<div class="col-2 text-center">
|
|
<button type="button" class="btn btn-outline-danger btn-sm"
|
|
onclick="removeItem({{ item.id }})">
|
|
<i class="bi bi-trash"></i> 删除
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 购物车操作栏 -->
|
|
<div class="col-md-4">
|
|
<div class="card position-sticky" style="top: 20px;">
|
|
<div class="card-header">
|
|
<h6 class="mb-0"><i class="bi bi-calculator"></i> 结算信息</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<span>已选商品：</span>
|
|
<span id="selectedCount">0</span>件
|
|
</div>
|
|
<div class="d-flex justify-content-between mb-3">
|
|
<span>商品总价：</span>
|
|
<span class="text-danger fw-bold h5">¥<span id="selectedTotal">0.00</span></span>
|
|
</div>
|
|
<hr>
|
|
<div class="d-flex justify-content-between mb-3">
|
|
<span class="fw-bold">应付总额：</span>
|
|
<span class="text-danger fw-bold h4">¥<span id="finalTotal">0.00</span></span>
|
|
</div>
|
|
|
|
<div class="d-grid gap-2">
|
|
<button type="button" class="btn btn-danger btn-lg" id="checkoutBtn"
|
|
onclick="checkout()" disabled>
|
|
<i class="bi bi-credit-card"></i> 去结算
|
|
</button>
|
|
<button type="button" class="btn btn-outline-secondary" onclick="clearCart()">
|
|
<i class="bi bi-trash"></i> 清空购物车
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mt-3">
|
|
<small class="text-muted">
|
|
<i class="bi bi-shield-check"></i> 7天无理由退换<br>
|
|
<i class="bi bi-truck"></i> 全国包邮<br>
|
|
<i class="bi bi-award"></i> 正品保证
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% else %}
|
|
<!-- 空购物车 -->
|
|
<div class="text-center py-5">
|
|
<i class="bi bi-cart-x text-muted" style="font-size: 5rem;"></i>
|
|
<h4 class="text-muted mt-3">购物车是空的</h4>
|
|
<p class="text-muted">快去选购您喜欢的商品吧！</p>
|
|
<a href="{{ url_for('main.product_list') }}" class="btn btn-primary btn-lg">
|
|
<i class="bi bi-shop"></i> 去购物
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="{{ url_for('static', filename='js/cart.js') }}"></script>
|
|
{% endblock %}
|