boursecu_user/src/views/base/wallet/mobile/MobileWalletView.vue

<template>
  <div class="relative">
    <div
      class="mobile-page-bg mobile-page-bg--cover opacity-60"
      aria-hidden="true"
      :style="{ backgroundImage: `url(${img})` }"
    ></div>
    <MobilePageHeader title="کیف پول" />
    <div class="mpage-subheader wrap-fix flex justify-evenly">
      <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)"
        >
          واریز
        </div>
        <div
          :class="!isDeposit ? 'text-primary' : 'text-gray-400'"
          class="w-full text-center z-2"
          @click="setIsDeposit(false)"
        >
          برداشت
        </div>
        <div
          :style="useStyle()"
          class="absolute bg-white h-8 w-1/2 rounded-lg animate right"
        ></div>
      </div>
    </div>
    <div
      class="px-5 mpage-content mpage-content--with-subheader"
      :class="isDeposit ? 'pb-2' : 'pb-[calc(var(--app-bottom-chrome-height)+1rem)]'"
    >
      <a-form :model="form" class="!mt-5" name="basic" @finish="ok()">
        <BoursecuBankAccountPicker
          v-if="!isDeposit"
          v-model:id="form.card_id"
          variant="mobile"
          :items="cardItems"
          class="mb-4"
          @add-account="showAddCard = true"
          @card-deleted="getCards"
        />

        <div class="border-gray-200 border-1 rounded-xl p-5 trans h-40 relative">
          <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"
              />
            </a-form-item>
            <Transition mode="out-in" name="fade">
              <div v-if="!isDeposit">
                <div class="font-bold text-xs">
                  {{ formatCashWalletBalanceText(usePriceWithoutType(walletStore?.walletInfo?.cash ?? 0)) }}
                </div>
                <a-form-item v-if="walletStore?.walletInfo" class="!mt-3">
                  <div
                      class="app-touch-slider"
                      @touchstart.stop
                      @touchmove.stop
                      @pointerdown.stop
                  >
                    <a-slider
                        v-model:value="form.percentWallet"
                        :disabled="walletStore?.walletInfo?.cash <= 0"
                        :max="100"
                        :min="0"
                        :step="10"
                        :tip-formatter="formatter"
                        @change="percentChange"
                    />
                  </div>
                </a-form-item>
              </div>
              <div v-else class="mt-3">
                <div class="text-red text-xs font-bold mb-2">
                  حداقل مبلغ واریزی 100 هزار تومان می باشد.
                </div>
                <div class="flex gap-2">
                  <BasicButton
                      v-for="amount in depositQuickAmounts"
                      :key="amount"
                      class="w-full font-bold !px-1"
                      @click="form.value = amount"
                  >
                    {{ usePriceWithoutType(amount) }}
                  </BasicButton>
                </div>
              </div>
            </Transition>
          </div>
        </div>
        <a-form-item>
          <BasicButton
            :disabled="disableButton"
            class="w-full py-2 mt-5"
            html-type="submit"
            type="primary"
          >
            <div>
              <a-spin v-if="loading" size="small" />
              <div v-else>{{ isDeposit ? 'واریز' : 'برداشت' }}</div>
            </div>
          </BasicButton>
        </a-form-item>
      </a-form>

      <div
        v-if="!isDeposit"
        class="wallet-withdraw-guide-panel relative z-10"
      >
        <BoursecuWithdrawGuide />
      </div>

      <div
        v-if="isDeposit"
        :ref="(node) => { mobileDepositScrollEl = (node as HTMLElement | null) }"
        :class="loading ? 'h-screen' : ''"
        class="px-3 overflow-y-scroll w-full h-[49vh] pb-16"
        style="max-height: var(--mpage-scroll-max-height)"
      >
        <list-anim v-if="!loading" :numberItemsAnim="4">
          <Item v-for="item in depositItems" :key="item.id" :item="item" />
          <TransactionSkeleton v-if="loadingMore" class="mt-1 mb-8" />
        </list-anim>
        <TransactionSkeleton v-for="i in 13" v-else :key="i" class="mt-1" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
import MobilePageHeader from '@/layouts/components/MobilePageHeader.vue'
import BasicInput from '@/components/BasicPacks/BasicInput.vue'
import Bg_main from '@/components/bg_main.vue'
import ListAnim from '@/components/ListAnim.vue'
import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
import { useConfigStore } from '@/store/configStore'
import { required } from '@/utils/inputRules'
import img from '@/assets/img/user_ly1.svg'
import BoursecuBankAccountPicker from '../components/BoursecuBankAccountPicker.vue'
import BoursecuWithdrawGuide from '../components/BoursecuWithdrawGuide.vue'
import Item from '../components/Item.vue'
import { useWalletPageContext } from '../composables/useWalletPage'

const {
  isDeposit,
  walletStore,
  showAddCard,
  form,
  disableButton,
  cardItems,
  depositItems,
  loading,
  loadingMore,
  mobileDepositScrollEl,
  depositQuickAmounts,
  usePriceWithoutType,
  formatCashWalletBalanceText,
  setIsDeposit,
  useStyle,
  formatter,
  percentChange,
  ok,
  getCards,
} = useWalletPageContext()
</script>

<style scoped>
.animate.right {
  right: 0;
}

.wallet-withdraw-guide-panel {
  margin-top: 1.25rem;
  padding-bottom: 1rem;
}

@media screen and (min-width: 426px) {
  .card-slider-wrap {
    width: 426px;
    margin: 0 auto;
  }
}
</style>