teaching-uniapp/pages/index/index.vue

<template>
	<view class="content">
		<statusBar :item="navBarData"></statusBar>
		<view class="top">
			<!-- <image src="https://teacherapi.cocorobo.cn/teaching-file/static//logo.png" mode="aspectFill"></image> -->
			<image src="https://teacherapi.cocorobo.cn/teaching-file/static//yym/Rectangle25.png" mode="aspectFill"
				@click="gotoHome">
			</image>
		</view>

		<viewX-Case class="mid">
			<template #title>
				<view class="title three-font">专题教研活动</view>
			</template>
			<template #lookMore>
				<view class="lookMore fz-font" @click="gotoActivity">查看更多</view>
			</template>
			<template #activeBlock>
				<view class="activeData" @click="gotoActivityDetail" v-for="(item, index) in activeList" :key="index"
					:data-index="index">
					<image :src="item.pic" mode="aspectFill"></image>
					<view class="activeTit sBtn-font" style="font-weight: bold">
						{{ item.acName }}
					</view>
					<view class="numData">
						<view class="proNum bqZ-font">{{ item.pers }} 人报名</view>
						<view class="price num-font">
							<text class="fz-font">￥</text>{{ item.cost }}
						</view>
					</view>
					<button class="btn sBtn-font" @click.stop="gotoHd(index)">
						立即报名
					</button>
				</view>
			</template>
		</viewX-Case>

		<viewX-Case>
			<template #title>
				<view class="title three-font">推荐课程</view>
			</template>
			<template #lookMore>
				<view class="lookMore fz-font" @click="listBlock1More">查看更多</view>
			</template>
			<template #teaching>
				<!-- <teaching-case :classList="classList"></teaching-case> -->
				<!-- 推荐课程插槽组件 -->
				<listBlock1 v-for="i in classList">
					<template #pic>
						<image :src="i.pic" mode="aspectFill"></image>
					</template>
					<template #tit>
						{{i.acName}}
					</template>
					<template #intro>
						{{ i.brief }}
					</template>
					<template #Sicon>
						<image src="http://43.139.158.220:5007/img/static/yym/Star 1 (Stroke).png"
							style="width: 28rpx; height: 26rpx" mode="aspectFill"></image>
					</template>
					<template #Dicon>
						<image src="http://43.139.158.220:5007/img/static/yym/Vector (Stroke).png" style="width: 22rpx; height: 26rpx" mode="aspectFill"></image>
					</template>
					<template #btn>
						<button class="list1btn sBtn-font" @click.stop="join">
							立即参与
						</button>
					</template>
				</listBlock1>
			</template>
		</viewX-Case>
		<view class="" style="height: 30rpx; width: 100%"> </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "Hello",
				navBarData: {
					title: "首页", //导航栏标题
					btn: 0, //是否显示返回按钮 0不显示  1 显示
				},
				activeList: [
					// {
					// 	img: "https://teacherapi.cocorobo.cn/teaching-file/static//img/1695656271245-image.png",
					// 	count: "3842",
					// 	className: "丽湖职教双创教育国际虚拟教研室启动大会暨双创教育国际论坛圆满举行",
					// 	intro: "丽湖职教双创教育国际虚拟教研室为立足全国，辐射海外的国际化教研室，围绕创新创业教育的人才培养与课程建设开展深度研究。教研室以贯彻落实立德树人根本任务，通过加强跨专业、跨校、跨地域的教研交流，推动高校协同打造国际化的精品教学资",
					// },
					// {
					// 	img: "https://teacherapi.cocorobo.cn/teaching-file/static//img/img1.png",
					// 	count: "3842",
					// 	className: "丽湖职教双创教育国际虚拟教研室2023年常规教研活动安排",
					// 	intro: "为深入贯彻落实立德树人根本任务，提升教师教学育人能力，增强教师将现代信息技术与教育教学深度融合的能力，加强跨专业、跨校、跨地域的双创教研交流，推动职教创新创业教育改革纵深发展，由深圳职业技术学院创新创业学院、联合国教科文组织...",
					// },
					// {
					// 	img: "https://teacherapi.cocorobo.cn/teaching-file/static//img/img3.png",
					// 	count: "3842",
					// 	className: "产教融合情境下的双创通识课程建设 | 丽湖职教双创教育国际虚拟教研室常规教研活动第2期顺利举行",
					// },
					// {
					// 	img: "https://teacherapi.cocorobo.cn/teaching-file/static//yym/83b48be81d4ed9c93908737496f2a54.png",
					// 	count: "3842",
					// 	className: "丽湖职教双创教育国际虚拟教研室 • 常规教研活动 第9期",
					// },
				],
				classList: [
					// {
					// 	img: "https://teacherapi.cocorobo.cn/teaching-file/static//img/jiaoxueship.jpg",
					// 	className: "教学视频",
					// 	intro: "课程简介：丽湖职教双创教育国际虚拟教研室教学视频",
					// 	url: 'https://szptxnjys.yuketang.cn/pro/portal/announcementdetail/1210'
					// },
					// {
					// 	img: "https://teacherapi.cocorobo.cn/teaching-file/static//img/jiaoxuedagang.jpg",
					// 	className: "教学大纲",
					// 	intro: "课程简介：丽湖职教双创教育国际虚拟教研室教学大纲",
					// 	url: 'https://szptxnjys.yuketang.cn/pro/portal/announcementdetail/1210'
					// },
					// {
					// 	img: "https://teacherapi.cocorobo.cn/teaching-file/static//img/peiyangfangan.jpg",
					// 	className: "培养方案",
					// 	intro: "课程简介：丽湖职教双创教育国际虚拟教研室培养方案",
					// 	url: 'https://szptxnjys.yuketang.cn/pro/portal/announcementdetail/1210'
					// },
					// {
					// 	img: "https://teacherapi.cocorobo.cn/teaching-file/static//img/xitishiti.jpg",
					// 	className: "习题试题",
					// 	intro: "课程简介：丽湖职教双创教育国际虚拟教研室习题试题",
					// 	url: 'https://szptxnjys.yuketang.cn/pro/portal/announcementdetail/1210'
					// },
				],
			};
		},
		onLoad() {},
		methods: {
			getData() {
				let data = {
					openid: uni.getStorageSync('oId'),
					ty: 2,
					page: 1, //下拉获取更多的备用字段
					lim: 6 //一次获取多少数据
				}
				this.$request('/selectActivity', "POST", data).then(res => {
					console.log(res[0]);
					// this.activeList=[...this.activeList,...res[0]]
					this.activeList = res[0].slice(0, 6);
				})
			},
			// 获取推荐课程list 数据
			getlistBlock1Data(){
				let data={
					openid:uni.getStorageSync('oId'),
					ty:3,
					page:1, //下拉获取更多的备用字段
					lim:6   //一次获取多少数据
				}
				this.$request('/selectActivity',"POST",data).then(res=>{
					console.log('推荐课程',res[0]);
					// this.activeList=[...this.activeList,...res[0]]
					this.classList=res[0]
				})
			},
			// 跳转到推荐课程查看更多
			listBlock1More() {
				const value = this.$store.state.user.openid;
				if (value == '') {
					uni.navigateTo({
						url: "/pages/login_Wechat/login_Wechat",
					});
				} else {
					uni.navigateTo({
						url: "/pages/teachingList/teachingList",
					});
				}
			},
			gotoTeDetail() {
				const value = this.$store.state.user.openid;
				if (value == '') {
					uni.navigateTo({
						url: "/pages/login_Wechat/login_Wechat",
					});
				} else {
					uni.navigateTo({
						url: "/pages/teachingDetail/teachingDetail",
					});
				}
			},
			// 跳转到专题教研活动查看更多
			gotoActivity() {
				const value = this.$store.state.user.openid;
				if (value == '') {
					uni.navigateTo({
						url: "/pages/login_Wechat/login_Wechat",
					});
				} else {
					uni.navigateTo({
						url: "/pages/activityList_2/activityList_2",
					});
				}
			},
			gotoActivityDetail(e) {
				let edata = e.currentTarget.dataset['index'];
				console.log(e.currentTarget.dataset['index'], 123);
				const clickedAcId = this.activeList[edata].acId;
				console.log(clickedAcId);
				const value = this.$store.state.user.openid;
				if (value == '') {
					uni.navigateTo({
						url: "/pages/login_Wechat/login_Wechat",
					});
				} else {
					uni.navigateTo({
						url: "/pages/teachingDetail/teachingDetail?acId=" + clickedAcId,
					});
					// const urls = [
					// 	"https://szptxnjys.yuketang.cn/pro/portal/announcementdetail/1181",
					// 	"https://szptxnjys.yuketang.cn/pro/portal/announcementdetail/1183",
					// 	"https://szptxnjys.yuketang.cn/pro/portal/announcementdetail/1210",
					// 	"https://szptxnjys.yuketang.cn/pro/portal/announcementdetail/1234",
					// ];
					// if (index >= 0 && index < urls.length) {
					// 	const url = urls[index];
					// 	uni.navigateTo({
					// 		url: "/pages/skipone/skipone?url=" + encodeURIComponent(url),
					// 	});
					// }
				}
			},
			gotoHd(index) {
				// console.log(this.$store.state.user.openid,33333333333333333);
				const value = this.$store.state.user.openid;
				if (value == '') {
					console.log(11);
					uni.navigateTo({
						url: "/pages/login_Wechat/login_Wechat",
					});
				} else {
					const urls = [
						"https://szptxnjys.yuketang.cn/pro/portal/announcementdetail/1181",
						"https://szptxnjys.yuketang.cn/pro/portal/announcementdetail/1183",
						"https://szptxnjys.yuketang.cn/pro/portal/announcementdetail/1210",
						"https://szptxnjys.yuketang.cn/pro/portal/announcementdetail/1234",
					];
					if (index >= 0 && index < urls.length) {
						const url = urls[index];
						uni.navigateTo({
							url: "/pages/skipone/skipone?url=" + encodeURIComponent(url),
						});
					}
				}
			},
			gotoHome() {
				// const web = this.classList[this.current];
				const url = "https://mp.weixin.qq.com/s/QZEGcvBn3aW7aHirMFLBQA";
				uni.navigateTo({
					url: "/pages/skipone/skipone?url=" + encodeURIComponent(url),
				});
			},

		},
		onShow() {
			this.getData()
			this.getlistBlock1Data()
		}
	};
</script>

<style lang="scss" scoped>
	.content {

		.list1btn {
			z-index: 5;
			border: none;
			padding: 0;
			text-align: center;
			// padding: 8px, 24px, 8px, 24px;
			background-color: rgba(48, 129, 232, 1);
			color: #fff;
			border-radius: 100rpx;
			float: right;
			width: 144rpx;
			height: 48rpx;
			line-height: 48rpx;
			letter-spacing: 1px;
		}

		// background-color: ;
		// background-color: #f0f2f5;
		.top {
			width: 750rpx;
			height: 288rpx;
			display: flex;
			margin-bottom: 20rpx;
			align-items: center;
			background-color: #fff;
			justify-content: center;

			image {
				height: 246rpx;
				width: 690rpx;
				border-radius: 12rpx;
			}
		}

		.mid {
			margin: 10px 0;
			height: 498rpx;

			.activeData {
				width: 290rpx;
				display: inline-block;
				padding-right: 20rpx;

				image {
					width: 100%;
					height: 80px;
					border-radius: 10px;
					margin-bottom: 10rpx;
				}

				.activeTit {
					// font-weight: 600;
					height: 64rpx;
					white-space: normal;
					/*隐藏溢出*/
					/*当文本溢出包含元素时显示省略符号来代表被修剪的文本*/
					/*规定段落中的文本不进行换行*/
					letter-spacing: 2rpx;
					display: -webkit-box;
					word-break: break-all;
					text-overflow: ellipsis;
					overflow: hidden;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					/*设置 需要显示的行数*/
				}

				.numData {
					display: flex;
					justify-content: space-between;
					align-items: baseline;

					// padding: 10rpx 0;
					.proNum {
						color: #999999;
						// font-size: 14px;
					}

					.price {
						color: #f68717;
						// font-size: 18px;
					}
				}

				.btn {
					border: none;
					padding: 0;
					float: left;
					text-align: center;
					// padding: 8px 24px 8px 24px;
					background-color: #3081e8;
					color: #fff;
					border-radius: 100rpx;
					width: 144rpx;
					height: 48rpx;
					line-height: 48rpx;
					letter-spacing: 1px;
					margin-bottom: 30rpx;
				}
			}

			.activeData:nth-child(1) {
				margin-left: 15px;
			}
		}

		.title {
			font-weight: bold;
		}

		.lookMore {
			color: #666666;
			// font-size: 14px;
		}
	}
</style>