ghatreh_user/src/views/base/user/mobile/MobileUserView.vue

<template>
  <div class="relative mobile-user-view">
    <div class="mobile-page-bg" aria-hidden="true">
      <img :src="img" alt="" />
    </div>
    <MobilePageHeader title="اطلاعات حساب کاربری" show-back />
    <div class="mpage-content pb-[calc(var(--app-bottom-chrome-height)+1rem)] 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()" />
                        &lt;!&ndash;          vuesax-linear:hierarchy-3&ndash;&gt;
                        <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
            v-if="trackingSystemsEnabled"
            class="mt-2 w-full"
            icon=""
            iconSize="18"
            size="large"
            @click="$router.push({ name: 'recoverySites' })"
          >
            <div class="flex">
              <BasicIcon icon="vuesax-linear:global" 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 { useTrackingSystemsFeature } from '@/composables/useTrackingSystemsFeature'
import { useUserStore } from '@/store/userStore'
import { useUserPageContext } from '../composables/useUserPage'
import MobilePageHeader from '@/layouts/components/MobilePageHeader.vue'

const userStore = useUserStore()
const walletStore = useWalletStore()
const showLogoutConfirm = ref<boolean>()
const logoutLoading = ref<boolean>(false)
const { y } = useWindowScroll()
const { trackingSystemsEnabled } = useTrackingSystemsFeature()

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;
}

.mobile-user-view {
  min-height: 100%;
}
</style>