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 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-pl-sm"
                >ชำระเงินค่าสมัครสอบผ่านสำนัก/หน่วยงาน</q-item-label
              >
            </q-item-section>
          </q-item>
          <q-card-actions v-if="status === 'rejectPayment'" class="q-pa-md text-left row bg-red-2">
            <div class="col-12 text-red-12">
              <li>{{ rejectMessage }}</li>
            </div>
          </q-card-actions>
          <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">
                        <div>
                          <span class="text-weight-medium">ยอดสุทธิ (บาท) :</span>
                          <span class="text-blue q-pl-sm text-bold">{{ fee }}</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">
                    <q-img
                      src="@/assets/ex_slip.jpeg"
                      fit="contain"
                      style="min-height: 300px; max-height: 300px"
                      class="col-12 bg-white"
                      v-if="img == ''"
                    >
                      <div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
                    </q-img>
                    <q-img
                      :src="img"
                      fit="contain"
                      style="min-height: 300px; max-height: 300px"
                      class="col-12 bg-white"
                      v-else
                    >
                      <div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
                    </q-img>
                  </label>
                  <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 class="q-pa-md">
            <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-pl-sm"
                >ชำระเงินค่าสมัครสอบผ่านธนาคารกรุงไทย</q-item-label
              >
            </q-item-section>
          </q-item>
          <q-card-actions v-if="status === 'rejectPayment'" class="q-pa-md text-left row bg-red-2">
            <div class="col-12 text-red-12">
              <li>{{ rejectMessage }}</li>
            </div>
          </q-card-actions>
          <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">{{ fee }}</span>
                    </div>
                    <q-btn
                      color="blue"
                      icon="print"
                      class="q-px-md q-mt-md"
                      outline
                      dense
                      label="พิมพ์ใบแจ้งการชำระเงิน"
                      @click="downloadBillPayment"
                    />
                  </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"
                      v-if="img == ''"
                    >
                      <div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
                    </q-img>
                    <q-img
                      :src="img"
                      fit="contain"
                      style="min-height: 300px; max-height: 300px"
                      class="col-12 bg-white"
                      v-else
                    >
                      <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
      icon="mdi-check"
      color="primary"
      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, modalError } = mixin
const rejectMessage = ref<string>('')
const img = ref<string>('')
const fileData = ref<any>()
const loader = ref<boolean>(false)
const route = useRoute()
const examId = ref<string>(route.params.id.toString())
const positionId = ref<string>(route.params.positionId.toString())
const bank = ref<any>([])
const fee = ref<number>()
const filePayment = ref<File[]>([])
const fileDataUpload = ref<File>()

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

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.bankExam
      fee.value = data.fee
    })
    .catch(() => {})
    .finally(async () => {
      loader.value = false
    })
}

const fetchData = async () => {
  loader.value = true
  await http
    .get(config.API.candidatePayment(examId.value, positionId.value))
    .then((res) => {
      const data = res.data.result
      img.value = data.paymentImg
      rejectMessage.value = data.rejectDetail
    })
    .catch(() => {})
    .finally(async () => {
      loader.value = false
    })
}

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 downloadBillPayment = () => {
  window.open(
    'https://s3.frappet.com/bma-recruit/%E0%B9%83%E0%B8%9A%E0%B8%88%E0%B9%88%E0%B8%B2%E0%B8%A2%E0%B9%80%E0%B8%87%E0%B8%B4%E0%B8%99.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=XYM5279XMEH7PWU0HX7W%2F20230409%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20230409T141409Z&X-Amz-Expires=604800&X-Amz-Security-Token=eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJhY2Nlc3NLZXkiOiJYWU01Mjc5WE1FSDdQV1UwSFg3VyIsImV4cCI6MzYwMDAwMDAwMDAwMCwicG9saWN5IjoiY29uc29sZUFkbWluIn0.-zazJEG9fdsNDqP9x20--Id8fZz02SbAJPifcjIWrXaudwfSym0zfB3iCVaFKy5fHH9u1NLcq6RIjrloozO8JA&X-Amz-SignedHeaders=host&versionId=null&X-Amz-Signature=11c2d786029e2153cd89154654b84d12f5d0eae2d9b0e6d8e3189c4097e3eb15'
  )
}

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>