novel-app/RuoYi-App/components/PartnerTask.vue

<template>
  <view class="partner-task">
    <view class="header">
      <text class="title">合作任务</text>
      <text class="subtitle">完成任务赚金币</text>
    </view>
    
    <scroll-view scroll-x class="task-scroll">
      <view 
        v-for="task in tasks" 
        :key="task.id"
        class="task-card"
        @click="handleTask(task)"
      >
        <image :src="task.logo" class="logo" />
        <view class="info">
          <text class="name">{{ task.name }}</text>
          <text class="reward">+{{ task.reward }}金币</text>
        </view>
        <button class="action-btn">{{ task.completed ? '已完成' : '去完成' }}</button>
      </view>
    </scroll-view>
  </view>
</template>

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

// 合作任务数据
const tasks = ref([
  {
    id: 1,
    name: '百度地图签到',
    logo: '/static/partners/baidu.png',
    reward: 30,
    completed: false,
    handler: () => {
      uni.navigateToMiniProgram({
        appId: 'wx4f1b24bdc99fa23e',
        path: 'pages/index/index',
        success: () => console.log('跳转百度地图成功')
      })
    }
  },
  {
    id: 2,
    name: '快手看视频',
    logo: '/static/partners/kuaishou.png',
    reward: 50,
    completed: false,
    handler: () => {
      uni.navigateToMiniProgram({
        appId: 'wx9188fa3c6a2d1e87',
        path: 'pages/index/index',
        success: () => console.log('跳转快手成功')
      })
    }
  },
  {
    id: 3,
    name: '京东金融',
    logo: '/static/partners/jd.png',
    reward: 80,
    completed: true,
    handler: () => {
      uni.navigateToMiniProgram({
        appId: 'wx91d27dbf599dff74',
        path: 'pages/index/index',
        success: () => console.log('跳转京东金融成功')
      })
    }
  },
  {
    id: 4,
    name: '美团外卖',
    logo: '/static/partners/meituan.png',
    reward: 100,
    completed: false,
    handler: () => {
      uni.navigateToMiniProgram({
        appId: 'wxde8ac0a21135c07d',
        path: 'pages/index/index',
        success: () => console.log('跳转美团成功')
      })
    }
  }
])

// 处理任务点击
const handleTask = (task) => {
  if (task.completed) {
    uni.showToast({ title: '任务已完成', icon: 'none' })
    return
  }
  
  // 执行任务处理逻辑
  task.handler()
  
  // 模拟完成任务
  setTimeout(() => {
    task.completed = true
    uni.showToast({ title: `任务完成！获得${task.reward}金币`, icon: 'success' })
  }, 2000)
}
</script>

<style scoped>
.partner-task {
  background-color: var(--card-bg);
  border-radius: 16px;
  padding: 20px;
  margin: 20px 0;
}

.header {
  margin-bottom: 15px;
}

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

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

.task-scroll {
  white-space: nowrap;
}

.task-card {
  display: inline-block;
  width: 280px;
  background: linear-gradient(135deg, #f9f9f9 0%, #ffffff 100%);
  border-radius: 12px;
  padding: 15px;
  margin-right: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.logo {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  margin-right: 12px;
  vertical-align: middle;
}

.info {
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 120px);
}

.name {
  font-size: 16px;
  font-weight: 500;
  display: block;
}

.reward {
  font-size: 14px;
  color: #f5222d;
  display: block;
}

.action-btn {
  display: inline-block;
  vertical-align: middle;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 16px;
  height: 36px;
  line-height: 36px;
  padding: 0 15px;
  font-size: 14px;
  margin-left: 10px;
}
</style>