teaching-uniapp/pages/activityPageNew/activityPageNew.vue

<template>
	<view class="activityPageNew">
		<statusBar :item="navBarData"></statusBar>

		<view class="search">
			<uni-search-bar v-model="searchText" bgColor="#f0f2f5" class="btntop" placeholder="搜索" cancelButton="none"
				clearButton="none"></uni-search-bar>
		</view>

		<view class="top">
			<view class="left" @click="phoneLogin" :class="current == 0 ? info1 : info2">
				<text class="">专题教研</text>
				<view v-if="current == 0" class="yun">
					<image src="https://teacherapi.cocorobo.cn/teaching-file/static//yym/Ellipse 10.png"
						mode="aspectFill"></image>
				</view>
			</view>
			<view class="right" @click="accountLogin" :class="current == 1 ? info1 : info2">
				<text class="">常规教研</text>
				<view v-if="current == 1" class="yun">
					<image src="https://teacherapi.cocorobo.cn/teaching-file/static//yym/Ellipse 10.png"
						mode="aspectFill"></image>
				</view>
			</view>
			<view class="right" @click="costClass" :class="current == 2 ? info1 : info2">
				<text class="">付费教研</text>
				<view v-if="current == 2" class="yun">
					<image src="https://teacherapi.cocorobo.cn/teaching-file/static//yym/Ellipse 10.png"
						mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<swiper class="scroll-view-height" @change="swipeIndex" :current="current" @scrolltolower :duration="300">
			<!-- 专题教研 -->
			<swiper-item>
				<scroll-view scroll-y="true" @scrolltolower="aclower" style="height: 100%;">
					<view class="">
						<listBlock1 ref="listBlock1" :classList="filteredClassList"></listBlock1>
					</view>
					<view class="loading">
						<view v-if="acLoading==1">数据加载中...</view>
						<view v-if="acLoading==2">没有更多了~~</view>
					</view>
				</scroll-view>

			</swiper-item>

			<!-- 常规教研 -->
			<swiper-item>
				<scroll-view scroll-y="true" @scrolltolower="pulower" style="height: 100%;">
					<view>
						<listBlock1 ref="listBlock2" :classList="filteredClassList2"></listBlock1>
					</view>
					<view class="loading">
						<view v-if="puLoading==1">数据加载中...</view>
						<view v-if="puLoading==2">没有更多了~~</view>
					</view>
				</scroll-view>
			</swiper-item>

			<!-- 付费教研 -->
			<swiper-item>
				<scroll-view scroll-y="true" style="height: 100%;">
					<!-- <view style="padding-bottom: 30rpx;"> -->
					<!-- <listBlock1 :classList="monlist" :indexId='indexId'></listBlock1> -->
					<!-- </view> -->
					<view class=""
						style="height: 100%; width: 750rpx;display: flex;justify-content: center;align-items: center;">
						<image src="../../static/Frame.png" style="width: 400rpx;height: 400rpx;" mode=""></image>
					</view>

				</scroll-view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				navBarData: {
					title: "活动",
					btn: 0,
				},
				indexId: 1,
				current: 0, //控制展示哪一个
				info1: "info1", //类名
				info2: "info2",
				// swiper: 0,
				searchText: "", // 搜索文本
				acLoading: 0, //0默认值  1加载中 2没有更多了
				accurrentPage: 1, //页数

				pucurrentPage: 1,
				puLoading: 0, //0默认值  1加载中 2没有更多了
				// 教研
				teclist: [],
				// 常规
				pulist: [],
				// 付费
				monlist: [{
					acId: "92e11d93-8778-11ee-b98c-005056b86db5",
					acName: "丽湖职教双创教育国际虚拟教研室2023年常规教研活动安排",
					acshape: "户外活动",
					avatar: "http://139.159.246.165:7006/uploads/20231122/file-1700619408170.jpeg",
					bnum: 0,
					brief: "丽湖职教双创教育国际虚拟教研室为立足全国，辐射海外的国际化教研室，围绕创新创业教育的人才培养与课程建设开展深度研究。教研室以贯彻落实立德树人根本任务，通过加强跨专业、跨校、跨地域的教研交流，推动高校协同打造国际化的精品教学资源库、优秀教学案例库、优质教师培训资源库等，全面提高教师",
					cost: "5000",
					create_at: "2023.11.20 03:11",
					pers: "15",
					pic: "http://139.159.246.165:7006/uploads/20231120/file-1700466209242.png",
					type: "1",
					username: "袁一鸣",
				}]
			};
		},
		// 模糊搜索
		computed: {
			filteredClassList() {
				const filteredList = this.teclist.filter((item) =>
					item.acName.includes(this.searchText)
				);
				return this.searchText ? filteredList : this.teclist;
			},
			filteredClassList2() {
				const filterdList2 = this.pulist.filter((item) =>
					item.acName.includes(this.searchText)
				);
				return this.searchText ? filterdList2 : this.pulist;
			},
		},
		methods: {
			aclower() {
				console.log('没触底？');
				if (this.acLoading == 2) return
				this.acLoading = 1
				this.accurrentPage++
				setTimeout(this.getTecData, 1000)
			},
			pulower() {
				console.log('没触底？');
				if (this.puLoading == 2) return
				this.puLoading = 1
				this.pucurrentPage++
				setTimeout(this.getpuData, 1000)
			},
			// 获取专题
			getTecData() {
				let data = {
					openid: uni.getStorageSync('oId'),
					ty: 1,
					page: this.accurrentPage, //下拉获取更多的备用字段
					lim: 15 //一次获取多少数据
				}
				this.$request('/selectActivity', "POST", data).then(res => {
					// console.log('专题', res[0]);
					// this.teclist = res[0]
					if (!res[0].length) {
						this.acLoading = 2
					} else {
						this.acLoading = 0
					}
					this.teclist = [...this.teclist, ...res[0]]
				})
			},
			// 获取常规
			getpuData() {
				let data = {
					openid: uni.getStorageSync('oId'),
					ty: 2,
					page: this.pucurrentPage, //下拉获取更多的备用字段
					lim: 15 //一次获取多少数据
				}
				this.$request('/selectActivity', "POST", data).then(res => {
					// console.log('常规', res[0]);
					// this.pulist = res[0]
					if (!res[0].length) {
						this.puLoading = 2
					} else {
						this.puLoading = 0
					}
					this.pulist = [...this.pulist, ...res[0]]
				})
			},
			// 获取付费
			getmonData() {
				let data = {
					openid: uni.getStorageSync('oId'),
					ty: 1,
					page: this.currentPage, //下拉获取更多的备用字段
					lim: 15 //一次获取多少数据
				}
				this.$request('/selectActivity', "POST", data).then(res => {
					// console.log('教研', res[0]);
					// this.teclist = res[0]

				})
			},
			// 区域滑动变换头部
			swipeIndex(index) {
				this.current = index.detail.current;
				// this.$refs.listBlock1.getdata()
			},
			// 触底加载更多
			// onReachBottom() {
			// 	console.log('没触底？');
			// 	if (this.newsLoading == 2) return
			// 	this.newsLoading = 1
			// 	this.currentPage++
			// 	setTimeout(this.getData, 1000)

			// },
			// 区域滑动
			phoneLogin() {
				this.current = 0;
			},
			accountLogin() {
				this.current = 1;
			},
			costClass() {
				this.current = 2;
			}
		},
		onShow() {
			// 获取收藏事件
			this.$refs.listBlock1.getdata() //专题
			this.$refs.listBlock2.getdata() //常规

			// 刷新
			// 教研
			this.teclist = []
			// 常规
			this.pulist = []
			this.accurrentPage = 1
			this.pucurrentPage = 1

			this.getpuData() //获取常规列表
			this.getTecData() //获取专题列表

			this.getAllMessage() // 调用app.js中的方法
			// 因为组件没有onshow
			// 获取订阅事件
			// this.$refs.listBlock1.getSub()
		},
	};
</script>

<style lang="scss" scoped>
	.btntop {
		width: 100%;
	}

	.activityPageNew {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.loading {
			height: 30rpx;
			text-align: center;
			padding-top: 20rpx;
			padding-bottom: 100rpx;
			font-size: 26rpx;
			color: #888;
			line-height: 2em;
		}

		.search {
			background-color: #ffffff;
			position: relative;
			display: flex;
			width: 750rpx;
			height: 88rpx;
			justify-content: center;
			align-items: center;

			.inpSer {
				width: 690rpx;
				height: 65rpx;
				margin: auto;
				background-color: rgba(240, 242, 245, 1);
				border-radius: 5rpx;
				color: rgba(0, 0, 0, 0.26);
				position: relative;

				.inpTxt {
					color: #000;
					height: 100%;
					width: 100%;
				}

				input::placeholder {
					color: #000;
				}

				.ico {
					position: absolute;
					top: 50%;
					left: 20rpx;
					transform: translate(0, -50%);
					display: flex;
					align-items: center;

					image {
						margin-right: 10rpx;
					}
				}
			}
		}

		.top {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin: auto;
			background-color: #ffffff;
			padding: 10px 60rpx;
			height: 98rpx;

			.info1 {
				font-weight: bold !important;
				position: relative;
				color: rgba(0, 0, 0, 0.8);
				font-size: 34rpx;
				line-height: 48rpx;
				width: 136rpx;
				height: 48rpx;
				text-align: center;

				// font-family: PingFang SC;
				// font-family: \9ed1\4f53;
				.yun {
					width: 134rpx;
					height: 32rpx;
					position: absolute;
					left: 0;
					bottom: -10rpx;

					// transform: translate(-50%,0%);
					// box-shadow: 0px 10rpx 30rpx 6rpx #4a97f2;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.info2 {
				color: rgba(0, 0, 0, 0.6);
				font-size: 34rpx;
				font-weight: 400;
				line-height: 48rpx;
				width: 136rpx;
				height: 48rpx;
				text-align: center;
				font-family: 微软雅黑;
			}
		}

		.scroll-view-height {
			flex: 1;
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.cont {
				background-color: #ffffff;
				width: 332rpx;
				padding: 20rpx 15rpx;
				border-radius: 10px;
				margin-bottom: 20rpx;

				image {
					width: 300rpx;
					height: 170rpx;
					border-radius: 10rpx;
				}

				.tit {
					width: 257rpx;
					margin: 10rpx 0;
					// height: 80rpx;
					font-weight: bold;
					white-space: normal;
					display: -webkit-box;
					word-break: break-all;
					text-overflow: ellipsis;
					overflow: hidden;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					/*设置 需要显示的行数*/
				}

				.teacher {
					color: #999999;
				}
			}
		}
	}
</style>