baiyuApp/pages_enter/program.vue

<template>
	<view class="sports-page">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			:up="upOption">
			<view class="sports-list">
				<view class="sport-card" v-for="(sport, index) in sportsList" :key="index"
					@click="handleSportClick(sport)">
					<view class="card-image-wrapper">
						<image class="card-image" :src="sport.secondImg" mode="aspectFill"></image>
					</view>
					<view class="card-title">{{ sport.courseName }}</view>
					<view class="card-footer">
						<text class="play-count">{{ sport.views }}次播放</text>
						<image class="w32 h32" src="@/static/images/enter/layer_share_icon16.png"></image>
					</view>
				</view>
			</view>
			<!-- 底部安全区域 -->
			<view class="safe-area-bottom" :style="{ height: safeAreaBottom + 'px' }"></view>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		getCourseList,
		getCourseCate
	} from '@/api/course'

	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				statusBarHeight: 0,
				safeAreaBottom: 0,
				sportsList: [],
				cateId: '',
				status: 'loadmore',
				totalPage: 1,
				triggered: false,
				mescroll: null,
				downOption: { //下拉刷新
					use: true,
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					onScroll: false,
					use: true, // 是否启用上拉加载; 默认true
					page: {
						pae: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					textNoMore: "已经到底了",
					empty: {
						icon: 'https://zkzh-2025.oss-cn-beijing.aliyuncs.com/appimgs/cf4a86b913a04341bb44e34bb4d37aa2.png',
						tip: '暂无数据'
					}
				},
			}
		},
		onLoad(options) {
			if (options.cateId) {
				this.cateId = options.cateId
				this.setNavTitle(this.cateId)
			}
			this.getSystemInfo();
		},
		methods: {
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				mescroll.resetUpScroll()
			},
			upCallback(page) {
				let that = this;
				let paramsData = {
					pageNum: page.num,
					pageSize: page.size,
					limit: page.size,
					cateId: this.cateId
				};
				getCourseList(paramsData).then(res => {
					if (res.code == 200) {
						if (page.num == 1) {
							that.sportsList = res.data.list;

						} else {
							that.sportsList = that.sportsList.concat(res.data.list);
						}
						that.mescroll.endBySize(res.data.list.length, res.data.total);
					} else {
						uni.showToast({
							icon: 'none',
							title: "请求失败",
						});
						that.sportsList = null;
						that.mescroll.endErr();
					}
				});
			},
			setNavTitle(type) {
				let arr = ['', '节目', '运动', '热播剧', '戏曲评书']
				uni.setNavigationBarTitle({
					title: arr[type]
				});
			},
			getSystemInfo() {
				const systemInfo = uni.getSystemInfoSync();
				this.statusBarHeight = systemInfo.statusBarHeight || 0;
				if (systemInfo.safeArea) {
					this.safeAreaBottom = systemInfo.screenHeight - systemInfo.safeArea.bottom;
				}
			},
			handleBack() {
				uni.navigateBack();
			},
			handleSportClick(sport) {
				uni.navigateTo({
					url: `/pages/course/info?courseId=${sport.courseId}`
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.sports-page {
		width: 100%;
		min-height: 100vh;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
	}

	.status-bar {
		width: 100%;
		background-color: #ffffff;
	}

	.nav-bar {
		width: 100%;
		height: 88rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		border-bottom: 1rpx solid #f0f0f0;

		.nav-back {
			position: absolute;
			left: 30rpx;
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.nav-title {
			font-size: 36rpx;
			font-weight: 500;
			color: #333333;
		}
	}

	.page-content {
		flex: 1;
		width: 100%;
	}

	.sports-list {
		width: 100%;
		padding: 30rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 30rpx;
	}

	.sport-card {
		width: 100%;
		background-color: #ffffff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		display: flex;
		flex-direction: column;
	}

	.card-image-wrapper {
		width: 100%;
		height: 320rpx;
		position: relative;
		overflow: hidden;
	}

	.card-image {
		width: 100%;
		height: 100%;
		background-color: #f0f0f0;
	}

	.image-overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
	}

	.overlay-title {
		font-size: 40rpx;
		font-weight: bold;
		color: #ffffff;
		text-align: center;
		margin-bottom: 12rpx;
		border-bottom: 4rpx solid;
		padding-bottom: 8rpx;
		text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.5);
		line-height: 1.3;
	}

	.overlay-banner {
		background-color: #FF69B4;
		color: #ffffff;
		padding: 8rpx 16rpx;
		border-radius: 8rpx;
		font-size: 22rpx;
		text-align: center;
		width: fit-content;
		margin: 0 auto;
	}

	.image-year {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #ffffff;
		text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.5);
	}

	.card-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333333;
		padding: 20rpx;
		padding-bottom: 12rpx;
	}

	.card-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx 20rpx;
	}

	.play-count {
		font-size: 24rpx;
		color: #999999;
	}

	.safe-area-bottom {
		width: 100%;
		height: 40rpx;
	}
</style>