kailin_mp/pages/video/index.vue

<template>
	<view>
		<view class="video_list">
			<view class="video_item" v-for="(item,index) in videoList" @click.stop="goDetail(item.id)">
				<image class="thumb_img" :src="item.thumb" mode="aspectFit"></image>
				<view class="video_info">
					<view class="video_type">
						<text class="type_name">{{item.type_name}}</text>
						<button class="to_learn">开始学习</button>
					</view>
					<view class="video_title">{{item.name}}</view>
					<view class="video_time">
						<text class="time_info">{{item.end_time}} </text>
						<button class="after_exam" v-if="item.learn_status > 0">课后评测</button>
					</view>
				</view>
			</view>
		</view>
		<view class="to_bottom" v-if="!videoList.length"> -----您还没有可学习课程-----</view>
		<view class="contact_follow">
			<button class="contact_btn" open-type="contact">
				<uni-icons type="headphones" size="30" color="#FFFFFF"></uni-icons>
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
		  return {
		    // 产品列表
		    videoList: [],
		    // 请求参数
		    requestParam: {
		      page: 1,
		      status: 0,
		    },
		    // 是否最后一页
		    isLast: false,
		    // 是否请求中
		    isReqing: false,
		  };
		},
		onLoad() {},
		onShow() {
		  // 没有数据的话，或者请求中，不允许刷新
		  if (this.isReqing) return;
		  // 初始化页码为1
		  this.requestParam.page = 1;
		  // 是否是最后一页
		  this.isLast = false;
		  // 设置请求中
		  this.isReqing = true;
		  // 请求列表
		  this.$http.request("api/video_course/get_list", this.requestParam).then((re) => {
		    // 设置非请求中
		    this.isReqing = false;
		    // 成功结果
		    if (re.code == "success") {
		      if (re.data.last_page <= this.requestParam.page) this.isLast = true;
		      this.videoList = re.data.data;
		    }
		  });
		},
		onPullDownRefresh() {
		  // 如果请求中，不允许请求，
		  if (this.isReqing) return false;
		  // 初始化页码为1
		  this.requestParam.page = 1;
		  // 是否是最后一页
		  this.isLast = false;
		  // 设置请求中
		  this.isReqing = true;
		  // 请求列表
		  this.$http.request("api/video_course/get_list", this.requestParam).then((re) => {
		    // 设置非请求中
		    this.isReqing = false;
		    // 成功结果
		    if (re.code == "success") {
		      if (re.data.last_page <= this.requestParam.page) this.isLast = true;
		      this.videoList = re.data.data;
		    }
		  });
		  uni.stopPullDownRefresh();
		},
		onReachBottom() {
		  // 如果页码是0，避免第一页重复
		  if (this.requestParam.page < 1) return;
		  // 最后一页不请求
		  if (this.isLast) return;
		  // 请求中，不再请求
		  if (this.isReqing) return;
		  // 增加一页
		  this.requestParam.page = this.requestParam.page + 1;
		  // 设置请求中
		  this.isReqing = true;
		  // 请求列表
		  this.$http.request("api/video_course/get_list", this.requestParam).then((re) => {
		    // 设置非请求中
		    this.isReqing = false;
		    // 成功结果
		    if (re.code == "success") {
			  // 数据
		      if (re.data.last_page <= this.requestParam.page) this.isLast = true;
		      // 追加数据
		      this.videoList.push(...re.data.data);
		    }
		  });
		},
		methods: {
			goDetail(id) {
			  uni.navigateTo({
			    url: "/pages/video/detail?id=" + id,
			  });
			},
		}
	}
</script>

<style lang="less">
	.video_list{
		float: left;
		width: 750rpx;
		display: block;
		overflow: hidden;
		.video_item{
			display: block;
			width: 700rpx;
			height: 200rpx;
			overflow: hidden;
			margin-bottom: 10rpx;
			padding: 20rpx 25rpx;
			border-radius: 10rpx;
			background-color: #FFFFFF;
			.thumb_img{
				float: left;
				width: 200rpx;
				height: 200rpx;
				display: block;
				border-radius: 10rpx;
			}
			.video_info{
				float: right;
				width: 480rpx;
				display: block;
				margin-left: 20rpx;
				.video_type{
					color: #999999;
					width: 480rpx;
					display: block;
					height: 60rpx;
					font-size: 26rpx;
					line-height: 60rpx;
					.to_learn{
						color: #66b66A;
						float: right;
						border: none;
						width: 140rpx;
						height: 40rpx;
						font-size: 26rpx;
						margin-top: 10rpx;
						line-height: 40rpx;
						padding: 0rpx 0rpx;
						text-align: center;
						border-radius: 10rpx;
						background-color: #E8F4E8;
					}
					.to_learn::after{
						border: none;
					}
				}
				.video_title{
					width: 480rpx;
					display: block;
					height: 80rpx;
					font-size: 32rpx;
					overflow: hidden;
					font-weight: bold;
					line-height: 40rpx;
					text-overflow: ellipsis;
				}
				.video_time{
					color: #999999;
					width: 480rpx;
					display: block;
					height: 60rpx;
					font-size: 26rpx;
					line-height: 60rpx;
					.after_exam{
						float: right;
						border: none;
						width: 140rpx;
						height: 50rpx;
						font-size: 26rpx;
						margin-top: 5rpx;
						line-height: 50rpx;
						padding: 0rpx 0rpx;
						text-align: center;
						border-radius: 10rpx;
						color: #66b66A;
						background-color: #E8F4E8;
					}
					.after_exam::after{
						border: none;
					}
				}
			}
		}
	}
	.contact_follow{
		bottom: 30%;
		right: 20rpx;
		width: 100rpx;
		height: 100rpx;
		display: block;
		position: fixed;
		border-radius: 50%;
		background-color: #1296DB;
		.contact_btn{
			border: none;
			width: 100rpx;
			color: #FFFFFF;
			height: 100rpx;
			padding: 0rpx 0rpx;
			line-height: 100rpx;
			text-align: center;
			border-radius: 50%;
			background-color: #1296DB;
		}
		.contact_btn::after{
			border: none;
		}
	}
</style>