zgty-mas-m/pages/index/user.vue

<!-- 个人中心 -->
<template>
  <s-layout
    title="我的"
    tabbar="/pages/index/user"
    navbar="custom"
    onShareAppMessage
  >
    <view class="user-container">
      <!-- 用户信息卡片 -->
      <view class="user-card">
        <view class="user-info">
          <view class="avatar-section" @click="handleAvatarClick">
            <s-avatar 
              :src="userInfo.avatar"
              :nickname="userInfo.nickname || userInfo.username"
              :size="80"
              :bg-color="getAvatarBgColor(userInfo.nickname || userInfo.username)"
            />
            <view class="user-details">
              <view class="user-name">{{ userInfo.nickname || userInfo.username || '未登录' }}</view>
              <view class="user-desc">{{ userInfo.mobile || '点击登录获取更多功能' }}</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 功能菜单 -->
      <view class="menu-section">
        <view class="menu-group">
          <view class="group-title">账户管理</view>
          <view class="menu-list">
            <view class="menu-item" @click="goToUserInfo">
              <view class="item-left">
                <view class="item-icon" style="background: var(--ui-BG-Main-opacity-1);">
                  <u-icon name="account" size="20" color="var(--ui-BG-Main)"/>
                </view>
                <view class="item-title">个人信息</view>
              </view>
              <u-icon name="arrow-right" size="16" color="#c0c4cc"/>
            </view>
            <view class="menu-item" @click="goToAbout">
              <view class="item-left">
                <view class="item-icon" style="background: var(--ui-BG-Main-opacity-1);">
                  <u-icon name="info-circle" size="20" color="var(--ui-BG-Main)"/>
                </view>
                <view class="item-title">关于我们</view>
              </view>
              <u-icon name="arrow-right" size="16" color="#c0c4cc"/>
            </view>
          </view>
        </view>

        <!-- 退出登录按钮 -->
        <view class="logout-section" v-if="isLogin">
          <view class="logout-btn" @click="handleLogout">
            退出登录
          </view>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import { computed } from 'vue';
import { onShow, onPullDownRefresh } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import { getAvatarBgColor } from '@/sheep/utils/avatar.js';

// 用户信息
const userInfo = computed(() => sheep.$store('user').userInfo);
const isLogin = computed(() => sheep.$store('user').isLogin);

// 页面事件
onShow(() => {
  // 先检查登录状态，未登录则会自动跳转到登录页
  if (!sheep.$store('user').isLogin) {
    return;
  }
  // 已登录时更新用户数据
  sheep.$store('user').updateUserData();
});

onPullDownRefresh(() => {
  sheep.$store('user').updateUserData();
  setTimeout(() => {
    uni.stopPullDownRefresh();
  }, 1000);
});

// 头像点击事件
function handleAvatarClick() {
  // 跳转到个人信息页面编辑头像
  uni.navigateTo({
    url: '/pages/user/info'
  });
}

// 方法
function goToUserInfo() {
  uni.navigateTo({
    url: '/pages/user/info'
  });
}

function goToAbout() {
  uni.navigateTo({
    url: '/pages/public/about'
  });
}

function handleLogout() {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    confirmText: '确定',
    cancelText: '取消',
    success: (res) => {
      if (res.confirm) {
        sheep.$store('user').logout();
      }
    }
  });
}
</script>

<style lang="scss" scoped>
.user-container {
  min-height: 100vh;
  background-color: #f8f9fa;
  padding: 20rpx;
}

/* 用户信息卡片 */
.user-card {
  background: var(--gradient-diagonal-primary, linear-gradient(135deg, #0055A2, rgba(0, 85, 162, 0.6)));
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 20rpx rgba(0, 85, 162, 0.3);
  
  .user-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    .avatar-section {
      display: flex;
      align-items: center;
      flex: 1;
      
      .user-details {
        margin-left: 20rpx;
        
        .user-name {
          font-size: 32rpx;
          font-weight: 600;
          color: #fff;
          margin-bottom: 8rpx;
        }
        
        .user-desc {
          font-size: 24rpx;
          color: rgba(255, 255, 255, 0.8);
        }
      }
    }
    
    .user-actions {
      padding: 10rpx;
    }
  }
}

/* 菜单区域 */
.menu-section {
  .menu-group {
    margin-bottom: 30rpx;
    
    .group-title {
      font-size: 28rpx;
      font-weight: 600;
      color: #303133;
      margin-bottom: 20rpx;
      padding-left: 10rpx;
    }
    
    .menu-list {
      background: #fff;
      border-radius: 16rpx;
      padding: 0 30rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
      
      .menu-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30rpx 0;
        border-bottom: 1px solid #f5f5f5;
        transition: background-color 0.3s ease;
        
        &:last-child {
          border-bottom: none;
        }
        
        &:active {
          background-color: #f8f9fa;
        }
        
        .item-left {
          display: flex;
          align-items: center;
          flex: 1;
          
          .item-icon {
            width: 64rpx;
            height: 64rpx;
            border-radius: 12rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 24rpx;
          }
          
          .item-title {
            font-size: 28rpx;
            color: #303133;
            font-weight: 500;
          }
        }
      }
    }
  }
}

/* 退出登录按钮 */
.logout-section {
  margin-top: 40rpx;
  
  .logout-btn {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    text-align: center;
    font-size: 28rpx;
    color: #f56c6c;
    font-weight: 500;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    
    &:active {
      background-color: #fef0f0;
      transform: translateY(2rpx);
    }
  }
}
</style>