zc_saas_h5/pages/course/index.vue

<template>
	<view >
		<u-navbar :is-back="false" title="选课中心" :border-bottom="false"  title-color="#333333" back-icon-color="#ffffff">
			<view class="slot-wrap">
				<image  src="/static/logo2.png" style="width: 178rpx;height: 31rpx;margin-left: 30rpx;"></image>
			</view>
		</u-navbar>
		<view v-show="!show">
			<view style="position: fixed;width: 100%;z-index: 999;">
				<view class="bg_color"></view>
				<view class="check_ck">
					<view class="checked">
						<!-- {{selObj.pName}}-{{selObj.bName}} -->
						<view class="check_title">{{selObj.eName}}：{{ selObj.aliasName }}</view>
						<view class="again_ck" @click="openLeft()">
							<view style="color: #007AFF;font-size: 32rpx;">重新选择</view>
							<u-icon name="list" color="#007AFF" size="40"></u-icon>
						</view>
					</view>
					<view style="display: flex;align-items:center;">
						<view style="margin: 0 auto;">
							<u-tabs :list="courseLists" height='97'  :current="current" @change="change" :scrollable="false"></u-tabs>
						</view>
					</view>
				</view>
				
				<!-- <u-line color="#D6D6DB" /> -->
				<view class="menuSel" v-show="current==0">
					<scroll-view class="r_sliper" scroll-x="true" >
						<view v-for="(item,index) in sList" :key="index" style="margin-right: 20rpx;display:inline-block">
							<view :class="paramList[0].subjectId==item.id?'r_t1':'r_t2'" @click="cMenu(item.id)">
								{{item.subjectName}}
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="menuSel" v-show="current==1">
					<scroll-view class="r_sliper" scroll-x="true" >
						<view v-for="(item,index) in sList" :key="index" style="margin-right: 20rpx;display:inline-block">
							<view :class="paramList[1].subjectId==item.id?'r_t1':'r_t2'" @click="cMenu1(item.id)">
								{{item.subjectName}}
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="menuSel" v-show="current==2">
					<scroll-view class="r_sliper" scroll-x="true" >
						<view v-for="(item,index) in sList" :key="index" style="margin-right: 20rpx;display:inline-block">
							<view :class="paramList[2].subjectId==item.id?'r_t1':'r_t2'" @click="cMenu2(item.id)">
								{{item.subjectName}}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view v-show="current==0" class="contents">
				<view class="listBox">
					<navigator  hover-class="none" :url="'/pages3/course/detail?id='+item.goodsId" v-for="(item,index) in list1" :key="index" >
						<view class="itemBox">
							<image :src="$method.splitImgHost(item.coverUrl, true)" style="height: 367rpx;width: 100%;border-radius: 24rpx;"></image>
							<view style="display: flex;margin-top: 13rpx;align-items: center;">
								<view class="yearTag" v-if="item.year">{{item.year}}</view>
								<view class="titleTag">{{item.goodsName}}</view>
							</view>
							<view style="display: flex;justify-content: space-between;margin-top: 15rpx;">
								<view class="noteTag"><image src="/static/icon/wk_icon1.png" class="wk_icon"></image>
								共 <text class="blackFont">{{item.courseNum}}</text> 
								<text class="margin30">课程</text>
								<text class="blackFont">{{item.classHours || '-'}}</text> 学时</view>
								<view v-if="item.standPrice" class="priceTag">¥ {{item.standPrice.toFixed(2)}}</view>
								<view v-else class="priceTag free">免费</view>
							</view>
						</view>
					</navigator>
					<view class="emptyTip" v-if="list1.length==0">暂未上架相关网课~</view>
				</view>
			</view>
			<view v-show="current==1" class="contents">
				<view class="listBox">
					<navigator  hover-class="none" :url="'/pages2/bank/detail?id='+item.goodsId" v-for="(item,index) in list2" :key="index" >
						<view class="itemBox">
							<image :src="$method.splitImgHost(item.coverUrl, true)" style="height: 367rpx;width: 100%;border-radius: 24rpx;"></image>
							<view style="display: flex;margin-top: 13rpx;align-items: center;">
								<view class="yearTag" v-if="item.year">{{item.year}}</view>
								<view class="titleTag" style="display: flex;justify-content: space-between;flex:1;">
									<view style="flex:1;">{{item.goodsName}}</view>
									
									<view v-if="item.standPrice" class="priceTag">¥ {{item.standPrice.toFixed(2)}}</view>
									<view v-else class="priceTag free">免费</view>
								</view>
							</view>
							<view style="display: flex;justify-content: space-between;margin-top: 15rpx;" v-if="false">
								<view class="noteTag"><image src="/static/icon/wk_icon1.png" class="wk_icon"></image>
								共 <text class="blackFont">6</text> 
								<view class="margin30">张卷</view>
								<text class="blackFont">120</text>道题  </view>
								<view v-if="item.standPrice" class="priceTag">¥ {{item.standPrice.toFixed(2)}}</view>
								<view v-else class="priceTag free">免费</view>
							</view>
						</view>
					</navigator>
					<view class="emptyTip" v-if="list2.length==0">暂未上架相关题库~</view>
				</view>
			</view>
			
			<view v-show="current==2" class="contents">
				<view class="listBox">
					<navigator  hover-class="none" :url="'/pages5/liveDetail/index?id='+item.goodsId" v-for="(item,index) in list3" :key="index" >
						<view class="itemBox">
							<image :src="$method.splitImgHost(item.coverUrl, true)" style="height: 367rpx;width: 100%;border-radius: 24rpx;"></image>
							<view style="display: flex;margin-top: 13rpx;align-items: center;">
								<view class="yearTag" v-if="item.year">{{item.year}}</view>
								<view class="titleTag" style="display: flex;justify-content: space-between;flex:1;">
									<view style="flex:1;">{{item.goodsName}}</view>
									
									<view v-if="item.standPrice" class="priceTag">¥ {{item.standPrice.toFixed(2)}}</view>
									<view v-else class="priceTag free">免费</view>
								</view>
							</view>
							<view style="display: flex;justify-content: space-between;margin-top: 15rpx;" v-if="false">
								<view class="noteTag">
									<image src="/static/icon/wk_icon1.png" class="wk_icon"></image>
									<view v-if="item.standPrice" class="priceTag">¥ {{item.standPrice.toFixed(2)}}</view>
									<view v-else class="priceTag free">免费</view>
								</view>
							</view>
						</view>
					</navigator>
					<view class="emptyTip" v-if="list3.length==0">暂未上架相关直播~</view>
				</view>
			</view>
		</view>
		<view v-show="show" class="popuBox">
			<view class="flex-d" >
				<view class="contentZ">
					<view class="lzs" >
						<view class="tylsz" v-for="(item, index) in eList" :key="index" @click="item.id === 0 ? activeAll(1) : active1(item)" :class="item.id === selObj.eId ? 'activeStys':''">{{ item.educationName }}</view>
					</view>
					<view class="rzs"  >
						<!-- {{ item.projectName }}-{{ item.businessName }} -->
						<view class="tylszB" v-for="(item, index) in bList" :key="index" @click="item.id === 0 ? activeAll(2) : active2(item)" 
							:class="item.id === selObj.bId ? 'activeStys2':''">{{ item.aliasName }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- <tab-bar v-model="current" :list="tabbarlist" :mid-button="true" :mid-button-size="50" class="tab_items"></tab-bar> -->
	</view>
</template>

<script>
// import TabBar from '@/components/u-tabbar/u-tabbar.vue';
import { mapGetters } from 'vuex';
export default {
	components: {
		// TabBar
	},
	data() {
		return {
			show:false,
			courseLists:[
				{
					name: '网课'
				},
				{
					name: '题库通'
				},
				{
					name: '直播课'
				}
			],
			array:['全部','建设工程施工管理','机电全科','机电工程管理与实','机电全科','全科'],
			current:0,
			menuIndex:0,
			menuIndex1:0,
			paramList: [
				{
					pageNum: 1,
					pageSize: 10,
					total: 0,
					showStatus: 0,
					goodsType:1,
					subjectId:0
				},
				{
					pageNum: 1,
					pageSize: 10,
					total: 0,
					showStatus: 0,
					goodsType:2,
					subjectId:0
				},
				{
					pageNum: 1,
					pageSize: 10,
					total: 0,
					showStatus: 0,
					goodsType:6,
					subjectId:0
				}
			],
			list1: [],
			list2: [],
			list3:[],
			eList:[],
			bList:[],
			sList:[],
			selObj:{
				eName:'',
				pName:'',
				bName:'',
				eId:0,
				bId:0,
				pId:0,
			},
			current: 1,
            tabbarlist: this.$store.state.tabLists
		};
	},
	onPullDownRefresh(){
		let that = this
		this.initList();
		setTimeout(function(){
			uni.stopPullDownRefresh()
		},500)
	},
	onLoad(option) {
		let eduStr = uni.getStorageSync('eduObj')
		if(eduStr){
			this.selObj = JSON.parse(eduStr)
			this.subjectList({businessId:this.selObj.bId,projectId:this.selObj.pId,educationId:this.selObj.eId})
			this.mergeBusiness()
		}else{
			this.show = true
		}
		this.initList();
	},
	methods: {
		mergeBusiness(){
			this.paramList[0].educationTypeId = this.selObj.eId
			this.paramList[0].businessId = this.selObj.bId
			this.paramList[0].subjectId = 0
			this.paramList[1].educationTypeId = this.selObj.eId
			this.paramList[1].businessId = this.selObj.bId
			this.paramList[1].subjectId = 0
			this.paramList[2].educationTypeId = this.selObj.eId
			this.paramList[2].businessId = this.selObj.bId
			this.paramList[2].subjectId = 0
		},
		subjectList(data) {
			var self = this;
			this.$api.subjectList(data).then(res => {
				if(res.data.code==200){
					self.sList = res.data.rows
					let allItem = {id:0,subjectName:'全部'}
					self.sList.unshift(allItem)
				}
			});
		},
		active2(item){
			console.log('sfsdfg', item)
			this.selObj.bId = item.id
			this.show = false
			this.selObj.pId = item.projectId
			this.selObj.bName = item.businessName
			this.selObj.pName = item.projectName
			this.selObj.aliasName = item.aliasName
			uni.setStorageSync('eduObj', JSON.stringify(this.selObj));
			this.subjectList({businessId:item.id,projectId:item.projectId,educationId:this.selObj.eId})
			this.mergeBusiness()
			//初始化
			this.initList();
		},
		businessList(data) {
			var self = this;
			// /app/common/course/business/list
			this.$api.businessList(data).then(res => {
				if(res.data.code==200){
					self.bList = res.data.rows
				}
			});
		},
		active1(item){
			this.selObj.eId = item.id
			this.selObj.eName = item.educationName
			this.businessList({educationId:item.id})
		},
		educationList() {
			var self = this;
			// /app/common/course/educationType/list
			this.$api.educationTypeList().then(res => {
				if(res.data.code==200){
					self.eList = res.data.rows
					if(self.selObj.eId){
						self.businessList({educationId:self.selObj.eId})
					} else {
						this.active1(self.eList[0])
					}
				}
			});
		},
		openLeft(){
			this.show = true
		},
		initList() {
			this.paramList[0].pageNum = 1
			this.paramList[1].pageNum = 1
			this.list1 = []
			this.list2 = []
			this.list3 = [];
			this.courseList();
			this.bankList();
			this.liveList()
			this.educationList()
		},
		cMenu(index){
			this.paramList[0].pageNum = 1
			this.paramList[0].subjectId= index;
			this.list1 = []
		//	this.menuIndex 
			this.courseList();
		},
		cMenu1(index){
			this.paramList[1].pageNum = 1
			this.paramList[1].subjectId= index;
			this.list2 = []
		//	this.menuIndex1 = index;
			this.bankList();
		},
		
		cMenu2(index){
			this.paramList[2].pageNum = 1
			this.paramList[2].subjectId= index;
			this.list3 = []
		//	this.menuIndex1 = index;
			this.liveList();
		},
		change(index){
			this.current = index;
		},
		//课程
		courseList() {
			var self = this;
			var param = this.paramList[0];
			this.$api.goodsList(param).then(res => {
				self.paramList[0].total = res.data.total;
				self.list1.push.apply(self.list1, res.data.rows);
				if (self.list1.length === res.data.total) {
					self.paramList[0].showStatus = true;
				}
			});
		},
		//题库
		bankList() {
			var self = this;
			var param = this.paramList[1];
			this.$api.goodsList(param).then(res => {
				self.paramList[1].total = res.data.total;
				self.list2.push.apply(self.list2, res.data.rows);
				if (self.list2.length === res.data.total) {
					self.paramList[1].showStatus = true;
				}
			});
		},
		//直播
		liveList() {
			var self = this;
			var param = this.paramList[2];
			this.$api.goodsList(param).then(res => {
				self.paramList[2].total = res.data.total;
				self.list3.push.apply(self.list3, res.data.rows);
				if (self.list3.length === res.data.total) {
					self.paramList[2].showStatus = true;
				}
			});
		},
	},
	onReachBottom() {
		if (this.current == 0) {
			if (this.list1.length < this.paramList[0].total) {
				this.paramList[0].pageNum++;
				this.courseList();
			}
		}
		if (this.current == 1) {
			if (this.list2.length < this.paramList[1].total) {
				this.paramList[1].pageNum++;
				this.bankList();
			}
		}
	},
	computed: { ...mapGetters(['userInfo']) }
};
</script>
<style >
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
page {
  background-color: #eaeef1;
}
</style>
<style scoped lang="scss">
.bg_color {
	width: 100%;
	height: 16rpx;
	background-color: #EAEEF1;
}
.check_ck {
	height: 211rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 5rpx 5rpx 1rpx rgba(1,99,235,0.0500);
	border-radius: 24rpx 24rpx 0rpx 0rpx;
	padding: 0 38rpx;
	.again_ck {
		width: 25%;
		display: flex;
		align-items: center;
	    justify-content: space-between;
	}
}
.checked {
	display: flex;
	justify-content: space-between;
	height: 108rpx;
	line-height: 108rpx;
	border-bottom: 1rpx solid #EEEEEE;
	font-size: 28rpx;
	.check_title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		white-space: nowrap;
		width: 75%;
		overflow-x: hidden;
	}
}
.contents {
	position: relative;
    left: 0;
    top: 320rpx;
}
	.emptyTip{
		color: #999999;
		font-size: 32rpx;
		text-align: center;
		margin-top: 20%;
	}
	.popuBox{
		top: 92px;
		width: 100%;
		bottom:0;
		position:absolute;
		overflow-y:scroll;
		overflow-x:hidden;
		background-color: #FFFFFF;
	}
	.activeStys2{
		background: #007AFF !important;
		color: #FFFFFF;
	}
	.tylszB{
		text-align: center;
		padding:20rpx 10rpx;
		background: #FFFFFF;
		border: 2rpx solid #EEEEEE;
		border-radius: 16rpx;
		margin-top: 15rpx;
		font-size: 30rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.activeStys{
		background: linear-gradient(90deg, rgba(1,94,234,0.2),rgba(255,255,255,.6));
		border-radius: 16rpx;
		font-weight: bold;
		color: #007AFF!important;
	}
	.tylsz{
		color: #666;
		font-size: 30rpx;
		padding:20rpx 10rpx;
		margin-top: 15rpx;
		white-space: nowrap;
	}
	.popup_t1 {
		padding-left: 35rpx;
		border-bottom: 1rpx solid #eee;
		height: 57rpx;
		margin-top: 86rpx;
		font-weight: bold;
		color: #007AFF;
		font-size: 27rpx;
	}
	.flex-d {
		height:100%;
		background-color: #FFFFFF;
		padding: 0 5%;
		font-size: 30rpx;
	}
	.contentZ {
		display: flex;
		height: 100%;
		padding: 10rpx;
		
		.lzs {
			width:200rpx;
			height: 100%;
			overflow-y: scroll;
		}
		
		.rzs {
			margin-left:40rpx;
			flex:1;
			height: 100%;
			overflow-y: scroll;
		}
	}
	.contentZ::-webkit-scrollbar {
		display: none;
	}
	.fots {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-top: 1rpx solid #eee;
	}
	.leftBtns {
		font-size: 30rpx;
		color: #007AFF;
		font-weight: 500;
	}
	.right_Btns {
		font-size: 30rpx;
		color: #fff;
		background-color: #007AFF;
		border-radius: 24rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		padding: 0rpx 23rpx;
		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
	}
	.blackFont{
		color: #333333;
		margin: 0 10rpx;
	}
	.margin30 {
		margin:0 20rpx 0 0;
	}
	.wk_icon{
		width: 24rpx;
		height: 24rpx;
		margin-right: 12rpx;
	}
	.noteTag{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		align-items: center;
	}
	.priceTag{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FC3F3F;
	}
	.titleTag{
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-left: 8rpx;
	}
	.yearTag{
		width: 80rpx;
		height: 32rpx;
		background: #EBF5FF;
		border: 2rpx solid #007AFF;
		border-radius: 16rpx;
		font-size: 24rpx;
		color: #007AFF;
		text-align: center;
		line-height: 32rpx;
	}
	.itemBox{
		background: #FFFFFF;
		border-radius: 24rpx;
		width: 100%;
		padding: 23rpx 22rpx 32rpx 22rpx;
		margin-bottom: 24rpx;
		box-shadow: 0rpx 0rpx 20rpx 1rpx rgba(1,99,235,0.1000);
	}
	.listBox{
		background-color: #EAEEF1;
		padding: 24rpx 24rpx 150rpx 24rpx;
		position: relative;
		// top: 235rpx;
	}
	.menuSel{
		width: 100%;
		// height: 70rpx;
		padding: 30rpx 0rpx;
		background: #EAEEF1;
		white-space:nowrap;
		overflow: hidden;
	}
	.r_sliper{
		padding: 0 20rpx;
	}
	.r_t1{
		// height: 48rpx;
		background: #007AFF;
		border-radius: 8rpx;
		padding: 9rpx 21rpx;
		// margin-top: 11rpx;
		color: #FFFFFF;
	}
	.r_t2{
		// height: 48rpx;
		background: #FFFFFF;
		border: 2rpx solid #EEEEEE;
		border-radius: 8rpx;
		padding: 9rpx 21rpx;
		// margin-top: 11rpx;
		color:#666666;
		font-size: 30rpx;
	}
</style>