teaching-uniapp/pages/resource/resource.vue

<template>
	<view class="resource">
		<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" :duration="300">
			<swiper-item>
				<scroll-view scroll-y="true" refresher-enabled='true' :refresher-triggered="trigger"
					@refresherrefresh='repulling' @scrolltolower="relower" style="height: 100%;">
					<view class="">
						<teaching-case ref="reso" :acList='filteredClassList'></teaching-case>
					</view>
					<view class="loading">
						<view v-if="reLoading==1">数据加载中...</view>
						<view v-if="reLoading==2">没有更多了~~</view>
					</view>
				</scroll-view>
			</swiper-item>

			<swiper-item>
				<scroll-view scroll-y="true" refresher-enabled='true' :refresher-triggered="putrigger"
					@refresherrefresh='purepulling' @scrolltolower="tealower" style="height: 100%;">
					<view class="">
						<teaching-case ref="tech" :acList='filteredClassList2'></teaching-case>
					</view>
					<view class="loading">
						<view v-if="teaLoading==1">数据加载中...</view>
						<view v-if="teaLoading==2">没有更多了~~</view>
					</view>
				</scroll-view>
			</swiper-item>

			<swiper-item>
				<scroll-view scroll-y="true" style="height: 100%;">
					<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: "", // 搜索文本
				pic_coll: 'https://teacherapi.cocorobo.cn/teaching-file/static/Stara.png',
				pic_coll2: 'https://teacherapi.cocorobo.cn/teaching-file/static/mine/Collect_yellow.png',

				// 资源库
				classList: [],

				// 精品课程
				classList2: [],

				reLoading: 0, //0默认值  1加载中 2没有更多了
				recurrentPage: 1, //页数

				teaLoading: 0, //0默认值  1加载中 2没有更多了
				teacurrentPage: 1,

				// 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
				trigger: false, //专题
				putrigger: false, //常规
			};
		},
		// 模糊搜索
		computed: {
			filteredClassList() {
				const filteredList = this.classList.filter((item) =>
					item.ctit.includes(this.searchText)
				);
				return this.searchText ? filteredList : this.classList;
			},
			filteredClassList2() {
				const filterdList2 = this.classList2.filter((item) =>
					item.ctit.includes(this.searchText)
				);
				return this.searchText ? filterdList2 : this.classList2;
			},

		},
		methods: {
			// 资源库下拉刷新
			repulling() {
				this.trigger = true
				// this.isrepulling = true
				setTimeout(() => {
					this.trigger = false;
				}, 1000);

				// 资源库
				this.classList = []
				this.reLoading = 0 //0默认值  1加载中 2没有更多了
				this.recurrentPage = 1 //页数



				this.getreList()
			},
			// 精品慕课下拉刷新
			purepulling() {
				this.putrigger = true
				// this.isrepulling = true
				setTimeout(() => {
					this.putrigger = false;
				}, 1000);

				// 精品课程
				this.classList2 = []
				this.teaLoading = 0 //0默认值  1加载中 2没有更多了
				this.teacurrentPage = 1

				this.getteaList()
				console.log(111);
			},
			// 获取资源库
			getreList() {
				let data = {
					openid: uni.getStorageSync('oId'),
					ty: 0,
					page: this.recurrentPage,
					lim: 15
				}
				this.$request('/selectResource', "POST", data).then(res => {
					console.log('获取资源库', res);
					if (!res[0].length) {
						this.reLoading = 2
					} else {
						this.reLoading = 0
					}
					this.classList = [...this.classList, ...res[0]]
					// this.classList2 = res[1]
				})
			},
			// 获取精品慕课
			getteaList() {
				let data = {
					openid: uni.getStorageSync('oId'),
					ty: 1,
					page: this.teacurrentPage,
					lim: 15
				}
				this.$request('/selectResource', "POST", data).then(res => {
					console.log('获取资源库', res);
					if (!res[0].length) {
						this.teaLoading = 2
					} else {
						this.teaLoading = 0
					}
					this.classList2 = [...this.classList2, ...res[0]]
					// this.classList2 = res[1]
				})
			},
			// 资源库触底
			relower() {
				console.log('没触底？');
				if (this.reLoading == 2) return
				this.reLoading = 1
				this.recurrentPage++
				setTimeout(this.getreList, 1000)
			},
			// 精品慕课触底
			tealower() {
				console.log('没触底？');
				if (this.teaLoading == 2) return
				this.teaLoading = 1
				this.teacurrentPage++
				setTimeout(this.getteaList, 1000)
			},

			swipeIndex(index) {
				this.current = index.detail.current;
			},
			// 区域滑动
			phoneLogin() {
				this.current = 0;
			},
			accountLogin() {
				this.current = 1;
			},
			costClass() {
				this.current = 2;
			}
		},
		onLoad() {
			// this.classList: []

			// 精品课程
			// this.classList2: []

			// this.reLoading: 0 //0默认值  1加载中 2没有更多了
			// this.recurrentPage: 1 //页数

			// this.teaLoading: 0 //0默认值  1加载中 2没有更多了
			// this.teacurrentPage: 1
			this.getreList()
			this.getteaList()


		},
		onShow() {
			// 精品课程
			// this.classList2= []
			// this.teaLoading= 0 //0默认值  1加载中 2没有更多了
			// this.teacurrentPage= 1

			// 资源库
			// this.classList= []
			// this.reLoading= 0 //0默认值  1加载中 2没有更多了
			// this.recurrentPage= 1 //页数



			this.getAllMessage() // 调用app.js中的方法
			// 获取收藏
			this.$refs.reso.getdata()
			this.$refs.tech.getdata()
		}
	};
</script>

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

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

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

		}

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

				.yun {
					width: 134rpx;
					height: 32rpx;
					position: absolute;
					left: 0;
					bottom: -10rpx;

					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;

		}
	}
</style>