279 lines
8.7 KiB
Vue
279 lines
8.7 KiB
Vue
<template>
|
|
<div >
|
|
<Transition>
|
|
<div v-if="popVisible" class="top-0 bottom-0 bg-primary wrap-fix z-2000 opacity-60"
|
|
@click="popVisible = false">
|
|
</div>
|
|
</Transition>
|
|
<Transition name="slide-fade">
|
|
<div v-if="popVisible" class="wrap-fix bottom-11vh z-2000">
|
|
<div class="relative flex flex-col items-center ">
|
|
<div class="flex items-center justify-center bg-white rounded-full w-[30px] h-[30px] mb-2"
|
|
@click="popVisible = !popVisible">
|
|
<BasicIcon
|
|
icon="vuesax-linear:close-circle"
|
|
/>
|
|
</div>
|
|
<div class="flex flex-col items-center gap-2">
|
|
<BasicButton icon-size="16" class="!font-bold w-15rem"
|
|
@click="$router.push({name: 'user'}); popVisible = false">
|
|
<div class="flex gap-2 items-center">
|
|
<BasicIcon icon="vuesax-linear:user" size="16" class="absolute right-2" />
|
|
<div>حساب کاربری</div>
|
|
</div>
|
|
</BasicButton>
|
|
<BasicButton icon-size="16" class="!font-bold w-15rem"
|
|
@click="$router.push({name: 'notifyTrigger'}); popVisible = false">
|
|
<div class="flex gap-2 items-center">
|
|
<BasicIcon icon="vuesax-linear:bill" size="16" class="absolute right-2" />
|
|
<div>هشدار قیمت</div>
|
|
</div>
|
|
</BasicButton>
|
|
<BasicButton icon-size="16" class="!font-bold w-15rem"
|
|
@click="$router.push({name: 'about'}); popVisible = false">
|
|
<div class="flex gap-2 items-center">
|
|
<BasicIcon icon="vuesax-linear:info-circle" size="16" class="absolute right-2" />
|
|
<div>درباره ما</div>
|
|
</div>
|
|
</BasicButton>
|
|
<BasicButton icon-size="16" class="!font-bold w-15rem"
|
|
@click="$router.push({name: 'physicalReceive'}); popVisible = false">
|
|
<div class="flex gap-2 items-center">
|
|
<BasicIcon icon="vuesax-linear:direct-inbox" size="16" class="absolute right-2" />
|
|
<div>دریافت طلای فیزیکی</div>
|
|
</div>
|
|
</BasicButton>
|
|
<BasicButton icon-size="16" class="!font-bold w-15rem"
|
|
@click="$router.push({name: 'rules'}); popVisible = false">
|
|
<div class="flex gap-2 items-center">
|
|
<BasicIcon icon="vuesax-linear:task" size="16" class="absolute right-2" />
|
|
<div>قوانین و مقررات</div>
|
|
</div>
|
|
</BasicButton>
|
|
<!-- <BasicButton icon-size="16" class="!font-bold w-50vw md:w-full"
|
|
@click="$router.push({name: 'permissions'}); popVisible = false">
|
|
<div class="flex gap-2 items-center">
|
|
<BasicIcon icon="vuesax-linear:archive-book" size="16" class="absolute right-2" />
|
|
<div>مجوز ها</div>
|
|
</div>
|
|
</BasicButton>-->
|
|
<!-- <BasicButton icon-size="16" class="!font-bold w-50vw md:w-full"
|
|
@click="$router.push({name: 'earnMoney'}); popVisible = false">
|
|
<div class="flex gap-2 items-center">
|
|
<BasicIcon icon="vuesax-linear:dollar-circle" size="16" class="absolute right-2" />
|
|
<div>کسب درآمد</div>
|
|
</div>
|
|
</BasicButton>-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
<div class=" !h-[calc(100vh-72px)] ">
|
|
<router-view v-slot="{ Component, route }">
|
|
<!-- Use any custom transition and to `fade` -->
|
|
<transition :name="route.meta.transition || 'fade'">
|
|
<component :is="Component" class="!h-[calc(100vh-72px)]" />
|
|
</transition>
|
|
</router-view>
|
|
</div>
|
|
<!-- <canvas ref="canvas" id="canvas1" width="400" height="80" class="w-full"></canvas>-->
|
|
<div class="bottom-appbar w-auto mx-auto">
|
|
<div class="tabs">
|
|
<div :class="setNavColor('home')" class="tab" @click="setRoute('home')">
|
|
<Icon icon="vuesax-linear:home" />
|
|
<div class="text-xs mt-1 font-bold">صفحه اصلی</div>
|
|
</div>
|
|
<div :class="setNavColor('transactions')" class="tab" @click="setRoute('transactions')">
|
|
<Icon icon="vuesax-linear:receipt-item" />
|
|
<div class="text-xs mt-1 font-bold">گزارش</div>
|
|
</div>
|
|
<div class="main_in">
|
|
<div class="text-white circle_in">
|
|
<div class="circle_into " @click="popVisible = !popVisible">
|
|
<img
|
|
class="p-2"
|
|
src="@/assets/img/logo.png"
|
|
/>
|
|
</div>
|
|
<!-- <div class="flex justify-center">خرید </div>
|
|
<div class="flex justify-center">محصول </div>-->
|
|
</div>
|
|
</div>
|
|
<!-- <div :class="setNavColor('buyProduct')" class="tab" @click="setRoute('buyProduct')">
|
|
<Icon icon="vuesax-linear:coin" />
|
|
<div class="text-xs mt-1 font-bold">خرید محصول</div>
|
|
</div>-->
|
|
<div :class="setNavColor('wallet')" class="tab" @click="setRoute('wallet')">
|
|
<Icon icon="vuesax-linear:wallet-1" />
|
|
<div class="text-xs mt-1 font-bold">کیف پول</div>
|
|
</div>
|
|
<div :class="setNavColor('physicalReceive')" class="tab" @click="setRoute('physicalReceive')">
|
|
<Icon icon="vuesax-linear:direct-inbox" />
|
|
<div class="text-xs mt-1 font-bold">تحویل فیزیکی</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="w-[80px] h-[80px] border-1">
|
|
|
|
</div>-->
|
|
<div class="main">
|
|
<div class="circle">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed, ref } from 'vue'
|
|
import Icon from '@/components/BasicPacks/BasicIcon.vue'
|
|
import router from '@/router'
|
|
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
|
|
import type { Transaction } from '@/models/transaction'
|
|
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
|
|
|
|
/*onMounted(async () => {
|
|
const c = await document.getElementById("canvas1");
|
|
const ctx = c.getContext("2d");
|
|
console.log(ctx)
|
|
ctx.beginPath();
|
|
ctx.moveTo(0,20);
|
|
ctx.lineTo(165,20)
|
|
ctx.arc(200, 50, 45, 3.9, 5.5, false);
|
|
ctx.lineTo(400,20)
|
|
ctx.stroke();
|
|
})*/
|
|
const currentRoute = computed(() => router.currentRoute.value.name)
|
|
|
|
const popVisible = ref(false)
|
|
|
|
function setNavColor(val: string) {
|
|
if (currentRoute.value === val) {
|
|
return 'text-primary'
|
|
} else {
|
|
return 'text-gray-400'
|
|
}
|
|
}
|
|
|
|
function setRoute(val: string) {
|
|
popVisible.value = false
|
|
router.push({ name: val })
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
|
|
.bottom-appbar {
|
|
z-index: 5000;
|
|
height: 80px;
|
|
position: fixed;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
bottom: 0;
|
|
right: 0;
|
|
left:0;
|
|
@media screen and (min-width: 426px) {
|
|
width: 426px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
height: 90%;
|
|
bottom: 0;
|
|
width: 100%;
|
|
background: white;
|
|
//background-color: red;
|
|
justify-content: space-between;
|
|
position: absolute;
|
|
z-index: 400;
|
|
//border: 1px dashed primary;
|
|
box-shadow: 0px -2px 4px -2px #0000001A;
|
|
|
|
.tab {
|
|
width: 80px;
|
|
text-align: center;
|
|
flex-flow: column;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
align-content: center;
|
|
}
|
|
|
|
.main_in {
|
|
height: 70px;
|
|
width: 70px;
|
|
|
|
.circle_in {
|
|
margin-top: -10px;
|
|
border-radius: 100%;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: 20;
|
|
display: flex;
|
|
//border: 1px dashed primary;
|
|
justify-content: center;
|
|
align-content: center;
|
|
flex-wrap: wrap;
|
|
background-color: #20514b;
|
|
|
|
|
|
|
|
.circle_into {
|
|
overflow:hidden;
|
|
@apply bg-primary;
|
|
border-radius: 100%;
|
|
width: 90%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-content: center;
|
|
flex-wrap: wrap;
|
|
height: 90%;
|
|
border: white 1px solid;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.main {
|
|
height: 70px;
|
|
width: 70px;
|
|
position: relative;
|
|
|
|
.circle {
|
|
border-radius: 100%;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: 20;
|
|
box-shadow: 0px -5px 4px -2px #0000001A;
|
|
position: absolute;
|
|
}
|
|
}
|
|
}
|
|
|
|
.v-enter-active,
|
|
.v-leave-active {
|
|
transition: opacity 0.5s ease;
|
|
}
|
|
|
|
.v-enter-from,
|
|
.v-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.slide-fade-enter-active {
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
|
|
.slide-fade-leave-active {
|
|
transition: all 0.4s cubic-bezier(1, 0.5, 0.8, 1);
|
|
}
|
|
|
|
.slide-fade-enter-from,
|
|
.slide-fade-leave-to {
|
|
transform: translateX(20px);
|
|
opacity: 0;
|
|
}
|
|
</style> |