handle delete card

src/views/base/home/index.vue

@@ -23,7 +23,7 @@
                     style="touch-action: none" />
         </div>-->
         <!--        <div class="bg-gradient-to-l mt-3 p-1   shadow-lg  from-primary rounded-lg p-px  to-transparent ">-->
-        <div class="mt-3 p-1 shadow-lg from-primary rounded-lg p-px to-transparent">
+        <div class="mt-5 p-1 shadow-lg from-primary rounded-lg p-px to-transparent">
           <div class="p-2 py-3 rounded-lg bg-tertiary">
             <div class="flex justify-between ">
 <!--              <div
@@ -221,7 +221,7 @@
         </div>-->
         <div
             v-if="config.config.name === 'garoosi' && banners?.length > 0"
-            class="w-full relative mt-5 flex flex-col justify-center home_appear_fade_in overflow-hidden rounded-lg"
+            class="w-full relative mt-2 flex flex-col justify-center home_appear_fade_in overflow-hidden rounded-lg"
         >
           <div class="w-full aspect-[2.8/1] min-h-[10rem] max-h-[14rem]">
             <swiper

src/views/base/wallet/components/UISlider/CardItem.vue

@@ -5,7 +5,7 @@
     @click="localValue = props.selfIndex"
   >
     <div class="p-3 flex flex-col items-center">
-      <div class="flex justify-between w-full">
+      <div class="flex cursor-pointer justify-between w-full">
         <div class="text-white font-bold text-lg w-full">{{ props.title }}</div>
         <div
           class="text-white px-1 flex justify-center items-center rounded-lg w-6rem"
@@ -14,12 +14,33 @@
           {{ active ? 'فعال' : 'غیر فعال' }}
         </div>
         <div
-            @click="deleteCards"
+            @click.stop="showDeleteConfirm = true"
           class="text-white px-1 flex mr-1 justify-center items-center rounded-lg bg-red-600 w-7rem"
         >
           حذف کارت
         </div>
       </div>
+
+    <DialogVant v-model:show="showDeleteConfirm" teleport="body" :closeOnClickOverlay="false" :timeOut="-1">
+      <template v-slot:title>
+        <div class="flex flex-col items-center">
+          <div class="p-5 text-sm">
+            آیا از حذف کارت مطمئن هستید؟
+          </div>
+        </div>
+      </template>
+
+      <template v-slot:button>
+        <div class="text-center cursor-pointer text-red flex items-center justify-center" @click="confirmDeleteCard">
+          <a-spin :spinning="deleteLoading" size="small">
+            تایید
+          </a-spin>
+        </div>
+        <div class="text-center cursor-pointer" @click="showDeleteConfirm = false">
+          انصراف
+        </div>
+      </template>
+    </DialogVant>
       <div
         v-if="props.cardNumber"
         class="mt-[1.5vh] text-white w-full text-center text-xl font-bold"
@@ -35,9 +56,13 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useCardNumber, useShabaNumber } from '@/utils/useCardNumber'
-import {deleteCard} from "@/api/wallet";
+import { deleteCard } from '@/api/wallet'
+import DialogVant from '@/components/DialogVant.vue'
+
+const showDeleteConfirm = ref(false)
+const deleteLoading = ref(false)
 
 interface Prop {
   sliderIndex: number
@@ -90,12 +115,17 @@ function findPositionStyle(pos: number) {
   return debug
 }
 
-async function deleteCards() {
+async function confirmDeleteCard() {
+  if (props.id == null) return
+  deleteLoading.value = true
   try {
-    await deleteCard(props?.id)
+    await deleteCard(props.id)
+    showDeleteConfirm.value = false
     emits('cardDeleted')
   } catch (e) {
     console.error('Error deleting card:', e)
+  } finally {
+    deleteLoading.value = false
   }
 }