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

<template>
  <q-card class="my-card" style="max-width: 1000px; width: 100%" bordered>
    <q-card-actions class="q-pa-md text-center" :class="getClass(status)">
      <div class="text-black text-bold">{{ message(status) }}</div>

      <q-space />
    </q-card-actions>
  </q-card>

  <div class="d-flex justify-content-center align-items-center min-vh-100">
    <div>
      <div class="text-center q-pb-lg">
        <!-- <q-badge
          :outline="badgeOutline"
          :color="badgeColor"
          :label="badgeLabel"
          class="q-pa-nond text-center"
          style="font-size: 16px"
        /> -->
      </div>

      <div class="row q-pa-nond text-center">
        <q-img :src="img" :ratio="1" style="max-width: 300px; height: 300px" />
        <q-uploader
          ref="uploader"
          type="file"
          :factory="uploadImg"
          class="q-mx-auto col-6"
          label="กรุณาอัปโหลดหลักฐานการชำระเงิน"
          flat
          color="blue"
          bordered
        />
      </div>
      <div class="q-pa-md text-center">
        <q-btn color="primary" @click="setStatus('processing')" label="ส่งหลักฐานการชำระเงิน" />
      </div>
      <div class="text-black text-center q-pb-lg">
        ***ถ้าต้องการเเก้ไขหลักฐานการโอนเงินกรุณาอัพโหลดซ้ำ***
      </div>
    </div>
    <q-btn color="negative" @click="setStatus('rejected')">Rejected</q-btn>
    <q-btn color="positive" @click="setStatus('success')">Success</q-btn>
  </div>
</template>

<script setup lang="ts">
import { file } from '@babel/types'
import { log } from 'console'
import { defineComponent, ref, Ref } from 'vue'
import { onMounted } from 'vue'
import { ComponentRef } from '@vue/runtime-core'
const status = ref<string>('')

const img = ref<string>('https://cdn-icons-png.flaticon.com/512/2496/2496846.png')

const uploadImg = (file: any) => {
  //   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 slide = ref(1)
const setStatus = (val: string) => {
  status.value = val
}

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

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