<template>
  <view class="page-container">
    <!-- 顶部背景装饰 -->
    <view class="bg-decoration"></view>

    <!-- 头部区域 -->
    <view class="header-section">
      <view class="user-info-card glass-card">
        <view class="user-main">
          <image class="avatar" :src="avatar || '/static/logo.png'" mode="aspectFill"></image>
          <view class="user-meta">
            <view class="name-row">
              <text class="nickname">{{ nickname || '未登录' }}</text>
              <view class="level-badge" v-if="title">
                <image class="level-icon" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNGRjZCMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNiAzSDE4TDIxIDlMOSAyMSAzIDlMNiAzWiIgLz48L3N2Zz4=" mode="aspectFit"></image>
                <text class="level-text">Lv1 {{ title }}</text>
              </view>
            </view>
            <view class="userid" v-if="userId">ID: {{ userId }}</view>
            <!-- <view class="progress-container" v-if="nickname">
              <view class="progress-bar">
                <view class="progress-fill" style="width: 20%;"></view>
              </view>
              <text class="progress-text">100/5000 升级Lv2</text>
            </view> -->
            <!-- <view class="userid" v-else>ID: {{ userId || '-' }}</view> -->
          </view>
          <view class="join-btn" @click="handleJoin" v-if="!nickname">立即登录</view>
        </view>
        
        <!-- 数据统计栏 -->
        <view class="stats-row">
          <view class="stat-item" @click="toPointsPage">
            <text class="stat-num">{{ formatPoints(pointsBalance) }}</text>
            <text class="stat-label">积分</text>
          </view>
          <view class="stat-divider"></view>
          <view class="stat-item" @click="toCouponsPage">
            <text class="stat-num">{{ stats.coupon_count || 0 }}</text>
            <text class="stat-label">优惠券</text>
          </view>
          <view class="stat-divider"></view>
          <view class="stat-item" @click="toItemCardsPage">
            <text class="stat-num">{{ stats.item_card_count || 0 }}</text>
            <text class="stat-label">道具卡</text>
          </view>
        </view>
      </view>
    </view>

    <!-- #ifdef MP-WEIXIN -->
    <view class="invite-banner glass-card">
      <view class="invite-content">
        <view class="invite-text-group">
          <view class="invite-title-row">
            <text class="invite-tag">好礼相送</text>
            <text class="invite-title">邀请好友送好礼</text>
          </view>
          <text class="invite-desc" @tap="copyInviteCode">我的邀请码：{{ getInviteCode() || '-' }}（点击复制）</text>
        </view>
        <button class="invite-action-btn invite-share-btn" open-type="share">
          <image class="invite-share-icon" src="/static/logo.png" mode="aspectFit"></image>
          <text>立即邀请</text>
          <text class="invite-arrow">›</text>
        </button>
      </view>
      <image class="invite-bg-icon" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNGRjZCMDAiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjEgMTF2OGEyIDIgMCAwIDEtMiAySDVhMiAyIDAgMCAwIDEtMiAyVjdsOS02IDkgNnoiIC8+PC9zdmc+" mode="aspectFit"></image>
    </view>
    <!-- #endif -->

    <!-- #ifndef MP-WEIXIN -->
    <view class="invite-banner glass-card" @click="handleInvite">
      <view class="invite-content">
        <view class="invite-text-group">
          <view class="invite-title-row">
            <text class="invite-tag">好礼相送</text>
            <text class="invite-title">邀请好友送好礼</text>
          </view>
          <text class="invite-desc" @click.stop="copyInviteCode">我的邀请码：{{ getInviteCode() || '-' }}（点击复制）</text>
        </view>
        <view class="invite-action-btn">
          <text>立即邀请</text>
          <text class="invite-arrow">›</text>
        </view>
      </view>
      <image class="invite-bg-icon" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNGRjZCMDAiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjEgMTF2OGEyIDIgMCAwIDEtMiAySDVhMiAyIDAgMCAwIDEtMiAyVjdsOS02IDkgNnoiIC8+PC9zdmc+" mode="aspectFit"></image>
    </view>
    <!-- #endif -->
    
    <!-- 我的订单 -->
    <view class="section-card glass-card">
      <view class="section-header">
        <text class="section-title">我的订单</text>
        <text class="section-more" @click="toOrders('all')">全部订单 ›</text>
      </view>
      <view class="grid-row">
        <!-- 1. 待付款 -->
        <view class="grid-item" @click="toOrders('pending')">
          <view class="icon-wrapper">
             <image class="grid-icon-img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNGRjZCMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjEiIHk9IjQiIHdpZHRoPSIyMiIgaGVpZ2h0PSIxNiIgcng9IjIiIHJ5PSIyIj48L3JlY3Q+PGxpbmUgeDE9IjEiIHkxPSIxMCIgeDI9IjIzIiB5Mj0iMTAiPjwvbGluZT48L3N2Zz4=" mode="aspectFit"></image>
          </view>
          <text class="grid-label">待付款</text>
        </view>
        <!-- 2. 待发货 (Jump to Cabinet Tab 1) -->
        <view class="grid-item" @click="toCabinetTab(1)">
          <view class="icon-wrapper">
            <image class="grid-icon-img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNGRjZCMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xMiAyMmg1LjlhMiAyIDAgMCAwIDEuOS0xLjQybDMuMTMtMTEuMDlhMiAyIDAgMCAwLTEuOS0yLjUxaC00LjE2IiAvPjxwYXRoIGQ9Ik0xOC40MiA5aC02LjMyIiAvPjxwYXRoIGQ9Ik0xNSA2VjNhMSAxIDAgMCAwLTEtMUg2YTEgMSAwIDAgMC0xIDF2MTQiIC8+PHBhdGggZD0iTTkgMTNoNyIgLz48L3N2Zz4=" mode="aspectFit"></image>
          </view>
          <text class="grid-label">待发货</text>
        </view>
        <!-- 3. 已发货 (Jump to Cabinet Tab 1) -->
        <view class="grid-item" @click="toCabinetTab(1)">
          <view class="icon-wrapper">
            <image class="grid-icon-img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNGRjZCMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjEiIHk9IjMiIHdpZHRoPSIxNSIgaGVpZ2h0PSIxMyIgcng9IjIiIHJ5PSIyIj48L3JlY3Q+PHBvbHlsaW5lIHBvaW50cz0iMTYgOCAyMCA4IDIwIDIxIDIgMjEgMiAxNiA2IDE2IiAvPjwvc3ZnPg==" mode="aspectFit"></image>
          </view>
          <text class="grid-label">已发货</text>
        </view>
        <!-- 4. 全部订单 (Was Box Cabinet) -->
        <view class="grid-item" @click="toOrders('completed')">
          <view class="icon-wrapper">
             <image class="grid-icon-img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNGRjZCMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMSA4YTIgMiAwIDAgMC0xLTEuNzNsLTctNGEyIDIgMCAwIDAtMiAwbC03IDRBMiAyIDAgMCAwIDMgOHY4YTIgMiAwIDAgMCAxIDEuNzNsNyA0YTIgMiAwIDAgMCAyIDBsNy00QTIgMiAwIDAgMCAyMSAxNlY4eiIvPjxwYXRoIGQ9Ik0zLjI3IDYuOTZMMTIgMTIuMDFsMTAgLTUuMDUiLz48cGF0aCBkPSJNMTIgMjIuMDhWMTIiLz48L3N2Zz4=" mode="aspectFit"></image>
          </view>
          <text class="grid-label">全部订单</text>
        </view>
      </view>
    </view>
    
    <!-- 功能菜单 -->
    <view class="section-card glass-card">
      <view class="section-header">
        <text class="section-title">常用功能</text>
      </view>
      <view class="grid-menu">
        <view class="menu-item" @click="toCouponsPage">
          <view class="menu-icon-box">
             <image class="menu-icon-img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMSA2SDNhMiAyIDAgMCAwLTIgMnY4YTIgMiAwIDAgMCAyIDJoMThhMiAyIDAgMCAwIDItMnYtOGEyIDIgMCAwIDAtMi0yWiIgLz48cGF0aCBkPSJNNiAxMnYtMiIgLz48cGF0aCBkPSJNNiAxNnYtMiIgLz48cGF0aCBkPSJNMTYgNnYxMiIgLz48L3N2Zz4=" mode="aspectFit"></image>
          </view>
          <text class="menu-label">优惠券</text>
        </view>
        <view class="menu-item" @click="toItemCardsPage">
          <view class="menu-icon-box">
            <image class="menu-icon-img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjMiIHk9IjMiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgcng9IjIiIHJ5PSIyIj48L3JlY3Q+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iNCIgLz48cGF0aCBkPSJNMjEgMTVsLTUuNDMtMy4yM2EyIDIgMCAwIDAtMS44NCAwbC0yLjMxIDEuMzciIC8+PC9zdmc+" mode="aspectFit"></image>
          </view>
          <text class="menu-label">道具卡</text>
        </view>
        <view class="menu-item" @click="toTasksPage">
          <view class="menu-icon-box">
            <image class="menu-icon-img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik05IDExbDMgM0wyMiA0Ii8+PHBhdGggZD0iTTIxIDEydjdhMiAyIDAgMCAxLTIgMkg1YTIgMiAwIDAgMS0yLTJWNWEyIDIgMCAwIDEgMi0yaDExIi8+PC9zdmc+" mode="aspectFit"></image>
          </view>
          <text class="menu-label">任务中心</text>
        </view>
        <view class="menu-item" @click="toInvitesPage">
          <view class="menu-icon-box">
             <image class="menu-icon-img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xNyAyMXYtMmE0IDQgMCAwIDAtNC00SDdhNCA0IDAgMCAwLTQgNHYyIj48L3BhdGg+PGNpcmNsZSBjeD0iMTAiIGN5PSI3IiByPSI0Ij48L2NpcmNsZT48cGF0aCBkPSJNMjMgMjF2LTJhNCA0IDAgMCAwLTMtMy4yNyI+PC9wYXRoPjxwYXRoIGQ9Ik0xNiAzLjEzYTQgNCAwIDAgMSAwIDcuNzUiPjwvcGF0aD48L3N2Zz4=" mode="aspectFit"></image>
          </view>
          <text class="menu-label">邀请记录</text>
        </view>
        <view class="menu-item" @click="toAddresses">
          <view class="menu-icon-box">
             <image class="menu-icon-img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMSAxMGMwIDctOSAxMy05IDEzcy05LTYtOS0xM2E5IDkgMCAwIDEgMTggMHoiIC8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMCIgcj0iMyIgLz48L3N2Zz4=" mode="aspectFit"></image>
          </view>
          <text class="menu-label">收货地址</text>
        </view>
        <view class="menu-item" @click="toHelp">
           <view class="menu-icon-box">
             <image class="menu-icon-img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PHBhdGggZD0iTTkuMDkgOWEzIDMgMCAwIDEgNS44MyAxYzAgMi0zIDMtMyAzIi8+PHBhdGggZD0iTTEyIDE3aC4wMSIvPjwvc3ZnPg==" mode="aspectFit"></image>
           </view>
           <text class="menu-label">帮助中心</text>
        </view>
      </view>
    </view>

    <!-- 弹窗组件保持原有逻辑 -->
    <!-- 积分明细弹窗 -->
    <view class="popup-mask" v-if="pointsVisible" @tap="closePointsPopup">
      <view class="popup-content" @tap.stop>
        <view class="popup-header">
          <text class="popup-title">积分明细</text>
          <text class="close-btn" @tap="closePointsPopup">×</text>
        </view>
        
        <scroll-view scroll-y class="points-list" @scrolltolower="loadMorePoints">
          <view v-if="pointsLoading && pointsList.length === 0" class="status-text">加载中...</view>
          <view v-else-if="!pointsList || pointsList.length === 0" class="status-text">暂无积分记录</view>
          
          <view v-for="(item, index) in pointsList" :key="index" class="point-item">
            <view class="point-left">
              <text class="point-desc">{{ getActionText(item.action) }}</text>
              <text class="point-time">{{ formatDate(item.created_at) }}</text>
            </view>
            <view class="point-right">
              <text class="point-amount" :class="{ 'positive': Number(item.points) > 0, 'negative': Number(item.points) < 0 }">
                {{ Number(item.points) > 0 ? '+' : '' }}{{ formatPoints(item.points) }}
              </text>
            </view>
          </view>
          
          <view v-if="pointsLoading && pointsList.length > 0" class="loading-more">加载更多...</view>
          <view v-if="!pointsHasMore && pointsList.length > 0" class="no-more">没有更多了</view>
        </scroll-view>
      </view>
    </view>

    <!-- 优惠券弹窗 -->
    <view class="popup-mask" v-if="couponsVisible" @tap="closeCouponsPopup">
      <view class="popup-content coupon-popup" @tap.stop>
        <view class="popup-header">
          <text class="popup-title">我的优惠券</text>
          <text class="close-btn" @tap="closeCouponsPopup">×</text>
        </view>
        
        <view class="popup-tabs coupon-tabs-3">
          <view class="popup-tab" :class="{ active: couponsTab === 1 }" @tap="switchCouponsTab(1)">未使用</view>
          <view class="popup-tab" :class="{ active: couponsTab === 2 }" @tap="switchCouponsTab(2)">已使用</view>
          <view class="popup-tab" :class="{ active: couponsTab === 3 }" @tap="switchCouponsTab(3)">已过期</view>
        </view>
        
        <scroll-view scroll-y class="coupon-scroll" @scrolltolower="loadMoreCoupons">
          <view v-if="couponsLoading && couponsList.length === 0" class="status-text">加载中...</view>
          <view v-else-if="!couponsList || couponsList.length === 0" class="empty-state">
            <text class="empty-icon">🎟️</text>
            <text class="empty-text">{{ getCouponEmptyText() }}</text>
          </view>
          
          <view v-for="(item, index) in couponsList" :key="item.id || index" class="coupon-ticket-v2" :class="getCouponCardClass(item)">
            <!-- 左侧金额区域 -->
            <view class="coupon-left-v2">
              <view class="coupon-remaining">
                <text class="coupon-symbol">¥</text>
                <text class="coupon-amount-num">{{ formatCouponValue(item.remaining ?? item.amount ?? 0) }}</text>
              </view>
              <text class="coupon-label">{{ couponsTab === 1 ? '可用' : (couponsTab === 2 ? '已用' : '过期') }}</text>
            </view>
            
            <!-- 中间分割线 -->
            <view class="coupon-divider-v2">
              <view class="divider-notch top"></view>
              <view class="divider-dash"></view>
              <view class="divider-notch bottom"></view>
            </view>
            
            <!-- 右侧信息区域 -->
            <view class="coupon-right-v2">
              <view class="coupon-header-row">
                <text class="coupon-name-v2">{{ item.name || '优惠券' }}</text>
                <view class="coupon-original" v-if="item.amount && item.remaining !== undefined && item.remaining !== item.amount">
                  <text>原值 ¥{{ formatCouponValue(item.amount) }}</text>
                </view>
              </view>
              
              <text class="coupon-rules">{{ item.rules || '全场通用' }}</text>
              
              <!-- 使用进度条 (仅当有使用记录时显示) -->
              <view class="coupon-progress-wrap" v-if="item.amount && item.remaining !== undefined && item.remaining < item.amount">
                <view class="coupon-progress-bar">
                  <view class="coupon-progress-fill" :style="{ width: getCouponUsedPercent(item) + '%' }"></view>
                </view>
                <text class="coupon-progress-text">已用 {{ formatCouponValue(item.amount - item.remaining) }} ({{ getCouponUsedPercent(item) }}%)</text>
              </view>
              
              <view class="coupon-footer-row">
                <view class="coupon-footer-left">
                  <text class="coupon-expire-v2">{{ formatCouponExpiry(item) }}</text>
                  <!-- 使用时间 (已使用状态) -->
                  <text class="coupon-used-time" v-if="couponsTab === 2 && item.used_at">使用时间：{{ formatDateTime(item.used_at) }}</text>
                </view>
                
                <view class="coupon-action-v2" v-if="couponsTab === 1">
                  <view class="use-btn-v2">去使用</view>
                </view>
                <view class="coupon-status-v2" v-else>
                  <text class="status-tag" :class="couponsTab === 2 ? 'used' : 'expired'">{{ couponsTab === 2 ? '已使用' : '已过期' }}</text>
                </view>
              </view>
            </view>
          </view>
          
          <view v-if="couponsLoading && couponsList.length > 0" class="loading-more">加载更多...</view>
          <view v-if="!couponsHasMore && couponsList.length > 0" class="no-more">没有更多了</view>
        </scroll-view>
      </view>
    </view>

    <!-- 道具卡弹窗 -->
    <view class="popup-mask" v-if="itemCardsVisible" @tap="closeItemCardsPopup">
      <view class="popup-content item-cards-popup" @tap.stop>
        <view class="popup-header">
          <text class="popup-title">我的道具卡</text>
          <text class="close-btn" @tap="closeItemCardsPopup">×</text>
        </view>
        
        <view class="popup-tabs">
          <view class="popup-tab" :class="{ active: itemCardsTab === 0 }" @tap="switchItemCardsTab(0)">未使用</view>
          <view class="popup-tab" :class="{ active: itemCardsTab === 1 }" @tap="switchItemCardsTab(1)">已使用</view>
        </view>
        
        <scroll-view scroll-y class="item-cards-scroll">
          <view v-if="itemCardsLoading && itemCardsList.length === 0" class="status-text">加载中...</view>
          <view v-else-if="!itemCardsList || itemCardsList.length === 0" class="empty-state">
            <text class="empty-icon">🃏</text>
            <text class="empty-text">{{ itemCardsTab === 0 ? '暂无可用道具卡' : '暂无使用记录' }}</text>
          </view>
          
          <view class="item-cards-grid">
            <view v-for="(item, index) in itemCardsList" :key="index" class="item-card" :class="{ 'used': itemCardsTab === 1 }">
              <view class="card-icon-wrap">
                <text class="card-icon">{{ getCardIcon(item.type || item.name) }}</text>
              </view>
              <view class="card-info">
                <text class="card-name">{{ item.name || item.title || '道具卡' }}</text>
                <text class="card-desc">{{ item.description || item.rules || '可在抽奖时使用' }}</text>
                <text class="card-use-time" v-if="itemCardsTab === 1 && item.used_at">使用时间：{{ formatDateTimeSeconds(item.used_at) }}</text>
              </view>
              <view class="card-count-badge" v-if="itemCardsTab === 0">
                <text class="count-num">×{{ item.remaining ?? item.count ?? 1 }}</text>
              </view>
              <view class="card-used-badge" v-else>
                <text class="used-text">已使用</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    
    <!-- 任务中心弹窗 -->
    <view class="popup-mask" v-if="tasksVisible" @tap="closeTasksPopup">
      <view class="popup-content task-center-popup" @tap.stop>
        <view class="popup-header">
          <text class="popup-title">任务中心</text>
          <text class="close-btn" @tap="closeTasksPopup">×</text>
        </view>
        
        <view class="task-hero">
          <view class="hero-top">
            <view class="hero-left">
              <text class="hero-title">总完成率</text>
              <view class="hero-percent-row">
                <text class="hero-percent">{{ getOverallProgress() }}</text>
                <text class="hero-percent-unit">%</text>
              </view>
              <view class="hero-progress">
                <view class="hero-progress-fill" :style="{ width: getOverallProgress() + '%' }"></view>
              </view>
            </view>
            <view class="hero-right">
              <view class="hero-chip done">
                <text class="chip-num">{{ tasksStats.done }}</text>
                <text class="chip-label">已完成</text>
              </view>
              <view class="hero-chip ongoing">
                <text class="chip-num">{{ tasksStats.ongoing }}</text>
                <text class="chip-label">进行中</text>
              </view>
              <view class="hero-chip waiting">
                <text class="chip-num">{{ tasksStats.waiting }}</text>
                <text class="chip-label">未开始</text>
              </view>
            </view>
          </view>
        </view>
        
        <scroll-view scroll-y class="task-list-scroll">
           <view v-if="tasksLoading" class="task-skeleton-list">
             <view v-for="i in 3" :key="i" class="task-skeleton">
               <view class="sk-left">
                 <view class="sk-icon"></view>
                 <view class="sk-text">
                   <view class="sk-line sk-line-title"></view>
                   <view class="sk-line sk-line-desc"></view>
                 </view>
               </view>
               <view class="sk-btn"></view>
             </view>
           </view>
           <view v-else-if="!tasksList.length" class="empty-state">
             <text class="empty-icon">📝</text>
             <text class="empty-text">暂无任务</text>
           </view>
           
           <view v-for="(task, index) in tasksList" :key="index" class="task-card" :class="getTaskClass(task)">
             <view class="task-card-left">
               <view class="task-icon-bubble" :class="getTaskClass(task)">
                 <text class="task-icon">{{ getTaskIcon(task.type || task.title || task.name) }}</text>
               </view>
               <view class="task-text">
                 <view class="task-title-row">
                   <text class="task-name">{{ task.title }}</text>
                   <text class="task-status-tag" :class="getTaskClass(task)">{{ getTaskStatusText(task) }}</text>
                 </view>
                 <text class="task-desc">{{ task.description }}</text>
                <view class="task-meta">
                  <view class="task-reward-chip" v-if="task.reward">
                    <text class="reward-icon">🏆</text>
                    <text class="reward-text">{{ task.reward }}</text>
                  </view>
                  <view class="task-progress-wrap">
                    <view class="task-progress-bar">
                      <view class="task-progress-fill" :class="getTaskClass(task)" :style="{ width: getTaskProgress(task).percent + '%' }"></view>
                    </view>
                    <text class="task-progress-text">{{ getTaskProgressText(task) }}</text>
                  </view>
                </view>
               </view>
             </view>
             <view class="task-card-right">
               <view class="task-action-btn" :class="getTaskClass(task)" @tap="handleTask(task)">
                 {{ getTaskBtnText(task) }}
               </view>
             </view>
           </view>
        </scroll-view>
      </view>
    </view>
    
    <!-- 邀请记录弹窗 -->
    <view class="popup-mask" v-if="invitesVisible" @tap="closeInvitesPopup">
       <view class="popup-content" @tap.stop>
         <view class="popup-header">
           <text class="popup-title">我的邀请</text>
           <text class="close-btn" @tap="closeInvitesPopup">×</text>
         </view>
         <view class="invite-summary">
           <view class="summary-item">
             <text class="summary-num">{{ invitesList.length }}</text>
             <text class="summary-label">邀请人数</text>
           </view>
           <view class="summary-item">
             <text class="summary-num">{{ getInviteRewardsTotal() }}</text>
             <text class="summary-label">累计奖励</text>
           </view>
         </view>
         <scroll-view scroll-y class="invite-list-scroll">
           <view v-if="invitesLoading" class="status-text">加载中...</view>
           <view v-else-if="!invitesList.length" class="empty-state">
             <text class="empty-icon">👥</text>
             <text class="empty-text">暂无邀请记录</text>
           </view>
           <view v-for="(item, index) in invitesList" :key="index" class="invite-item">
             <image class="invite-avatar" :src="item.avatar || '/static/logo.png'" mode="aspectFill"></image>
             <view class="invite-info">
               <text class="invite-name">{{ item.nickname || '用户' + item.id }}</text>
               <text class="invite-time">{{ formatDate(item.created_at) }}</text>
             </view>
             <view class="invite-status">已邀请</view>
           </view>
         </scroll-view>
       </view>
    </view>

  </view>
</template>

<script>
import {
  getUserInfo, getUserStats, getPointsBalance, getUserPoints, getUserCoupons, getItemCards,
  getUserTasks, getTaskProgress, getInviteRecords
} from '../../api/appUser.js'

export default {
  data() {
    return {
      userId: '',
      nickname: '',
      avatar: '',
      title: '', // 用户头衔
      inviteCode: '',
      pointsBalance: 0,
      
      stats: {
        coupon_count: 0,
        item_card_count: 0,
        pending_payment: 0,
        pending_shipment: 0,
        shipped: 0
      },
      
      // Points Popup
      pointsVisible: false,
      pointsList: [],
      pointsPage: 1,
      pointsLoading: false,
      pointsHasMore: true,
      
      // Coupons Popup
      couponsVisible: false,
      couponsList: [],
      couponsTab: 1, // 1=unused, 2=used, 3=expired
      couponsPage: 1,
      couponsLoading: false,
      couponsHasMore: true,

      // Item Cards Popup
      itemCardsVisible: false,
      itemCardsList: [],
      itemCardsTab: 0, // 0=unused, 1=used
      itemCardsLoading: false,
      
      // Tasks Popup
      tasksVisible: false,
      tasksList: [],
      tasksLoading: false,
      tasksStats: { done: 0, ongoing: 0, waiting: 0 },
      tasksProgressMap: {},
      
      // Invites Popup
      invitesVisible: false,
      invitesList: [],
      invitesLoading: false
    }
  },
  onLoad(opts) {
    const code = (opts && (opts.invite_code || opts.inviteCode)) || ''
    const v = String(code || '').trim()
    if (v) {
      try { uni.setStorageSync('inviter_code', v) } catch (_) {}
      const token = uni.getStorageSync('token')
      if (!token) {
        uni.navigateTo({ url: '/pages/login/index' })
      }
    }
  },
  onShow() {
    this.loadUserInfo()
  },
  onShareAppMessage() {
    const inviteCode = uni.getStorageSync('invite_code') || (uni.getStorageSync('user_info') || {}).invite_code || ''
    return {
      title: '🎁 好友邀请你一起玩，快来领福利！',
      path: inviteCode ? `/pages/invite/landing?invite_code=${inviteCode}` : '/pages/invite/landing',
      imageUrl: '/static/share_invite.png'
    }
  },
  onShareTimeline() {
    const inviteCode = uni.getStorageSync('invite_code') || (uni.getStorageSync('user_info') || {}).invite_code || ''
    return {
      title: '🎁 好友邀请你一起玩，快来领福利！',
      query: inviteCode ? `invite_code=${inviteCode}` : '',
      imageUrl: '/static/share_invite.png'
    }
  },
  methods: {
    getInviteCode() {
      const v = this.inviteCode || uni.getStorageSync('invite_code') || (uni.getStorageSync('user_info') || {}).invite_code || ''
      return String(v || '').trim()
    },
    formatPoints(v) {
      const n = Number(v) || 0
      if (n === 0) return '0'
      const f = n / 100
      return Number.isInteger(f) ? String(f) : f.toFixed(2).replace(/\.?0+$/, '')
    },
    copyInviteCode() {
      const code = this.getInviteCode()
      if (!code) {
        uni.showToast({ title: '暂无邀请码', icon: 'none' })
        return
      }
      uni.setClipboardData({
        data: code,
        success: () => {
          uni.showToast({ title: '邀请码已复制', icon: 'none' })
        }
      })
    },
    getInviteSharePath() {
      const code = this.getInviteCode()
      return code ? `/pages/invite/landing?invite_code=${encodeURIComponent(code)}` : '/pages/invite/landing'
    },
    normalizePointsBalance(v) {
      if (v && typeof v === 'object') {
        const nested = v.balance ?? v.points_balance ?? v.value
        const n1 = Number(nested)
        return Number.isFinite(n1) ? n1 : 0
      }
      const n2 = Number(v)
      return Number.isFinite(n2) ? n2 : 0
    },
    async loadUserInfo() {
      const token = uni.getStorageSync('token')
      if (!token) {
        this.resetUser()
        return
      }
      try {
        // 先尝试从缓存获取基础信息
        const cachedUser = uni.getStorageSync('user_info')
        const cachedUserId = uni.getStorageSync('user_id')
        
        if (cachedUser) {
          this.userId = cachedUser.id || cachedUserId
          this.nickname = cachedUser.nickname
          this.avatar = cachedUser.avatar
          this.inviteCode = cachedUser.invite_code
          this.title = cachedUser.title || ''
          this.pointsBalance = this.normalizePointsBalance(cachedUser.points_balance)
        } else if (cachedUserId) {
          this.userId = cachedUserId
        }
        
        if (this.userId) {
          try {
            const balanceRes = await getPointsBalance(this.userId)
            if (balanceRes !== undefined) {
              this.pointsBalance = this.normalizePointsBalance(balanceRes)
              if (cachedUser) {
                cachedUser.points_balance = this.pointsBalance
                uni.setStorageSync('user_info', cachedUser)
              }
            }
          } catch (e) {}

          const s = await getUserStats(this.userId)
          if (s) this.stats = { ...this.stats, ...s }
        } else {
             // 如果没有 userId，尝试调用 getUserInfo (即使可能失败)
             const res = await getUserInfo()
             if (res) {
               this.userId = res.id
               this.nickname = res.nickname
               this.avatar = res.avatar
               this.title = res.title || res.level_name || ''
               this.inviteCode = res.invite_code
               this.pointsBalance = this.normalizePointsBalance(res.points_balance)
               uni.setStorageSync('user_info', res)
               uni.setStorageSync('user_id', res.id)
               
               // Load stats
               const s = await getUserStats(res.id)
               if(s) this.stats = { ...this.stats, ...s }
             }
        }
      } catch (e) {
        console.error(e)
        // If 401, maybe clear token
      }
    },
    resetUser() {
      this.userId = ''
      this.nickname = ''
      this.avatar = ''
      this.title = ''
      this.pointsBalance = 0
      this.stats = { coupon_count: 0, item_card_count: 0 }
    },
    handleJoin() {
      uni.navigateTo({ url: '/pages/login/index' })
    },
    toOrders(status) {
      uni.navigateTo({ url: `/pages/orders/index?status=${status}` })
    },
    toCabinetTab(tabIndex) {
      uni.setStorageSync('cabinet_target_tab', tabIndex)
      uni.switchTab({ url: '/pages/cabinet/index' })
    },
    toAddresses() {
      uni.navigateTo({ url: '/pages/address/index' })
    },
    toPointsPage() {
      uni.navigateTo({ url: '/pages/points/index' })
    },
    toCouponsPage() {
      uni.navigateTo({ url: '/pages/coupons/index' })
    },
    toItemCardsPage() {
      uni.navigateTo({ url: '/pages/item-cards/index' })
    },
    toInvitesPage() {
      uni.navigateTo({ url: '/pages/invites/index' })
    },
    toTasksPage() {
      uni.navigateTo({ url: '/pages/tasks/index' })
    },
    toHelp() {
      uni.showActionSheet({
        itemList: ['购买协议', '用户协议'],
        success: (res) => {
          const idx = Number(res && res.tapIndex)
          if (idx === 0) {
            uni.navigateTo({ url: '/pages/agreement/purchase' })
            return
          }
          if (idx === 1) {
            uni.navigateTo({ url: '/pages/agreement/user' })
            return
          }
        }
      })
    },
    handleInvite() {
      const code = this.getInviteCode()
      const path = this.getInviteSharePath()

      try { if (code) uni.setStorageSync('inviter_code', code) } catch (_) {}

      // #ifdef MP-WEIXIN
      try { uni.showShareMenu({ withShareTicket: true }) } catch (_) {}
      uni.showModal({
        title: '邀请好友',
        content: '请点击「立即邀请」进行分享。',
        showCancel: true,
        cancelText: '复制链接',
        confirmText: '知道了',
        success: (res) => {
          if (res.cancel) {
            const data = path
            uni.setClipboardData({ data })
          }
        }
      })
      return
      // #endif

      // #ifdef APP-PLUS
      if (typeof uni.share === 'function') {
        const summary = code ? `给你一个宝藏应用，快来！邀请码：${code}` : '给你一个宝藏应用，快来！'
        uni.share({
          provider: 'weixin',
          scene: 'WXSceneSession',
          type: 1,
          summary,
          fail: () => {
            uni.setClipboardData({ data: path })
          }
        })
        return
      }
      // #endif

      // #ifdef H5
      const url = `${location.origin}${location.pathname}#${path}`
      const text = '给你一个宝藏应用，快来！'
      if (typeof navigator !== 'undefined' && navigator.share) {
        navigator.share({ title: text, text, url }).catch(() => {
          uni.setClipboardData({ data: url })
        })
      } else {
        uni.setClipboardData({ data: url })
      }
      // #endif

      // #ifndef MP-WEIXIN
      // #ifndef APP-PLUS
      // #ifndef H5
      uni.setClipboardData({ data: path })
      // #endif
      // #endif
      // #endif
    },
    
    // --- Points Logic ---
    async showPointsPopup() {
      this.pointsVisible = true
      this.pointsList = []
      this.pointsPage = 1
      this.pointsHasMore = true
      await this.loadMorePoints()
    },
    closePointsPopup() { this.pointsVisible = false },
    async loadMorePoints() {
      if (this.pointsLoading || !this.pointsHasMore) return
      this.pointsLoading = true
      try {
        const res = await getUserPoints(this.userId, this.pointsPage, 10)
        const list = res.list || res.data || []
        if (list.length < 10) this.pointsHasMore = false
        this.pointsList = [...this.pointsList, ...list]
        this.pointsPage++
      } catch (e) {
        this.pointsHasMore = false
      } finally {
        this.pointsLoading = false
      }
    },
    getActionText(action) {
      const map = {
        'login': '每日登录',
        'register': '注册赠送',
        'invite': '邀请好友',
        'consume': '消费抵扣',
        'refund': '退款返还',
        'activity': '活动奖励'
      }
      return map[action] || '积分变动'
    },
    
    // --- Coupons Logic ---
    async showCouponsPopup() {
      this.couponsVisible = true
      this.couponsTab = 1
      this.couponsList = []
      this.couponsPage = 1
      this.couponsHasMore = true
      await this.loadMoreCoupons()
    },
    closeCouponsPopup() { this.couponsVisible = false },
    switchCouponsTab(tab) {
      if (this.couponsTab === tab) return
      this.couponsTab = tab
      this.couponsList = []
      this.couponsPage = 1
      this.couponsHasMore = true
      this.loadMoreCoupons()
    },
    async loadMoreCoupons() {
      if (this.couponsLoading || !this.couponsHasMore) return
      this.couponsLoading = true
      try {
        // status: 0=unused, 1=used, 2=expired
        const statusMap = { 1: 0, 2: 1, 3: 2 }
        const res = await getUserCoupons(this.userId, statusMap[this.couponsTab], this.couponsPage)
        const list = res.list || res.data || []
        if (list.length < 10) this.couponsHasMore = false
        this.couponsList = [...this.couponsList, ...list]
        this.couponsPage++
      } catch (e) {
        this.couponsHasMore = false
      } finally {
        this.couponsLoading = false
      }
    },
    getCouponEmptyText() {
      if (this.couponsTab === 1) return '暂无可用优惠券'
      if (this.couponsTab === 2) return '暂无使用记录'
      return '暂无过期优惠券'
    },
    getCouponCardClass(item) {
      if (this.couponsTab === 2) return 'coupon-used'
      if (this.couponsTab === 3) return 'coupon-expired'
      return ''
    },
    formatCouponValue(val) {
      return (Number(val) / 100).toFixed(0)
    },
    formatCouponExpiry(item) {
      if (!item.end_time) return '长期有效'
      return `有效期至 ${this.formatDate(item.end_time)}`
    },
    getCouponUsedPercent(item) {
       if (!item.amount || !item.remaining) return 0
       const used = item.amount - item.remaining
       return Math.floor((used / item.amount) * 100)
    },
    
    // --- Item Cards Logic ---
    async showItemCardsPopup() {
      this.itemCardsVisible = true
      this.itemCardsTab = 0
      this.itemCardsList = []
      this.itemCardsLoading = true
      await this.loadItemCards()
    },
    closeItemCardsPopup() { this.itemCardsVisible = false },
    switchItemCardsTab(t) {
      if (this.itemCardsTab === t) return
      this.itemCardsTab = t
      this.loadItemCards()
    },
    async loadItemCards() {
      this.itemCardsLoading = true
      this.itemCardsList = []
      try {
        // Pass status: 0(tab)=>1(unused), 1(tab)=>2(used)
        const status = this.itemCardsTab === 0 ? 1 : 2
        const res = await getItemCards(this.userId, status) 
        
        // Robustly get the list (support res.list or res.data)
        let list = Array.isArray(res) ? res : (res.list || res.data || [])
        
        this.itemCardsList = list.map(item => {
          return {
            ...item,
            // Ensure count exists, default to 1 if undefined
            count: item.count ?? item.remaining ?? 1
          }
        })
        
        // For unused tab, filter out items with 0 count if any
        if (this.itemCardsTab === 0) {
           this.itemCardsList = this.itemCardsList.filter(i => i.count > 0)
        }
      } catch (e) {
        console.error('loadItemCards error:', e)
      } finally {
        this.itemCardsLoading = false
      }
    },
    getCardIcon(type) {
      if ((type || '').includes('透视')) return '👁️'
      if ((type || '').includes('提示')) return '💡'
      if ((type || '').includes('重置')) return '🔄'
      return '🃏'
    },
    
    // --- Tasks Logic ---
    async showTasksPopup() {
      this.tasksVisible = true
      this.tasksLoading = true
      try {
        const res = await getUserTasks(1, 20)
        this.tasksList = Array.isArray(res) ? res : (res.list || [])
      } catch (e) {
        this.tasksList = []
      } finally {
        this.recalcTasksStats()
        this.loadTasksProgress()
        this.tasksLoading = false
      }
    },
    closeTasksPopup() { this.tasksVisible = false },
    recalcTasksStats() {
      const list = Array.isArray(this.tasksList) ? this.tasksList : []
      let done = 0
      let ongoing = 0
      let waiting = 0
      for (let i = 0; i < list.length; i++) {
        const s = Number(list[i]?.status)
        if (s === 2) done += 1
        else if (s === 1) ongoing += 1
        else waiting += 1
      }
      this.tasksStats = { done, ongoing, waiting }
    },
    getOverallProgress() {
      const total = Array.isArray(this.tasksList) ? this.tasksList.length : 0
      if (!total) return 0
      return Math.floor((this.tasksStats.done / total) * 100)
    },
    getTaskClass(task) {
      const s = Number(task && task.status)
      if (s === 2) return 'task-done'
      if (s === 1) return 'task-ongoing'
      return 'task-waiting'
    },
    getTaskIcon(type) {
      const s = String(type || '').trim()
      if (!s) return '📌'
      if (s.includes('邀请') || s.includes('invite')) return '👥'
      if (s.includes('登录') || s.includes('login')) return '📅'
      if (s.includes('分享') || s.includes('share')) return '📣'
      if (s.includes('消费') || s.includes('consume')) return '🛒'
      if (s.includes('绑定') || s.includes('phone')) return '📱'
      if (s.includes('关注') || s.includes('follow')) return '⭐'
      return '📌'
    },
    getTaskStatusText(task) {
      const s = Number(task && task.status)
      if (s === 2) return '已完成'
      if (s === 1) return '进行中'
      return '未开始'
    },
    getTaskBtnText(task) {
      if (task.status === 2) return '已完成'
      if (task.status === 1) return '去完成'
      return '领取任务'
    },
    normalizeTaskProgress(res) {
      const raw = res && (res.data ?? res.result ?? res)
      if (!raw || typeof raw !== 'object') return null
      const current = raw.current ?? raw.progress ?? raw.done ?? raw.completed ?? raw.value ?? null
      const total = raw.total ?? raw.target ?? raw.required ?? raw.max ?? raw.goal ?? null
      const percentRaw = raw.percent ?? raw.percentage ?? raw.rate ?? raw.ratio ?? null
      let percent = null
      if (percentRaw !== null && percentRaw !== undefined && Number.isFinite(Number(percentRaw))) {
        const p = Number(percentRaw)
        percent = p <= 1 ? Math.round(p * 100) : Math.round(p)
      }
      if (percent === null && current !== null && total !== null) {
        const c = Number(current)
        const t = Number(total)
        if (Number.isFinite(c) && Number.isFinite(t) && t > 0) {
          percent = Math.round((c / t) * 100)
        }
      }
      if (percent === null) return null
      if (percent < 0) percent = 0
      if (percent > 100) percent = 100
      const currentNum = Number.isFinite(Number(current)) ? Number(current) : null
      const totalNum = Number.isFinite(Number(total)) ? Number(total) : null
      return { percent, current: currentNum, total: totalNum }
    },
    getTaskProgress(task) {
      const id = task && (task.id ?? task.task_id ?? task.taskId)
      const s = Number(task && task.status)
      if (s === 2) return { percent: 100, current: null, total: null }
      if (id === undefined || id === null || id === '') return { percent: 0, current: null, total: null }
      const p = this.tasksProgressMap[String(id)]
      if (p && Number.isFinite(Number(p.percent))) {
        const percent = Math.max(0, Math.min(100, Number(p.percent)))
        return { percent, current: p.current ?? null, total: p.total ?? null }
      }
      return { percent: 0, current: null, total: null }
    },
    getTaskProgressText(task) {
      const p = this.getTaskProgress(task)
      if (Number(task && task.status) === 2) return '进度 100%'
      if (p.current !== null && p.total !== null) return `进度 ${p.current}/${p.total}`
      return `进度 ${p.percent}%`
    },
    async loadTasksProgress() {
      const user_id = this.userId || uni.getStorageSync('user_id')
      const list = Array.isArray(this.tasksList) ? this.tasksList : []
      if (!user_id || list.length === 0) return
      const need = []
      for (let i = 0; i < list.length; i++) {
        const t = list[i]
        const id = t && (t.id ?? t.task_id ?? t.taskId)
        if (id === undefined || id === null || id === '') continue
        const key = String(id)
        if (this.tasksProgressMap[key]) continue
        need.push({ key, id })
      }
      if (need.length === 0) return
      const settled = await Promise.allSettled(need.map(it => getTaskProgress(it.id, user_id)))
      const next = { ...this.tasksProgressMap }
      for (let i = 0; i < settled.length; i++) {
        const it = need[i]
        const r = settled[i]
        if (r.status !== 'fulfilled') continue
        const normalized = this.normalizeTaskProgress(r.value)
        if (normalized) next[it.key] = normalized
      }
      this.tasksProgressMap = next
    },
    handleTask(task) {
      if (task.status === 2) return
      // Implement task action logic
      uni.showToast({ title: '任务进行中', icon: 'none' })
    },
    
    // --- Invites Logic ---
    async showInvitesPopup() {
      this.invitesVisible = true
      this.invitesLoading = true
      try {
        const res = await getInviteRecords(1, 20)
        this.invitesList = Array.isArray(res) ? res : (res.list || [])
      } catch (e) {
        this.invitesList = []
      } finally {
        this.invitesLoading = false
      }
    },
    closeInvitesPopup() { this.invitesVisible = false },
    getInviteRewardsTotal() {
      // Calculate total rewards from invitesList if available
      return '0'
    },
    
    // Utils
    toDate(input) {
      if (!input) return null
      if (input instanceof Date) return isNaN(input.getTime()) ? null : input
      if (typeof input === 'number') {
        if (!Number.isFinite(input)) return null
        const ms = input > 1e12 ? input : input * 1000
        const d = new Date(ms)
        return isNaN(d.getTime()) ? null : d
      }
      const s = String(input || '').trim()
      if (!s) return null
      if (/^\d+$/.test(s)) {
        const n = Number(s)
        return this.toDate(n)
      }
      const c1 = s
      const c2 = s.replace(/([+-]\d{2}):(\d{2})$/, '$1$2')
      const c3 = c2.replace(/-/g, '/').replace('T', ' ')
      const c4 = s.replace(/-/g, '/').replace('T', ' ')
      const candidates = [c1, c2, c3, c4]
      for (let i = 0; i < candidates.length; i++) {
        const d = new Date(candidates[i])
        if (!isNaN(d.getTime())) return d
      }
      return null
    },
    formatDate(ts) {
      const d = this.toDate(ts)
      if (!d) return ''
      return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`
    },
    formatDateTime(ts) {
      const d = this.toDate(ts)
      if (!d) return ''
      
      return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')} ${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`
    },
    formatDateTimeSeconds(ts) {
      const d = this.toDate(ts)
      if (!d) return ''

      return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')} ${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}:${String(d.getSeconds()).padStart(2,'0')}`
    }
  }
}
</script>

<style lang="scss">
/* ============================================
   个人中心 - 视觉升级 (SCSS Integration)
   ============================================ */

.page-container {
  min-height: 100vh;
  background-color: $bg-page;
  padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx); /* TabBar space */
  position: relative;
  overflow-x: hidden;
}

/* 背景装饰 - 漂浮光球 */
.bg-decoration {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: -100rpx; right: -100rpx;
    width: 600rpx; height: 600rpx;
    background: radial-gradient(circle, rgba($brand-primary, 0.15) 0%, transparent 70%);
    filter: blur(60rpx);
    border-radius: 50%;
    opacity: 0.8;
    animation: float 10s ease-in-out infinite;
  }

  &::after {
    content: '';
    position: absolute;
    top: 200rpx; left: -200rpx;
    width: 500rpx; height: 500rpx;
    background: radial-gradient(circle, rgba($brand-secondary, 0.1) 0%, transparent 70%);
    filter: blur(50rpx);
    border-radius: 50%;
    opacity: 0.6;
    animation: float 15s ease-in-out infinite reverse;
  }
}

@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30rpx, 50rpx); }
}

/* 通用毛玻璃卡片 */
.glass-card {
  background: $bg-glass;
  backdrop-filter: blur(20rpx);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: $shadow-card;
  border-radius: $radius-lg;
  position: relative;
  z-index: 1;
}

/* 头部区域 */
.header-section {
  padding: 0 $spacing-lg;
  padding-top: calc(env(safe-area-inset-top) + 20rpx);
  margin-bottom: $spacing-lg;
}

.user-info-card {
  padding: $spacing-xl;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.8));
  box-shadow: $shadow-float;
  border: 1px solid rgba(255,255,255,0.8);
}

.user-main {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
}

.avatar {
  width: 120rpx; height: 120rpx;
  background: $bg-card;
  border-radius: 50%;
  border: 4rpx solid $bg-card;
  box-shadow: $shadow-sm;
  margin-right: 24rpx;
}

.user-meta { flex: 1; }

.name-row {
  display: flex; align-items: center; margin-bottom: 12rpx;
}
.nickname {
  font-size: $font-xl; font-weight: 900; color: $text-main;
  margin-right: 16rpx;
}

.level-badge {
  background: linear-gradient(90deg, #333, #555);
  color: $accent-gold;
  font-size: $font-xs;
  padding: 4rpx 12rpx;
  border-radius: 100rpx;
  display: flex; align-items: center;
  box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.2);
}
.level-icon { width: 24rpx; height: 24rpx; margin-right: 4rpx; }

.userid { font-size: $font-sm; color: $text-tertiary; font-family: monospace; }

.join-btn {
  background: $text-main;
  color: $text-inverse;
  padding: 12rpx 32rpx;
  border-radius: 100rpx;
  font-size: 26rpx;
  font-weight: 700;
  box-shadow: $shadow-sm;
}

/* 进度条 */
.progress-container {
  width: 100%;
}
.progress-bar {
  height: 8rpx;
  background: $border-color-light;
  border-radius: 100rpx;
  overflow: hidden;
  margin-bottom: 6rpx;
}
.progress-fill {
  height: 100%;
  background: $gradient-brand;
  border-radius: 100rpx;
}
.progress-text {
  font-size: $font-xs; color: $text-sub;
}

/* 数据统计 */
.stats-row {
  display: flex; align-items: center; justify-content: space-around;
  padding-top: 20rpx;
  border-top: 1px solid rgba(0,0,0,0.03);
}
.stat-item {
  display: flex; flex-direction: column; align-items: center;
  flex: 1;
  &:active { opacity: 0.7; }
}
.stat-num {
  font-size: $font-xl; font-weight: 900; color: $text-main;
  font-family: 'DIN Alternate', sans-serif;
  margin-bottom: 4rpx;
}
.stat-label { font-size: $font-sm; color: $text-sub; }
.stat-divider { width: 1px; height: 30rpx; background: $border-color-light; }

/* 邀请Banner */
.invite-banner {
  margin: 0 $spacing-lg $spacing-lg;
  background: linear-gradient(135deg, $uni-bg-color-hover 0%, $bg-card 100%);
  border: 1px solid rgba($brand-primary, 0.1);
  padding: 30rpx;
  display: flex; align-items: center; justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.invite-content { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; justify-content: space-between; }
.invite-text-group { display: flex; flex-direction: column; }
.invite-title-row { display: flex; align-items: center; margin-bottom: 8rpx; }
.invite-tag { 
  background: $accent-red; color: $text-inverse; font-size: 18rpx; padding: 2rpx 8rpx; border-radius: 4rpx; margin-right: 12rpx;
}
.invite-title { font-size: 30rpx; font-weight: 800; color: #5D3A20; }
.invite-desc { font-size: $font-xs; color: #9E7D60; }
.invite-action-btn {
  background: $gradient-brand;
  color: $text-inverse;
  padding: 10rpx 24rpx;
  border-radius: 100rpx;
  font-size: $font-sm;
  font-weight: 700;
  display: flex; align-items: center;
  box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.2);
}
.invite-share-btn {
  line-height: 1;
  margin: 0;
}
.invite-share-btn::after { border: none; }
.invite-share-icon {
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
  border-radius: 8rpx;
}
.invite-arrow { font-size: 28rpx; margin-left: 4rpx; line-height: 1; }
.invite-bg-icon {
  position: absolute; right: -20rpx; bottom: -20rpx;
  width: 140rpx; height: 140rpx;
  opacity: 0.1;
  transform: rotate(-15deg);
}

/* 常用功能 & 订单 */
.section-card {
  margin: 0 $spacing-lg $spacing-lg;
  padding: 30rpx;
}
.section-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 30rpx;
}
.section-title { font-size: 30rpx; font-weight: 800; color: $text-main; }
.section-more { font-size: $font-sm; color: $text-sub; }

.grid-row, .grid-menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
}
.grid-item, .menu-item {
  display: flex; flex-direction: column; align-items: center;
  position: relative;
  &:active { transform: scale(0.96); transition: 0.1s; }
}
.icon-wrapper, .menu-icon-box {
  width: 80rpx; height: 80rpx;
  background: $bg-secondary;
  border-radius: 24rpx;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12rpx;
  transition: all 0.3s;
}
.grid-item:active .icon-wrapper, .menu-item:active .menu-icon-box {
  background: $uni-bg-color-hover;
}
.grid-icon-img, .menu-icon-img { width: 44rpx; height: 44rpx; }
.grid-label, .menu-label { font-size: $font-sm; color: $text-main; }

/* 弹窗通用样式 */
.popup-mask {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(5rpx);
  z-index: 999;
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.2s;
}
.popup-content {
  width: 640rpx;
  max-height: 80vh;
  background: $bg-card;
  border-radius: $radius-xl;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: zoomIn 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.popup-header {
  padding: 30rpx;
  text-align: center;
  position: relative;
  border-bottom: 1px solid $border-color-light;
}
.popup-title { font-size: $font-lg; font-weight: 800; }
.close-btn {
  position: absolute; right: 30rpx; top: 30rpx;
  font-size: 40rpx; color: $text-tertiary;
  line-height: 1;
  padding: 10rpx;
}

.status-text, .empty-state {
  padding: 60rpx; text-align: center; color: $text-sub; font-size: 26rpx;
}
.empty-icon { font-size: 80rpx; display: block; margin-bottom: 20rpx; }

.no-more {
  text-align: center;
  font-size: 24rpx;
  color: $text-tertiary;
  padding: 30rpx 0;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .text {
    margin: 0 16rpx;
  }
  
  .divider {
    width: 60rpx;
    height: 1px;
    background: #e0e0e0;
  }
}

/* 弹窗 Tab 栏 */
.popup-tabs {
  display: flex;
  justify-content: space-around;
  padding: 0 20rpx;
  background: #fff;
  border-bottom: 1rpx solid $border-color-light;
  margin-bottom: 20rpx;
}
.popup-tab {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: $text-sub;
  padding: 24rpx 0;
  position: relative;
  font-weight: 500;
  transition: all 0.2s;
}
.popup-tab.active {
  color: $text-main;
  font-weight: 700;
}
.popup-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 6rpx;
  background: $brand-primary;
  border-radius: 6rpx;
}

/* 列表滚动区 */
.points-list, .coupon-scroll, .item-cards-scroll, .task-list-scroll, .invite-list-scroll {
  flex: 1; min-height: 400rpx; background: $bg-grey; padding: 20rpx;
}

/* 积分明细 */
.point-item {
  background: $bg-card; padding: 24rpx; border-radius: $radius-md; margin-bottom: 20rpx;
  display: flex; justify-content: space-between; align-items: center;
  box-shadow: $shadow-sm;
}
.point-desc { font-size: $font-md; color: $text-main; margin-bottom: 6rpx; display: block; }
.point-time { font-size: $font-xs; color: $text-tertiary; }
.point-amount { font-size: $font-lg; font-weight: 700; color: $text-main; }
.point-amount.positive { color: $brand-primary; }
.point-amount.negative { color: $text-main; }

/* 优惠券 V2样式 */
.coupon-ticket-v2 {
  background: #fff; border-radius: 16rpx; margin-bottom: 20rpx;
  display: flex; overflow: hidden; box-shadow: $shadow-sm;
  position: relative;
}
.coupon-left-v2 {
  width: 180rpx; background: linear-gradient(135deg, #FFF5E6, #fff);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20rpx;
  position: relative;
}
.coupon-remaining { color: $brand-primary; font-weight: 900; }
.coupon-symbol { font-size: 24rpx; }
.coupon-amount-num { font-size: 56rpx; line-height: 1; }
.coupon-label { font-size: 20rpx; color: $brand-primary; margin-top: 8rpx; border: 1px solid $brand-primary; padding: 2rpx 8rpx; border-radius: 6rpx; }

/* 优惠券分割线 */
.coupon-divider-v2 {
  width: 30rpx;
  position: relative;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.divider-notch {
  width: 24rpx;
  height: 24rpx;
  background: $bg-grey; /* Match scroll container bg */
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.divider-notch.top { top: -12rpx; }
.divider-notch.bottom { bottom: -12rpx; }
.divider-dash {
  width: 0;
  height: 80%;
  border-left: 2rpx dashed #eee;
}

.coupon-right-v2 { 
  flex: 1; 
  padding: 24rpx; 
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
  overflow: hidden; /* Ensure content stays inside */
}
.coupon-name-v2 { 
  font-size: $font-md; 
  font-weight: 700; 
  color: $text-main; 
  margin-bottom: 8rpx; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}
.coupon-original { font-size: 20rpx; color: $text-tertiary; text-decoration: line-through; margin-left: 8rpx; display: inline-block; }
.coupon-rules { font-size: $font-xs; color: $text-sub; margin-bottom: 16rpx; }

/* 优惠券进度条 */
.coupon-progress-wrap {
  margin-bottom: 12rpx;
}
.coupon-progress-bar {
  height: 6rpx;
  background: $bg-secondary;
  border-radius: 100rpx;
  overflow: hidden;
  margin-bottom: 4rpx;
}
.coupon-progress-fill {
  height: 100%;
  background: $brand-primary;
  border-radius: 100rpx;
}
.coupon-progress-text {
  font-size: 18rpx;
  color: $text-tertiary;
}

.coupon-footer-row { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.coupon-footer-left { display: flex; flex-direction: column; }
.coupon-expire-v2 { font-size: 20rpx; color: $text-tertiary; }
.use-btn-v2 { 
  background: $brand-primary; 
  color: #fff; 
  font-size: 22rpx; 
  padding: 8rpx 24rpx; 
  border-radius: 100rpx; 
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: normal;
}
.status-tag { font-size: 22rpx; color: $text-tertiary; background: #F5F5F5; padding: 4rpx 12rpx; border-radius: 6rpx; }
.coupon-used-time { font-size: 18rpx; color: $text-tertiary; margin-top: 4rpx; text-align: left; }

/* 过期/已使用状态 */
.coupon-used .coupon-left-v2, .coupon-expired .coupon-left-v2 {
  background: #f9f9f9;
}
.coupon-used .coupon-remaining, .coupon-expired .coupon-remaining,
.coupon-used .coupon-label, .coupon-expired .coupon-label {
  color: $text-tertiary;
  border-color: $text-tertiary;
}
.coupon-used .coupon-name-v2, .coupon-expired .coupon-name-v2 {
  color: $text-sub;
}

/* 道具卡 */
.item-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20rpx; }
.item-card {
  background: #fff; border-radius: 20rpx; padding: 24rpx;
  position: relative; overflow: hidden; box-shadow: $shadow-sm;
  border: 1px solid transparent;
}
.item-card:active { transform: scale(0.98); }
.card-icon-wrap { width: 80rpx; height: 80rpx; background: #F0F8FF; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 16rpx; }
.card-icon { font-size: 40rpx; }
.card-name { font-size: $font-md; font-weight: 700; margin-bottom: 8rpx; display: block; }
.card-desc { font-size: $font-xs; color: $text-sub; display: block; margin-bottom: 16rpx; line-height: 1.4; }
.card-count-badge { position: absolute; top: 20rpx; right: 20rpx; background: rgba(0,0,0,0.05); padding: 4rpx 12rpx; border-radius: 100rpx; }
.count-num { font-size: 22rpx; font-weight: 700; color: $text-main; }

/* 道具卡已使用状态 */
.item-card.used {
  background: #fafafa;
}
.item-card.used .card-name {
  color: $text-sub;
}
.item-card.used .card-desc {
  color: $text-tertiary;
}
.item-card.used .card-icon-wrap {
  background: #f0f0f0;
  opacity: 0.6;
}
.card-used-badge {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  background: #eee;
  padding: 4rpx 12rpx;
  border-radius: 100rpx;
}
.used-text {
  font-size: 22rpx;
  color: $text-tertiary;
}
.card-use-time {
  font-size: 18rpx;
  color: $text-tertiary;
  margin-top: 12rpx;
  display: block;
  border-top: 1rpx dashed #eee;
  padding-top: 8rpx;
}

/* 任务中心弹窗 */
.task-center-popup { background: $bg-page; }
.task-hero {
  margin: 20rpx;
  border-radius: 24rpx;
  overflow: hidden;
  background: $gradient-brand;
  box-shadow: $shadow-warm;
}
.hero-top {
  padding: 28rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20rpx;
}
.hero-left { flex: 1; }
.hero-title { font-size: 22rpx; color: rgba(255,255,255,0.9); display: block; }
.hero-percent-row { display: flex; align-items: baseline; margin-top: 10rpx; }
.hero-percent { font-size: 54rpx; font-weight: 900; color: #fff; line-height: 1; }
.hero-percent-unit { font-size: 22rpx; font-weight: 700; color: rgba(255,255,255,0.95); margin-left: 8rpx; }
.hero-progress {
  margin-top: 16rpx;
  height: 10rpx;
  background: rgba(255,255,255,0.25);
  border-radius: 100rpx;
  overflow: hidden;
}
.hero-progress-fill {
  height: 100%;
  background: rgba(255,255,255,0.95);
  border-radius: 100rpx;
}
.hero-right {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
  align-items: flex-end;
}
.hero-chip {
  min-width: 140rpx;
  padding: 10rpx 14rpx;
  border-radius: 18rpx;
  background: rgba(255,255,255,0.16);
  border: 1rpx solid rgba(255,255,255,0.22);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10rpx;
}
.chip-num { font-size: 28rpx; font-weight: 900; color: #fff; }
.chip-label { font-size: 20rpx; color: rgba(255,255,255,0.9); }
.task-skeleton-list { padding: 10rpx 0; }
.task-skeleton {
  background: $bg-card;
  border-radius: 20rpx;
  padding: 24rpx;
  margin: 0 20rpx 16rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: $shadow-sm;
}
.sk-left { display: flex; align-items: center; gap: 16rpx; flex: 1; }
.sk-icon { width: 68rpx; height: 68rpx; border-radius: 18rpx; background: rgba(0,0,0,0.06); }
.sk-text { flex: 1; display: flex; flex-direction: column; gap: 12rpx; }
.sk-line { height: 18rpx; border-radius: 10rpx; background: rgba(0,0,0,0.06); }
.sk-line-title { width: 58%; }
.sk-line-desc { width: 78%; }
.sk-btn { width: 140rpx; height: 56rpx; border-radius: 100rpx; background: rgba(0,0,0,0.06); }

.task-card {
  background: $bg-card;
  margin: 0 20rpx 16rpx;
  padding: 24rpx;
  border-radius: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: $shadow-sm;
  border: 1rpx solid rgba(0,0,0,0.02);
}
.task-card:active { transform: scale(0.99); }
.task-card-left { display: flex; align-items: flex-start; gap: 16rpx; flex: 1; min-width: 0; }
.task-icon-bubble {
  width: 72rpx;
  height: 72rpx;
  border-radius: 22rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba($brand-primary, 0.12);
}
.task-ongoing .task-icon-bubble { background: rgba($brand-primary, 0.12); }
.task-waiting .task-icon-bubble { background: rgba(0,0,0,0.06); }
.task-done .task-icon-bubble { background: rgba(16,185,129,0.12); }
.task-icon { font-size: 36rpx; }
.task-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.task-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12rpx; }
.task-name { font-size: $font-md; font-weight: 800; color: $text-main; max-width: 420rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-status-tag {
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 100rpx;
  flex-shrink: 0;
}
.task-ongoing .task-status-tag { background: rgba($brand-primary, 0.12); color: $brand-primary; }
.task-waiting .task-status-tag { background: rgba(0,0,0,0.06); color: $text-sub; }
.task-done .task-status-tag { background: rgba(16,185,129,0.12); color: #10B981; }
.task-desc {
  font-size: $font-xs;
  color: $text-sub;
  margin-top: 8rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.task-meta { margin-top: 10rpx; display: flex; gap: 10rpx; flex-wrap: wrap; }
.task-progress-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}
.task-progress-bar {
  height: 8rpx;
  background: rgba(0,0,0,0.06);
  border-radius: 100rpx;
  overflow: hidden;
}
.task-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 100rpx;
  background: rgba($brand-primary, 0.9);
}
.task-progress-fill.task-done { background: rgba(16,185,129,0.9); }
.task-progress-fill.task-waiting { background: rgba($brand-primary, 0.4); }
.task-progress-text {
  font-size: 20rpx;
  color: $text-tertiary;
}
.task-reward-chip {
  padding: 4rpx 10rpx;
  border-radius: 10rpx;
  background: #FFF7E6;
  color: #D97706;
  display: flex;
  align-items: center;
  gap: 6rpx;
}
.reward-icon { font-size: 18rpx; }
.reward-text { font-size: 20rpx; font-weight: 700; }
.task-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10rpx; margin-left: 16rpx; }
.task-action-btn {
  min-width: 140rpx;
  text-align: center;
  padding: 12rpx 18rpx;
  border-radius: 100rpx;
  font-size: 24rpx;
  font-weight: 700;
  background: $gradient-brand;
  color: #fff;
  box-shadow: $shadow-warm;
}
.task-waiting .task-action-btn { background: rgba($brand-primary, 0.12); color: $brand-primary; box-shadow: none; }
.task-done .task-action-btn { background: #F2F2F2; color: $text-tertiary; box-shadow: none; }

/* 邀请记录 */
.invite-summary { display: flex; padding: 30rpx; background: #fff; margin-bottom: 20rpx; }
.summary-item { flex: 1; display: flex; flex-direction: column; align-items: center; border-right: 1px solid #eee; }
.summary-item:last-child { border: none; }
.summary-num { font-size: 36rpx; font-weight: 900; color: $brand-primary; }
.summary-label { font-size: 22rpx; color: $text-sub; }
.invite-item {
  background: #fff; padding: 20rpx; border-radius: 12rpx; margin-bottom: 16rpx;
  display: flex; align-items: center;
}
.invite-avatar { width: 80rpx; height: 80rpx; border-radius: 50%; margin-right: 20rpx; background: #f0f0f0; }
.invite-info { flex: 1; display: flex; flex-direction: column; }
.invite-name { font-size: $font-md; font-weight: 700; }
.invite-time { font-size: 22rpx; color: $text-tertiary; margin-top: 4rpx; }
.invite-status { font-size: 24rpx; color: #10B981; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes zoomIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
</style>
