Book_system/app/templates/book/detail.html

{% extends 'base.html' %}

{% block title %}{{ book.title }} - 图书详情{% endblock %}

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

{% block content %}
<div class="book-detail-container">
    <div class="page-header">
        <h1>图书详情</h1>
        <div class="actions">
            <a href="{{ url_for('book.book_list') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> 返回列表
            </a>
            {% if current_user.role_id == 1 %}
            <a href="{{ url_for('book.edit_book', book_id=book.id) }}" class="btn btn-primary">
                <i class="fas fa-edit"></i> 编辑图书
            </a>
            {% endif %}
            {% if book.stock > 0 %}
            <a href="#" class="btn btn-success" id="borrowBtn">
                <i class="fas fa-hand-holding"></i> 借阅此书
            </a>
            {% endif %}
        </div>
    </div>

    <div class="book-content">
        <div class="book-header">
            <div class="book-cover-large">
                {% if book.cover_url %}
                <img src="{{ book.cover_url }}" alt="{{ book.title }}">
                {% else %}
                <div class="no-cover-large">
                    <i class="fas fa-book"></i>
                    <span>无封面</span>
                </div>
                {% endif %}
            </div>

            <div class="book-main-info">
                <h2 class="book-title">{{ book.title }}</h2>
                <p class="book-author"><i class="fas fa-user-edit"></i> 作者: {{ book.author }}</p>

                <div class="book-meta-info">
                    <div class="meta-item">
                        <i class="fas fa-building"></i>
                        <span>出版社: </span>
                        <span class="meta-value">{{ book.publisher or '未知' }}</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-calendar-alt"></i>
                        <span>出版年份: </span>
                        <span class="meta-value">{{ book.publish_year or '未知' }}</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-barcode"></i>
                        <span>ISBN: </span>
                        <span class="meta-value">{{ book.isbn or '未知' }}</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-layer-group"></i>
                        <span>分类: </span>
                        <span class="meta-value">{{ book.category.name if book.category else '未分类' }}</span>
                    </div>
                    {% if book.tags %}
                    <div class="meta-item">
                        <i class="fas fa-tags"></i>
                        <span>标签: </span>
                        <span class="meta-value">
                            {% for tag in book.tags.split(',') %}
                            <span class="tag">{{ tag.strip() }}</span>
                            {% endfor %}
                        </span>
                    </div>
                    {% endif %}
                    <div class="meta-item">
                        <i class="fas fa-yuan-sign"></i>
                        <span>价格: </span>
                        <span class="meta-value">{{ book.price or '未知' }}</span>
                    </div>
                </div>

                <div class="book-status-info">
                    <div class="status-badge {{ 'available' if book.stock > 0 else 'unavailable' }}">
                        {{ '可借阅' if book.stock > 0 else '无库存' }}
                    </div>
                    <div class="stock-info">
                        <i class="fas fa-cubes"></i> 库存: {{ book.stock }}
                    </div>
                </div>
            </div>
        </div>

        <div class="book-details-section">
            <h3>图书简介</h3>
            <div class="book-description">
                {% if book.description %}
                <p>{{ book.description|nl2br }}</p>
                {% else %}
                <p class="no-description">暂无图书简介</p>
                {% endif %}
            </div>
        </div>

        <!-- 借阅历史 (仅管理员可见) -->
        {% if current_user.role_id == 1 %}
        <div class="book-borrow-history">
            <h3>借阅历史</h3>
            {% set borrow_records = book.borrow_records.order_by(BorrowRecord.borrow_date.desc()).limit(10).all() %}

            {% if borrow_records %}
            <table class="table borrow-table">
                <thead>
                    <tr>
                        <th>借阅用户</th>
                        <th>借阅日期</th>
                        <th>应还日期</th>
                        <th>实际归还</th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody>
                    {% for record in borrow_records %}
                    <tr>
                        <td>{{ record.user.username }}</td>
                        <td>{{ record.borrow_date.strftime('%Y-%m-%d') }}</td>
                        <td>{{ record.due_date.strftime('%Y-%m-%d') }}</td>
                        <td>{{ record.return_date.strftime('%Y-%m-%d') if record.return_date else '-' }}</td>
                        <td>
                            {% if record.status == 1 and record.due_date < now %}
                            <span class="badge badge-danger">已逾期</span>
                            {% elif record.status == 1 %}
                            <span class="badge badge-warning">借阅中</span>
                            {% else %}
                            <span class="badge badge-success">已归还</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <p class="no-records">暂无借阅记录</p>
            {% endif %}
        </div>
        {% endif %}
    </div>
</div>

<!-- 借阅确认模态框 -->
<div class="modal fade" id="borrowModal" tabindex="-1" role="dialog" aria-labelledby="borrowModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="borrowModalLabel">借阅确认</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="borrowForm" action="{{ url_for('borrow.borrow_book') }}" method="POST">
                <div class="modal-body">
                    <p>您确定要借阅《{{ book.title }}》吗？</p>
                    <input type="hidden" name="book_id" value="{{ book.id }}">

                    <div class="form-group">
                        <label for="borrow_days">借阅天数</label>
                        <select class="form-control" id="borrow_days" name="borrow_days">
                            <option value="7">7天</option>
                            <option value="14" selected>14天</option>
                            <option value="30">30天</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-success">确认借阅</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    $(document).ready(function() {
        // 借阅按钮点击事件
        $('#borrowBtn').click(function(e) {
            e.preventDefault();
            $('#borrowModal').modal('show');
        });
    });
</script>
{% endblock %}