JCSS / jcss-miniprogram

  <template>
    <view class="user-center-page">
      <!-- 顶部用户信息栏 -->
      <view class="user-info-header">
        <!-- 渐变背景层 -->
        <view class="header-bg"></view>
        <!-- 用户信息主体 -->
        <view class="user-info-wrap">
          <!-- 头像 -->
          <up-avatar

              :src="userStore.isLogin ? userInfo.avatar : '/static/imgs/default-avatar.png'"

              size="100rpx"
              shape="circle"
              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 : '--------' }}</view>

          </view>
  

          <!-- 登录入口 -->

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

      <!-- 退出登录按钮 (仅登录状态显示) -->

      <view v-if="userStore.isLogin" class="logout-btn-wrap">

        <up-button
            type="primary"
            size="large"
            @click="confirmLogout"
        >
          退出登录
        </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'

  // 初始化Pinia仓库
  const userStore = useUserStore()

  // 计算属性获取用户信息（响应式）
  const userInfo = computed(() => userStore.userInfo.user || {})

  /**
   * 处理登录跳转
   */

  const handleLogin = () => {

    uni.navigateTo({
      url: '/pages/login/index'

    })
  }
  

  /**
   * 确认退出登录（带二次确认）
   */

  const confirmLogout = async () => {

    console.log('13213')

    try {

      console.log('434')
      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>
  .user-center-page {
    min-height: 100vh;
    background-color: #f5f7fa;
  }
  
  // 顶部用户信息栏
  .user-info-header {
    position: relative;
    padding-bottom: 40rpx;
  
    .header-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 320rpx;
      background: linear-gradient(135deg, #409eff, #67c23a);
      border-radius: 0 0 20rpx 20rpx;
      z-index: 1;
    }
  
    .user-info-wrap {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      padding: 60rpx 30rpx 0;
  
      .user-avatar {
        border: 4rpx solid #ffffff;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

        transition: transform 0.2s ease;
        &:active {
          transform: scale(0.95);
        }

      }
  
      .user-info-content {
        margin-left: 30rpx;
        flex: 1;
  
        .user-name {
          font-size: 32rpx;
          font-weight: 600;
          color: #ffffff;
          margin-bottom: 10rpx;
          text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
        }
  
        .user-phone {
          font-size: 26rpx;
          color: rgba(255, 255, 255, 0.9);

        }
      }
    }
  }
  

  // 退出登录按钮
  .logout-btn-wrap {
    margin: 200rpx 20rpx 20rpx;

  }

  </style>