Book_system/app/templates/book/edit.html

{% extends 'base.html' %}

{% block title %}编辑图书 - {{ book.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>
        <div class="actions">
            <a href="{{ url_for('book.book_detail', book_id=book.id) }}" class="btn btn-info">
                <i class="fas fa-eye"></i> 查看详情
            </a>
            <a href="{{ url_for('book.book_list') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> 返回列表
            </a>
        </div>
    </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" value="{{ book.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" value="{{ book.author }}" required>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="publisher">出版社</label>
                                <input type="text" class="form-control" id="publisher" name="publisher" value="{{ book.publisher or '' }}">
                            </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" value="{{ book.isbn or '' }}">
                            </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" value="{{ book.publish_year or '' }}">
                            </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 }}" {% if book.category_id == category.id %}selected{% endif %}>
                                        {{ 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" value="{{ book.tags or '' }}" 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="请输入图书简介">{{ book.description or '' }}</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">
                                {% if book.cover_url %}
                                <img src="{{ book.cover_url }}" class="cover-image" alt="{{ book.title }}">
                                {% else %}
                                <div class="no-cover-placeholder">
                                    <i class="fas fa-image"></i>
                                    <span>暂无封面</span>
                                </div>
                                {% endif %}
                            </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="{{ book.stock }}">
                        </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" value="{{ book.price or '' }}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="status">状态</label>
                            <select class="form-control" id="status" name="status">
                                <option value="1" {% if book.status == 1 %}selected{% endif %}>上架</option>
                                <option value="0" {% if book.status == 0 %}selected{% endif %}>下架</option>
                            </select>
                        </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(`
                    {% if book.cover_url %}
                    <img src="{{ book.cover_url }}" class="cover-image" alt="{{ book.title }}">
                    {% else %}
                    <div class="no-cover-placeholder">
                        <i class="fas fa-image"></i>
                        <span>暂无封面</span>
                    </div>
                    {% endif %}
                `);
            }
        });
    });
</script>
{% endblock %}