novel-app/RuoYi-App/pages/welfare/index.vue

<template>
  <scroll-view scroll-y class="welfare-page">
    <!-- 用户信息栏 -->
    <view class="user-header">
      <image :src="userAvatar" class="avatar" />
      <view class="info">
        <text class="name">{{ userName }}</text>
        <text class="coins">金币: {{ coins }}</text>
      </view>
      <view class="vip-tag" v-if="isVIP">
        <uni-icons type="crown" size="16" color="#ffc53d"></uni-icons>
        <text>VIP会员</text>
      </view>
    </view>
    <!-- 签到区域 -->
    <view class="signin-section">
      <view class="sign-header">
        <text class="title">每日签到</text>
        <text class="subtitle">已连续签到 {{ signedDays }} 天</text>
      </view>
      
      <view class="sign-calendar">
        <view 
          v-for="day in 7" 
          :key="day"
          :class="[
            'sign-day',
            { 
              'signed': day <= signedDays,
              'today': day === currentDay && !todaySigned,
              'active': day === currentDay && todaySigned
            }
          ]"
          @click="handleSign(day)"
        >
          <text class="day-label">第{{ day }}天</text>
          <text class="reward">+{{ getReward(day) }}金币</text>
        </view>
      </view>
      <text class="tip">已连续签到 {{ signedDays }} 天</text>
    </view>
    
    <!-- 合作任务 -->
    <PartnerTask />
    
    <!-- 任务中心 -->
    <view class="task-center">
      <view class="section-header">
        <text class="title">每日任务</text>
        <text class="more">查看更多</text>
      </view>
      
      <view class="task-list">
        <view 
          v-for="task in dailyTasks"
          :key="task.id"
          class="task-item"
        >
          <view class="task-info">
            <uni-icons :type="task.icon" size="20" :color="task.completed ? '#52c41a' : '#666'"></uni-icons>
            <text class="name">{{ task.name }}</text>
          </view>
          <button 
            class="action-btn"
            :class="{ completed: task.completed }"
            @click="completeTask(task)"
          >
            {{ task.completed ? '已完成' : '+'+task.reward+'金币' }}
          </button>
        </view>
      </view>
    </view>
    
    <!-- 外部合作任务 -->
    <view class="partner-tasks">
      <text class="title">合作任务</text>
      <view class="partner-grid">
        <view 
          v-for="partner in partners" 
          :key="partner.id" 
          class="partner-item"
          @click="goPartnerTask(partner)"
        >
          <image :src="partner.icon" class="partner-icon" />
          <text class="partner-name">{{ partner.name }}</text>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useSignSystem } from '@/utils/signUtils'
import PartnerTask from '@/components/PartnerTask.vue'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const { signedDays, todaySigned, signRewards, loadSignStatus, doSign } = useSignSystem()

// 用户数据
const userName = ref('哎呀用户')
const userAvatar = ref('/static/avatar/default.png')
const coins = ref(350)
const isVIP = ref(true)

// 每日任务
const dailyTasks = ref([
  { id: 1, name: '阅读30分钟', icon: 'eye', reward: 50, completed: false },
  { id: 2, name: '分享给好友', icon: 'redo', reward: 30, completed: true },
  { id: 3, name: '评论本章节', icon: 'chat', reward: 20, completed: false },
  { id: 4, name: '完善个人资料', icon: 'person', reward: 10, completed: false }
])
// 当前星期几（0-6）
const currentDay = ref(new Date().getDay() + 1)

// 获取每日奖励
const getReward = (day) => {
  const reward = signRewards.value.find(r => r.day === day)
  return reward ? reward.reward : 10 + day * 5
}
// 合作平台
const partners = ref([
  { id: 1, name: '百度地图', icon: '/static/partners/baidu.png', url: 'https://map.baidu.com' },
  { id: 2, name: '快手', icon: '/static/partners/kuaishou.png', url: 'https://www.kuaishou.com' },
  { id: 3, name: '京东金融', icon: '/static/partners/jd.png', url: 'https://jr.jd.com' },
  { id: 4, name: '饿了么', icon: '/static/partners/eleme.png', url: 'https://www.ele.me' }
])

// 处理签到
const handleSign = async (day) => {
  if (day !== currentDay.value) {
    uni.showToast({ title: '请先完成今日签到', icon: 'none' })
    return
  }
  
  if (todaySigned.value) {
    uni.showToast({ title: '今日已签到', icon: 'none' })
    return
  }
  
  const reward = await doSign()
  if (reward) {
    coins.value += reward
  }
}

// 完成任务
const completeTask = (task) => {
  if (task.completed) return
  task.completed = true
  coins.value += task.reward
  uni.showToast({ title: `任务完成！获得${task.reward}金币`, icon: 'success' })
}
// 初始化
onMounted(async () => {
  await loadSignStatus()
  
  // 加载用户信息
  if (userStore.userInfo) {
    userName.value = userStore.userInfo.nickname || '哎呀用户'
    userAvatar.value = userStore.userInfo.avatar || '/static/avatar/default.png'
    coins.value = userStore.userInfo.coins || 0
    isVIP.value = userStore.isVIP
  }
})
// 跳转合作平台
const goPartnerTask = (partner) => {
  uni.navigateTo({
    url: `/pages/webview/webview?url=${encodeURIComponent(partner.url)}`
  })
}
</script>

<style scoped>
.welfare-page {
  height: 100vh;
  background-color: var(--bg-color);
  padding: 20px;
  box-sizing: border-box;
}

.user-header {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 15px;
}

.info {
  flex: 1;
}

.name {
  font-size: 18px;
  font-weight: bold;
  display: block;
}

.coins {
  font-size: 14px;
  color: #faad14;
  display: block;
  margin-top: 5px;
}

.vip-tag {
  background: linear-gradient(135deg, #ffd666 0%, #ffc53d 100%);
  color: #1a3353;
  padding: 4px 10px;
  border-radius: 15px;
  font-size: 12px;
  display: flex;
  align-items: center;
}

.sign-card {
  background-color: var(--card-bg);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
}

.sign-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.subtitle {
  font-size: 14px;
  color: #666;
}

.sign-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.sign-day {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px 5px;
  text-align: center;
  background-color: #fafafa;
}

.sign-day.signed {
  background-color: #e6fffb;
  border-color: #36cfc9;
}

.sign-day.today {
  background-color: #fff7e6;
  border-color: #ffc53d;
}

.sign-day.active {
  background-color: #fff1b8;
  border-color: #ffc53d;
}

.day-label {
  font-size: 13px;
  display: block;
}

.reward {
  font-size: 12px;
  color: #faad14;
  font-weight: bold;
  display: block;
  margin-top: 3px;
}

.task-center {
  background-color: var(--card-bg);
  border-radius: 16px;
  padding: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.more {
  font-size: 14px;
  color: var(--primary-color);
}

.task-list {
  border-top: 1px solid #f0f0f0;
}

.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.task-info {
  display: flex;
  align-items: center;
}

.name {
  font-size: 15px;
  margin-left: 10px;
}

.action-btn {
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 16px;
  height: 30px;
  line-height: 30px;
  padding: 0 12px;
  font-size: 13px;
}

.action-btn.completed {
  background-color: #bfbfbf;
}
</style>