1404/10/28-base
This commit is contained in:
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div ref="skeletonRatio" class="h-fit">
|
||||
<content-loader :width="skeletonSize.width" class="bg-white" height="100vh">
|
||||
<rect :width="skeletonSize.width" height="5" rx="3" ry="3" x="0" y="0"/>
|
||||
<rect :width="skeletonSize.width" height="5" rx="3" ry="3" x="0" y="84"/>
|
||||
<rect :width="5" height="85" rx="3" ry="3" x="0" y="0"/>
|
||||
<rect :width="5" :x="skeletonSize.width-5" height="85" rx="3" ry="3" y="0"/>
|
||||
<rect :width="2" :x="skeletonSize.width/2" height="60" rx="3" ry="3" y="15"/>
|
||||
<rect :width="skeletonSize.width/2-20" :x="10" height="20" rx="10" ry="10" y="15"/>
|
||||
<rect :width="skeletonSize.width/2-20" :x="skeletonSize.width/2 + 10" height="20" rx="10" ry="10" y="15"/>
|
||||
<rect :width="skeletonSize.width/2-40" :x="20" height="10" rx="5" ry="5" y="40"/>
|
||||
<rect :width="skeletonSize.width/2-40" :x="skeletonSize.width/2 + 20" height="10" rx="5" ry="5" y="40"/>
|
||||
<rect :width="skeletonSize.width/2-30" :x="15" height="18" rx="10" ry="10" y="60"/>
|
||||
<rect :width="skeletonSize.width/2-30" :x="skeletonSize.width/2 + 15" height="18" rx="10" ry="10" y="60"/>
|
||||
<circle :cx="skeletonSize.width/4-skeletonSize.width/8" cy="145" r="20"/>
|
||||
<circle :cx="skeletonSize.width/4+skeletonSize.width/8" cy="145" r="20"/>
|
||||
<circle :cx="skeletonSize.width/2+ skeletonSize.width/8" cy="145" r="20"/>
|
||||
<circle :cx="skeletonSize.width - skeletonSize.width/8" cy="145" r="20"/>
|
||||
<rect :width="50" :x="skeletonSize.width/4-skeletonSize.width/8 - 25" height="15" rx="3" ry="3" y="170"/>
|
||||
<rect :width="50" :x="skeletonSize.width/4+skeletonSize.width/8 - 25" height="15" rx="3" ry="3" y="170"/>
|
||||
<rect :width="50" :x="skeletonSize.width/2+ skeletonSize.width/8 - 25" height="15" rx="3" ry="3" y="170"/>
|
||||
<rect :width="50" :x="skeletonSize.width - skeletonSize.width/8 - 25" height="15" rx="3" ry="3" y="170"/>
|
||||
<rect :width="skeletonSize.width - 45" :x="45" height="20" rx="3" ry="3" y="230"/>
|
||||
<rect :width="skeletonSize.width" :x="0" height="80" rx="3" ry="3" y="260"/>
|
||||
<rect :width="skeletonSize.width/2 - 5" :x="0" height="50" rx="3" ry="3" y="360"/>
|
||||
<rect :width="skeletonSize.width/2 - 5" :x="skeletonSize.width/2 + 5" height="50" rx="3" ry="3" y="360"/>
|
||||
<rect :width="skeletonSize.width" :x="0" height="170" rx="3" ry="3" y="440"/>
|
||||
<!-- <rect height="20" rx="3" ry="3" width="100" x="0" y="0"/>
|
||||
<rect :width="skeletonSize.width/4 + 40" :x="skeletonSize.width/2" height="20" rx="3" ry="3" y="0"/>
|
||||
<rect height="20" rx="3" ry="3" width="80" x="0" y="30"/>
|
||||
<rect :x="skeletonSize.width - 40" height="40" rx="12" ry="12" width="40" y="0"/>
|
||||
<rect :width="skeletonSize.width" :x="0" :y="skeletonSize.height-5" height="2" rx="12" ry="12"/>-->
|
||||
<!-- <circle :cx="skeletonSize.width - 20" :cy="skeletonSize.height/2 - 10" r="20" />-->
|
||||
<!-- <rect :x="10" y="20" rx="3" ry="3" :width="skeletonSize.width - 20" height="150"/>
|
||||
<circle :cx="skeletonSize.width/2" cy="170" r="15" />
|
||||
<rect :x="skeletonSize.width/2 - skeletonSize.width/3 -10" y="190" rx="3" ry="3" :width="skeletonSize.width/3 + skeletonSize.width/3 + 20" height="20"/>
|
||||
<rect :x="skeletonSize.width/2 - skeletonSize.width/3 +20" y="220" rx="3" ry="3" :width="skeletonSize.width/3 + skeletonSize.width/3 - 40" height="20"/>-->
|
||||
<!-- <rect x="90" y="0" rx="3" ry="3" width="80" height="20" />
|
||||
<rect x="180" y="0" rx="3" ry="3" width="80" height="20" />
|
||||
<rect x="270" y="0" rx="3" ry="3" width="80" height="20" ♥/>-->
|
||||
</content-loader>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {reactive, ref, watch} from "vue";
|
||||
import {useElementSize} from "@vueuse/core";
|
||||
import {ContentLoader} from "vue-content-loader";
|
||||
|
||||
const skeletonRatio = ref(null)
|
||||
const skeletonSize = reactive(
|
||||
useElementSize(skeletonRatio, {width: 0, height: 0}, {box: 'border-box'})
|
||||
)
|
||||
/*watch(skeletonSize, () => {
|
||||
console.log(skeletonSize)
|
||||
})*/
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div v-if="props.ProductItem.wallet" class="bg-gradient-to-l from-primary rounded-lg p-px to-transparent ">
|
||||
<div class="flex flex-col gap-7 rounded-lg p-4 w-56 bg-white ">
|
||||
<div class="flex justify-between items-center font-medium text-sm">
|
||||
<div class="text-primary">موجودی {{ props.ProductItem.title }}</div>
|
||||
<BasicIcon v-if="props.ProductItem.group_type=='گوی'" stroke-width="1" size="50" color="#0A1B37" class="rotate-310" icon="vuesax-linear:grammerly"/>
|
||||
<BasicIcon v-else-if="props.ProductItem.group_type=='سکه'" stroke-width="1" size="50" color="#0A1B37" class="rotate-310" icon="vuesax-linear:coin"/>
|
||||
<BasicIcon v-else-if="props.ProductItem.group_type=='شمش'" stroke-width="1" size="50" color="#0A1B37" class="rotate-310" icon="vuesax-linear:slider-vertical"/>
|
||||
<BasicIcon v-else-if="props.ProductItem.group_type=='مکعب'" stroke-width="1" size="50" color="#0A1B37" class="rotate-310" icon="vuesax-linear:keyboard"/>
|
||||
<BasicIcon v-else-if="props.ProductItem.group_type=='آبشده'" stroke-width="1" size="50" color="#0A1B37" class="rotate-310" icon="vuesax-linear:slider-vertical"/>
|
||||
<BasicIcon v-else stroke-width="1" size="50" color="#0A1B37" class="rotate-310" icon="vuesax-linear:slider-vertical"/>
|
||||
</div>
|
||||
<div class="flex justify-between px-2 items-center ">
|
||||
<BasicIcon v-if="props.ProductItem.group_type=='گوی'" stroke-width="1" size="26" color="#0A1B37" class="rotate-310" icon="vuesax-linear:grammerly"/>
|
||||
<BasicIcon v-else-if="props.ProductItem.group_type=='سکه'" stroke-width="1" size="26" color="#0A1B37" class="rotate-310" icon="vuesax-linear:coin"/>
|
||||
<BasicIcon v-else-if="props.ProductItem.group_type=='شمش'" stroke-width="1" size="26" color="#0A1B37" class="rotate-310" icon="vuesax-linear:slider-vertical"/>
|
||||
<BasicIcon v-else-if="props.ProductItem.group_type=='مکعب'" stroke-width="1" size="26" color="#0A1B37" class="rotate-310" icon="vuesax-linear:keyboard"/>
|
||||
<BasicIcon v-else stroke-width="1" size="26" color="#0A1B37" class="rotate-310" icon="vuesax-linear:slider-vertical"/> <div class="flex justify-between gap-2 items-center">
|
||||
<span v-if="props.ProductItem.group_type=='آبشده'" class="font-bold text-secondary">{{userWallet.walletInfo?.gold??0}}</span>
|
||||
<span v-else class="font-bold text-secondary">{{props?.ProductItem.wallet?.gold??0}}</span>
|
||||
<span class="text-gray-400">{{props?.ProductItem?.unit}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import BasicIcon from "@/components/BasicPacks/BasicIcon.vue";
|
||||
import type {PInventory} from "@/models/products";
|
||||
import {useWalletStore} from "../../../../store/walletStore";
|
||||
interface Prop {
|
||||
ProductItem: PInventory
|
||||
}
|
||||
const userWallet=useWalletStore()
|
||||
const props = withDefaults(defineProps<Prop>(), {})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.text-secondary{
|
||||
font-size: large;
|
||||
--un-text-opacity: 1;
|
||||
color: #ac842f !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,364 @@
|
||||
<template>
|
||||
<div class="">
|
||||
<!-- <div class="bg-primary h-30 mt-[-3rem] z-100000000000"></div>-->
|
||||
<div class="fixed h-[60vh] bg-[#0A1B37] w-screen">
|
||||
<div class="flex w-full justify-around mt-18">
|
||||
<div class="text-center">
|
||||
<div class="text-[#E5D7CE] text-xs ">موجودی کیف طلا</div>
|
||||
<div class="flex justify-center mt-1 text-[#B79379] gap-1 items-center text-xs">
|
||||
<div class="text-white text-lg">{{ walletStore?.walletInfo?.gold ?? 0 }}</div>
|
||||
گرم
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-[#E5D7CE] text-xs ">سقف اعتبار خرید طلا</div>
|
||||
<div class="flex justify-center mt-1 text-[#B79379] gap-1 items-center text-xs">
|
||||
<div class="text-white text-lg">{{ userStore?.userInfo?.gram ?? 0 }}</div>
|
||||
گرم
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-[#E5D7CE] text-xs ">موجودی کیف پول</div>
|
||||
<div class="flex justify-center mt-1 text-[#B79379] gap-1 items-center text-xs">
|
||||
<div class="text-white text-lg">
|
||||
{{ walletStore?.walletInfo?.cash === undefined ? 0 : usePriceWithoutType(walletStore.walletInfo?.cash) }}
|
||||
</div>
|
||||
ریال
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-[9rem] relative">
|
||||
<img :src="img" alt="" class="w-screen h-[8rem]">
|
||||
<!-- <div class="w-screen bg-white w-screen h-[calc(100vh-16rem-70px)] px-5">-->
|
||||
<div v-if="userStore.userInfo && !loading" class="bg-white w-screen h-fit px-5 m-[-1px]">
|
||||
<!-- <a-alert :message="``" type="warning" show-icon/>-->
|
||||
<!-- {{limitedPrice === undefined}}-->
|
||||
<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-gray-50 w-full flex justify-evenly rounded-lg py-2">
|
||||
<div class="text-center w-full">
|
||||
<div>قیمت خرید از گلد دات آی آر</div>
|
||||
<div class="text-[10px] text-gray-500">(هر گرم طلای 18 عیار)</div>
|
||||
<div class="flex w-full mt-3 justify-evenly">
|
||||
<!-- <div class="text-[10px] gap-1 flex bg-green-100 rounded-xl px-1 text-green-600 items-center">
|
||||
<Icon icon="vuesax-linear:received" size="10"/>
|
||||
<div>2%</div>
|
||||
</div>-->
|
||||
<div v-if="price" class="flex text-gray-500 text-xs items-center gap-1">
|
||||
<div class="text-primary font-bold 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="text-[10px] text-gray-500">(هر گرم طلای 18 عیار)</div>
|
||||
<div class="flex w-full mt-3 justify-evenly">
|
||||
<!-- <div class="text-[10px] gap-1 flex bg-red-100 rounded-xl px-1 text-red-600 items-center">
|
||||
<Icon icon="vuesax-linear:send" size="10"/>
|
||||
<div>3%</div>
|
||||
</div>-->
|
||||
<div v-if="price" class="flex text-gray-500 text-xs items-center gap-1">
|
||||
<div class="text-primary font-bold text-base">{{ usePriceWithoutType(price.sell ?? 0) }}</div>
|
||||
ریال
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between mt-8">
|
||||
<div class="text-center w-full flex-flex-col items-center" style="text-align: -webkit-center"
|
||||
@click="isSingle?router.push({name:'single_gold', query:{state: 'sell'}}): router.push({name:'gold', query:{state: 'sell'}})">
|
||||
<div class="rounded-full w-[42px] h-[42px] bg-orange-100 flex items-center justify-center">
|
||||
<Icon class="text-orange-600" icon="vuesax-linear:money-send"/>
|
||||
</div>
|
||||
<div class="text-primary">فروش</div>
|
||||
</div>
|
||||
<div class="text-center w-full flex-flex-col items-center" style="text-align: -webkit-center"
|
||||
@click="router.push({name:'wallet', query:{state: 'deposit'}})">
|
||||
<div class="rounded-full w-[42px] h-[42px] bg-green-100 flex items-center justify-center">
|
||||
<Icon class="text-green-600" icon="vuesax-linear:card-add"/>
|
||||
</div>
|
||||
<div class="text-primary">واریز نقدی</div>
|
||||
</div>
|
||||
<div class="text-center w-full flex-flex-col items-center" style="text-align: -webkit-center"
|
||||
@click="router.push({name:'gold', query:{state: 'buy'}})">
|
||||
<div class="rounded-full w-[42px] h-[42px] bg-blue-100 flex items-center justify-center">
|
||||
<Icon class="text-blue-600" icon="vuesax-linear:money-receive"/>
|
||||
</div>
|
||||
<div class="text-primary">خرید</div>
|
||||
</div>
|
||||
<div class="text-center w-full flex-flex-col items-center" style="text-align: -webkit-center"
|
||||
@click="router.push({name: 'fund'})">
|
||||
<div class="rounded-full w-[42px] h-[42px] bg-yellow-100 flex items-center justify-center">
|
||||
<Icon class="text-yellow-600" icon="vuesax-linear:archive-1"/>
|
||||
</div>
|
||||
<div class="text-primary">گنج</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 font-bold">نمودار نوسانات قیمت هر گرم طلای 18 عیار</div>
|
||||
<div class="w-full mt-2 relative bg-gray-100 rounded-lg h-[88px] flex flex-col justify-center">
|
||||
<img :src="img1" alt="" class="h-[88px] absolute">
|
||||
<div class="w-full items-center flex flex-col">
|
||||
<div class="text-gray-600">قیمت لحظه ای طلا</div>
|
||||
<div v-if="price" class="flex gap-1 mt-3 text-xs items-center">
|
||||
<div class="font-bold text-2xl">{{ usePriceWithoutType(price.price_last ?? 0) }}</div>
|
||||
ریال
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-around mt-8">
|
||||
<div v-if="lastPrice" class="flex flex-col items-center">
|
||||
<div class="text-xs">بالاترین قیمت خرید امروز</div>
|
||||
<div class="text-green-600 flex gap-1 text-xs items-center">
|
||||
<div class="text-base">{{ usePriceWithoutType(lastPrice.buy ?? 0) }}</div>
|
||||
ریال
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="lastPrice" class="flex flex-col items-center">
|
||||
<div class="text-xs">بالاترین قیمت فروش امروز</div>
|
||||
<div class="text-red-600 flex gap-1 text-xs items-center">
|
||||
<div class="text-base">{{ usePriceWithoutType(lastPrice.sell ?? 0) }}</div>
|
||||
ریال
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<a-spin :spinning="chartLoading">
|
||||
<div id="chart" class="pb-20 mt-7 overflow-x-auto">
|
||||
<apexchart :options="chartOptions" :series="series" :style="`width: ${chartWidth}`" height="350"
|
||||
type="candlestick"></apexchart>
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
<div v-else class="bg-white w-screen h-[40vh] px-5 m-[-1px] flex justify-center">
|
||||
<a-spin :spinning="true"/>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="y>130? 'bg-white shadow opacity-95': ''"
|
||||
class=" px-4 py-2 top-0 fixed w-screen 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="y>130? 'text-primary': 'text-white'" class="color-transition font-bold">
|
||||
{{ userStore.userInfo?.mobile }}
|
||||
</div>
|
||||
</div>
|
||||
<Icon :color="y>130? 'primary': 'white'" 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="p-5 text-sm">
|
||||
آیا از خروج خود اطمینان دارید؟
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:button>
|
||||
<div class="text-center text-red" @click="logout">
|
||||
خروج
|
||||
</div>
|
||||
<div class="text-center" @click="showLogoutConfirm = false">
|
||||
انصراف
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</DialogVant>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import img from '@/assets/img/home_ly1.svg'
|
||||
import img1 from '@/assets/img/home_ly2.svg'
|
||||
import Icon from "@/components/BasicPacks/BasicIcon.vue";
|
||||
import {usePriceWithoutType} from "../../../utils/usePrice";
|
||||
import {computed, onMounted, ref, watch} from "vue";
|
||||
import router from "@/router";
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
import {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 type {Price} from "@/models/home";
|
||||
import {getChart, getLastPrice, getPrice} from "@/api/home";
|
||||
import {toJalali} from "@/utils/useDateTime";
|
||||
|
||||
|
||||
const userStore = useUserStore()
|
||||
const walletStore = useWalletStore()
|
||||
const chartLoading = ref<boolean>(false)
|
||||
const {x, y} = useWindowScroll()
|
||||
const series = ref<Chart[]>([{data: []}])
|
||||
const price = ref<Price>()
|
||||
const lastPrice = ref<Price>()
|
||||
const main = ref(null)
|
||||
|
||||
const upColor = '#ec0000';
|
||||
const upBorderColor = '#8A0000';
|
||||
const downColor = '#00da3c';
|
||||
const downBorderColor = '#008F28';
|
||||
|
||||
// const limitedPrice: Const = walletStore?.limitedPrice
|
||||
watch(main, (n) => {
|
||||
if (main.value !== null) {
|
||||
// console.log('saaaa')
|
||||
const echart = echarts.init(main.value, null, {
|
||||
renderer: 'canvas'
|
||||
})
|
||||
echart.setOption({
|
||||
xAxis: {
|
||||
data: dates.value.values,
|
||||
show: true,
|
||||
},
|
||||
yAxis: {
|
||||
show: false,
|
||||
scale: true,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'candlestick',
|
||||
data: series.value
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
})
|
||||
onMounted(() => {
|
||||
})
|
||||
|
||||
const limitedPrice = computed(() => {
|
||||
if (walletStore.limitedPrice)
|
||||
return walletStore?.limitedPrice[0]
|
||||
})
|
||||
|
||||
const limitedBuyGold = computed(() => {
|
||||
if (walletStore.limitedBuyGold)
|
||||
return walletStore?.limitedBuyGold[0]
|
||||
})
|
||||
|
||||
const chartWidth = computed(() => {
|
||||
if (series.value.length < 30)
|
||||
return '100vw'
|
||||
else if (series.value.length < 60)
|
||||
return '200vw'
|
||||
else if (series.value.length < 90)
|
||||
return '300vw'
|
||||
else if (series.value.length < 120)
|
||||
return '400vw'
|
||||
else if (series.value.length < 160)
|
||||
return '500vw'
|
||||
else if (series.value.length < 190)
|
||||
return '600vw'
|
||||
else if (series.value.length < 210)
|
||||
return '700vw'
|
||||
else if (series.value.length < 240)
|
||||
return '800vw'
|
||||
else if (series.value.length < 270)
|
||||
return '900vw'
|
||||
else if (series.value.length < 300)
|
||||
return '1000vw'
|
||||
else if (series.value.length < 330)
|
||||
return '1100vw'
|
||||
else if (series.value.length < 360)
|
||||
return '1200vw'
|
||||
else if (series.value.length < 390)
|
||||
return '1300vw'
|
||||
})
|
||||
|
||||
async function initChart() {
|
||||
try {
|
||||
chartLoading.value = true
|
||||
const data = await getChart()
|
||||
data.forEach(item => {
|
||||
series.value[0].data.push({
|
||||
x: toJalali(item[0]),
|
||||
y: item[1]
|
||||
})
|
||||
// console.log(x)
|
||||
})
|
||||
console.log(series.value)
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
} finally {
|
||||
chartLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function initPrice() {
|
||||
try {
|
||||
loading.value = true
|
||||
const data = await getPrice()
|
||||
const dataLast = await getLastPrice()
|
||||
price.value = data
|
||||
lastPrice.value = dataLast
|
||||
console.log(series.value)
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
initPrice()
|
||||
})
|
||||
|
||||
const chartOptions = ref(
|
||||
{
|
||||
chart: {
|
||||
type: 'candlestick',
|
||||
height: 600,
|
||||
toolbar: {
|
||||
autoSelected: 'pan',
|
||||
show: false
|
||||
},
|
||||
},
|
||||
title: {
|
||||
// text: 'CandleStick Chart',
|
||||
align: 'left'
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
show: false,
|
||||
showAlways: false,
|
||||
showForNullSeries: false,
|
||||
tooltip: {
|
||||
enabled: true
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
const showLogoutConfirm = ref<boolean>()
|
||||
|
||||
async function logout() {
|
||||
// baseConfirm('آیا از حساب کاربری خارج می شوید؟',async () => {
|
||||
removeToken()
|
||||
await router.push({name: 'login'})
|
||||
// console.log('salam')
|
||||
// })
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,891 @@
|
||||
<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="mt-3 p-1 shadow-lg from-primary rounded-lg p-px to-transparent">
|
||||
<div class=" p-2 py-6 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 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
|
||||
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 class="bg-primary rounded-lg p-2 py-6 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="orange" />
|
||||
</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="orange" />
|
||||
</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
|
||||
class="w-full relative mt-5 border-gray-200 border-1 rounded-lg h-[88px] flex flex-col justify-center home_appear_fade_in"
|
||||
>
|
||||
|
||||
<div class="w-full items-center flex flex-col">
|
||||
<div class="text-gray-600">قیمت خرید از گلد دات آی آر</div>
|
||||
<div v-if="price" class="flex gap-1 mt-3 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-2xl 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-[#CEA34C] font-bold justify-center rounded-lg py-5"
|
||||
@click="router.push({ name: 'buyProduct', query: { cat: 'coin'} })">
|
||||
<div>خرید و فروش</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-25">
|
||||
<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 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>
|
||||
</template>
|
||||
|
||||
<script lang="tsx" setup>
|
||||
import img from '@/assets/img/home_ly1.svg'
|
||||
import img1 from '@/assets/img/home_ly2.svg'
|
||||
import Icon from '@/components/BasicPacks/BasicIcon.vue'
|
||||
import { usePrice, usePriceWithoutType, useTowDecimal } from '../../../utils/usePrice'
|
||||
import {computed, createVNode, onMounted, onUnmounted, ref, watch, watchEffect} 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 type { Price } from '@/models/home'
|
||||
import { getAllPrices, getChart, getLastPrice, getPrice } from '@/api/home'
|
||||
// import odometer from 'odometer/odometer'
|
||||
import Vue3Odometer from 'vue3-odometer'
|
||||
import 'odometer/themes/odometer-theme-default.css'
|
||||
import HomeSkeleton from '@/views/base/home/components/HomeSkeleton.vue'
|
||||
import { toJalaliNotime } from '@/utils/useDateTime'
|
||||
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 MySlider from '@/views/base/wallet/components/mySlider/MySlider.vue'
|
||||
import type { Card, PWallet, Wallet } from '@/models/wallet'
|
||||
import { getActivatedCards } from '@/api/wallet'
|
||||
import banner1 from '@/assets/img/banner/banner1.png'
|
||||
import banner2 from '@/assets/img/banner/banner2.png'
|
||||
import image from '@/assets/img/image.svg'
|
||||
|
||||
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
|
||||
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
|
||||
import ProductInventory from '@/views/base/home/components/ProductInventory.vue'
|
||||
import type { PInventory, Product } from '@/models/products'
|
||||
import { getProductInventory } from '@/api/products'
|
||||
import type { Fund } from '@/models/fund'
|
||||
import type { TableOutput } from '@/models/table'
|
||||
import { useFundUserStore } from '@/store/fundStore'
|
||||
import {Modal} from "ant-design-vue";
|
||||
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
|
||||
import {message} from "ant-design-vue/es";
|
||||
|
||||
const userStore = useUserStore()
|
||||
const walletStore = useWalletStore()
|
||||
const chartLoading = ref<boolean>(false)
|
||||
const wholeBalanceVisible = ref<boolean>(false)
|
||||
const { x, y } = useWindowScroll()
|
||||
const series = ref<Chart[]>([{ data: [] }])
|
||||
const key = ref<number>(0)
|
||||
const cardItems = [banner1, banner2]
|
||||
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()
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
stopPriceInterval()
|
||||
})
|
||||
|
||||
/*
|
||||
onMounted(() => {
|
||||
animateNum(2)
|
||||
})
|
||||
*/
|
||||
|
||||
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: ['#0A1B37'],
|
||||
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 = price?.value?.price_last
|
||||
await getLastPrices()
|
||||
await getUpPrice()
|
||||
await setIntervalGetAllPrice()
|
||||
// console.log('runhome')
|
||||
if (val !== price?.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 = price.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()
|
||||
update()
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
stopPriceInterval()
|
||||
// console.log('okhome')
|
||||
})
|
||||
|
||||
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
@@ -0,0 +1,389 @@
|
||||
<template>
|
||||
<div class="">
|
||||
<!-- <div class="bg-primary h-30 mt-[-3rem] z-100000000000"></div>-->
|
||||
<div class="fixed h-[60vh] bg-[#0A1B37] w-screen">
|
||||
<div class="flex w-full justify-around mt-18">
|
||||
<div class="text-center">
|
||||
<div class="text-[#E5D7CE] text-xs ">موجودی کیف طلا</div>
|
||||
<div class="flex justify-center mt-1 text-[#B79379] gap-1 items-center text-xs">
|
||||
<div class="text-white text-lg">{{ walletStore?.walletInfo?.gold ?? 0 }}</div>
|
||||
گرم
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-[#E5D7CE] text-xs ">سقف اعتبار خرید طلا</div>
|
||||
<div class="flex justify-center mt-1 text-[#B79379] gap-1 items-center text-xs">
|
||||
<div class="text-white text-lg">{{ userStore?.userInfo?.gram ?? 0 }}</div>
|
||||
گرم
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-[#E5D7CE] text-xs ">موجودی کیف پول</div>
|
||||
<div class="flex justify-center mt-1 text-[#B79379] gap-1 items-center text-xs">
|
||||
<div class="text-white text-lg">
|
||||
{{ walletStore?.walletInfo?.cash === undefined ? 0 : usePriceWithoutType(walletStore.walletInfo?.cash) }}
|
||||
</div>
|
||||
ریال
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-[9rem] relative">
|
||||
<img :src="img" alt="" class="w-screen h-[8rem]">
|
||||
<!-- <div class="w-screen bg-white w-screen h-[calc(100vh-16rem-70px)] px-5">-->
|
||||
<div v-if="userStore.userInfo && !loading" class="bg-white w-screen h-fit px-5 m-[-1px]">
|
||||
<!-- <a-alert :message="``" type="warning" show-icon/>-->
|
||||
<!-- {{limitedPrice === undefined}}-->
|
||||
<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-gray-50 w-full flex justify-evenly rounded-lg py-2">
|
||||
<div class="text-center w-full">
|
||||
<div>قیمت خرید از گلد دات آی آر</div>
|
||||
<div class="text-[10px] text-gray-500">(هر گرم طلای 18 عیار)</div>
|
||||
<div class="flex w-full mt-3 justify-evenly">
|
||||
<!-- <div class="text-[10px] gap-1 flex bg-green-100 rounded-xl px-1 text-green-600 items-center">
|
||||
<Icon icon="vuesax-linear:received" size="10"/>
|
||||
<div>2%</div>
|
||||
</div>-->
|
||||
<div v-if="price" class="flex text-gray-500 text-xs items-center gap-1">
|
||||
<div class="text-primary font-bold 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="text-[10px] text-gray-500">(هر گرم طلای 18 عیار)</div>
|
||||
<div class="flex w-full mt-3 justify-evenly">
|
||||
<!-- <div class="text-[10px] gap-1 flex bg-red-100 rounded-xl px-1 text-red-600 items-center">
|
||||
<Icon icon="vuesax-linear:send" size="10"/>
|
||||
<div>3%</div>
|
||||
</div>-->
|
||||
<div v-if="price" class="flex text-gray-500 text-xs items-center gap-1">
|
||||
<div class="text-primary font-bold text-base">{{ usePriceWithoutType(price.sell ?? 0) }}</div>
|
||||
ریال
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between mt-8">
|
||||
<div class="text-center w-full flex-flex-col items-center" style="text-align: -webkit-center"
|
||||
@click="router.push({name:'gold', query:{state: 'sell'}})">
|
||||
<div class="rounded-full w-[42px] h-[42px] bg-orange-100 flex items-center justify-center">
|
||||
<Icon class="text-orange-600" icon="vuesax-linear:money-send"/>
|
||||
</div>
|
||||
<div class="text-primary">فروش</div>
|
||||
</div>
|
||||
<div class="text-center w-full flex-flex-col items-center" style="text-align: -webkit-center"
|
||||
@click="router.push({name:'wallet', query:{state: 'deposit'}})">
|
||||
<div class="rounded-full w-[42px] h-[42px] bg-green-100 flex items-center justify-center">
|
||||
<Icon class="text-green-600" icon="vuesax-linear:card-add"/>
|
||||
</div>
|
||||
<div class="text-primary">واریز نقدی</div>
|
||||
</div>
|
||||
<div class="text-center w-full flex-flex-col items-center" style="text-align: -webkit-center"
|
||||
@click="router.push({name:'gold', query:{state: 'buy'}})">
|
||||
<div class="rounded-full w-[42px] h-[42px] bg-blue-100 flex items-center justify-center">
|
||||
<Icon class="text-blue-600" icon="vuesax-linear:money-receive"/>
|
||||
</div>
|
||||
<div class="text-primary">خرید</div>
|
||||
</div>
|
||||
<div class="text-center w-full flex-flex-col items-center" style="text-align: -webkit-center"
|
||||
@click="router.push({name: 'fund'})">
|
||||
<div class="rounded-full w-[42px] h-[42px] bg-yellow-100 flex items-center justify-center">
|
||||
<Icon class="text-yellow-600" icon="vuesax-linear:archive-1"/>
|
||||
</div>
|
||||
<div class="text-primary">صندوق</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 font-bold">نمودار نوسانات قیمت هر گرم طلای 18 عیار</div>
|
||||
<div class="w-full mt-2 relative bg-gray-100 rounded-lg h-[88px] flex flex-col justify-center">
|
||||
<img :src="img1" alt="" class="h-[88px] absolute">
|
||||
<div class="w-full items-center flex flex-col">
|
||||
<div class="text-gray-600">قیمت لحظه ای طلا</div>
|
||||
<div v-if="price" class="flex gap-1 mt-3 text-xs items-center">
|
||||
<div class="font-bold text-2xl">{{ usePriceWithoutType(price.price_last ?? 0) }}</div>
|
||||
ریال
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-around mt-8">
|
||||
<div v-if="lastPrice" class="flex flex-col items-center">
|
||||
<div class="text-xs">بالاترین قیمت خرید امروز</div>
|
||||
<div class="text-green-600 flex gap-1 text-xs items-center">
|
||||
<div class="text-base">{{ usePriceWithoutType(lastPrice.buy ?? 0) }}</div>
|
||||
ریال
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="lastPrice" class="flex flex-col items-center">
|
||||
<div class="text-xs">بالاترین قیمت فروش امروز</div>
|
||||
<div class="text-red-600 flex gap-1 text-xs items-center">
|
||||
<div class="text-base">{{ usePriceWithoutType(lastPrice.sell ?? 0) }}</div>
|
||||
ریال
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<a-spin :spinning="chartLoading">
|
||||
<!-- <div id="chart" class="pb-20 mt-7 overflow-x-auto">
|
||||
<!– <apexchart :options="chartOptions" :series="series" :style="`width: ${chartWidth}`" height="350"
|
||||
type="candlestick"></apexchart>–>
|
||||
<div ref="main" class="w-full aspect-square"></div>
|
||||
</div>-->
|
||||
<div class="overflow-x-auto pb-10">
|
||||
<div ref="main" :style="`width: ${chartWidth}`" class="h-[20rem]"></div>
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
<div v-else class="bg-white w-screen h-[40vh] px-5 m-[-1px] flex justify-center">
|
||||
<a-spin :spinning="true"/>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="y>130? 'bg-white shadow opacity-95': ''"
|
||||
class=" px-4 py-2 top-0 fixed w-screen 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="y>130? 'text-primary': 'text-white'" class="color-transition font-bold">
|
||||
{{ userStore.userInfo?.mobile }}
|
||||
</div>
|
||||
</div>
|
||||
<Icon :color="y>130? 'primary': 'white'" 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="p-5 text-sm">
|
||||
آیا از خروج خود اطمینان دارید؟
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:button>
|
||||
<div class="text-center text-red" @click="logout">
|
||||
خروج
|
||||
</div>
|
||||
<div class="text-center" @click="showLogoutConfirm = false">
|
||||
انصراف
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</DialogVant>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import img from '@/assets/img/home_ly1.svg'
|
||||
import img1 from '@/assets/img/home_ly2.svg'
|
||||
import Icon from "@/components/BasicPacks/BasicIcon.vue";
|
||||
import {usePriceWithoutType} from "../../../utils/usePrice";
|
||||
import {computed, onMounted, ref, watch} from "vue";
|
||||
import router from "@/router";
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
import {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 type {Price} from "@/models/home";
|
||||
import {getChart, getLastPrice, getPrice} from "@/api/home";
|
||||
|
||||
|
||||
const userStore = useUserStore()
|
||||
const walletStore = useWalletStore()
|
||||
const chartLoading = ref<boolean>(false)
|
||||
const {x, y} = useWindowScroll()
|
||||
const series = ref<Array<Array<number>>>([])
|
||||
const dates = ref<Array<string>>([])
|
||||
const price = ref<Price>()
|
||||
const lastPrice = ref<Price>()
|
||||
const main = ref(null)
|
||||
|
||||
const upColor = '#ec0000';
|
||||
const upBorderColor = '#8A0000';
|
||||
const downColor = '#00da3c';
|
||||
const downBorderColor = '#008F28';
|
||||
|
||||
// const limitedPrice: Const = walletStore?.limitedPrice
|
||||
watch(main, (n) => {
|
||||
if (main.value !== null) {
|
||||
// console.log('saaaa')
|
||||
const echart = echarts.init(main.value, null, {
|
||||
renderer: 'canvas'
|
||||
})
|
||||
echart.setOption({
|
||||
xAxis: {
|
||||
data: dates.value.values,
|
||||
show: true,
|
||||
},
|
||||
yAxis: {
|
||||
show: false,
|
||||
scale: true,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'candlestick',
|
||||
data: series.value
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
})
|
||||
onMounted(() => {
|
||||
})
|
||||
|
||||
const limitedPrice = computed(() => {
|
||||
if (walletStore.limitedPrice)
|
||||
return walletStore?.limitedPrice[0]
|
||||
})
|
||||
|
||||
const limitedBuyGold = computed(() => {
|
||||
if (walletStore.limitedBuyGold)
|
||||
return walletStore?.limitedBuyGold[0]
|
||||
})
|
||||
|
||||
const chartWidth = computed(() => {
|
||||
if (series.value.length < 30)
|
||||
return '100vw'
|
||||
else if (series.value.length < 60)
|
||||
return '200vw'
|
||||
else if (series.value.length < 90)
|
||||
return '300vw'
|
||||
else if (series.value.length < 120)
|
||||
return '400vw'
|
||||
else if (series.value.length < 160)
|
||||
return '500vw'
|
||||
else if (series.value.length < 190)
|
||||
return '600vw'
|
||||
else if (series.value.length < 210)
|
||||
return '700vw'
|
||||
else if (series.value.length < 240)
|
||||
return '800vw'
|
||||
else if (series.value.length < 270)
|
||||
return '900vw'
|
||||
else if (series.value.length < 300)
|
||||
return '1000vw'
|
||||
else if (series.value.length < 330)
|
||||
return '1100vw'
|
||||
else if (series.value.length < 360)
|
||||
return '1200vw'
|
||||
else if (series.value.length < 390)
|
||||
return '1300vw'
|
||||
})
|
||||
|
||||
function splitData(rawData) {
|
||||
const categoryData = [];
|
||||
const values = [];
|
||||
for (var i = 0; i < rawData.length; i++) {
|
||||
categoryData.push(rawData[i].splice(0, 1)[0]);
|
||||
values.push(rawData[i]);
|
||||
}
|
||||
return {
|
||||
categoryData: categoryData,
|
||||
values: values
|
||||
};
|
||||
}
|
||||
|
||||
async function initChart() {
|
||||
try {
|
||||
chartLoading.value = true
|
||||
const data = await getChart()
|
||||
/* data.forEach(item => {
|
||||
series.value[0].data.push({
|
||||
x: toJalali(item[0]),
|
||||
y: item[1]
|
||||
})
|
||||
// console.log(x)
|
||||
})*/
|
||||
data.forEach(item => {
|
||||
series.value.push(item[1])
|
||||
dates.value.push(item[0])
|
||||
})
|
||||
// series.value = data
|
||||
// series.value = splitData(data)
|
||||
console.log(dates.value)
|
||||
console.log(series.value)
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
} finally {
|
||||
chartLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function initPrice() {
|
||||
try {
|
||||
loading.value = true
|
||||
const data = await getPrice()
|
||||
const dataLast = await getLastPrice()
|
||||
price.value = data
|
||||
lastPrice.value = dataLast
|
||||
console.log(series.value)
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
initPrice()
|
||||
})
|
||||
|
||||
const chartOptions = ref(
|
||||
{
|
||||
chart: {
|
||||
type: 'candlestick',
|
||||
height: 600,
|
||||
toolbar: {
|
||||
autoSelected: 'pan',
|
||||
show: false
|
||||
},
|
||||
},
|
||||
title: {
|
||||
// text: 'CandleStick Chart',
|
||||
align: 'left'
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
show: false,
|
||||
showAlways: false,
|
||||
showForNullSeries: false,
|
||||
tooltip: {
|
||||
enabled: true
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
const showLogoutConfirm = ref<boolean>()
|
||||
|
||||
async function logout() {
|
||||
// baseConfirm('آیا از حساب کاربری خارج می شوید؟',async () => {
|
||||
removeToken()
|
||||
await router.push({name: 'login'})
|
||||
window.location.reload()
|
||||
// console.log('salam')
|
||||
// })
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,866 @@
|
||||
<template>
|
||||
<div class="h-35rem overflow-y-auto">
|
||||
<!-- <div class="bg-primary h-30 mt-[-3rem] z-100000000000"></div>-->
|
||||
<div class="h-[60vh] bg-[#0A1B37] wrap-fix">
|
||||
<div class="w-full justify-around mt-18">
|
||||
<div class="flex flex-col w-full justify-center items-center">
|
||||
<div class="text-center">
|
||||
<div class="text-[#E5D7CE] text-xs">مجموع دارایی طلایی</div>
|
||||
<transition mode="out-in" name="fade">
|
||||
<div
|
||||
v-if="!isHidden"
|
||||
class="flex justify-center mt-1 text-[#B79379] gap-1 items-center text-xs"
|
||||
@click="isHidden = true"
|
||||
>
|
||||
<div class="text-white text-base">{{ walletStore.walletInfo?.gold_sum ?? 0 }}</div>
|
||||
گرم
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="flex gap-2 items-center justify-center mt-3 mb-2"
|
||||
@click="isHidden = false"
|
||||
>
|
||||
<div class="bg-white rounded-full w-2 h-2" />
|
||||
<div class="bg-white rounded-full w-2 h-2" />
|
||||
<div class="bg-white rounded-full w-2 h-2" />
|
||||
<div class="bg-white rounded-full w-2 h-2" />
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<div class="text-white flex" @click="wholeBalanceVisible = true">
|
||||
<div class="ml-[-1.5rem]">موجودی ها</div>
|
||||
<DotLottieVue
|
||||
class="w-5rem h-5rem mt-[-1.6rem] ml-[-2rem]"
|
||||
autoplay
|
||||
loop
|
||||
src="https://lottie.host/3d46ebb3-a580-41eb-ade7-b8829c32b071/PJPuSKbpze.json"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="text-center">
|
||||
<div class="text-[#E5D7CE] text-xs ">موجودی کیف طلا</div>
|
||||
<transition mode="out-in" name="fade">
|
||||
<div v-if="!isHidden" class="flex justify-center mt-1 text-[#B79379] gap-1 items-center text-xs"
|
||||
@click="isHidden = true">
|
||||
<div class="text-white text-base">{{ walletStore?.walletInfo?.gold ?? 0 }}</div>
|
||||
گرم
|
||||
</div>
|
||||
<div v-else class="flex gap-2 items-center justify-center mt-3" @click="isHidden = false">
|
||||
<div class="bg-white rounded-full w-2 h-2" />
|
||||
<div class="bg-white rounded-full w-2 h-2" />
|
||||
<div class="bg-white rounded-full w-2 h-2" />
|
||||
<div class="bg-white rounded-full w-2 h-2" />
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-[#E5D7CE] text-xs ">مجموع دارایی طلایی</div>
|
||||
<transition mode="out-in" name="fade">
|
||||
<div v-if="!isHidden" class="flex justify-center mt-1 text-[#B79379] gap-1 items-center text-xs"
|
||||
@click="isHidden = true">
|
||||
<div class="text-white text-base">{{ walletStore.walletInfo?.gold_sum ?? 0 }}</div>
|
||||
گرم
|
||||
</div>
|
||||
<div v-else class="flex gap-2 items-center justify-center mt-3" @click="isHidden = false">
|
||||
<div class="bg-white rounded-full w-2 h-2" />
|
||||
<div class="bg-white rounded-full w-2 h-2" />
|
||||
<div class="bg-white rounded-full w-2 h-2" />
|
||||
<div class="bg-white rounded-full w-2 h-2" />
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-[#E5D7CE] text-xs ">موجودی کیف پول</div>
|
||||
<transition mode="out-in" name="fade">
|
||||
<div v-if="!isHidden"
|
||||
class="flex justify-center mt-1 text-[#B79379] gap-1 items-center text-xs"
|
||||
@click.stop="isHidden = true;console.log('sssssss')">
|
||||
<div class="text-white text-base">
|
||||
{{
|
||||
walletStore?.walletInfo?.cash === undefined ? 0 : usePriceWithoutType(walletStore.walletInfo?.cash)
|
||||
}}
|
||||
</div>
|
||||
ریال
|
||||
</div>
|
||||
<div v-else class="flex gap-2 items-center justify-center mt-3" @click="isHidden = false">
|
||||
<div class="bg-white rounded-full w-2 h-2" />
|
||||
<div class="bg-white rounded-full w-2 h-2" />
|
||||
<div class="bg-white rounded-full w-2 h-2" />
|
||||
<div class="bg-white rounded-full w-2 h-2" />
|
||||
</div>
|
||||
</transition>
|
||||
</div>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-[9rem] relative pb-30">
|
||||
<img :src="img" alt="" class="w-screen h-[8rem]" />
|
||||
|
||||
<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="w-full relative bg-gray-100 rounded-lg h-[88px] flex flex-col justify-center home_appear_fade_in"
|
||||
>
|
||||
<img :src="img1" alt="" class="h-[88px] absolute" />
|
||||
<div class="w-full items-center flex flex-col">
|
||||
<div class="text-gray-600">قیمت لحظه ای طلا</div>
|
||||
<div v-if="price" class="flex gap-1 mt-3 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>-->
|
||||
<Vue3Odometer
|
||||
:value="goldVal"
|
||||
class="o-text !text-2xl font-bold"
|
||||
style="font-family: iran-sans; direction: ltr"
|
||||
v-if="key % 2 === 0"
|
||||
/>
|
||||
ریال
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between mt-8">
|
||||
<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: 'gold', query: { state: 'sell' } })"
|
||||
>
|
||||
<div
|
||||
class="rounded-full w-[42px] h-[42px] bg-orange-100 flex items-center justify-center"
|
||||
>
|
||||
<Icon class="text-orange-600" 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_down"
|
||||
style="text-align: -webkit-center"
|
||||
@click="router.push({ name: 'wallet', query: { state: 'deposit' } })"
|
||||
>
|
||||
<div
|
||||
class="rounded-full w-[42px] h-[42px] bg-green-100 flex items-center justify-center"
|
||||
>
|
||||
<Icon class="text-green-600" icon="vuesax-linear:card-add" />
|
||||
</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: 'gold', query: { state: 'buy' } })"
|
||||
>
|
||||
<div
|
||||
class="rounded-full w-[42px] h-[42px] bg-blue-100 flex items-center justify-center"
|
||||
>
|
||||
<Icon class="text-blue-600" 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: 'fund' })"
|
||||
>
|
||||
<div
|
||||
class="rounded-full w-[42px] h-[42px] bg-yellow-100 flex items-center justify-center"
|
||||
>
|
||||
<Icon class="text-yellow-600" icon="vuesax-linear:archive-1" />
|
||||
</div>
|
||||
<div class="text-primary">گنج</div>
|
||||
</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">
|
||||
<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 class="text-center w-full">
|
||||
<div>قیمت خرید از گلد دات آی آر</div>
|
||||
<div class="text-[10px] text-gray-500">(هر گرم طلای 18 عیار)</div>
|
||||
<div class="flex w-full mt-3 justify-evenly">
|
||||
<!– <div class="text-[10px] gap-1 flex bg-green-100 rounded-xl px-1 text-green-600 items-center">
|
||||
<Icon icon="vuesax-linear:received" size="10"/>
|
||||
<div>2%</div>
|
||||
</div>–>
|
||||
<div v-if="price" class="flex text-gray-500 text-xs items-center gap-1">
|
||||
<div class="text-primary font-bold text-base">
|
||||
{{ usePriceWithoutType(lastPrice.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="text-[10px] text-gray-500">(هر گرم طلای 18 عیار)</div>
|
||||
<div class="flex w-full mt-3 justify-evenly">
|
||||
<!– <div class="text-[10px] gap-1 flex bg-red-100 rounded-xl px-1 text-red-600 items-center">
|
||||
<Icon icon="vuesax-linear:send" size="10"/>
|
||||
<div>3%</div>
|
||||
</div>–>
|
||||
<div v-if="price" class="flex text-gray-500 text-xs items-center gap-1">
|
||||
<div class="text-primary font-bold text-base">
|
||||
{{ usePriceWithoutType(lastPrice.sell ?? 0) }}
|
||||
</div>
|
||||
ریال
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
<!-- </a-spin>-->
|
||||
</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>
|
||||
<div
|
||||
:class="y > 130 ? 'bg-white shadow opacity-95' : ''"
|
||||
class="px-4 py-2 top-0 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 > 130 ? 'text-primary border-primary' : 'text-white border-white'"
|
||||
>
|
||||
<Icon icon="vuesax-linear:user" size="20" />
|
||||
</div>
|
||||
<div :class="y > 130 ? 'text-primary' : 'text-white'" class="color-transition font-bold">
|
||||
{{ userStore.userInfo?.name }}
|
||||
</div>
|
||||
</div>
|
||||
<Icon
|
||||
:color="y > 130 ? 'primary' : 'white'"
|
||||
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="در این قسمت مجموع کل وزن طلایی که در گنج های خود و کیف اصلی طلایی دارید را مشاهده میفرمایید."
|
||||
infoHead="مجموع کل دارایی طلایی"
|
||||
:value="parseFloat((walletStore.walletInfo?.gold_sum ?? 0).toFixed(2)) + ' گرم'"
|
||||
/>
|
||||
<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="parseFloat((walletStore.walletInfo?.gold ?? 0)?.toFixed(2)) + ' گرم'"
|
||||
/>
|
||||
<a-divider class="!my-1" />
|
||||
<BasicInfoItem
|
||||
class="flex justify-between"
|
||||
title="ارزش ریالی کیف طلا"
|
||||
is-line
|
||||
:value="
|
||||
usePrice(((walletStore.walletInfo?.gold ?? 0) * (goldVal ?? 0) ?? 0).toFixed(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)
|
||||
)
|
||||
"
|
||||
/>
|
||||
<a-divider class="!my-1" />
|
||||
<!-- <BasicInfoItem class="flex justify-between" title="مجموعه دارایی کلی (به گرم)" is-line
|
||||
:value="((((walletStore.walletInfo?.cash?? 0)/(goldVal?? 0) )+ (walletStore.walletInfo?.gold_sum?? 0))).toFixed(2)+ ' گرم'" />
|
||||
<a-divider class="!my-1" />-->
|
||||
<BasicInfoItem
|
||||
class="flex justify-between"
|
||||
title="مجموعه دارایی قابل برداشت (به ریال)"
|
||||
is-line
|
||||
:value="
|
||||
usePrice(
|
||||
(
|
||||
(walletStore.walletInfo?.gold ?? 0) * (goldVal ?? 0) +
|
||||
(walletStore.walletInfo?.cash ?? 0)
|
||||
).toFixed(0)
|
||||
)
|
||||
"
|
||||
/>
|
||||
<a-divider class="!my-1" />
|
||||
<BasicInfoItem
|
||||
class="flex justify-between"
|
||||
title="مجموعه دارایی قابل برداشت (به گرم)"
|
||||
is-line
|
||||
:value="
|
||||
parseFloat((
|
||||
(walletStore.walletInfo?.cash ?? 0) / (goldVal ?? 0) +
|
||||
(walletStore.walletInfo?.gold ?? 0)
|
||||
).toFixed(2)) + ' گرم'
|
||||
"
|
||||
/>
|
||||
<a-divider class="!my-1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BasicActionSheet>
|
||||
</template>
|
||||
|
||||
<script lang="tsx" setup>
|
||||
import img from '@/assets/img/home_ly1.svg'
|
||||
import img1 from '@/assets/img/home_ly2.svg'
|
||||
import Icon from '@/components/BasicPacks/BasicIcon.vue'
|
||||
import { usePrice, usePriceWithoutType } from '../../../utils/usePrice'
|
||||
import {computed, onMounted, onUnmounted, ref, watch, watchEffect} 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 type { Price } from '@/models/home'
|
||||
import { getAllPrices, getChart, getLastPrice, getPrice } from '@/api/home'
|
||||
// import odometer from 'odometer/odometer'
|
||||
import Vue3Odometer from 'vue3-odometer'
|
||||
import 'odometer/themes/odometer-theme-default.css'
|
||||
import HomeSkeleton from '@/views/base/home/components/HomeSkeleton.vue'
|
||||
import { toJalaliNotime } from '@/utils/useDateTime'
|
||||
import { getLastPrices, lastPrice, 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 MySlider from '@/views/base/wallet/components/mySlider/MySlider.vue'
|
||||
import type { Card } from '@/models/wallet'
|
||||
import { getActivatedCards } from '@/api/wallet'
|
||||
import banner1 from '@/assets/img/banner/banner1.png'
|
||||
import banner2 from '@/assets/img/banner/banner2.png'
|
||||
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
|
||||
|
||||
const userStore = useUserStore()
|
||||
const walletStore = useWalletStore()
|
||||
const chartLoading = ref<boolean>(false)
|
||||
const wholeBalanceVisible = ref<boolean>(false)
|
||||
const { x, y } = useWindowScroll()
|
||||
const series = ref<Chart[]>([{ data: [] }])
|
||||
const key = ref<number>(0)
|
||||
const cardItems = [banner1, banner2]
|
||||
const main = ref(null)
|
||||
const logoutLoading = ref(false)
|
||||
const value = ref<string>('a')
|
||||
/*
|
||||
onMounted(() => {
|
||||
animateNum(2)
|
||||
})
|
||||
*/
|
||||
|
||||
const goldVal = ref<number | undefined>()
|
||||
|
||||
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: 'canvas'
|
||||
})
|
||||
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: 'area',
|
||||
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: ['#0A1B37'],
|
||||
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 limitedBuyGold = computed(() => {
|
||||
if (walletStore.limitedBuyGold) return walletStore?.limitedBuyGold[0]
|
||||
})
|
||||
|
||||
const chartWidth = computed(() => {
|
||||
if (series.value.length < 30) return '100vw'
|
||||
else if (series.value.length < 60) return '200vw'
|
||||
else if (series.value.length < 90) return '300vw'
|
||||
else if (series.value.length < 120) return '400vw'
|
||||
else if (series.value.length < 160) return '500vw'
|
||||
else if (series.value.length < 190) return '600vw'
|
||||
else if (series.value.length < 210) return '700vw'
|
||||
else if (series.value.length < 240) return '800vw'
|
||||
else if (series.value.length < 270) return '900vw'
|
||||
else if (series.value.length < 300) return '1000vw'
|
||||
else if (series.value.length < 330) return '1100vw'
|
||||
else if (series.value.length < 360) return '1200vw'
|
||||
else if (series.value.length < 390) return '1300vw'
|
||||
})
|
||||
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 = price?.value?.price_last
|
||||
await getLastPrices()
|
||||
// await setIntervalGetPrice()
|
||||
if (val !== price?.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 = price.value?.price_last
|
||||
}
|
||||
// console.log(series.value)
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await initChart()
|
||||
await initPrice()
|
||||
await fetchPrices()
|
||||
// console.log('okkkkkkhome')
|
||||
update()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
// stopPriceInterval()
|
||||
// console.log('okhome')
|
||||
})
|
||||
|
||||
const chartOptions = ref({
|
||||
chart: {
|
||||
type: 'candlestick',
|
||||
height: 600,
|
||||
toolbar: {
|
||||
autoSelected: 'pan',
|
||||
show: false
|
||||
}
|
||||
},
|
||||
title: {
|
||||
// text: 'CandleStick Chart',
|
||||
align: 'left'
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
labels: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (val, opts) {
|
||||
// console.log(val, toJalali(val))
|
||||
return toJalaliNotime(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
show: false,
|
||||
showAlways: false,
|
||||
showForNullSeries: false,
|
||||
tooltip: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
custom: function ({ seriesIndex, dataPointIndex, w }) {
|
||||
const o = w.globals.seriesCandleO[seriesIndex][dataPointIndex]
|
||||
const h = w.globals.seriesCandleH[seriesIndex][dataPointIndex]
|
||||
const l = w.globals.seriesCandleL[seriesIndex][dataPointIndex]
|
||||
const c = w.globals.seriesCandleC[seriesIndex][dataPointIndex]
|
||||
return (
|
||||
'<div class="apexcharts-tooltip-candlestick p-2">' +
|
||||
'<div>باز: <span class="value">' +
|
||||
o +
|
||||
'</span></div>' +
|
||||
'<div>بیشترین: <span class="value">' +
|
||||
h +
|
||||
'</span></div>' +
|
||||
'<div>کمترین: <span class="value">' +
|
||||
l +
|
||||
'</span></div>' +
|
||||
'<div>بسته: <span class="value">' +
|
||||
c +
|
||||
'</span></div>' +
|
||||
'</div>'
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
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')
|
||||
// })
|
||||
}
|
||||
</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;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user