chanyiUniapp/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="`${$VUE_APP_RESOURCES_URL}/images/qr.png`" />
			</view>
			<!-- #endif -->
		</view>
		<view class="content-box">
			<view class="tab-box">
				<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>
				<SecondMenu :menuList="secondMenu" :active.sync="active" @secondMenuClick="secondMenuClick">
				</SecondMenu>
			</view>
			<view class="bangdan-box">
				<view class="bangdan-list">
					<scroll-view class="scroll-view_H" scroll-x="true">
						<view class="bangdan-item" 
						:class="index%2 !== 0 ? 'bgR' : ''" 
						v-for="(item,index) in 6" :key="index"
						@click="toStudyDetail(item.id)">
							<view>连续11天打卡站桩</view>
							<view class="time">2021.5.28-2021.6.18</view>
							<view class="acea-row row-between-wrapper">
								<view class="jifen">30积分</view>
								<view class="signin-btn">报名参加</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="knowledge-list">
				<view class="active-word">{{categoryTitle}}</view>
				<view class="knowledge-item acea-row" v-for="item in courseList" @click="toDetail(item.id)">
					<view class="img-box">
						<image :src="item.imageArr[0]" mode=""></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="signin-btn red">去报名</view>
						</view>
					</view>
				</view>
				<!-- <view class="knowledge-item acea-row">
					<view class="img-box">
						<image src="../../static/img1.png" mode=""></image>
					</view>
					<view class="knowledge-info-box">
						<view class="title line1">《阴阳五行》一个人的阴阳五的阴阳五行…</view>
						<view class="time">2021-5-31-6.3  8:30-18:30</view>
						<view class="address">中国 武汉</view>
						<view class="type-box acea-row row-between row-middle">
							<view class="price">￥3000</view>
							<view class="signin-btn red" @click="toDetail(1)">去报名</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 {
				TabCur: null,
				tabList: [],
				secondMenu: [],
				active: null,
				courseList: [],
				studyList:[],
				categoryTitle:'',
			}
		},
		components: {
			WucTab,
			SecondMenu
		},
		onShow() {
			getCategory().then((res) => {
				this.tabList = res.data
				this.$set(this, 'tabList', res.data)
				this.$set(this, 'secondMenu', res.data[0].categoryList)
				this.$set(this, 'TabCur', res.data[0].id)
				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
				}
			}).then(() => {
				this.getStudyList()
				this.getCourses()
			})
		},
		methods: {
			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() {
				var cid = null;
				this.active == null ? cid = this.TabCur : cid = this.active
				getStudyList({categoryId: cid,listState:0}).then((res) => {
					if (res.success) {
						this.studyList = res.data
					}
				})
			},
			getCourses() {
				var cid = null;
				this.active == null ? cid = this.TabCur : cid = this.active
				getCourses({categoryId: cid,listState:0,uid:this.userInfo.uid}).then((res) => {
					if (res.success) {
						this.courseList = res.data
					}
				})
			},
			tabChange(item) {
				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.TabCur = item.id;
				
				this.getStudyList()
				this.getCourses()
			},
			secondMenuClick(item) {
				
				this.active = item.id;
				this.categoryTitle = item.categoryName;
				this.getStudyList()
				this.getCourses()
			}
		}
	}
</script>

<style scoped lang="less">
	
.header-search {
	transition: all linear 0.3s;
	background: #fff;
	.search {
		border: 2rpx solid #EA533E;
		background-color: #fff;
	}
}
.content-box{
	width: 100%;
	box-sizing: border-box;
	.tab-box{
		box-shadow: 0px 6px 12px 0px rgba(227,227,227,0.29);
	}
	/deep/.second-menu-box{
		padding: 30rpx 32rpx;
	}
}
.bangdan-box{
	width: 100%;
	box-sizing: border-box;
	padding-left: 30rpx;
	.scroll-view_H{
		white-space: nowrap;
		width: 100%;
	}
	.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;
		.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: 50rpx;
		.knowledge-item {
			background: #fff;
			padding: 32rpx 0;
			border-bottom: 1px solid #ECECEC;
			.img-box {
				width: 204rpx;
				height: 200rpx;
				margin-right: 30rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.knowledge-info-box {
				width: calc(100% - 234rpx);
				.title {
					font-size: 28rpx;
					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: 28rpx;
					.price{
						font-size: 36rpx;
						color: #EA533E;
						font-weight: 600;
					}
					.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;
					}
				}
			}
		}
	}
}
</style>