crowd-test-service-frontend/src/components/task/TaskList.vue

<template>
  <div>
    <!-- <div class="title h1">我接收的任务</div> -->
    <el-tabs tabPosition="top" type="card" >
      <el-tab-pane label="未完成任务">
        <task-item v-for="(item,index) in list" :key="index" :taskId="item.id"/>
      </el-tab-pane>
      <el-tab-pane label="已完成任务">
        <task-item v-for="(item,index) in list2" :key="index" :taskId="item.id"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import TaskItem from "@/components/commons/TaskItem";
export default {
  name: "TaskList",
  components: { TaskItem },
  data() {
    return {
      list: [
        {
          id: 0,
          title: "发送群文件测试",
          platform: [0, 1],
          description: "任务描述文字xxxx",
          price: "30",
          业务类型: 1,
          status: 0
        },
        {
          id: 1,
          title: "多人聊天发送文件测试",
          platform: [0],
          description: "任务描述文字xxxx",
          price: "10",
          业务类型: 0,
          status: 1
        },
        {
          id: 2,
          title: "浏览器波洞星球",
          platform: [1],
          description: "任务描述文字xxxx",
          price: "10",
          业务类型: 2,
          status: 0
        },
        {
          id: 3,
          title: "举报支持选择聊天记录（安全）",
          platform: [0, 1, 2],
          description: "任务描述文字xxxx",
          price: "0",
          业务类型: 1,
          status: 1
        },
        {
          id: 4,
          title: "发送群文件测试",
          platform: [0, 1],
          description: "任务描述文字xxxx",
          price: "30",
          业务类型: 1,
          status: 0
        }
      ],
      list2:[
          {
          id: 6,
          title: "浏览器波洞星球",
          platform: [1],
          description: "任务描述文字xxxx",
          price: "10",
          业务类型: 2,
          status: 0
        },
        {
          id: 7,
          title: "举报支持选择聊天记录（安全）",
          platform: [0, 1, 2],
          description: "任务描述文字xxxx",
          price: "0",
          业务类型: 1,
          status: 1
        },
        {
          id: 8,
          title: "发送群文件测试",
          platform: [0, 1],
          description: "任务描述文字xxxx",
          price: "30",
          业务类型: 1,
          status: 0
        },
        {
          id: 9,
          title: "多人聊天发送文件测试",
          platform: [0],
          description: "任务描述文字xxxx",
          price: "10",
          业务类型: 0,
          status: 1
        },
        {
          id: 10,
          title: "浏览器波洞星球",
          platform: [1],
          description: "任务描述文字xxxx",
          price: "10",
          业务类型: 2,
          status: 0
        },
        {
          id: 11,
          title: "举报支持选择聊天记录（安全）",
          platform: [0, 1, 2],
          description: "任务描述文字xxxx",
          price: "0",
          业务类型: 1,
          status: 2
        }
      ]
    };
  },
  mounted() {}
};
</script>

<style lang="less" scoped>
</style>