teaching-uniapp/pages/mineCollNew/mineCollNew.vue

<template>
	<view class="mineCollNew">
		<statusBar :item="navBarData"></statusBar>
		<view class="top">
			<view class="left" @click="acpag" :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="clapag" :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>
		<swiper class="scroll-view-height" @change="swipeIndex" :current="current" :duration="300">
			<swiper-item>
				<scroll-view scroll-y="true" @scrolltolower="lower" style="height: 100%;">
					<view class="">
						<view class="listBlock1" v-for="(i,index) in aclist" :key="index+'a'" @click="gotoDetail"
							:data-aid="i.acId">
							<view class="img cell-img">
								<image :src="i.pic" mode="aspectFill"></image>
								<image class="star" @click.stop="coll" :data-e="i"
									:src="pic_coll2" mode=""></image>
							</view>

							<view class="right">
								<view class="title">
									<!-- <view class="tag bqZ-font">{{i.acshape}}</view> -->
									<view class="bqZ-font" :class="i.acshape=='线下活动'?'tag':'tag1'"> {{i.acshape}}</view>
									<view class="titTxt btn-font" style="">
										{{i.acName}}
									</view>
								</view>

								<view class="introduce">
									<view class="bri">
										{{ i.brief }}
									</view>
									<view class="tim">
										{{ i.create_at }}
									</view>
								</view>


								<view class="operate">
									<view class="left">
										<view class="add fz-font">已报名{{i.bnum}}人</view>
									</view>
									<view class="Oright" @click.stop="gotoLink" :data-link="i.link">
										<view class="text">查看详情</view>
										<view class="arrow">
											<image
												src="https://teacherapi.cocorobo.cn/teaching-file/static/mine/arrow-right-blue.png"
												mode="aspectFill"></image>
										</view>
									</view>

								</view>
							</view>
						</view>
					</view>
					<view class="loading">
						<view v-if="newsLoading==1">数据加载中...</view>
						<view v-if="newsLoading==2">没有更多了~~</view>
					</view>
				</scroll-view>
			</swiper-item>

			<swiper-item>
				<scroll-view scroll-y="true"  @scrolltolower="cllower" style="height: 100%;">
					<view class="classListFlex">
						<view class="cont" @click="gotoWeb" v-for="(item, index) in classlist" :index="index"
							:key="index" :data-kid="item.href">
							<image class="star" :src="pic_coll2" @click.stop="collcl" :data-e="item" mode="aspectFill">
							</image>
							<image class="img" :src="item.img" mode="aspectFill" />
							<view class="tit btn-font">{{ item.ctit }}</view>
							<view class="teacher fz-font">{{ item.school }}</view>
						</view>
					</view>
					<view class="loading">
						<view v-if="clLoading==1">数据加载中...</view>
						<view v-if="clLoading==2">没有更多了~~</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>

		<!-- <view class="" style="height: 68rpx;width: 750rpx;">

		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navBarData: {
					title: '我的收藏',
					btn: 1
				},
				current: 0, //课程活动切换
				info1: "info1", //类名
				info2: "info2",

				aclist: [], //活动数据list
				classlist: [], //课程数据list


				// 收藏活动list
				collArr: [],
				// 收藏课程list
				collArrcl: [],

				// 触底加载动画提示
				newsLoading: 0, //0默认值  1加载中 2没有更多了
				currentPage: 1,

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

				pic_coll: 'https://teacherapi.cocorobo.cn/teaching-file/static/Stara.png',
				pic_coll2: 'https://teacherapi.cocorobo.cn/teaching-file/static/mine/Collect_yellow.png',
			};
		},
		methods: {
			// 获取活动数据
			getData() {
				let data = {
					oid: this.$store.state.user.openid, //用户id
					type: 0,
					page: this.currentPage, //下拉获取更多的备用字段
					lim: 15 //一次获取多少数据
				}
				this.$request('/selectCollAcList', 'POST', data).then(res => {
					console.log('获取活动数据', res);
					if (!res[0].length) {
						this.newsLoading = 2
					} else {
						this.newsLoading = 0
					}
					this.aclist = [...this.aclist, ...res[0]]
				})
			},
			// 获取课程数据
			getTeachData() {
				// console.log('触发课程收藏事件');
				let data = {
					oid: this.$store.state.user.openid, //用户id
					type: 1,
					page: this.clcurrentPage, //下拉获取更多的备用字段
					lim: 15 //一次获取多少数据
				}
				this.$request('/selectOperatorTech', 'POST', data).then(res => {
					console.log('获取课程数据', res);
					// 每次调用前清零，防止push叠加错误
					// this.classlist = []

					if (!res[0].length) {
						this.clLoading = 2
					} else {
						this.clLoading = 0
					}

					this.classlist = [...this.classlist,...res[0]]
					// this.classlist = res[0]
					// console.log(this.collArr);
				})
			},
			
			// 跳转活动详情页
			gotoDetail(e) {
				let aid = e.currentTarget.dataset.aid;
				uni.navigateTo({
					url: `/pages/activityDetailNew/activityDetailNew?acId=${aid}`
				});
			},
			// 查看课程外部链接
			gotoWeb(e) {
				// return console.log('aaaaaa', e.currentTarget.dataset);
				let acid = e.currentTarget.dataset.kid
				uni.navigateTo({
					url: "/pages/skipone/skipone?url=" + encodeURIComponent(acid),
				});

			},


			// 取消活动收藏事件
			coll(event) {
				let aId = event.currentTarget.dataset.e.acId

				let data = {
					acid: aId,
					oid: this.$store.state.user.openid, //用户id
					ty: 0
				}

				this.$request('/deleteOperator', 'POST', data).then(res => {
					console.log(res);
					this.aclist = this.aclist.filter(e => {
						return e.acId != aId
					})
					// 防止一直取消收藏导致触发不了触底刷新
					if (this.aclist.length < 15) {
						this.lower()
					}

					// this.getData()
				})
			},
			// 取消课程收藏事件
			collcl(event) {
				let cId = event.currentTarget.dataset.e.cid

				let data = {
					cid: cId,
					oid: this.$store.state.user.openid, //用户id
					ty: 1
				}
				
				this.$request('/deleteOperator', 'POST', data).then(res => {
					console.log('取消课程收藏',res);
					this.classlist = this.classlist.filter(e => {
						return e.cid != cId
					})
					// 防止一直取消收藏导致触发不了触底刷新
					if (this.classlist.length < 15) {
						this.cllower()
					}
				})
			},
			// 活动触底加载更多
			lower() {
				console.log('活动没触底？');
				if (this.newsLoading == 2) return
				this.newsLoading = 1
				this.currentPage++
				setTimeout(this.getData, 1000)
			},
			// 课程触底加载更多
			cllower() {
				console.log('课程没触底？');
				if (this.clLoading == 2) return
				this.clLoading = 1
				this.clcurrentPage++
				setTimeout(this.getTeachData, 1000)
			},
			//跳转到第三方链接
			gotoLink(e){
				let link = e.currentTarget.dataset.link;
				uni.navigateTo({
					url: "/pages/skipone/skipone?url=" + encodeURIComponent(link),
				});
			},
			swipeIndex(index) {
				this.current = index.detail.current;
			},
			// 区域滑动
			acpag() {
				this.current = 0;
			},
			clapag() {
				this.current = 1;
			},
		},
		onLoad() {
			// this.getDatacl()
			// this.getColldata()
			// 获取数据
			this.getData()
			this.getTeachData()
		}
	}
</script>

<style lang="scss" scoped>
	.mineCollNew {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.classListFlex {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 30rpx;
		}

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

			.star {
				position: absolute;
				right: 30rpx;
				top: 30rpx;
				width: 30rpx;
				height: 30rpx;
			}

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

			.tit {
				width: 257rpx;
				margin: 10rpx 0;
				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;
			}

			.mon {
				font-size: 34rpx;
				color: rgba(246, 135, 23, 1);
				font-weight: 34rpx;
				margin-top: 10rpx;

				.cost {
					font-weight: 40rpx;
				}
			}
		}

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

		.top {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin: 0;
			background-color: #ffffff;
			padding: 10px 150rpx;
			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;
		}


		.listBlock1 {
			display: flex;
			justify-content: space-between;
			background-color: #ffffff;
			padding: 20rpx 30rpx;
			width: 100%;

			.img {
				width: 160rpx;
				height: 160rpx;
				flex-shrink: 0;
				position: relative;

				.star {
					position: absolute;
					right: 10rpx;
					top: 10rpx;
					width: 30rpx;
					height: 30rpx;
				}

				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}

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

				.title {
					display: flex;
					width: 500rpx;
					justify-content: flex-start;
					align-items: center;
						
					.titTxt{
						flex: 1;
						font-weight: bold;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
	
					text {
						font-weight: bold;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.introduce {
					font-size: 24rpx;
					display: flex;
					justify-content: space-between;

					.bri {
						width: 250rpx;
						color: #a7a7a7;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.tim {
						color: #a7a7a7;
					}
				}

				.operate {
					display: flex;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: baseline;
						position: relative;
						width: 60%;

						.add {
							position: absolute;
							bottom: 0;
							left: 0;
							width: 100%;
							padding-left: 3rpx;
							color: rgba(0, 0, 0, 0.6) !important;
						}
					}

					.Oright {
						// width: 80px;
						display: flex;
						justify-content: flex-end;
						align-items: center;


						.text {
							font-size: 24rpx;
							color: #3081E8;
						}

						.arrow {
							display: flex;
							justify-content: center;
							margin-top: 5rpx;

							image {
								width: 32rpx;
								height: 32rpx;
							}
						}
					}


				}
			}

			.tag {
				border: 1px #00b2b6 solid;
				flex-shrink: 0;
				letter-spacing: 2rpx;
				width: 104rpx;
				height: 32rpx;
				display: flex;
				white-space: nowrap;
				justify-content: center;
				align-items: center;
				border-radius: 4rpx;
				margin-right: 10rpx;
				color: #00b2b6;
				line-height: 32rpx;
			}
			.tag1 {
				border: 1px rgba(0, 86, 168, 1) solid;
				flex-shrink: 0;
				letter-spacing: 2rpx;
				width: 104rpx;
				height: 32rpx;
				display: flex;
				white-space: nowrap;
				justify-content: center;
				align-items: center;
				border-radius: 4rpx;
				margin-right: 10rpx;
				color: rgba(0, 86, 168, 1);
				line-height: 32rpx;
			}
		}
	}
</style>