1159 lines
43 KiB
Vue
1159 lines
43 KiB
Vue
<template>
|
|
<div class=" mt-20 ">
|
|
|
|
<!-- <div class="flex gap-7 overflow-x-scroll px-5">
|
|
<ProductInventory v-for="item in productInventorys" :ProductItem="item" class="shadow-lg my-5" :key="item.id"></ProductInventory>
|
|
</div>-->
|
|
<div>
|
|
<div
|
|
v-if="userStore.userInfo && !loading"
|
|
class="bg-white w-screen md:w-auto h-fit px-5 m-[-1px]"
|
|
>
|
|
<div
|
|
v-if="limitedPrice !== undefined && userStore?.userInfo.trade_active !== 1"
|
|
class="text-red text-xs flex gap-1 items-center justify-center mb-2"
|
|
>
|
|
<Icon icon="vuesax-linear:info-circle" size="16"/>
|
|
حداقل مبلغ اولیه برای ثبت سفارش
|
|
{{ usePriceWithoutType(limitedPrice.value as number ?? 0) }} ریال می باشد.
|
|
</div>
|
|
|
|
<!-- <div class="bg-white">
|
|
<MySlider v-if="cardItems.length > 0" :items="cardItems" class=" pb-[20vh] "
|
|
style="touch-action: none" />
|
|
</div>-->
|
|
<!-- <div class="bg-gradient-to-l mt-3 p-1 shadow-lg from-primary rounded-lg p-px to-transparent ">-->
|
|
<div class=" p-1 shadow-lg from-primary rounded-lg p-px to-transparent" :class="getConfigApp('name')=='garoosi'?'mt-0':'mt-5'">
|
|
<div v-if="getConfigApp('name')=='garoosi'" class="flex justify-between px-2 mb-2 ">
|
|
<div class="flex gap-1">
|
|
<div >دارایی طلایی:</div>
|
|
<div class="font-bold">{{ (userStore?.userInfo?.wallet?.count_gold ?? 0).toFixed(3) }}گرم</div>
|
|
</div>
|
|
<div class="flex gap-1">
|
|
<div>دارایی ریالی:</div>
|
|
<div class="font-bold">{{
|
|
usePriceWithoutType(userStore?.userInfo?.wallet?.count_cash ?? 0)
|
|
}}ریال</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-2 py-3 rounded-lg bg-tertiary">
|
|
<div class="flex justify-between ">
|
|
<!-- <div
|
|
class="text-center w-full flex-flex-col items-center home_appear_fade_in_up"
|
|
style="text-align: -webkit-center"
|
|
@click="router.push({ name: 'buyProduct', query: { state: 'sell' } })"
|
|
>
|
|
<div
|
|
class="rounded-full w-[42px] h-[42px] bg-primary flex items-center justify-center"
|
|
style="border: solid 1px #0A1B37"
|
|
|
|
>
|
|
<Icon class="text-tertiary" icon="vuesax-linear:money-send" />
|
|
</div>
|
|
<div class="text-primary">فروش</div>
|
|
</div>-->
|
|
<div
|
|
class="text-center w-full flex-flex-col items-center home_appear_fade_in_up"
|
|
style="text-align: -webkit-center"
|
|
@click="router.push({ name: 'buyProduct' })"
|
|
>
|
|
<div
|
|
class="rounded-full w-[50px] h-[50px] bg-primary flex items-center justify-center"
|
|
style="border: solid 1px #0A1B37"
|
|
|
|
>
|
|
<Icon class="text-tertiary" icon="vuesax-linear:money-receive"/>
|
|
</div>
|
|
<div class="text-primary">خرید و فروش</div>
|
|
</div>
|
|
|
|
<div
|
|
class="text-center w-full flex-flex-col items-center home_appear_fade_in_down"
|
|
style="text-align: -webkit-center"
|
|
@click="router.push({ name: 'wallet', query: { state: 'deposit' } })"
|
|
>
|
|
<div
|
|
class="rounded-full w-[50px] h-[50px] bg-primary flex items-center justify-center"
|
|
style="border: solid 1px #0A1B37"
|
|
|
|
>
|
|
<Icon class="text-tertiary" icon="vuesax-linear:card-add"/>
|
|
</div>
|
|
<div v-if="getConfigApp('name')=='garoosi'" class="text-primary">واریز و برداشت</div>
|
|
<div v-else class="text-primary">واریز نقدی</div>
|
|
</div>
|
|
|
|
<div
|
|
class="text-center w-full flex-flex-col items-center home_appear_fade_in_up"
|
|
style="text-align: -webkit-center"
|
|
@click="openWholeBalanceVisible()"
|
|
>
|
|
<div
|
|
class="rounded-full w-[50px] h-[50px] bg-primary flex items-center justify-center "
|
|
style="border: solid 1px #0A1B37"
|
|
>
|
|
<Icon class="text-tertiary" icon="vuesax-linear:receipt-item"/>
|
|
</div>
|
|
<div class="text-primary">موجودی</div>
|
|
</div>
|
|
<div v-if="getConfigApp('name')=='garoosi'"
|
|
class="text-center w-full flex-flex-col items-center home_appear_fade_in_down"
|
|
style="text-align: -webkit-center"
|
|
@click="shareCode()"
|
|
>
|
|
<div
|
|
class="rounded-full w-[50px] h-[50px] bg-primary flex items-center justify-center"
|
|
style=" border: solid 1px #0A1B37"
|
|
|
|
>
|
|
<Icon class="text-tertiary font-bold" icon="vuesax-linear:share"/>
|
|
</div>
|
|
<div class="text-primary">دعوت از دوستان</div>
|
|
</div>
|
|
<div v-else
|
|
class="text-center w-full flex-flex-col items-center home_appear_fade_in_down"
|
|
style="text-align: -webkit-center"
|
|
@click="router.push({ name: 'fund' })"
|
|
>
|
|
<div
|
|
class="rounded-full w-[50px] h-[50px] bg-primary flex items-center justify-center"
|
|
style=" border: solid 1px #0A1B37"
|
|
|
|
>
|
|
<Icon class="text-tertiary font-bold" icon="vuesax-linear:cup"/>
|
|
</div>
|
|
<div class="text-primary">دارایی ها</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- <ADivider></ADivider>-->
|
|
<div>
|
|
<!-- <div @click="router.push({ name: 'fund' })">-->
|
|
<div v-if="getConfigApp('name')=='garoosi'" class="bg-primary rounded-lg p-2 py-1 mt-2">
|
|
<div class="p-2">
|
|
<div
|
|
v-if="userStore.userInfo?.referral_id"
|
|
class="text-tertiary font-bold w-full text-center flex justify-between gap-2 items-center"
|
|
>
|
|
کد معرف:
|
|
<div class="flex gap-2">
|
|
<div class="mr-2">{{ userStore.userInfo?.referral_id }}</div>
|
|
<!-- <BasicIcon icon="vuesax-linear:copy" color="#2563EB" class="cursor-pointer" size="18"
|
|
@click.stop="copyCode()" />
|
|
<!– vuesax-linear:hierarchy-3–>
|
|
<BasicIcon icon="vuesax-linear:share" color="#2563EB" class="cursor-pointer" size="18"
|
|
@click.stop="shareCode()" />-->
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex gap-2 mt-1">
|
|
<BasicButton
|
|
icon="vuesax-linear:share"
|
|
size="small"
|
|
class="flex-1 !bg-primary !border-tertiary !text-tertiary "
|
|
icon-size="18"
|
|
@click.stop="shareCode()"
|
|
>
|
|
{{ getConfigApp('name') == 'garoosi' ? 'دعوت از دوستان' : ' اشتراک گذاری' }}
|
|
</BasicButton>
|
|
<BasicButton
|
|
icon="vuesax-linear:copy"
|
|
size="small"
|
|
class="flex-1 !bg-primary !border-tertiary !text-tertiary"
|
|
icon-size="18"
|
|
@click.stop="copyCode()"
|
|
>
|
|
رونوشت
|
|
</BasicButton>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div v-else class="bg-primary rounded-lg p-2 py-3 mt-2">
|
|
<div class="flex justify-center text-tertiary w-full z-20">
|
|
محصولات:
|
|
<div class="text-l mr-2 font-bold">{{ userStore?.userInfo?.wallet?.count_product ?? 0 }}عدد</div>
|
|
</div>
|
|
<div class="flex mt-2 justify-center text-tertiary w-full z-20">
|
|
دارایی طلایی:
|
|
<div class="text-l mr-2 font-bold">{{ (userStore?.userInfo?.wallet?.count_gold ?? 0).toFixed(3) }}گرم
|
|
</div>
|
|
<BasicIcon @click="openGoldModal" icon="vuesax-linear:info-circle" size="18" color="tertiary"/>
|
|
</div>
|
|
<div class="flex mt-2 justify-center text-tertiary w-full z-20">
|
|
دارایی ریالی:
|
|
<div class="text-l mr-2 font-bold">{{
|
|
usePriceWithoutType(userStore?.userInfo?.wallet?.count_cash ?? 0)
|
|
}}ریال
|
|
</div>
|
|
<BasicIcon @click="openRialModal" icon="vuesax-linear:info-circle" size="18" color="tertiary"/>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="flex justify-center mt-2 w-full z-20">
|
|
دارایی ریالی:
|
|
<div class="text-l mr-4 font-bold">{{ usePriceWithoutType(walletStore.walletInfo?.count_cash ?? 0) }}ریال</div>
|
|
</div>-->
|
|
<!-- <div class="flex justify-center mt-2 w-full z-20">
|
|
<BasicInfoItem
|
|
title="دارایی ریالی"
|
|
is-line
|
|
:info="`در این قسمت مجموع کیف پول ریالی (${usePrice(walletStore?.walletInfo?.count_cash_wallet ?? 0) }) + معادل ریالی محصولات (${ usePrice(walletStore?.walletInfo?.count_cash_wallets ?? 0)} ) را مشاهده میفرمایید.`"
|
|
infoHead="مجموع کل دارایی ریالی"
|
|
:value="usePriceWithoutType(walletStore.walletInfo?.count_cash ?? 0) + ' ریال'"
|
|
/>
|
|
</div>-->
|
|
</div>
|
|
<!-- <div class="flex justify-between">
|
|
<div class="text-center font-bold">دارایی شما</div>
|
|
<div class="flex items-center gap-2 mr-4">
|
|
<span class="text-base font-bold">{{ usePriceWithoutType(walletStore.walletInfo?.cash ?? 0) }}</span>
|
|
<span class="text-xs text-base">ریال</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 ml-4">
|
|
<span class="text-base font-bold">{{ walletStore.walletInfo?.gold_sum.toFixed(3) }}</span>
|
|
<span class="text-xs text-base">گرم</span>
|
|
</div>
|
|
</div>-->
|
|
<!-- <div class="flex justify-between items-center ">
|
|
<div class="text-sm">
|
|
موجودی کیف پول شما:
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-base font-bold">{{ usePrice(walletStore.walletInfo?.cash ?? 0) }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-between items-center ">
|
|
<div class="text-sm">
|
|
موجودی کیف طلای شما:
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-base font-bold">{{ walletStore.walletInfo?.gold }}</span>
|
|
<span class="text-xs text-gray-500">گرم</span>
|
|
</div>
|
|
</div>-->
|
|
<!-- <div class="flex justify-between items-center ">
|
|
<div class="text-sm">
|
|
ارزش کل طلا های شما:
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-base font-bold">{{ walletStore.walletInfo?.gold_sum }}</span>
|
|
<span class="text-xs text-gray-500">گرم</span>
|
|
</div>
|
|
</div>-->
|
|
<!-- <div class="flex justify-between items-center ">
|
|
<div class="text-sm">
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<div v-if="walletStore.walletInfo?.gold_sum*goldVal">
|
|
<Vue3Odometer
|
|
:value="walletStore.walletInfo?.gold_sum*goldVal"
|
|
class="o-text !text-base font-bold"
|
|
style="font-family: iran-sans; direction: ltr"
|
|
v-if="key % 2 === 0"
|
|
/>
|
|
</div>
|
|
|
|
<span class="text-xs text-gray-500">ریال</span>
|
|
</div>
|
|
</div>-->
|
|
</div>
|
|
<div v-if="userStore.getValueByKey('closed_message') && lastPrice?.goldir==0 && lastPrice?.price_last==0 "
|
|
class="bg-red-50 text-red-600 text-center font-500 py-4 px-2 mt-2 rounded-lg "
|
|
v-html="userStore.getValueByKey('closed_message')"
|
|
></div>
|
|
<div
|
|
class="w-full relative mt-2 border-gray-200 border-1 rounded-lg py-3 flex flex-col justify-center home_appear_fade_in"
|
|
>
|
|
<div class="w-full items-center flex justify-center">
|
|
<!-- <div class="text-gray-600 text-[12px] ml-2">قیمت خرید از {{ useConfigStore().config.name_fa }}</div> -->
|
|
<div v-if="price" class="flex gap-1 text-xs items-center">
|
|
<!-- <div id="odometer" class="font-bold text-2xl odometer animated fadeIn">
|
|
<!– {{ usePriceWithoutType(useCounterAnim(price.price_last) ?? 0) }}–>
|
|
</div>-->
|
|
<!-- <div id="odometer" class="odometer animated fadeIn"></div>-->
|
|
<div v-if="percentPriceChanged()!=0"
|
|
class="bg-green-100 text-green-600 flex flex-row-reverse rounded-lg justify-between items-center gap-2 px-3"
|
|
:class="percentPriceChanged()>=0?'bg-green-100 text-green-600':'bg-red-100 text-red-600'">
|
|
<div dir="ltr">{{ useTowDecimal(percentPriceChanged()) }}%</div>
|
|
<div>
|
|
<icon v-if="percentPriceChanged()<0" size="15px" icon="vuesax-linear:received" color="red-600"></icon>
|
|
<icon v-else size="15px" icon="vuesax-linear:send" color="green-600"></icon>
|
|
</div>
|
|
</div>
|
|
<Vue3Odometer
|
|
:value="goldVal"
|
|
class="o-text !text-xl font-bold"
|
|
style="font-family: iran-sans; direction: ltr"
|
|
v-if="key % 2 === 0"
|
|
/>
|
|
ریال
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="flex mt-5 gap-1 bg-primary text-tertiary cursor-pointer font-bold justify-center rounded-lg py-5"
|
|
@click="router.push({ name: 'buyProduct' })">
|
|
<div>خرید و فروش</div>
|
|
</div>-->
|
|
<div
|
|
v-if="bannerEnabled && banners?.length > 0"
|
|
class="w-full relative mt-2 flex flex-col justify-center home_appear_fade_in overflow-hidden rounded-lg"
|
|
>
|
|
<div class="w-full aspect-[2.8/1] min-h-[10rem] max-h-[14rem]">
|
|
<swiper
|
|
:modules="bannerSwiperModules"
|
|
:slides-per-view="1"
|
|
:space-between="6"
|
|
:autoplay="{ delay: 4000, disableOnInteraction: false }"
|
|
:pagination="{ clickable: true }"
|
|
class="banner-swiper h-full w-full rounded-lg"
|
|
>
|
|
<swiper-slide v-for="(banner, index) in banners" :key="index" class="!h-full">
|
|
<img
|
|
v-if="banner.show"
|
|
class="banner-img w-full h-full object-cover rounded-lg block"
|
|
:src="banner.icon"
|
|
:alt="banner.caption || ''"
|
|
@click="handleBannerClick(banner)"
|
|
:style="(banner.link || banner.typeClick=='share') ? 'cursor: pointer;' : ''"
|
|
/>
|
|
</swiper-slide>
|
|
</swiper>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- <div class="mt-10 font-bold home_appear_fade_in" @click="update">
|
|
نوسانات قیمت هر گرم طلای 18 عیار
|
|
</div>-->
|
|
|
|
<!-- <a-spin :spinning="chartLoading" class="relative">
|
|
<div ref="target" class="absolute"></div>
|
|
<div v-if="!chartLoading" id="chart" class="pb-20 mt-7 overflow-x-auto">
|
|
<!– <apexchart v-if="targetIsVisible" :options="chartOptions" :series="test_series"
|
|
:style="`width: ${chartWidth}`"
|
|
height="350"
|
|
type="candlestick"></apexchart>–>
|
|
</div>
|
|
</a-spin>-->
|
|
<!-- <a-spin :spinning="chartLoading" >-->
|
|
<!-- <div ref="target" class="absolute"></div>-->
|
|
<!-- <div id="chart" class="mt-7">-->
|
|
<div class="bg-gray-50 w-full flex justify-evenly rounded-lg py-4 mt-4 h-[15rem]">
|
|
<div class="w-full text-center pt-2">
|
|
<a-radio-group v-model:value="value" button-style="solid">
|
|
<a-radio-button value="a" @click="updateData('DAILY')">24 ساعت اخیر</a-radio-button>
|
|
<a-radio-button value="b" @click="updateData('WEEKLY')">هفته گذشته</a-radio-button>
|
|
<a-radio-button value="c" @click="updateData('MONTHLY')">ماه گذشته</a-radio-button>
|
|
</a-radio-group>
|
|
<div id="chart-timeline">
|
|
<apexchart
|
|
type="area"
|
|
height="200"
|
|
ref="chart"
|
|
:options="priceChartOptions"
|
|
:series="priceChartSeries"
|
|
></apexchart>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class=" w-full flex justify-evenly rounded-lg py-2 home_appear_fade_in mt-6 pb-20">
|
|
<div class="text-center w-full">
|
|
<div>بالاترین قیمت امروز</div>
|
|
<div v-if="lastPrice" class="flex flex-col items-center mt-3">
|
|
<div class="text-green-600 flex gap-1 text-xs items-center">
|
|
<div class="text-base">{{ usePriceWithoutType(price?.buy ?? 0) }}</div>
|
|
ریال
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a-divider class="bg-gray-200 !h-auto !my-2" type="vertical"/>
|
|
<div class="text-center w-full">
|
|
<div>پایین ترین قیمت امروز</div>
|
|
<div class="flex w-full mt-3 justify-evenly">
|
|
<div v-if="lastPrice" class="flex flex-col items-center">
|
|
<div class="text-red-600 flex gap-1 text-xs items-center">
|
|
<div class="text-base">{{ usePriceWithoutType(price?.sell ?? 0) }}</div>
|
|
ریال
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div v-else class="bg-white w-screen md:w-auto h-[80vh] px-5 m-[-1px] flex justify-center ">
|
|
<HomeSkeleton class="w-full"/>
|
|
</div>
|
|
<!-- <div class="relative pt-15 overflow-hidden ">-->
|
|
<!-- <div class="absolute left--12 top-0">-->
|
|
<!-- <img :src="image">-->
|
|
<!-- </div>-->
|
|
<!-- <div class="bg-primary pb-30"-->
|
|
<!-- style="background: linear-gradient(to bottom, #fff,#fff, #0A1B37, #0A1B37);"-->
|
|
<!-- >-->
|
|
<!-- <div class=" text-tertiary text-2xl pt-6 pr-5 pl-50" style="font-size: 26px;font-weight: 600; color: #0A1B37" >ارسال کالا بعد از ثبت سفارش</div>-->
|
|
<!-- <div class="pr-5 pl-8 pt-10 text-tertiary ">میتوانید با خرید محصولات بعد از ثبت سفارش درخواست ارسال را-->
|
|
<!-- ثبت کرده و زیر 24 ساعت خرید خود را دریافت کنید-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
</div>
|
|
<div
|
|
:class="y > 50 ? 'bg-white shadow opacity-95' : ''"
|
|
class="px-4 py-2 top-0 z-5 wrap-fix background-color-transition"
|
|
>
|
|
<div class="flex justify-between my-2">
|
|
<div class="flex items-center gap-2" @click.stop="router.push({ name: 'user' })">
|
|
<!-- <img :src="testimg" alt="" class="w-[24px] h-[24px]">-->
|
|
<div
|
|
class="z-100000 rounded-full border-1"
|
|
:class="y > 50 ? 'text-primary border-primary' : 'text-primary border-primary'"
|
|
>
|
|
<Icon icon="vuesax-linear:user" size="20"/>
|
|
</div>
|
|
<div :class="y > 50 ? 'text-primary' : 'text-primary'" class="color-transition font-bold">
|
|
{{ userStore.userInfo?.name }}
|
|
</div>
|
|
</div>
|
|
<Icon
|
|
:color="y > 50 ? '#0A1B37' : '#0A1B37'"
|
|
class="color-transition"
|
|
icon="vuesax-linear:logout"
|
|
@click="showLogoutConfirm = true"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<DialogVant v-model:show="showLogoutConfirm" :closeOnClickOverlay="false" :timeOut="-1">
|
|
<!-- <template v-slot:img>
|
|
<img :src="registerDelayImage" alt="" class="opacity-80">
|
|
</template>-->
|
|
|
|
<template v-slot:title>
|
|
<div class="flex flex-col items-center">
|
|
<DotLottieVue
|
|
class="w-11rem h-11rem"
|
|
autoplay
|
|
src="https://lottie.host/129cf3a1-df84-4758-a856-58c133ae6013/R5RqclXA8G.json"
|
|
/>
|
|
<div class="p-5 text-sm">آیا از خروج خود اطمینان دارید؟</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-slot:button>
|
|
<div class="text-center text-red flex items-center justify-center" @click="logout">
|
|
<a-spin :spinning="logoutLoading" size="small"> خروج</a-spin>
|
|
</div>
|
|
<div class="text-center" @click="showLogoutConfirm = false">انصراف</div>
|
|
</template>
|
|
</DialogVant>
|
|
</div>
|
|
<BasicActionSheet v-model:show="wholeBalanceVisible">
|
|
<div class="pb-20">
|
|
<div>
|
|
<div class="w-full text-center font-bold">موجودی ها</div>
|
|
<div class="h-30vh overflow-y-auto">
|
|
<div class="mt-5">
|
|
<BasicInfoItem
|
|
class="flex justify-between"
|
|
title="مجموعه کل دارایی طلایی"
|
|
is-line
|
|
:info="`در این قسمت مجموع کل وزن طلای آبشده (${(walletStore.walletInfo?.gold ?? 0)?.toFixed(3)}) + ارزش دارایی ها (${(walletStore.walletInfo?.treasure_sum ?? 0)?.toFixed(3)} ) را مشاهده میفرمایید.`"
|
|
infoHead="مجموع کل دارایی طلایی"
|
|
:value="parseFloat((walletStore.walletInfo?.gold_sum ?? 0).toFixed(2)) + ' گرم'"
|
|
/>
|
|
<!-- <a-divider class="!my-1" />
|
|
<BasicInfoItem
|
|
class="flex justify-between"
|
|
title="میزان طلای آبشده"
|
|
is-line
|
|
:value="parseFloat((walletStore.walletInfo?.gold ?? 0)?.toFixed(3)) + ' گرم'"
|
|
/>
|
|
<a-divider class="!my-1" />
|
|
<BasicInfoItem
|
|
class="flex justify-between"
|
|
title="ارزش گنج ها"
|
|
is-line
|
|
:value="parseFloat((walletStore.walletInfo?.treasure_sum ?? 0)?.toFixed(3)) + ' گرم'"
|
|
/>-->
|
|
<a-divider class="!my-1"/>
|
|
<BasicInfoItem
|
|
class="flex justify-between"
|
|
title="دارایی کیف پول ریالی"
|
|
is-line
|
|
:value="usePrice(walletStore.walletInfo?.cash ?? 0)"
|
|
/>
|
|
<a-divider class="!my-1"/>
|
|
<BasicInfoItem
|
|
class="flex justify-between"
|
|
title="دارایی کیف پول طلایی"
|
|
is-line
|
|
:value="(walletStore.walletInfo?.count_gold_wallet ?? 0) + ' گرم'"
|
|
/>
|
|
<a-divider class="!my-1"/>
|
|
<BasicInfoItem
|
|
v-if="nameProject === 'goldsun'"
|
|
class="flex justify-between"
|
|
title="دارایی کیف پول نقره"
|
|
is-line
|
|
:value="(walletStore.walletInfo?.count_silver ?? 0) + ' گرم'"
|
|
/>
|
|
<a-divider v-if="nameProject === 'goldsun'" class="!my-1"/>
|
|
<BasicInfoItem
|
|
v-if="nameProject === 'goldsun'"
|
|
class="flex justify-between"
|
|
title="دارایی کیف پول مس"
|
|
is-line
|
|
:value="(walletStore.walletInfo?.count_copper ?? 0) + ' گرم'"
|
|
/>
|
|
<a-divider v-if="nameProject === 'goldsun'" class="!my-1"/>
|
|
|
|
<BasicInfoItem
|
|
class="flex justify-between"
|
|
title="معادل ریالی مجموع دارایی ها"
|
|
is-line
|
|
:value="usePrice(walletStore.walletInfo?.count_cash_total ?? 0)"
|
|
/>
|
|
<a-divider class="!my-1"/>
|
|
<!-- <BasicInfoItem class="flex justify-between" title="دارایی کیف پول(به گرم)" is-line
|
|
:value="((walletStore.walletInfo?.cash?? 0) / (goldVal?? 0)).toFixed(2)+ ' گرم'" />
|
|
<a-divider class="!my-1" />-->
|
|
<!-- <BasicInfoItem
|
|
class="flex justify-between"
|
|
title="ارزش کل دارایی شما"
|
|
is-line
|
|
:value="
|
|
usePrice(
|
|
(
|
|
(walletStore.walletInfo?.gold_sum ?? 0) * (goldVal ?? 0) +
|
|
(walletStore.walletInfo?.cash ?? 0)
|
|
).toFixed(0)
|
|
)
|
|
"
|
|
/>-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</BasicActionSheet>
|
|
<BasicModal v-model:visible="showTextBanner" :custom-footer="true" destroyOnClose="true">
|
|
<div class="max-h-[54vh]">
|
|
<div class="w-full ql-editor " v-html="TextBanner">
|
|
</div>
|
|
</div>
|
|
</BasicModal>
|
|
<BasicModal v-model:visible="showShare" :custom-footer="true">
|
|
<div class="p-2">
|
|
<div
|
|
v-if="userStore.userInfo?.referral_id"
|
|
class="text-primary font-bold w-full text-center flex justify-between gap-2 items-center"
|
|
>
|
|
کد معرف:
|
|
<div class="flex gap-2">
|
|
<div class="mr-2">{{ userStore.userInfo?.referral_id }}</div>
|
|
<!-- <BasicIcon icon="vuesax-linear:copy" color="#2563EB" class="cursor-pointer" size="18"
|
|
@click.stop="copyCode()" />
|
|
<!– vuesax-linear:hierarchy-3–>
|
|
<BasicIcon icon="vuesax-linear:share" color="#2563EB" class="cursor-pointer" size="18"
|
|
@click.stop="shareCode()" />-->
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex gap-2 mt-1">
|
|
<BasicButton
|
|
icon="vuesax-linear:share"
|
|
size="small"
|
|
class="flex-1"
|
|
icon-size="18"
|
|
@click.stop="shareCode()"
|
|
>
|
|
{{ getConfigApp('name') == 'garoosi' ? 'دعوت از دوستان' : ' اشتراک گذاری' }}
|
|
</BasicButton>
|
|
<BasicButton
|
|
icon="vuesax-linear:copy"
|
|
size="small"
|
|
class="flex-1"
|
|
icon-size="18"
|
|
@click.stop="copyCode()"
|
|
>
|
|
رونوشت
|
|
</BasicButton>
|
|
</div>
|
|
</div>
|
|
</BasicModal>
|
|
</template>
|
|
|
|
<script lang="tsx" setup>
|
|
import img from '@/assets/img/home_ly1.svg'
|
|
import Icon from '@/components/BasicPacks/BasicIcon.vue'
|
|
import {usePrice, usePriceWithoutType, useTowDecimal} from '../../../utils/usePrice'
|
|
import {computed, onMounted, onUnmounted, ref, watch} from 'vue'
|
|
import router from '@/router'
|
|
import * as echarts from 'echarts'
|
|
import {useIntersectionObserver, useWindowScroll} from '@vueuse/core'
|
|
import {loading, removeToken} from '@/utils'
|
|
import {useUserStore} from '@/store/userStore'
|
|
import {useWalletStore} from '@/store/walletStore'
|
|
import DialogVant from '@/components/DialogVant.vue'
|
|
import {getAllPrices, getChart} from '@/api/home'
|
|
import Vue3Odometer from 'vue3-odometer'
|
|
import 'odometer/themes/odometer-theme-default.css'
|
|
import 'quill/dist/quill.core.css';
|
|
|
|
import HomeSkeleton from '@/views/base/home/components/HomeSkeleton.vue'
|
|
import {
|
|
getLastPrices,
|
|
getUpPrice,
|
|
lastPrice,
|
|
percentPriceChanged,
|
|
price,
|
|
setIntervalGetAllPrice,
|
|
stopPriceInterval
|
|
} from '@/utils/price'
|
|
import {DotLottieVue} from '@lottiefiles/dotlottie-vue'
|
|
import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
|
|
import BasicInfoItem from '@/components/BasicPacks/BasicInfoItem.vue'
|
|
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
|
|
import type {PInventory} from '@/models/products'
|
|
import type {Fund} from '@/models/fund'
|
|
import type {TableOutput} from '@/models/table'
|
|
import {useFundUserStore} from '@/store/fundStore'
|
|
import {message, Modal} from "ant-design-vue";
|
|
import {useConfigStore} from "@/store/configStore";
|
|
import {useSettingsStore} from '@/store/settingsStore'
|
|
import {Swiper, SwiperSlide} from 'swiper/vue'
|
|
import {Autoplay, Pagination} from 'swiper/modules'
|
|
import 'swiper/swiper-bundle.css'
|
|
import 'swiper/css/pagination'
|
|
import {getConstByKey} from '@/api/const'
|
|
import type {IBenefits} from "@/models/banner";
|
|
import BasicModal from "@/components/BasicPacks/BasicModal.vue";
|
|
import {getConfigApp, getReferralShareText, getReferralShareTitle} from "@/utils/config";
|
|
import BasicButton from "@/components/BasicPacks/BasicButton.vue";
|
|
|
|
const bannerSwiperModules = [Autoplay, Pagination]
|
|
const nameProject = useConfigStore().config.name
|
|
const settingsStore = useSettingsStore()
|
|
const bannerEnabled = computed(() => settingsStore.isSettingTruthy('banner_enabled'))
|
|
const userStore = useUserStore()
|
|
const walletStore = useWalletStore()
|
|
const wholeBalanceVisible = ref<boolean>(false)
|
|
const {x, y} = useWindowScroll()
|
|
const series = ref<Chart[]>([{data: []}])
|
|
const key = ref<number>(0)
|
|
const main = ref(null)
|
|
const logoutLoading = ref(false)
|
|
const productInventorys = ref<PInventory[] | undefined>()
|
|
const value = ref<string>('a')
|
|
const items = ref<Fund[]>([])
|
|
const tableOutput = ref<TableOutput<Fund> | null>(null)
|
|
const inventory = ref<number>(0)
|
|
const sumGold = ref<number>(0)
|
|
const fundStore = useFundUserStore()
|
|
const config = useConfigStore()
|
|
const showTextBanner = ref<boolean>(false)
|
|
const showShare = ref<boolean>(false)
|
|
const TextBanner = ref<string>('')
|
|
|
|
function shareCode() {
|
|
const val = getReferralShareText({
|
|
userName: userStore.userInfo?.name,
|
|
projectName: nameProject,
|
|
referralId: userStore.userInfo?.referral_id,
|
|
})
|
|
navigator.share({
|
|
title: getReferralShareTitle(nameProject),
|
|
text: val
|
|
})
|
|
}
|
|
|
|
function copyCode() {
|
|
// nextTick(() => {
|
|
const val = userStore.userInfo?.referral_id
|
|
console.log(val)
|
|
navigator.clipboard.writeText(val)
|
|
message.info('کد رونوشت شد')
|
|
// })
|
|
}
|
|
|
|
async function initTable() {
|
|
try {
|
|
loading.value = true
|
|
tableOutput.value = fundStore.myFunds ?? await fundStore.getMyFund() ?? null
|
|
items.value.push(...tableOutput.value?.rows ?? [])
|
|
} catch (e) {
|
|
console.log(e)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const banners = ref<Array<IBenefits>>([])
|
|
|
|
async function initBanners() {
|
|
try {
|
|
const response = await getConstByKey('header_banner')
|
|
if (response == null) return
|
|
|
|
let list: Array<{ icon: string; show: boolean; caption: string | null; link: string | null }> = []
|
|
|
|
// پاسخ مستقیم بهصورت رشتهٔ JSON
|
|
if (typeof response === 'string') {
|
|
list = JSON.parse(response)
|
|
}
|
|
// پاسخ شیء با فیلد value (یک Const تکی)
|
|
else if (typeof response === 'object' && !Array.isArray(response) && 'value' in response) {
|
|
const val = (response as { value: string | unknown }).value
|
|
list = typeof val === 'string' ? JSON.parse(val) : (val as typeof list)
|
|
}
|
|
// پاسخ آرایهٔ Const با فیلد value
|
|
else if (Array.isArray(response) && response.length > 0) {
|
|
const first = response[0] as { value?: string | unknown; icon?: string }
|
|
if (first.value !== undefined && first.value !== null) {
|
|
list = typeof first.value === 'string' ? JSON.parse(first.value) : (first.value as typeof list)
|
|
} else if (first.icon !== undefined) {
|
|
list = response as typeof list
|
|
}
|
|
}
|
|
|
|
banners.value = Array.isArray(list) ? list.filter((banner: any) => banner.show === true) : []
|
|
} catch (e) {
|
|
console.log('Error loading banners:', e)
|
|
}
|
|
}
|
|
|
|
function handleBannerClick(banner: IBenefits) {
|
|
if (banner.typeClick == 'share') {
|
|
showShare.value = true
|
|
return;
|
|
}
|
|
if (banner.typeClick == 'modal') {
|
|
if (!banner.modalText) return
|
|
TextBanner.value = banner.modalText
|
|
showTextBanner.value = true
|
|
return;
|
|
}
|
|
if (banner.typeClick == 'link') {
|
|
if (!banner.link) return
|
|
|
|
if (banner.link.startsWith('http://') || banner.link.startsWith('https://')) {
|
|
window.open(banner.link, '_blank')
|
|
} else {
|
|
router.push(banner.link)
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
onUnmounted(() => {
|
|
stopPriceInterval()
|
|
})
|
|
|
|
const goldVal = ref<number | undefined>()
|
|
|
|
function openWholeBalanceVisible() {
|
|
items.value.forEach(x => {
|
|
if (x.title !== 'آبشده نقدی')
|
|
inventory.value += x?.wallet?.gold ?? 0
|
|
})
|
|
wholeBalanceVisible.value = true
|
|
}
|
|
|
|
function sumOfGold() {
|
|
items.value.forEach(x => {
|
|
if (x.title !== 'آبشده نقدی')
|
|
return sumGold.value += x?.wallet?.gold ?? 0
|
|
})
|
|
}
|
|
|
|
function update() {
|
|
setInterval(() => {
|
|
goldVal.value = lastPrice?.value.price_last
|
|
}, 500)
|
|
}
|
|
|
|
const target = ref(null)
|
|
const targetIsVisible = ref(false)
|
|
|
|
const isHidden = ref<boolean>(false)
|
|
|
|
const {stop} = useIntersectionObserver(target, ([{isIntersecting}], observerElement) => {
|
|
targetIsVisible.value = isIntersecting
|
|
console.log('saaaaa', targetIsVisible.value)
|
|
})
|
|
|
|
watch(main, (n) => {
|
|
if (main.value !== null) {
|
|
// console.log('saaaa')
|
|
const echart = echarts.init(main.value, null, {
|
|
renderer: 'candlestick'
|
|
})
|
|
echart.setOption({
|
|
xAxis: {
|
|
data: dates.value.values,
|
|
show: true
|
|
},
|
|
yAxis: {
|
|
show: false,
|
|
scale: true
|
|
},
|
|
series: [
|
|
{
|
|
type: 'candlestick',
|
|
data: series.value
|
|
}
|
|
]
|
|
})
|
|
}
|
|
})
|
|
|
|
//whole prices
|
|
const priceChartSeries = ref<{ data: [number, number][] }[]>([
|
|
{
|
|
name: 'قیمت',
|
|
data: []
|
|
}
|
|
])
|
|
const selection = ref('DAILY')
|
|
const chartRef = ref<ApexCharts | null>(null)
|
|
const priceChartOptions = ref({
|
|
chart: {
|
|
id: 'نوسانات قیمت',
|
|
type: 'candlestick',
|
|
height: 200,
|
|
toolbar: {
|
|
show: false // Disable the toolbar to remove download and other options
|
|
},
|
|
zoom: {
|
|
autoScaleYaxis: true
|
|
},
|
|
events: {
|
|
mounted(chart) {
|
|
chartRef.value = chart
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
padding: {
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
left: 0
|
|
},
|
|
yaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
stroke: {
|
|
width: 2
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
// formatter: (val) => toPersianNumber(val),
|
|
style: {
|
|
fontFamily: '\'IranSans\', sans-serif'
|
|
}
|
|
},
|
|
yaxis: {
|
|
tickAmount: 8,
|
|
show: false,
|
|
title: {
|
|
style: {
|
|
fontSize: '13px',
|
|
fontFamily: '\'IranSans\', sans-serif',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
labels: {
|
|
formatter: (val) => toPersianNumber(usePrice(val)),
|
|
style: {
|
|
fontSize: '13px',
|
|
fontFamily: '\'IranSans\', sans-serif'
|
|
}
|
|
}
|
|
},
|
|
xaxis: {
|
|
show: false,
|
|
type: 'datetime',
|
|
axisTicks: {
|
|
show: false
|
|
},
|
|
tooltip: {
|
|
enabled: false
|
|
},
|
|
labels: {
|
|
show: false,
|
|
rotate: -45,
|
|
style: {
|
|
fontFamily: '\'IranSans\', sans-serif'
|
|
}
|
|
// formatter: (val) => toPersianNumber(toJalaliNotime(new Date(val).toString()))
|
|
},
|
|
axisBorder: {
|
|
show: false
|
|
}
|
|
},
|
|
tooltip: {
|
|
x: {
|
|
// formatter: (val) => toPersianNumber(toJalaliNotime(new Date(val).toString()))
|
|
formatter: (value) => {
|
|
const date = new Date(value)
|
|
return `${date.toLocaleDateString('fa-IR')} - ${date.toLocaleTimeString('fa-IR', {
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
})}`
|
|
}
|
|
},
|
|
formatter: (val) => toPersianNumber(usePrice(val)),
|
|
style: {
|
|
fontFamily: '\'IranSans\', sans-serif'
|
|
// fontWeight: 'bold'
|
|
},
|
|
markers: {
|
|
show: false
|
|
}
|
|
},
|
|
colors: [config.config.color],
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
opacityFrom: 0.7,
|
|
opacityTo: 0.9,
|
|
stops: [0, 100]
|
|
}
|
|
}
|
|
|
|
})
|
|
const toPersianNumber = (num) => {
|
|
return num.toString().replace(/\d/g, (d) => '۰۱۲۳۴۵۶۷۸۹'[d])
|
|
}
|
|
const fetchPrices = async () => {
|
|
try {
|
|
const response = await getAllPrices()
|
|
const data = response.data?.prices
|
|
const selectedData = data[selection.value] || []
|
|
priceChartSeries.value[0].data = selectedData.map((item) => [item.timestamp, item.value - 1])
|
|
// console.log(priceChartSeries.value[0].data)
|
|
chartRef.value?.updateOptions({
|
|
series: priceChartSeries.value
|
|
})
|
|
} catch (error) {
|
|
console.error('خطا در دریافت دادهها', error)
|
|
}
|
|
}
|
|
|
|
const updateData = (timeline) => {
|
|
selection.value = timeline
|
|
fetchPrices()
|
|
}
|
|
|
|
const limitedPrice = computed(() => {
|
|
if (walletStore.limitedPrice) return walletStore?.limitedPrice[0]
|
|
})
|
|
|
|
const test_series = [
|
|
{
|
|
name: 'candle',
|
|
data: []
|
|
}
|
|
]
|
|
|
|
async function initChart() {
|
|
try {
|
|
// chartLoading.value = true
|
|
const data = await getChart()
|
|
/* data.forEach(item => {
|
|
test_series[0].data.push({
|
|
x: toJalali(item[0]),
|
|
y: item[1]
|
|
})
|
|
// console.log(x)
|
|
})*/
|
|
data.forEach((item) => {
|
|
test_series[0].data.push({
|
|
x: item[0],
|
|
y: item[1]
|
|
})
|
|
// console.log(x)
|
|
})
|
|
// console.log(test_series)
|
|
} catch (e) {
|
|
console.log(e)
|
|
} finally {
|
|
// chartLoading.value = false
|
|
}
|
|
}
|
|
|
|
async function initPrice() {
|
|
try {
|
|
|
|
// loading.value = true
|
|
const val = lastPrice?.value?.price_last
|
|
await getLastPrices()
|
|
await getUpPrice()
|
|
await setIntervalGetAllPrice()
|
|
// console.log('runhome')
|
|
if (val !== lastPrice?.value?.price_last) {
|
|
update()
|
|
/* key.value++
|
|
key.value++*/
|
|
}
|
|
/* price.value = data
|
|
lastPrice.value = dataLast*/
|
|
goldVal.value = 0
|
|
// console.log(price?.value.price_last)
|
|
if (userStore.isFirst) {
|
|
const timer = setInterval(function () {
|
|
update()
|
|
// if (current == end) {
|
|
userStore.isFirst = false
|
|
clearInterval(timer)
|
|
// }
|
|
}, 100)
|
|
} else {
|
|
goldVal.value = lastPrice.value?.price_last
|
|
}
|
|
// console.log(series.value)
|
|
} catch (e) {
|
|
console.log(e)
|
|
} finally {
|
|
// loading.value = false
|
|
}
|
|
}
|
|
|
|
async function initProductInventory() {
|
|
try {
|
|
// loading.value = true
|
|
|
|
// let { rows } = await getProductInventory()
|
|
// fundStore.myFunds
|
|
// productInventorys.value = fundStore.myFunds?.rows
|
|
productInventorys.value = items.value.sort((a, b) => {
|
|
if (a.wallet?.gold ?? 0 < b.wallet?.gold ?? 0)
|
|
return -1
|
|
if (a.wallet?.gold ?? 0 > b.wallet?.gold ?? 0)
|
|
return 1
|
|
return 0
|
|
})
|
|
// console.log(productInventorys.value)
|
|
} catch (e) {
|
|
console.log(e)
|
|
} finally {
|
|
// loading.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
loading.value = true
|
|
await initTable()
|
|
await initProductInventory()
|
|
// await initChart()
|
|
await initPrice()
|
|
await fetchPrices()
|
|
await initBanners()
|
|
update()
|
|
} catch (e) {
|
|
console.log(e)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
stopPriceInterval()
|
|
})
|
|
|
|
|
|
const showLogoutConfirm = ref<boolean>()
|
|
|
|
async function logout() {
|
|
logoutLoading.value = true
|
|
// baseConfirm('آیا از حساب کاربری خارج می شوید؟',async () => {
|
|
userStore.userInfo = undefined
|
|
walletStore.walletInfo = undefined
|
|
/* userStore.$reset()
|
|
walletStore.$reset()*/
|
|
removeToken()
|
|
await router.push({name: 'login'})
|
|
logoutLoading.value = true
|
|
window.location.reload()
|
|
// console.log('salam')
|
|
// })
|
|
}
|
|
|
|
async function openGoldModal() {
|
|
Modal.confirm({
|
|
title: `در این قسمت مجموع کل وزن طلای آبشده (${(walletStore.walletInfo?.gold ?? 0)?.toFixed(3)}) + ارزش دارایی ها (${(walletStore.walletInfo?.count_gold_wallets ?? 0)?.toFixed(3)} ) را مشاهده میفرمایید.`,
|
|
okText: 'متوجه شدم',
|
|
centered: true,
|
|
cancelButtonProps: {style: {display: 'none'}},
|
|
})
|
|
}
|
|
|
|
async function openRialModal() {
|
|
Modal.confirm({
|
|
title: `در این قسمت مجموع کیف پول ریالی (${usePrice(walletStore?.walletInfo?.count_cash_wallet ?? 0)}) + معادل ریالی محصولات (${usePrice(walletStore?.walletInfo?.count_cash_wallets ?? 0)} ) را مشاهده میفرمایید.`,
|
|
okText: 'متوجه شدم',
|
|
centered: true,
|
|
cancelButtonProps: {style: {display: 'none'}},
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
|
|
.odometer {
|
|
font-size: 60px;
|
|
//margin: 200px 0;
|
|
text-align: center;
|
|
width: 100%;
|
|
animation-duration: 3s;
|
|
}
|
|
|
|
label:focus-within {
|
|
box-shadow: none !important
|
|
}
|
|
|
|
.chart-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
}
|
|
|
|
apexchart {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
/* بنر اسلایدر — ظاهر و نقطههای pagination مشابه نمونه */
|
|
.banner-swiper {
|
|
--swiper-pagination-bottom: 0.75rem;
|
|
|
|
.swiper-slide {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.swiper-pagination-bullet {
|
|
width: 0.5rem;
|
|
height: 0.5rem;
|
|
background: rgba(0, 0, 0, 0.35);
|
|
opacity: 1;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.swiper-pagination-bullet-active {
|
|
background: #fff;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script setup lang="ts">
|
|
</script> |