saas_miniprogram/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;background-color: #FFFFFF;">
				<u-line color="#D6D6DB" />
				<view style="display: flex;justify-content: space-between;height: 78rpx;line-height: 78rpx;padding: 0 30rpx;font-size: 28rpx;">
					<view style="color: #666666;white-space: nowrap;width: 80%;overflow-x: hidden;">{{selObj.eName}}：{{selObj.pName}}-{{selObj.bName}}</view>
					<view style="color: #007AFF;width: 20%;" @click="openLeft()">重新选择</view>
				</view>
				<u-line color="#D6D6DB" />
				<view style="display: flex;align-items:center;">
					<view style="margin: 0 auto;"><u-tabs :list="list"  :current="current" @change="change" :scrollable="false"></u-tabs></view>
				<!--	<view style="width: 160px;margin: 0 auto;"><u-tabs :list="list" item-width="150" font-size="24" bar-width="110" :current="current" @change="change" active-color="#007AFF"></u-tabs></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>
			<view v-show="current==0">
				<view class="listBox">
					<navigator :url="'/pages2/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: 316rpx;width: 100%;border-radius: 24rpx;"></image>
							<view style="display: flex;margin-top: 13rpx;">
								<view class="yearTag">{{item.year}}</view>
								<view class="titleTag">{{item.goodsName}}</view>
							</view>
							<view style="display: flex;justify-content: space-between;margin-top: 13rpx;">
								<view class="noteTag"><image src="/static/icon/wk_icon1.png" class="wk_icon"></image>
								共 <text class="blackFont">6</text> 科 <text class="blackFont">120</text> 节  <text class="blackFont">60</text> 学时</view>
								<view class="priceTag">¥ {{item.standPrice}}</view>
							</view>
						</view>
					</navigator>
					<view class="emptyTip" v-if="list2.length==0">暂未上架相关网课~</view>
				</view>
			</view>
			<view v-show="current==1">
				<view class="listBox">
					<navigator :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: 316rpx;width: 100%;border-radius: 24rpx;"></image>
							<view style="display: flex;margin-top: 13rpx;">
								<view class="yearTag">{{item.year}}</view>
								<view class="titleTag">{{item.goodsName}}</view>
							</view>
							<view style="display: flex;justify-content: space-between;margin-top: 13rpx;">
								<view class="noteTag"><image src="/static/icon/wk_icon1.png" class="wk_icon"></image>
								共 <text class="blackFont">6</text> 张卷 <text class="blackFont">120</text>道题  </view>
								<view class="priceTag">¥ {{item.standPrice}}</view>
							</view>
						</view>
					</navigator>
					<view class="emptyTip" v-if="list2.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="lzs"  >
						<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.projectName }}-{{ item.businessName }}</view>
					</view>
				</view>
			<!--	<view class="fots">
					<view class="leftBtns" @click="initLists">重置筛选</view> 
				
				</view>-->
			</view>
		</view>
	</view>
</template>

<script>

import { mapGetters } from 'vuex';
export default {
	components: {
		
	},
	data() {
		return {
			show:false,
			list:[
				{
					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
				}
			],
			list1: [],
			list2: [],
			eList:[],
			bList:[],
			sList:[],
			selObj:{
				eName:'',
				pName:'',
				bName:'',
				eId:0,
				bId:0,
				pId:0,
			}
		};
	},
	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
		},
		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){
			this.selObj.bId = item.id
			this.show = false
			this.selObj.pId = item.projectId
			this.selObj.bName = item.businessName
			this.selObj.pName = item.projectName
			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;
			this.$api.businessList(data).then(res => {
				if(res.data.code==200){
					self.bList = res.data.rows
					console.log(self.bList,66)
				}
			});
		},
		active1(item){
			this.selObj.eId = item.id
			this.selObj.eName = item.educationName
			this.businessList({educationId:item.id})
		},
		educationList() {
			var self = this;
			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})
					}
				}
			});
		},
		openLeft(){
			this.show = true
		},
		initList() {
			this.paramList[0].pageNum = 1
			this.paramList[1].pageNum = 1
			this.list1 = []
			this.list2 = []
			this.courseList();
			this.bankList();
			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();
		},
		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;
				}
			});
		},
	},
	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>
	.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{
		height: 66rpx;
		line-height: 66rpx;
		background: #FFFFFF;
		border: 2rpx solid #EEEEEE;
		border-radius: 16rpx;
		padding: 0 10rpx;
		margin-top: 15rpx;
		white-space: nowrap;
	}
	.activeStys{
		background: linear-gradient(90deg, rgba(1,94,234,0.2),rgba(255,255,255,.6));
		border-radius: 16rpx;
		color: #007AFF!important;
	}
	.tylsz{
		height: 66rpx;
		line-height: 66rpx;
		color: #666;
		font-weight: 400;

		font-weight: bold;
		padding:0 30rpx;
		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 {

		background-color: #FFFFFF;
		padding: 0 5%;
		font-size: 30rpx;
	}
	.contentZ {
		overflow-y: auto;
		display: flex;
		height: 100%;
		padding: 10rpx;
	}
	.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 4rpx;
	}
	.wk_icon{
		width: 24rpx;
		height: 24rpx;
		margin-right: 12rpx;
	}
	.noteTag{
		ont-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		align-items: center;
	}
	.priceTag{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FF2D55;
	}
	.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;
		box-shadow: 0rpx 10rpx 9rpx 1rpx rgba(165, 196, 239, 0.1);
		border-radius: 24rpx;
		width: 100%;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}
	.listBox{
		background-color: #EAEEF1;
		padding: 30rpx;
		position: relative;
		top: 235rpx;
	}
	.menuSel{
		width: 100%;
		height: 70rpx;
		background: #EAEEF1;
		white-space:nowrap;
		overflow: hidden;
	}
	.r_sliper{
		padding: 0 20rpx;
	}
	.r_t1{
		height: 48rpx;
		background: #007AFF;
		border-radius: 16rpx;
		padding: 3rpx 8rpx;
		margin-top: 11rpx;
		color: #FFFFFF;
	}
	.r_t2{
		height: 48rpx;
		background: #FFFFFF;
		border: 2rpx solid #EEEEEE;
		border-radius: 16rpx;
		padding: 3rpx 8rpx;
		margin-top: 11rpx;
		color: #666666;
	}
</style>