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>
        <InstallButton />
        <div class="h-40vh overflow-y-auto mt-4">
          <BasicButton
            v-for="action in menuActions"
            :key="action.id"
            class="mt-2 w-full"
            icon=""
            iconSize="18"
            size="large"
            @click="action.onClick"
          >
            <div class="flex">
              <BasicIcon :icon="action.icon" class="absolute right-8" />
              <div>{{ action.label }}</div>
            </div>
          </BasicButton>
          <BasicButton
              class="mt-2 w-full"
              icon=""
              iconSize="18"
              size="large"
              @click="requestLogout"
          >
            <div class="flex">
              <Icon
                  class="color-transition absolute right-8"
                  icon="vuesax-linear:logout"
              />
              <div>خروج از حساب کاربری</div>
            </div>
          </BasicButton>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import img from '@/assets/img/user_ly1.svg'
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
import InstallButton from '@/components/InstallButton.vue'
import Icon from '@/components/BasicPacks/BasicIcon.vue'
import { useUserStore } from '@/store/userStore'
import { useUserPageContext } from '../composables/useUserPage'
import MobilePageHeader from '@/layouts/components/MobilePageHeader.vue'

const userStore = useUserStore()

const { editPassVisible, copyCode, shareCode, requestLogout, menuActions } =
  useUserPageContext()
</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>