boursecu_user/src/views/base/wallet/index.vue

<template>
  <div class="wallet-page-root">
    <ResponsiveViewPair>
      <template #mobile>
        <MobileWalletView />
      </template>
      <template #desktop>
        <DesktopWalletView />
      </template>
    </ResponsiveViewPair>

    <BasicActionSheet v-if="!isDesktop" 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>
      <WalletAddCardForm />
    </BasicActionSheet>

    <BasicModal
      v-else
      v-model:visible="showAddCard"
      title="افزودن کارت"
      width="480px"
      destroy-on-close
      :loading="loading"
      @ok="addCard"
    >
      <div class="text-red-600 font-bold mb-4">توجه : حتما شماره کارت صاحب حساب نرم افزار وارد شود.</div>
      <WalletAddCardForm :show-actions="false" />
    </BasicModal>

    <DialogVant v-model:show="showConfirmCode" :closeOnClickOverlay="true" :timeOut="-1">
      <template #title>
        <div>
          <div class="flex justify-end">
            <BasicIcon
              icon="vuesax-linear:close-circle"
              size="30"
              class="text-red"
              @click="showConfirmCode = false"
            />
          </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"
            />
          </div>
        </div>
      </template>
      <template #button>
        <div></div>
        <div class="flex justify-end">
          <BasicButton class="py-2" type="primary" @click="showConfirmCode = false">
            بستن
          </BasicButton>
        </div>
      </template>
    </DialogVant>

    <SkeletonLoading v-model:show="infoVisible" />

    <BasicModal 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>
        <div class="mt-2">
          <span>جهت شارژ حساب کاربری خود، مبلغ موردنظر را به شماره کارت زیر واریز نموده و از طریق لینک زیر به پشتیبان اطلاع دهید.</span>
        </div>
        <div class="mt-1 text-red-600">در صورت عدم همخوانی کارت ملی و فیش واریزی کیف پول شارژ نمیشود!</div>
        <div class="mt-4">(سیده زهرا موسوی)</div>
        <div class="mt-1">شماره کارت:6037701900311389</div>
        <div>شماره شبا: IR 080160000000001143804581</div>
        <BasicButton class="mt-4">
          <a class="w-full" href="https://ble.ir/garoosigallery">پیام به پشتیبانی</a>
        </BasicButton>
      </div>
      <div v-else-if="isBazretalaProject()" class="text-center">
        <div class="font-bold text-red-600">همراه گرامی</div>
        <div class="mt-2">
          <div>جهت شارژ حساب کاربری خود،</div>
          <div>مبلغ موردنظر را به شماره کارت زیر واریز نموده</div>
          <div>و به شماره پشتیبانی 09121784258 در برنامه ی بله اطلاع دهید.</div>
        </div>
        <div class="mt-4">(گنجينه طلاي حاجي ابوالفتح - بانک ملی)</div>
        <div class="mt-1">شماره کارت: 6037998800496928</div>
        <div>شماره شبا: IR 110170000000372468150002</div>
      </div>
      <div v-else class="text-center">
        <div class="font-bold text-red-600">مشتریان گرامی</div>
        <div class="mt-2">
          <span>{{ supportMessengerText }}</span>
        </div>
        <BasicButton v-if="supportMessengerLink">
          <a
            class="w-full"
            :href="supportMessengerLink"
            target="_blank"
            rel="noopener noreferrer"
          >
            پیام به پشتیبانی
          </a>
        </BasicButton>
      </div>
      <template #footer>
        <a-button type="primary" class="w-full" @click="chargeAccountModal = false">
          متوجه شدم
        </a-button>
      </template>
    </BasicModal>

    <BasicModal v-model:visible="withdrawInfModal" custom-footer :closable="false">
      <div class="text-center">
        <div class="font-bold text-red-600">مشتری گرامی</div>
        <div class="mt-2">
          <div>واریز مبلغ مورد نظر، نهایتاً ظرف مدت ۲۴ ساعت آینده انجام می‌پذیرد.</div>
        </div>
      </div>
      <template #footer>
        <a-button type="primary" class="w-full" @click="withdrawInfModal = false">
          متوجه شدم
        </a-button>
      </template>
    </BasicModal>
  </div>
</template>

<script lang="ts" setup>
import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
import BasicModal from '@/components/BasicPacks/BasicModal.vue'
import DialogVant from '@/components/DialogVant.vue'
import OtpInput from 'vue3-otp-input'
import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
import ResponsiveViewPair from '@/layouts/components/ResponsiveViewPair.vue'
import { useWalletPage } from './composables/useWalletPage'
import DesktopWalletView from './desktop/DesktopWalletView.vue'
import MobileWalletView from './mobile/MobileWalletView.vue'
import SkeletonLoading from './components/SkeletonLoading.vue'
import WalletAddCardForm from './components/WalletAddCardForm.vue'

const isDesktop = useDesktopBreakpoint()

const {
  config,
  showAddCard,
  chargeAccountModal,
  showConfirmCode,
  withdrawInfModal,
  infoVisible,
  refOtpInput,
  supportMessengerText,
  supportMessengerLink,
  isBazretalaProject,
  handleOnComplete,
  loading,
  addCard,
} = useWalletPage()
</script>

<style scoped>
.wallet-page-root {
  min-height: 100%;
  height: 100%;
}
</style>