GuangYuYuan-app/src/points/components/task-list/task-list.vue

<template>
  <view class="task-list-container">
    <view class="task-list-header">
      <text class="task-list-title">做任务赚积分</text>
    </view>
    <view class="task-list">
      <view 
        v-for="(task, index) in tasks" 
        :key="index"
        class="task-item"
        @click="handleTask(task, index)"
      >
        <view class="task-item-left">
          <view class="task-icon" :class="task.iconClass">
            <ImageItem src="/static/points/task_order.png"/>
<!--            <ImageItem src="/static/points/task_shop.png"/>-->
<!--            <ImageItem src="/static/points/task_trend.png"/>-->
<!--            <ImageItem src="/static/points/task_wx.png"/>-->
<!--            <ImageItem src="/static/points/task_account.png"/>-->
          </view>

          <view class="task-info">
            <view class="task-name">{{ task.name }}</view>
            <view class="task-reward">
              <ImageItem src="/static/points/point.png"/>
              <text>+{{ task.reward }}</text>
            </view>
          </view>
        </view>
        <view class="task-item-right">
          <button class="task-btn" @click.stop="handleTask(task, index)">
            {{ task.status === 'completed' ? '已完成' : '去完成' }}
          </button>
        </view>
      </view>
    </view>
    <view class="more-tasks" @click="handleMoreTasks">
      赚更多积分 >
    </view>
  </view>
</template>

<script>
import ImageItem from "@/components/swiper/components/image.vue";

export default {
  components: {ImageItem},
  data() {
    return {
      tasks: [
        {
          id: 1,
          name: '完成一次订单',
          reward: 20,
          status: 'pending',
          icon: 'order',
          iconClass: 'order-icon'
        },
        {
          id: 2,
          name: '浏览动态',
          reward: 20,
          status: 'pending',
          icon: 'browse',
          iconClass: 'browse-icon'
        }
      ]
    }
  },
  methods: {
    handleTask(task, index) {
      if (task.status !== 'completed') {
        this.$emit('task', task)
      }
    },
    handleMoreTasks() {
      this.$emit('moreTasks')
    }
  }
}
</script>

<style lang="scss" scoped>
.task-list-container {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  
  .task-list-header {
    margin-bottom: 26rpx;
    
    .task-list-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
  }
  
  .task-list {
    .task-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 32rpx;
      .task-item-left {
        display: flex;
        align-items: center;
        
        .task-icon {
          width: 72rpx;
          height: 72rpx;
          margin-right: 18rpx;
          image{
            width: 72rpx;
            height: 72rpx;
          }
        }
        
        .task-info {
          .task-name {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #333333;
            margin-bottom: 12rpx;
          }
          
          .task-reward {
            display: inline-flex;
            height: 32rpx;
            background: #FBF2E1;
            border-radius: 22rpx;
            padding-right: 12rpx;
            image{
              width: 32rpx;
              height: 32rpx;
              margin-right: 4rpx;
            }
            text{
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 24rpx;
              color: #FF9F00;
              line-height: 32rpx;
            }
          }
        }
      }
      
      .task-item-right {
        .task-btn {
          height: 48rpx;
          background: #03C1B8;
          border-radius: 98rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #FFFFFF;
          line-height: 48rpx;
        }
      }
    }
  }
  
  .more-tasks {
    text-align: center;
    font-weight: 500;
    font-size: 28rpx;
    color: #999999;
  }
}
</style>