crowd-test-service-frontend/src/components/commons/TaskItem.vue

<template>
  <div class="task-item-container">
    <el-row type="flex" align="middle" justify="center" style="font-size: 14px;">
      <el-col :span="5" type="flex" align="middle" justify="center">
        <el-badge :value="taskTable.statusVO.text" class="item" :type="taskTable.statusVO.style">
          <img class="task-cover" src="@/assets/img/home_ban1.jpg">
        </el-badge>
      </el-col>
      <el-col :span="4" type="flex" align="middle" justify="center">{{taskTable.title}}</el-col>
      <!--<el-col :span="4">{{project.id}}</el-col>-->
      <el-col :span="4" type="flex" align="middle" justify="center">
        <div class="badge" type="flex" align="middle" justify="center">
          {{taskTable.serviceType}}
        </div>
      </el-col>
      <el-col :span="4" type="flex" align="middle" justify="center">¥{{taskTable.quotePrice==null?0:taskTable.quotePrice}}</el-col>

      <el-col :span="4" type="flex" align="middle" justify="center">
        {{taskTable.acceptedCount}} / {{  taskTable.participantCount}}
      </el-col>
      <el-col :span="3" type="flex" align="middle" justify="center"><span class="btn btn-medium btn-info"
                                                                          @click="goToTaskDetail(taskTable.projectId,taskTable.id)">查看详情</span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import TaskStatus from '@/constants/enum/task-status'

export default {
  name: 'Task-Item',
  props: {
    task: {}
  },
  data () {
    return {
      taskTable: this.task,
      taskStatus: TaskStatus,//TaskStatus[this.task.status],
    }
  },
  mounted () {
    let plats = []
    //console.log(this.platformType)
  }
  ,
  methods: {
    goToTaskDetail (projectId, id) {
      this.$router.push({name: 'Task', params: {projectId: projectId, taskId: id}})
    }
  },
  watch: {
    task () {
      this.taskTable = this.task
    }
  }
}

</script>

<style lang="less" scoped>
  .task-item-container {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #eee;
    /*margin: 15px 5px;*/
    span {
      display: inline-block;
    }
  }

  .task-cover {
    width: 200px;
    height: 130px;
    vertical-align: middle;
  }

  .task-title {
    font-weight: 700;
  }

  .task-td {
    /*padding: 15px;*/
  }
</style>