ปรับ css กรอกข้อมูล และปรับรูปแบบ step การชำระเงิน
This commit is contained in:
Tanyalak
parent
98738aa814
commit
6c7e57d9e3
11 changed files with 214 additions and 69 deletions
|
|
@ -1,16 +1,147 @@
|
|||
<template>
|
||||
<div class="col-12">
|
||||
<div class="row justify-center q-pa-md">
|
||||
<div class="col-4">
|
||||
<q-card flat class="q-pa-md text-left row q-mb-md" :class="getClass(status)">
|
||||
<div class="row q-px-sm">
|
||||
<div class="text-bold text-subtitle1 q-pb-md">เลือกวีธีการชำระเงิน</div>
|
||||
<div class="row col-12 q-gutter-y-md q-mb-lg">
|
||||
<q-list bordered class="col-12 rounded-borders">
|
||||
<q-item tag="label" v-ripple class="q-pa-md">
|
||||
<q-item-section avatar>
|
||||
<q-icon name="mdi-cellphone-settings" color="positive" size="30px" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label class="text-weight-medium text-subtitle1">โอนเงินผ่านมือถือ</q-item-label>
|
||||
<q-item-label caption class="gt-xs">อนุมัติหลังแจ้งการโอนภายใน 24 ชั่วโมง</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section avatar class="gt-xs">
|
||||
<q-avatar size="32px">
|
||||
<q-img src="@/assets/krungthai.png" class="col-12"/>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-radio v-model="pay" val="teal" color="blue" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-separator v-show="pay == 'teal'" />
|
||||
<q-slide-transition :duration="100" class="">
|
||||
<div v-show="pay == 'teal'" class="q-pa-md bg-grey-1">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class=" col-xs-12 col-sm-7">
|
||||
<q-card bordered class="items-start q-pa-md row q-mb-sm" style="height: 300px">
|
||||
<div class="row col-12">
|
||||
<div class="col-12 row no-wrap items-center">
|
||||
<q-avatar size="50px">
|
||||
<q-img src="@/assets/krungthai.png"/>
|
||||
</q-avatar>
|
||||
<div class="column q-pl-md">
|
||||
<strong>ธนาคารกรุงไทย</strong>
|
||||
สำนักงานทรัพยากรบุคคล
|
||||
<div>387-3-94793-0</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-separator class="q-my-md"/>
|
||||
<div class="q-pb-sm">
|
||||
<span class="text-weight-medium">ชื่อบัญชี :</span>
|
||||
<span class="text-blue q-pl-sm">สำนักงานทรัพยากรบุคคล</span>
|
||||
</div>
|
||||
<div class="q-pb-sm">
|
||||
<span class="text-weight-medium">ธนาคารกรุงไทย :</span>
|
||||
<span class="text-blue q-pl-sm"> 387-3-94793-0</span>
|
||||
</div>
|
||||
<div class="q-pb-sm">
|
||||
<span class="text-weight-medium">รหัสใบสั่งซื้อ :</span>
|
||||
<span class="text-blue q-pl-sm">12837495985900</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-weight-medium">ยอดสุทธิ (บาท) :</span>
|
||||
<span class="text-blue q-pl-sm text-bold">200.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-grey-6 q-mt-xl">
|
||||
** ถ้าต้องการเเก้ไขหลักฐานการโอนเงิน กรุณาอัปโหลดซ้ำ
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class=" col-xs-12 col-sm-5">
|
||||
<label for="file-upload" class="col-12 row"><!-- :src="img" -->
|
||||
<q-img src="@/assets/ex_slip.jpeg" fit="contain" style="min-height: 300px; max-height: 300px;" class="col-12 bg-white">
|
||||
<div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
|
||||
</q-img>
|
||||
</label>
|
||||
<input id="file-upload" type="file" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-slide-transition>
|
||||
</q-list>
|
||||
|
||||
<q-list bordered class="col-12 rounded-borders">
|
||||
<q-item tag="label" v-ripple class="q-pa-md">
|
||||
<q-item-section avatar>
|
||||
<q-icon name="mdi-cash" color="positive" size="30px" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label class="text-weight-medium text-subtitle1">โอนเงินผ่านทางเครื่อง ATM / เคาน์เตอร์ธนาคาร</q-item-label>
|
||||
<q-item-label caption class="gt-xs">อนุมัติทันทีหลังชำระ</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section avatar class="gt-xs">
|
||||
<q-avatar size="32px">
|
||||
<q-img src="@/assets/krungthai.png" class="col-12"/>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-radio v-model="pay" val="orange" color="blue" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-separator v-show="pay == 'orange'" />
|
||||
<q-slide-transition :duration="100">
|
||||
<div v-show="pay == 'orange'" class="q-pa-md bg-grey-1">
|
||||
<q-card bordered class="q-pa-md">
|
||||
<div class="q-pb-sm">
|
||||
<span class="text-weight-medium">รหัสใบสั่งซื้อ :</span>
|
||||
<span class="text-blue q-pl-sm">12837495985900</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-weight-medium">ยอดสุทธิ (บาท) :</span>
|
||||
<span class="text-blue q-pl-sm text-bold">200.00</span>
|
||||
</div>
|
||||
<q-btn
|
||||
color="blue"
|
||||
icon="print"
|
||||
class="q-px-md q-mt-md"
|
||||
outline
|
||||
dense
|
||||
label="พิมพ์ใบแจ้งการชำระเงิน"
|
||||
/>
|
||||
</q-card>
|
||||
<div class="q-pt-md q-pb-xs text-bold">ธนาคารกรุงไทย</div>
|
||||
<div class="q-pb-md">สอดบัตร ATM กดรหัสและเลือกรายการ</div>
|
||||
<ul class="q-gutter-y-sm">
|
||||
<li>ขั้นที่ 1 บริการอื่นๆ</li>
|
||||
<li>ขั้นที่ 2 ชำระค่าบริการ</li>
|
||||
<li>ขั้นที่ 3 ระบุรหัสบริษัท</li>
|
||||
<li>ขั้นที่ 4 เลือกบัญชีผู้ชำระเงิน คือ บัญชีของตัวท่านว่าเป็นบัญชีออมทรัพย์ หรือ กระแสรายวัน</li>
|
||||
<li>ขั้นที่ 5 ใส่รหัสบริษัทฯ คือ <span class="text-blue text-bold">2111</span> และ ใส่ Ref No.1 ขั้นด้วยเครื่องหมายจุด ( . ) แล้วตามด้วย Ref No.2 (ดูใน "ใบแจ้งการชำระเงิน")</li>
|
||||
<li>ยกตัวอย่างเช่น ถ้า Ref No.1 คือ 012345 และ Ref No.2 คือ 308833ต้องใส่ เป็น 012345.308833</li>
|
||||
<li>ขั้นที่ 6 ใส่จำนวนเงินที่ชำระรวมหน่วยสตางค์</li>
|
||||
<li>ขั้นที่ 7 ตรวจสอบรายการ</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</q-slide-transition>
|
||||
</q-list>
|
||||
</div>
|
||||
<!-- <q-card flat class="q-pa-md text-left row q-mb-md" :class="getClass(status)">
|
||||
<div class="text-bold col-12" :class="getFontColor(status)">
|
||||
{{ message(status) }}
|
||||
</div>
|
||||
<div class="col-12" v-if="status === 'rejectPayment'" :class="getFontColor(status)">
|
||||
<li>{{ rejectMessage }}</li>
|
||||
</div>
|
||||
</q-card>
|
||||
<q-file
|
||||
</q-card> -->
|
||||
|
||||
<!-- <q-file
|
||||
borderless
|
||||
v-model="fileData"
|
||||
stack-label
|
||||
|
|
@ -20,10 +151,10 @@
|
|||
<q-img :src="img" fit="contain" style="max-height: 300px" class="col-12">
|
||||
<div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
|
||||
</q-img>
|
||||
</q-file>
|
||||
</q-file> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="q-pa-md text-center col-12" v-if="status == 'payment' || status == 'rejectPayment'">
|
||||
<!-- <div class="q-pa-md text-center col-12" v-if="status == 'payment' || status == 'rejectPayment'">
|
||||
<q-btn
|
||||
|
||||
color="primary"
|
||||
|
|
@ -33,7 +164,14 @@
|
|||
</div>
|
||||
<div class="text-black text-center q-pb-lg q-pt-sm col-12 text-deep-orange">
|
||||
<q-icon name="mdi-alert" size="18px" color="deep-orange" class="q-mr-sm" />ถ้าต้องการเเก้ไขหลักฐานการโอนเงินกรุณาอัปโหลดซ้ำ
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="row col-12 justify-center">
|
||||
<q-btn
|
||||
:color="pay === null ? 'grey': 'primary'"
|
||||
:disable="pay === null"
|
||||
style="width: 200px;"
|
||||
label="แจ้งการชำระเงิน"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -60,9 +198,10 @@ const $q = useQuasar()
|
|||
const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
|
||||
const { success } = mixin
|
||||
const rejectMessage = ref<string>('กรุณาจ่ายเงินให้ครบตามจำนวน')
|
||||
const img = ref<string>('https://cdn-icons-png.flaticon.com/512/2496/2496846.png')
|
||||
const img = ref<string>('@/assets/krungthai.png')
|
||||
const fileData = ref<any>()
|
||||
const loader = ref<boolean>(false)
|
||||
const pay = ref(null)
|
||||
const route = useRoute()
|
||||
const examId = ref<string>(route.params.id.toString())
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue