123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990 |
- <!-- 我的技能培训 -->
- <template>
- <view class="training">
- <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')">
- <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">{{ item.name }}</view>
- <view class="school">培训学校:{{ item.school }}</view>
- <view class="flex">
- <view class="rate">
- 难度<u-rate :count="5" v-model="item.rate" inactive-color="#EF651F" active-color="#EF651F" disabled size="24" gutter="6"></u-rate>
- </view>
- <view>报名人数:{{ item.people }}</view>
- </view>
- <view>开始时间:{{ item.startDate }}</view>
- <view>培训周期:{{ item.long }}个月</view>
- </view>
- </view>
- </view>
- </z-paging>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- current: 0,
- tabList: [
- { value: 1, name: '培训中' },
- { value: 2, name: '已报名' }
- ],
- trainingList: []
- }
- },
- methods: {
- /**
- * tab切换
- * @param { Number } cur
- */
- tabChange(cur) {
- this.current = cur
- },
- /**
- * 下拉分页组件触发
- * @param {Number} pageNum
- * @param {Number} pageSize
- */
- queryList(pageNum, pageSize) {
- this.$refs.paging.complete([
- {
- id: 1,
- img: 'http://img.mp.itc.cn/upload/20161115/15c7309f1a074a08a2b9630651720c27_th.jpg',
- name: '汽车检测与维修培训',
- school: '贵州工业职业技术学院',
- people: '10/30',
- startDate: '2021.10.02',
- long: 3,
- rate: 3
- }
- ])
- },
- /**
- * @param {Object} url
- * @param {Object} params
- */
- jumpPage(url, params) {
- this.$u.route({ url, params })
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- @import './skillsTraining.scss';
- </style>
|