shanxia2.0/miniprogram/pages/mine/mine.vue

<script setup>
import { computed, ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useUserStore } from '@/stores/user'
import { PAGE_PATHS } from '@/config/api'
import { resolveUserAvatarUrl } from '@/utils/avatar'
import { useShareToLogin } from '@/utils/shareToLogin'

useShareToLogin()
const userStore = useUserStore()
const loggingOut = ref(false)

const displayName = computed(() => {
  const info = userStore.userInfo
  if (!info) return '未登录'
  return info.realName || info.username || '用户'
})

const username = computed(() => userStore.userInfo?.username || '-')
const phone = computed(() => userStore.userInfo?.phone || userStore.userInfo?.mobile || '-')
const email = computed(() => userStore.userInfo?.email || '-')
const deptName = computed(
  () => userStore.userInfo?.deptName || userStore.userInfo?.dept_name || '-'
)
const roleLabel = computed(() => userStore.userRole || '-')
const avatarUrl = computed(() =>
  resolveUserAvatarUrl(userStore.userInfo?.avatarUrl, userStore.userRole)
)

onShow(() => {
  userStore.checkLoginStatus()
  if (!userStore.isLoggedIn) {
    uni.reLaunch({ url: PAGE_PATHS.login })
    return
  }
  userStore.refreshUserInfo()
})

const handleSaveHint = () => {
  uni.showToast({ title: '个人信息修改将在后续开放', icon: 'none' })
}

const handleLogout = async () => {
  if (loggingOut.value) return
  loggingOut.value = true
  try {
    await userStore.logout()
  } finally {
    loggingOut.value = false
  }
}
</script>

<template>
  <view class="mp-page mp-page--tab">
    <view class="mp-profile-hero">
      <view class="mp-profile-hero__user">
        <view class="mp-profile-hero__avatar">
          <image v-if="avatarUrl" :src="avatarUrl" mode="aspectFill" />
        </view>
        <view>
          <text class="mp-profile-hero__name">{{ displayName }}</text>
          <text class="mp-profile-hero__dept">山峡化工 · {{ deptName }}</text>
        </view>
      </view>
    </view>

    <view class="mp-profile-panel">
      <view class="mp-form-item">
        <text class="mp-form-item__label">姓名</text>
        <text class="mp-form-item__value">{{ displayName }}</text>
      </view>
      <view class="mp-form-item">
        <text class="mp-form-item__label">账号</text>
        <text class="mp-form-item__value">{{ username }}</text>
      </view>
      <view class="mp-form-item">
        <text class="mp-form-item__label">手机号</text>
        <text class="mp-form-item__value">{{ phone }}</text>
      </view>
      <view class="mp-form-item">
        <text class="mp-form-item__label">邮箱</text>
        <text class="mp-form-item__value">{{ email }}</text>
      </view>
      <view class="mp-form-item">
        <text class="mp-form-item__label">所属部门</text>
        <text class="mp-form-item__value">{{ deptName }}</text>
      </view>
      <view class="mp-form-item">
        <text class="mp-form-item__label">角色</text>
        <text class="mp-form-item__value">{{ roleLabel }}</text>
      </view>
    </view>

    <view class="mp-profile-actions">
      <button class="mp-btn mp-btn--primary mp-btn--block" @click="handleSaveHint">保存修改</button>
      <button
        class="mp-btn mp-btn--ghost mp-btn--block"
        :loading="loggingOut || userStore.isLoading"
        @click="handleLogout"
      >
        退出登录
      </button>
    </view>
    <text class="mp-hint">本期支持查看个人信息与退出登录；资料编辑后续开放</text>
    <app-env-badge />
  </view>
</template>