Book_system/app/templates/book/edit.html

{% extends 'base.html' %}

{% block title %}编辑图书 - {{ book.title }}{% endblock %}

{% block head %}
  <!-- 使用我们为成熟御姐风新建的 CSS -->
  <link rel="stylesheet" href="{{ url_for('static', filename='css/book-edit.css') }}">
  <!-- 字体 -->
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
{% endblock %}

{% block content %}
<div class="book-form-container">
  <!-- 显示Flash消息 -->
  {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
      {% for category, message in messages %}
        <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
          {{ message }}
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      {% endfor %}
    {% endif %}
  {% endwith %}

  <div class="page-header">
    <h1>编辑图书</h1>
    <div class="actions">
      <a href="{{ url_for('book.book_detail', book_id=book.id) }}" class="btn btn-secondary">
        <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-group">
              <label for="title">书名 <span class="required">*</span></label>
              <input type="text" class="form-control" id="title" name="title" value="{{ book.title }}" required>
            </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 {% if isbn_error %}is-invalid{% endif %}"
                       id="isbn" name="isbn" value="{{ book.isbn or '' }}">
                {% if isbn_error %}
                <div class="invalid-feedback">
                  {{ isbn_error }}
                </div>
                {% endif %}
                <small class="form-text text-muted">ISBN必须是有效的10位或13位格式</small>
              </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">
          <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" 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-book"></i>
                  <span>暂无封面</span>
                </div>
              {% endif %}
            </div>
            <div class="upload-container" style="margin-top: 1rem;">
              <label for="cover" class="btn btn-secondary btn-block">
                更换封面
              </label>
              <input type="file" id="cover" name="cover" class="form-control-file" accept="image/*" style="display:none;">
            </div>
          </div>
        </div>

        <div class="card">
          <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>
              <input type="number" class="form-control" id="price" name="price" step="0.01" min="0" value="{{ book.price or '' }}">
            </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">
            保存修改
          </button>
        </div>
      </div>
    </div>
  </form>
</div>
{% endblock %}

{% block scripts %}
<script>
  // 安全地传递变量给JS
  const bookCoverUrl = {{ book.cover_url|default('', true)|tojson|safe }};
  const bookTitle = {{ book.title|default('', true)|tojson|safe }};
  const bookId = {{ book.id|default(0)|tojson|safe }};
</script>
<!-- 确保jQuery已加载 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 加载验证脚本 -->
<script src="{{ url_for('static', filename='js/book-edit.js') }}"></script>
{% endblock %}