JCSS / jcss-miniprogram

<template>
  <view class="page-container">
    <!-- 顶部用户信息栏 -->
    <view class="header-bg">
      <up-avatar
          :src="'https://img.jichengshanshui.com.cn:28207/appimg/default-avatar.png'"
          size="100rpx"
          shape="square"
          class="user-avatar"
      ></up-avatar>

      <!-- 用户名+手机号 -->
      <view class="user-info-content">
        <view class="user-name">{{ userStore.isLogin ? userInfo.username : '未登录' }}</view>
<!--        <view class="user-phone">{{ userStore.isLogin ? userInfo.nickname : '&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;' }}</view>-->
        <view class="user-phone">上次登录时间{{ timeFormat(userInfo.loginDate)}}</view>

      </view>

    </view>


    <view class="mine-content">
      <up-cell-group title="个人信息">
        <up-cell  title="姓名"  :value="userInfo.nickname"></up-cell>
        <up-cell  title="账号" :value="userInfo.username"></up-cell>
        <up-cell  title="电话" :value="userInfo.mobile"></up-cell>
        <up-cell  title="角色" :value="translateRoles(userStore.userInfo.roles)"></up-cell>
      </up-cell-group>
    </view>


    <up-button
        v-if="!userStore.isLogin"
        type="primary"
        size="mini"
        shape="circle"
        @click="handleLogin"
        class="login-btn"
    >
      立即登录
    </up-button>

    <!-- 退出登录按钮 (仅登录状态显示) -->
    <view v-if="userStore.isLogin" class="logout-btn-wrap">
      <up-button
          type="primary"
          size="large"
          shape="circle"
          @click="confirmLogout"
          class="login-btn"
      >
        退出登录
      </up-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useUserStore } from '@/pinia/user'
import {  showModal, onShow } from '@dcloudio/uni-app'
import {translateRoles} from '@/common/utils/common'
// 初始化Pinia仓库
const userStore = useUserStore()
import { timeFormat } from '@/uni_modules/uview-plus';
// 计算属性获取用户信息（响应式）
const userInfo = computed(() => userStore.userInfo.user || {})

/**
 * 处理登录跳转
 */
const handleLogin = () => {
  uni.navigateTo({
    url: '/pages/login/index'
  })
}

/**
 * 确认退出登录（带二次确认）
 */
const confirmLogout = async () => {
  try {
    const res = await uni.showModal({
      title: '提示',
      content: '确定要退出登录吗？',
      confirmText: '退出',
      cancelText: '取消'
    })

    if (res.confirm) {
      await userStore.logout()
      // uni.showToast({ title: '退出登录成功', type: 'success' })
    }
  } catch (error) {
    console.error('退出登录失败：', error)
    uni.showToast({ title: '退出登录失败，请重试', type: 'error' })
  }
}

// 页面显示时检查登录状态
onShow(() => {
  userStore.checkLogin()
})
</script>

<script lang="ts">
export default {
  name: 'UserCenter',
  options: {
    navigationBarTitleText: '个人中心'
  }
}
</script>

<style lang="scss" scoped>
.page-container {

}

.header-bg {
  position:relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 230px;
  //height: 120px;
  background: url("https://img.jichengshanshui.com.cn:28207/appimg/bg.jpg") no-repeat;
  background-size: 100% 100%;
  z-index: -1;
  display: flex;
  padding: 80px 0 0 20px;
}
.mine-content{
  margin-top: -150px;
  border-radius: 30px 30px 0 0;
  background: #fff;
}

.user-avatar {

}

.user-info-content {
  margin-left: 15px;
  flex: 1;

  .user-name {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }

  .user-phone {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
  }
}
// 退出登录按钮
.logout-btn-wrap {
  margin: 100px 10px 10px;
}
// 登录按钮
.login-btn {
  margin-top: 20px;
  width: 100%;
  height: 44px;
  line-height: 44px;
  border-radius: 4px;
  font-size: 16px;

  background: #0A86F4;
  box-shadow: 0px 4px 6px 1px rgba(25,94,215,0.5);
  border-radius: 23px;
}
</style>