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 class="px-5 pb-2 mt-4">
            <a-textarea
              v-model:value="extraNote"
              :maxlength="500"
              :rows="3"
              placeholder="توضیحات اضافی"
              show-count
            />
          </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" />

    <WalletDepositGuideModal
      v-model:visible="chargeAccountModal"
      :support-link="depositGuideSupportLink"
      :sms-link="depositSmsSupportLink"
    >
      <template v-if="config.config.name === 'garoosi'">
        <p>جهت شارژ حساب کاربری خود، مبلغ موردنظر را به شماره کارت زیر واریز نموده و از طریق لینک زیر به پشتیبان اطلاع دهید.</p>
        <p class="deposit-guide-note deposit-guide-note--warn">در صورت عدم همخوانی کارت ملی و فیش واریزی کیف پول شارژ نمیشود!</p>
        <p class="deposit-guide-note">(سیده زهرا موسوی)</p>
        <p class="deposit-guide-note">شماره کارت: 6037701900311389</p>
        <p class="deposit-guide-note">شماره شبا: IR 080160000000001143804581</p>
      </template>

      <template v-else-if="isBazretalaProject()">
        <p>جهت شارژ حساب کاربری خود، مبلغ موردنظر را به شماره کارت زیر واریز نموده و به شماره پشتیبانی 09121784258 در برنامه بله اطلاع دهید.</p>
        <p class="deposit-guide-note">(گنجينه طلاي حاجي ابوالفتح - بانک ملی)</p>
        <p class="deposit-guide-note">شماره کارت: 6037998800496928</p>
        <p class="deposit-guide-note">شماره شبا: IR 110170000000372468150002</p>
      </template>

      <template v-else>
        <p>{{ supportMessengerText }}</p>
      </template>
    </WalletDepositGuideModal>

    <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'
import WalletDepositGuideModal from './components/WalletDepositGuideModal.vue'

const isDesktop = useDesktopBreakpoint()

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

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

.deposit-guide-note {
  margin: 0.35rem 0 0;
}

.deposit-guide-note--warn {
  color: #dc2626;
  font-weight: 600;
}
</style>