activitys-uniapp/pages/study/list.vue

<template>
	<view class="wrap" :style="vuex_skin">
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar title-color="#000000" :is-back="fasle" title="视频列表"></u-navbar>
		<!-- #endif -->
		
		<view style="padding: 30rpx 30rpx 10rpx;">
			<u-swiper :list="swiperList" border-radius="12" name="url" mode="rect" height="300" @click="handleSwiper"></u-swiper>
		</view>
		
		<view>
			<mescroll-body height="80%" ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
				<u-card :show-head="false" margin="20rpx" padding="20" v-for="(item,index) in studyList" :key="index" @click="$jump('/pages/study/detail?id='+item.id)">
					<view class="container-wrap" slot="body">
						<image :src="item.imageUrl" mode="aspectFill"></image>
						<view class="right">
							<view class="title text-cut-1">{{item.title}}</view>
							<view class="cu-tag bg-tag radius margin-right-10" style="font-weight: 400; margin-top: 10rpx;">{{item.type === 'IMAGE_TEXT' ? '图文类型' : '视频类型'}}</view>
							<view class="cu-btn round sm line-base btn">
								去学习
							</view>
						</view>
					</view>
				</u-card>
			</mescroll-body>
		</view>
		
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				activeSetting: '', //平台活动数据
				swiperList: [], //轮播图列表
				downOption: {
					auto: false
				},
				upOption: {
					auto: true,
					empty: {
						use: false
					}
				},
				studyList: [], //学习图文视频列表
			}
		},
		onReady() {
			this.getActivityParams();
		},
		methods: {
			handleSwiper(index){
				let url = this.swiperList[index].path;
				if(!!url && (url.indexOf('http://') > -1 || url.indexOf('https://') > -1) ){
					window.location.href = url;
				}
			},
			/**
			 * 获取活动参数
			 */
			getActivityParams() {
				let params = {
					activeId: this.vuex_active_setting.defaultActiveId,
					platformSettingEnum: 'ACTIVE_SETTING'
				}
				this.$api.platform.getPlatformValue(params).then(res => {
					this.activeSetting = JSON.parse(res.data.data);
					this.swiperList =  this.activeSetting.learnVideos.learnVideosBanner;
					uni.setNavigationBarTitle({
						title: this.activeSetting.learnVideos.learnVideosTitle
					})
				})
			},
			upCallback(mescroll) {
				let params = {
					current: mescroll.num,
					size: mescroll.size,
					activeId: this.vuex_active_setting.defaultActiveId
				}
				this.$api.activity.getStudyList(params).then(res => {
					// console.log(res.data.data.records);
					let data = res.data.data.records
					let total = res.data.data.total
					mescroll.endBySize(data.length, total);
					if (mescroll.num == 1) this.studyList = []; //如果是第一页需手动制空列表
					this.studyList = this.studyList.concat(data); //追加新数据
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		padding-bottom: 50rpx;
	}
	.container-wrap{
		display: flex;
		image{
			width: 230rpx;
			height: 230rpx;
			min-height: 230rpx;
			min-width: 230rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}
		.right{
			// display: flex;
			// flex-direction: column;
			// justify-content: space-between;
			position: relative;
			width: 100%;
			.title {
				font-weight: 800;
				color: #353535;
				font-size: 32rpx;
			}
			.btn{
				position: absolute;
				bottom: 0;
				right: 0;
			}
		}
	}
</style>