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 ref="listBlock1" :classList="classList"></listBlock1>
				<!-- {{classList}} -->
				<!-- {{activeList}} -->
			</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: [],
				classList: []
			};
		},
		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]
				})
			},
			// 获取推荐课程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]
					
					console.log('推荐课程',this.classList);
				})
			},
			// 跳转到推荐课程查看更多
			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()
			this.$refs.listBlock1.getdata()
		}
	};
</script>

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

		// .listBlock1PIC {
		// 	width: 160rpx;
		// 	height: 160rpx;
		// 	border-radius: 10rpx;
		// }

		.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>