skillsTraining.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <!-- 我的技能培训 -->
  2. <template>
  3. <view class="training">
  4. <z-paging
  5. ref="paging"
  6. v-model="trainingList"
  7. @query="queryList"
  8. >
  9. <!-- 选项卡 -->
  10. <view class="training-tab" slot="top">
  11. <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>
  12. </view>
  13. <!-- 列表 -->
  14. <view class="training-list">
  15. <view class="training-list-item" v-for="(item, index) in trainingList" :key="index" @click="jumpPage('/pages/mine/skillsTraining/skillsTrainingDetails/skillsTrainingDetails')">
  16. <view class="left">
  17. <u-image :src="item.img" mode="aspectFill" width="204" height="220" border-radius="10"></u-image>
  18. </view>
  19. <view class="right">
  20. <view class="name">{{ item.name }}</view>
  21. <view class="school">培训学校:{{ item.school }}</view>
  22. <view class="flex">
  23. <view class="rate">
  24. 难度<u-rate :count="5" v-model="item.rate" inactive-color="#EF651F" active-color="#EF651F" disabled size="24" gutter="6"></u-rate>
  25. </view>
  26. <view>报名人数:{{ item.people }}</view>
  27. </view>
  28. <view>开始时间:{{ item.startDate }}</view>
  29. <view>培训周期:{{ item.long }}个月</view>
  30. </view>
  31. </view>
  32. </view>
  33. </z-paging>
  34. </view>
  35. </template>
  36. <script>
  37. export default {
  38. data() {
  39. return {
  40. current: 0,
  41. tabList: [
  42. { value: 1, name: '培训中' },
  43. { value: 2, name: '已报名' }
  44. ],
  45. trainingList: []
  46. }
  47. },
  48. methods: {
  49. /**
  50. * tab切换
  51. * @param { Number } cur
  52. */
  53. tabChange(cur) {
  54. this.current = cur
  55. },
  56. /**
  57. * 下拉分页组件触发
  58. * @param {Number} pageNum
  59. * @param {Number} pageSize
  60. */
  61. queryList(pageNum, pageSize) {
  62. this.$refs.paging.complete([
  63. {
  64. id: 1,
  65. img: 'http://img.mp.itc.cn/upload/20161115/15c7309f1a074a08a2b9630651720c27_th.jpg',
  66. name: '汽车检测与维修培训',
  67. school: '贵州工业职业技术学院',
  68. people: '10/30',
  69. startDate: '2021.10.02',
  70. long: 3,
  71. rate: 3
  72. }
  73. ])
  74. },
  75. /**
  76. * @param {Object} url
  77. * @param {Object} params
  78. */
  79. jumpPage(url, params) {
  80. this.$u.route({ url, params })
  81. }
  82. }
  83. }
  84. </script>
  85. <style lang="scss" scoped>
  86. @import './skillsTraining.scss';
  87. </style>