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

<template>
  <div>
    <div class="absolute inset-0 bg-cover bg-center opacity-60" :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)+var(--app-add-card-height)+1rem)]'"
    >
      <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 />
          <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="text-red text-xs font-bold mb-2">حداقل مبلغ برداشتی 100 هزار تومان می باشد.</div>
                <div class="font-bold text-xs">
                  {{ formatCashWalletBalanceText(usePriceWithoutType(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"
                  />
                </a-form-item>
              </div>
              <div v-else class="mt-3">
                <div v-if="!isBazretalaProject()" class="text-red text-xs font-bold mb-2">
                  حداقل مبلغ واریزی 100 هزار تومان می باشد.
                </div>
                <div class="flex gap-2">
                  <BasicButton class="w-full font-bold !px-1" @click="form.value = 10000000">
                    {{ usePriceWithoutType(10000000) }}
                  </BasicButton>
                  <BasicButton class="w-full font-bold !px-1" @click="form.value = 50000000">
                    {{ usePriceWithoutType(50000000) }}
                  </BasicButton>
                  <BasicButton class="w-full font-bold !px-1" @click="form.value = 100000000">
                    {{ usePriceWithoutType(100000000) }}
                  </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"
        :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: calc(100vh - 50px)"
      >
        <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>
      <Transition mode="out-in" name="fade">
        <template v-if="!isDeposit">
          <div
            v-if="!loading && cardItems.length === 0"
            class="h-30 flex items-center justify-center"
          >
            هیچ کارتی یافت نشد
          </div>
        </template>
      </Transition>
    </div>

    <Teleport to="body">
      <CardSlider
        v-if="!isDeposit && cardItems.length > 0 && !showAddCard"
        v-model:id="form.card_id"
        :items="cardItems"
        class="card-slider-wrap wallet-card-slider"
        @cardDeleted="getCards"
      />
    </Teleport>

    <Teleport to="body">
      <div
        v-if="!isDeposit && !showAddCard"
        class="add-card app-dock-add-bar"
        @click="showAddCard = true"
      >
        <div>افزودن کارت جدید</div>
        <BasicIcon icon="vuesax-linear:add" />
      </div>
    </Teleport>
  </div>
</template>

<script lang="ts" setup>
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
import BasicIcon from '@/components/BasicPacks/BasicIcon.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 CardSlider from '../components/UISlider/index.vue'
import Item from '../components/Item.vue'
import { useWalletPageContext } from '../composables/useWalletPage'

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

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

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