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="http://43.139.158.220:5007/img/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="http://43.139.158.220:5007/img/static/yym/Ellipse 10.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<swiper class="scroll-view-height" :style="{ height: swiper + 'px' }" @change="swipeIndex" :current="current"
			:duration="300">
			<swiper-item>
				<scroll-view scroll-y="true" :style="{ height: swiper + 'px' }">
					<view class="contBox">
						<view class="cont" @click="gotoLogin" v-for="(item, index) in filteredClassList" :index="index"
							:key="index">
							<image class="image" :src="item.url" mode="aspectFill" />
							<view class="tit btn-font">{{ item.className }}</view>
							<view class="teacher fz-font">主讲教师：{{ item.th_name }}</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>

			<swiper-item>
				<scroll-view scroll-y="true" :style="{ height: swiper + 'px' }">
					<view class="contBox">
						<view class="cont" @click="gotoWeb(index)" v-for="(item, index) in filteredClassList2"
							:index="index" :key="index">
							<image class="image" :src="item.url" mode="aspectFill" />
							<view class="tit btn-font">{{ item.className }}</view>
							<view class="teacher fz-font">主讲教师：{{ item.th_name }}</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navBarData: {
					title: "资源库",
					btn: 0,
				},
				current: 0, //登录方式切换
				info1: "info1", //类名
				info2: "info2",
				swiper: 0,
				searchText: "", // 搜索文本
				classList: [{
						url: "http://43.139.158.220:5007/img/static/pubic/img5.jpg",
						className: "创新思维",
						th_name: "吴伟",
					},
					{
						url: "http://43.139.158.220:5007/img/static/img/sc.jpg",
						className: "商机识别与创业营销 ",
						th_name: "明照凤 ",
					},
					{
						url: "http://43.139.158.220:5007/img/static/img/sg.jpg",
						className: "双创生态圈构建 ",
						th_name: "徐文泽",
					},
					{
						url: "http://43.139.158.220:5007/img/static/img/cy.jpg",
						className: "创业基础 ",
						th_name: "杨哲旗",
					},
					{
						url: "http://43.139.158.220:5007/img/static/img/ks.png",
						className: "跨界产品研发实战 ",
						th_name: "王程程",
					},
					{
						url: "http://43.139.158.220:5007/img/static/img/cs.jpg",
						className: "创造性思维与创新方法训练 ",
						th_name: "申珊珊",
					},
					{
						url: "http://43.139.158.220:5007/img/static/img/hs.jpg",
						className: "行业创业实践 ",
						th_name: "陆亚文",
					},
					{
						url: "http://43.139.158.220:5007/img/static/img/cx.png",
						className: "创新方法与训练 ",
						th_name: "张梦龙",
					},
				],
				classList2: [{
						url: "http://43.139.158.220:5007/img/static/img/ydjk.png",
						className: "运动与健康",
						th_name: "代方梅 史文文 等",
					},
					{
						url: "http://43.139.158.220:5007/img/static/img/shyy.png",
						className: "生活英语听说",
						th_name: "杨芳 张文霞",
					},
					{
						url: "http://43.139.158.220:5007/img/static/img/yyll.jpg",
						className: "科研伦理与学术规范",
						th_name: "印波",
					},
					{
						url: "http://43.139.158.220:5007/img/static/img/kylw.png",
						className: "如何写好科研论文",
						th_name: "高飞飞 张靖 等",
					},
					{
						url: "http://43.139.158.220:5007/img/static/img/Cardimg-1.jpg",
						className: "中国共产党与中华民族伟大复兴",
						th_name: "杜玉芳",
					},
					{
						url: "http://43.139.158.220:5007/img/static/img/Cardimg-2.jpg",
						className: "大国航母与舰载机",
						th_name: "岳奎志 郭卫刚 等",
					},
					{
						url: "http://43.139.158.220:5007/img/static/img/Cardimg-4.jpg",
						className: "体育与社会",
						th_name: "张德胜 李菁 等",
					},
					{
						url: "http://43.139.158.220:5007/img/static/img/Cardimg-5.png",
						className: "公共管理学",
						th_name: "张学礼",
					},
					{
						url: "http://43.139.158.220:5007/img/static/img/Cardimg-6.png",
						className: "心理学概论",
						th_name: "彭凯平",
					},
					{
						url: "http://43.139.158.220:5007/img/static/img/Cardimg-7.png",
						className: "C++语言程序设计基础",
						th_name: "郑莉 李超 等",
					},
					{
						url: "http://43.139.158.220:5007/img/static/img/Cardimg-8.png",
						className: "《资治通鉴》导读",
						th_name: "张国刚",
					},
					{
						url: "http://43.139.158.220:5007/img/static/img/Cardimg-9.png",
						className: "军事理论",
						th_name: "徐焰杜 文龙 等",
					},
					{
						url: "http://43.139.158.220:5007/img/static/img/Cardimg-10.png",
						className: "数据结构（上）",
						th_name: "邓俊辉",
					},
					{
						url: "http://43.139.158.220:5007/img/static/img/Cardimg-11.png",
						className: "不朽的艺术：走进大师与经典",
						th_name: "肖鹰 孙晶",
					},
					{
						url: "http://43.139.158.220:5007/img/static/img/Cardimg-12.jpg",
						className: "中国近现代史纲要",
						th_name: "翁贺凯",
					},
					{
						url: "http://43.139.158.220:5007/img/static/img/Cardimg-13.png",
						className: "马克思主义基本原理",
						th_name: "刘震 刘恩至 等",
					},
					{
						url: "http://43.139.158.220:5007/img/static/img/Cardimg-14.png",
						className: "数据结构（下）",
						th_name: "邓俊辉",
					},
					{
						url: "http://43.139.158.220:5007/img/static/img/Cardimg-16.png",
						className: "大学生心理健康",
						th_name: "李焰 刘丹 等",
					},
					{
						url: "http://43.139.158.220:5007/img/static/img/Cardimg-17.png",
						className: "财务分析与决策",
						th_name: "肖星",
					},
					{
						url: "http://43.139.158.220:5007/img/static/img/Cardimg-15.png",
						className: "习近平新时代中国特色社会主义思想",
						th_name: "胡鞍钢",
					},
				],
			};
		},
		// 模糊搜索
		computed: {
			filteredClassList() {
				const filteredList = this.classList.filter((item) =>
					item.className.includes(this.searchText)
				);
				return this.searchText ? filteredList : this.classList;
			},
			filteredClassList2() {
				const filterdList2 = this.classList2.filter((item) =>
					item.className.includes(this.searchText)
				);
				return this.searchText ? filterdList2 : this.classList2;
			},
		},
		methods: {
			gotoLogin() {
				// uni.navigateTo({
				// 	url: "/pages/login/login"
				// })
				const value = uni.getStorageSync("login");
				if (value == 0) {
					uni.navigateTo({
						url: "/pages/login/login",
					});
				} else if (this.current === 0) {
					const selectedItem = this.classList[this.current];
					const url =
						"https://zyk.icve.com.cn/chuangxin/18a329e8-3cd6-4983-a1aa-945a28198bc3";
					uni.navigateTo({
						url: "/pages/skipone/skipone?url=" + encodeURIComponent(url),
					});
				}
			},
			gotoWeb(index) {
				if (this.current === 1) {
					const url_header = 'https://www.xuetangx.com/course'
					const urls = [
						"/HUBU10011000132/16906642?channel=i.area.course_list_all",
						"/THU05021000376?channel=i.area.course_list_all",
						"/BNU03031000037/16905009?channel=i.area.course_list_all",
						"/THU04011000365/16906220?channel=i.area.course_list_all",
						"/zysy06011001641?channel=i.area.course_list_all",
						"/NAU08091000091/16904996?channel=i.area.course_list_all",
						"/Wuhanty04021002450/16906830?channel=i.area.course_list_all",
						"/NUDT12041000081?channel=i.area.course_list_all",
						"/THU07111000416/16905032?channel=i.area.course_list_all",
						"/THU08091000247/16906211?channel=i.area.course_list_all",
						"/THU03011000245/16905905?channel=i.area.course_list_all",
						"/NDU00001001710?channel=i.area.course_list_all",
						"/THU08091000384/16906679?channel=i.area.course_list_all",
						"/THU13011000261/16904949?channel=i.area.course_list_all",
						"/THU03051000444/16905083?channel=i.area.course_list_all",
						"/THU03051000344/16906535?channel=i.area.course_list_all",
						"/THU08091002048/16906478?channel=i.area.course_list_all",
						"/THU07111000285/16905861?channel=i.area.course_list_all",
						"/THU02031000264?channel=i.area.course_list_all",
						"/THU03051000744/16905028?channel=i.area.course_list_all"
					];
					if (index >= 0 && index < urls.length) {
						const url = urls[index];
						uni.navigateTo({
							url: "/pages/skipone/skipone?url=" + url_header + encodeURIComponent(url),
						});
					}
				}
			},

			toggleActive1() {
				this.isActive1 = true;
				this.isActive2 = false;
				this.tab = true;
			},
			toggleActive2() {
				this.isActive1 = false;
				this.isActive2 = true;
				this.tab = false;
			},
			swipeIndex(index) {
				this.current = index.detail.current;
			},
			phoneLogin() {
				this.current = 0;
			},
			accountLogin() {
				this.current = 1;
			},
		},
		onReady() {},
		onLoad() {
			if (this.navheight) {
				this.swiper = this.screenHeight - this.navheight - 140;
			} else {
				this.swiper = this.screenHeight - this.customBar - 150;
			}
		},
	};
</script>

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

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

			// background-color: rebeccapurple;
			.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 {
					// padding: 0px, 12rpx, 0px, 12rpx;
					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: 500rpx;
			display: flex;
			justify-content: space-between;
			margin: auto;
			background-color: #ffffff;
			padding: 10px 150rpx;

			// margin-bottom: 40px;
			// font-size: 18px;
			// padding-top: 0;
			.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 {

			// background-color: ;
			// height: 68vh;
			// background-color: red;
			// padding-bottom: 50px;
			.contBox {
				width: 100%;
				padding: 10px 30rpx;
				// height: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				// background-color: greenyellow;
				margin-bottom: 50px;

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