veterans_H5/h5_web/pages/basicTraining/basicTraining.vue

<template>
  <view class="training">
    <u-navbar back-text="" title="" back-icon-color="#FFFFFF" :background="{ background: '#3D5D4C' }" :border-bottom="false"></u-navbar>
    <image class="bg" src="../../static/img/basic-training-bg.png" mode="widthFix"></image>
    <view class="tab">
      <view class="tab-bg">
        <view class="tab-list">
          <view class="tab-item" v-for="(item, index) in tabs" :key="index" :class="{ active: tabIndex === index }" @click="tabChange(index)">{{
            item.name
          }}</view>
        </view>

        <view class="training-data" v-if="tabIndex === 0">
          <view class="training-data-item">
            <view>已看课程</view>
            <view
              ><text>{{ online.play }}</text
              >个</view
            >
          </view>
          <view class="training-data-item">
            <view>还需观看</view>
            <view
              ><text style="color: #ff7e00">{{ online.playNot }}</text
              >个</view
            >
          </view>
        </view>
        <view class="training-offline" v-if="tabIndex === 1">
          <view>未参加线下培训</view>
          <view>（注：必须参加线下培训才能通过适应性培训）</view>
        </view>
      </view>
    </view>

    <!-- 适应性培训 -->
    <view class="training-adaptability mt26" v-if="tabIndex === 0">
      <view class="training-adaptability-title">线上课程</view>
    </view>
    <view class="training-adaptability" v-if="tabIndex === 0">
      <view class="training-adaptability-list" v-if="list.length">
        <view class="training-adaptability-list-item" v-for="(item, index) in list" :key="index" @click="recordBrowseTotal(item)">
          <view class="left">
            <u-image :src="item.titleImg" width="198" height="144" border-radius="10"></u-image>
          </view>
          <view class="right">
            <view>{{ item.adaptName }}</view>
            <view>共{{ item.amount }}节课，已学完{{ item.finishCount }}节课，学习进度{{ item.finishPercent ? item.finishPercent : 0 }}%</view>
          </view>
        </view>
      </view>
      <view v-else>
        <u-empty text="暂无线上课程" mode="list"></u-empty>
      </view>
    </view>

    <!-- 线下培训 -->
    <view class="training-offline1" v-if="tabIndex === 1">
      <view class="training-offline1-title"> 线下培训 </view>
      <view class="training-offline1-list" v-if="offLineList.length">
        <view class="training-offline1-list-item" v-for="(item, index) in offLineList" :key="index" @click="recordBrowseTotal(item, 1)">
          <view class="bottom">
            <view>{{ item.adaptName }}</view>
          </view>
          <view class="top">
            <view>{{ item.adaptAddress }}</view>
            <view>{{ item.createTime }}</view>
          </view>
        </view>
      </view>
      <view v-else>
        <u-empty text="暂无线下培训" mode="list"></u-empty>
      </view>
    </view>
    <view class="study-status" v-if="tabIndex === 0">学习状态：{{ online.status === 0 ? '未完成' : '已完成' }}</view>
    <view class="study-status" v-if="tabIndex === 1">学习状态：{{ offlineStatus === 0 ? '未完成' : '已完成' }}</view>
    <u-toast ref="uToast" />
    <judge-auth ref="judgeAuth" @adoptAuth="adoptAuth" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabs: [{ name: '适应性培训' }, { name: '线下培训' }],
      tabIndex: 0,
      list: [],
      online: {
        status: 0,
        play: 0,
        playNot: 0
      },
      offlineStatus: 0,
      offLineList: []
    };
  },
  onShow() {
    this.getOnlineList(1, 200000);
    this.getOnlineStatus();
    this.getOfflineList();
  },
  methods: {
    // 切换菜单
    tabChange(index) {
      this.tabIndex = index;
    },
    /**
     * 获取在线课程
     * @param {Object} pageNum
     * @param {Object} pageSize
     */
    getOnlineList(pageNum, pageSize) {
      this.$u.api.training.getOnlineListApi({ pageNum, pageSize }).then((res) => {
        if (res.code === 200) {
          this.list = res.rows;
        } else {
          this.$refs.uToast.show({
            title: res.msg,
            type: 'error'
          });
        }
      });
    },
    /**
     * 获取在线课程学习状态
     */
    getOnlineStatus() {
      this.$u.api.training.getOnlineStatusApi().then((res) => {
        if (res.code === 200) {
          this.online.status = res.data.status;
          this.online.play = res.data.play;
          this.online.playNot = res.data.playNot;
        } else {
          this.$refs.uToast.show({
            title: res.msg,
            type: 'error'
          });
        }
      });
    },
    getOfflineList() {
      this.$u.api.training
        .getOfflineListApi({
          pageNum: 1,
          paheSize: 3000
        })
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            this.offLineList = res.rows;
          } else {
            this.$refs.uToast.show({
              title: res.msg,
              type: 'error'
            });
          }
        });
    },
    jumpPage(url, params) {
      this.$u.route({
        url: url,
        params: params
      });
    },
    adoptAuth(item) {
      this.jumpPage('/pages/basicTraining/onlineTrainingDetails/onlineTrainingDetails', { id: item.id });
    },
    /**
     * 适应性培训关注度统计
     * @param {Object} item
     */
    recordBrowseTotal(item, type) {
      const query = {
        platform: '1', // 平台:1-H5 2-APP 3-小程序 4-PC端
        pages: location.href, //页面路径
        btnName: '查看课程详情', //按钮名称
        btnEvent: '1', //按钮事件: 1-点击 2-长按 3-滑动
        ipAddress: '', //IP地址
        typeName: '适应性培训关注度', //类型名称 例：学校关注度 、适应性考试等
        typeCode: 'SYXPXGZD', // 类型编码 例：类型名称首字母缩写(XXGZD)
        categoryName: item.adaptName //类别名称 例：XX学校，SS考试
      };
      this.$u.api.postAnalysis(query).then((res) => {
        if (type === 1) {
          this.jumpPage('pages/basicTraining/offlineTrainingDetails/offlineTrainingDetails', { id: item.id });
        } else {
          this.$refs['judgeAuth'].modalShow(item);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import './basicTraining.scss';
</style>