chanyishenghuo-uniapp/pages/course/index.vue

<template>
	<view class="konwledge-index index">
		<view class="content-box">
			<view class="tab-box" :class="isFixedTop ? 'fixed' : ''">
				<view class="tabs">
					<scroll-view class="scroll-view_H" scroll-x="true" scroll-with-animation :scroll-left='scrollLeft'>
						<view class="tab-item scroll-item" :class="index == tabSelect ? 'tab-item-active' : ''" v-for="(item,index) in tabList"
						 :key="item.id" @click="tabChange(item,index)">{{item.categoryName}}</view>
					</scroll-view>
				</view>
				<SecondMenu :menuList="secondMenu" :active.sync="active" @secondMenuClick="secondMenuClick" v-if="secondMenu.length > 0">
				</SecondMenu>
			</view>
			<view class="bangdan-box" v-if="studyList.length > 0">
				<view class="active-word"><image src="../../static/tit5.png" mode=""></image></view>
				<view class="bangdan-list">
					<scroll-view class="scroll-view_H" scroll-x="true" v-if="studyList.length > 0">
						<view class="bangdan-item" v-for="(item,index) in studyList" :key="index"
						 @click="toStudyDetail(item.id)">
							<view>
								<view class="name">{{item.listName}}</view>
								<view class="time">{{item.listStartTime.split(' ')[0]}} 至 {{item.listEndTime.split(' ')[0]}}</view>
							</view>
							<view class="acea-row row-between-wrapper" style="width: 100%;margin-top: 30rpx;">
								<view class="jifen">
									<text class="fz44">{{item.integral}}</text>
									积分
								</view>
								<view class="signin-btn">报名参加</view>
							</view>
						</view>
					</scroll-view>
					<!-- <view class="no-content" v-if="studyList.length == 0">暂无内容...</view> -->
				</view>
			</view>
			<view class="knowledge-list">
				<view class="active-word2"><image src="../../static/tit6.png"></image></view>
				<view class="no-content" v-if="courseList.length == 0">暂无内容...</view>
				<view class="knowledge-item acea-row" v-for="(item,index) in courseList" :key="index" @click="toDetail(item.id)">
					<view class="img-box">
						<image :src="item.coverImg" mode="aspectFill"></image>
					</view>
					<view class="knowledge-info-box">
						<view class="title line1">{{item.courseName}}</view>
						<view class="time">{{utils.spl(item.courseStartTime)[0]}}至{{utils.spl(item.courseEndTime)[0]}}</view>
						<view class="address">{{item.coursePlace}}</view>
						<view class="type-box acea-row row-between row-middle">
							<!-- <view class="price">￥{{item.courseCharge}}</view> -->
							<!-- <view class="price">{{item.levelName}}</view> -->
							<view></view>
							<!-- <view class="price colG" v-if="item.chargeType == 0">免费</view> -->
							<view class="signin-btn yellow">去报名</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script module="utils" lang="wxs" src="../../utils/subutil.wxs"></script>
<script>
	import WucTab from '@/components/wuc-tab/wuc-tab.vue';
	import SecondMenu from '../knowledge/components/secondMenu.vue';
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	import {
		getCategory,
		getArticle,
		getStudyList,
		getCourses
	} from '@/api/knowledge';
	export default {
		computed: mapGetters(['userInfo']),
		data() {
			return {
				windowWidth: '',
				isFixedTop: false,
				currentTab: null,
				tabSelect: 0,
				scrollLeft: 200,
				tabList: [],
				secondMenu: [],
				active: null,
				courseList: [],
				studyList: [],
				categoryTitle: '',
			}
		},
		components: {
			WucTab,
			SecondMenu
		},
		onLoad() {
			//获取节点距离顶部的距离
			uni.createSelectorQuery().select('.tab-box').boundingClientRect((res) => {
				if (res && res.top > 0) {
					this.tabInitTop = res.top;
				}
			}).exec();
			getCategory().then((res) => {
				this.tabList = res.data
				this.$set(this, 'secondMenu', res.data[0].categoryList)
				this.$set(this, 'currentTab', res.data[0])
				this.categoryTitle = res.data[0].categoryName;
				if (res.data[0].categoryList.length > 0) {
					this.$set(this, 'active', res.data[0].categoryList[0].id)
					this.categoryTitle = this.categoryTitle + '·' + res.data[0].categoryList[0].categoryName
				} else {
					// this.$set(this, 'tabSelect', 0)
					// this.scrollLeft = 0
				}
			}).then(() => {
				this.getStudyList()
				this.getCourses()
			})
		},
		onShow() {

		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowWidth = res.windowWidth;
				}
			})
		},
		methods: {
			onPageScroll(res) {
				let scrollTop = res.scrollTop;
				var isSatisfy = scrollTop >= this.tabInitTop ? true : false;
				//只有处于吸顶的临界值才会不相等
				if (this.isFixedTop === isSatisfy) {
					return false;
				}
				this.isFixedTop = isSatisfy
			},
			toStudyDetail(id) {
				this.$yrouter.push({
					path: '/pages/study/detail',
					query: {
						id: id,
					},
				})
			},
			toDetail(id) {
				this.$yrouter.push({
					path: '/pages/course/detail',
					query: {
						id: id,
					},
				})
			},
			getStudyList() {
				uni.showLoading({
					title: '正在加载中...'
				})
				var cid = null;
				this.active == null ? cid = this.currentTab.id : cid = this.active
				getStudyList({
					categoryId: cid,
					listState: 0
				}).then((res) => {
					if (res.success) {
						this.studyList = res.data
					}
					uni.hideLoading()
				})
			},
			getCourses() {
				uni.showLoading({
					title: '正在加载中...'
				})
				var cid = null;
				this.active == null ? cid = this.currentTab.id : cid = this.active
				getCourses({
					categoryId: cid,
					listState: 0
				}).then((res) => {
					if (res.success) {
						this.courseList = res.data
					}
					uni.hideLoading()
					uni.stopPullDownRefresh()
				})
			},
			tabChange(item, index) {
				this.tabSelect = index
				this.currentTab = item
				this.moveTo(index)
				this.categoryTitle = item.categoryName;
				if (item.categoryList.length > 0) {
					this.$set(this, 'active', item.categoryList[0].id)
					this.categoryTitle = item.categoryList[0].categoryName;
				}
				this.secondMenu = item.categoryList;
				this.getStudyList()
				this.getCourses()
			},
			// 将点击元素移动到中间
			moveTo(index) {
				const query = uni.createSelectorQuery().in(this)
				query.selectAll(`.scroll-item`).boundingClientRect(rect => {
					const windowWidth = this.windowWidth // 屏幕宽度
					let width = 0
					// 循环获取计算当前点击的标签项距离左侧的距离
					for (let i = 0; i < index; i++) {
						width += rect[i].width
					}
					// 当大于屏幕一半的宽度则滚动，否则就设置位置为0
					if (width > windowWidth / 2) {
						this.scrollLeft = width + rect[index].width / 2 - windowWidth / 2
					} else {
						this.scrollLeft = 0
					}
				}).exec()
			},
			secondMenuClick(item) {
				this.active = item.id;
				this.categoryTitle = item.categoryName;
				this.getStudyList()
				this.getCourses()
			},
			onPullDownRefresh() {
				this.getStudyList()
				this.getCourses()
			}
		}
	}
</script>

<style scoped lang="less">
	page{
		background: #fff;
	}
	.content-box {
		width: 100%;
		box-sizing: border-box;
		.tab-box {
			height: 96rpx;
			box-shadow: 0px 6px 12px 0px rgba(227, 227, 227, 0.29);
			.tabs{
				width:100%;
				height: 96rpx;
				padding-left: 20rpx;
				position: fixed;
				top: 0;
				background: #fff;
				z-index: 10;
				.scroll-view_H{
					white-space: nowrap;
					width: 100%;
					height: 96rpx;
				}
				.tab-item{
					height: 96rpx;
					line-height: 96rpx;
					display: inline-block;
					margin-right: 40rpx;
					font-size: 32rpx;
					color: #999999;
				}
				.tab-item-active{
					color: #F99C10;
					border-bottom: 2px solid #F99C10;
					font-weight: bold;
				}
			}
		}

		/deep/.second-menu-box {
			padding: 30rpx 32rpx;
		}

		.fixed {
			position: -webkit-sticky;
			position: sticky;
			top: 0;
			z-index: 99;
		}

	}

	.active-word {
		image {
			width: 136rpx;
			height: 46rpx;
		}
	}
	.active-word2{
		image{
			width: 108rpx;
			height: 46rpx;
		}
	}

	.no-content {
		font-size: 28rpx;
		color: #666666;
		text-align: center;
		padding: 30rpx 0;
	}

	.bangdan-box {
		width: 100%;
		box-sizing: border-box;
		padding-left: 30rpx;
		margin: 80rpx 0;
		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
		}

		.bangdan-list {
			padding: 16rpx 0 0;
		}

		.bangdan-item {
			width: 412rpx;
			height: 224rpx;
			box-sizing: border-box;
			padding: 34rpx;
			color: #191919;
			display: inline-block;
			background: url('https://download.cyjyyjy.com/bangdanbg.png');
			background-size: 100% 100%;
			font-size: 28rpx;
			margin-right: 20rpx;
			display: inline-block;
			
			.name{
				font-weight: bold;
			}
			
			.time {
				font-size: 24rpx;
				line-height: 34rpx;
				margin: 8rpx 0 10rpx;
			}

			.jifen {
				font-size: 24rpx;
				font-weight: 500;
				color: #FCB047;
				.fz44{
					font-size: 44rpx;
				}
			}

			.signin-btn {
				width: 122rpx;
				height: 48rpx;
				background: linear-gradient(180deg, #FEECCB 0%, #FCAB3B 100%);
				border-radius: 8rpx;
				text-align: center;
				line-height: 48rpx;
				font-size: 24rpx;
				color: #fff;
			}
		}
	}

	.konwledge-index {
		min-height: 100%;
		width: 100%;
		background: #fff;

		.knowledge-list {
			width: 100%;
			padding: 0 32rpx;
			margin-top: 80rpx;
			.knowledge-item {
				width: 100%;
				height: 208rpx;
				margin-top: 20rpx;
				background: #fff;
				border-bottom: 1rpx solid #ECECEC;
				position: relative;
				.img-box {
					width: 204rpx;
					height: 200rpx;
					margin-right: 30rpx;

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

				.knowledge-info-box {
					width: calc(100% - 234rpx);

					.title {
						font-size: 38rpx;
						color: #333;
						font-size: 500;
						line-height: 52rpx;
					}

					.time,
					.address {
						color: #999;
						font-size: 28rpx;
						margin: 10rpx 0;
						line-height: 38rpx;
					}

					.intro {
						font-size: 28rpx;
						color: #999999;
						line-height: 40rpx;
						margin: 8rpx 0 36rpx;
					}

					.type-box {
						font-size: 24rpx;
						color: #999;
						margin-top: 20rpx;

						.price {
							font-size: 28rpx;
							color: #EA533E;
						}

						.signin-btn {
							width: 156rpx;
							height: 60rpx;
							text-align: center;
							line-height: 60rpx;
							background: #FFEAE7;
							border-radius: 12rpx;
							font-size: 32rpx;
							position: absolute;
							right: 4rpx;
							bottom: 4rpx;
						}

						.red {
							background: #FFEAE7;
							color: #EE7060;
						}

						.blue {
							color: #6E85EB;
							background: #ECEFFD;
						}

						.yellow {
							color: #F99C10;
							background: #FFEDCC;
						}
					}
				}
			}

			.knowledge-item:nth-last-child(1) {
				border: none;
			}
		}
	}
</style>