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

712 lines
24 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 pb-2">
<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="font-bold text-xs">
{{
`موجودی کیف پول: ${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="flex gap-2 mt-3">
<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>
</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">
<!-- <MySlider v-if="cardItems.length > 0" :items="cardItems" class="mt-[5vh] pb-[25vh] mb-[16vh]"
style="touch-action: none"/>-->
<CardSlider
v-if="cardItems.length > 0"
:items="cardItems"
v-model:id="form.card_id"
class="card-slider-wrap mt-[2vh] px-3 fixed bottom-10 right-0 left-0"
style="touch-action: none"
/>
<div
v-else-if="!loading && cardItems.length === 0"
class="h-30 flex items-center justify-center"
>
هیچ کارتی یافت نشد
</div>
</template>
</Transition>
</div>
<Transition mode="out-in" name="fade">
<div
v-if="!isDeposit"
class="add-card fixed bottom-0 h-[18vh] bg-[#FBFBFC] w-full shadow-lg rounded-3xl flex justify-center pt-3 z-200"
style="box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 26px 11px"
@click="showAddCard = true"
>
<div>افزودن کارت جدید</div>
<BasicIcon icon="vuesax-linear:add"/>
<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" @click="showAddCard = false">بازگشت</BasicButton>
</a-form>
</div>
</BasicActionSheet>
</div>
</Transition>
<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"
>
<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">شماره کارت:6393461065606457 </div>
<!-- <div>شماره حساب: 0233273609006</div>-->
<div>شماره شبا: IR 110170000000233273609006</div>
<BasicButton class="mt-4">
<a class="w-full" href="https://ble.ir/garoosi_gallery">
پیام به پشتیبانی
</a>
</BasicButton>
</div>
<div v-else class="text-center">
<div class=" font-bold text-red-600">مشتریان گرامی</div>
<div class="mt-2">
<span>جهت شارژ حساب کاربری خود، کلمه "شماره حساب" را برای پشتیبانی ارسال نمایید.</span>
</div>
<BasicButton>
<a class="w-full" href="">
پیام به پشتیبانی
</a>
</BasicButton>
</div>
<template #footer>
<a-button type="primary" class="w-full" @click="chargeAccountModal = false">
متوجه شدم
</a-button>
</template>
</BasicModal>
</div>
</template>
<script lang="ts" setup>
import {computed, onMounted, ref} from 'vue'
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";
const isDeposit = ref<boolean>(true)
const walletStore = useWalletStore()
const userStore = useUserStore()
const showAddCard = ref<boolean>(false)
const chargeAccountModal = ref<boolean>(false)
const showConfirmCode = ref<boolean>(false)
const refOtpInput = ref<InstanceType<typeof VOtpInput> | null>(null)
const config = useConfigStore()
onMounted(() => {
if (router.currentRoute.value.query.state === 'deposit') {
isDeposit.value = true
}
walletStore.getMyWallet()
isDeposit.value = true
})
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 (walletStore?.walletInfo?.cash && !isDeposit.value) {
if (cardItems.value.length > 0) {
return (
walletStore?.walletInfo?.cash <= 0 ||
walletStore?.walletInfo?.cash < 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 (walletStore?.walletInfo?.cash ?? 0) / 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('عملیات با موفقیت انجام شد')
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;
}
}
@media screen and (min-width: 426px) {
.add-card {
position: absolute;
}
}
</style>