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>
			<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: 32rpx;">
					<view style="color: #666666;">考前培训：建造师-二级</view>
					<view style="color: #007AFF;">重新选择</view>
				</view>
				<u-line color="#D6D6DB" />
				<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 array" :key="index" style="margin-right: 20rpx;display:inline-block">
							<view :class="menuIndex==index?'r_t1':'r_t2'" @click="cMenu(index)">
								{{item}}
							</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 array" :key="index" style="margin-right: 20rpx;display:inline-block">
							<view :class="menuIndex1==index?'r_t1':'r_t2'" @click="cMenu1(index)">
								{{item}}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view v-show="current==0">
				<view class="listBox">
					<navigator url="/pages2/course/detail" 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>
			</view>
			<view v-show="current==1">
				<view class="listBox">
					<navigator url="/pages2/bank/detail" 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>
			</view>
		</view>
	</view>
</template>

<script>

import { mapGetters } from 'vuex';
export default {
	components: {
		
	},
	data() {
		return {
			list:[
				{
					name: '网课'
				},
				{
					name: '题库通'
				}
			],
			array:['全部','建设工程施工管理','机电全科','机电工程管理与实','机电全科','全科'],
			current:0,
			menuIndex:0,
			menuIndex1:0,
			paramList: [
				{
					pageNum: 1,
					pageSize: 10,
					total: 0,
					showStatus: 0,
					goodsType:1
				},
				{
					pageNum: 1,
					pageSize: 10,
					total: 0,
					showStatus: 0,
					goodsType:2
				}
			],
			list1: [],
			list2: [],
		};
	},
	onPullDownRefresh(){
		let that = this
		this.initList();
		setTimeout(function(){
			uni.stopPullDownRefresh()
		},500)
	},
	onLoad(option) {
		this.initList();
	},
	methods: {
		initList() {
			this.paramList[0].pageNum = 1
			this.paramList[1].pageNum = 1
			this.list1 = []
			this.list2 = []
			this.courseList();
			this.bankList();
		},
		cMenu(index){
			this.menuIndex = index;
		},
		cMenu1(index){
			this.menuIndex1 = index;
		},
		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() {
		console.log(34535)
		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>
	.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: 240rpx;
	}
	.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>