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">
            <q-item tag="label" v-ripple class="q-pa-md">
              <q-item-section avatar>
                <q-icon name="mdi-cellphone-settings" color="positive" size="30px" />
              </q-item-section>
              <q-item-section>
                <q-item-label class="text-weight-medium text-subtitle1">โอนเงินผ่านมือถือ</q-item-label>
                <q-item-label caption class="gt-xs">อนุมัติหลังแจ้งการโอนภายใน 24 ชั่วโมง</q-item-label>
              </q-item-section>
              <q-item-section avatar class="gt-xs">
                <q-avatar size="32px">
                  <q-img src="@/assets/krungthai.png" class="col-12"/>
                </q-avatar>
              </q-item-section>
              <q-item-section side>
                <q-radio v-model="pay" val="teal" color="blue" />
              </q-item-section>
            </q-item> 
            <q-separator v-show="pay == 'teal'" />
            <q-slide-transition :duration="100" class="">
              <div v-show="pay == 'teal'" 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 row no-wrap items-center">
                          <q-avatar size="50px">
                            <q-img src="@/assets/krungthai.png"/>
                          </q-avatar>
                          <div class="column q-pl-md">
                            <strong>ธนาคารกรุงไทย</strong>
                            สำนักงานทรัพยากรบุคคล 
                            <div>387-3-94793-0</div>
                          </div>
                        </div>
                        <div class="col-12">
                          <q-separator class="q-my-md"/>
                          <div class="q-pb-sm">
                            <span class="text-weight-medium">ชื่อบัญชี :</span>
                            <span class="text-blue q-pl-sm">สำนักงานทรัพยากรบุคคล</span>
                          </div>
                          <div class="q-pb-sm">
                            <span class="text-weight-medium">ธนาคารกรุงไทย :</span>
                            <span class="text-blue q-pl-sm"> 387-3-94793-0</span>
                          </div>
                          <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">200.00</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"><!-- :src="img" -->
                        <q-img src="@/assets/ex_slip.jpeg" fit="contain" style="min-height: 300px; max-height: 300px;" class="col-12 bg-white">
                        <div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
                        </q-img> 
                    </label>
                    <input id="file-upload" type="file" />
                  </div>
                </div>
              </div>
            </q-slide-transition>
          </q-list>

          <q-list bordered class="col-12 rounded-borders">
            <q-item tag="label" v-ripple 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">โอนเงินผ่านทางเครื่อง ATM / เคาน์เตอร์ธนาคาร</q-item-label>
                <q-item-label caption class="gt-xs">อนุมัติทันทีหลังชำระ</q-item-label>
              </q-item-section>
              <q-item-section avatar class="gt-xs">
                <q-avatar size="32px">
                  <q-img src="@/assets/krungthai.png" class="col-12"/>
                </q-avatar>
              </q-item-section>
              <q-item-section side>
                <q-radio v-model="pay" val="orange" color="blue" />
              </q-item-section>
            </q-item>
            <q-separator v-show="pay == 'orange'" />
            <q-slide-transition :duration="100">
              <div v-show="pay == 'orange'" class="q-pa-md bg-grey-1">
                <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">200.00</span>
                  </div>
                  <q-btn
                      color="blue"
                      icon="print"
                      class="q-px-md q-mt-md"
                      outline
                      dense
                      label="พิมพ์ใบแจ้งการชำระเงิน"
                    />
                </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>
            </q-slide-transition>
          </q-list>
        </div>
        <!-- <q-card flat class="q-pa-md text-left row q-mb-md" :class="getClass(status)">
          <div class="text-bold col-12" :class="getFontColor(status)">
            {{ message(status) }}
          </div>
          <div class="col-12" v-if="status === 'rejectPayment'" :class="getFontColor(status)">
            <li>{{ rejectMessage }}</li>
          </div>
        </q-card> -->

        <!-- <q-file
          borderless
          v-model="fileData"
          stack-label
          @update:model-value="uploadImg"
          :disable="status != 'payment' && status != 'rejectPayment'"
        >
          <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" v-if="status == 'payment' || status == 'rejectPayment'">
      <q-btn
        
        color="primary"
        @click="clickPayment"
        label="ส่งหลักฐานการชำระเงิน"
      />
    </div>
    <div class="text-black text-center q-pb-lg q-pt-sm col-12 text-deep-orange">
      <q-icon name="mdi-alert" size="18px" color="deep-orange" class="q-mr-sm" />ถ้าต้องการเเก้ไขหลักฐานการโอนเงินกรุณาอัปโหลดซ้ำ
    </div> -->
    <div class="row col-12 justify-center">
      <q-btn
          :color="pay === null ? 'grey': 'primary'"
          :disable="pay === null"
          style="width: 200px;"
          label="แจ้งการชำระเงิน"
        />
  </div>
</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'
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 } = mixin
const rejectMessage = ref<string>('กรุณาจ่ายเงินให้ครบตามจำนวน')
const img = ref<string>('@/assets/krungthai.png')
const fileData = ref<any>()
const loader = ref<boolean>(false)
const pay = ref(null)
const route = useRoute()
const examId = ref<string>(route.params.id.toString())

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 clickPayment = async () => {
  loader.value = true
  await http
    .get(config.API.candidatePayment(examId.value))
    .then(() => {
      success($q, 'ส่งหลักฐานชำระเงินสำเร็จ')
    })
    .catch(() => {})
    .finally(async () => {
      loader.value = false
      props.fetchStep()
    })
}

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 '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 'done':
      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 'done':
      return 'text-green'
    default:
      return 'text-blue'
  }
}
</script>

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