veterans_H5/h5_web/pages/skillsTraining/skillsTraining.vue

<!-- 技能培训 -->
<template>
  <view class="training">
    <u-navbar back-text="" title="" back-icon-color="#FFFFFF" :background="{ background: '#3D5D4C' }" :border-bottom="false"></u-navbar>
    <!-- banner -->
    <view class="training-banner">
      <u-swiper
        v-if="bannerList.length"
        :list="bannerList"
        name="bannerUrl"
        border-radius="0"
        mode="round"
        height="380"
        img-mode="scaleToFill"
        :mode="bannerList.length > 1 ? 'round' : 'none'"
      ></u-swiper>
      <image v-else src="../../static/img/banner-skillsTraining.png" mode="aspectFill"></image>
    </view>

    <view class="training-total" @click="jumpPage('/pages/mine/skillsTraining/skillsTraining')" v-if="isAddClass">
      <view class="training-total-left">
        <view>我的技能培训</view>
        <view>学习时长：{{ skillTotal.learnTime ? (Number(skillTotal.learnTime) / 3600).toFixed(2) : 0 }}小时</view>
      </view>
      <view class="training-total-right">
        <u-icon name="arrow-right" size="44" color="#666"></u-icon>
      </view>
    </view>
    <view class="training-total" v-else>
      <view class="training-total-left">
        <view>您还未报班</view>
      </view>
    </view>

    <!-- 报班通知 -->
    <view class="training-notice">
      <template v-if="enrollList.length">
        <view class="training-notice-title">
          <view>报班通知</view>
          <view @click="jumpPage('pages/skillsTraining/registrationNotice/registrationNotice')">
            <text>更多</text>
            <u-icon name="arrow-right"></u-icon>
          </view>
        </view>
        <view class="training-notice-content">
          <swiper
            class="swiper"
            :indicator-dots="true"
            :autoplay="false"
            :interval="1000"
            :duration="500"
            indicator-color="#D8D8D8"
            indicator-active-color="#D8D8D8"
          >
            <swiper-item v-for="(item, index) in enrollList" :key="index">
              <view class="swiper-item">
                <view class="left">
                  <u-image :src="item.img" mode="aspectFill" border-radius="10" height="220" width="204">
                    <view slot="error">
                      <u-image src="../../static/img/no-image.png" width="204" height="220" border-radius="10" mode="aspectFill" />
                    </view>
                  </u-image>
                </view>
                <view class="right">
                  <view class="item">{{ item.name }}</view>
                  <view class="item">{{ item.schoolName }}</view>
                  <!-- <view class="item">
										<u-parse :html="item.description"></u-parse>
									</view> -->
                  <view class="btn" @click="signUp(item)">报名</view>
                </view>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </template>
    </view>

    <!-- 技能包 -->
    <view class="training-package">
      <view class="training-package-title">
        <view>技能包</view>
        <!-- <view>
					<text>更多</text>
					<u-icon name="arrow-right"></u-icon>
				</view> -->
      </view>
      <view class="training-package-list">
        <view class="training-package-list-item" v-for="(item, index) in packageList" :key="index" @click="recordBrowseTotal(item)">
          <view class="border-1">
            <u-image :src="item.img" mode="aspectFill" border-radius="10" height="180" width="294">
              <view slot="error">
                <u-image src="../../static/img/no-image.png" height="190" width="300" border-radius="10" mode="aspectFill" />
              </view>
            </u-image>
          </view>
          <view>{{ item.name }}</view>
          <view>{{ item.schoolName }}</view>
        </view>
      </view>
    </view>

    <!-- 问题咨询 -->
    <view class="training-bottom" @click="questionAsk">问题咨询</view>
    <u-toast ref="uToast" />
    <judge-auth ref="judgeAuth" @adoptAuth="adoptAuth" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      enrollList: [],
      packageList: [],
      skillTotal: {},
      isAddClass: false,
      bannerList: []
    };
  },
  onShow() {
    this.getPackageList();
    this.getClassNoticeList();
    this.getTrainingTotal();
    this.queryIsAttendedClass();
    this.getBannerList();
  },
  methods: {
    getBannerList() {
      this.$u.api.indexApi
        .indexBannerListApi({
          type: 3
        })
        .then((res) => {
          if (res?.code === 200) {
            this.bannerList = res.data;
          }
        });
    },
    /**
     * 查询是否报过班
     */
    queryIsAttendedClass() {
      this.$u.api.skillTraining.queryIsAttendedClassApi().then((res) => {
        if (res.code === 200) {
          console.log(res);
          if (res.data > 0) {
            this.isAddClass = true;
          }
        }
      });
    },
    /**
     * 获取技能包列表
     */
    getPackageList() {
      this.$u.api.skillTraining.getSkillPackageListApi().then((res) => {
        if (res.code === 200) {
          this.packageList = res.rows;
        }
      });
    },
    /**
     * 获取报班通知列表
     */
    getClassNoticeList() {
      this.$u.api.skillTraining
        .getClassNoticeApi({
          pageNum: 1,
          pageSize: 5
        })
        .then((res) => {
          if (res.code === 200) {
            this.enrollList = res.rows;
          }
        });
    },
    /**
     * 获取个人技能培训统计
     */
    getTrainingTotal() {
      this.$u.api.skillTraining.getTrainingTotalApi().then((res) => {
        if (res.code === 200) {
          this.skillTotal = res.data;
        }
      });
    },
    /**
     * 适应性培训关注度统计
     * @param {Object} item
     */
    recordBrowseTotal(item) {
      const query = {
        platform: '1', // 平台:1-H5 2-APP 3-小程序 4-PC端
        pages: location.href, // 页面路径
        btnName: '查看技能包详情', // 按钮名称
        btnEvent: '1', //按钮事件: 1-点击 2-长按 3-滑动
        ipAddress: '', //IP地址
        typeName: '技能培训关注度', //类型名称 例：学校关注度 、适应性考试等
        typeCode: 'JNPXGZD', // 类型编码 例：类型名称首字母缩写(XXGZD)
        categoryName: item.name //类别名称 例：XX学校，SS考试
      };
      this.$u.api.postAnalysis(query).then((res) => {
        this.jumpPage('/pages/skillsTraining/skillsPackage/skillsPackage', {
          id: item.id,
          schoolName: item.schoolName
        });
      });
    },
    /**
     * 跳转到指定页面
     * @param { String } url
     * @param {Object} parmas
     */
    jumpPage(url, params) {
      this.$u.route({
        url,
        params
      });
    },
    /**
     * 报名
     * @param {Object} item
     */
    signUp(item) {
      this.$refs['judgeAuth'].modalShow(item);
    },
    adoptAuth(item) {
      this.$u.api.skillTraining
        .signUpClassApi({
          packageId: item.id
        })
        .then((res) => {
          if (res.code === 200) {
            this.jumpPage('/pages/skillsTraining/submitSuccess/submitSuccess');
          } else {
            this.$refs.uToast.show({
              title: res.msg,
              type: 'error'
            });
          }
        });
    },
    /**
     * 问题咨询
     */
    questionAsk() {
      let url = `${this.config.timChatUrl}?userID=${this.vuex_user.userId}&title=问题咨询&permission=2&type=retire`;
      this.$u.route({
        url: '/pages/webView/webView',
        params: {
          url: encodeURIComponent(url)
        }
      });
    }
  }
};
</script>

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