menber-center/pages/goOnEdu/course/component/courseHome/courseHome.vue

<template>
	<view class="container">
		<!-- 搜索 -->
		<u-search @search="search" :show-action="false" shape="round" placeholder="搜索您想要的内容" v-model="searchWord"></u-search>
		<!-- tabs -->
		<view style="padding-top: 20rpx;display: flex;">
			<u-tabs style="flex: 1;"  :list="tabsList" :is-scroll="true" font-size="24" :bold="false"
				inactive-color="#000000" active-color="#000000" :bar-style="{'background-color': '#2979ff'}"
				:gutter="30" height="45" v-model="currentTab" @change="changeTab"></u-tabs>
			<u-icon name="list" style="flex: 0 0 auto;padding-left: 20rpx;"></u-icon>
		</view>
		<!-- 列表 -->
		<view class="course-list">
			<view v-for="course in filterCourses" :key="course.id">
				<view class="course-item">
					<view class="course-item-image">
						<image class="course-image" :src="course.keChengTuPian" mode="aspectFill"></image>
					</view>
					<view class="course-item-content">
						<view class="course-title">{{ course.keChengMingCheng }}</view>
						<view class="course-type">{{ course.keChengLeXing }}</view>
						<view class="course-teacher">
							<u-icon name="account" size="28"></u-icon>
							{{ course.shouKeZhe }}
						</view>
						<view class="course-date">
							<u-icon name="clock" size="28"></u-icon>
							{{ getDateWeek(course.shouKeShiJian) }}
						</view>
						<view class="course-price">￥{{ course.jiaGe }}元</view>
						<button :class="['button', getButtonClass(course)]">{{ getButtonText(course) }}</button>
					</view>
				</view>
				<u-line />
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	const searchWord = ref("")
	const tabsList = ref([{
		name: '全部'
	}, {
		name: '精英训练营'
	}, {
		name: '领袖锻造营'
	}, {
		name: '合规专训营'
	}]);
	const currentTab = ref(0)
	// 展示的课程
	const filterCourses = ref([]);
	const courses = ref([{
			id: 1,
			keChengMingCheng: "前端开发基础",
			keChengLeXing: "精英训练营",
			shouKeZhe: "张老师",
			shouKeShiJian: "2023-10-01",
			keChengTuPian: "https://tse3-mm.cn.bing.net/th/id/OIP-C.YKoZzgmubNBxQ8j-mmoTKAHaEK?rs=1&pid=ImgDetMain",
			jiaGe: 99.00,
			isMaiFei: true,
			isGouMai: false,
			isJieShu: false,
			isHuiYuanMianFei: false,
			isShouCang: false // 新增字段，标识是否收藏
		},
		{
			id: 2,
			keChengMingCheng: "Vue.js 从入门到精通",
			keChengLeXing: "领袖锻造营",
			shouKeZhe: "李老师",
			shouKeShiJian: "2023-09-15",
			keChengTuPian: "https://pic3.zhimg.com/v2-e52354ffdbd94a8e0a7649eacd34a788_r.jpg?source=1940ef5c",
			jiaGe: 199.00,
			isMaiFei: false,
			isGouMai: false,
			isJieShu: false,
			isHuiYuanMianFei: false,
			isShouCang: false // 新增字段，标识是否收藏
		},
		{
			id: 3,
			keChengMingCheng: "React 开发实战",
			keChengLeXing: "领袖锻造营",
			shouKeZhe: "王老师",
			shouKeShiJian: "2023-11-05",
			keChengTuPian: "https://desk-fd.zol-img.com.cn/t_s960x600c5/g4/M03/00/0C/Cg-4zFS8bC-Ie9zBADCvovJAqiEAATJ8wDX__cAMK-6184.jpg",
			jiaGe: 149.00,
			isMaiFei: false,
			isGouMai: false,
			isJieShu: false,
			isHuiYuanMianFei: true,
			isShouCang: false // 新增字段，标识是否收藏
		},
		{
			id: 4,
			keChengMingCheng: "Node.js 全栈开发",
			keChengLeXing: "合规专训营",
			shouKeZhe: "赵老师",
			shouKeShiJian: "2023-08-20",
			keChengTuPian: "https://pic3.zhimg.com/v2-e52354ffdbd94a8e0a7649eacd34a788_r.jpg?source=1940ef5c",
			jiaGe: 299.00,
			isMaiFei: false,
			isGouMai: true,
			isJieShu: true,
			isHuiYuanMianFei: false,
			isShouCang: false // 新增字段，标识是否收藏
		},
		{
			id: 5,
			keChengMingCheng: "移动端开发技巧移动端开发技巧移动端开发技巧",
			keChengLeXing: "精英训练营",
			shouKeZhe: "钱老师",
			shouKeShiJian: "2023-07-18",
			keChengTuPian: "https://desk-fd.zol-img.com.cn/t_s960x600c5/g4/M03/00/0C/Cg-4zFS8bC-Ie9zBADCvovJAqiEAATJ8wDX__cAMK-6184.jpg",
			jiaGe: 89.00,
			isMaiFei: false,
			isGouMai: true,
			isJieShu: false,
			isHuiYuanMianFei: false,
			isShouCang: false // 新增字段，标识是否收藏
		}
	]);
	// 按钮的文字
	function getButtonText(course) {
		if (course.isMaiFei) return "免费";
		if (course.isGouMai) return course.isJieShu ? "点击查看回放" : "点击查看";
		if (course.isHuiYuanMianFei) return "会员免费";
		return "点击购买";
	}
	// 按钮的样式
	function getButtonClass(course) {
		if (course.isMaiFei) return 'free';
		if (course.isGouMai) return course.isJieShu ? 'replay' : 'purchased';
		if (course.isHuiYuanMianFei) return 'member-free';
		return 'purchase';
	}
	// 日期格式：xxxx年xx月xx日（星期x）
	function getDateWeek(val) {
		const date = new Date(val);
		const daysOfWeek = ['日', '一', '二', '三', '四', '五', '六'];
		const year = date.getFullYear();
		const month = date.getMonth() + 1; // 注意：月份从0开始
		const day = date.getDate();
		const dayOfWeek = daysOfWeek[date.getUTCDay()];
		// const result = `${year}年${month}月${day}日（星期${dayOfWeek}）`
		return `${year}年${month}月${day}日（星期${dayOfWeek}）`
	}

	function changeTab(index) {
		if(index===0){
			filterCourses.value = courses.value
			return
		}
		filterCourses.value = courses.value.filter(item=> item.keChengLeXing == tabsList.value[index].name )
	}
	// 搜索
	function search(e){
		console.log(e,"searchword")
	}
	// 初始化
	function init () {
		// 初始化页面，获取数据
		filterCourses.value = courses.value
		searchWord.value = ""
	}
	onLoad(() => {
		init()
	})
</script>

<style lang="scss" scoped>
	.container {
		// padding: 20px;
	}

	.title {
		font-size: 48rpx;
		margin-bottom: 30rpx;
	}

	.course-item {
		margin: 20rpx 0;
		display: flex;
		overflow: hidden;

		.course-item-image {
			width: 200rpx;
			height: 260rpx;
			flex: 0 0 auto;
			margin-right: 20rpx;

			.course-image {
				width: 100%;
			}

		}

		.course-item-content {
			flex: 1;
			position: relative;

			view {
				margin-bottom: 15rpx;
			}

			.course-title {
				font-weight: bold;
				margin-right: 10px;
				font-size: 28rpx;
				color: #000;
			}

			.course-type,
			.course-teacher,
			.course-date,
			.course-price {
				font-size: 24rpx;
				color: #000;
			}

			.course-price {
				color: #fe0000;
				letter-spacing: 2rpx;
			}
			.button::after {
			  content: none; /* 移除内容 */
			}
			.button {
				position: absolute;
				right: 0;
				bottom: 0;
				min-width: 80px;
				padding: 0 40rpx;
				white-space: nowrap;
				height: 45rpx;
				line-height: 45rpx;
				font-size: 22rpx;
				/* padding: 0; */
				border-radius: 50rpx;
				color: white;
				border: none;
			}
			.free {
				background-color: #006af4;
			}

			.purchase {
				background-color: #fe0000;
			}

			.member-free {
				background-color: transparent;
				background-image: url('~@/static/images/bg-label.png');
				background-size: cover;
				background-repeat: no-repeat;
				color: #000;
				    height: initial;
				    padding: 6rpx 0 3rpx;
				    border-radius: 0;
			}

			.replay {
				background-color: #006af4;
			}

			.purchased {
				background-color: #006af4;
			}
		}
	}



</style>