xiangqinxiangmu/LiangZhiYUMao/pages/matchmaker-workbench/mine.vue

<template>
  <view class="matchmaker-mine">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="back-btn" @click="goBack"></view>
      <text class="header-title">我的</text>
      <view class="placeholder"></view>
    </view>

    <scroll-view scroll-y class="content">
      <view class="content-container">
        <!-- 个人信息卡片 -->
        <view class="profile-card">
          <view class="profile-header">
            <view class="profile-avatar" :style="{ backgroundImage: `url(${profile.avatarUrl})` }"></view>
            <view class="profile-info">
              <text class="profile-name">{{ profile.realName }}</text>
              <view class="profile-badge">{{ profile.badge }}</view>
            </view>
          </view>

          <!-- 等级和积分 -->
          <view class="level-points">
            <view class="level-info">
              <view class="level-icon"></view>
              <text class="level-name">{{ profile.levelName }}</text>
            </view>
            <text class="points-value">{{ profile.points }}</text>
            <text class="points-label">积分</text>
          </view>

          <!-- 等级进度 -->
          <view class="level-progress">
            <text class="progress-label">距离下一等级</text>
            <view class="progress-bar">
              <view class="progress-fill" :style="{ width: profile.levelProgress + '%' }"></view>
            </view>
            <view class="progress-values">
              <text class="current-value">当前{{ profile.points }}</text>
              <text class="target-value">目标{{ profile.nextLevelPoints }}</text>
            </view>
            <view class="upgrade-tip">再获得{{ profile.pointsToNextLevel }}积分即可晋升{{ profile.nextLevelName }}等级</view>
          </view>
        </view>

        <!-- 功能菜单 -->
        <view class="function-grid">
          <view class="function-item" @click="showSignInPopup">
            <view class="function-icon calendar">22</view>
            <text class="function-text">签到</text>
          </view>
          <view class="function-item" @click="handleMyResources">
            <view class="function-icon resources"></view>
            <text class="function-text">我的资源</text>
          </view>
          <view class="function-item" @click="handleActivityCenter">
            <view class="function-icon heart-book"></view>
            <text class="function-text">我的活动</text>
          </view>
          <view class="function-item" @click="handlePointsMall">
            <view class="function-icon money"></view>
            <text class="function-text">我的积分</text>
          </view>
        </view>

        <!-- 设置选项 -->
        <view class="settings-section">
          <view class="settings-item" @click="handleEditProfile">
            <view class="settings-icon user"></view>
            <text class="settings-text">编辑资料</text>
            <view class="arrow-right"></view>
          </view>

          <view class="settings-item" @click="handleAccountSettings">
            <view class="settings-icon info"></view>
            <text class="settings-text">关于我们</text>
            <view class="arrow-right"></view>
          </view>

          <view class="settings-item" @click="handleLogout">
            <view class="settings-icon logout"></view>
            <text class="settings-text">退出登录</text>
            <view class="arrow-right"></view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部导航 -->
    <view class="tabbar">
      <view class="tabbar-item home" @click="navigateToWorkbench">
        <view class="tabbar-icon"></view>
        <text class="tabbar-text">工作台</text>
      </view>
      <view class="tabbar-item resources" @click="navigateToMyResources">
        <view class="tabbar-icon"></view>
        <text class="tabbar-text">我的资源</text>
      </view>
      <view class="tabbar-item trophy" @click="navigateToRanking">
        <view class="tabbar-icon"></view>
        <text class="tabbar-text">排行榜</text>
      </view>
      <view class="tabbar-item message" @click="navigateToMessage">
        <view class="tabbar-icon">
          <view v-if="unreadCount > 0" class="badge">{{ unreadCount }}</view>
        </view>
        <text class="tabbar-text">消息</text>
      </view>
      <view class="tabbar-item mine active" @click="navigateToMine">
        <view class="tabbar-icon"></view>
        <text class="tabbar-text">我的</text>
      </view>
    </view>

    <!-- 签到弹框 -->
    <uni-popup ref="signInPopup" type="center" :mask-click="false">
      <view class="sign-in-popup">
        <view class="popup-header">
          <text class="popup-title">每日签到</text>
          <view class="close-btn" @click="closeSignInPopup"></view>
        </view>
        <view class="popup-content">
          <!-- 签到统计 -->
          <view class="checkin-stats">
            <view class="stats-item">
              <text class="stats-label">已连续签到</text>
              <text class="stats-value">{{ continuousDays }}</text>
              <text class="stats-unit">天</text>
            </view>
            <view class="stats-item">
              <text class="stats-label">累计签到</text>
              <text class="stats-value">{{ totalDays }}</text>
              <text class="stats-unit">天</text>
            </view>
          </view>
          
          <view class="calendar-container">
            <view class="calendar-header">
              <text class="calendar-title">{{ calendarTitle }}</text>
            </view>
            <view class="calendar-week">
              <text class="week-day">日</text>
              <text class="week-day">一</text>
              <text class="week-day">二</text>
              <text class="week-day">三</text>
              <text class="week-day">四</text>
              <text class="week-day">五</text>
              <text class="week-day">六</text>
            </view>
            <view class="calendar-days">
              <view
                  v-for="(day, index) in calendarDays"
                  :key="index"
                  :class="[
									'calendar-day',
									{ 'other-month': !day.isCurrentMonth },
									{ 'today': day.isToday },
									{ 'checked': day.isChecked },
									{ 'today-checked': day.isToday && day.isChecked }
								]"
              >
                <text class="day-text">{{ day.date }}</text>
                <view v-if="day.isChecked" class="check-mark">✓</view>
              </view>
            </view>
          </view>
          
          <view class="sign-in-reward">
            <text class="reward-title">签到奖励</text>
            <text class="reward-points">+5积分</text>
          </view>
        </view>
        <view class="popup-footer">
          <button
              :class="['sign-in-btn', { 'signed': isSignedToday }]"
              @click="doSignIn"
              :disabled="isSignedToday"
          >
            {{ isSignedToday ? '今日已签到' : '立即签到' }}
          </button>
        </view>
      </view>
    </uni-popup>
  </view>

</template>

<script>
import api from '../../utils/api.js'
export default {
  data() {
    return {
      profile: {
        realName: '',
        avatarUrl: '',
        badge: '',
        rating: 5.0,
        level: '',
        levelName: '',
        nextLevelName: '',
        points: 0,
        currentLevelPoints: 0,
        nextLevelPoints: 100,
        pointsToNextLevel: 0,
        levelProgress: 0
      },
      // 签到相关
      isSignedToday: false,
      continuousDays: 0,
      totalDays: 0,
      currentDate: new Date(),
      calendarTitle: '',
      calendarDays: [],
      signedDays: [] // 存储本月已签到的日期
    }
  },
  onLoad() {
    this.loadProfileData()
    this.checkSignInStatus()
    this.generateCalendar()
  },
  onShow() {
    // 从编辑资料页返回时，自动刷新个人资料
    this.loadProfileData()
  },
  computed: {
    unreadCount() {
      return this.$store.getters.getTotalUnread || 0
    }
  },
  methods: {
    // 生成日历数据
    generateCalendar() {
      const date = this.currentDate || new Date()
      const year = date.getFullYear()
      const month = date.getMonth()
      // 设置日历标题
      this.calendarTitle = `${year}年·${month + 1}月`
      // 获取当月第一天
      const firstDay = new Date(year, month, 1)
      // 获取当月第一天是星期几（0-6，0表示周日）
      const firstDayWeek = firstDay.getDay()
      // 获取当月最后一天
      const lastDay = new Date(year, month + 1, 0)
      // 获取当月最后一天的日期
      const lastDayDate = lastDay.getDate()
      // 获取上个月最后一天的日期
      const prevMonthLastDay = new Date(year, month, 0).getDate()
      const days = []
      // 添加上个月的日期
      for (let i = firstDayWeek - 1; i >= 0; i--) {
        days.push({
          date: prevMonthLastDay - i,
          isCurrentMonth: false,
          isToday: false,
          isChecked: false
        })
      }
      // 添加当月的日期
      const today = new Date()
      const isCurrentMonth = today.getFullYear() === year && today.getMonth() === month
      for (let i = 1; i <= lastDayDate; i++) {
        const isToday = isCurrentMonth && today.getDate() === i
        // 检查该日期是否已签到
        const isChecked = isToday && this.isSignedToday || this.signedDays.includes(i)
        days.push({
          date: i,
          isCurrentMonth: true,
          isToday: isToday,
          isChecked: isChecked
        })
      }
      // 添加下个月的日期，补满6行
      const totalDays = 42 // 6行7列
      const nextMonthDays = totalDays - days.length
      for (let i = 1; i <= nextMonthDays; i++) {
        days.push({
          date: i,
          isCurrentMonth: false,
          isToday: false,
          isChecked: false
        })
      }
      this.calendarDays = days
    },
    // 加载个人资料数据
    async loadProfileData() {
      try {
        const userInfo = uni.getStorageSync('userInfo')
        console.log('从本地存储获取到的用户信息:', userInfo)
        // 模拟用户信息，用于测试
        const testUserId = 19
        const userId = userInfo && userInfo.userId ? userInfo.userId : testUserId
        console.log('使用的userId:', userId)
        // 调用API获取红娘信息
        console.log('开始调用API获取红娘信息...')
        const matchmakerInfo = await api.matchmaker.getByUserId(userId)
        console.log('API调用结果:', matchmakerInfo)
        if (matchmakerInfo) {
          const levelNames = ['', '青铜', '白银', '黄金', '铂金', '钻石']
          const currentLevel = matchmakerInfo.level || 1
          const nextLevel = currentLevel < 5 ? currentLevel + 1 : 5
          const nextLevelName = levelNames[nextLevel]
          const defaultAvatars = {
            male: 'http://115.190.125.125:9000/dynamic-comments/dynamics/5c645152-9940-41d3-83a9-69ee6e0c0aaa.png',
            female: 'http://115.190.125.125:9000/dynamic-comments/dynamics/c7fb04d7-ee4d-4b3d-bcef-f246da9c841f.png'
          }
          const avatarUrl = matchmakerInfo.avatarUrl || matchmakerInfo.avatar_url || (matchmakerInfo.gender === 1 ? defaultAvatars.male : defaultAvatars.female)
          console.log('获取到的红娘信息:', matchmakerInfo)
          this.profile = {
            realName: matchmakerInfo.real_name || '',
            avatarUrl: avatarUrl,
            badge: matchmakerInfo.type_name || '',
            rating: matchmakerInfo.rating || 5.0,
            level: currentLevel,
            levelName: matchmakerInfo.level_name || levelNames[currentLevel],
            nextLevelName: nextLevelName,
            points: matchmakerInfo.points || 0,
            currentLevelPoints: matchmakerInfo.current_level_points || 0,
            nextLevelPoints: matchmakerInfo.next_level_points || 100,
            pointsToNextLevel: matchmakerInfo.points_to_next_level || 0,
            levelProgress: matchmakerInfo.level_progress || 0
          }
          console.log('更新后的profile数据:', this.profile)
        } else {
          console.log('matchmakerInfo为空，无法更新profile数据')
        }
      } catch (error) {
        console.error('加载个人资料失败:', error)
        uni.showToast({
          title: '加载失败，请稍后重试: ' + error.message,
          icon: 'none'
        })
      }
    },
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    // 检查今日是否已签到
    async checkSignInStatus() {
      try {
        const userInfo = uni.getStorageSync('userInfo')
        if (!userInfo || !userInfo.userId) {
          this.isSignedToday = false
          this.continuousDays = 0
          this.totalDays = 0
          this.signedDays = []
          console.warn('没有有效的userId，无法检查签到状态')
          return
        }
        
        // 首先获取红娘信息，以获取makerId
        const matchmakerInfo = await api.matchmaker.getByUserId(userInfo.userId)
        if (!matchmakerInfo || !matchmakerInfo.matchmakerId && !matchmakerInfo.matchmaker_id) {
          this.isSignedToday = false
          this.continuousDays = 0
          this.totalDays = 0
          this.signedDays = []
          console.warn('没有有效的makerId，无法检查签到状态')
          return
        }
        
        const makerId = matchmakerInfo.matchmakerId || matchmakerInfo.matchmaker_id
        
        // 检查今日是否已签到
        const res = await api.matchmaker.checkinStatus(makerId)
        console.log('检查签到状态返回结果:', res)
        let signed = false
        if (typeof res === 'boolean') {
          signed = res
        } else if (typeof res === 'string') {
          signed = res === 'true'
        } else if (typeof res === 'number') {
          signed = res === 1
        } else if (res && typeof res === 'object') {
          if (typeof res.todaySigned === 'boolean') signed = res.todaySigned
          else if (typeof res.signed === 'boolean') signed = res.signed
          else if (typeof res.isSignedToday === 'boolean') signed = res.isSignedToday
          else if (typeof res.data === 'object' && res.data) {
            if (typeof res.data.todaySigned === 'boolean') signed = res.data.todaySigned
            else if (typeof res.data.signed === 'boolean') signed = res.data.signed
            else if (typeof res.data.isSignedToday === 'boolean') signed = res.data.isSignedToday
          }
        }
        this.isSignedToday = !!signed
        
        // 获取签到统计
        const stats = await api.matchmaker.checkinStats(makerId)
        console.log('获取签到统计返回结果:', stats)
        
        // 初始化签到记录数组
        this.signedDays = []
        
        if (stats) {
          this.continuousDays = stats.continuousDays || 0
          this.totalDays = stats.totalDays || 0
          
          // 检查stats中是否包含本月的签到记录
          let signedDays = []
          
          // 情况1: stats直接包含signedDays数组
          if (stats.signedDays && Array.isArray(stats.signedDays)) {
            signedDays = stats.signedDays
          }
          // 情况2: stats.data包含signedDays数组
          else if (stats.data && stats.data.signedDays && Array.isArray(stats.data.signedDays)) {
            signedDays = stats.data.signedDays
          }
          // 情况3: stats是对象，直接包含日期属性
          else if (typeof stats === 'object') {
            // 处理stats对象
            const processStats = (obj) => {
              const days = []
              // 遍历对象，寻找日期相关的属性
              for (const key in obj) {
                if (obj.hasOwnProperty(key)) {
                  // 检查是否是日期相关的属性
                  const value = obj[key]
                  // 检查是否是日期格式
                  if (typeof value === 'object' && value !== null && typeof value.isChecked === 'boolean') {
                    // 如果是包含isChecked属性的对象，且isChecked为true
                    if (value.isChecked && typeof value.date === 'number') {
                      days.push(value.date)
                    }
                  }
                }
              }
              return days
            }
            
            // 先处理stats对象本身
            signedDays = processStats(stats)
            
            // 如果stats.data存在，也处理一下
            if (stats.data && typeof stats.data === 'object') {
              signedDays = [...signedDays, ...processStats(stats.data)]
            }
          }
          
          // 检查签到状态响应中是否包含签到记录
          if (signedDays.length === 0 && res && typeof res === 'object') {
            const processRes = (obj) => {
              const days = []
              if (obj.signedDays && Array.isArray(obj.signedDays)) {
                days.push(...obj.signedDays)
              }
              return days
            }
            
            signedDays = processRes(res)
            
            if (res.data && typeof res.data === 'object') {
              signedDays = [...signedDays, ...processRes(res.data)]
            }
          }
          
          // 检查今日是否已签到，如果已签到但不在signedDays中，添加进去
          const today = new Date().getDate()
          if (this.isSignedToday && !signedDays.includes(today)) {
            signedDays.push(today)
          }
          
          // 去重并排序
          this.signedDays = [...new Set(signedDays)].sort((a, b) => a - b)
        }
        
        console.log('最终的signedDays:', this.signedDays)
      } catch (error) {
        console.error('检查签到状态失败:', error)
        this.isSignedToday = false
        this.continuousDays = 0
        this.totalDays = 0
        this.signedDays = []
      }
    },
    // 显示签到弹框
    async showSignInPopup() {
      // 显示弹窗前刷新签到状态和记录
      await this.checkSignInStatus()
      this.generateCalendar()
      this.$refs.signInPopup.open()
    },
    // 关闭签到弹框
    closeSignInPopup() {
      this.$refs.signInPopup.close()
    },
    // 执行签到
    async doSignIn() {
      try {
        const userInfo = uni.getStorageSync('userInfo')
        if (!userInfo || !userInfo.userId) {
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          })
          setTimeout(() => {
            uni.navigateTo({
              url: '/pages/page3/page3'
            })
          }, 1000)
          return
        }
        
        // 首先获取红娘信息，以获取makerId
        const matchmakerInfo = await api.matchmaker.getByUserId(userInfo.userId)
        if (!matchmakerInfo || !matchmakerInfo.matchmakerId && !matchmakerInfo.matchmaker_id) {
          uni.showToast({
            title: '没有有效的makerId，无法签到',
            icon: 'none'
          })
          return
        }
        
        const makerId = matchmakerInfo.matchmakerId || matchmakerInfo.matchmaker_id
        
        // 执行签到
        const res = await api.matchmaker.doCheckin(makerId)
        console.log('签到API返回结果:', res)
        let success = false
        let alreadySigned = false
        if (typeof res === 'boolean') {
          success = res
        } else if (typeof res === 'string') {
          success = res === 'true' || res === 'ok' || res === 'success'
        } else if (res && typeof res === 'object') {
          if (typeof res.success === 'boolean') success = res.success
          if (typeof res.todaySigned === 'boolean') alreadySigned = res.todaySigned
          else if (typeof res.signed === 'boolean') alreadySigned = res.signed
          else if (typeof res.isSignedToday === 'boolean') alreadySigned = res.isSignedToday
          if (res.data && typeof res.data === 'object') {
            if (typeof res.data.success === 'boolean') success = res.data.success
            if (typeof res.data.todaySigned === 'boolean') alreadySigned = res.data.todaySigned
            else if (typeof res.data.signed === 'boolean') alreadySigned = res.data.signed
            else if (typeof res.data.isSignedToday === 'boolean') alreadySigned = res.data.isSignedToday
          }
        }
        
        if (success) {
          uni.showToast({
            title: '签到成功',
            icon: 'success'
          })
          this.isSignedToday = true
          // 更新签到记录
          const today = new Date()
          const todayDate = today.getDate()
          if (!this.signedDays.includes(todayDate)) {
            this.signedDays.push(todayDate)
            this.signedDays.sort((a, b) => a - b)
          }
          this.generateCalendar()
          this.loadProfileData()
          this.closeSignInPopup()
        } else if (alreadySigned) {
          uni.showToast({
            title: '今日已签到',
            icon: 'none'
          })
        } else {
          uni.showToast({
            title: '签到失败，请稍后重试',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('签到失败:', error)
        uni.showToast({
          title: error.msg || '签到失败，请稍后重试',
          icon: 'none'
        })
      }
    },
    // 签到（旧方法，保持兼容）
    handleSignIn() {
      this.showSignInPopup()
    },
    // 我的资源
    handleMyResources() {
      uni.navigateTo({
        url: '/pages/matchmaker-workbench/my-resources'
      })
    },
    // 我的活动
    handleActivityCenter() {
      uni.navigateTo({
        url: '/pages/matchmaker-workbench/my-activities'
      })
    },
    // 积分商城
    handlePointsMall() {
      uni.navigateTo({
        url: '/pages/matchmaker-workbench/points-mall'
      })
    },
    // 编辑资料
    handleEditProfile() {
      console.log('编辑资料')
      uni.navigateTo({
        url: '/pages/matchmaker-workbench/edit-profile'
      })
    },
    // 关于我们
    handleAccountSettings() {
      uni.navigateTo({
        url: '/pages/settings/about'
      })
    },
    // 退出登录
    handleLogout() {
      uni.showModal({
        title: '退出登录',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync('token')
            uni.removeStorageSync('userInfo')
            uni.navigateTo({
              url: '/pages/page3/page3'
            })
          }
        }
      })
    },
    // 导航到工作台
    navigateToWorkbench() {
      uni.navigateTo({
        url: '/pages/matchmaker-workbench/index'
      })
    },
    // 导航到我的资源
    navigateToMyResources() {
      uni.navigateTo({
        url: '/pages/matchmaker-workbench/my-resources'
      })
    },
    // 导航到排行榜
    navigateToRanking() {
      uni.navigateTo({
        url: '/pages/matchmaker-workbench/ranking'
      })
    },
    // 导航到消息
    navigateToMessage() {
      uni.navigateTo({
        url: '/pages/matchmaker-workbench/message'
      })
    },
    // 导航到我的
    navigateToMine() {
      // 已在我的页面，无需跳转
    }
  }
}
</script>

<style lang="scss" scoped>
.matchmaker-mine {
  min-height: 100vh;
  background: #FFF9F9;
  display: flex;
  flex-direction: column;
}

/* 顶部导航栏 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25rpx 30rpx;
  padding-top: calc(25rpx + env(safe-area-inset-top));
  background: #FFF9F9;
  border-bottom: 1rpx solid #F0F0F0;

  .back-btn {
    width: 70rpx;
    height: 70rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(240, 240, 240, 0.5);
    border-radius: 50%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>');
    background-size: 40rpx 40rpx;
    background-repeat: no-repeat;
    background-position: center;
  }

  .header-title {
    font-size: 38rpx;
    font-weight: bold;
    color: #333;
  }

  .placeholder {
    width: 70rpx;
  }
}

.content {
  flex: 1;
  padding: 0;
}

.content-container {
  padding: 20rpx 30rpx 120rpx;
}

/* 个人信息卡片 */
.profile-card {
  background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%);
  border-radius: 25rpx;
  padding: 35rpx;
  margin-bottom: 25rpx;
  box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.1);
}

.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;

  .profile-avatar {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 25rpx;
    border: 2rpx solid #FFF;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  }

  .profile-info {
    flex: 1;

    .profile-name {
      display: block;
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }

    .profile-badge {
      display: inline-block;
      background: #FFD700;
      color: #FFFFFF;
      font-size: 24rpx;
      font-weight: bold;
      padding: 6rpx 16rpx;
      border-radius: 15rpx;
      margin-bottom: 10rpx;
    }

    .profile-rating {
      display: block;
      font-size: 28rpx;
      color: #666;
    }
  }
}

/* 等级和积分 */
.level-points {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;

  .level-info {
    display: flex;
    align-items: center;
    gap: 10rpx;

    .level-icon {
      width: 44rpx;
      height: 44rpx;
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFD700"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }

    .level-name {
      font-size: 32rpx;
      font-weight: bold;
      color: #FF9800;
    }
  }

  .points-value {
    font-size: 48rpx;
    font-weight: bold;
    color: #E91E63;
  }

  .points-label {
    font-size: 28rpx;
    color: #666;
  }
}

/* 等级进度 */
.level-progress {
  .progress-label {
    display: block;
    font-size: 26rpx;
    color: #333;
    margin-bottom: 15rpx;
  }

  .progress-bar {
    width: 100%;
    height: 12rpx;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 6rpx;
    margin-bottom: 10rpx;

    .progress-fill {
      height: 100%;
      background: #FFB74D;
      border-radius: 6rpx;
    }
  }

  .progress-values {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15rpx;

    .current-value,
    .target-value {
      font-size: 24rpx;
      color: #666;
    }
  }

  .upgrade-tip {
    display: block;
    background: rgba(255, 255, 255, 0.3);
    color: #E91E63;
    font-size: 26rpx;
    font-weight: bold;
    padding: 15rpx;
    border-radius: 15rpx;
    text-align: center;
  }
}

/* 功能菜单 */
.function-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25rpx;
  padding: 35rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .function-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15rpx;

    .function-icon {
      width: 90rpx;
      height: 90rpx;
      border-radius: 50%;
      background-size: 50rpx 50rpx;
      background-repeat: no-repeat;
      background-position: center;

      &.calendar {
        background-color: #FFF3E0;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FF9800"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>');
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;
        font-weight: bold;
        color: #FF9800;
      }

      &.resources {
        background-color: #E8F5E9;
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234CAF50"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>');
      }

      &.heart-book {
        background-color: #FFEBEE;
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23F44336"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>');
      }

      &.money {
        background-color: #F3E5F5;
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>');
      }
    }

    .function-text {
      font-size: 26rpx;
      color: #333;
    }
  }
}

/* 设置选项 */
.settings-section {
  background: #FFFFFF;
  border-radius: 20rpx;
  padding: 0;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25rpx 35rpx;
    margin-bottom: 0;
    background: #FFFFFF;
    border-radius: 20rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .settings-icon {
      width: 44rpx;
      height: 44rpx;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      margin-right: 20rpx;
    }

    .settings-icon.user {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
    }

    .settings-icon.gear {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>');
    }

    .settings-icon.logout {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"/></svg>');
    }
    
    .settings-icon.info {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>');
    }

    .settings-text {
      flex: 1;
      font-size: 30rpx;
      color: #333;
    }

    .arrow-right {
      width: 24rpx;
      height: 24rpx;
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
  }
}

/* 底部导航 */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: #FFFFFF;
  border-top: 1rpx solid #F0F0F0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom);

  .tabbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8rpx;
    padding: 10rpx 0;

    .tabbar-icon {
      width: 44rpx;
      height: 44rpx;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      position: relative;

      .badge {
        position: absolute;
        top: -8rpx;
        right: -8rpx;
        background: #FF4444;
        color: #FFFFFF;
        font-size: 20rpx;
        font-weight: bold;
        width: 32rpx;
        height: 32rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16rpx;
      }
    }

    .tabbar-text {
      font-size: 20rpx;
      color: #999;
    }

    &.active {
      .tabbar-text {
        color: #9C27B0;
        font-weight: bold;
      }
    }

    &.home .tabbar-icon {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>');
    }

    &.active.home .tabbar-icon {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>');
    }

    &.resources .tabbar-icon {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>');
    }

    &.active.resources .tabbar-icon {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>');
    }

    &.trophy .tabbar-icon {
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"/></svg>');
    }

    &.active.trophy .tabbar-icon {
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"/></svg>');
    }

    &.message .tabbar-icon {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>');
    }

    &.active.message .tabbar-icon {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>');
    }

    &.mine .tabbar-icon {
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
    }
    &.mine.active .tabbar-icon {
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
    }
  }
}

/* 签到弹框样式 */
.sign-in-popup {
  width: 600rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  overflow: hidden;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    background: #FFEBEE;
    border-bottom: none;

    .popup-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #E91E63;
    }

    .close-btn {
      width: 40rpx;
      height: 40rpx;
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23E91E63"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
  }

  .popup-content {
    padding: 20rpx 30rpx 30rpx;

    /* 签到统计 */
    .checkin-stats {
      display: flex;
      justify-content: space-around;
      margin-bottom: 30rpx;
      padding: 20rpx;
      background: #FFF3E0;
      border-radius: 15rpx;
      
      .stats-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10rpx;
        
        .stats-label {
          font-size: 24rpx;
          color: #666;
        }
        
        .stats-value {
          font-size: 48rpx;
          font-weight: bold;
          color: #E91E63;
        }
        
        .stats-unit {
          font-size: 24rpx;
          color: #666;
        }
      }
    }
    
    .calendar-container {
      background: #FFFFFF;
      border-radius: 15rpx;
      padding: 20rpx;
      margin-bottom: 30rpx;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

      .calendar-header {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20rpx;

        .calendar-title {
          font-size: 28rpx;
          font-weight: bold;
          color: #333;
        }
      }

      .calendar-week {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 10rpx;
        margin-bottom: 20rpx;

        .week-day {
          text-align: center;
          font-size: 24rpx;
          color: #999;
          font-weight: bold;
        }
      }

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

        .calendar-day {
          text-align: center;
          font-size: 28rpx;
          color: #333;
          background: #F5F5F5;
          border-radius: 8rpx;
          height: 70rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          position: relative;

          &.other-month {
            color: #CCCCCC;
            background: #F9F9F9;
          }

          &.today {
            background: #FFF3E0;
            color: #FF9800;
            font-weight: bold;
          }

          &.checked {
            background: #FFCDD2;
            color: #E91E63;
            font-weight: bold;
          }
          
          &.today-checked {
            background: #E91E63;
            color: #FFFFFF;
            font-weight: bold;
          }
          
          .check-mark {
            position: absolute;
            bottom: 5rpx;
            right: 5rpx;
            font-size: 18rpx;
            color: #FFFFFF;
            background: #E91E63;
            border-radius: 50%;
            width: 24rpx;
            height: 24rpx;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          
          .today-checked .check-mark {
            background: #FFFFFF;
            color: #E91E63;
          }
        }
      }
    }

    .sign-in-reward {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10rpx;

      .reward-title {
        font-size: 28rpx;
        color: #666;
      }

      .reward-points {
        font-size: 48rpx;
        font-weight: bold;
        color: #E91E63;
      }
    }
  }

  .popup-footer {
    padding: 0 30rpx 30rpx;

    .sign-in-btn {
      width: 100%;
      height: 80rpx;
      background: #E91E63;
      color: #FFFFFF;
      font-size: 32rpx;
      border-radius: 40rpx;
      border: none;
      font-weight: bold;
      transition: all 0.3s;

      &:hover {
        background: #C2185B;
      }

      &.signed {
        background: #E0E0E0;
        color: #9E9E9E;
        cursor: not-allowed;

        &:hover {
          background: #E0E0E0;
        }
      }
    }
  }
}
</style>