890 lines
28 KiB
Vue
890 lines
28 KiB
Vue
<template>
|
||
<div>
|
||
<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]"
|
||
>
|
||
<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 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"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
<div class="px-5 pt-26" :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(cashWalletBalance)) }}
|
||
</div>
|
||
<a-form-item v-if="walletStore?.walletInfo" class="!mt-3">
|
||
<a-slider
|
||
v-model:value="form.percentWallet"
|
||
:disabled="cashWalletBalance <= 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="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"
|
||
/>
|
||
<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>
|
||
<!-- <Slider/>-->
|
||
<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>
|
||
|
||
<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"
|
||
>
|
||
<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
|
||
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
|
||
:rules="required()"
|
||
class="w-full gap-2 !flex-col"
|
||
label="شماره حساب"
|
||
name="account_number"
|
||
>
|
||
<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>-->
|
||
<BasicButton
|
||
:disabled="loading"
|
||
class="w-full mt-5 md:mt-10"
|
||
type="primary"
|
||
@click="addCard"
|
||
>
|
||
<a-spin v-if="loading" size="small" />
|
||
<div v-else>ثبت</div>
|
||
</BasicButton>
|
||
<BasicButton class="w-full mt-2 mb-8" @click="showAddCard = false">بازگشت</BasicButton>
|
||
</a-form>
|
||
</div>
|
||
</BasicActionSheet>
|
||
<DialogVant v-model:show="showConfirmCode" :closeOnClickOverlay="true" :timeOut="-1">
|
||
<template v-slot:title>
|
||
<div>
|
||
<div class="flex justify-end">
|
||
<BasicIcon
|
||
@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"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<template v-slot:button>
|
||
<div></div>
|
||
<div class="flex justify-end">
|
||
<BasicButton @click="showConfirmCode = false" class="py-2" type="primary">
|
||
بستن
|
||
</BasicButton>
|
||
</div>
|
||
</template>
|
||
</DialogVant>
|
||
<SkeletonLoading v-model:show="infoVisible" />
|
||
|
||
<!--
|
||
<transaction mode="out-in" name="fade">
|
||
<div v-if="isDeposit"
|
||
class="bg-white fixed right-0 left-0 bottom-0 top-20 z-100 op-90 flex justify-center items-center">
|
||
<div class="flex flex-col justify-center mt-[-20vh] items-center px-5">
|
||
<DotLottieVue class="w-80vw " autoplay loop
|
||
src="https://lottie.host/203d9dc9-a102-43a6-864a-2d3eef2daf4d/xNBrLOheY7.json" />
|
||
<div class="flex justify-center items-center text-justify text-primary font-bold">
|
||
با توجه به اختلال پیش آمده در سامانه پیپینگ
|
||
برای شارژ کیف پول خود از طریق لینک زیر اقدام نمایید:
|
||
</div>
|
||
<a class="mt-2 w-full " href="https://www.payping.ir/d/Hzy0">
|
||
<BasicButton class="w-full">https://www.payping.ir/d/Hzy0</BasicButton>
|
||
</a>
|
||
<div class="w-full">
|
||
<div class="text-justify mt-2 text-primary font-bold">
|
||
و یا مبلغ مورد نظر خود را به شماره حساب:
|
||
</div>
|
||
</div>
|
||
<BasicButton icon="vuesax-linear:copy" class="flex-1 w-full mt-1" icon-size="18" @click.stop="copyCode('838-40-89997745-1')">
|
||
838-40-89997745-1
|
||
</BasicButton>
|
||
<div class="w-full">
|
||
<div class="text-justify mt-2 text-primary font-bold">
|
||
با شماره شبا:
|
||
</div>
|
||
<BasicButton icon="vuesax-linear:copy" class="flex-1 w-full mt-1" icon-size="18" @click.stop="copyCode('IR550560083804089997745001')">
|
||
IR550560083804089997745001
|
||
</BasicButton>
|
||
</div>
|
||
<div class="w-full">
|
||
<div class="text-justify mt-2 text-primary font-bold flex">
|
||
به نام
|
||
<div class="mx-1 font-extrabold text-blue-600">پديده طلاي شقايق</div>
|
||
بانک سامان واریز نمایید.
|
||
</div>
|
||
<div class="text-justify mt-2 text-primary font-bold">
|
||
توجه داشته باشید بعد از پرداخت موفق، رسید خود را به شماره 09190909884 در واتس اپ ارسال نمایید.
|
||
</div>
|
||
</div>
|
||
<a class="mt-1 w-full " href="https://wa.me/09190909884">
|
||
<BasicButton class="w-full !text-green-600" icon="vuesax-linear:whatsapp">شماره واتساپ</BasicButton>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
</transaction>
|
||
-->
|
||
<BasicModal
|
||
v-model:visible="chargeAccountModal"
|
||
custom-footer
|
||
:closable="false"
|
||
wrap-class-name="wallet-info-modal"
|
||
>
|
||
<div class="wallet-info-modal__body">
|
||
<div class="wallet-info-modal__icon">
|
||
<BasicIcon icon="vuesax-linear:wallet-add" size="26" />
|
||
</div>
|
||
|
||
<div v-if="config.config.name === 'garoosi'" class="wallet-info-modal__content">
|
||
<h3 class="wallet-info-modal__title">راهنمای شارژ حساب</h3>
|
||
<p class="wallet-info-modal__text">
|
||
جهت شارژ حساب کاربری خود، مبلغ موردنظر را به شماره کارت زیر واریز نموده و از طریق لینک زیر به پشتیبان اطلاع دهید.
|
||
</p>
|
||
<p class="wallet-info-modal__warn">
|
||
در صورت عدم همخوانی کارت ملی و فیش واریزی کیف پول شارژ نمیشود.
|
||
</p>
|
||
<div class="wallet-info-modal__card-box">
|
||
<div>(سیده زهرا موسوی)</div>
|
||
<div>شماره کارت: 6037701900311389</div>
|
||
<div>شماره شبا: IR 080160000000001143804581</div>
|
||
</div>
|
||
<a
|
||
class="wallet-info-modal__action wallet-info-modal__action--outline"
|
||
href="https://ble.ir/garoosigallery"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
<BasicIcon icon="vuesax-linear:headphone" size="18" />
|
||
پیام به پشتیبانی
|
||
</a>
|
||
</div>
|
||
|
||
<!-- شاخهٔ ثابت بازرتلا: شماره کارت حذف شد؛ از تنظیمات support_messenger استفاده میشود
|
||
<div v-else-if="isBazretalaProject()" class="wallet-info-modal__content">
|
||
...
|
||
</div>
|
||
-->
|
||
|
||
<div v-else class="wallet-info-modal__content">
|
||
<h3 class="wallet-info-modal__title">راهنمای شارژ حساب</h3>
|
||
<p class="wallet-info-modal__text">{{ supportMessengerText }}</p>
|
||
<a
|
||
v-if="supportMessengerLink"
|
||
class="wallet-info-modal__action wallet-info-modal__action--outline"
|
||
:href="supportMessengerLink"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
<BasicIcon icon="vuesax-linear:headphone" size="18" />
|
||
پیام به پشتیبانی
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<template #footer>
|
||
<BasicButton type="primary" class="w-full wallet-info-modal__ok" @click="chargeAccountModal = false">
|
||
متوجه شدم
|
||
</BasicButton>
|
||
</template>
|
||
</BasicModal>
|
||
<BasicModal
|
||
v-model:visible="withdrawInfModal"
|
||
custom-footer
|
||
:closable="false"
|
||
wrap-class-name="wallet-info-modal"
|
||
>
|
||
<div class="wallet-info-modal__body">
|
||
<div class="wallet-info-modal__icon wallet-info-modal__icon--info">
|
||
<BasicIcon icon="vuesax-linear:info-circle" size="26" />
|
||
</div>
|
||
<div class="wallet-info-modal__content">
|
||
<h3 class="wallet-info-modal__title">زمان واریز برداشت</h3>
|
||
<p class="wallet-info-modal__text">
|
||
واریز مبلغ مورد نظر، نهایتاً ظرف مدت ۲۴ ساعت آینده انجام میپذیرد.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<template #footer>
|
||
<BasicButton type="primary" class="w-full wallet-info-modal__ok" @click="withdrawInfModal = false">
|
||
متوجه شدم
|
||
</BasicButton>
|
||
</template>
|
||
</BasicModal>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { computed, onMounted, ref } from 'vue'
|
||
import { formatCashWalletBalanceText } from '@/utils/productDealMethod'
|
||
import { getCashWalletBalance } from '@/utils/productAssets'
|
||
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 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 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 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 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 { isBazretalaProject } from '@/utils/config'
|
||
import {
|
||
buildSupportMessengerUrl,
|
||
DEFAULT_SUPPORT_MESSENGER_TEXT,
|
||
loadSupportMessengerFromSettings,
|
||
supportMessengerSettings,
|
||
} from '@/utils/supportMessenger'
|
||
|
||
const isDeposit = ref<boolean>(true)
|
||
const walletStore = useWalletStore()
|
||
const userStore = useUserStore()
|
||
const cashWalletBalance = computed(() =>
|
||
getCashWalletBalance(walletStore.walletInfo, userStore.userInfo?.wallets)
|
||
)
|
||
const showAddCard = ref<boolean>(false)
|
||
const chargeAccountModal = ref<boolean>(false)
|
||
const showConfirmCode = ref<boolean>(false)
|
||
const refOtpInput = ref<InstanceType<typeof VOtpInput> | null>(null)
|
||
const withdrawInfModal = ref<boolean>(false)
|
||
|
||
const config = useConfigStore()
|
||
|
||
const supportMessengerText = computed(() =>
|
||
supportMessengerSettings.value.messengerText || DEFAULT_SUPPORT_MESSENGER_TEXT
|
||
)
|
||
|
||
const supportMessengerLink = computed(() =>
|
||
buildSupportMessengerUrl(
|
||
supportMessengerSettings.value.messenger,
|
||
supportMessengerSettings.value.messengerId
|
||
)
|
||
)
|
||
|
||
onMounted(() => {
|
||
if (router.currentRoute.value.query.state === 'deposit') {
|
||
isDeposit.value = true
|
||
}
|
||
walletStore.getMyWallet()
|
||
isDeposit.value = true
|
||
loadSupportMessengerFromSettings()
|
||
})
|
||
|
||
const form = ref<Transaction>({
|
||
value: undefined,
|
||
percentWallet: 0,
|
||
card_id: undefined
|
||
})
|
||
|
||
const infoVisible = ref<boolean>(false)
|
||
const cardForm = ref<Card>({
|
||
birth_date: 0,
|
||
account_number: '',
|
||
bank_name: '',
|
||
cart_number: '',
|
||
shaba_number: ''
|
||
})
|
||
|
||
const disableButton = computed(() => {
|
||
if (!loading.value) {
|
||
if (cashWalletBalance.value && !isDeposit.value) {
|
||
if (cardItems.value.length > 0) {
|
||
return (
|
||
cashWalletBalance.value <= 0 ||
|
||
cashWalletBalance.value < parseInt(form.value?.value) ||
|
||
isNaN(parseInt(form.value?.value)) ||
|
||
parseInt(form.value?.value) < 1000000
|
||
)
|
||
} else return true
|
||
} else if (isDeposit.value) {
|
||
return isNaN(parseInt(form.value?.value)) || parseInt(form.value?.value) < 1000000
|
||
} else return false
|
||
} else {
|
||
return true
|
||
}
|
||
})
|
||
const bganim = ref(null)
|
||
|
||
const unitCalculator = computed(() => {
|
||
return cashWalletBalance.value / 100
|
||
})
|
||
|
||
function copyCode(val: string) {
|
||
// nextTick(() => {
|
||
navigator.clipboard.writeText(val)
|
||
message.info('کد رونوشت شد')
|
||
// })
|
||
}
|
||
|
||
const cardItems = ref<Card[]>([])
|
||
|
||
const cardTableOutput = ref<TableOutput<Card> | null>(null)
|
||
|
||
const resetData = () => {
|
||
form.value.value = undefined
|
||
form.value.percentWallet = 0
|
||
}
|
||
|
||
async function addCard() {
|
||
try {
|
||
loading.value = true
|
||
await createCard(cardForm.value)
|
||
await getCards()
|
||
showAddCard.value = false
|
||
cardForm.value = {
|
||
birth_date: 0,
|
||
account_number: '',
|
||
bank_name: '',
|
||
cart_number: '',
|
||
shaba_number: ''
|
||
}
|
||
message.success('کارت وارد شده با موفقیت افزوده شد و پس از تایید نمایش داده خواهد شد.')
|
||
} catch (e) {
|
||
console.log(e)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
async function getCards() {
|
||
try {
|
||
/* cardTableOutput.value = await getCardsTable()
|
||
cardItems.value.push(...cardTableOutput.value.rows)*/
|
||
cardItems.value = (await getActivatedCards()) ?? []
|
||
form.value.card_id = (await cardItems.value.length) ? cardItems.value[0].id : undefined
|
||
} catch (e) {
|
||
console.log(e)
|
||
}
|
||
}
|
||
|
||
function setIsDeposit(val: boolean) {
|
||
isDeposit.value = val
|
||
form.value.value = undefined
|
||
form.value.percentWallet = 0
|
||
// console.log(bganim.value.classList)
|
||
// bganim?.value?.classList.add(val?'right':'left')
|
||
// bganim?.value?.style.transform = `translateX(${val ? '0' : '-100'});`
|
||
// bganim?.value?.style.animationDirection = val? 'normal':'reverse'
|
||
// val? bganim?.value?.classList?.add("move") : bganim?.value?.classList?.remove("move")
|
||
// const el = bganim.value?.
|
||
// el.
|
||
}
|
||
|
||
function useStyle() {
|
||
if (isDeposit.value) return 'right: 2%;'
|
||
// if (isDeposit.value) return 'animation-direction: normal'
|
||
// else return 'animation-direction: reverse'
|
||
else return ' right: 98%; transform: translate(100%, 0);'
|
||
}
|
||
|
||
const formatter = (value: number) => {
|
||
return `${value}%`
|
||
}
|
||
|
||
function percentChange(val: number) {
|
||
if (val !== 0) form.value.value = parseInt((unitCalculator.value * val).toFixed())
|
||
else form.value.value = undefined
|
||
}
|
||
|
||
async function ok() {
|
||
try {
|
||
if (form.value.value !== undefined) {
|
||
loading.value = true
|
||
if (!isDeposit.value) {
|
||
await confirmCode({ value: form.value.value })
|
||
showConfirmCode.value = await true
|
||
}
|
||
if (isDeposit.value) {
|
||
chargeAccountModal.value = true
|
||
/*const data = await deposit(form.value)
|
||
window.location.href = data
|
||
await walletStore.getMyWallet()
|
||
resetData()
|
||
message.success('عملیات با موفقیت انجام شد')*/
|
||
}
|
||
} else {
|
||
message.error('ابتدا مبلغ را وارد کنید')
|
||
}
|
||
} catch (e) {
|
||
console.log(e)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
//table
|
||
const items = ref<Transaction[]>([])
|
||
const depositItems = ref<Transaction[]>([])
|
||
const withdrawItems = ref<Transaction[]>([])
|
||
const depositTableOutput = ref<TableOutput<Transaction> | null>(null)
|
||
const withdrawTableOutput = ref<TableOutput<Transaction> | null>(null)
|
||
const depositPagination = ref<TableEngineInput>({
|
||
filters: [
|
||
/*{
|
||
field: 'type',
|
||
cr: 'and',
|
||
type: 'number',
|
||
op: 'eq',
|
||
value: 3
|
||
}*/
|
||
],
|
||
limit: 6,
|
||
page: 0
|
||
})
|
||
const withdrawPagination = ref<TableEngineInput>({
|
||
filters: [
|
||
{
|
||
field: 'type',
|
||
cr: 'and',
|
||
type: 'number',
|
||
op: 'eq',
|
||
value: 4
|
||
}
|
||
],
|
||
limit: 6,
|
||
page: 0
|
||
})
|
||
const el = ref()
|
||
// const {y} = useScroll(el)
|
||
|
||
onMounted(async () => {
|
||
cardForm.value.birth_date = userStore.userInfo?.birth_date
|
||
await initWithdrawTable()
|
||
await initDepositTable()
|
||
await getCards()
|
||
})
|
||
|
||
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()
|
||
}
|
||
}
|
||
// }
|
||
},
|
||
{ distance: 12 }
|
||
)
|
||
}
|
||
|
||
async function initDepositTable() {
|
||
try {
|
||
depositPagination.value.page === 0 ? (loading.value = true) : (loadingMore.value = true)
|
||
depositTableOutput.value = await getTransactionTable2(depositPagination.value)
|
||
depositItems.value.push(...depositTableOutput.value.rows)
|
||
// console.log(tableOutput.value)
|
||
} catch (e) {
|
||
console.log(e)
|
||
} finally {
|
||
loading.value = false
|
||
loadingMore.value = false
|
||
}
|
||
}
|
||
|
||
async function initWithdrawTable() {
|
||
try {
|
||
withdrawPagination.value.page === 0 ? (loading.value = true) : (loadingMore.value = true)
|
||
withdrawTableOutput.value = await getTransactionTable(withdrawPagination.value)
|
||
withdrawItems.value.push(...withdrawTableOutput.value.rows)
|
||
// console.log(tableOutput.value)
|
||
} catch (e) {
|
||
console.log(e)
|
||
} finally {
|
||
loading.value = false
|
||
loadingMore.value = false
|
||
}
|
||
}
|
||
|
||
async function handleOnComplete(value: string) {
|
||
try {
|
||
infoVisible.value = true
|
||
showConfirmCode.value = false
|
||
await withdraw({ ...form.value, otp: value })
|
||
await walletStore.getMyWallet()
|
||
await message.success('عملیات با موفقیت انجام شد')
|
||
withdrawInfModal.value = true
|
||
resetData()
|
||
} catch (e) {
|
||
console.log(e)
|
||
}
|
||
infoVisible.value = false
|
||
refOtpInput.value?.clearInput()
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/*.right {
|
||
left: 100%;
|
||
transform: translateX(-100%);
|
||
}*/
|
||
|
||
.left {
|
||
transform: translateX(0);
|
||
left: 0;
|
||
}
|
||
|
||
/*.fade-enter-active,
|
||
.fade-leave-active {
|
||
transition: opacity 0.2s ease;
|
||
}
|
||
|
||
.fade-enter-from,
|
||
.fade-leave-to {
|
||
opacity: 0;
|
||
}*/
|
||
/*.trans{
|
||
transition: height 1s;
|
||
}*/
|
||
.toggle-transe-parent {
|
||
animation: ease-in-out infinite alternate swingParent;
|
||
}
|
||
|
||
@keyframes swingParent {
|
||
from {
|
||
transform: translateX(0);
|
||
left: 0;
|
||
}
|
||
to {
|
||
left: 100%;
|
||
transform: translateX(-100%);
|
||
}
|
||
}
|
||
|
||
.animate.right {
|
||
right: 0;
|
||
}
|
||
|
||
.animate.right.move {
|
||
right: 100%;
|
||
transform: translate(100%, 0);
|
||
}
|
||
|
||
@media screen and (min-width: 426px) {
|
||
:deep(.ant-form-item .ant-form-item-label) {
|
||
margin-top: 30px !important;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 426px) {
|
||
.card-slider-wrap {
|
||
width: 426px;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
|
||
.wallet-info-modal__body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
padding: 4px 8px 8px;
|
||
}
|
||
|
||
.wallet-info-modal__icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 9999px;
|
||
background: #ecfdf5;
|
||
color: #059669;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.wallet-info-modal__icon--info {
|
||
background: #eff6ff;
|
||
color: #2563eb;
|
||
}
|
||
|
||
.wallet-info-modal__title {
|
||
margin: 0 0 10px;
|
||
font-size: 17px;
|
||
font-weight: 700;
|
||
color: #0f172a;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.wallet-info-modal__text {
|
||
margin: 0;
|
||
font-size: 14px;
|
||
line-height: 1.85;
|
||
color: #475569;
|
||
}
|
||
|
||
.wallet-info-modal__warn {
|
||
margin: 12px 0 0;
|
||
padding: 10px 12px;
|
||
border-radius: 10px;
|
||
background: #fef2f2;
|
||
color: #b91c1c;
|
||
font-size: 13px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.wallet-info-modal__card-box {
|
||
margin-top: 14px;
|
||
width: 100%;
|
||
padding: 12px 14px;
|
||
border-radius: 12px;
|
||
background: #f8fafc;
|
||
border: 1px solid #e2e8f0;
|
||
color: #334155;
|
||
font-size: 13px;
|
||
line-height: 1.8;
|
||
text-align: right;
|
||
direction: rtl;
|
||
}
|
||
|
||
.wallet-info-modal__action {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
width: 100%;
|
||
margin-top: 16px;
|
||
padding: 11px 14px;
|
||
border-radius: 12px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||
}
|
||
|
||
.wallet-info-modal__action--outline {
|
||
color: #0f766e;
|
||
background: #f0fdfa;
|
||
border: 1px solid #99f6e4;
|
||
}
|
||
|
||
.wallet-info-modal__action--outline:hover {
|
||
background: #ccfbf1;
|
||
border-color: #5eead4;
|
||
}
|
||
|
||
.wallet-info-modal__ok {
|
||
height: 44px !important;
|
||
border-radius: 12px !important;
|
||
font-weight: 600;
|
||
}
|
||
</style>
|
||
|
||
<style>
|
||
.wallet-info-modal .ant-modal-content {
|
||
border-radius: 18px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.wallet-info-modal .ant-modal-footer {
|
||
border-top: none;
|
||
padding: 0 20px 20px;
|
||
}
|
||
</style>
|