เพิ่ม Ui ตำแหน่งตอนสร้างรอบสมัคร
This commit is contained in:
Kittapath
parent
b42d797c78
commit
3dcdba77a6
14 changed files with 420 additions and 273 deletions
|
|
@ -1,138 +1,159 @@
|
|||
<template>
|
||||
<div class="col-12">
|
||||
<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 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>
|
||||
</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 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>
|
||||
</q-slide-transition>
|
||||
</q-list>
|
||||
</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)">
|
||||
<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>
|
||||
|
|
@ -141,7 +162,7 @@
|
|||
</div>
|
||||
</q-card> -->
|
||||
|
||||
<!-- <q-file
|
||||
<!-- <q-file
|
||||
borderless
|
||||
v-model="fileData"
|
||||
stack-label
|
||||
|
|
@ -152,9 +173,9 @@
|
|||
<div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
|
||||
</q-img>
|
||||
</q-file> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="q-pa-md text-center col-12" v-if="status == 'payment' || status == 'rejectPayment'">
|
||||
</div>
|
||||
<!-- <div class="q-pa-md text-center col-12" v-if="status == 'payment' || status == 'rejectPayment'">
|
||||
<q-btn
|
||||
|
||||
color="primary"
|
||||
|
|
@ -165,13 +186,13 @@
|
|||
<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 class="row col-12 justify-center">
|
||||
<q-btn
|
||||
:color="pay === null ? 'grey': 'primary'"
|
||||
:disable="pay === null"
|
||||
style="width: 200px;"
|
||||
label="แจ้งการชำระเงิน"
|
||||
/>
|
||||
<div class="row col-12 justify-center">
|
||||
<q-btn
|
||||
:color="pay === null ? 'grey' : 'primary'"
|
||||
:disable="pay === null"
|
||||
style="width: 200px"
|
||||
label="แจ้งการชำระเงิน"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -204,6 +225,7 @@ const loader = ref<boolean>(false)
|
|||
const pay = ref(null)
|
||||
const route = useRoute()
|
||||
const examId = ref<string>(route.params.id.toString())
|
||||
const positionId = ref<string>(route.params.positionId.toString())
|
||||
|
||||
const uploadImg = (file: any) => {
|
||||
fileData.value = null
|
||||
|
|
@ -216,7 +238,7 @@ const uploadImg = (file: any) => {
|
|||
const clickPayment = async () => {
|
||||
loader.value = true
|
||||
await http
|
||||
.get(config.API.candidatePayment(examId.value))
|
||||
.get(config.API.candidatePayment(examId.value, positionId.value))
|
||||
.then(() => {
|
||||
success($q, 'ส่งหลักฐานชำระเงินสำเร็จ')
|
||||
})
|
||||
|
|
@ -235,6 +257,8 @@ const getClass = (val: string) => {
|
|||
return 'bg-red-2'
|
||||
case 'checkSeat':
|
||||
return 'bg-light-green-3'
|
||||
case 'checkPoint':
|
||||
return 'bg-light-green-3'
|
||||
case 'done':
|
||||
return 'bg-light-green-3'
|
||||
default:
|
||||
|
|
@ -251,6 +275,8 @@ const message = (val: string) => {
|
|||
return 'หลักฐานการชำระเงินผิดพลาด'
|
||||
case 'checkSeat':
|
||||
return 'ตรวจสอบเเล้ว'
|
||||
case 'checkPoint':
|
||||
return 'ตรวจสอบเเล้ว'
|
||||
case 'done':
|
||||
return 'ตรวจสอบเเล้ว'
|
||||
default:
|
||||
|
|
@ -267,6 +293,8 @@ const getFontColor = (val: string) => {
|
|||
return 'text-red-12'
|
||||
case 'checkSeat':
|
||||
return 'text-green'
|
||||
case 'checkPoint':
|
||||
return 'text-green'
|
||||
case 'done':
|
||||
return 'text-green'
|
||||
default:
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue