xiangqinxiangmu/LiangZhiYUMao/pages/mine/index.vue

<template>
  <view class="mine-page">
    <!-- 用户信息区域 -->
    <view class="user-section">
      <view class="user-info">
        <image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
        <view class="user-details">
          <view class="nickname-row">
            <text class="nickname" @click="goLogin">{{ userInfo.nickname }}</text>
            <!-- VIP标志 -->
          <view class="vip-badge" v-if="userInfo.isVip">
            <text class="vip-badge-text">VIP</text>
          </view>
            <view class="verify-badge" @click="goVerify" v-if="!userInfo.isVerified">
              <text class="verify-text">未实名，立即认证</text>
            </view>
          </view>

          <!-- 基本信息展示 -->
          <view class="user-basic-info">
            <view class="info-item" v-if="userInfo.gender">
              <text class="info-icon">{{ userInfo.gender === 1 ? '👨' : '👩' }}</text>
              <text class="info-text">{{ userInfo.genderText }}</text>
            </view>
            <view class="info-item" v-if="userInfo.age">
              <text class="info-icon">🎂</text>
              <text class="info-text">{{ userInfo.age }}岁</text>
            </view>
            <view class="info-item" v-if="userInfo.height">
              <text class="info-icon">📏</text>
              <text class="info-text">{{ userInfo.height }}cm</text>
            </view>
<!--            <view class="info-item" v-if="userInfo.educationText">-->
<!--              <text class="info-icon">🎓</text>-->
<!--              <text class="info-text">{{ userInfo.educationText }}</text>-->
<!--            </view>-->
          </view>

          <view class="progress-row">
            <view class="progress-bar">
              <view class="progress-fill" :style="{ width: userInfo.profileProgress + '%' }"></view>
            </view>
            <text class="progress-text" @click="goCompleteProfile">完善资料 ></text>
          </view>
        </view>
      </view>
      
      <!-- 统计数据展示 -->
      <view class="user-stats">
        <view class="stats-item" @click="goToLikedByMe">
          <text class="stats-number">{{ stats.myConnection }}</text>
          <text class="stats-label">我喜欢的</text>
        </view>
        <view class="stats-item" @click="goToLikedMe">
          <text class="stats-number">{{ stats.myFavorites }}</text>
          <text class="stats-label">喜欢我的</text>
        </view>
        <view class="stats-item" @click="goToVisitedByMe">
          <text class="stats-number">{{ stats.iViewed }}</text>
          <text class="stats-label">我浏览的</text>
        </view>
      </view>
    </view>

    <!-- VIP会员卡片 -->
    <view class="vip-card" @click="goVip" v-if="!userInfo.isVip">
      <view class="vip-content">
        <view class="vip-icon">👑</view>
        <view class="vip-info">
          <text class="vip-title">VIP会员未开通</text>
          <text class="vip-subtitle">开通会员可享受尊贵服务哦</text>
        </view>
      </view>
      <view class="vip-button">立即开通</view>
    </view>


    <!-- 快捷入口 -->
    <view class="quick-actions">
      <view class="action-item" @click="goToPage('basicInfo')">
        <view class="action-icon calendar-icon">🆔</view>
        <text class="action-label">基本资料</text>
      </view>
      <view class="action-item" @click="goToPage('partnerRequirement')">
        <view class="action-icon heart-icon">💜</view>
        <text class="action-label">对象要求</text>
      </view>
      <view class="action-item" @click="goToPage('verifyRealName')">
        <view class="action-icon phone-icon">🪪</view>
        <text class="action-label">实名认证</text>
      </view>
      <view class="action-item" @click="goToPage('verifyEducation')">
        <view class="action-icon phone-icon">🎓</view>
        <text class="action-label">学历认证</text>
      </view>
    </view>

    <!-- 签到弹窗 -->
    <uni-popup ref="checkinPopup" type="center" :mask-click="true">
      <view class="checkin-popup">
        <view class="popup-header">
          <text class="popup-title">每日签到</text>
          <view class="close-btn" @click="closeCheckinPopup">
            <text class="close-icon">✕</text>
          </view>
        </view>

        <view class="checkin-info">
          <view class="info-item">
            <text class="info-label">已连续签到</text>
            <text class="info-value">{{ checkinData.continuousDays }} 天</text>
          </view>
          <view class="info-item">
            <text class="info-label">累计签到</text>
            <text class="info-value">{{ checkinData.totalDays }} 天</text>
          </view>
        </view>

        <scroll-view scroll-y class="checkin-content">
          <view class="checkin-calendar">
            <view class="calendar-header">
              <text class="month-text">{{ currentMonth }}</text>
            </view>
            <view class="week-header">
              <text class="week-day" v-for="day in weekDays" :key="day">{{ day }}</text>
            </view>
            <view class="calendar-body">
              <view
                  class="calendar-day"
                  v-for="(day, index) in calendarDays"
                  :key="index"
                  :class="{
									'empty': !day.date,
									'checked': day.checked,
									'today': day.isToday
								}"
              >
                <text class="day-num" v-if="day.date">{{ day.date }}</text>
                <view class="check-mark" v-if="day.checked">✓</view>
              </view>
            </view>
          </view>

          <view class="checkin-rewards">
            <text class="rewards-title">签到奖励</text>
            <view class="rewards-list">
              <view
                  class="reward-item"
                  v-for="(reward, index) in checkinRewards"
                  :key="index"
                  :class="{ 'received': reward.received, 'current': reward.isCurrent }"
              >
                <view class="reward-icon">{{ reward.icon }}</view>
                <text class="reward-day">第{{ reward.day }}天</text>
                <text class="reward-text">{{ reward.reward }}</text>
                <view class="received-mark" v-if="reward.received">✓</view>
              </view>
            </view>
          </view>
        </scroll-view>

        <view class="checkin-button-wrapper">
          <button
              class="checkin-btn"
              :class="{ 'disabled': checkinData.todayChecked }"
              @click="handleCheckin"
              :disabled="checkinData.todayChecked"
          >
            {{ checkinData.todayChecked ? '今日已签到' : '立即签到' }}
          </button>
        </view>
      </view>
    </uni-popup>

    <!-- 功能菜单列表 -->
    <view class="menu-list">
		
		<view class="menu-item" @click="showCheckinPopup">
		  <view class="menu-left">
		    <text class="menu-icon">📅</text>
		    <text class="menu-text">签到</text>
		  </view>
		  <text class="menu-arrow">›</text>
		</view>
		
		<view class="menu-item" @click="goToPage('myDynamics')">
		  <view class="menu-left">
		    <text class="menu-icon">📝</text>
		    <text class="menu-text">我的动态</text>
		  </view>
		  <text class="menu-arrow">›</text>
		</view>
		
		<view class="menu-item" @click="goToPage('myActivity')">
		  <view class="menu-left">
		    <text class="menu-icon">📷</text>
		    <text class="menu-text">课程活动</text>
		  </view>
		  <text class="menu-arrow">›</text>
		</view>
		
		<view class="menu-item" @click="goToPage('partTimeMatchmaker')">
		  <view class="menu-left">
		    <text class="menu-icon">💎</text>
		    <text class="menu-text">兼职红娘</text>
		  </view>
		  <text class="menu-arrow">›</text>
		</view>
		
      <view class="menu-item" @click="goToPage('feedback')">
        <view class="menu-left">
          <text class="menu-icon">💬</text>
          <text class="menu-text">用户反馈</text>
        </view>
        <text class="menu-arrow">›</text>
      </view>

     <!-- <view class="menu-item" @click="goToPage('blacklist')">
        <view class="menu-left">
          <text class="menu-icon">📋</text>
          <text class="menu-text">黑名单</text>
        </view>
        <text class="menu-arrow">›</text>
      </view> -->

      <view class="menu-item" @click="goToPage('settings')">
        <view class="menu-left">
          <text class="menu-icon">⚙️</text>
          <text class="menu-text">设置</text>
        </view>
        <text class="menu-arrow">›</text>
      </view>
    </view>

   <!-- 底部导航栏 -->
   <common-tabbar current="mine" client-type="user" :badge-data="badgeData" />
  </view>
</template>

<script>
import api from '@/utils/api.js'
import userStatusCheck from '@/utils/userStatusCheck.js'
import CommonTabbar from '@/components/common-tabbar/common-tabbar.vue'

export default {
  components: {
    CommonTabbar
  },
  data() {
    return {
      // 网关地址
      gatewayURL: 'https://api.zhongruanke.cn',
      
      // 角标数据
      badgeData: { unreadCount: 0 },

      // 用户ID（如果没有登录，默认为1）
      currentUserId: null,

      // 用户信息（从后端获取）
      userInfo: {
        userId: null,
        nickname: '准备加载...',
        avatar: 'https://via.placeholder.com/100',
        phone: '',
        email: '',
        gender: null,
        genderText: '未知',
        birthDate: null,
        age: null,
        isVerified: false,
        profileProgress: 0,
        isVip: false
      },

      stats: {
        myConnection: 0,
        myFavorites: 0,
        whoViewedMe: 0,
        iViewed: 0
      },
      matchmaker: {
        code: 'xxxxx',
        phone: '99*******99'
      },
      // 签到数据
      checkinData: {
        continuousDays: 0,
        totalDays: 0,
        todayChecked: false,
        checkedDates: []
      },
      weekDays: ['日', '一', '二', '三', '四', '五', '六'],
      currentMonth: '',
      calendarDays: [],
      checkinRewards: []
    }
  },
  computed: {
    unreadCount() {
      return this.$store.getters.getTotalUnread || 0;
    }
  },
  onLoad() {


    // 立即检查登录状态
    const token = uni.getStorageSync('token')
    const userInfo = uni.getStorageSync('userInfo')

    // 直接同步登录状态，不强制弹窗
    this.syncLoginStatus()

    // 监听VIP购买成功事件
    uni.$on('vipPurchased', this.handleVipPurchased)
  },

  onUnload() {
    // 页面卸载时移除事件监听
    uni.$off('vipPurchased', this.handleVipPurchased)
  },
  //
  // onShow() {
  //
  //   // 检查登录状态
  //   const token = uni.getStorageSync('token')
  //   const userInfo = uni.getStorageSync('userInfo')
  //
  //   if (!token || !userInfo) {
  //     // 未登录，直接跳转（不显示弹窗，因为onLoad已经显示过了）
  //
  //     uni.navigateTo({
  //       url: '/pages/page3/page3'
  //     })
  //     return
  //   }
  //
  //   // 已登录，同步登录状态
  //   this.syncLoginStatus()
  // },
  methods: {
    // 同步登录状态并更新页面数据
    syncLoginStatus() {
    

      // 获取最新的登录信息
      const token = uni.getStorageSync('token')
      const userInfo = uni.getStorageSync('userInfo')
      const userId = uni.getStorageSync('userId')

      

      if (token && userInfo && userId) {
        
        this.currentUserId = parseInt(userId)

        // 直接使用存储的用户信息更新页面
        this.userInfo = {
          userId: userInfo.userId || userId,
          nickname: userInfo.nickname || '用户',
          avatar: userInfo.avatarUrl || userInfo.avatar || 'https://via.placeholder.com/100',
          phone: this.maskPhone(userInfo.phone) || '',
          email: userInfo.email || '',
          gender: userInfo.gender,
          genderText: this.getGenderText(userInfo.gender),
          birthDate: userInfo.birthDate,
          age: this.calculateAge(userInfo.birthDate),
          isVerified: false,
          profileProgress: userInfo.profileProgress || 0,
          isVip: false
        }

      

        // 强制页面刷新
        this.$forceUpdate()

        // 设置统计数据
        this.stats = {
          myConnection: 0,
          myFavorites: 0,
          whoViewedMe: 0,
          iViewed: 0
        }

        // 获取我喜欢的用户真实数量
        this.getLikedUsersCount()
        
        // 获取喜欢我的用户真实数量
        this.getLikedMeUsersCount()
        
        // 获取我浏览的用户真实数量
        this.getBrowseHistoryCount()

        // 立即加载最新用户信息（不延迟）
        this.loadUserInfo()

      } else {
       
        this.currentUserId = null

        // 设置未登录状态的用户信息
        this.userInfo = {
          userId: null,
          nickname: '立即登录',
          avatar: 'https://via.placeholder.com/100?text=未登录',
          phone: '',
          email: '',
          gender: 0,
          genderText: '未知',
          birthDate: null,
          age: null,
          isVerified: false,
          profileProgress: 0,
          isVip: false
        }

        // 清空统计数据
        this.stats = {
          myConnection: 0,
          myFavorites: 0,
          whoViewedMe: 0,
          iViewed: 0
        }

        // 强制页面更新
        this.$forceUpdate()
      }
    },

    // 简单的手机号脱敏
    maskPhone(phone) {
      if (!phone || phone.length < 11) return phone
      return phone.substring(0, 3) + '****' + phone.substring(7)
    },

    // 获取性别文字
    getGenderText(gender) {
      switch (gender) {
        case 1:
          return '男'
        case 2:
          return '女'
        default:
          return '未知'
      }
    },

    // 计算年龄
    calculateAge(birthDate) {
      if (!birthDate) return null
      const birth = new Date(birthDate)
      const today = new Date()
      let age = today.getFullYear() - birth.getFullYear()
      const monthDiff = today.getMonth() - birth.getMonth()
      if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
        age--
      }
      return age
    },
    // 从后端加载用户信息（通过网关）
    loadUserInfo() {
      // 检查是否真正登录（必须有token和userInfo）
      const token = uni.getStorageSync('token')
      const userInfo = uni.getStorageSync('userInfo')

      if (!token || !userInfo) {
        console.warn('未登录，不加载用户信息')
        return
      }

      // 检查用户ID是否有效
      if (!this.currentUserId || this.currentUserId <= 0) {
        console.warn('无有效用户ID，无法加载用户信息')
        this.setDefaultUserInfo()
        return
      }

     
      // 获取用户基本信息
      uni.request({
        url: this.gatewayURL + '/api/user/info?userId=' + this.currentUserId,
        method: 'GET',
        success: (res) => {
        

          if (res.data && res.data.code === 200) {
            const data = res.data.data
            

            // 更新用户信息
            this.userInfo = {
              userId: data.userId,
              nickname: data.nickname || '用户',
              avatar: data.avatar || 'https://via.placeholder.com/100',
              phone: data.phone,
              email: data.email,
              gender: data.gender,
              genderText: data.genderText,
              birthDate: data.birthDate,
              age: data.age,
              isVerified: data.isVerified || false,
              profileProgress: data.profileProgress || 0,
              isVip: data.isVip || false,
              // 扩展信息
              height: data.height,
              weight: data.weight,
              star: data.star,
              animal: data.animal,
              educationLevel: data.educationLevel,
              educationText: data.educationText,
              schoolName: data.schoolName,
              company: data.company,
              jobTitle: data.jobTitle,
              salaryRange: data.salaryRange,
              salaryText: data.salaryText,
              maritalStatus: data.maritalStatus,
              maritalText: data.maritalText,
              house: data.house,
              houseText: data.houseText,
              car: data.car,
              carText: data.carText,
              hobby: data.hobby,
              authenticityScore: data.authenticityScore
            }

           

            // 强制页面更新
            this.$forceUpdate()

            // 加载签到信息
            this.loadCheckinInfo()
          } else {
            console.error('获取用户信息失败:', res.data)
            const errorMsg = res.data?.message || '获取用户信息失败'

            // 如果是用户不存在的错误，给出特殊提示
            if (errorMsg.includes('用户不存在') || errorMsg.includes('用户ID无效')) {
              uni.showModal({
                title: '用户不存在',
                content: `当前用户ID（${this.currentUserId}）在数据库中不存在，登录信息有误，请重新登录`,
                showCancel: false,
                confirmText: '重新登录',
                success: () => {
                  // 清除登录信息并跳转登录页
                  uni.clearStorageSync()
                  uni.navigateTo({
                    url: '/pages/page3/page3?redirect=' + encodeURIComponent('/pages/mine/index')
                  })
                }
              })
            } else {
              uni.showToast({
                title: errorMsg,
                icon: 'none'
              })
              // 设置默认用户信息
              this.setDefaultUserInfo()
            }
          }
        },
        fail: (err) => {
          console.error('获取用户信息失败:', err)

          // API失败时，提示用户网络错误
          uni.showModal({
            title: '网络错误',
            content: '无法连接到服务器，请检查网络连接或稍后重试',
            showCancel: true,
            cancelText: '返回',
            confirmText: '重试',
            success: (modalRes) => {
              if (modalRes.confirm) {
                // 重试加载
                this.loadUserInfo()
              }
            }
          })

          // 设置默认用户信息以避免页面空白
          this.setDefaultUserInfo()

          uni.showToast({
            title: '网络连接失败',
            icon: 'none',
            duration: 2000
          })
        }
      })
    },

    // 设置默认用户信息（未登录或加载失败时）
    setDefaultUserInfo() {
      this.userInfo = {
        userId: null,
        nickname: '立即登录',
        avatar: 'https://via.placeholder.com/100?text=未登录',
        phone: '',
        email: '',
        gender: null,
        genderText: '未知',
        birthDate: null,
        age: null,
        isVerified: false,
        profileProgress: 0,
        isVip: false,
        height: null,
        weight: null,
        star: null,
        animal: null,
        educationLevel: null,
        schoolName: null,
        company: null,
        jobTitle: null,
        salaryRange: null,
        maritalStatus: null,
        house: null,
        car: null,
        hobby: null,
        authenticityScore: 0
      }
    },

    // 加载签到信息
    async loadCheckinInfo() {
      // 确保有用户ID
      if (!this.userInfo.userId) {
        console.error('用户ID不存在，无法加载签到信息')
        return
      }

      try {
        // 获取当前年月
        const today = new Date()
        const year = today.getFullYear()
        const month = today.getMonth() + 1
        
        // 用户端始终使用用户签到接口（与红娘端签到完全分开）
        const checkinInfoRes = await api.user.checkinInfo(this.userInfo.userId, year, month)
        
        // 更新签到数据
        this.checkinData = {
          continuousDays: checkinInfoRes.continuousDays || 0,
          totalDays: checkinInfoRes.totalDays || 0,
          todayChecked: checkinInfoRes.todayChecked || false,
          checkedDates: checkinInfoRes.checkedDates || []
        }
        
        // 生成日历
        this.generateCalendarFromBackend(this.checkinData.checkedDates)
        
        // 简单的奖励列表（签到7天给1天会员，14天给3天会员，30天给7天会员）
        this.checkinRewards = [
          { day: 7, icon: '👑', reward: '会员+1天', received: this.checkinData.continuousDays >= 7, isCurrent: this.checkinData.continuousDays < 7 },
          { day: 14, icon: '💎', reward: '会员+3天', received: this.checkinData.continuousDays >= 14, isCurrent: this.checkinData.continuousDays >= 7 && this.checkinData.continuousDays < 14 },
          { day: 30, icon: '🏆', reward: '会员+7天', received: this.checkinData.continuousDays >= 30, isCurrent: this.checkinData.continuousDays >= 14 && this.checkinData.continuousDays < 30 }
        ]
      } catch (err) {
        console.error('加载签到信息失败:', err)
        // 设置默认值
        this.checkinData = {
          continuousDays: 0,
          totalDays: 0,
          todayChecked: false,
          checkedDates: []
        }
        this.generateCalendarFromBackend([])
      }
    },

    // 根据后端数据生成日历（修复版本）
    generateCalendarFromBackend(checkedDates) {
      const today = new Date()
      const year = today.getFullYear()
      const month = today.getMonth() // 0-11
      
      // 格式化当前月份显示
      this.currentMonth = `${year}年${month + 1}月`
      
      // 获取本月第一天是星期几（0=周日, 1=周一, ..., 6=周六）
      const firstDay = new Date(year, month, 1).getDay()
      
      // 获取本月总天数
      const daysInMonth = new Date(year, month + 1, 0).getDate()
      
      // 今天的日期字符串（用于比较）
      const todayStr = this.formatDate(today)
      
      const days = []
      
      // 添加空白占位（月初前的空白）
      for (let i = 0; i < firstDay; i++) {
        days.push({ date: null, checked: false, isToday: false })
      }
      
      // 添加本月的每一天
      for (let i = 1; i <= daysInMonth; i++) {
        const date = new Date(year, month, i)
        const dateStr = this.formatDate(date)
        const isToday = dateStr === todayStr
        const checked = checkedDates.includes(dateStr)
        
        days.push({
          date: i,
          checked: checked,
          isToday: isToday,
          dateStr: dateStr
        })
      }
      
      this.calendarDays = days
      
    
    },
    // 格式化日期
    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    // 显示签到弹窗
    async showCheckinPopup() {
      // 检查用户是否被禁用
      const canOperate = await userStatusCheck.checkAndTip()
      if (!canOperate) return
      
      this.$refs.checkinPopup.open()
    },
    // 关闭签到弹窗
    closeCheckinPopup() {
      this.$refs.checkinPopup.close()
    },
    // 处理签到（用户和红娘使用不同接口）
    async handleCheckin() {
      if (this.checkinData.todayChecked) {
        uni.showToast({
          title: '今日已签到',
          icon: 'none'
        })
        return
      }

      // 确保有用户ID
      if (!this.userInfo.userId) {
        uni.showToast({ title: '请先登录', icon: 'none' })
        return
      }

      try {
        // 用户端始终使用用户签到接口（与红娘端签到完全分开）
        const signRes = await api.user.doCheckin(this.userInfo.userId)
        
        // 签到成功后更新状态
        this.checkinData.todayChecked = true
        this.checkinData.totalDays++
        this.checkinData.continuousDays++
        
        // 获取当前日期字符串
        const today = new Date()
        const todayStr = this.formatDate(today)
        
        // 更新签到日期列表
        if (!this.checkinData.checkedDates.includes(todayStr)) {
          this.checkinData.checkedDates.push(todayStr)
        }
        
        // 重新生成日历
        this.generateCalendarFromBackend(this.checkinData.checkedDates)
        
        uni.showToast({
          title: '签到成功',
          icon: 'success',
          duration: 2500
        })
        
        // 重新加载签到信息，确保数据最新
        await this.loadCheckinInfo()
      } catch (err) {
        console.error('签到失败:', err)
        uni.showToast({
          title: err.message || '签到失败，请稍后重试',
          icon: 'none'
        })
      }
    },
    async goVerify() {
      // 检查用户是否被禁用
      const canOperate = await userStatusCheck.checkAndTip()
      if (!canOperate) return
      
      uni.navigateTo({
        url: '/pages/settings/id-verification'
      })
    },
    async goCompleteProfile() {
      // 检查用户是否被禁用
      const canOperate = await userStatusCheck.checkAndTip()
      if (!canOperate) return
      
      this.goToPage('basicInfo')
    },
    async goVip() {
      // 检查用户是否被禁用
      const canOperate = await userStatusCheck.checkAndTip()
      if (!canOperate) return
      
      uni.navigateTo({
        url: '/pages/vip/index'
      })
    },
    async goToPage(page) {
      // 设置页面不需要检查用户状态
      if (page !== 'settings') {
        const canOperate = await userStatusCheck.checkAndTip()
        if (!canOperate) return
      }

      try {
        if (page === 'basicInfo') {
         
          uni.navigateTo({
            url: '/pages/profile/index',
            success: () => {
             
            },
            fail: (err) => {
              console.error('❌ 基本资料页面跳转失败:', err)
              uni.showToast({
                title: '页面跳转失败',
                icon: 'none'
              })
            }
          })
        } else if (page === 'verifyRealName') {
         
          // 跳转到实名认证页面
          uni.navigateTo({
            url: '/pages/settings/id-verification',
            success: () => {
            
            },
            fail: (err) => {
              console.error('❌ 实名认证页面跳转失败:', err)
              uni.showToast({
                title: '页面跳转失败',
                icon: 'none'
              })
            }
          })
        } else if (page === 'verifyEducation') {
         
          // 跳转到实名认证页面
          uni.navigateTo({
            url: '/pages/settings/id-verification',
            success: () => {
             
            },
            fail: (err) => {
              console.error('❌ 学历认证页面跳转失败:', err)
              uni.showToast({
                title: '页面跳转失败',
                icon: 'none'
              })
            }
          })
        } else if (page === 'partTimeMatchmaker') {
          
          // 跳转到兼职红娘页面
          uni.navigateTo({
            url: '/pages/part-time-matchmaker/index',
            success: () => {
              
            },
            fail: (err) => {
              console.error('❌ 兼职红娘页面跳转失败:', err)
              uni.showToast({
                title: '页面跳转失败',
                icon: 'none'
              })
            }
          })
        } else if (page === 'blacklist') {
         
          // 跳转到黑名单页面
          uni.navigateTo({
            url: '/pages/blacklist/index',
            success: () => {
              
            },
            fail: (err) => {
              console.error('❌ 黑名单页面跳转失败:', err)
              uni.showToast({
                title: '页面跳转失败',
                icon: 'none'
              })
            }
          })
        } else if (page === 'partnerRequirement') {
          
          // 跳转到对象要求页面
          uni.navigateTo({
            url: '/pages/partner-requirement/index',
            success: () => {
            
            },
            fail: (err) => {
              console.error('❌ 对象要求页面跳转失败:', err)
              uni.showToast({
                title: '页面跳转失败',
                icon: 'none'
              })
            }
          })
        } else if (page === 'feedback') {
         
          uni.navigateTo({
            url: '/pages/feedback/index',
            success: () => {
            
            },
            fail: (err) => {
              console.error('❌ 用户反馈页面跳转失败:', err)
              uni.showToast({
                title: '页面跳转失败',
                icon: 'none'
              })
            }
          })
        } else if (page === 'settings') {
         
          uni.navigateTo({
            url: '/pages/settings/index',
            success: () => {
           
            },
            fail: (err) => {
              console.error('❌ 设置页面跳转失败:', err)
              uni.showToast({
                title: '页面跳转失败',
                icon: 'none'
              })
            }
          })
        }
         
        else if (page === 'part-time-matchmaker') {
          
          uni.navigateTo({
            url: '/pages/part-time-matchmaker/index',
            success: () => {
             
            },
            fail: (err) => {
              console.error('❌ 加入红娘页面跳转失败:', err)
              uni.showToast({
                title: '页面跳转失败',
                icon: 'none'
              })
            }
          })
        } else if (page === 'myActivity') {
         
          uni.navigateTo({
            url: '/pages/mine/my-activities',
            success: () => {
            
            },
            fail: (err) => {
              console.error('❌ 我的活动页面跳转失败:', err)
              uni.showToast({
                title: '页面跳转失败',
                icon: 'none'
              })
            }
          })
        } else if (page === 'myDynamics') {
          
          uni.navigateTo({
            url: '/pages/mine/my-dynamics',
            success: () => {
              
            },
            fail: (err) => {
              console.error('❌ 我的动态页面跳转失败:', err)
              uni.showToast({
                title: '页面跳转失败',
                icon: 'none'
              })
            }
          })
        } else {
          
          uni.showToast({
            title: '功能开发中',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('❌ goToPage 执行出错:', error)
        uni.showToast({
          title: '页面跳转异常',
          icon: 'none'
        })
      }
    },
    switchTab(tab) {
      if (tab === 'mine') return

      const tabPages = {
        index: '/pages/index/index',
        plaza: '/pages/plaza/index',
        recommend: '/pages/recommend/index',
        message: '/pages/message/index'
      }

      if (tabPages[tab]) {
        uni.redirectTo({
          url: tabPages[tab]
        })
      }
    },

    // 处理退出登录
    handleLogout() {
     

      uni.showModal({
        title: '退出登录',
        content: '确定要退出登录吗？',
        showCancel: true,
        cancelText: '取消',
        confirmText: '确定',
        success: (res) => {
          if (res.confirm) {
            
            this.executeLogout()
          } 
        }
      })
    },

    // 执行退出登录（最可靠的方式）
    executeLogout() {
    

      // 立即显示加载状态
      uni.showLoading({
        title: '退出中...',
        mask: true
      })

      // 延迟执行，确保UI更新
      setTimeout(() => {
        try {
          
          // 断开在线状态WebSocket
          try {
            const timPresenceManager = require('@/utils/tim-presence-manager.js').default;
            if (timPresenceManager) {
              timPresenceManager.disconnect();
              
            }
          } catch (error) {
            console.error('❌ 断开在线状态WebSocket失败:', error);
          }

          // 断开TIM WebSocket
          try {
            const timManager = require('@/utils/tim-manager.js').default;
            if (timManager && timManager.isLogin) {
              timManager.logout();
              
            }
          } catch (error) {
            console.error('❌ TIM登出失败:', error);
          }

         

          // 方法1: 逐个清除
          uni.removeStorageSync('token')
          uni.removeStorageSync('userInfo')
          uni.removeStorageSync('userId')
          uni.removeStorageSync('rememberedAccount')

         
          const remainToken = uni.getStorageSync('token')
          const remainUser = uni.getStorageSync('userInfo')
         

          // 如果还有残留数据，使用强制清除
          if (remainToken || remainUser) {
           
            uni.clearStorageSync()
          }

        
          this.currentUserId = null
          this.userInfo = {
            userId: null,
            nickname: '未登录用户',
            avatar: 'https://via.placeholder.com/100?text=未登录'
          }

          // 隐藏加载，显示成功
          uni.hideLoading()
          uni.showToast({
            title: '退出成功！',
            icon: 'success',
            duration: 1500
          })

          // 延迟跳转
          setTimeout(() => {
           
            uni.reLaunch({
              url: '/pages/page3/page3'
            })
          }, 1500)

        } catch (error) {
          console.error('退出过程出错:', error)
          uni.hideLoading()

          // 强制退出
          uni.clearStorageSync()
          uni.showModal({
            title: '退出完成',
            content: '已清除登录信息，请重新打开应用',
            showCancel: false,
            confirmText: '知道了'
          })
        }
      }, 300) // 300毫秒延迟确保UI响应
    },

    // 设置测试用户数据（基于数据库真实数据）
    // ⚠️ 已弃用：此方法仅供调试使用，正常流程不再调用测试数据
    setTestUserData() {
      
      console.warn('⚠️ 警告：正在使用测试数据，这不应该在生产环境中发生')

      // 根据当前用户ID设置对应的数据库用户信息
      const userId = this.currentUserId || 1

      let userData = {}

     
      // 设置用户信息
      this.userInfo = userData

     
      // 设置统计数据
      this.stats = {
        myConnection: 0,
        myFavorites: 0,
        whoViewedMe: 0,
        iViewed: 0
      }
      
      // 获取真实数量
      this.getLikedUsersCount()
      this.getLikedMeUsersCount()

      // 显示提示
      uni.showToast({
        title: '使用测试数据: ' + this.userInfo.nickname,
        icon: 'success',
        duration: 2000
      })
    },

    // 处理VIP购买成功事件
    handleVipPurchased() {
     
      // 延迟刷新，确保后端数据已更新
      setTimeout(() => {
        
        this.loadUserInfo()
      }, 500)
    },
    
    // 统计数据板块点击事件
    async goToLikedByMe() {
      // 检查用户是否被禁用
      const canOperate = await userStatusCheck.checkAndTip()
      if (!canOperate) return
      
      // 跳转到我喜欢的页面
      uni.navigateTo({
        url: '/pages/mine/liked-by-me',
        fail: (err) => {
          console.error('跳转我喜欢的页面失败:', err)
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          })
        }
      })
    },
    
    // 获取我喜欢的用户真实数量
    async getLikedUsersCount() {
      try {
        const userId = this.currentUserId
        if (userId) {
          // 调用后端API获取真实的喜欢用户数量
          const result = await api.recommend.getLikedUsersCount(userId)
          // 确保获取的是数字值
          const count = typeof result === 'number' ? result : (result.data || 0)
          // 更新统计数据
          this.stats.myConnection = count || 0
        }
      } catch (error) {
        console.error('获取喜欢的用户数量失败:', error)
        // 如果获取失败，使用默认值
        this.stats.myConnection = 0
      }
    },
    
    // 获取喜欢我的用户真实数量
    async getLikedMeUsersCount() {
      try {
        const userId = this.currentUserId
        if (userId) {
          // 调用后端API获取真实的喜欢我的用户数量
          const result = await api.recommend.getLikedMeUsersCount(userId)
          // 确保获取的是数字值
          const count = typeof result === 'number' ? result : (result.data || 0)
          // 更新统计数据
          this.stats.myFavorites = count || 0
        }
      } catch (error) {
        console.error('获取喜欢我的用户数量失败:', error)
        // 如果获取失败，使用默认值
        this.stats.myFavorites = 0
      }
    },
    
    // 获取我浏览的用户真实数量
    async getBrowseHistoryCount() {
      try {
        const userId = this.currentUserId
        if (userId) {
          // 调用后端API获取真实的浏览记录数量
          const result = await api.recommend.getBrowseHistoryCount(userId)
          // 确保获取的是数字值
          const count = typeof result === 'number' ? result : (result.data || 0)
          // 更新统计数据
          this.stats.iViewed = count || 0
        }
      } catch (error) {
        console.error('获取浏览记录数量失败:', error)
        // 如果获取失败，使用默认值
        this.stats.iViewed = 0
      }
    },
    
    async goToLikedMe() {
      // 检查用户是否被禁用
      const canOperate = await userStatusCheck.checkAndTip()
      if (!canOperate) return
      
      // 跳转到喜欢我的页面
      uni.navigateTo({
        url: '/pages/mine/liked-me',
        fail: (err) => {
          console.error('跳转喜欢我的页面失败:', err)
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          })
        }
      })
    },
    
    async goToVisitedByMe() {
      // 检查用户是否被禁用
      const canOperate = await userStatusCheck.checkAndTip()
      if (!canOperate) return
      
      // 跳转到我浏览的页面
      uni.navigateTo({
        url: '/pages/mine/visited-by-me',
        fail: (err) => {
          console.error('跳转我浏览的页面失败:', err)
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          })
        }
      })
    },
    
    // 跳转到登录页面
    goLogin() {
      if (this.userInfo.nickname === '立即登录') {
        uni.navigateTo({
          url: '/pages/page3/page3?redirect=' + encodeURIComponent('/pages/mine/index')
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/* 扁平化设计风格 */
.mine-page {
  min-height: 100vh;
  background: #F5F5F5;
  padding-bottom: 120rpx;
}

/* 用户信息内的统计数据样式 */
.user-stats {
  display: flex;
  justify-content: space-around;
  margin: 20rpx 0 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border: none;
}

.stats-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15rpx 20rpx;
  border-radius: 0;
  transition: all 0.3s ease;

  &:not(:last-child) {
    border-right: none;
  }

  .stats-number {
    font-size: 40rpx;
    font-weight: bold;
    color: #FFFFFF;
    margin-bottom: 5rpx;
    text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  }

  .stats-label {
    font-size: 22rpx;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
  }
}

/* 用户信息区域 - 优化版 */
.user-section {
  margin: 0;
  margin-top: env(safe-area-inset-top);
  padding: 30rpx;
  background: linear-gradient(135deg, #FF8A9B 0%, #FFB4C0 100%);
  box-shadow: 0 4rpx 20rpx rgba(255, 138, 155, 0.2);

  .user-info {
      display: flex;
      align-items: flex-start;
      margin-bottom: 0;

      .avatar {
        width: 140rpx;
        height: 140rpx;
        border-radius: 50%;
        margin-right: 30rpx;
        background-color: #FFFFFF;
        border: 4rpx solid rgba(255, 255, 255, 0.8);
        box-shadow: 0 8rpx 30rpx rgba(255, 138, 155, 0.3);
        transition: transform 0.3s ease;
        overflow: hidden;
      }

    .avatar:active {
      transform: scale(1.05);
    }

    .user-details {
      flex: 1;

      .nickname-row {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        margin-top: 0;

        .nickname {
          font-size: 44rpx;
          font-weight: bold;
          color: #FFFFFF;
          margin-right: 16rpx;
          text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
        }

        /* VIP标志样式 - 精致版 */
        .vip-badge {
          margin-right: 12rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
          color: #FFFFFF;
          padding: 6rpx 16rpx;
          border-radius: 20rpx;
          font-size: 24rpx;
          font-weight: bold;
          box-shadow: 
            0 4rpx 15rpx rgba(255, 215, 0, 0.4),
            0 0 0 2rpx rgba(255, 255, 255, 0.9);
          transition: all 0.3s ease;
          letter-spacing: 1rpx;
          text-transform: uppercase;
          position: relative;
          overflow: hidden;
          z-index: 1;

          &:before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: left 0.4s ease;
            z-index: -1;
          }

          &:active {
            transform: scale(0.95);
            box-shadow: 
              0 3rpx 10rpx rgba(255, 215, 0, 0.3),
              0 0 0 2rpx rgba(255, 255, 255, 0.9);
          }

          &:active:before {
            left: 100%;
          }
        }

        .verify-badge {
          background: rgba(255, 255, 255, 0.9);
          padding: 8rpx 22rpx;
          border-radius: 20rpx;
          box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
          transition: all 0.3s ease;

          .verify-text {
            font-size: 24rpx;
            color: #FF6B8A;
            font-weight: 600;
          }
        }

        .verify-badge:active {
          transform: scale(0.95);
          background: rgba(255, 255, 255, 1);
        }
      }

      /* 基本信息展示 - 优化版 */
      .user-basic-info {
        display: flex;
        flex-wrap: wrap;
        gap: 18rpx;
        margin-bottom: 24rpx;

        .info-item {
          display: flex;
          align-items: center;
          gap: 10rpx;
          padding: 10rpx 22rpx;
          background: rgba(255, 255, 255, 0.9);
          border-radius: 25rpx;
          box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
          backdrop-filter: blur(10rpx);
          transition: all 0.3s ease;

          .info-icon {
            font-size: 30rpx;
          }

          .info-text {
            font-size: 26rpx;
            color: #333333;
            font-weight: 500;
          }
        }

        .info-item:active {
          transform: scale(0.98);
          box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
        }
      }

      .progress-row {
        display: flex;
        align-items: center;
        gap: 20rpx;

        .progress-bar {
          flex: 1;
          height: 14rpx;
          background-color: rgba(255, 255, 255, 0.3);
          border-radius: 7rpx;
          overflow: hidden;
          box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.1);

          .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 1) 100%);
            border-radius: 7rpx;
            transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
          }
        }

        .progress-text {
          font-size: 26rpx;
          color: rgba(255, 255, 255, 0.95);
          font-weight: 500;
          white-space: nowrap;
          text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
          transition: color 0.3s ease;
        }

        .progress-text:active {
          color: #FFFFFF;
        }
      }
    }
  }
}

/* VIP会员卡片 - 优化版 */
.vip-card {
  margin: 20rpx 30rpx;
  background: linear-gradient(135deg, #F0E6FF 0%, #E8DFFF 100%);
  border-radius: 20rpx;
  padding: 35rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4rpx 20rpx rgba(153, 102, 255, 0.15);
  transition: all 0.3s ease;
  border: none;

  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 2rpx 10rpx rgba(153, 102, 255, 0.1);
  }

  .vip-content {
    display: flex;
    align-items: center;

    .vip-icon {
      font-size: 70rpx;
      margin-right: 25rpx;
      filter: drop-shadow(0 4rpx 15rpx rgba(218, 112, 214, 0.4));
    }

    .vip-info {
      display: flex;
      flex-direction: column;
      gap: 8rpx;

      .vip-title {
        font-size: 34rpx;
        font-weight: bold;
        color: #6B4EA3;
      }

      .vip-subtitle {
        font-size: 24rpx;
        color: #8B7BAA;
        background: rgba(255, 255, 255, 0.6);
        padding: 6rpx 18rpx;
        border-radius: 15rpx;
      }
    }
  }

  .vip-button {
    background: linear-gradient(135deg, #9575CD 0%, #7E57C2 100%);
    color: #FFFFFF;
    padding: 18rpx 35rpx;
    border-radius: 30rpx;
    font-size: 28rpx;
    white-space: nowrap;
    font-weight: 600;
    box-shadow: 0 4rpx 15rpx rgba(149, 117, 205, 0.3);
    transition: all 0.3s ease;
  }

  .vip-button:active {
    transform: scale(0.95);
    box-shadow: 0 2rpx 10rpx rgba(149, 117, 205, 0.2);
  }
}



/* 专属红娘 - 优化版 */
.matchmaker-card {
  margin: 20rpx 30rpx;
  background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
  border-radius: 20rpx;
  padding: 25rpx;
  text-align: center;
  box-shadow: 0 4rpx 20rpx rgba(255, 193, 7, 0.15);
  border: none;

  .matchmaker-text {
    font-size: 28rpx;
    color: #F57C00;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10rpx;
  }
}

/* 快捷入口 - 优化版 */
.quick-actions {
  margin: 20rpx 30rpx;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10rpx);
  border-radius: 20rpx;
  padding: 45rpx 30rpx;
  display: flex;
  justify-content: space-around;
  box-shadow: 0 4rpx 25rpx rgba(0, 0, 0, 0.08);
  border: none;

  .action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15rpx;
    transition: all 0.3s ease;
    padding: 15rpx;
    border-radius: 15rpx;

    &:active {
      transform: translateY(2rpx);
      background: rgba(255, 255, 255, 0.8);
    }

    .action-icon {
      width: 110rpx;
      height: 110rpx;
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 55rpx;
      box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      border: none;
    }

    .action-icon:active {
      transform: scale(0.95);
    }

    .calendar-icon {
      background: linear-gradient(135deg, #E8F5E8 0%, #C8E6C9 100%);
      color: #4CAF50;
    }

    .phone-icon {
      background: linear-gradient(135deg, #FFF3CD 0%, #FFEEBA 100%);
      color: #FFA726;
    }

    .heart-icon {
      background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%);
      color: #F44336;
    }

    .action-label {
      font-size: 28rpx;
      color: #333333;
      font-weight: 500;
    }
  }
}

/* 功能菜单列表 - 优化版 */
.menu-list {
  margin: 20rpx 30rpx 30rpx;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10rpx);
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 25rpx rgba(0, 0, 0, 0.08);
  border: none;

  .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40rpx 35rpx;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;

    &:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 5rpx;
      height: 100%;
      background: linear-gradient(135deg, #FF8A9B 0%, #FFB4C0 100%);
      transform: scaleY(0);
      transition: transform 0.3s ease;
    }

    &:last-child {
      border-bottom: none;
    }

    &:active {
      background: linear-gradient(135deg, #FFF8FA 0%, #FFF0F2 100%);
      transform: translateX(5rpx);

      &:before {
        transform: scaleY(1);
      }
    }

    .menu-left {
      display: flex;
      align-items: center;
      gap: 25rpx;

      .menu-icon {
        font-size: 48rpx;
        transition: transform 0.3s ease;
      }

      .menu-text {
        font-size: 32rpx;
        color: #333333;
        font-weight: 500;
        transition: color 0.3s ease;
      }
    }

    .menu-arrow {
      font-size: 48rpx;
      color: #E0E0E0;
      font-weight: 300;
      transition: color 0.3s ease;
    }

    &:active .menu-arrow {
      color: #FF8A9B;
      transform: translateX(5rpx);
    }
  }

  /* 退出登录特殊样式 - 优化版 */
  .menu-item.logout-item {
    border-top: 3rpx solid rgba(255, 99, 132, 0.2);
    background: linear-gradient(135deg, #FFF8F8 0%, #FFF0F0 100%);

    .menu-left .menu-icon {
      color: #F44336;
      font-size: 50rpx;
    }

    .menu-left .menu-text {
      color: #F44336;
      font-weight: bold;
      font-size: 34rpx;
    }

    .menu-arrow {
      color: #F44336;
    }

    &:active {
      background: linear-gradient(135deg, #FFEEEE 0%, #FFDDDD 100%);
    }

    &:before {
      background: linear-gradient(135deg, #F44336 0%, #FF6B8A 100%);
    }
  }
}

/* 签到弹窗样式 - 优化版 */
.checkin-popup {
  width: 640rpx;
  max-height: 85vh;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20rpx);
  border-radius: 25rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10rpx 50rpx rgba(0, 0, 0, 0.15);
  border: none;
  transform: translateY(-80rpx);

  .popup-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40rpx 30rpx 30rpx;
    position: relative;
    background: linear-gradient(135deg, #FF8A9B 0%, #FFB4C0 100%);
    flex-shrink: 0;

    .popup-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #FFFFFF;
      text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    }

    .close-btn {
      position: absolute;
      right: 25rpx;
      top: 30rpx;
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      transition: all 0.3s ease;

      &:active {
        transform: scale(0.9);
        background: rgba(255, 255, 255, 0.3);
      }

      .close-icon {
        font-size: 40rpx;
        color: #FFFFFF;
        line-height: 1;
      }
    }
  }

  .checkin-info {
    display: flex;
    justify-content: space-around;
    padding: 30rpx;
    background: linear-gradient(135deg, #FFF8FA 0%, #FFF0F2 100%);
    flex-shrink: 0;

    .info-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12rpx;

      .info-label {
        font-size: 24rpx;
        color: #999999;
        font-weight: 500;
      }

      .info-value {
        font-size: 42rpx;
        font-weight: bold;
        color: #FF6B8A;
        text-shadow: 0 2rpx 8rpx rgba(255, 107, 138, 0.2);
      }
    }
  }

  .checkin-content {
    flex: 1;
    overflow-y: auto;
    max-height: 55vh;
  }

  .checkin-calendar {
    padding: 30rpx;

    .calendar-header {
      text-align: center;
      margin-bottom: 25rpx;

      .month-text {
        font-size: 30rpx;
        font-weight: bold;
        color: #333333;
        background: linear-gradient(135deg, #FF8A9B 0%, #FFB4C0 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
    }

    .week-header {
      display: flex;
      margin-bottom: 15rpx;

      .week-day {
        flex: 1;
        text-align: center;
        font-size: 24rpx;
        color: #666666;
        font-weight: 600;
      }
    }

    .calendar-body {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 12rpx;

      .calendar-day {
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        box-sizing: border-box;
        border-radius: 15rpx;
        transition: all 0.3s ease;
        background: rgba(255, 255, 255, 0.5);
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

        .day-num {
          font-size: 26rpx;
          color: #333333;
          font-weight: 500;
        }

        .check-mark {
          position: absolute;
          top: 8rpx;
          right: 8rpx;
          font-size: 20rpx;
          color: #FFFFFF;
          background: linear-gradient(135deg, #FF6B8A 0%, #FF8A9B 100%);
          width: 30rpx;
          height: 30rpx;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 2rpx 8rpx rgba(255, 107, 138, 0.3);
        }

        &.empty {
          visibility: hidden;
        }

        &.checked {
          background: linear-gradient(135deg, #FFE0E6 0%, #FFCCD5 100%);
          box-shadow: 0 4rpx 15rpx rgba(255, 107, 138, 0.2);

          .day-num {
            color: #FF6B8A;
            font-weight: bold;
          }
        }

        &.today {
          background: linear-gradient(135deg, #FF6B8A 0%, #FF8A9B 100%);
          box-shadow: 0 6rpx 20rpx rgba(255, 107, 138, 0.3);

          .day-num {
            color: #FFFFFF;
            font-weight: bold;
            font-size: 28rpx;
          }
        }

        &.today.checked {
          .check-mark {
            background: rgba(255, 255, 255, 0.9);
            color: #FF6B8A;
            box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
          }
        }
      }
    }
  }

  .checkin-rewards {
    padding: 25rpx 30rpx 30rpx;
    background: linear-gradient(135deg, #FFF8FA 0%, #FFF0F2 100%);
    flex-shrink: 0;

    .rewards-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333333;
      margin-bottom: 20rpx;
      display: block;
    }

    .rewards-list {
      display: flex;
      justify-content: space-between;
      gap: 18rpx;

      .reward-item {
        flex: 1;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 18rpx;
        padding: 25rpx 15rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;

        .reward-icon {
          font-size: 60rpx;
          margin-bottom: 15rpx;
          filter: drop-shadow(0 4rpx 15rpx rgba(0, 0, 0, 0.1));
        }

        .reward-day {
          font-size: 26rpx;
          color: #666666;
          margin-bottom: 12rpx;
          font-weight: 500;
        }

        .reward-text {
          font-size: 28rpx;
          color: #333333;
          font-weight: bold;
        }

        .received-mark {
          position: absolute;
          top: 15rpx;
          right: 15rpx;
          width: 36rpx;
          height: 36rpx;
          background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
          color: #FFFFFF;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 22rpx;
          box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.3);
        }

        &.received {
          opacity: 0.7;
          transform: scale(0.95);
        }

        &.current {
          background: linear-gradient(135deg, #FFE0E6 0%, #FFCCD5 100%);
          box-shadow: 0 6rpx 20rpx rgba(255, 107, 138, 0.2);

          .reward-text {
            color: #FF6B8A;
          }

          .reward-icon {
            transform: scale(1.1);
          }
        }
      }
    }
  }

  .checkin-button-wrapper {
    padding: 0 30rpx 40rpx;
    flex-shrink: 0;

    .checkin-btn {
      width: 100%;
      background: linear-gradient(135deg, #FF6B8A 0%, #FF8A9B 100%);
      color: #FFFFFF;
      font-size: 34rpx;
      font-weight: bold;
      border-radius: 35rpx;
      padding: 20rpx;
      border: none;
      transition: all 0.3s ease;
      box-shadow: 0 6rpx 25rpx rgba(255, 107, 138, 0.3);

      &:active:not(.disabled) {
        transform: translateY(2rpx);
        box-shadow: 0 4rpx 15rpx rgba(255, 107, 138, 0.2);
      }

      &.disabled {
        background: linear-gradient(135deg, #E0E0E0 0%, #BDBDBD 100%);
        box-shadow: none;
      }

      &::after {
        border: none;
      }
    }
  }
}

/* 底部导航栏 - 优化版 */
.tabbar {
 position: fixed;
 bottom: 0;
 left: 0;
 right: 0;
 display: flex;
 background-color: #FFFFFF;
 border-top: 1rpx solid #F0F0F0;
 padding-bottom: constant(safe-area-inset-bottom);
 padding-bottom: env(safe-area-inset-bottom);
 z-index: 999;
 box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

  .tabbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10rpx 0;
    position: relative;
    transition: all 0.3s ease;

    .tabbar-icon {
      font-size: 44rpx;
      margin-bottom: 8rpx;
      transition: all 0.3s ease;
    }
	.first-icon{
		width: 20px;
		height: 20px;
		margin-bottom: 5px;
		margin-top: 5px;
	}

    .tabbar-text {
      font-size: 24rpx;
      color: #999999;
      transition: all 0.3s ease;
      font-weight: 500;
    }

    &.active {
      /* 移除translateY变换，与其他页面保持一致 */

      .tabbar-icon {
        color: #E91E63;
        /* 移除scale变换，与其他页面保持一致 */
        filter: drop-shadow(0 4rpx 15rpx rgba(233, 30, 99, 0.3));
      }

      .tabbar-text {
        color: #E91E63;
        font-weight: bold;
      }
	  
    }

    &:active:not(.active) {
      transform: translateY(2rpx);
    }
  }
}

.tabbar-badge {
  position: absolute;
  top: 8rpx;
  right: 50%;
  margin-right: -40rpx;
  min-width: 36rpx;
  height: 36rpx;
  line-height: 36rpx;
  padding: 0 10rpx;
  background: linear-gradient(135deg, #E91E63 0%, #EC407A 100%);
  border-radius: 18rpx;
  font-size: 22rpx;
  color: #FFFFFF;
  text-align: center;
  font-weight: bold;
  box-shadow: 0 4rpx 15rpx rgba(233, 30, 99, 0.3);
  transform: scale(1);
  transition: all 0.3s ease;
}

.tabbar-item.active .tabbar-badge {
  transform: scale(1.1);
}
</style>