From 0da158677b015072c2f611245735ce6f5398a99f Mon Sep 17 00:00:00 2001
From: safavimohadeseh78 <safavimohadeseh78@gmail.com>
Date: Sun, 19 Apr 2026 17:37:20 +0330
Subject: [PATCH] changes of add card

---
 src/api/wallet.ts               |   2 +-
 src/models/wallet.ts            |   8 +
 src/views/base/wallet/index.vue | 319 ++++++++++++++++----------------
 3 files changed, 169 insertions(+), 160 deletions(-)

diff --git a/src/api/wallet.ts b/src/api/wallet.ts
index 302117d..b857449 100644
--- a/src/api/wallet.ts
+++ b/src/api/wallet.ts
@@ -1,5 +1,5 @@
 import useAxios from '@/utils/useAxios'
-import type { Card, Wallet } from '@/models/wallet'
+import type { Card, Wallet, WithdrawConfirm } from '@/models/wallet'
 import type {Transaction} from '@/models/transaction'
 import type {Address} from "@/models/address";
 
diff --git a/src/models/wallet.ts b/src/models/wallet.ts
index eb0c144..25b5405 100644
--- a/src/models/wallet.ts
+++ b/src/models/wallet.ts
@@ -71,6 +71,14 @@ export interface Test {
     percentWallet: number
 }
 
+export interface WithdrawConfirm {
+    account_number?: string
+    bank_name?: string
+    birth_date?: string
+    cart_number?: string
+    shaba_number?: string
+}
+
 export interface Card {
     id?: number
     birth_date: number
diff --git a/src/views/base/wallet/index.vue b/src/views/base/wallet/index.vue
index 511c8b1..1220934 100644
--- a/src/views/base/wallet/index.vue
+++ b/src/views/base/wallet/index.vue
@@ -3,65 +3,66 @@
     <div class="absolute inset-0 bg-cover bg-center opacity-60" :style="{ backgroundImage: `url(${img})` }"></div>
     <div class="bg-white py-3 px-3 text-primary font-bold drop-shadow z-[1999] wrap-fix">کیف پول</div>
     <div
-        class="bg-white wrap-fix py-3 top-11 px-3 text-primary font-bold flex justify-evenly z-[1999]"
+      class="bg-white wrap-fix py-3 top-11 px-3 text-primary font-bold flex justify-evenly z-[1999]"
     >
       <div class="flex justify-evenly w-full px-2 h-11 items-center bg-gray-50 relative rounded">
         <div
-            :class="isDeposit ? 'text-primary' : 'text-gray-400'"
-            class="w-full text-center z-2"
-            @click="setIsDeposit(true)"
+          :class="isDeposit ? 'text-primary' : 'text-gray-400'"
+          class="w-full text-center z-2"
+          @click="setIsDeposit(true)"
         >
           واریز
         </div>
         <div
-            :class="!isDeposit ? 'text-primary' : 'text-gray-400'"
-            class="w-full text-center z-2"
-            @click="setIsDeposit(false)"
+          :class="!isDeposit ? 'text-primary' : 'text-gray-400'"
+          class="w-full text-center z-2"
+          @click="setIsDeposit(false)"
         >
           برداشت
         </div>
         <!--        <div ref="bganim" class="absolute bg-white h-8 w-1/2 rounded-lg " :style="`transform: translateX(${isDeposit? '0':'-100%'}); left: ${isDeposit? '0':'100%'}`"></div>-->
         <div
-            ref="bganim"
-            :style="useStyle()"
-            class="absolute bg-white h-8 w-1/2 rounded-lg animate right"
+          ref="bganim"
+          :style="useStyle()"
+          class="absolute bg-white h-8 w-1/2 rounded-lg animate right"
         ></div>
       </div>
     </div>
     <div class="px-5 pt-26 pb-2">
       <a-form :model="form" class="!mt-5" name="basic" @finish="ok()">
         <div class="border-gray-200 border-1 rounded-xl p-5 trans h-40 relative">
-          <bg_main/>
+          <bg_main />
           <div class="z-100 relative">
             <a-form-item :rules="[required()]">
               <BasicInput
-                  v-model:value="form.value"
-                  addon-before="ریال"
-                  :addon-bg-color="useConfigStore().config.color"
-                  addon-text-color="white"
-                  place-holder="مبلغ"
-                  size="large"
-                  type="price"
+                v-model:value="form.value"
+                addon-before="ریال"
+                :addon-bg-color="useConfigStore().config.color"
+                addon-text-color="white"
+                place-holder="مبلغ"
+                size="large"
+                type="price"
               />
             </a-form-item>
             <Transition mode="out-in" name="fade">
               <div v-if="!isDeposit">
+                <div class="text-red text-xs font-bold mb-2">محدودیت برداشت 100 هزار تومان میباشد</div>
                 <div class="font-bold text-xs">
                   {{
                     `موجودی کیف پول: ${usePriceWithoutType(
-                        walletStore?.walletInfo?.cash ?? 0
+                      walletStore?.walletInfo?.cash ?? 0
                     )} ریال`
                   }}
                 </div>
                 <a-form-item v-if="walletStore?.walletInfo" class="!mt-3">
                   <a-slider
-                      v-model:value="form.percentWallet"
-                      :disabled="walletStore?.walletInfo?.cash <= 0"
-                      :max="100"
-                      :min="0"
-                      :step="10"
-                      :tip-formatter="formatter"
-                      @change="percentChange"
+                    v-model:value="form.percentWallet"
+                    :disabled="walletStore?.walletInfo?.cash <= 0"
+                    :max="100"
+                    :min="0"
+                    :step="10"
+                    :tip-formatter="formatter"
+                    @change="percentChange"
                   />
                 </a-form-item>
               </div>
@@ -81,34 +82,34 @@
         </div>
         <a-form-item>
           <BasicButton
-              :disabled="disableButton"
-              class="w-full py-2 mt-5"
-              html-type="submit"
-              type="primary"
+            :disabled="disableButton"
+            class="w-full py-2 mt-5"
+            html-type="submit"
+            type="primary"
           >
             <div>
-              <a-spin v-if="loading" size="small"/>
+              <a-spin v-if="loading" size="small" />
               <div v-else>{{ isDeposit ? 'واریز' : 'برداشت' }}</div>
             </div>
           </BasicButton>
         </a-form-item>
       </a-form>
       <div
-          v-if="isDeposit"
-          ref="el"
-          :class="loading ? 'h-screen' : ''"
-          class="px-3 overflow-y-scroll w-full h-[49vh] pb-16"
-          style="max-height: calc(100vh - 50px)"
+        v-if="isDeposit"
+        ref="el"
+        :class="loading ? 'h-screen' : ''"
+        class="px-3 overflow-y-scroll w-full h-[49vh] pb-16"
+        style="max-height: calc(100vh - 50px)"
       >
         <list-anim v-if="!loading" :numberItemsAnim="4">
           <Item
-              v-for="item in isDeposit ? depositItems : withdrawItems"
-              :key="item.id"
-              :item="item"
+            v-for="item in isDeposit ? depositItems : withdrawItems"
+            :key="item.id"
+            :item="item"
           />
-          <TransactionSkeleton v-if="loadingMore" class="mt-1 mb-8"/>
+          <TransactionSkeleton v-if="loadingMore" class="mt-1 mb-8" />
         </list-anim>
-        <TransactionSkeleton v-for="i in 13" v-else :key="i" class="mt-1"/>
+        <TransactionSkeleton v-for="i in 13" v-else :key="i" class="mt-1" />
       </div>
       <!--      <Slider/>-->
       <Transition mode="out-in" name="fade">
@@ -116,16 +117,16 @@
           <!--        <MySlider v-if="cardItems.length > 0" :items="cardItems" class="mt-[5vh] pb-[25vh] mb-[16vh]"
                             style="touch-action: none"/>-->
           <CardSlider
-              v-if="cardItems.length > 0"
-              :items="cardItems"
-              v-model:id="form.card_id"
-              class="card-slider-wrap mt-[2vh] px-3 fixed bottom-10 right-0 left-0"
-              style="touch-action: none"
-              @cardDeleted="getCards"
+            v-if="cardItems.length > 0"
+            :items="cardItems"
+            v-model:id="form.card_id"
+            class="card-slider-wrap mt-[2vh] px-3 fixed bottom-10 right-0 left-0"
+            style="touch-action: none"
+            @cardDeleted="getCards"
           />
           <div
-              v-else-if="!loading && cardItems.length === 0"
-              class="h-30 flex items-center justify-center"
+            v-else-if="!loading && cardItems.length === 0"
+            class="h-30 flex items-center justify-center"
           >
             هیچ کارتی یافت نشد
           </div>
@@ -134,42 +135,42 @@
     </div>
     <Transition mode="out-in" name="fade">
       <div
-          v-if="!isDeposit"
-          class="add-card fixed bottom-0 h-[18vh] bg-[#FBFBFC] w-full shadow-lg rounded-3xl flex justify-center pt-3 z-200"
-          style="box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 26px 11px"
-          @click="showAddCard = true"
+        v-if="!isDeposit"
+        class="add-card fixed bottom-0 h-[18vh] bg-[#FBFBFC] w-full shadow-lg rounded-3xl flex justify-center pt-3 z-200"
+        style="box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 26px 11px"
+        @click="showAddCard = true"
       >
         <div>افزودن کارت جدید</div>
-        <BasicIcon icon="vuesax-linear:add"/>
+        <BasicIcon icon="vuesax-linear:add" />
         <BasicActionSheet v-model:show="showAddCard" class="!max-h-[95vh]">
           <div class="font-bold text-lg">افزودن کارت</div>
           <div class="mt-4 text-red-600 font-bold">توجه : حتما شماره کارت صاحب حساب نرم افزار وارد شود.</div>
           <div class="pb-20 mt-5">
             <a-form :model="cardForm">
-              <a-form-item
-                  :rules="required()"
-                  class="w-full gap-2 !flex-col"
-                  label="نام بانک"
-                  name="bank_name"
+<!--              <a-form-item
+                :rules="required()"
+                class="w-full gap-2 !flex-col"
+                label="نام بانک"
+                name="bank_name"
               >
-                <BasicInput v-model:value="cardForm.bank_name"/>
+                <BasicInput v-model:value="cardForm.bank_name" />
+              </a-form-item>-->
+              <a-form-item
+                :rules="cardNumberValidation()"
+                class="w-full gap-2 !flex-col"
+                label="شماره کارت"
+                name="cart_number"
+              >
+                <BasicInput v-model:value="cardForm.cart_number" type="number" />
               </a-form-item>
-              <!--              <a-form-item
-                                :rules="cardNumberValidation()"
-                                class="w-full gap-2 !flex-col"
-                                label="شماره کارت"
-                                name="cart_number"
-                            >
-                              <BasicInput v-model:value="cardForm.cart_number" type="number" />
-                            </a-form-item>-->
-              <!--              <a-form-item
+                            <a-form-item
                                 v-if="walletStore.walletInfo"
                                 class="w-full gap-2 !flex-col"
                                 label="تاریخ تولد"
                                 name="cart_number"
                             >
                               <BaseDatePicker v-model:value="cardForm.birth_date" class="w-full" inputReadOnly/>
-                            </a-form-item>-->
+                            </a-form-item>
               <!--                            <a-form-item
                                             :rules="required()"
                                             class="w-full gap-2 !flex-col"
@@ -178,21 +179,21 @@
                                           >
                                             <BasicInput v-model:value="cardForm.account_number" type="number" />
                                           </a-form-item>-->
-              <a-form-item
-                  :rules="required()"
-                  class="w-full gap-2 !flex-col"
-                  label="شماره شبا"
-                  name="shaba_number"
-              >
-                <BasicInput v-model:value="cardForm.shaba_number"/>
-              </a-form-item>
+              <!--              <a-form-item
+                                :rules="required()"
+                                class="w-full gap-2 !flex-col"
+                                label="شماره شبا"
+                                name="shaba_number"
+                            >
+                              <BasicInput v-model:value="cardForm.shaba_number"/>
+                            </a-form-item>-->
               <BasicButton
-                  :disabled="loading"
-                  class="w-full mt-5 md:mt-10"
-                  type="primary"
-                  @click="addCard"
+                :disabled="loading"
+                class="w-full mt-5 md:mt-10"
+                type="primary"
+                @click="addCard"
               >
-                <a-spin v-if="loading" size="small"/>
+                <a-spin v-if="loading" size="small" />
                 <div v-else>ثبت</div>
               </BasicButton>
               <BasicButton class="w-full mt-2" @click="showAddCard = false">بازگشت</BasicButton>
@@ -206,26 +207,26 @@
         <div>
           <div class="flex justify-end">
             <BasicIcon
-                @click="showConfirmCode = false"
-                icon="vuesax-linear:close-circle"
-                size="30"
-                class="text-red"
+              @click="showConfirmCode = false"
+              icon="vuesax-linear:close-circle"
+              size="30"
+              class="text-red"
             />
           </div>
           <div class="p-5 text-sm">لطفا کد ارسالی را وارد کنید.</div>
           <div>
             <OtpInput
-                ref="refOtpInput"
-                :is-input-num="true"
-                :num-inputs="4"
-                :should-auto-focus="true"
-                autocomplete="one-time-code"
-                class="mt-5 justify-center"
-                input-classes="otp-input"
-                separator=""
-                style="direction: ltr"
-                value=""
-                @on-complete="handleOnComplete"
+              ref="refOtpInput"
+              :is-input-num="true"
+              :num-inputs="4"
+              :should-auto-focus="true"
+              autocomplete="one-time-code"
+              class="mt-5 justify-center"
+              input-classes="otp-input"
+              separator=""
+              style="direction: ltr"
+              value=""
+              @on-complete="handleOnComplete"
             />
           </div>
         </div>
@@ -239,7 +240,7 @@
         </div>
       </template>
     </DialogVant>
-    <SkeletonLoading v-model:show="infoVisible"/>
+    <SkeletonLoading v-model:show="infoVisible" />
 
     <!--
     <transaction mode="out-in" name="fade">
@@ -290,9 +291,9 @@
     </transaction>
 -->
     <BasicModal
-        v-model:visible="chargeAccountModal"
-        custom-footer
-        :closable="false"
+      v-model:visible="chargeAccountModal"
+      custom-footer
+      :closable="false"
     >
       <div v-if="config.config.name === 'garoosi'" class="text-center">
         <div class=" font-bold text-red-600">مشتریان گرامی</div>
@@ -300,9 +301,9 @@
           <span>جهت شارژ حساب کاربری خود، مبلغ موردنظر را به شماره کارت زیر واریز نموده و از طریق لینک زیر به پشتیبان اطلاع دهید.</span>
         </div>
 
-        <div class="mt-1 text-red-600">در صورت عدم همخوانی  کارت ملی و فیش واریزی کیف پول شارژ نمیشود!</div>
+        <div class="mt-1 text-red-600">در صورت عدم همخوانی کارت ملی و فیش واریزی کیف پول شارژ نمیشود!</div>
         <div class="mt-4">(سیده زهرا موسوی)</div>
-        <div class="mt-1">شماره کارت:6037701900311389 </div>
+        <div class="mt-1">شماره کارت:6037701900311389</div>
         <!--        <div>شماره حساب: 0233273609006</div>-->
         <div>شماره شبا: IR 080160000000001143804581</div>
         <BasicButton class="mt-4">
@@ -332,9 +333,9 @@
       </template>
     </BasicModal>
     <BasicModal
-        v-model:visible="withdrawInfModal"
-        custom-footer
-        :closable="false"
+      v-model:visible="withdrawInfModal"
+      custom-footer
+      :closable="false"
     >
       <div class="text-center">
         <div class=" font-bold text-red-600">مشتری گرامی</div>
@@ -353,37 +354,37 @@
 </template>
 
 <script lang="ts" setup>
-import {computed, onMounted, ref} from 'vue'
-import {usePriceWithoutType} from '@/utils/usePrice'
-import {loading, loadingMore} from '@/utils'
+import { computed, onMounted, ref } from 'vue'
+import { usePriceWithoutType } from '@/utils/usePrice'
+import { loading, loadingMore } from '@/utils'
 import BasicButton from '@/components/BasicPacks/BasicButton.vue'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import router from '@/router'
-import {useWalletStore} from '@/store/walletStore'
+import { useWalletStore } from '@/store/walletStore'
 import Bg_main from '@/components/bg_main.vue'
-import type {Transaction} from '@/models/transaction'
-import {createCard, deposit, getActivatedCards, withdraw, confirmCode} from '@/api/wallet'
-import {useInfiniteScroll} from '@vueuse/core'
-import {message} from 'ant-design-vue'
+import type { Transaction } from '@/models/transaction'
+import { createCard, deposit, getActivatedCards, withdraw, confirmCode } from '@/api/wallet'
+import { useInfiniteScroll } from '@vueuse/core'
+import { message } from 'ant-design-vue'
 import ListAnim from '@/components/ListAnim.vue'
 import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
 import Item from './components/Item.vue'
-import type {TableEngineInput, TableOutput} from '@/models/table'
-import {getTransactionTable, getTransactionTable2} from '@/api/transaction'
+import type { TableEngineInput, TableOutput } from '@/models/table'
+import { getTransactionTable, getTransactionTable2 } from '@/api/transaction'
 import BasicInput from '@/components/BasicPacks/BasicInput.vue'
 import CardSlider from './components/UISlider/index.vue'
 import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
-import type {Card} from '@/models/wallet'
-import {cardNumberValidation, required} from '@/utils/inputRules'
-import {useUserStore} from '@/store/userStore'
-import {DotLottieVue} from '@lottiefiles/dotlottie-vue'
+import type { Card } from '@/models/wallet'
+import { cardNumberValidation, required } from '@/utils/inputRules'
+import { useUserStore } from '@/store/userStore'
+import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
 import OtpInput from 'vue3-otp-input'
 import DialogVant from '@/components/DialogVant.vue'
 import SkeletonLoading from './components/SkeletonLoading.vue'
-import BaseDatePicker from "@/components/BasicPacks/BaseDatePicker";
-import img from "@/assets/img/user_ly1.svg";
-import BasicModal from "@/components/BasicPacks/BasicModal.vue";
-import {useConfigStore} from "@/store/configStore";
+import BaseDatePicker from '@/components/BasicPacks/BaseDatePicker'
+import img from '@/assets/img/user_ly1.svg'
+import BasicModal from '@/components/BasicPacks/BasicModal.vue'
+import { useConfigStore } from '@/store/configStore'
 
 const isDeposit = ref<boolean>(true)
 const walletStore = useWalletStore()
@@ -423,10 +424,10 @@ const disableButton = computed(() => {
     if (walletStore?.walletInfo?.cash && !isDeposit.value) {
       if (cardItems.value.length > 0) {
         return (
-            walletStore?.walletInfo?.cash <= 0 ||
-            walletStore?.walletInfo?.cash < parseInt(form.value?.value) ||
-            isNaN(parseInt(form.value?.value)) ||
-            parseInt(form.value?.value) < 1000000
+          walletStore?.walletInfo?.cash <= 0 ||
+          walletStore?.walletInfo?.cash < parseInt(form.value?.value) ||
+          isNaN(parseInt(form.value?.value)) ||
+          parseInt(form.value?.value) < 1000000
         )
       } else return true
     } else if (isDeposit.value) {
@@ -505,7 +506,7 @@ function setIsDeposit(val: boolean) {
 
 function useStyle() {
   if (isDeposit.value) return 'right: 2%;'
-      // if (isDeposit.value) return 'animation-direction: normal'
+    // if (isDeposit.value) return 'animation-direction: normal'
   // else return 'animation-direction: reverse'
   else return ' right: 98%; transform: translate(100%, 0);'
 }
@@ -524,7 +525,7 @@ async function ok() {
     if (form.value.value !== undefined) {
       loading.value = true
       if (!isDeposit.value) {
-        await confirmCode({value: form.value.value})
+        await confirmCode({ value: form.value.value })
         showConfirmCode.value = await true
       }
       if (isDeposit.value) {
@@ -589,34 +590,34 @@ onMounted(async () => {
 
 if (!userStore.isSingle) {
   useInfiniteScroll(
-      el,
-      async () => {
-        // load more
-        // if (!userStore.isSingle) {
-        if (isDeposit.value) {
-          if (
-              depositTableOutput.value &&
-              (depositPagination.value.page + 1) * depositPagination.value.limit <
-              depositTableOutput.value.query.total
-          ) {
-            depositPagination.value.page++
-            console.log('Updated Page:', depositPagination.value.page)
-            await initDepositTable()
-          }
-        } else {
-          if (
-              withdrawTableOutput.value &&
-              (withdrawPagination.value.page + 1) * withdrawPagination.value.limit <
-              withdrawTableOutput.value.query.total
-          ) {
-            // console.log('gfgf')
-            withdrawPagination.value.page++
-            await initWithdrawTable()
-          }
+    el,
+    async () => {
+      // load more
+      // if (!userStore.isSingle) {
+      if (isDeposit.value) {
+        if (
+          depositTableOutput.value &&
+          (depositPagination.value.page + 1) * depositPagination.value.limit <
+          depositTableOutput.value.query.total
+        ) {
+          depositPagination.value.page++
+          console.log('Updated Page:', depositPagination.value.page)
+          await initDepositTable()
         }
-        // }
-      },
-      {distance: 12}
+      } else {
+        if (
+          withdrawTableOutput.value &&
+          (withdrawPagination.value.page + 1) * withdrawPagination.value.limit <
+          withdrawTableOutput.value.query.total
+        ) {
+          // console.log('gfgf')
+          withdrawPagination.value.page++
+          await initWithdrawTable()
+        }
+      }
+      // }
+    },
+    { distance: 12 }
   )
 }
 
@@ -652,7 +653,7 @@ async function handleOnComplete(value: string) {
   try {
     infoVisible.value = true
     showConfirmCode.value = false
-    await withdraw({...form.value, otp: value})
+    await withdraw({ ...form.value, otp: value })
     await walletStore.getMyWallet()
     await message.success('عملیات با موفقیت انجام شد')
     withdrawInfModal.value = true