JingTieXueTang.H5/src/views/home/index.vue

<template>
  <div class="home-box">
    <van-nav-bar
      title="京铁学堂"
      left-text=""
      right-text=""
      bind:click-left=""
      bind:click-right=""
    >
    </van-nav-bar>
    <div class="dropdown-div">
      <van-dropdown-menu active-color="#1989fa">
        <van-dropdown-item
          v-model="engineeringWorkChooseValue"
          :options="engineeringWorkList"
          :title="
            engineeringWorkChooseValue
              ? engineeringWorkChooseValue.text
              : '工种选择'
          "
          @change="handleChangeEngneeringWorkFun"
        />
      </van-dropdown-menu>
    </div>
    <transition name="tab" mode="out-in">
      <component :is="currentComponents" class="page" />
    </transition>
    <van-tabbar
      v-model="activeTabName"
      active-color="#0088e9"
      inactive-color="#808080"
      @change="onChangeTabFun"
    >
      <van-tabbar-item v-for="(item, index) in tabbars" :key="index">
        <span>{{ item.title }}</span>
        <template #icon="props">
          <img :src="props.active ? item.iconActive : item.iconInactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import PageLearn from "./learn/page-learn";
import PageAnswer from "./answer/page-answer";
import PageExam from "./exam/page-exam";
import PagePerson from "./person/page-person";
import { mapState } from "vuex";
export default {
  name: "home",
  components: { PageLearn, PageAnswer, PageExam, PagePerson },
  data() {
    return {
      currentComponents: "pageLearn",
      activeTabName: 0,
      tabbars: [
        {
          title: "学习",
          pageName: "pageLearn",
          iconInactive: require("@/assets/image/homeTab/study.png"),
          iconActive: require("@/assets/image/homeTab/studyActive.png")
        },
        {
          title: "答题",
          pageName: "pageAnswer",
          iconInactive: require("@/assets/image/homeTab/answer.png"),
          iconActive: require("@/assets/image/homeTab/answerActive.png")
        },
        {
          title: "考试",
          pageName: "pageExam",
          iconInactive: require("@/assets/image/homeTab/exam.png"),
          iconActive: require("@/assets/image/homeTab/examActive.png")
        },
        {
          title: "我的",
          pageName: "pagePerson",
          iconInactive: require("@/assets/image/homeTab/person.png"),
          iconActive: require("@/assets/image/homeTab/personActive.png")
        }
      ],
      engineeringWorkChooseValue: null, // 工种选择的值
      engineeringWorkList: "" // 工种可选列表
    };
  },
  computed: {
    ...mapState({
      user: state => state.user,
      homeChangeTabIndex: state => state.study.homeChangeTabIndex
    })
  },
  created() {
    this.initFun();
  },
  watch: {
    // 监听：首页切换tab的下标
    homeChangeTabIndex(value) {
      if (value === null || value === undefined) {
        return;
      }
      this.activeTabName = value;
      this.onChangeTabFun(this.activeTabName);
      this.$store.commit("updateStudyItemStore", {
        field: "homeChangeTabIndex",
        value: null
      });
    }
  },
  methods: {
    // 初始化
    initFun() {
      this.engineeringWorkList = [
        { text: "桥隧工", value: "QiaoSuiGong" },
        { text: "桥梁工", value: "QiaoLiangGong" },
        { text: "线路工", value: "XianLuGong" }
      ];
      this.engineeringWorkChooseValue = this.engineeringWorkList[0].value;
      this.handleChangeEngneeringWorkFun(this.engineeringWorkChooseValue);
      // 获取所有用户
      this.$_http
        .get(this.$_API.JTXT_GET_USER_ADMIN_USERS)
        .then(res => {
          this.$store.commit("updateUserItemStore", {
            field: "userInfo",
            value: res.data[0]
          });
          // 获取所有收藏
          this.getCollection();
          // 获取所有考试历史
          this.getExamHistory();
        })
        .catch(() => {
          this.$store.commit("toggleLoading", false);
        });
      this.activeTabName = 0;
      this.onChangeTabFun(this.activeTabName);
    },
    // 操作：切换tab
    onChangeTabFun(index) {
      this.currentComponents = this.tabbars[this.activeTabName].pageName;
    },
    // 操作：选择了工种
    handleChangeEngneeringWorkFun(value) {
      let resultItem = null;
      for (let i = 0; i < this.engineeringWorkList.length; i++) {
        let item = this.engineeringWorkList[i];
        if (value === item.value) {
          resultItem = item;
          break;
        }
      }
      this.$store.commit("updateUserItemStore", {
        field: "chooseEngneeringWork",
        value: resultItem
      });
    },
    // 获取所有收藏
    getCollection() {
      let path = {
        userName: this.user.userInfo.userName
      };
      this.$_http
        .get(this.$pathParams(this.$_API.JTXT_GET_USER_FAVORITES, path))
        .then(res => {
          if (res.data.materials) {
            this.$store.commit("updateFavoriteItemStore", {
              field: "materials",
              value: res.data.materials
            });
            this.$store.commit("updateFavoriteItemStore", {
              field: "titles",
              value: res.data.titles
            });
          } else {
            this.$store.commit("toggleLoading", false);
          }
          this.loading = false;
        })
        .catch(() => {
          this.$store.commit("toggleLoading", false);
        });
    },
    // 查询：考试记录
    getExamHistory() {
      this.$store.commit("toggleLoading", true);
      let params = {
        user: this.user.userInfo.userName
      };
      this.$_http
        .get(this.$_API.JTXT_GET_USER_EXAMS_HISTORY, { params })
        .then(res => {
          let obj = {};
          res.data.forEach(element => {
            obj[element.examId] = element;
          });
          this.$store.commit("updateExamItemStore", {
            field: "examHistoryObj",
            value: obj
          });
        })
        .catch(() => {
          this.$store.commit("toggleLoading", false);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.home-box {
  height: 100%; // 不要设置vh，手机浏览器计算问题
  padding-bottom: 2rem; // 多2em，避免tab栏挡住内容
  .dropdown-div {
    position: absolute;
    top: 0;
    right: 0.5rem;
    width: 5rem;
    height: 2.09091rem;
    overflow: hidden;
    z-index: 1000;
  }
}
</style>
<style lang="scss">
.home-box {
  .van-dropdown-menu__bar {
    background-color: #7cc8ff;
    .van-ellipsis {
      font-size: 0.6rem;
    }
  }
}
</style>