fix logo, delete card

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

@@ -8,11 +8,17 @@
       <div class="flex justify-between w-full">
         <div class="text-white font-bold text-lg w-full">{{ props.title }}</div>
         <div
-          class="text-white px-2 flex justify-center items-center rounded-lg w-5rem"
+          class="text-white px-1 flex justify-center items-center rounded-lg w-6rem"
           :class="active ? 'bg-green-600' : 'bg-red-600'"
         >
           {{ active ? 'فعال' : 'غیر فعال' }}
         </div>
+        <div
+            @click="deleteCards"
+          class="text-white px-1 flex mr-1 justify-center items-center rounded-lg bg-red-600 w-7rem"
+        >
+          حذف کارت
+        </div>
       </div>
       <div
         v-if="props.cardNumber"
@@ -31,6 +37,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useCardNumber, useShabaNumber } from '@/utils/useCardNumber'
+import {deleteCard} from "@/api/wallet";
 
 interface Prop {
   sliderIndex: number
@@ -40,6 +47,7 @@ interface Prop {
   shaba?: string
   color?: string
   active?: boolean
+  id?: number
 }
 
 const localValue = computed({
@@ -53,7 +61,7 @@ const localValue = computed({
 })
 
 const props = defineProps<Prop>()
-const emits = defineEmits(['update:sliderIndex'])
+const emits = defineEmits(['update:sliderIndex', 'cardDeleted'])
 
 function findPositionStyle(pos: number) {
   // console.log(localValue.value)
@@ -82,6 +90,15 @@ function findPositionStyle(pos: number) {
   return debug
 }
 
+async function deleteCards() {
+  try {
+    await deleteCard(props?.id)
+    emits('cardDeleted')
+  } catch (e) {
+    console.error('Error deleting card:', e)
+  }
+}
+
 /*
 function findPositionStyle(pos: number) {
   // console.log(localValue.value)
@@ -142,6 +159,8 @@ function topDetail(isAfterIndex: boolean, pos: number) {
 function checkTopLimit(val: number) {
   return val > 100 || val < 0
 }
+
+
 </script>
 
 <style lang="sass" scoped>

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

@@ -4,7 +4,8 @@
     <div ref="el" class="w-full flex flex-col relative h-full test">
       <CardItem v-for="(item,i) in props?.items" :key="i" v-model:sliderIndex="index" :card-number="item?.cart_number"
                 :color="colors[i%3]"
-                :self-index="i" :shaba="item?.shaba_number" :title="item?.bank_name" :active="item.sts === 2"/>
+                :self-index="i" :shaba="item?.shaba_number" :title="item?.bank_name" :active="item.sts === 2" :id="item?.id"
+                @cardDeleted="handleCardDeleted"/>
       <div class="absolute bottom-15vh right-0 left-0 z-100 flex justify-center items-center opacity-70">
         <div class="flex gap-1 bg-gray-500 px-2 py-1 rounded-lg">
           <Transition name="slide-up" mode="out-in" v-for="i in items.length" :key="i">
@@ -35,7 +36,11 @@ interface Prop {
 }
 
 const props = defineProps<Prop>()
-const emits = defineEmits(['update:id'])
+const emits = defineEmits(['update:id', 'cardDeleted'])
+
+function handleCardDeleted() {
+  emits('cardDeleted')
+}
 
 const localValue = computed({
   get() {

src/views/base/wallet/components/mySlider/MySlider.vue

@@ -19,16 +19,15 @@
             <div class="card bg-pink" :style="findPositionStyle(9)" @click="index = 9"></div>-->
       <CardItem v-for="(item,i) in props?.items" :key="i" v-model:sliderIndex="index"
                 :color="colors[i%3]"
-                :self-index="i"  :img="item"/>
+                :self-index="i"
+                :img="item"
+      />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref, watch } from 'vue'
-// import {usePointerSwipe} from '@vueuse/core'
-// import type {UseSwipeDirection} from '@vueuse/core'
-// import type { UseSwipeDirection } from '@vueuse/core'
 import { useSwipe } from '@vueuse/core'
 import CardItem from '@/views/base/wallet/components/CardItem.vue'
 import type { Card } from '@/models/wallet'