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

<template>
  <div class="d-flex justify-content-center align-items-center min-vh-100">
    <div>
      <!-- <div class="text-h5 text-center text-primary q-pb-lg">ชำระค่าธรรมเนียมการสอบ</div> -->

      <div class="text-center q-pb-lg">
        <q-badge
          outline
          color="primary"
          label="รออัปโหลดหลักฐานชำระเงิน"
          class="q-pa-nond text-center"
        />
        <!-- <q-badge outline color="red" label="อัปโหลดไม่สำเร็จ" class="q-pa-nond text-center" /> -->
        <!-- <q-badge outline color="orange" label="รอการตรวจสอบ" class="q-pa-nond text-center" /> -->
      </div>
      <!-- <q-badge outline color="secondary" label="ตรวจสอบเเล้ว" /> -->
      <div class="row q-pa-nond text-center">
        <div class="q-pa-md col-6">
          <q-img :src="img" :ratio="1" style="max-width: 300px; height: 300px" />
        </div>
        <q-uploader
          type="file"
          :factory="uploadImg"
          class="q-mx-auto col-6"
          label="กรุณาอัปโหลดหลักฐานการชำระเงิน"
          flat
          color="blue"
          bordered
        />
      </div>
      <div class="text-black text-center q-pb-lg">
        ***ถ้าต้องการเเก้ไขหลักฐานการโอนเงินกรุณาอัพโหลดซ้ำ***
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { file } from '@babel/types'
import { log } from 'console'
import { onMounted, ref } from 'vue'
const img = ref<string>('https://cdn-icons-png.flaticon.com/512/2496/2496846.png')
// const status =
const uploadImg = (file: any) => {
  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'
  console.log('string')
}
</script>

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