yicangzongtai_app_240321/pages/learningClassroom/index.vue

<template>
	<view class="main">
		<navbar :config="config" backColor="#666"></navbar>
		<swiper class="swiper" circular indicator-dots autoplay>
			<swiper-item v-for="(item,index) in bannerList" :key="index">
				<image @click="imgLink(item.model_type, item.model_id, item.url, item.shop_id)" class="cover" :src="item.cover"></image>
			</swiper-item>
		</swiper>
		<view class="content">
			<view class="history" v-if="recentList.length>0">
				<view class="title-box">
					<view class="title">最近观看</view>
					<view class="right" @click="goMore">
						<text>查看更多</text>
						<text class="iconfont2">&#xe65f;</text>
					</view>
				</view>
				<scroll-view class="list" scroll-x @scroll="scroll">
					<!-- <scroll-view></scroll-view> -->
					<view class="item"  v-for="(item,index) in recentList" :key="index" @click="goDetail(item)">
						<view class="tag" v-if="item.has_vip">会员课程</view>
						<image class="cover" :src="item.study_url" mode="aspectFill"></image>
						<view class="box">
							<view class="desc">{{item.study_name}}</view>
							<view class="author"><text class="label">讲师：</text>{{item.study_teacher}}</view>
							<view class="count">
								<text class="iconfont2">&#xe709;</text>
								<text class="num">学习人次：{{item.studying_count}}次</text>
								<text style="color: transparent;height: 1px;">{{timeStamp}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<u-tabs :list="classList" name="study_type_name" :current="classIndex" @change="changeClass"
				active-color="#22A834" font-size="30" :style="`top: calc(${statusBarHeight}px + 44px)`"></u-tabs>
			<view class="class-list">
				<view class="item-box" v-for="(item,index) in list" :key="index">
					<view class="item" @click="goDetail(item)">
						<view class="tag" v-if="item.has_vip">会员专享</view>
						<image class="cover" :src="item.study_url" mode="aspectFill"></image>
						<view class="box">
							<view class="desc">{{item.study_name}}</view>
							<view class="author"><text class="label">讲师：</text>{{item.study_teacher}}</view>
							<view class="count">
								<text class="iconfont2">&#xe709;</text>
								<text class="num">学习人次：{{item.studying_count}}次</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view>
				<noData v-if="list<=0"></noData>
				<u-loadmore v-else :status="status" />
			</view>
		</view>
	</view>
</template>

<script>
	import noData from "@/components/noData/nodata.vue"
	export default {
		components:{noData},
		data() {
			return {
				//手机状态栏高度
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				config: {
					back: true,
					title: '公益讲堂',
					color: '1a1a1a',
					backgroundColor: [1, "#fff"],
					statusBarFontColor: 'black'
				},
				param: {
					page: 1,
					limit: 10
				},
				bannerList: [],
				classList: [],
				classIndex: 0,
				recentList: [],
				list: [],
				totalCount:0,
				status:"nomore", //加载前值为loadmore，加载中为loading，没有数据为nomore
				timeStamp:null,//时间戳
			}
		},
		onLoad() {
			this.getRecentList();
			this.getClassList();
			this.getBanner();
		},
		onPullDownRefresh() {
			this.param.page = 1;
			this.list = [];
			this.totalCount = 0;
			this.getRecentList();
			this.getClassList();
			this.getBanner();
			uni.stopPullDownRefresh();
		},
		onReachBottom(){
			if(this.status=='loadmore'){
				this.param.page++
				this.getList()
			}
		},
		methods: {
			getBanner(){
				this.$http.get('/ad/ad/getByCode/forum-banner',{})
				.then(res=>{
					if (res.code == 200) {
						this.bannerList = res.list;
					}
				})
			},
			changeClass(index) {
				this.classIndex = index;
				this.param.study_type = this.classList[index].id
				this.getList('reset')
			},
			goDetail(item) {
				uni.navigateTo({
					url: '/pages/learningClassroom/detail?id='+item.id
				})
			},
			// 最近观看列表
			getRecentList() {
				this.$http.get('/studying/studyingLately/6').then(res => {
					if (res && res.code == 200) {
						this.recentList = res.list
					}
				})
			},
			// 分类列表
			getClassList() {
				// /studyingtype/getAllStudy
				// /studyingtype/getFirstSelect
				this.$http.get('/studyingtype/getFirstSelect').then(res => {
					if (res && res.code == 200) {
						this.classList = res.data;
						this.param.study_type = this.classList[0].id
						this.getList()
					}
				})
			},
			// 获取课程列表
			getList(reset) {
				if (reset) this.param.page = 1;
				this.status='loading';
				this.$http.get('/studying/list', this.param).then(res => {
					if (res && res.code == 200) {
						if (reset) this.list = []
						this.list.push(...res.page.list);
						this.totalCount=res.page.totalCount;
						if(this.list.length<this.totalCount) this.status='loadmore';
						else this.status='nomore';
					}
				})
			},
			scroll(e){
				this.timeStamp=e.timeStamp
			},
			goMore(){
				uni.navigateTo({
					url:"/pages/learningClassroom/recentWatching"
				})
			},
			/**轮播图跳转 */
			imgLink(type, id, url, shopid) {
				if (type == "goods") {
					uni.navigateTo({
						url: "/pages/product/goods/goods?id=" + id + "&shopid=" + shopid,
					});
				} else if (type == "service") {
					// uni.navigateTo({
					// 	url: "/pages/product/goods/serviceGood?id=" + id
					// });
				} else if (type == "point_goods") {
					// uni.navigateTo({
					// 	url: "/pages/product/goods/IntegralGood?id=" + id
					// });
				} else if (type == "url") {
					if(/^http/.test(url)){
						uni.navigateTo({
							url: "/pages/index/webView?linkUrl=" + url,
						});
					}else{
						uni.navigateTo({
							url
						});
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		min-height: 100vh;
		background-color: #fdfdfd;

		.cover {
			width: 100%;
			height: 340rpx;
			background-color: #f2f2f2;
		}

		.content {
			padding: 40rpx 0;

			.history {
				padding: 0 30rpx;
				margin-bottom: 40rpx;

				.title-box {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 27rpx;

					.title {
						font-size: 36rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: left;
						color: #1a1a1a;
					}

					.right {
						.more-text {
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC-Regular;
							font-weight: 400;
							text-align: right;
							color: #333333;
						}

						.iconfont2 {
							font-size: 27rpx;
						}
					}
				}

				.list {
					// overflow-x: auto;
					overflow-y: hidden;
					white-space: nowrap;
					padding-bottom: 4rpx;
					.item {
						display: inline-block;
						width: 317rpx;
						border-radius: 16rpx;
						overflow: hidden;
						margin-right: 20rpx;
						background-color: white;
						filter: drop-shadow(2rpx 4rpx 8rpx rgba(26, 58, 70, 0.1));
						box-shadow: 0rpx 4rpx 8rpx 0rpx #f1f1f1;
						position: relative;

						.tag {
							background: #138e46;
							color: white;
							border-radius: 0px 16rpx 0px 16rpx;
							padding: 0 10rpx;
							height: 41rpx;
							width: fit-content;
							line-height: 41rpx;
							font-size: 24rpx;
							position: absolute;
							top: 0;
							right: 0;
							z-index: 1;
						}

						.cover {
							width: 317rpx;
							height: 292rpx;
							background-color: #f2f2f2;
						}

						.box {
							padding: 5rpx 26rpx 38rpx 26rpx;

							.desc {
								font-size: 24rpx;
								font-family: PingFang SC, PingFang SC-Regular;
								font-weight: 400;
								text-align: left;
								color: #333333;
								line-height: 36rpx;
								height: 72rpx;
								margin-bottom: 5rpx;
								white-space: normal;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
							}

							.author {
								font-size: 24rpx;
								font-family: PingFang SC, PingFang SC-Regular;
								font-weight: 400;
								color: #808080;
								line-height: 34rpx;

								.label {
									color: #1a1a1a;
								}
							}

							.count {
								.iconfont2 {
									font-size: 35rpx;
									color: #2DB62B;
									vertical-align: middle;
								}

								.num {
									font-size: 24rpx;
									font-family: PingFang SC, PingFang SC-Regular;
									font-weight: 400;
									text-align: left;
									color: #999999;
									line-height: 24rpx;
									vertical-align: middle;
								}
							}
						}
					}
				}
			}
		}

		.u-tabs {
			position: sticky;
			top: 0;
			z-index: 50;
		}

		.class-list {
			display: flex;
			justify-content: space-between;
			padding: 27rpx 30rpx 30rpx 30rpx;
			flex-wrap: wrap;

			.item-box {
				width: 336rpx;
			}

			.item {
				display: block;
				width: 100%;
				border-radius: 16rpx;
				overflow: hidden;
				margin: 0 20rpx 35rpx 0;
				background-color: white;
				filter: drop-shadow(1px 2px 4px rgba(26, 58, 70, 0.1));
				box-shadow: 0rpx 4rpx 8rpx 0rpx #f1f1f1;
				position: relative;

				.tag {
					background: #138e46;
					color: white;
					border-radius: 0px 16rpx 0px 16rpx;
					padding: 0 10rpx;
					height: 41rpx;
					width: fit-content;
					line-height: 41rpx;
					font-size: 24rpx;
					position: absolute;
					top: 0;
					right: 0;
					z-index: 1;
				}

				.cover {
					width: 100%;
					height: 240rpx;
					background-color: #f2f2f2;
				}

				.box {
					padding: 5rpx 26rpx 38rpx 26rpx;

					.desc {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						text-align: left;
						color: #333333;
						line-height: 36rpx;
						height: 72rpx;
						margin-bottom: 5rpx;
						white-space: normal;
					}

					.author {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						color: #808080;
						line-height: 34rpx;

						.label {
							color: #1a1a1a;
						}
					}

					.count {
						.iconfont2 {
							font-size: 35rpx;
							color: #2DB62B;
							vertical-align: middle;
						}

						.num {
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC-Regular;
							font-weight: 400;
							text-align: left;
							color: #999999;
							line-height: 24rpx;
							vertical-align: middle;
						}
					}
				}
			}
		}
	}
	.no-data-view{
		margin-top:20rpx !important;
	}
	/deep/ .u-scroll-box >view{
		border-bottom: 1rpx solid #e6e6e6;
	}
</style>