chanyishenghuo-uniapp/pages/course/index.vue

<template>
	<view class="konwledge-index index">
		<!-- <view class="header header-search acea-row row-center-wrapper"> -->
			<!-- <view @click="goGoodSearch()" class="search acea-row row-middle">
				<text class="iconfont icon-xiazai5"></text>
				搜索商品
			</view> -->
			<!-- #ifndef H5 -->
			<!-- <view class="qr" @click="startQr()" v-if="$deviceType !== 'weixin'">
				<image src="../../static/saoyisao-icon.png" />
			</view> -->
			<!-- #endif -->
		<!-- </view> -->
		<view class="content-box">
			<view class="tab-box" :class="isFixedTop ? 'fixed' : ''">
				<!-- <wuc-tab :tab-list="tabList" :tabCur.sync="TabCur" @change="tabChange"
					tab-class="text-center text-black bg-white" select-class="text-orange text-xl">
				</wuc-tab> -->
				<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">打卡榜</view>
				<view class="bangdan-list">
					<scroll-view class="scroll-view_H" scroll-x="true"  v-if="studyList.length > 0">
						<view class="bangdan-item" 
						:class="index%2 !== 0 ? 'bgR' : ''" 
						v-for="(item,index) in studyList" :key="index"
						@click="toStudyDetail(item.id)">
							<view>
								<view>{{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">{{item.integral}}积分</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-word">课程</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,uid:this.userInfo.uid}).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">
.header{
	.qr {
		width: 36rpx;
		height: 38rpx;
		image{
			width: 36rpx;
			height: 38rpx;
		}
	}
}
.header-search {
	transition: all linear 0.3s;
	background: #fff;
	.search {
		border: 2rpx solid #EA533E;
		background-color: #fff;
	}
}
.colG{
	color: #8FB85B !important;
}
.content-box{
	width: 100%;
	box-sizing: border-box;
	.tab-box{
		box-shadow: 0px 6px 12px 0px rgba(227,227,227,0.29);
		.tabs{
			width:auto;
			height: 96rpx;
			padding-left: 20rpx;
			background: #fff;
			.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{
	font-size: 34rpx;
}
.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-top: 30rpx;
	.scroll-view_H{
		white-space: nowrap;
		width: 100%;
	}
	.bangdan-list{
		padding: 16rpx 0 0;
	}
	.bangdan-item{
		width: 514rpx;
		height: 234rpx;
		box-sizing: border-box;
		padding: 20rpx;
		color: #fff;
		display: inline-block;
		background: linear-gradient(165deg, #3ABFB8 0%, #7CE1DD 100%);
		border-radius: 10rpx;
		font-size: 34rpx;
		margin-right: 20rpx;
		display: inline-block;
		.time{
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			margin:10rpx 0 18rpx;
			
		}
		.jifen{
			font-size: 46rpx;
			font-weight: 500;
		}
		.signin-btn{
			width: 180rpx;
			height: 68rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			text-align: center;
			line-height: 68rpx;
			color: #222222;
			font-size: 26rpx;
		}
	}
	.bgR{
		background: linear-gradient(165deg, #FF7563 0%, #FEABA0 100%);
	}
}
.konwledge-index {
	min-height: 100%;
	width: 100%;
	background: #fff;
	.knowledge-list {
		width: 100%;
		padding:0 32rpx;
		margin-top: 30rpx;
		.knowledge-item {
			background: #fff;
			padding: 16rpx 0;
			border-bottom: 1px solid #ECECEC;
			.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: 32rpx;
					color: #333;
					font-size: 500;
					line-height: 40rpx;
				}
				.time,.address{
					color: #999;
					font-size: 24rpx;
					margin-top: 5rpx;
					line-height: 34rpx;
				}
				.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;
					}
					.red{
						background: #FFEAE7;
						color: #EE7060;
					}
					.blue {
						color: #6E85EB;
						background: #ECEFFD;
					}
					.yellow {
						color: #F99C10;
						background: #FFEDCC;
					}
				}
			}
		}
		.knowledge-item:nth-last-child(1){
			border: none;
		}
	}
}
</style>