customerTicket/design-prototypes/chaharsu/payment-receipt.html

<!doctype html>
<html lang="fa" dir="rtl" data-static-version="1791111429240969400">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><meta name="theme-color" content="#08376b"><title>ارسال فیش واریزی · چهارسو</title>
<link rel="icon" href="../../static/images/favicon.ico?v=1791111429240969400"><link rel="stylesheet" href="../../static/css/tailwind.css?v=1791111429240969400"><link rel="stylesheet" href="service-pages.css?v=1791111429240969400">
<script defer src="payment-demo-data.js?v=1791111429240969400"></script><script defer src="payment-services.js?v=1791111429240969400"></script><script defer src="receipt-date.js?v=1791111429240969400"></script><script defer src="receipt-amount.js?v=1791111429240969400"></script><script defer src="receipt-banks.js?v=1791111429240969400"></script><script defer src="receipt-validation.js?v=1791111429240969400"></script></head>
<body data-finance-page="receipt">
<!-- DESIGN PROTOTYPE ONLY: صفحهٔ مستقل با URL/view/template مستقل در پیاده‌سازی اصلی؛ به modal خانه تبدیل نشود.
پوسته از base.html و دارایی‌ها از static_asset_version استفاده کنند. هیچ اتصال به دیتابیس یا ارسال واقعی وجود ندارد.
اطلاعات پرداخت تنها برای مشتری مخاطب اعلامیه از بک‌اند تأمین شود؛ فهرست عمومی حساب‌ها نمایش داده نشود.
پنهان کردن شماره‌ها در UI کنترل دسترسی نیست: مجوز مشاهده/ثبت فیش و ارتباط اعلامیه با مشتری باید در سرور بررسی شود.
پارامتر notice فقط شناسهٔ اعلامیه است، نه مبلغ یا شماره حساب؛ سرور دادهٔ معتبر را دوباره دریافت کند. -->
<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;overflow:hidden" aria-hidden="true">
<symbol id="i-receipt" viewBox="0 0 24 24"><path d="M5 3h14v18l-3-2-4 2-4-2-3 2ZM9 8h6M9 12h6"/></symbol>
<symbol id="i-bank" viewBox="0 0 24 24"><path d="m3 7 9-4 9 4v3H3ZM5 10v7M10 10v7M14 10v7M19 10v7M3 17h18v4H3"/></symbol>
<symbol id="i-copy" viewBox="0 0 24 24"><rect x="8" y="8" width="12" height="13" rx="2"/><path d="M16 8V3H3v13h5"/></symbol>
<symbol id="i-chevron" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></symbol>
<symbol id="i-upload" viewBox="0 0 24 24"><path d="M12 16V3m-5 5 5-5 5 5M4 16v5h16v-5"/></symbol>
<symbol id="i-search" viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"/><path d="m15 15 6 6"/></symbol></svg><div class="preview-bar"><b>پیش‌نمایش طراحی چهارسو</b> · داده‌ها ساختگی‌اند؛ پرداخت و ارسال واقعی انجام نمی‌شود.</div>
<header class="page-header"><div class="header-inner"><a class="brand" href="index.html?v=1791111429240969400"><img src="../../static/images/company-logo.png?v=1791111429240969400" alt="لوله گستر گلپایگان" width="300" height="130"><span class="brand-copy"><b>چهارسو</b><small>مرکز خدمات مشتریان</small></span></a><a class="header-home" href="index.html?v=1791111429240969400">بازگشت به خدمات ←</a></div></header>
<main class="service-main"><nav class="breadcrumb" aria-label="مسیر صفحه"><a href="index.html?v=1791111429240969400">خدمات چهارسو</a><span aria-hidden="true">/</span><span aria-current="page">ارسال فیش واریزی</span></nav>

<div class="title-row"><span class="page-icon"><svg class="icon" aria-hidden="true"><use href="#i-receipt"/></svg></span><div><h1>ارسال فیش واریزی</h1><p class="subtitle">فیش را مستقل یا برای یکی از واریزهای اعلام‌شده ارسال کنید.</p></div></div>

<form id="receipt-form" enctype="multipart/form-data" novalidate>
<div id="receipt-errors" class="receipt-errors" role="alert" hidden><h2>لطفاً این موارد را اصلاح کنید</h2><ul></ul></div>
<section class="content-card" aria-labelledby="association-title"><h2 id="association-title">این فیش مربوط به کدام واریز است؟</h2>
<fieldset class="receipt-mode"><legend class="sr-only">نوع فیش واریزی</legend>
<label class="recommended-mode"><input type="radio" name="receipt-mode" value="linked" checked aria-describedby="linked-recommendation"><span><b>واریز مرتبط <span class="recommended-badge">پیشنهادی</span></b><small>با اعلامیهٔ واریز کارشناس</small></span></label>
<label><input type="radio" name="receipt-mode" value="independent"><span><b>واریز مستقل</b><small>بدون اعلامیهٔ واریز</small></span></label></fieldset>
<p id="linked-recommendation" class="finance-guidance">برای ثبت دقیق‌تر، از کارشناس بخواهید اعلامیهٔ واریز ایجاد کند؛ این کار توصیه می‌شود و اجباری نیست.</p>
<!-- UX CONTRACT: واریز مرتبط همیشه اولین گزینه و دارای نشان پیشنهادی است. واریز مستقل همچنان قابل انتخاب است، حتی اگر هیچ اعلامیه‌ای وجود نداشته باشد. -->
<div id="linked-payment" hidden><label for="notice-select" class="field-label">انتخاب واریز اعلام‌شده</label><select id="notice-select" name="notice_id" aria-describedby="notice-selection-help notice-error"><option value="">یک مورد را انتخاب کنید</option></select><p id="notice-selection-help" class="field-help">مبلغ و شمارهٔ فاکتور را با واریز انجام‌شده تطبیق دهید.</p><p id="notice-error" class="field-error" hidden></p><p id="notice-invalid" class="inline-error" role="alert" hidden>این اعلامیه در دسترس نیست. مورد دیگری را انتخاب کنید یا نوع فیش را به واریز مستقل تغییر دهید.</p>
<div id="selected-payment" class="selected-payment" hidden><h3 id="selected-title"></h3><dl id="selected-fields" class="payment-fields compact-fields"></dl><a id="selected-details" class="text-action">مشاهدهٔ اطلاعات و کپی شماره‌ها ←</a></div></div>
<p id="independent-help" class="field-help independent-help">اگر اطلاعات واریز را بیرون از چهارسو دریافت کرده‌اید، این گزینه را انتخاب کنید.</p></section>
<section class="content-card" aria-labelledby="receipt-title"><h2 id="receipt-title">اطلاعات فیش پرداخت</h2><p>مبلغ، حساب مقصد، تاریخ کامل و تصویر فیش الزامی‌اند.</p>
<div class="receipt-field-grid"><div><label for="paid-amount" class="field-label">مبلغ پرداخت‌شده <span>(ریال · اجباری)</span></label><input id="paid-amount" required aria-required="true" type="text" inputmode="numeric" autocomplete="off" placeholder="مثلاً ۲۸۰۰۰۰۰۰۰" aria-describedby="amount-words amount-help amount-error"><p id="amount-words" class="amount-words" role="status" aria-live="polite" aria-atomic="true"></p><p id="amount-help" class="field-help">مبلغی که واقعاً پرداخت کرده‌اید؛ ممکن است با مبلغ اعلام‌شده متفاوت باشد.</p><p id="amount-error" class="field-error" hidden></p><input id="paid-amount-value" name="paid_amount" type="hidden" value=""></div><div><label for="receipt-reference" class="field-label">شمارهٔ پیگیری بانکی <span>(اختیاری)</span></label><input id="receipt-reference" name="receipt-reference" type="text" inputmode="numeric" autocomplete="off" placeholder="شمارهٔ درج‌شده روی فیش"></div></div>


<div class="receipt-field-grid bank-fields"><div><label for="origin-bank" class="field-label">بانک مبدأ <span>(اختیاری)</span></label><select id="origin-bank" name="origin_bank"><option value="">انتخاب بانک مبدأ</option></select><div id="origin-other-field" hidden><label for="origin-bank-other" class="field-label">نام بانک دیگر <span>(اختیاری)</span></label><input id="origin-bank-other" name="origin_bank_other" type="text" maxlength="80" disabled autocomplete="off" placeholder="نام بانک را بنویسید"></div></div>
<div><label for="destination-account" class="field-label">به کدام حساب ما واریز کردید؟ <span>(اجباری)</span></label><select id="destination-account" name="destination_account_id" required aria-required="true" aria-describedby="destination-help destination-error"><option value="">انتخاب حساب مقصد</option></select><p id="destination-help" class="field-help">نام حسابی را که وجه به آن واریز کرده‌اید انتخاب کنید.</p><p id="destination-error" class="field-error" hidden></p></div></div>
<!-- BANK CONTRACT: حساب‌های مقصد از دیتابیس شرکت تأمین می‌شوند؛ در این فهرست فقط display_name و ID مجاز ارائه شوند، نه شماره حساب، شبا یا کارت.
انتخاب مقصد اجباری و توسط مشتری است؛ انتخاب اعلامیه یا تغییر نوع فیش نباید حساب مقصد را خودکار عوض کند.
سرور باید destination_account_id را در حساب‌های فعال/مجاز شرکت بررسی کند و نام حساب را از دیتابیس بازیابی کند، نه از متن ارسال‌شده توسط کاربر.
فهرست بانک مبدأ محلی و اختیاری است و گزینهٔ سایر دارد؛ فهرست اصلی باید با نام‌های بانکی معتبر به‌روز نگه داشته شود.
مبلغ نمایشی گروه‌بندی هزارگان دارد، ولی paid_amount ریالی بدون جداکننده است؛ تبدیل به حروف تومان از BigInt و باقی‌ماندهٔ دقیق استفاده می‌کند و گرد نمی‌شود. -->
<fieldset class="receipt-date" aria-describedby="receipt-date-help receipt-date-status date-error"><legend>تاریخ واریز <span>(شمسی · اجباری)</span></legend>
<div class="date-selects"><div><label for="receipt-day">روز</label><select id="receipt-day" required aria-required="true" aria-describedby="date-error"><option value="">روز</option></select></div><div><label for="receipt-month">ماه</label><select id="receipt-month" required aria-required="true" aria-describedby="date-error"><option value="">ماه</option></select></div><div><label for="receipt-year">سال</label><select id="receipt-year" required aria-required="true" aria-describedby="date-error"><option value="">سال</option></select></div></div>
<div class="date-tools"><p id="receipt-date-help">تاریخ درج‌شده روی فیش را انتخاب کنید.</p><button id="receipt-date-today" class="finance-button secondary" type="button">امروز</button></div>
<p id="receipt-date-status" role="status" aria-live="polite">روز پرداخت را انتخاب کنید.</p>
<p id="date-error" class="field-error" hidden></p>
<input id="receipt-date-value" name="paid_date" type="hidden" value="">
<!-- DATE CONTRACT: انتخابگر روز/ماه/سال شمسی با select بومی مرورگر و Intl، بدون CDN یا کتابخانهٔ خارجی.
روز از ابتدا خالی است؛ ماه و سال جاری فقط برای سهولت انتخاب‌اند. امروز بر اساس Asia/Tehran است.
فیلد paid_date تنها مقدار تاریخ قابل ارسال است: تاریخ میلادیِ فقط‌روز با ارقام ASCII و قالب YYYY-MM-DD. selectهای نمایشی name ندارند و تاریخ شمسی به سرور ارسال نمی‌کنند.
سرور باید paid_date را به‌عنوان تاریخ میلادی اعتبارسنجی کند؛ نام فیلد با قرارداد فرم/API نهایی هماهنگ شود. تبدیل در مرورگر از مبدأ دقیق سال شمسی و با کنترل برگشتی انجام می‌شود؛ رشتهٔ شمسی به Date.parse داده نشود.
بازهٔ سال‌ها در نمونه: ده سال قبل تا یک سال بعد؛ بازهٔ اجرایی با نیاز واقعی و اعتبارسنجی سرور هماهنگ شود.
تغییر نوع فیش یا اعلامیه نباید تاریخ پرداخت واردشده را تغییر دهد. تاریخ اعلامیه، تاریخ واقعی پرداخت نیست. -->
</fieldset>
<div class="upload-zone"><svg class="icon" aria-hidden="true"><use href="#i-upload"/></svg><label for="receipt-file" class="file-picker-label">انتخاب تصویر فیش <span>(اجباری)</span></label><input id="receipt-file" class="sr-only" type="file" name="receipt_image" required aria-required="true" accept=".jpg,.jpeg,.png,.gif,.webp" data-max-bytes="10485760" aria-describedby="upload-help file-error"><span id="upload-help">تصویر JPG، PNG، GIF یا WEBP؛ حداکثر ۱۰ مگابایت.</span></div>
<p id="file-error" class="field-error" hidden></p>
<div class="file-selection" id="file-selection" hidden><p id="file-status" role="status" aria-live="polite"></p><button id="clear-file" type="button">حذف انتخاب</button></div>
<label for="receipt-note" class="field-label note-label">توضیحات <span>(اختیاری)</span></label><textarea id="receipt-note" name="receipt-note" rows="3" placeholder="مثلاً شمارهٔ فاکتور یا توضیح دربارهٔ پرداخت"></textarea>
<!-- IMPLEMENTATION CONTRACT: مدل فیش دو حالت دارد: اعلامیهٔ مرتبط (شناسهٔ معتبر متعلق به مشتری) یا مستقل (بدون شناسه).
تغییر حالت باید ارتباط قبلی را حذف کند؛ داده‌های بانکی و مبلغ اعلام‌شده از سرور دریافت شوند، نه از query string یا hidden inputs.
مبلغ پرداخت‌شده با مبلغ مورد انتظار فرق دارد؛ فرم آن را خودکار بازنویسی نکند. مبلغ و واحد ریال جدا و روشن‌اند.
پس از ذخیرهٔ واقعی و اعتبارسنجی فایل، رسید ثبت و وضعیت بررسی نمایش داده شود؛ انتخاب فایل یا کلیک هرگز موفقیت ساختگی نسازد.
دکمه در این نمونه فقط اعتبارسنجی می‌کند و هیچ ارسال واقعی ندارد؛ پس از اعتبارسنجی موفق، پیام «ارسال نشده» نمایش داده شود. برای فیش مرتبط، شمارهٔ اعلامیه/فاکتور نیز همراه رسید ثبت نمایش داده شود. -->
<div class="receipt-summary" id="receipt-summary" role="status">نوع فیش: واریز مستقل</div>
<p id="receipt-validation-status" class="validation-status" role="status" aria-live="polite"></p>
<!-- VALIDATION CONTRACT: مبلغ مثبت صحیح ریال، تاریخ کامل میلادی معتبر و تصویر قابل خواندن الزامی‌اند؛ اعلامیه برای نوع مرتبط الزامی است.
کنترل‌های نمایش مبلغ و شمسی name ندارند؛ پارامترهای مالی FormData: paid_amount عدد ریالی ASCII بدون جداکننده، paid_date میلادی YYYY-MM-DD، receipt_image و destination_account_id اجباری؛ origin_bank اختیاری و notice_id فقط برای حالت مرتبط است.
حد تصویر این نمونه مطابق پیش‌فرض bootstrap پروژه است؛ در نسخهٔ اصلی حد حجم/پسوند/MIME از AttachmentPolicy معتبر سرور دریافت شوند.
اعتبارسنجی کلاینت جای اعتبارسنجی سرور را نمی‌گیرد؛ سرور مقدار، تاریخ، مالکیت اعلامیه و محتوای واقعی فایل را دوباره بررسی کند. -->
<div class="receipt-actions"><button id="submit-receipt" type="submit" disabled>بررسی و ادامه</button><a href="bank-accounts.html?v=1791111429240969400">مشاهدهٔ واریزهای اعلام‌شده ←</a></div></section></form>
<div class="service-footer"><a href="index.html?v=1791111429240969400">→ بازگشت به خدمات چهارسو</a></div>
<!-- در نسخهٔ اصلی امضا از developer_credit در تنظیمات برند تأمین شود. -->
<p class="page-footer">طراحی و توسعه: محمد جواد فصاحت <a href="tel:09202202129" dir="ltr">09202202129</a></p></main>
<div id="copy-feedback" class="copy-feedback" role="status" aria-live="polite" aria-atomic="true"></div>
<dialog id="manual-copy" class="manual-copy" aria-labelledby="manual-copy-title"><h2 id="manual-copy-title">کپی اطلاعات</h2><p>کپی خودکار در این مرورگر ممکن نشد. متن را انتخاب کنید و از گزینهٔ کپی دستگاه استفاده کنید.</p><textarea id="manual-copy-text" readonly aria-label="متن آماده برای کپی" dir="auto"></textarea><div><button type="button" id="select-copy-text" class="finance-button">انتخاب متن</button><button type="button" id="close-copy" class="finance-button secondary">بستن</button></div></dialog>
<noscript><p class="service-notice">برای مشاهدهٔ تعامل‌های این نمونه، جاوااسکریپت را فعال کنید.</p></noscript></body></html>