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

<template>
  <div class="task-item-container">
       <span class="col-xl-2 col-lg-3 col-md-4 col-sm-1">
        <img class="task-cover" src="@/assets/img/home_ban1.jpg">
      </span>
    <span class="task-title col-md-2 col-sm-10">{{taskTable.title}}</span>
    <span class="col-md-1 col-sm-5 ">{{serviceType[taskTable.serviceType]}}</span>
    <span class="col-md-1 col-sm-5 ">¥{{taskTable.price}}</span>
    <!--<span class="col-md-1 col-sm-5 ">{{platformType}}</span>-->
    <span class="col-md-1 col-sm-5 ">{{taskStatus[taskTable.status]}}</span>
    <span class="task-td">
       <span class="btn btn-medium btn-info" @click="goToTaskDetail(taskTable.projectId,taskTable.id)">查看详情</span>
       </span>

  </div>
</template>

<script>
import ServiceType from '@/constants/enum/service-type'
import TaskStatus from '@/constants/enum/task-status'
import PlatformType from '@/constants/enum/platform-type'

export default {
  name: 'Task-Item',
  props: {
    task: {}
  },
  data () {
    return {
      taskTable: this.task,
      taskStatus: TaskStatus,//TaskStatus[this.task.status],
      serviceType: ServiceType,//[this.task.serviceType],
      platformType: []
    }
  },
  mounted () {
    this.taskStatus = TaskStatus[this.taskTable.status]
    this.serviceType = ServiceType[this.taskTable.serviceType]
    let plats = []
    for (let i in this.taskTable.platform) {
      plats.push(PlatformType[i])
    }
    this.platformType = 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: 20px;
    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>