Самир начал работу
This commit is contained in:
323
src/lib/PaymentPage.svelte
Normal file
323
src/lib/PaymentPage.svelte
Normal file
@ -0,0 +1,323 @@
|
||||
<script>
|
||||
let {
|
||||
onBack = () => {},
|
||||
totalPrice = 0,
|
||||
onConfirmPayment = () => {}
|
||||
} = $props();
|
||||
const phoneNumber = '+7 (999) 123-45-67'; // Замените на ваш номер
|
||||
let copySuccess = $state(false);
|
||||
async function copyPhoneNumber() {
|
||||
const cleanNumber = phoneNumber.replace(/[^0-9+]/g, '');
|
||||
let success = false;
|
||||
// Основной метод (Clipboard API)
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(cleanNumber);
|
||||
success = true;
|
||||
} catch (err) {
|
||||
console.warn('Clipboard API failed:', err);
|
||||
}
|
||||
}
|
||||
// Fallback для мобильных браузеров и HTTP
|
||||
if (!success) {
|
||||
try {
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = cleanNumber;
|
||||
textArea.style.position = 'fixed';
|
||||
textArea.style.left = '-9999px';
|
||||
textArea.style.opacity = '0';
|
||||
document.body.appendChild(textArea);
|
||||
textArea.focus();
|
||||
textArea.select();
|
||||
const deprecated = /** @type {any} */ (document).execCommand;
|
||||
if (deprecated && deprecated.call(document, 'copy')) {
|
||||
success = true;
|
||||
}
|
||||
document.body.removeChild(textArea);
|
||||
} catch (err) {
|
||||
console.error('Fallback copy failed:', err);
|
||||
}
|
||||
}
|
||||
if (success) {
|
||||
copySuccess = true;
|
||||
setTimeout(() => {
|
||||
copySuccess = false;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<div class="payment-container">
|
||||
<header class="payment-header">
|
||||
<button class="back-btn" onclick={onBack}>← Назад</button>
|
||||
<h1>Оплата печати</h1>
|
||||
</header>
|
||||
<main class="payment-content">
|
||||
<!-- Сумма -->
|
||||
<div class="amount-block">
|
||||
<span class="amount-label">К оплате</span>
|
||||
<span class="amount-value">{totalPrice}₽</span>
|
||||
</div>
|
||||
<!-- Информация о переводе -->
|
||||
<div class="transfer-info">
|
||||
<!-- Сначала номер телефона -->
|
||||
<div class="phone-row">
|
||||
<span class="phone-number">{phoneNumber}</span>
|
||||
<button
|
||||
class="copy-btn"
|
||||
onclick={copyPhoneNumber}
|
||||
class:success={copySuccess}
|
||||
title={copySuccess ? 'Скопировано' : 'Копировать номер'}
|
||||
aria-label={copySuccess ? 'Скопировано' : 'Копировать номер телефона'}
|
||||
>
|
||||
{copySuccess ? '✓' : '📋'}
|
||||
</button>
|
||||
</div>
|
||||
<!-- Под номером — информация о банке -->
|
||||
<p class="info-text">
|
||||
Переводить на <span class="bank-name">Т-Банк</span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- Шаги оплаты -->
|
||||
<div class="steps-block">
|
||||
<h3 class="steps-title">Как оплатить:</h3>
|
||||
<ol class="steps-list">
|
||||
<li>Скопируйте номер телефона</li>
|
||||
<li>Откройте банковское приложение</li>
|
||||
<li>Выберите перевод по номеру телефона</li>
|
||||
<li>Вставьте номер <strong>{phoneNumber}</strong></li>
|
||||
<li>Укажите банк: <span class="bank-name">Т-Банк</span></li>
|
||||
<li>Введите сумму <strong>{totalPrice}₽</strong></li>
|
||||
<li>Подтвердите перевод</li>
|
||||
<li>Вернитесь сюда и нажмите кнопку ниже</li>
|
||||
</ol>
|
||||
</div>
|
||||
<!-- Кнопка подтверждения -->
|
||||
<div class="payment-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="confirm-btn"
|
||||
onclick={onConfirmPayment}
|
||||
>
|
||||
Я оплатил(а) — Печать
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<style>
|
||||
.payment-container {
|
||||
width: 100%;
|
||||
min-height: 100dvh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: radial-gradient(120% 60% at 50% -10%, rgba(99, 102, 241, 0.18) 0%, transparent 60%);
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
color: #f5f7fa;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2000;
|
||||
/* Предотвращает горизонтальный скролл на мобильных */
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.payment-header {
|
||||
padding: 20px 16px 8px;
|
||||
display: flex; /* Делаем контейнер флексом */
|
||||
align-items: center; /* Выравниваем по вертикали */
|
||||
position: relative; /* Для позиционирования, если понадобится */
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #6366f1;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
padding: 12px 8px;
|
||||
margin: -8px -8px -8px 0; /* Убираем лишние отступы, оставляем нулевой слева */
|
||||
min-height: 44px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
order: -1; /* Принудительно ставим кнопку первой в потоке */
|
||||
margin-right: auto; /* Теперь это сработает и прижмет кнопку к левому краю */
|
||||
}
|
||||
|
||||
.payment-header h1 {
|
||||
margin: 0;
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
flex-grow: 1; /* Заставляем заголовок занимать оставшееся место */
|
||||
text-align: center; /* Центрируем текст заголовка */
|
||||
}
|
||||
.payment-content {
|
||||
flex: 1;
|
||||
padding: 24px 16px 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 28px;
|
||||
max-width: 520px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* ── Сумма ── */
|
||||
.amount-block {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.amount-label {
|
||||
font-size: 13px;
|
||||
color: #8b93a1;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.amount-value {
|
||||
font-size: 48px;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
letter-spacing: -0.03em;
|
||||
line-height: 1;
|
||||
}
|
||||
/* ── Информация о переводе ── */
|
||||
.transfer-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
.phone-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 16px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 14px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
justify-content: center;
|
||||
}
|
||||
.phone-number {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.copy-btn {
|
||||
/* Минимум 44px для touch target на мобильных */
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(99, 102, 241, 0.2);
|
||||
border: 1px solid rgba(99, 102, 241, 0.4);
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
font-size: 22px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
padding: 0;
|
||||
/* Убирает задержку тапа на мобильных */
|
||||
touch-action: manipulation;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.copy-btn:hover {
|
||||
background: rgba(99, 102, 241, 0.35);
|
||||
border-color: #6366f1;
|
||||
}
|
||||
.copy-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
.copy-btn.success {
|
||||
background: rgba(34, 197, 94, 0.25);
|
||||
border-color: rgba(34, 197, 94, 0.5);
|
||||
}
|
||||
.info-text {
|
||||
color: #a9b0c0;
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.bank-name {
|
||||
color: #fbbf24;
|
||||
font-weight: 700;
|
||||
}
|
||||
/* ── Шаги ── */
|
||||
.steps-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.steps-title {
|
||||
margin: 0;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: #f5f7fa;
|
||||
text-align: left;
|
||||
}
|
||||
.steps-list {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
color: #a9b0c0;
|
||||
font-size: 15px;
|
||||
line-height: 1.9;
|
||||
text-align: left;
|
||||
}
|
||||
.steps-list li {
|
||||
padding-left: 4px;
|
||||
}
|
||||
.steps-list strong {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
/* ── Кнопка подтверждения ── */
|
||||
.payment-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
margin-top: auto;
|
||||
padding-top: 8px;
|
||||
}
|
||||
.confirm-btn {
|
||||
width: 100%;
|
||||
/* Увеличенная высота для мобильных */
|
||||
padding: 20px 24px;
|
||||
border-radius: 16px;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
|
||||
box-shadow: 0 8px 24px -6px rgba(34, 197, 94, 0.4);
|
||||
transition: all 0.2s ease;
|
||||
touch-action: manipulation;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
min-height: 56px;
|
||||
}
|
||||
.confirm-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 28px -6px rgba(34, 197, 94, 0.5);
|
||||
}
|
||||
.confirm-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
/* Адаптация для очень маленьких экранов */
|
||||
@media (max-width: 360px) {
|
||||
.amount-value {
|
||||
font-size: 40px;
|
||||
}
|
||||
.phone-number {
|
||||
font-size: 18px;
|
||||
}
|
||||
.payment-header h1 {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user