MOSE-Official-Website-20250712/pages/index/my.vue

<template>
  <view class="my-page">
    <!-- 顶部渐变背景区域 -->
    <view class="header-section">
      <!-- 右上角图标 -->
      <view class="header-icons">
        <uv-icon name="more-dot-fill" size="20" color="white"></uv-icon>
        <uv-icon name="setting" size="20" color="white"></uv-icon>
      </view>
      
      <!-- 用户信息区域 -->
      <view class="user-info">
        <view class="avatar-container">
          <image class="avatar" :src="userInfo.headImage || '/static/默认头像.png'" mode="aspectFill"></image>
        </view>
        <text class="username">{{ userInfo.nickName }}</text>
      </view>
    </view>
    
    <!-- 积分信息区域 -->
    <view class="points-section">
      <view class="points-item yellow" @click="navigateTo('favoritesActivity')">
        <view class="points-content">
          <text class="points-number">{{ userInfo.collection }}</text>
          <text class="points-label yellow">我的收藏</text>
        </view>
        <view class="points-icon">
          <uv-icon name="star-fill" size="28" color="#FFD700"></uv-icon>
        </view>
      </view>
      <view class="points-item blue">
        <view class="points-content">
          <text class="points-number">{{ userInfo.score }}</text>
          <text class="points-label blue">可用积分</text>
        </view>
        <view class="points-icon">
          <uv-icon name="integral" size="28" color="#4A90E2"></uv-icon>
        </view>
      </view>
    </view>
    
    <!-- 常用功能区域 -->
    <view class="functions-container">
      <text class="section-title">常用功能</text>
      
      <view class="functions-grid">
        <!-- 第一行 -->
        <view class="function-item" @click="navigateTo('profile')">
          <image class="function-icon" src="/static/我的_我的资料.png" mode="aspectFit"></image>
          <text class="function-text">我的资料</text>
        </view>
        
        <view class="function-item" @click="navigateTo('reports')">
          <image class="function-icon" src="/static/我的_我的报名.png" mode="aspectFit"></image>
          <text class="function-text">我的报名</text>
        </view>
        
        <view class="function-item" @click="navigateTo('records')">
          <image class="function-icon" src="/static/我的_兑换记录.png" mode="aspectFit"></image>
          <text class="function-text">兑换记录</text>
        </view>
        
        <view class="function-item" @click="navigateTo('favorites')">
          <image class="function-icon" src="/static/我的_商品收藏.png" mode="aspectFit"></image>
          <text class="function-text">商品收藏</text>
        </view>
        
        <!-- 第二行 -->
        <view class="function-item" @click="logout">
          <image class="function-icon" src="/static/我的_退出登录.png" mode="aspectFit"></image>
          <text class="function-text">退出登录</text>
        </view>
        
        <view class="function-item" @click="navigateTo('about')">
          <image class="function-icon" src="/static/我的_关于我们.png" mode="aspectFit"></image>
          <text class="function-text">关于我们</text>
        </view>
        
        <view class="function-item" @click="navigateTo('checkin')">
          <view class="function-icon-wrapper">
            <uv-icon name="file-text-fill" size="32" color="#218cdd"></uv-icon>
          </view>
          <text class="function-text">活动签到</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'MyPage',
  data() {
    return {
      userInfo: {
        name: '小精灵',
        headImage: '/static/默认头像.png',
        collection: 5,
        score: 41
      }
    }
  },
  methods: {
    navigateTo(page) {
      console.log('导航到:', page)
      // 根据不同页面进行导航
      switch(page) {
        case 'profile':
          uni.navigateTo({
            url: '/subPages/my/myProfile'
          })
          break
        case 'reports':
          uni.navigateTo({
            url: '/subPages/my/myRegistrations'
          })
          break
        case 'records':
          uni.navigateTo({
            url: '/subPages/my/exchangeRecord'
          })
          break
        case 'favorites':
          uni.navigateTo({
            url: '/subPages/my/productFavorites'
          })
          break
        case 'favoritesActivity':
          uni.navigateTo({
            url: '/subPages/my/activityFavorites'
          })
          break
        case 'about':
          // 关于我们页面
          break
        case 'checkin':
          uni.navigateTo({
            url: '/subPages/my/activityCheckin'
          })
          break
        default:
          break
      }
    },
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除用户信息
            uni.removeStorageSync('userInfo')
            uni.showToast({
              title: '已退出登录',
              icon: 'success'
            })
            // 跳转到登录页面
            setTimeout(() => {
              uni.reLaunch({
                url: '/subPages/login/login'
              })
            }, 1500)
          }
        }
      })
    },
    async getUser() {
      const res = await this.$api.user.queryUser()
      this.userInfo = res.result
    }
  },
  onShow() {
    this.getUser()
  }
}
</script>

<style lang="scss" scoped>
.my-page {
  min-height: 100vh;
  background-color: #FFFFFF;
}

// 顶部渐变背景区域
.header-section {
  background: linear-gradient(180deg, #1488db, #98b5f1);
  padding: 60rpx 40rpx 80rpx;
  position: relative;
}

.header-icons {
  display: flex;
  justify-content: flex-end;
  gap: 32rpx;
  margin-bottom: 40rpx;
}

// 用户信息区域
.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60rpx;
}

.avatar-container {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 20rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.avatar {
  width: 100%;
  height: 100%;
}

.username {
  font-size: 30rpx;
  color: #000000;
  // font-weight: bold;
}

// 积分信息区域
.points-section {
  display: flex;
  justify-content: space-between;
  margin: 30rpx 30rpx;
  gap: 24rpx;
}

.points-item {
  border-radius: 12rpx;
  padding: 32rpx 24rpx;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  box-shadow: 0px 1.5px 3px 0px rgba(0,0,0,0.16); 
  &.yellow {
    background: #FEF4D1;

  }
  
  &.blue {
    background: #C7E6FF;
  }
}

.points-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.points-number {
  font-size: 48rpx;
  color: #000000;
  font-weight: bold;
  line-height: 1;
}

.points-label {
  font-size: 24rpx;
  color: #000000;
  font-size: 24rpx;
  // color: white;
  margin-top: 8rpx;
  &.yellow{
    color: #DEB31B;
    
  }
  &.blue{
    color: #1488db;
  }
}

.points-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

// 常用功能区域
.functions-container {
  height: 319px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 1.5px 3px 0px rgba(0,0,0,0.16);
  margin: 20rpx 30rpx;
  padding: 40rpx;
}

.section-title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 40rpx;
  display: block;
}

.functions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40rpx 10rpx;
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
  padding: 20rpx;
  border-radius: 12rpx;
  transition: all 0.3s ease;
  
  &:active {
    background-color: #F0F8FF;
    transform: scale(0.95);
  }
}

.function-icon {
  width: 48rpx;
  height: 48rpx;
}

.function-icon-wrapper {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.function-text {
  font-size: 24rpx;
  color: #000000;
  text-align: center;
}
</style>