Book_system/app/templates/book/add.html

{% extends 'base.html' %}

{% block title %}添加图书 - 图书管理系统{% endblock %}

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

{% block content %}
<div class="book-form-container">
    <div class="page-header">
        <h1>添加新图书</h1>
        <a href="{{ url_for('book.book_list') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> 返回列表
        </a>
    </div>

    <form method="POST" enctype="multipart/form-data" class="book-form">
        <div class="form-row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">基本信息</div>
                    <div class="card-body">
                        <div class="form-row">
                            <div class="form-group col-md-12">
                                <label for="title">书名 <span class="required">*</span></label>
                                <input type="text" class="form-control" id="title" name="title" required>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="author">作者 <span class="required">*</span></label>
                                <input type="text" class="form-control" id="author" name="author" required>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="publisher">出版社</label>
                                <input type="text" class="form-control" id="publisher" name="publisher">
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="isbn">ISBN</label>
                                <input type="text" class="form-control" id="isbn" name="isbn">
                            </div>
                            <div class="form-group col-md-6">
                                <label for="publish_year">出版年份</label>
                                <input type="text" class="form-control" id="publish_year" name="publish_year">
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="category_id">分类</label>
                                <select class="form-control" id="category_id" name="category_id">
                                    <option value="">未分类</option>
                                    {% for category in categories %}
                                    <option value="{{ category.id }}">{{ category.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="tags">标签</label>
                                <input type="text" class="form-control" id="tags" name="tags" placeholder="多个标签用逗号分隔">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card mt-4">
                    <div class="card-header">图书简介</div>
                    <div class="card-body">
                        <div class="form-group">
                            <textarea class="form-control" id="description" name="description" rows="8" placeholder="请输入图书简介"></textarea>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">封面图片</div>
                    <div class="card-body">
                        <div class="cover-preview-container">
                            <div class="cover-preview" id="coverPreview">
                                <div class="no-cover-placeholder">
                                    <i class="fas fa-image"></i>
                                    <span>暂无封面</span>
                                </div>
                            </div>
                            <div class="upload-container">
                                <label for="cover" class="btn btn-outline-primary btn-block">
                                    <i class="fas fa-upload"></i> 上传封面
                                </label>
                                <input type="file" id="cover" name="cover" class="form-control-file" accept="image/*" style="display:none;">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card mt-4">
                    <div class="card-header">库存和价格</div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="stock">库存数量</label>
                            <input type="number" class="form-control" id="stock" name="stock" min="0" value="0">
                        </div>
                        <div class="form-group">
                            <label for="price">价格</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">¥</span>
                                </div>
                                <input type="number" class="form-control" id="price" name="price" step="0.01" min="0">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-submit-container">
                    <button type="submit" class="btn btn-primary btn-lg btn-block">
                        <i class="fas fa-save"></i> 保存图书
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
{% endblock %}

{% block scripts %}
<script>
    $(document).ready(function() {
        // 封面预览
        $('#cover').change(function() {
            const file = this.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    $('#coverPreview').html(`<img src="${e.target.result}" class="cover-image">`);
                }
                reader.readAsDataURL(file);
            } else {
                $('#coverPreview').html(`
                    <div class="no-cover-placeholder">
                        <i class="fas fa-image"></i>
                        <span>暂无封面</span>
                    </div>
                `);
            }
        });
    });
</script>
{% endblock %}