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

<!-- 我的技能培训 -->
<template>
  <view class="training">
    <u-navbar back-text="" title="" back-icon-color="#FFFFFF" :background="{ background: '#3D5D4C' }" :border-bottom="false"></u-navbar>
    <z-paging ref="paging" v-model="trainingList" @query="queryList">
      <!-- 选项卡 -->
      <view class="training-tab" slot="top">
        <u-tabs
          :list="tabList"
          :is-scroll="true"
          :current="current"
          @change="tabChange"
          bg-color="#f2f2f2"
          inactive-color="#000000"
          active-color="#709078"
          :bold="false"
          bar-width="40"
          bar-height="6"
          :active-item-style="{ color: '#000000' }"
        ></u-tabs>
      </view>

      <!-- 列表 -->
      <view class="training-list">
        <view
          class="training-list-item"
          v-for="(item, index) in trainingList"
          :key="index"
          @click="jumpPage('/pages/mine/skillsTraining/skillsTrainingDetails/skillsTrainingDetails', { id: item.id })"
        >
          <view class="left">
            <u-image :src="item.img" mode="aspectFill" width="204" height="220" border-radius="10"></u-image>
          </view>
          <view class="right">
            <view class="name wrap">{{ item.name || '-' }}</view>
            <view class="school wrap">培训学校：{{ item.schoolName || '-' }}</view>
            <view class="flex wrap">
              <view class="rate">
                难度<u-rate
                  :count="5"
                  v-model="item.difficult"
                  inactive-color="#EF651F"
                  active-color="#EF651F"
                  disabled
                  size="30"
                  gutter="6"
                ></u-rate>
              </view>
              <!-- <view>报名人数：{{ item.people }}</view> -->
            </view>
            <view class="wrap">开始时间：{{ item.applyTime || '-' }}</view>
            <view class="wrap">培训周期：{{ item.cycle || '-' }}个月</view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,

      tabList: [
        { value: 1, name: '培训中' },
        { value: 0, name: '已报名' }
      ],
      trainingList: []
    };
  },
  methods: {
    /**
     * tab切换
     * @param { Number } cur
     */
    tabChange(cur) {
      this.current = cur;
      this.getList(1, 10, this.tabList[cur].value);
    },
    /**
     * 下拉分页组件触发
     * @param {Number} pageNum
     * @param {Number} pageSize
     */
    queryList(pageNum, pageSize) {
      this.getList(pageNum, pageSize, this.tabList[this.current].value);
    },
    /**
     * 获取列表
     * @param {Object} pageNum
     * @param {Object} pageSize
     */
    getList(pageNum, pageSize, type) {
      this.$u.api.skillTraining.getMyTrainingListApi({ pageNum, pageSize, type }).then((res) => {
        if (res.code === 200) {
          this.$refs.paging.complete(res.rows);
        } else {
          this.$refs.paging.complete([]);
          this.$refs.uToast.show({
            title: res.msg,
            type: 'error'
          });
        }
      });
    },
    /**
     * @param {Object} url
     * @param {Object} params
     */
    jumpPage(url, params) {
      this.$u.route({ url, params });
    }
  }
};
</script>

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