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

<template>
  <div>
    <q-card class="my-card q-mb-sm" bordered>
      <q-card-actions class="q-pa-md text-left row justify-center" :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-space /> -->
      </q-card-actions>
    </q-card>
  </div>
  <div class="d-flex justify-content-center align-items-center row col-12">
    <!-- <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 col-6"> -->
    <!-- <q-img :src="img" fit="contain" style="max-height: 300px" class="col-6">
      <div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
    </q-img> -->
    <q-file
      borderless
      v-model="fileData"
      stack-label
      @update:model-value="uploadImg"
      class="col-12"
    >
      <!-- <q-img src="@/assets/avatar_user.jpg" class="col-12">
              <div class="overlay" v-if="edit">
                <q-icon name="mdi-camera" />
                <br />อัปเดต
              </div>
            </q-img> -->
      <q-img :src="img" fit="contain" style="max-height: 300px" class="col-12">
        <div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
      </q-img>
    </q-file>
    <!-- <q-uploader
      ref="uploader"
      type="file"
      :factory="uploadImg"
      class="col-6"
      label="กรุณาอัปโหลดหลักฐานการชำระเงิน"
      flat
      color="blue"
      bordered
    /> -->
    <!-- </div> -->
    <div class="q-pa-md text-center col-12">
      <q-btn color="primary" @click="setStatus('processing')" label="ส่งหลักฐานการชำระเงิน" />
    </div>
    <div class="text-black text-center q-pb-lg col-12">
      ***ถ้าต้องการเเก้ไขหลักฐานการโอนเงินกรุณาอัพโหลดซ้ำ***
    </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>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

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

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

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>