แสดงรูปหลักฐานชำระ
This commit is contained in:
Kittapath
parent
cce5f7adfd
commit
08b2802c61
4 changed files with 146 additions and 54 deletions
|
|
@ -86,11 +86,31 @@
|
|||
<div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
|
||||
</q-img>
|
||||
</label>
|
||||
<input
|
||||
<!-- <input
|
||||
id="file-upload"
|
||||
type="file"
|
||||
v-if="status == 'payment' || status == 'rejectPayment'"
|
||||
/>
|
||||
@update:model-value="
|
||||
(val) => {
|
||||
file = val[0]
|
||||
}
|
||||
"
|
||||
/> -->
|
||||
<q-file
|
||||
id="file-upload"
|
||||
v-model="filePayment"
|
||||
dense
|
||||
label="อัพโหลดหลักฐานชำระเงิน"
|
||||
outlined
|
||||
use-chips
|
||||
multiple
|
||||
class="q-pl-sm"
|
||||
v-if="status == 'payment' || status == 'rejectPayment'"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -106,7 +126,9 @@
|
|||
<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-label caption class="gt-xs"
|
||||
>อนุมัติหลังแจ้งการโอนภายใน 24 ชั่วโมง</q-item-label
|
||||
>
|
||||
</q-item-section>
|
||||
<!-- <q-item-section avatar class="gt-xs">
|
||||
<q-avatar size="32px">
|
||||
|
|
@ -120,46 +142,88 @@
|
|||
<q-separator />
|
||||
<q-slide-transition :duration="100">
|
||||
<div 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 class="row q-col-gutter-sm">
|
||||
<div class="col-xs-12 col-sm-7">
|
||||
<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>
|
||||
<div>
|
||||
<span class="text-weight-medium">ยอดสุทธิ (บาท) :</span>
|
||||
<span class="text-blue q-pl-sm text-bold">200.00</span>
|
||||
<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"
|
||||
v-if="status == 'payment' || status == 'rejectPayment'"
|
||||
@update:model-value="
|
||||
(val) => {
|
||||
file = val[0]
|
||||
}
|
||||
"
|
||||
/> -->
|
||||
<q-file
|
||||
id="file-upload"
|
||||
v-model="filePayment"
|
||||
dense
|
||||
label="อัพโหลดหลักฐานชำระเงิน"
|
||||
outlined
|
||||
use-chips
|
||||
multiple
|
||||
class="q-pl-sm"
|
||||
v-if="status == 'payment' || status == 'rejectPayment'"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" />
|
||||
</template>
|
||||
</q-file>
|
||||
</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>
|
||||
</div>
|
||||
</q-slide-transition>
|
||||
</q-list>
|
||||
|
|
@ -207,6 +271,8 @@ const route = useRoute()
|
|||
const examId = ref<string>(route.params.id.toString())
|
||||
const positionId = ref<string>(route.params.positionId.toString())
|
||||
const bank = ref<any>([])
|
||||
const filePayment = ref<File[]>([])
|
||||
const fileDataUpload = ref<File>()
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchPaymentExam()
|
||||
|
|
@ -236,17 +302,29 @@ const fetchPaymentExam = async () => {
|
|||
}
|
||||
|
||||
const clickPayment = async () => {
|
||||
loader.value = true
|
||||
await http
|
||||
.put(config.API.candidatePayment(examId.value, positionId.value))
|
||||
.then(() => {
|
||||
success($q, 'ส่งหลักฐานชำระเงินสำเร็จ')
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(async () => {
|
||||
loader.value = false
|
||||
props.fetchStep()
|
||||
if (filePayment.value.length > 0) {
|
||||
const blob = filePayment.value.slice(0, filePayment.value[0].size)
|
||||
const newFile = new File(blob, filePayment.value[0].name, {
|
||||
type: filePayment.value[0].type
|
||||
})
|
||||
fileDataUpload.value = newFile
|
||||
const formData = new FormData()
|
||||
formData.append('', fileDataUpload.value)
|
||||
loader.value = true
|
||||
await http
|
||||
.put(config.API.candidatePayment(examId.value, positionId.value), formData)
|
||||
.then(() => {
|
||||
success($q, 'ส่งหลักฐานชำระเงินสำเร็จ')
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(async () => {
|
||||
loader.value = false
|
||||
props.fetchStep()
|
||||
filePayment.value = []
|
||||
})
|
||||
} else {
|
||||
modalError($q, 'ไม่สามารถอัพโหลดไฟล์ได้', 'กรุณาเลือกไฟล์ที่ต้องการอัพโหลด')
|
||||
}
|
||||
}
|
||||
|
||||
const getClass = (val: string) => {
|
||||
|
|
@ -279,6 +357,8 @@ const message = (val: string) => {
|
|||
return 'ตรวจสอบเเล้ว'
|
||||
case 'done':
|
||||
return 'ตรวจสอบเเล้ว'
|
||||
case 'waiver':
|
||||
return 'สละสิทธิ์สอบ'
|
||||
default:
|
||||
return 'รออัปโหลดหลักฐานชำระเงิน'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@
|
|||
:name="3"
|
||||
title="ชำระค่าธรรมเนียม"
|
||||
:icon="stepRaw >= 3 ? (stepRaw == 3 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-receipt'"
|
||||
v-if="stepPayment"
|
||||
>
|
||||
<q-card bordered class="q-pa-lg">
|
||||
<ExamPayment :fetchStep="fetchStep" :status="status" />
|
||||
|
|
@ -80,6 +81,7 @@ const positionId = ref<string>(route.params.positionId.toString())
|
|||
const loader = ref<boolean>(false)
|
||||
const status = ref<string>('register')
|
||||
const modalConsend = ref<boolean>(false)
|
||||
const stepPayment = ref<boolean>(true)
|
||||
|
||||
onMounted(async () => {
|
||||
// stepRaw.value = 3
|
||||
|
|
@ -96,6 +98,14 @@ const candidateCheck = async () => {
|
|||
const data = res.data.result
|
||||
store.consend = data.consend
|
||||
const positionExam = data.positionExam
|
||||
stepPayment.value = data.bank
|
||||
// console.log('qwe')
|
||||
// console.log(positionId.value != '00000000-0000-0000-0000-000000000000')
|
||||
// console.log(positionId.value)
|
||||
// console.log(positionExam)
|
||||
// console.log(positionExam.id)
|
||||
// console.log(data.status != 'register')
|
||||
// console.log(data.status != 'rejectRegister')
|
||||
if (
|
||||
positionId.value != '00000000-0000-0000-0000-000000000000' &&
|
||||
positionExam.id != positionId.value &&
|
||||
|
|
@ -134,8 +144,8 @@ const fetchStep = async () => {
|
|||
stepRaw.value = 2
|
||||
step.value = 2
|
||||
} else if (data == 'checkRegister') {
|
||||
stepRaw.value = 3
|
||||
step.value = 3
|
||||
stepRaw.value = 2
|
||||
step.value = 2
|
||||
} else if (data == 'payment') {
|
||||
stepRaw.value = 3
|
||||
step.value = 3
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue