<template> <view class="container"> <!-- <view class="top"> 普及培训 </view> --> <swiper class="swiper-box" duration="300" @change="changeTab"> <swiper-item class="tab-content"> <scroll-view class="list-scroll-content" scroll-y> <!-- 空白页 --> <empty v-if="loaded && list.length == 0"></empty> <!-- 订单列表 --> <view class="order-item" @click="ToDetail(item)" v-for="(item, index) in list" :key="index"> <view class="list-cell"> <image class="image" :src="baseURL + item.training.image"></image> <view class="list-tpl">{{ item.training.title }}</view> </view> </view> </scroll-view> </swiper-item> </swiper> </view> </template> <script> import { mapState, mapMutations } from 'vuex'; import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'; import empty from '@/components/empty'; import uniPopup from '@/components/uni-popup/uni-popup.vue'; import { myTrainingList } from '@/api/index.js'; export default { components: { uniLoadMore, empty, uniPopup }, data() { return { page: 1, //当前页数 limit: 6, //每次信息条数 list: [], loadingType: 'more', //加载更多状态 loaded: false }; }, onLoad() { console.log(22) this.loadData(); }, computed: { ...mapState(['baseURL']) }, onReachBottom() { this.loadData() }, methods: { //获取订单列表 loadData() { //这里是将订单挂载到tab列表下 let obj = this; if(obj.loadingType == 'loading' || obj.loadingType == 'noMore') { return } obj.loadingType = 'loading' myTrainingList({ page: obj.page, limit: obj.limit }) .then(data => { obj.loaded == true let arr = data.data obj.list = obj.list.concat(arr); obj.page++; //判断是否还有下一页,有是more 没有是nomore if (obj.limit == arr.length) { obj.loadingType = 'more'; } else { obj.loadingType = 'noMore'; } obj.loaded = true }) .catch(e => { obj.loadingType = 'nomore'; // uni.hideLoading(); }); }, //跳转到详情 ToDetail(e) { console.log(e) let type ; if(e.num == 1) { type = 0 }else { type = 1 } let id = e.id; uni.navigateTo({ url: '/pages/form/certificates?name=' + encodeURI(e.name) + '&sendtime=' + e.sendtime }); } } }; </script> <style lang="scss"> page { background: #F2F2F2; height: 100%; padding-bottom: 25rpx; } .container { height: 100%; .top { background-color: #FFFFFF; height: 88rpx; display: flex; align-items: center; justify-content: center; font-size: 36rpx; font-weight: 500; color: #333333; } .swiper-box { height: 100%; .list-scroll-content { height: 100%; } } } .scroll-list { width: 100%; overflow: hidden; white-space: nowrap; background-color: #ffffff; font-size: 32rpx; .scoll-box { text-align: center; display: inline-block; margin: 0rpx 38rpx; padding: 15rpx 0rpx; .scoll-img { width: 130rpx; height: 85rpx; border-radius: 100%; image { width: 85rpx; height: 100%; border-radius: 100%; } } .scoll-name { padding-top: 15rpx; } &.active { color: #ef3d28; border-bottom: 6rpx solid #ef3d28; } } } .order-item { width: 100%; padding: 0rpx 25rpx; padding-top: 25rpx !important; .list-cell { // background-color: #ffffff; border-radius: 20rpx; width: 100%; box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.06); .image { width: 100%; height: 300rpx; border-top-left-radius: 25rpx; border-top-right-radius: 25rpx; } .list-tpl { padding: 25rpx 25rpx; padding-bottom: 35rpx !important; font-size: 34rpx; color: #222222; font-weight: 500; } } } </style>