Рефакторинг моделей заказов и добавление методов оплаты
This commit is contained in:
@@ -12,7 +12,8 @@
|
||||
}
|
||||
|
||||
/* Визуально помечаем удаленные формы */
|
||||
.order-item-form.deleted {
|
||||
.order-item-form.deleted,
|
||||
.payment-form.deleted {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -560,19 +561,110 @@
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Оплата и дополнительно -->
|
||||
<!-- Оплата (смешанная оплата) -->
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0">Оплата</h5>
|
||||
<button type="button" class="btn btn-sm btn-success" id="add-payment-btn">
|
||||
<i class="bi bi-plus-circle"></i> Добавить платеж
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="mb-3">
|
||||
<label for="{{ form.payment_method.id_for_label }}" class="form-label">Способ оплаты</label>
|
||||
{{ form.payment_method }}
|
||||
<!-- Скрытые поля для formset management -->
|
||||
{{ payment_formset.management_form }}
|
||||
|
||||
<!-- Контейнер для платежей -->
|
||||
<div id="payments-container">
|
||||
{% for payment_form in payment_formset %}
|
||||
<div class="payment-form border rounded p-3 mb-3" data-form-index="{{ forloop.counter0 }}">
|
||||
{{ payment_form.id }}
|
||||
{{ payment_form.DELETE }}
|
||||
|
||||
<div class="row align-items-end">
|
||||
<div class="col-md-4">
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Способ оплаты</label>
|
||||
{{ payment_form.payment_method }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Сумма</label>
|
||||
{{ payment_form.amount }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Примечания</label>
|
||||
{{ payment_form.notes }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<button type="button" class="btn btn-danger btn-sm w-100 remove-payment-btn">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if payment_form.errors %}
|
||||
<div class="alert alert-danger mt-2">{{ payment_form.errors }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Итоговая сумма платежей -->
|
||||
<div id="payments-total-section" class="border-top pt-3 mt-3 mb-3">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<p class="mb-0 text-muted">Внесено платежей:</p>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<h5 class="mb-0 text-success">
|
||||
<span id="payments-total-value">0.00</span> руб.
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Скрытый шаблон для новых платежей -->
|
||||
<template id="empty-payment-form-template">
|
||||
<div class="payment-form border rounded p-3 mb-3" data-form-index="__prefix__">
|
||||
<input type="hidden" name="payments-__prefix__-id" id="id_payments-__prefix__-id">
|
||||
<input type="checkbox" name="payments-__prefix__-DELETE" id="id_payments-__prefix__-DELETE" style="display: none;">
|
||||
|
||||
<div class="row align-items-end">
|
||||
<div class="col-md-4">
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Способ оплаты</label>
|
||||
<select name="payments-__prefix__-payment_method" class="form-select" id="id_payments-__prefix__-payment_method">
|
||||
<option value="">---------</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Сумма</label>
|
||||
<input type="number" name="payments-__prefix__-amount" step="0.01" min="0" class="form-control" placeholder="Сумма платежа" id="id_payments-__prefix__-amount">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Примечания</label>
|
||||
<textarea name="payments-__prefix__-notes" class="form-control" rows="1" placeholder="Примечания к платежу (опционально)" id="id_payments-__prefix__-notes"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<button type="button" class="btn btn-danger btn-sm w-100 remove-payment-btn">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Скидка -->
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-4">
|
||||
<div class="mb-3">
|
||||
<label for="{{ form.discount_amount.id_for_label }}" class="form-label">Скидка</label>
|
||||
@@ -1457,6 +1549,141 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
});
|
||||
});
|
||||
|
||||
// === УПРАВЛЕНИЕ ПЛАТЕЖАМИ (СМЕШАННАЯ ОПЛАТА) ===
|
||||
|
||||
const paymentsContainer = document.getElementById('payments-container');
|
||||
const addPaymentBtn = document.getElementById('add-payment-btn');
|
||||
const paymentFormTemplate = document.getElementById('empty-payment-form-template');
|
||||
let paymentFormCount = parseInt(document.querySelector('[name="payments-TOTAL_FORMS"]').value);
|
||||
|
||||
// Функция для расчета итоговой суммы платежей
|
||||
function calculatePaymentsTotal() {
|
||||
const visiblePaymentForms = Array.from(document.querySelectorAll('.payment-form'))
|
||||
.filter(form => !form.classList.contains('deleted'));
|
||||
|
||||
let total = 0;
|
||||
|
||||
visiblePaymentForms.forEach((form) => {
|
||||
const amountField = form.querySelector('[name$="-amount"]');
|
||||
if (amountField) {
|
||||
const amount = parseFloat(amountField.value.replace(',', '.')) || 0;
|
||||
total += amount;
|
||||
}
|
||||
});
|
||||
|
||||
return total;
|
||||
}
|
||||
|
||||
function updatePaymentsTotal() {
|
||||
const total = calculatePaymentsTotal();
|
||||
const totalElement = document.getElementById('payments-total-value');
|
||||
|
||||
if (totalElement) {
|
||||
totalElement.textContent = total.toFixed(2);
|
||||
}
|
||||
}
|
||||
|
||||
// Функция для добавления нового платежа
|
||||
function addNewPayment() {
|
||||
const newPaymentHtml = paymentFormTemplate.content.cloneNode(true);
|
||||
const newPaymentDiv = newPaymentHtml.querySelector('.payment-form');
|
||||
|
||||
// Заменяем __prefix__ на актуальный индекс
|
||||
newPaymentDiv.innerHTML = newPaymentDiv.innerHTML.replace(/__prefix__/g, paymentFormCount);
|
||||
newPaymentDiv.setAttribute('data-form-index', paymentFormCount);
|
||||
|
||||
// Добавляем в контейнер
|
||||
paymentsContainer.appendChild(newPaymentDiv);
|
||||
|
||||
// Обновляем счетчик форм
|
||||
paymentFormCount++;
|
||||
document.querySelector('[name="payments-TOTAL_FORMS"]').value = paymentFormCount;
|
||||
|
||||
// Добавляем обработчик удаления
|
||||
const removeBtn = newPaymentDiv.querySelector('.remove-payment-btn');
|
||||
removeBtn.addEventListener('click', function() {
|
||||
removePayment(newPaymentDiv);
|
||||
});
|
||||
|
||||
// Добавляем обработчики для автоматического пересчета
|
||||
const amountField = newPaymentDiv.querySelector('[name$="-amount"]');
|
||||
if (amountField) {
|
||||
amountField.addEventListener('input', updatePaymentsTotal);
|
||||
}
|
||||
|
||||
// Загружаем payment methods в select
|
||||
loadPaymentMethods(newPaymentDiv.querySelector('select[name$="-payment_method"]'));
|
||||
|
||||
// Обновляем итоговую сумму
|
||||
updatePaymentsTotal();
|
||||
|
||||
return newPaymentDiv;
|
||||
}
|
||||
|
||||
// Функция для удаления платежа
|
||||
function removePayment(form) {
|
||||
if (!confirm('Вы действительно хотите удалить этот платеж?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
const deleteCheckbox = form.querySelector('input[name$="-DELETE"]');
|
||||
const idField = form.querySelector('input[name$="-id"]');
|
||||
|
||||
// Если форма уже сохранена (есть ID), помечаем на удаление
|
||||
if (idField && idField.value) {
|
||||
deleteCheckbox.checked = true;
|
||||
form.classList.add('deleted');
|
||||
form.style.display = 'none';
|
||||
console.log('Payment form marked for deletion, id:', idField.value);
|
||||
} else {
|
||||
// Если форма новая, просто удаляем из DOM
|
||||
form.remove();
|
||||
console.log('Payment form removed from DOM');
|
||||
}
|
||||
|
||||
// Обновляем итоговую сумму
|
||||
updatePaymentsTotal();
|
||||
}
|
||||
|
||||
// Функция для загрузки активных payment methods
|
||||
function loadPaymentMethods(selectElement) {
|
||||
fetch('/products/api/payment-methods/')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
selectElement.innerHTML = '<option value="">---------</option>';
|
||||
data.forEach(method => {
|
||||
const option = document.createElement('option');
|
||||
option.value = method.id;
|
||||
option.textContent = method.name;
|
||||
selectElement.appendChild(option);
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error loading payment methods:', error);
|
||||
});
|
||||
}
|
||||
|
||||
// Обработчик кнопки "Добавить платеж"
|
||||
if (addPaymentBtn) {
|
||||
addPaymentBtn.addEventListener('click', addNewPayment);
|
||||
}
|
||||
|
||||
// Добавляем обработчики удаления для существующих платежей
|
||||
paymentsContainer.querySelectorAll('.remove-payment-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const form = this.closest('.payment-form');
|
||||
removePayment(form);
|
||||
});
|
||||
});
|
||||
|
||||
// Добавляем обработчики для автоматического пересчета для существующих форм
|
||||
paymentsContainer.querySelectorAll('[name$="-amount"]').forEach(field => {
|
||||
field.addEventListener('input', updatePaymentsTotal);
|
||||
});
|
||||
|
||||
// Инициализируем итоговую сумму при загрузке страницы
|
||||
updatePaymentsTotal();
|
||||
|
||||
// Закрытие обработчика DOMContentLoaded для управления типом доставки и остальных функций
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user