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

<template>
  <view class="welfare-page">
    <!-- 签到区域 -->
    <view class="signin-section">
      <text class="title">每日签到</text>
      <view class="signin-grid">
        <view 
          v-for="(day, index) in 7" 
          :key="day" 
          :class="['day', { signed: index < signedDays, today: index === currentDay }]"
          @click="signIn(index)"
        >
          <text>第{{ day }}天</text>
          <text class="reward">+{{ calculateReward(index) }}金币</text>
        </view>
      </view>
      <text class="tip">已连续签到 {{ signedDays }} 天</text>
    </view>
    
    <!-- 任务中心 -->
    <view class="tasks-section">
      <text class="title">每日任务</text>
      <view class="task-list">
        <view v-for="task in dailyTasks" :key="task.id" class="task-item">
          <view class="task-info">
            <text class="task-name">{{ task.name }}</text>
            <text class="task-reward">+{{ task.reward }}金币</text>
          </view>
          <button 
            :class="['task-btn', { disabled: task.completed }]"
            @click="completeTask(task)"
          >
            {{ task.completed ? '已完成' : '去完成' }}
          </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>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const signedDays = ref(3)
const currentDay = ref(3) // 0-6 表示周一到周日

// 每日任务
const dailyTasks = ref([
  { id: 1, name: '阅读30分钟', reward: 50, completed: false },
  { id: 2, name: '分享给好友', reward: 30, completed: true },
  { id: 3, name: '评论本章节', reward: 20, completed: false },
  { id: 4, name: '完善个人资料', reward: 10, completed: false }
])

// 合作平台
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 signIn = (dayIndex) => {
  if (dayIndex !== currentDay.value) return
  if (signedDays.value > currentDay.value) return
  
  signedDays.value++
  uni.showToast({ title: `签到成功！获得${calculateReward(dayIndex)}金币` })
}

// 计算签到奖励
const calculateReward = (day) => {
  const baseReward = 10
  return baseReward * (day + 1)
}

// 完成任务
const completeTask = (task) => {
  if (task.completed) return
  
  task.completed = true
  uni.showToast({ title: `任务完成！获得${task.reward}金币` })
}

// 跳转合作平台
const goPartnerTask = (partner) => {
  uni.navigateTo({
    url: `/pages/webview/webview?url=${encodeURIComponent(partner.url)}`
  })
}
</script>

<style scoped>
.welfare-page {
  padding: 20px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  display: block;
}

.signin-section {
  margin-bottom: 25px;
}

.signin-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.day {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 8px 5px;
  text-align: center;
  font-size: 12px;
  
  &.signed {
    background-color: #e6fffb;
    border-color: #36cfc9;
  }
  
  &.today {
    background-color: #fff7e6;
    border-color: #ffc53d;
  }
}

.reward {
  display: block;
  color: #faad14;
  font-weight: bold;
}

.tip {
  display: block;
  margin-top: 10px;
  color: #8c8c8c;
  font-size: 12px;
}

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

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

.task-info {
  flex: 1;
}

.task-name {
  display: block;
  font-size: 14px;
}

.task-reward {
  font-size: 12px;
  color: #faad14;
}

.task-btn {
  margin: 0;
  padding: 0 10px;
  height: 28px;
  line-height: 28px;
  font-size: 12px;
  background-color: #1890ff;
  color: white;
  
  &.disabled {
    background-color: #bfbfbf;
  }
}

.partner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.partner-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.partner-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  margin-bottom: 5px;
}

.partner-name {
  font-size: 12px;
}
</style>