teaching-uniapp/pages/index/index.vue

<template>
	<view class="content">
		<statusBar :item="navBarData"></statusBar>
		<!-- 消息提示 -->
		<msgPop></msgPop>

		<view class="top">
			<image src="https://teacherapi.cocorobo.cn/teaching-file/static/yym/Rectangle25.png" mode="aspectFill"
				@click="gotoHome">
			</image>
		</view>
		<view class="sortBlock">

			<view class="sortCostcon" @click="gotoCost">
				<view class="sortCostcontent">
					<view class="costTit">
						收费专区
					</view>
					<view class="costbri">
						<text class="di">暂未开放</text>
					</view>
				</view>

				<view class="costimgblc">
					<image src="../../static/Framezzz.png" class="costImg" mode="aspectFill"></image>
				</view>
			</view>

			<view class="sortleft">
				<view :class="item.cla" v-for="(item,index) in sortList" @click="gotoTab" :data-index="item">
					<!-- <image class="sortImg" src="../../static/Rectangle 937.png" mode="aspectFill"></image> -->
					<view class="sortcontent">
						<view class="contentl">
							<view class="tit">
								{{item.tit}}
							</view>
							<view class="bri">
								<text :class="item.briCla">{{item.bri}}</text>
							</view>
						</view>
						<view class="sortleftImgBlock">
							<image class="sortleftImg" :src="item.img" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>

		</view>


		<viewX-Case>
			<template #title>
				<view class="title three-font">推荐内容</view>
			</template>
			<template #lookMore>
				<view class="lookMore fz-font" @click="listBlock1More">查看更多</view>
			</template>
			<template #teaching>
				<!-- 推荐课程组件 -->
				<listBlock1 ref="listBlock1" :classList="classList"></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 显示
				},
				
				// 推荐课程
				classList: [],
				sortList: [{
						tit: '活动专区',
						bri: '精彩纷呈',
						img: '../../static/Framehhh.png',
						cla: 'sortcon',
						briCla: 'di'
					},
					{
						tit: '课程专区',
						bri: '海量资源',
						img: '../../static/Framesss.png',
						cla: 'sortcon sortcon2',
						briCla: 'di2'
					}
				]
			};
		},
		methods: {
			gotoTab(e) {
				console.log(e.currentTarget.dataset.index.tit);
				let aaa = e.currentTarget.dataset.index.tit
				if (aaa == '活动专区') {
					return uni.switchTab({
						url: '/pages/activityPageNew/activityPageNew'
					})
				} else {
					uni.switchTab({
						url: '/pages/resource/resource'
					})
				}
			},
			gotoCost() {
				uni.showToast({
					title: '功能暂未开放，敬请期待',
					icon: 'none'
				})
			},

			// 获取教研室活动list 数据
			getlistBlock1Data() {
				let data = {
					openid: uni.getStorageSync('oId'),
					ty: 3,
					page: 1, //下拉获取更多的备用字段
					lim: 12 //一次获取多少数据
				}
				this.$request('/selectActivity', "POST", data).then(res => {
					console.log('推荐活动', res[0]);
					this.classList = res[0]

					// console.log('推荐课程',this.classList);
				})
			},
			// 跳转到推荐课程查看更多
			listBlock1More() {
				const value = this.$store.state.user.openid;
				if (value == '') return this.goLog()
				uni.navigateTo({
					url: "/pages/teachingList/teachingList",
				});

			},

			// 顶部大图跳转外部链接
			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),
				});
			},
			goLog() {
				uni.navigateTo({
					url: "/pages/login_Wechat/login_Wechat",
				});
			},

		},
		onLoad() {
			// this.animation = uni.createAnimation()	
		},
		onShow() {
			// 清空推荐课程
			this.classList = []
			// 获取数据
			this.getlistBlock1Data()
			this.getAllMessage() // 调用app.js中的方法

			// 因为组件没有onshow
			// 获取收藏事件
			this.$refs.listBlock1.getdata()

		}
	};
</script>

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

		// 分类区样式
		.sortBlock {
			width: 750rpx;
			margin: 20rpx 0;
			background-color: rgba(255, 255, 255, 1);
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			position: relative;

			// 收费区
			.sortCostcon {
				padding: 30rpx;
				width: 336rpx;
				height: 300rpx;
				flex-shrink: 0;
				background-image: url('../../static/Rectangle1922.png');
				background-repeat: no-repeat;
				background-size: 100%;

				.sortCostcontent {
					display: flex;
					flex-direction: column;

					.costTit {
						font-weight: 400rpx;
						font-size: 36rpx;
						height: 48rpx;
						line-height: 48rpx;
					}

					.costbri {
						color: rgba(244, 142, 143, 1);
						font-size: 24rpx;
						width: 400;
						margin: 10rpx 0;
					}
				}

				.costimgblc {
					display: flex;
					justify-content: flex-end;

					.costImg {
						width: 162rpx;
						height: 162rpx;
					}
				}

			}

			.sortleft {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 20rpx;

				.sortcon2 {
					background-image: url('https://teacherapi.cocorobo.cn/teaching-file/static/Rectangle938.png') !important;
				}

				.sortcon {
					width: 336rpx;
					height: 140rpx;
					background-image: url('https://teacherapi.cocorobo.cn/teaching-file/static/Rectangle937.png');
					background-repeat: no-repeat;
					background-size: 100%;
					display: flex;
					padding: 20rpx;

					.sortImg {
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
					}

					.sortcontent {
						display: flex;
						width: 100%;
						height: 100%;
						color: #000;

						.contentl {
							width: 70%;

							.tit {
								font-size: 36rpx;
								line-height: 48rpx;
							}

							.bri {
								font-size: 24rpx;
								height: 48rpx;
								width: 144rpx;
								line-height: 32rpx;
								position: relative;

								.di {
									position: absolute;
									bottom: 0;
									left: 0;
									color: rgba(243, 189, 91, 1);
								}

								.di2 {
									position: absolute;
									bottom: 0;
									left: 0;
									color: rgba(180, 193, 250, 1);
								}
							}
						}

						.sortleftImgBlock {
							position: relative;

							.sortleftImg {
								position: absolute;
								bottom: -10rpx;
								left: 0;
								height: 68rpx;
								width: 68rpx;
							}
						}
					}
				}
			}


		}


		// 顶部大图
		.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: 10rpx;
			}
		}


		.title {
			font-weight: bold;
		}

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