299 lines
9.5 KiB
Vue
299 lines
9.5 KiB
Vue
|
<template>
|
||
|
|
<div class="relative">
|
||
|
|
<div>
|
||
|
|
<!-- <img :src="gr_bottom" alt="" class="absolute bottom-20">-->
|
||
|
|
<img :src="img" alt="" class="mt-2 w-full absolute bottom-0" />
|
||
|
|
</div>
|
||
|
|
<div class="bg-white w-full py-3 px-3 font-bold drop-shadow flex">
|
||
|
|
<div @click="router.back()" class="cursor-pointer">
|
||
|
|
<BasicIcon icon="vuesax-linear:arrow-right-1" />
|
||
|
|
</div>
|
||
|
|
<div class="mr-2 items-center">اطلاعات حساب کاربری</div>
|
||
|
|
</div>
|
||
|
|
<div class="pt-16 pb-8 z-30 relative">
|
||
|
|
<div
|
||
|
|
class="border-gray-200 border-1 rounded-xl p-5 trans flex flex-col items-center mx-5 z-1000 relative bg-white shadow-lg"
|
||
|
|
>
|
||
|
|
<div class="font-bold w-full text-center flex justify-between">
|
||
|
|
نام و نام خانوادگی:
|
||
|
|
<div class="mr-2">{{ userStore.userInfo?.name }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="font-bold w-full text-center flex justify-between">
|
||
|
|
شماره تلفن همراه:
|
||
|
|
<div class="mr-2">{{ userStore.userInfo?.mobile }}</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
v-if="userStore.userInfo?.referral_id"
|
||
|
|
class="font-bold w-full text-center flex justify-between gap-2 items-center"
|
||
|
|
>
|
||
|
|
کد معرف:
|
||
|
|
<div class="flex gap-2">
|
||
|
|
<div class="mr-2">{{ userStore.userInfo?.referral_id }}</div>
|
||
|
|
<!-- <BasicIcon icon="vuesax-linear:copy" color="#2563EB" class="cursor-pointer" size="18"
|
||
|
|
@click.stop="copyCode()" />
|
||
|
|
<!– vuesax-linear:hierarchy-3–>
|
||
|
|
<BasicIcon icon="vuesax-linear:share" color="#2563EB" class="cursor-pointer" size="18"
|
||
|
|
@click.stop="shareCode()" />-->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="w-full flex gap-2 mt-1">
|
||
|
|
<BasicButton
|
||
|
|
icon="vuesax-linear:share"
|
||
|
|
size="small"
|
||
|
|
class="flex-1"
|
||
|
|
icon-size="18"
|
||
|
|
@click.stop="shareCode()"
|
||
|
|
>
|
||
|
|
اشتراک گذاری
|
||
|
|
</BasicButton>
|
||
|
|
<BasicButton
|
||
|
|
icon="vuesax-linear:copy"
|
||
|
|
size="small"
|
||
|
|
class="flex-1"
|
||
|
|
icon-size="18"
|
||
|
|
@click.stop="copyCode()"
|
||
|
|
>
|
||
|
|
رونوشت
|
||
|
|
</BasicButton>
|
||
|
|
</div>
|
||
|
|
<BasicButton
|
||
|
|
class="mt-5 w-full"
|
||
|
|
icon=""
|
||
|
|
iconSize="18"
|
||
|
|
size="large"
|
||
|
|
type="primary"
|
||
|
|
@click="editPassVisible = true"
|
||
|
|
>
|
||
|
|
<div class="flex">
|
||
|
|
<BasicIcon icon="vuesax-linear:eye" class="absolute right-8" />
|
||
|
|
<div>ویرایش اطلاعات کاربری</div>
|
||
|
|
</div>
|
||
|
|
</BasicButton>
|
||
|
|
<div class="h-40vh overflow-y-auto mt-4">
|
||
|
|
<BasicButton
|
||
|
|
class="mt-2 w-full"
|
||
|
|
icon=""
|
||
|
|
iconSize="18"
|
||
|
|
size="large"
|
||
|
|
@click="editPasswordVisible = true"
|
||
|
|
>
|
||
|
|
<div class="flex">
|
||
|
|
<BasicIcon icon="vuesax-linear:lock" class="absolute right-8" />
|
||
|
|
<div>تغییر رمز عبور</div>
|
||
|
|
</div>
|
||
|
|
</BasicButton>
|
||
|
|
<!-- <BasicButton
|
||
|
|
class="w-full mt-2"
|
||
|
|
size="large"
|
||
|
|
@click="$router.push({ name: 'address' })"
|
||
|
|
>
|
||
|
|
<div class="flex">
|
||
|
|
<BasicIcon icon="vuesax-linear:map" class="absolute right-8" />
|
||
|
|
<div>آدرس ها</div>
|
||
|
|
</div>
|
||
|
|
</BasicButton>-->
|
||
|
|
<!-- <BasicButton-->
|
||
|
|
<!-- class="w-full mt-2"-->
|
||
|
|
<!-- size="large"-->
|
||
|
|
<!-- @click="$router.push({ name: 'notifyTrigger' })"-->
|
||
|
|
<!-- >-->
|
||
|
|
<!-- <div class="flex">-->
|
||
|
|
<!-- <BasicIcon icon="vuesax-linear:bill" class="absolute right-8" />-->
|
||
|
|
<!-- <div>هشدار قیمت</div>-->
|
||
|
|
<!-- </div>-->
|
||
|
|
<!-- </BasicButton>-->
|
||
|
|
<BasicButton
|
||
|
|
class="mt-2 w-full"
|
||
|
|
icon=""
|
||
|
|
iconSize="18"
|
||
|
|
size="large"
|
||
|
|
@click="$router.push({ name: 'about' })"
|
||
|
|
>
|
||
|
|
<div class="flex">
|
||
|
|
<BasicIcon icon="vuesax-linear:info-circle" class="absolute right-8" />
|
||
|
|
<div>درباره ما</div>
|
||
|
|
</div>
|
||
|
|
</BasicButton>
|
||
|
|
<!-- <BasicButton-->
|
||
|
|
<!-- class="mt-2 w-full"-->
|
||
|
|
<!-- icon=""-->
|
||
|
|
<!-- iconSize="18"-->
|
||
|
|
<!-- size="large"-->
|
||
|
|
<!-- @click="$router.push({ name: 'physicalReceive' })"-->
|
||
|
|
<!-- >-->
|
||
|
|
<!-- <div class="flex">-->
|
||
|
|
<!-- <BasicIcon icon="vuesax-linear:direct-inbox" class="absolute right-8" />-->
|
||
|
|
<!-- <div>دریافت طلای فیزیکی</div>-->
|
||
|
|
<!-- </div>-->
|
||
|
|
<!-- </BasicButton>-->
|
||
|
|
<BasicButton
|
||
|
|
class="mt-2 w-full"
|
||
|
|
icon=""
|
||
|
|
iconSize="18"
|
||
|
|
size="large"
|
||
|
|
@click="$router.push({ name: 'rules' })"
|
||
|
|
>
|
||
|
|
<div class="flex">
|
||
|
|
<BasicIcon icon="vuesax-linear:task" class="absolute right-8" />
|
||
|
|
<div>قوانین و مقررات</div>
|
||
|
|
</div>
|
||
|
|
</BasicButton>
|
||
|
|
<!-- <BasicButton
|
||
|
|
class="mt-2 w-full"
|
||
|
|
icon=""
|
||
|
|
iconSize="18"
|
||
|
|
size="large"
|
||
|
|
@click="$router.push({ name: 'permissions' })"
|
||
|
|
>
|
||
|
|
<div class="flex">
|
||
|
|
<BasicIcon icon="vuesax-linear:archive-book" class="absolute right-8" />
|
||
|
|
<div>مجوز ها</div>
|
||
|
|
</div>
|
||
|
|
</BasicButton>-->
|
||
|
|
<!-- <BasicButton-->
|
||
|
|
<!-- class="mt-2 w-full"-->
|
||
|
|
<!-- icon=""-->
|
||
|
|
<!-- iconSize="18"-->
|
||
|
|
<!-- size="large"-->
|
||
|
|
<!-- @click="$router.push({ name: 'earnMoney' })"-->
|
||
|
|
<!-- >-->
|
||
|
|
<!-- <div class="flex">-->
|
||
|
|
<!-- <BasicIcon icon="vuesax-linear:dollar-circle" class="absolute right-8" />-->
|
||
|
|
<!-- <div>کسب درآمد</div>-->
|
||
|
|
<!-- </div>-->
|
||
|
|
<!-- </BasicButton>-->
|
||
|
|
<BasicButton
|
||
|
|
class="mt-2 w-full"
|
||
|
|
icon=""
|
||
|
|
iconSize="18"
|
||
|
|
size="large"
|
||
|
|
@click="showLogoutConfirm=!showLogoutConfirm"
|
||
|
|
>
|
||
|
|
<div class="flex">
|
||
|
|
<Icon
|
||
|
|
:color="y > 50 ? '' : ''"
|
||
|
|
class="color-transition absolute right-8"
|
||
|
|
icon="vuesax-linear:logout"
|
||
|
|
@click="showLogoutConfirm = true"
|
||
|
|
/>
|
||
|
|
<div>خروج از حساب کاربری</div>
|
||
|
|
</div>
|
||
|
|
</BasicButton>
|
||
|
|
</div>
|
||
|
|
</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>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import img from '@/assets/img/user_ly1.svg'
|
||
|
|
import { loading, removeToken } from '@/utils'
|
||
|
|
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
|
||
|
|
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
|
||
|
|
import router from '@/router'
|
||
|
|
import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
|
||
|
|
import DialogVant from '@/components/DialogVant.vue'
|
||
|
|
import { useWalletStore } from '@/store/walletStore'
|
||
|
|
import Icon from '@/components/BasicPacks/BasicIcon.vue'
|
||
|
|
import { useWindowScroll } from '@vueuse/core/index'
|
||
|
|
import { onMounted, ref } from 'vue'
|
||
|
|
import { useUserStore } from '@/store/userStore'
|
||
|
|
import { useUserPageContext } from '../composables/useUserPage'
|
||
|
|
|
||
|
|
const userStore = useUserStore()
|
||
|
|
const walletStore = useWalletStore()
|
||
|
|
const showLogoutConfirm = ref<boolean>()
|
||
|
|
const logoutLoading = ref<boolean>(false)
|
||
|
|
const { y } = useWindowScroll()
|
||
|
|
|
||
|
|
const { editPassVisible, editPasswordVisible, copyCode, shareCode } = useUserPageContext()
|
||
|
|
|
||
|
|
async function logout() {
|
||
|
|
logoutLoading.value = true
|
||
|
|
userStore.userInfo = undefined
|
||
|
|
walletStore.walletInfo = undefined
|
||
|
|
removeToken()
|
||
|
|
await router.push({ name: 'login' })
|
||
|
|
window.location.reload()
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
/*.fade-enter-active,
|
||
|
|
.fade-leave-active {
|
||
|
|
transition: opacity 0.2s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fade-enter-from,
|
||
|
|
.fade-leave-to {
|
||
|
|
opacity: 0;
|
||
|
|
}*/
|
||
|
|
/*.trans{
|
||
|
|
transition: height 1s;
|
||
|
|
}*/
|
||
|
|
.midLevel {
|
||
|
|
color: orange;
|
||
|
|
}
|
||
|
|
.week,
|
||
|
|
.reject {
|
||
|
|
color: red;
|
||
|
|
}
|
||
|
|
.success {
|
||
|
|
color: green;
|
||
|
|
}
|
||
|
|
.background-image-container {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
z-index: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.background-image-container img {
|
||
|
|
width: 100%;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.relative {
|
||
|
|
position: relative;
|
||
|
|
z-index: 40;
|
||
|
|
}
|
||
|
|
|
||
|
|
.relative {
|
||
|
|
overflow-y: auto;
|
||
|
|
max-height: 100vh;
|
||
|
|
//scroll-behavior: smooth;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fixed {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
z-index: 50; /* بالاتر از همه */
|
||
|
|
}
|
||
|
|
</style>
|