veterans_H5/h5_web/pages/mine/skillsTraining/skillsTrainingDetails/skillsTrainingDetails.vue

<!-- 我的技能培训详情  -->
<template>
  <view class="details">
    <u-navbar back-text="" title="" back-icon-color="#FFFFFF" :background="{ background: '#3D5D4C' }" :border-bottom="false"></u-navbar>
    <!-- 背景 -->
    <view class="details-bg">
      <view class="details-bg-1"></view>
      <view class="details-bg-2"></view>
    </view>
    <!-- 内容 -->
    <view class="details-content">
      <view class="details-content-title">
        <view class="left">
          <u-image :src="details.img" width="204" height="220" border-radius="10"></u-image>
          <view class="left-weekly">培训周期：{{ details.cycle }}个月</view>
        </view>
        <view class="right">
          <view class="name">
            <!-- <view class="tip">汽修</view> -->
            <view class="professional">{{ details.name }}</view>
          </view>
          <view class="class" v-if="details.className"
            ><text>{{ details.className }}</text
            >{{ details.openingTime }}</view
          >
          <view>培训学校：{{ details.schoolName }}</view>
          <view>培训导师：{{ details.teacherName }}</view>
          <view class="hardly">
            难度<u-rate :count="5" v-model="details.difficult" size="30" active-color="#EF651F" inactive-color="#EF651F" disabled></u-rate>
          </view>
          <view class="hardly">报名人数：10/20</view>
        </view>
      </view>
      <view class="details-content-course">
        <view class="details-content-course-btn">
          <view class="item" @click="jumpPage('/pages/skillsTraining/achievementCertificate/achievementCertificate', { id: details.id })">
            <view>
              <u-image src="../../../../static/img/certificate-icon.png" mode="aspectFill" width="40" height="50"></u-image>
            </view>
            <view class="name">成绩与证书</view>
            <view>
              <u-icon name="arrow-right" size="20"></u-icon>
            </view>
          </view>
          <view class="item" @click="teacherInteract(details)">
            <view>
              <u-image src="../../../../static/img/interaction-icon.png" mode="aspectFill" width="46" height="46"></u-image>
            </view>
            <view class="name">教师互动</view>
            <view>
              <u-icon name="arrow-right" size="20"></u-icon>
            </view>
          </view>
        </view>
        <view class="details-content-course-progress">
          <view class="title">总学习进度 （{{ details.finishPercent || 0 }}%）</view>
          <view>
            <u-line-progress
              active-color="#709078"
              inactive-color="#ECECEC"
              :percent="details.finishPercent || 0"
              height="18"
              :show-percent="false"
            ></u-line-progress>
          </view>
        </view>
        <view class="details-content-course-tab">
          <view :class="{ active: tabCur === 1 }" @click="tabCur = 1">线上课程</view>
          <view :class="{ active: tabCur === 2 }" @click="tabCur = 2">线下实训</view>
        </view>
        <!-- 线上课程 -->
        <view class="details-content-course-online" v-if="tabCur === 1">
          <view class="online-list" v-if="details.onLineCourselist && details.onLineCourselist.length">
            <view
              class="online-list-item"
              v-for="(item, index) in details.onLineCourselist"
              :key="index"
              @click="jumpPage('pages/skillsTraining/courseDetailed/courseDetailed', { id: item.id })"
            >
              <view class="left">
                <u-image :src="item.img" mode="aspectFill" width="204" height="132" border-radius="10"></u-image>
              </view>
              <view class="right">
                <view>{{ item.name }}</view>
                <view>{{ ` 共${item.amount || 0}课,已学完${item.finishCount || 0},学习进度${item.finishPercent || 0}% ` }}</view>
              </view>
            </view>
          </view>
          <view class="no-data" v-else>
            <u-empty text="暂无线上课程" mode="list"></u-empty>
          </view>
        </view>
        <!-- 线下课程 -->
        <view class="details-content-course-offline" v-if="tabCur === 2">
          <!-- <view class="notice">请于2021.10.12 9:00到贵州职业技术学院参加汽修车检线下实训</view> -->
          <view class="offline-list" v-if="details.offLineCourselist && details.offLineCourselist.length">
            <view class="offline-list-item" v-for="(item, index) in details.offLineCourselist" :key="index">
              <view class="left">
                <u-image :src="item.img" mode="aspectFill" width="204" height="132" border-radius="10"></u-image>
              </view>
              <view class="right">
                <view>{{ item.name }}</view>
                <view>{{ item.date }}</view>
                <view>{{ item.address }}</view>
              </view>
            </view>
          </view>
          <view class="no-data" v-else>
            <u-empty text="暂无线下课程" mode="list"></u-empty>
          </view>
        </view>
      </view>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      details: {},
      onlineList: [],
      tabCur: 1
    };
  },
  onLoad(page) {
    if (page.id) {
      this.id = page.id;
    }
  },
  onShow() {
    this.getDetails(this.id);
  },
  methods: {
    /**
     * 获取我的技能培训详情
     * @param {Object} id
     */
    getDetails(id) {
      this.$u.api.skillTraining.getMyTrainingDetailsApi({ id }).then((res) => {
        if (res.code === 200) {
          this.details = res.data;
        } else {
          this.$refs.uToast.show({
            title: res.msg,
            type: 'error'
          });
        }
      });
    },
    /**
     * 跳转到指定页面
     * @param {Object} url
     * @param {Object} params
     */
    jumpPage(url, params) {
      this.$u.route({
        url,
        params
      });
    },
    /**
     * 教师互动
     * @param {Object} item
     */
    teacherInteract(item) {
      if (item.classId) {
        let url = `${this.config.timChatUrl}?userID=${this.vuex_user.userId || this.vuex_user.id}&title=教师互动&permission=1&type=retire&classId=${item.classId}`;
        this.$u.route({
          url: '/pages/webView/webView',
          params: {
            url: encodeURIComponent(url)
          }
        });
      } else {
				this.$refs.uToast.show({
					title: '该课程暂无教师!',
					type: 'warning'
				});
      }
    }
  }
};
</script>

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