bigDataStudent/src/views/targetImprove/practice/index.vue

<template>
  <div class="page_target">
    <TargetSubject></TargetSubject>
    <div class="target_item target_step">
      <div class="step_item" :class="stepIndex==1?'step_item_cur':''" @click="ChangeStep(1)">
        <div class="span_number">1</div>选择练习知识点 
      </div>
      <div class="step_line">
      </div>
      <div class="step_item" :class="stepIndex==2?'step_item_cur':''" @click="ChangeStep(2)">
        <div class="span_number">2</div>知识点练习作答 
      </div>
      <div class="step_line">
      </div>
      <div class="step_item" :class="stepIndex==3?'step_item_cur':''" @click="ChangeStep(3)">
        <div class="span_number">3</div>查看练习结果 
      </div>

    </div>
    <!-- 知识点图谱 -->
    <knowledgeGraph v-if="stepIndex==1"></knowledgeGraph>
    <PracticeAnswer v-if="stepIndex==2"></PracticeAnswer>
    <PracticeResults v-if="stepIndex==3"></PracticeResults>
  </div>
</template>
<script>
import TargetSubject from "@/views/targetImprove/components/TargetSubject.vue"//顶部筛选科目组件
import knowledgeGraph from "@/views/targetImprove/practice/knowledgeGraph.vue"//知识点图谱
import PracticeAnswer from "@/views/targetImprove/practice/practiceAnswer.vue"//练习作答
import PracticeResults from "@/views/targetImprove/practice/practiceResults.vue"//练习结果
import { mapState } from 'vuex'
export default {
  components: {
    TargetSubject,
    knowledgeGraph,
    PracticeAnswer,
    PracticeResults
  },
  data() {
    return {
      userInfo: {},

      stepIndex:1,//步骤
    }
  },
  computed:{
    ...mapState('target', ['subjectCode'])
  },
  watch:{
    // 监听顶部的subjectCode变化
    subjectCode(newVal, oldVal){
      console.log('科目编码改变了', newVal, oldVal)
      // ========= 业务逻辑写这里 =========
      // 例如：切换科目，重置步骤、重新请求知识点图谱数据
      
    }
  },

  mounted() 
  {

  },
  methods: { 
    

    // 步骤切换
    ChangeStep(index)
    {
      this.stepIndex = index;
    },
  }
};
</script>
<style lang="scss" scoped>

</style>