hrms-recruit/src/modules/01_exam/components/ExamPayment.vue

<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" v-if="bank.length > 0">
          <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"
                >ชำระเงินค่าสมัครสอบผ่านสำนัก/หน่วยงาน</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 />
          <q-slide-transition :duration="100" class="">
            <div 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" v-for="item in bank" :key="item.id">
                        <div class="row q-pl-md col-12">
                          <div class="q-pb-xs col-4">
                            <span class="text-weight-medium">ธนาคาร :</span>
                            <span class="text-blue q-pl-xs">{{ item.bankName }}</span>
                          </div>
                          <div class="q-pb-xs col-4">
                            <span class="text-weight-medium">ชื่อบัญชี :</span>
                            <span class="text-blue q-pl-xs">{{ item.accountName }}</span>
                          </div>
                          <div class="q-pb-xs col-4">
                            <span class="text-weight-medium">เลขบัญชี :</span>
                            <span class="text-blue q-pl-xs"> {{ item.accountNumber }}</span>
                          </div>
                        </div>
                        <q-separator class="q-my-md" />
                      </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"
                    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>
          </q-slide-transition>
        </q-list>

        <q-list bordered class="col-12 rounded-borders" v-else>
          <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-avatar size="32px">
              <q-img src="@/assets/krungthai.png" class="col-12" />
            </q-avatar>
            <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="orange" color="blue" />
            </q-item-section> -->
          </q-item>
          <q-separator />
          <q-slide-transition :duration="100">
            <div 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="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 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>
              </div>
            </div>
          </q-slide-transition>
        </q-list>
      </div>
    </div>
  </div>
  <div class="row col-12 justify-center">
    <q-btn
      style="width: 200px"
      label="แจ้งการชำระเงิน"
      @click="clickPayment"
      v-if="status == 'payment' || status == 'rejectPayment'"
    />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useQuasar } from 'quasar'
import { useCounterMixin } from '@/stores/mixin'
import http from '@/plugins/http'
import config from '@/app.config'
import { useRoute } from 'vue-router'

const props = defineProps({
  fetchStep: {
    type: Function,
    default: () => console.log('not function')
  },
  status: {
    type: String,
    required: true
  }
})

const $q = useQuasar()
const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
const { success } = mixin
const rejectMessage = ref<string>('กรุณาจ่ายเงินให้ครบตามจำนวน')
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())
const positionId = ref<string>(route.params.positionId.toString())
const bank = ref<any>([])
const filePayment = ref<File[]>([])
const fileDataUpload = ref<File>()

onMounted(async () => {
  await fetchPaymentExam()
})

const uploadImg = (file: any) => {
  fileData.value = null
  //   img.value =
  //     'https://s359.kapook.com/r/600/auto/pagebuilder/ba154685-db18-4ac7-b318-a4a2b15b9d4c.jpg'
  img.value =
    'https://www.bangkokbank.com/-/media/feature/page-content/bbl-corporate/image-carousel-slides/digital-banking/bualuang-mbanking/how-to-use/payment/others/7_en.png'
}

const fetchPaymentExam = async () => {
  loader.value = true
  await http
    .get(config.API.periodExamPayment(examId.value))
    .then((res) => {
      const data = res.data.result
      bank.value = data
    })
    .catch(() => {})
    .finally(async () => {
      loader.value = false
      props.fetchStep()
    })
}

const clickPayment = async () => {
  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) => {
  switch (val) {
    case 'checkPayment':
      return 'bg-yellow-3'
    case 'rejectPayment':
      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:
      return 'bg-light-blue-1'
  }
}
const message = (val: string) => {
  switch (val) {
    case 'checkRegister':
      return 'รอการตรวจสอบข้อมูลสมัคร'
    case 'checkPayment':
      return 'รอการตรวจสอบหลักฐานการชำระเงิน'
    case 'rejectPayment':
      return 'หลักฐานการชำระเงินผิดพลาด'
    case 'checkSeat':
      return 'ตรวจสอบเเล้ว'
    case 'checkPoint':
      return 'ตรวจสอบเเล้ว'
    case 'done':
      return 'ตรวจสอบเเล้ว'
    case 'waiver':
      return 'สละสิทธิ์สอบ'
    default:
      return 'รออัปโหลดหลักฐานชำระเงิน'
  }
}
const getFontColor = (val: string) => {
  switch (val) {
    case 'checkRegister':
      return 'text-blue'
    case 'checkPayment':
      return 'text-orange'
    case 'rejectPayment':
      return 'text-red-12'
    case 'checkSeat':
      return 'text-green'
    case 'checkPoint':
      return 'text-green'
    case 'done':
      return 'text-green'
    default:
      return 'text-blue'
  }
}
</script>

<style lang="scss" scoped>
.q-img {
  margin: 0 auto;
}
</style>