dvcp_v2_wechat_app/src/project/qujing/AppLegalLearning/AppLegalLearning.vue

<template>
  <div class="AppLegalLearning">
    <u-navbar title="法治学习" :background="{background: '#f4f6fa'}" :is-back="false" title-bold></u-navbar>
    <div class="tabs_box">
      <u-tabs :list="tabs" font-size="32" bg-color="#f3f5f7" inactive-color="#999999"
     :active-item-style="{color: '#222222'}" :is-scroll="true" :current="currIndex" @change="(i) => (currIndex = i)"> </u-tabs>
    </div>
    <div>
      <OnlineClass ref="OnlineClass" :height="height" @to-detail="toDetail" v-show="currIndex == 0"></OnlineClass>
      <GeneralLawExam ref="GeneralLawExam" :height="height" @to-test="toTest" v-show="currIndex == 1"></GeneralLawExam>
    </div>
  </div>
</template>

<script>
import OnlineClass from './components/OnlineClass.vue'
import GeneralLawExam from './components/GeneralLawExam.vue'
export default {
  name: 'AppLegalLearning',
  appName: '法治学习',
  customNavigation: true,
  data() {
    return {
      currIndex: 0,
      tabs: [
        {
          name: '在线课堂',
        },
        {
          name: '普法考试',
        }
      ],
      screenHeight: 0,
      height: 0,
    }
  },
  onShow() {
    if(this.currIndex == 0) {
      this.$refs.OnlineClass.getList();
    } else {
      this.$refs.GeneralLawExam.getList();
      this.$refs.GeneralLawExam.getUserInfo()
    }
    uni.getSystemInfo({
      success: (res)=> {
        this.screenHeight = res.screenHeight
      }
    });
  },
  components: {
    OnlineClass,
    GeneralLawExam
  },
  watch: {
    currIndex: {
      handler(v) {
        if(v == 0) {
          this.$refs.OnlineClass.getList();
        } else if(v == 1) {
          this.$refs.GeneralLawExam.getList();
          this.$refs.GeneralLawExam.getUserInfo()
        }
      }
    },
    screenHeight(v) {
      if(v) {
        this.height = this.screenHeight - 250
      }
    }
  },
  methods: {
    toTest(id) {
      uni.navigateTo({url: "./testForm?id=" + id})
    },
    toDetail(id) {
      uni.navigateTo({url: "./classDetail?id=" + id})
    }
  }
}
</script>

<style lang="scss" socped>
.AppGeneralLawExam {
  .tabs_box {
    height: 100px;
    line-height: 100px;
  }
}
</style>