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

<template>
  <div class="col-12">
    <div class="row justify-center q-pa-md">
      <div class="col-4">
        <q-card-actions class="q-pa-md text-left row" :class="getClass(status)">
          <div class="text-bold col-12" :class="getFontColor(status)">
            {{ message(status) }}
          </div>
          <div class="col-12" v-if="status === 'rejected'" :class="getFontColor(status)">
            <li>{{ rejectMessage }}</li>
          </div>
        </q-card-actions>
        <q-file borderless v-model="fileData" stack-label @update:model-value="uploadImg">
          <q-img :src="img" fit="contain" style="max-height: 300px" class="col-12">
            <div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
          </q-img>
        </q-file>
      </div>
    </div>
    <div class="q-pa-md text-center col-12">
      <q-btn color="primary" @click="clickPayment" label="ส่งหลักฐานการชำระเงิน" />
    </div>
    <div class="text-black text-center q-pb-lg col-12">
      ***ถ้าต้องการเเก้ไขหลักฐานการโอนเงินกรุณาอัปโหลดซ้ำ***
    </div>
  </div>
  <q-btn color="negative" @click="setStatus('rejected')">Re</q-btn>
  <q-btn color="positive" @click="setStatus('success')">Su</q-btn>
  <q-btn color="positive" @click="setStatus('next')">Ne</q-btn>
</template>

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

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

const $q = useQuasar()
const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
const { success } = mixin
const status = ref<string>('')
const rejectMessage = ref<string>('กรุณาจ่ายเงินให้ครบตามจำนวน')
const img = ref<string>('https://cdn-icons-png.flaticon.com/512/2496/2496846.png')
const fileData = ref<any>()
const loader = ref<boolean>(false)
const candidateId = ref<string>('2223ba53-2fb2-470b-8dc1-27e5471b0331')

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 setStatus = async (val: string) => {
  status.value = val
  if (val == 'next') props.fetchStep()
}

const clickPayment = async () => {
  loader.value = true
  await http
    .get(config.API.candidatePayment(candidateId.value))
    .then(() => {
      success($q, 'ส่งหลักฐานชำระเงินสำเร็จ')
    })
    .catch(() => {})
    .finally(async () => {
      loader.value = false
      props.fetchStep()
    })
  status.value = 'processing'
}

const getClass = (val: string) => {
  switch (val) {
    case 'processing':
      return 'bg-yellow-3'
    case 'rejected':
      return 'bg-red-2'
    case 'success':
      return 'bg-light-green-3'
    default:
      return 'bg-light-blue-1'
  }
}
const message = (val: string) => {
  switch (val) {
    case 'processing':
      return 'รอการตรวจสอบ'
    case 'rejected':
      return 'หลักฐานการชำระเงินผิดพลาด'
    case 'success':
      return 'ตรวจสอบเเล้ว'
    default:
      return 'รออัปโหลดหลักฐานชำระเงิน'
  }
}
const getFontColor = (val: string) => {
  switch (val) {
    case 'processing':
      return 'text-orange'
    case 'rejected':
      return 'text-red-12'
    case 'success':
      return 'text-green'
    default:
      return 'text-blue'
  }
}
</script>

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