117 lines
6.0 KiB
HTML
117 lines
6.0 KiB
HTML
{% extends "base.html" %}
|
||
{% block title %}评价商品 - 太白购物商城{% endblock %}
|
||
|
||
{% block head %}
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/review.css') }}">
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="container">
|
||
<nav aria-label="breadcrumb" class="mb-4">
|
||
<ol class="breadcrumb">
|
||
<li class="breadcrumb-item"><a href="{{ url_for('main.index') }}">首页</a></li>
|
||
<li class="breadcrumb-item"><a href="{{ url_for('order.list') }}">我的订单</a></li>
|
||
<li class="breadcrumb-item"><a href="{{ url_for('order.detail', order_id=order.id) }}">订单详情</a></li>
|
||
<li class="breadcrumb-item active">评价商品</li>
|
||
</ol>
|
||
</nav>
|
||
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-8">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5><i class="bi bi-star"></i> 评价商品</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<!-- 商品信息 -->
|
||
<div class="product-info mb-4">
|
||
<div class="row align-items-center">
|
||
<div class="col-md-2">
|
||
<img src="{{ order_item.product_image or '/static/images/default-product.jpg' }}"
|
||
class="img-fluid rounded" alt="{{ order_item.product_name }}">
|
||
</div>
|
||
<div class="col-md-10">
|
||
<h6 class="mb-1">{{ order_item.product_name }}</h6>
|
||
{% if order_item.spec_combination %}
|
||
<p class="text-muted mb-1">{{ order_item.spec_combination }}</p>
|
||
{% endif %}
|
||
<p class="text-muted mb-0">
|
||
单价：¥{{ "%.2f"|format(order_item.price) }} × {{ order_item.quantity }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 评价表单 -->
|
||
<form id="reviewForm">
|
||
<input type="hidden" id="orderId" value="{{ order.id }}">
|
||
<input type="hidden" id="productId" value="{{ order_item.product_id }}">
|
||
|
||
<!-- 评分 -->
|
||
<div class="mb-4">
|
||
<label class="form-label"><strong>商品评分：</strong></label>
|
||
<div class="rating-container">
|
||
<div class="star-rating" id="starRating">
|
||
<span class="star" data-rating="1"></span>
|
||
<span class="star" data-rating="2"></span>
|
||
<span class="star" data-rating="3"></span>
|
||
<span class="star" data-rating="4"></span>
|
||
<span class="star" data-rating="5"></span>
|
||
</div>
|
||
<span class="rating-text" id="ratingText">请选择评分</span>
|
||
</div>
|
||
<input type="hidden" id="rating" name="rating" required>
|
||
</div>
|
||
|
||
<!-- 评价内容 -->
|
||
<div class="mb-4">
|
||
<label for="content" class="form-label"><strong>评价内容：</strong></label>
|
||
<textarea class="form-control" id="content" name="content" rows="5"
|
||
placeholder="请分享您对商品的使用感受，帮助其他买家更好地了解商品..."></textarea>
|
||
<div class="form-text">字数限制：500字以内</div>
|
||
</div>
|
||
|
||
<!-- 图片上传 -->
|
||
<div class="mb-4">
|
||
<label class="form-label"><strong>上传图片：</strong>（可选）</label>
|
||
<div class="image-upload-container">
|
||
<div class="upload-area" id="uploadArea">
|
||
<i class="bi bi-cloud-upload"></i>
|
||
<p class="mb-0">点击或拖拽上传图片</p>
|
||
<small class="text-muted">支持 JPG、PNG、GIF 格式，最大5MB</small>
|
||
</div>
|
||
<input type="file" id="imageInput" multiple accept="image/*" style="display: none;">
|
||
<div class="uploaded-images" id="uploadedImages"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 匿名评价 -->
|
||
<div class="mb-4">
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="checkbox" id="isAnonymous" name="is_anonymous">
|
||
<label class="form-check-label" for="isAnonymous">
|
||
匿名评价（其他用户将看不到您的用户名）
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 提交按钮 -->
|
||
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
|
||
<a href="{{ url_for('order.detail', order_id=order.id) }}"
|
||
class="btn btn-outline-secondary me-md-2">取消</a>
|
||
<button type="submit" class="btn btn-primary" id="submitBtn">
|
||
<i class="bi bi-check-circle"></i> 提交评价
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script src="{{ url_for('static', filename='js/review.js') }}"></script>
|
||
{% endblock %}
|