282 lines
10 KiB
HTML
282 lines
10 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block content %}
|
||
<style>
|
||
.orders-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 2rem;
|
||
gap: 1rem;
|
||
}
|
||
.orders-header h2 { margin-bottom: 0; }
|
||
.orders-stats {
|
||
display: flex;
|
||
gap: 0.8rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
.orders-stats .stat-badge {
|
||
background: rgba(255, 255, 255, 0.15);
|
||
border-radius: 20px;
|
||
padding: 0.3rem 0.8rem;
|
||
font-size: 0.8rem;
|
||
color: white;
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
.orders-filters {
|
||
background: rgba(0, 0, 0, 0.55);
|
||
padding: 1rem;
|
||
border-radius: 20px;
|
||
margin-bottom: 1.5rem;
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
.filter-bar {
|
||
display: flex;
|
||
gap: 1rem;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
}
|
||
.filter-bar label {
|
||
font-size: 0.85rem;
|
||
font-weight: 500;
|
||
color: #f5cba0;
|
||
}
|
||
.filter-bar select {
|
||
padding: 0.4rem 0.8rem;
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
border-radius: 6px;
|
||
background: rgba(255, 255, 255, 0.9);
|
||
cursor: pointer;
|
||
color: #2c2c2c;
|
||
}
|
||
.orders-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
.order-card {
|
||
background: rgba(0, 0, 0, 0.55);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
border-radius: 20px;
|
||
overflow: hidden;
|
||
transition: all 0.2s ease;
|
||
}
|
||
.order-card:hover {
|
||
transform: translateX(5px);
|
||
background: rgba(0, 0, 0, 0.6);
|
||
}
|
||
.order-header {
|
||
background: rgba(0, 0, 0, 0.3);
|
||
padding: 1rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
.order-header h3 {
|
||
margin: 0;
|
||
font-size: 1.1rem;
|
||
color: #f5cba0;
|
||
}
|
||
.order-details {
|
||
padding: 1rem;
|
||
}
|
||
.order-details p {
|
||
margin: 0.5rem 0;
|
||
color: white;
|
||
}
|
||
.order-details strong {
|
||
color: #f5cba0;
|
||
min-width: 120px;
|
||
display: inline-block;
|
||
}
|
||
.discount-badge {
|
||
background: #28a745;
|
||
color: white;
|
||
padding: 0.2rem 0.5rem;
|
||
border-radius: 20px;
|
||
font-size: 0.7rem;
|
||
display: inline-block;
|
||
margin-left: 0.5rem;
|
||
}
|
||
.original-price {
|
||
text-decoration: line-through;
|
||
color: #aaa;
|
||
margin-right: 0.5rem;
|
||
}
|
||
.payment-info {
|
||
margin-top: 0.5rem;
|
||
padding: 0.5rem;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: 10px;
|
||
}
|
||
.payment-note {
|
||
font-size: 0.7rem;
|
||
color: #ccc;
|
||
margin-top: 0.3rem;
|
||
}
|
||
.order-actions {
|
||
margin-top: 1rem;
|
||
padding-top: 0.5rem;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
.order-actions .btn-primary {
|
||
background: #f5cba0;
|
||
color: #2c1810;
|
||
border: none;
|
||
border-radius: 50px;
|
||
padding: 0.5rem 1rem;
|
||
text-decoration: none;
|
||
display: inline-block;
|
||
font-weight: bold;
|
||
transition: 0.2s;
|
||
}
|
||
.order-actions .btn-primary:hover {
|
||
background: #ffdd99;
|
||
transform: translateY(-2px);
|
||
}
|
||
.status {
|
||
padding: 0.2rem 0.6rem;
|
||
border-radius: 20px;
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
}
|
||
.status-pending { background: #ffc107; color: #856404; }
|
||
.status-confirmed { background: #17a2b8; color: white; }
|
||
.status-completed { background: #28a745; color: white; }
|
||
.status-cancelled { background: #dc3545; color: white; }
|
||
.unread-badge {
|
||
background: #dc3545;
|
||
color: white;
|
||
border-radius: 50%;
|
||
padding: 2px 6px;
|
||
font-size: 10px;
|
||
margin-left: 5px;
|
||
}
|
||
.empty-orders {
|
||
text-align: center;
|
||
padding: 2rem;
|
||
background: rgba(0, 0, 0, 0.55);
|
||
border-radius: 20px;
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
.empty-orders .icon { font-size: 3rem; margin-bottom: 0.5rem; }
|
||
.empty-orders h3 { color: #f5cba0; margin-bottom: 0.5rem; }
|
||
.empty-orders p { color: white; }
|
||
@media (max-width: 768px) {
|
||
.orders-header { flex-direction: column; align-items: flex-start; }
|
||
.order-details strong { min-width: auto; display: inline; }
|
||
.filter-bar { flex-direction: column; align-items: flex-start; }
|
||
.filter-bar select { width: 100%; }
|
||
}
|
||
</style>
|
||
|
||
<div class="orders-header">
|
||
<h2>Мои заказы</h2>
|
||
<div class="orders-stats">
|
||
{% set total = orders|length %}
|
||
{% set pending = orders|selectattr('status', 'equalto', 'pending')|list|length %}
|
||
{% set confirmed = orders|selectattr('status', 'equalto', 'confirmed')|list|length %}
|
||
{% set completed = orders|selectattr('status', 'equalto', 'completed')|list|length %}
|
||
<span class="stat-badge">Всего: {{ total }}</span>
|
||
<span class="stat-badge">Ожидают: {{ pending }}</span>
|
||
<span class="stat-badge">Подтверждены: {{ confirmed }}</span>
|
||
<span class="stat-badge">Выполнены: {{ completed }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="orders-filters">
|
||
<div class="filter-bar">
|
||
<label>Сортировка:</label>
|
||
<select onchange="window.location.href='?sort='+this.value+'&status={{ status }}'">
|
||
<option value="newest" {% if sort == 'newest' %}selected{% endif %}>Новые сначала</option>
|
||
<option value="oldest" {% if sort == 'oldest' %}selected{% endif %}>Старые сначала</option>
|
||
<option value="price_high" {% if sort == 'price_high' %}selected{% endif %}>Дорогие сначала</option>
|
||
<option value="price_low" {% if sort == 'price_low' %}selected{% endif %}>Дешевые сначала</option>
|
||
</select>
|
||
<label>Статус:</label>
|
||
<select onchange="window.location.href='?sort={{ sort }}&status='+this.value">
|
||
<option value="all" {% if status == 'all' %}selected{% endif %}>Все</option>
|
||
<option value="pending" {% if status == 'pending' %}selected{% endif %}>Ожидает</option>
|
||
<option value="confirmed" {% if status == 'confirmed' %}selected{% endif %}>Подтвержден</option>
|
||
<option value="completed" {% if status == 'completed' %}selected{% endif %}>Выполнен</option>
|
||
<option value="cancelled" {% if status == 'cancelled' %}selected{% endif %}>Отменен</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
{% if orders %}
|
||
<div class="orders-list">
|
||
{% for order in orders %}
|
||
<div class="order-card">
|
||
<div class="order-header">
|
||
<h3>Заказ #{{ order.id }}</h3>
|
||
<span class="status status-{{ order.status }}">
|
||
{% if order.status == 'pending' %}Ожидает
|
||
{% elif order.status == 'confirmed' %}Подтвержден
|
||
{% elif order.status == 'completed' %}Выполнен
|
||
{% elif order.status == 'cancelled' %}Отменен
|
||
{% endif %}
|
||
</span>
|
||
</div>
|
||
<div class="order-details">
|
||
<p><strong>Услуга:</strong> {{ order.service_name }}</p>
|
||
{% if order.date and order.time %}
|
||
<p><strong>Дата:</strong> {{ order.date }} в {{ order.time }}</p>
|
||
{% endif %}
|
||
<p><strong>Количество человек:</strong> {{ order.persons }}</p>
|
||
<p><strong>Цена:</strong>
|
||
{% if order.discount_applied %}
|
||
<span class="original-price">{{ order.original_price }} руб.</span>
|
||
<span style="color: #28a745;">{{ order.price }} руб.</span>
|
||
<span class="discount-badge">Скидка {{ order.discount_amount }} руб. (15%)</span>
|
||
{% else %}
|
||
{{ order.price }} руб.
|
||
{% endif %}
|
||
</p>
|
||
|
||
<div class="payment-info">
|
||
<p><strong>💳 Оплата:</strong>
|
||
{% if order.payment_status == 'paid' %}
|
||
<span style="color: #28a745;">✅ Оплачено</span>
|
||
{% else %}
|
||
<span style="color: #ffc107;">⚠️ Не оплачено</span>
|
||
{% endif %}
|
||
</p>
|
||
<p><strong>📞 Реквизиты для оплаты:</strong> +7 962 545 066 (СБП, перевод по номеру телефона)</p>
|
||
<p><strong>💵 Наличные:</strong> на месте встречи</p>
|
||
<p class="payment-note">Оплата производится при получении услуги или заранее по номеру телефона. После оплаты администратор подтвердит статус.</p>
|
||
</div>
|
||
|
||
{% if order.comment %}
|
||
<p><strong>Комментарий:</strong> {{ order.comment }}</p>
|
||
{% endif %}
|
||
<p><strong>Дата заказа:</strong> {{ order.created_at }}</p>
|
||
<div class="order-actions">
|
||
<a href="{{ url_for('chat', order_id=order.id) }}" class="btn-primary">
|
||
Чат с поддержкой
|
||
{% if order.unread_count > 0 %}
|
||
<span class="unread-badge">{{ order.unread_count }}</span>
|
||
{% endif %}
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% else %}
|
||
<div class="empty-orders">
|
||
<div class="icon">🐴</div>
|
||
<h3>У вас пока нет заказов</h3>
|
||
<p>Хотите прокатиться верхом или обучиться верховой езде?</p>
|
||
<a href="{{ url_for('order') }}" class="btn-primary" style="display: inline-block; margin-top: 1rem; text-decoration: none;">Сделать первый заказ</a>
|
||
</div>
|
||
{% endif %}
|
||
{% endblock %}
|