fjrcloud-community-app/pages/index/user.vue

<!-- 个人中心：用户信息页面 -->
<template>
  <s-layout title="我的">
    <view class="user-page">
      <!-- 渐变背景装饰 -->
      <view class="gradient-bg"></view>

      <!-- 顶部用户信息卡片 -->
      <view class="user-card-box">
        <view class="user-card">
          <!-- 头像 -->
          <image class="avatar" :src="userInfo.avatar" mode="aspectFill" />
          
          <!-- 用户信息 -->
          <view class="user-info">
            <text class="nickname">{{ userInfo.nickname || '未登录' }}</text>
            <view class="address">
              <image class="location-icon me-icon7" src="/static/img/me-icon7.png" mode="aspectFit" />
              <text class="address-text">{{ userInfo.communityAddress || '未设置地址' }}</text>
            </view>
            <text class="phone">{{ userInfo.mobile || '未绑定手机号' }}</text>
          </view>
        </view>
      </view>

      <!-- 账户信息 -->
      <view class="section">
        <view class="section-title">账户信息</view>
        <view class="menu-card">
          <view class="menu-item" @tap="navigateTo('/pages/user/info')">
            <view class="menu-item-left">
              <image class="menu-icon" src="/static/img/me-icon1.png" mode="aspectFit" />
              <text class="menu-label">个人资料</text>
            </view>
            <image class="right-icon" src="/static/img/right-icon.png" mode="aspectFit" />
          </view>
          <view class="divider"></view>
          <view class="menu-item">
            <view class="menu-item-left">
              <image class="menu-icon" src="/static/img/me-icon2.png" mode="aspectFit" />
              <text class="menu-label">消息通知</text>
            </view>
            <image class="right-icon" src="/static/img/right-icon.png" mode="aspectFit" />
          </view>
        </view>
      </view>

      <!-- 其他信息 -->
      <view class="section">
        <view class="section-title">其他信息</view>
        <view class="menu-card">
          <view class="menu-item" @tap="navigateTo('/pages/public/setting')">
            <view class="menu-item-left">
              <image class="menu-icon-small" src="/static/img/me-icon3.png" mode="aspectFit" />
              <text class="menu-label">系统设置</text>
            </view>
            <image class="right-icon" src="/static/img/right-icon.png" mode="aspectFit" />
          </view>
          <view class="divider"></view>
          <view class="menu-item" @tap="navigateTo('/pages/public/richtext?title=帮助中心')">
            <view class="menu-item-left">
              <image class="menu-icon-small" src="/static/img/me-icon4.png" mode="aspectFit" />
              <text class="menu-label">帮助中心</text>
            </view>
            <image class="right-icon" src="/static/img/right-icon.png" mode="aspectFit" />
          </view>
          <view class="divider"></view>
          <view class="menu-item" @tap="navigateTo('/pages/public/richtext?title=关于我们')">
            <view class="menu-item-left">
              <image class="menu-icon-small" src="/static/img/me-icon5.png" mode="aspectFit" />
              <text class="menu-label">关于我们</text>
            </view>
            <image class="right-icon" src="/static/img/right-icon.png" mode="aspectFit" />
          </view>
          <view class="divider"></view>
          <view class="menu-item" @tap="navigateTo('/pages/public/richtext?title=隐私设置')">
            <view class="menu-item-left">
              <image class="menu-icon-small" src="/static/img/me-icon6.png" mode="aspectFit" />
              <text class="menu-label">隐私设置</text>
            </view>
            <image class="right-icon" src="/static/img/right-icon.png" mode="aspectFit" />
          </view>
        </view>
      </view>

      <!-- 退出登录按钮 -->
      <view class="logout-btn" @tap="handleLogout">
        <text class="logout-text">退出登录</text>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import AuthUtil from '@/sheep/api/member/auth';

// 用户信息
const userInfo = ref({
  avatar: '',
  nickname: '',
  mobile: '',
  communityAddress: ''
});

// 页面显示时更新数据
onShow(() => {
  updateUserInfo();
});

// 更新用户信息
const updateUserInfo = () => {
  const user = sheep.$store('user').userInfo || {};
  userInfo.value = {
    avatar: user.avatar || '/static/img/login_img.png',
    nickname: user.nickname || '未登录',
    mobile: user.mobile || '',
    communityAddress: user.communityAddress || '未设置地址'
  };
};

// 页面跳转
const navigateTo = (url) => {
  if (!url) return;
  sheep.$router.go(url);
};

// 退出登录
const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: async (res) => {
      if (res.confirm) {
        const { code } = await AuthUtil.logout();
        if (code === 0) {
          sheep.$store('user').logout();
          sheep.$router.go('/pages/index/login-page');
        } else {
          uni.showToast({ title: '退出登录失败', icon: 'none' });
        }
      }
    }
  });
};
</script>

<style lang="scss" scoped>
.user-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  position: relative;
  padding-bottom: 40rpx;
}

// 渐变背景装饰
.gradient-bg {
  width: 750rpx;
  height: 660rpx;
  background: linear-gradient(180deg, #FA7E49 0%, #f5f5f5 100%);
  opacity: 0.1;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

// 顶部用户卡片
.user-card-box {
  padding: 75rpx 34rpx;
  position: relative;
  z-index: 1;
}

.user-card {
  padding: 40rpx;
  background: #ffffff;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;

  .avatar {
    width: 153rpx;
    height: 153rpx;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .user-info {
    flex: 1;
    margin-left: 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .nickname {
      font-size: 36rpx;
      font-weight: 600;
      color: #333333;
      margin-bottom: 12rpx;
    }

    .address {
      display: flex;
      align-items: center;
      margin-bottom: 8rpx;

      .location-icon {
        width: 28rpx;
        height: 28rpx;
        margin-right: 8rpx;
      }

      .address-text {
        font-size: 26rpx;
        color: #666666;
      }
    }

    .phone {
      font-size: 26rpx;
      color: #999999;
    }
  }
}

// 区块样式
.section {
  position: relative;
  z-index: 1;
  margin: 0 38rpx 24rpx;

  .section-title {
    font-size: 28rpx;
    font-weight: 500;
    color: #333333;
    margin-bottom: 20rpx;
    padding-left: 8rpx;
  }

  .menu-card {
    background: #ffffff;
    border-radius: 20rpx;
    padding: 0 32rpx;
    box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
  }
}

// 菜单项
.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 0;

  .menu-item-left {
    display: flex;
    align-items: center;

    .menu-icon {
      width: 76rpx;
      height: 76rpx;
      background: #FF9966;
      border-radius: 19rpx;
      margin-right: 24rpx;
    }

    .menu-icon-small {
      width: 38rpx;
      height: 38rpx;
      border-radius: 0;
      margin-right: 24rpx;
    }

    .menu-label {
      font-size: 30rpx;
      color: #333333;
    }
  }

  .right-icon {
    width: 31rpx;
    height: 31rpx;
  }
}

// 定位图标
.location-icon {
  width: 28rpx;
  height: 28rpx;
  margin-right: 8rpx;
}

// 分割线
.divider {
  height: 1rpx;
  background-color: #f0f0f0;
  margin: 0;
}

// 退出登录按钮
.logout-btn {
  margin: 40rpx 40rpx 0;
  height: 107rpx;
  background: #EEEEEE;
  border-radius: 31rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  .logout-text {
    height: 38rpx;
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 400;
    font-size: 27rpx;
    color: #262626;
    line-height: 38rpx;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }
}
</style>