front/src/views/questioncenter/smart.vue

<template>
  <div class="smart_container">
    <el-card class="mb10">
      <div class="smart_tabs">
        <div
          class="tab pointer"
          v-for="item in tabList"
          :class="tabActive == item.code ? 'tab_active' : ''"
          @click="switchTab(item.code)"
        >
          {{ item.label }}
        </div>
      </div>
    </el-card>
    <div>
      <SmartOnline :requireFields="requireFields" :tabActive="tabActive" :queryParams="queryParams"></SmartOnline>
    </div>
  </div>
</template>
<script>
import SmartOnline from './components/smart-online'
export default {
  components:{
    SmartOnline
  },
  data() {
    return {
      tabActive:0,
      tabList:[
        {
          label:'同步在线练习',
          code:0
        },
        {
          label:'知识点在线练习',
          code:1
        }
      ],
    }
  },
  created() {
    // 设置默认高亮
    this.tabActive = this.$route.query.tabActive ? this.$route.query.tabActive : 0
  },
  computed:{
    queryParams(){
      if(this.tabActive == 0) return {
        exeSubject: '',
        exeOrder: '',
        exeGrade: ''
      }
      if(this.tabActive == 1) return { exeSubject: '',}
    },
    requireFields(){
      if(this.tabActive == 0) return ['exeSubject','exeOrder','exeGrade']
      if(this.tabActive == 1) return ['exeSubject']
    },
  },
  methods:{
    switchTab(code) {
      this.tabActive = code
    }
  }
}
</script>
<style scoped>
.smart_container {
  padding: 20px;
  background: #f7f7f7;
}

.smart_tabs {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.smart_tabs .tab {
  text-align: center;
  flex: 1;
  padding: 8px 0 24px 0;
  border-bottom: 4px solid transparent;
}

.smart_tabs .tab_active {
  color: #47c6a2;
  border-bottom: 4px solid #47c6a2;
}

</style>