Update ExamPayment.vue

เเก้img ให้โชวหลายหน้า เเก้ไขปุ่มเเสดงสถานะ

src/modules/01_exam/components/ExamPayment.vue

@@ -5,18 +5,50 @@
 
       <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"
+        />
+        <!-- <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" />
+          <q-carousel
+            animated
+            v-model="slide"
+            thumbnails
+            swipeable
+            infinite
+            class="my-carousel"
+            ref="carousel"
+          >
+            <q-carousel-slide :name="1" :img-src="img1" :ratio="1" />
+            <q-carousel-slide :name="2" :img-src="img2" :ratio="1" />
+
+            <template v-slot:control>
+              <!-- <q-carousel-control position="bottom-right" :offset="[18, 18]">
+                <q-icon
+                  name="remove"
+                  class="remove-icon"
+                  @click="
+                    () => {
+                      removeSlide(slide, $refs.carousel)
+                    }
+                  "
+                />
+              </q-carousel-control> -->
+            </template>
+          </q-carousel>
         </div>
         <q-uploader
           type="file"
@@ -28,28 +60,69 @@
           bordered
         />
       </div>
+      <div class="q-pa-md text-center">
+        <q-btn color="primary" @click="updateBadge" label="ส่งหลักฐานการชำระเงิน" />
+      </div>
       <div class="text-black text-center q-pb-lg">
         ***ถ้าต้องการเเก้ไขหลักฐานการโอนเงินกรุณาอัพโหลดซ้ำ***
       </div>
     </div>
+    <q-btn @click="updateBadgeReject" label="R" />
+    <q-btn @click="updateBadgeSuceed" label="S" />
   </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 =
+import { defineComponent, ref, Ref } from 'vue'
+import { onMounted } from 'vue'
+import { ComponentRef } from '@vue/runtime-core'
+
+const img1 = ref<string>('https://cdn-icons-png.flaticon.com/512/2496/2496846.png')
+const img2 = ref<string>('')
 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'
+  img1.value =
+    'https://s359.kapook.com/r/600/auto/pagebuilder/ba154685-db18-4ac7-b318-a4a2b15b9d4c.jpg'
+  img2.value = 'https://f.ptcdn.info/914/078/000/rkq4y4prgcMlHAUfb3h-o.jpg'
   console.log('string')
 }
+const badgeOutline = ref(true)
+const badgeColor = ref('blue')
+const badgeLabel = ref<string>('รออัปโหลดหลักฐานชำระเงิน')
+const slide = ref(1)
+function updateBadge(): void {
+  badgeColor.value = 'orange'
+  badgeLabel.value = 'รอการตรวจสอบ'
+}
+function updateBadgeReject(): void {
+  badgeColor.value = 'red'
+  badgeLabel.value = 'หลักฐานการชำระเงินผิดพลาด'
+}
+function updateBadgeSuceed(): void {
+  badgeColor.value = 'primary'
+  badgeLabel.value = 'ตรวจสอบเเล้ว'
+}
+function removeSlide(slide: Ref<number>, carouselRef: ComponentRef): void {
+  // Get the current index of the slide
+  const currentSlide = slide.value
+
+  // Remove the current slide from the array
+  carouselRef.value.removeSlide(currentSlide)
+
+  // If the current slide was the last one, go back one slide
+  if (slide.value === carouselRef.value.slides.length) {
+    slide.value -= 1
+  }
+}
 </script>
 
 <style lang="scss" scoped>
 .q-img {
   margin: 0 auto;
 }
+.my-carousel {
+  width: 100%; /* Set the width to 100% of the parent container */
+  height: 500px; /* Set the height to the desired value */
+}
 </style>