crowd-test-service-frontend/src/pages/DetailPage/TestTypeDetail.vue

<template>
  <div class="home-wrapper">
    <div class="container" style="margin: 20px auto;">
      <div class="create-body" v-for="item in fields">
        <div class="title h2">
          <span style="display: inline-block;margin-right: 20px">{{item.name}}</span>
          <el-button @click="goToTask(item.code)" type="primary" size="mini">相关任务</el-button></div>
        <div class="h3">{{item.introduction}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import {getAllServiceTypes} from '@/js/index.js'

  export default {
    name: "TestTypeDetail",
    data() {
      return {
        isLogin: false,
        fields: [],
      }
    },
    methods: {
      setFields(){
        getAllServiceTypes().then((res) => {
          this.fields = res
        })
      },
      goToTask(testType){
        console.log(testType)
        //type=1 表示是从测试类型跳转过去的
        this.$router.push({path:'/square',query:{type:testType}})
      }
    },
    mounted() {
      this.setFields();
    }
  }
</script>

<style scoped>
  .item-template {
    height: 80px;
  }
</style>