zz--front/components/home.vue

<template>
	<view>
		<view style="z-index: 999;">
			<u-navbar title="中正云学堂" :is-back="false">
				<view class="slot-wrap"><image src="/static/search.png" class="search" @click="jumpSearch"></image></view>
			</u-navbar>
		</view>
		<scroll-view scroll-y="true" @scroll="scroll" :style="'height: ' + windowHeight + 'px;'" @scrolltolower="scrollTolower">
			<view class="box">
				<view class="my_swiper"><u-swiper :list="list" @click="swiperClick" height="330" border-radius="25" mode="none"></u-swiper></view>
				<!-- 日历-->
				<view class="calendar_card">
					<view class="card_box">
						<u-row gutter="16">
							<u-col span="11">
								<view>
									<text class="t1">距离</text>
									<text class="t2">二级建造师</text>
									<text class="t1">考试</text>
									<text class="t3">365</text>
									<text class="t1">天,继续加油哦！</text>
								</view>
							</u-col>
							<u-col span="1">
								<view @click="jumpPlan"><image src="/static/more.png" class="img_more"></image></view>
							</u-col>
						</u-row>
					</view>
					<u-line color="#EEEEEE" />
					<view style="width: 100%;display: flex;justify-content:center;margin-top: 20rpx;">
						<view v-for="(item, index) in date" :key="index" class="card_date">{{ item }}</view>
					</view>
					<view style="width: 100%;display: flex;justify-content:center;margin-top: 40rpx;">
						<view v-for="(item, index) in date_num" :key="index" class="date_num">{{ item }}</view>
					</view>
					<view style="width: 100%;margin-top: 20rpx;">
						<u-row gutter="16">
							<u-col span="2" text-align="center">
								<view><image src="/static/left.png" class="arr-icon"></image></view>
							</u-col>
							<u-col span="8" text-align="center"><view class="course_title">二级建造师市政公用工程</view></u-col>
							<u-col span="2" text-align="center">
								<view><image src="/static/right.png" class="arr-icon"></image></view>
							</u-col>
						</u-row>
					</view>
				</view>
				<!-- 筛选-->
				<view style="margin-top: 20rpx;">
					<u-row gutter="16">
						<u-col span="1">
							<view style="padding: 5rpx;"><image src="/static/select.png" class="arr-icon" @click="show = true"></image></view>
						</u-col>
						<u-col span="11">
							<view>
								<u-subsection
									@change="sectionChange"
									height="54"
									button-color="#2F4379"
									bg-color="#F8F9FF"
									active-color="#FFFFFF"
									inactive-color="#636A75"
									:list="tab_list"
									:current="current"
								></u-subsection>
							</view>
						</u-col>
					</u-row>
				</view>
				<!-- 课程列表-->
				<view v-if="current == 0">
					<view @click="jumpDetail(item)" class="list_box" v-for="(item, index) in list1" :key="index">
						<image :src="$method.splitImgHost(item.coverUrl)" class="list_img"></image>
						<view class="list_content">
							<view style="margin-left: 280rpx;margin-top: 10rpx;">
								<view class="list_title">{{ item.courseName }}</view>
								<view class="old_price">原价：¥{{ item.price }}</view>
								<view class="price">现价：¥{{ item.price }}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 题库列表-->
				<view v-if="current == 1">
					<view @click="jumpDetail(item)" class="list_box" v-for="(item, index) in list2" :key="index">
						<image :src="$method.splitImgHost(item.coverUrl)" class="list_img"></image>
						<view class="list_content">
							<view style="margin-left: 280rpx;margin-top: 10rpx;">
								<view class="list_title">{{ item.bankName }}</view>
								<view class="old_price">原价：¥{{ item.price }}</view>
								<view class="price">现价：¥{{ item.price }}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 重点列表-->
				<view v-if="current == 2">
					<view @click="jumpDetail(item)" class="list_box" v-for="(item, index) in list3" :key="index">
						<image :src="$method.splitImgHost(item.coverUrl)" class="list_img"></image>
						<view class="list_content">
							<view style="margin-left: 280rpx;margin-top: 10rpx;">
								<view class="list_title">{{ item.name }}</view>
								<view class="old_price">原价：¥{{ item.price }}</view>
								<view class="price">现价：¥{{ item.price }}</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="paramList[current].showStatus" style="text-align: center;margin-top: 24rpx;">到底啦~</view>
				<u-popup v-model="show">
					<view style="width: 600rpx"><view class="popup_t1">选择你需要的</view></view>
				</u-popup>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	name: 'home',
	data() {
		return {
			show: false,
			tab_list: [
				{
					name: '课程'
				},
				{
					name: '刷题'
				},
				{
					name: '重点考点'
				}
			],
			current: 0,
			list: [],
			paramList: [
				{
					pageNum: 1,
					pageSize: 10,
					total: 0,
					showStatus: 0
				},
				{
					pageNum: 1,
					pageSize: 10,
					total: 0,
					showStatus: 0
				},
				{
					pageNum: 1,
					pageSize: 10,
					total: 0,
					showStatus: 0
				}
			],
			date: ['日', '一', '二', '三', '四', '五', '六'],
			date_num: [23, 24, 25, 26, 27, 28, 29],
			list1: [],
			list2: [],
			list3: [],
			windowHeight: 0
		};
	},
	onLoad() {},
	mounted() {
		this.windowHeight = uni.getSystemInfoSync().windowHeight;
		this.initList();
		this.advertisingList();
	},
	methods: {
		swiperClick(index){
			let item = this.list[index]
			uni.navigateTo({
				url: item.jumpUrl
			});
		},
		advertisingList(){
			let self = this
			this.$api.advertisingList().then(res => {
				let index;
				for (index in res.data.rows ) {
				  res.data.rows[index].image = res.data.rows[index].adverUrl
				}
				self.list = res.data.rows
			});
		},
		initList() {
			this.courseList();
			this.bankList();
			this.noteList();
		},
		scroll(e) {},
		scrollTolower() {
			if (this.current == 0) {
				if (this.list1.length < this.paramList[0].total) {
					this.paramList[0].pageNum++;
					this.courseList();
				}
			}
			if (this.current == 1) {
				if (this.list1.length < this.paramList[1].total) {
					this.paramList[1].pageNum++;
					this.bankList();
				}
			}
			if (this.current == 2) {
				if (this.list1.length < this.paramList[2].total) {
					this.paramList[2].pageNum++;
					this.noteList();
				}
			}
		},
		sectionChange(index) {
			this.current = index;
		},
		//课程
		courseList() {
			var self = this;
			var param = this.paramList[0];
			this.$api.courselist(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.banklist(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;
				}
			});
		},
		//考试重点
		noteList() {
			var self = this;
			var param = this.paramList[2];
			this.$api.notelist(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;
				}
			});
		},
		jumpDetail(item) {
			if (this.current == 0) {
				this.$navTo.togo('/pages2/course/detail', {
					id: item.courseId
				});
				return;
			}
			if (this.current == 1) {
					this.$navTo.togo('/pages2/bank/detail', {
						id: item.bankId
					});
				return;
			}
			if (this.current == 2) {
				this.$navTo.togo('/pages2/course/keynote', {
					id: item.fileId
				});
				return;
			}
		},
		jumpPlan() {
			this.$navTo.togo('/pages2/plan/detail', {});
		},
		jumpSearch() {
			this.$navTo.togo('/pages2/index/search', {});
		}
	}
};
</script>

<style scoped>
.search {
	width: 40rpx;
	height: 40rpx;
	margin-left: 30rpx;
}
.slot-wrap {
	display: flex;
	align-items: center;
}
.popup_t1 {
	height: 29rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #131b31;
	margin: 100rpx;
}
.price {
	font-size: 20rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #ff0000;
	margin-top: 8rpx;
}
.old_price {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: bold;
	text-decoration: line-through;
	color: #999999;
	margin-top: 8rpx;
}
.list_title {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #2f4379;
}
.list_content {
	width: 656rpx;
	height: 134rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.1);
	border-radius: 24rpx;
	position: absolute;
	top: 20rpx;
	left: 20rpx;
}
.list_box {
	position: relative;
	width: 100%;
	margin-top: 30rpx;
}
.list_img {
	width: 278rpx;
	height: 134rpx;
	z-index: 100;
	position: relative;
}
.course_title {
	color: #2f4379;
	box-shadow: 0rpx 0rpx 9rpx 1rpx rgba(47, 67, 121, 0.1);
	border-radius: 28rpx;
	width: 100%;
	height: 48rpx;
	line-height: 48rpx;
}
.arr-icon {
	width: 40rpx;
	height: 40rpx;
}
.wrap {
	padding: 24rpx;
}

.u-row {
	margin: 40rpx 0;
}
.date_num {
	width: 14%;
	text-align: center;
	color: #34c759;
}
.card_date {
	width: 14%;
	text-align: center;
	color: #7f8caf;
}
page {
	background: #ffffff;
	font-size: 28rpx;
}
.calendar_card {
	width: 100%;
	height: 300rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.1);
	border-radius: 22rpx;
	margin-top: 25rpx;
}
.box {
	margin: 30rpx;
}
.my_swiper {
	box-shadow: 0rpx 20rpx 16rpx 4rpx rgba(47, 67, 121, 0.08);
	border-radius: 25rpx;
}
.calendar_card .card_box {
	height: 60rpx;
	line-height: 60rpx;
	margin-left: 40rpx;
}
.calendar_card .t1 {
	color: #7f8caf;
	font-size: 24rpx;
}
.calendar_card .t2 {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #32467b;
	margin: 0 10rpx;
}
.calendar_card .t3 {
	font-size: 30rpx;
	font-weight: bold;
	color: #32467b;
	text-shadow: 0rpx 3rpx 3rpx rgba(0, 0, 0, 0.2);
	margin: 0 10rpx;
}
.img_more {
	width: 26rpx;
	height: 26rpx;
}
</style>