discounts-minapp/study/community/video.vue

<template>
	<view class="community">

		<!-- 列表 -->
		<zs-list class="store-box" mt="0" @load="loadMore" :status="status">
			<view class="left">
				<view class="store-item" v-for="(item, index) in list" :key="index" @click="goCourse(item.id)">
					<image class="play-icon" src="../../static/play.png" mode="widthFix"></image>
					<zs-img :src="item.courseImg" width="344rpx" height="256rpx"></zs-img>
					<view class="info">
						<view class="title">
							{{ item.courseName }}
						</view>
						<view class="user-info">
							<view class="head" mode=""> 科普视频</view>
							<view class="user-name">
								观看{{ item.viewedCount }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="right">
				<view class="store-item" v-for="(item, index) in list1" :key="index" @click="goCourse(item.id)">
					<image class="play-icon" src="../../static/play.png" mode=""></image>
					<zs-img :src="item.courseImg" width="344rpx" height="256rpx"></zs-img>
					<view class="info">
						<view class="title">
							{{ item.courseName }}
						</view>
						<view class="user-info">
							<view class="head">科普视频</view>
							<!-- <image class="head" src="../static/logo.png" mode=""></image> -->
							<view class="user-name">
								观看{{ item.viewedCount }}
							</view>
						</view>
					</view>
				</view>
			</view>

		</zs-list>

	</view>
</template>

<script>
import { videoList } from '@/api/study.js';

export default {
	data() {
		return {
			status: 'more',
			columnId: 0,
			list: [

			],
			list1: [

			],
		}
	},
	methods: {
		loadMore() {
			this.videoList()
		},
		// 课程视频
		videoList() {
			this.status = 'loading'
			videoList({
				columnId:
					this.columnId
			}).then(res => {
				if (res.state == 'Success') {
					let list = []
					let list1 = []
					res.content.records.map((item, index) => {
						if (index % 2) {
							list1.push(item)
						} else {
							list.push(item)
						}
					})
					this.list = this.list.concat(list)
					this.list1 = this.list1.concat(list1)
					let total = this.list.length + this.list1.length
					if (total >= res.content.total) {
						this.status = 'noMore'
					} else {
						this.status = 'more'
						this.query.currentPage++
					}
				}
			})
		},
		goCourse(id) {
			uni.navigateTo({
				url: '../courseDetail?id=' + id
			})
		},
	},
	onLoad(options) {
		this.columnId = options.columnId
	}
}
</script>

<style lang="scss">
.community {
	background: #FFFFFF;
	padding: 20rpx;

	.zs-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.left {}

		.right {}

		.store-item {
			box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(0, 0, 0, 0.08);
			border-radius: 16rpx;
			width: 344rpx;
			margin-top: 20rpx;
			position: relative;

			.play-icon {
				position: absolute;
				top: 20rpx;
				right: 30rpx;
				width: 30rpx;
				height: 30rpx;
				z-index: 2;
			}

			.info {
				padding: 20rpx;

				.title {
					color: #222222;
					font-size: 24rpx;
					width: 100%;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					/* 显示的最大行数 */
					overflow: hidden;
				}

				.user-info {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 20rpx;
					font-size: 20rpx;
					color: #AAAAAA;

					.head {
						font-size: 20rpx;
					}

					.user-name {
						font-size: 20rpx;
					}
				}
			}
		}
	}
}
</style>