xingmingyi_applet/pages/index/index.vue

<template>
	<view class="content">
		<view class="top-input"><u-search :showAction="false" placeholder="输入关键词搜索课程" @focus="toNext('/pages/index/search?vedio_status='+ info.vedio_status)" v-model="keyword"></u-search></view>
		<view class="swiper">
			<u-swiper :autoplay="true" :list="banner"  keyName="img" height="140" border-radius="20" @click="bannerClick"></u-swiper>
			<view class="notice bb dffs">
				<image src="/static/img/pro/indnotice.png" mode=""></image>
				<swiper class="noswiper flex1" :autoplay="true" :interval="3000" vertical :duration="1000">
					<swiper-item @click="navTo(item)" v-for="(item, index) in notic" :key="index">
						<!-- <view class="swiper-item"></view> -->
						<view class="title fontmid">{{ item.title }}</view>
					</swiper-item>
				</swiper>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<!-- 导航列表 -->
		
		<view class="nav">
			<sh-menu class="funliBox" :flag="0" :detail="nav"  menu="5" :imgW="74"></sh-menu>
		</view>
		
		<!-- 导航列表 -->
		<view class="conwarp">
			<view class="gdHead dfsb"><view class="head">热门榜单</view></view>
			<view class="specGod dffs">
				<view @click="newxtTo(1, item, ite)" v-for="(item, index) in list_one" class="shopsLi" :key="index">
					<image class="bg" :src="'/static/img/temp/indbg' + (index + 1) + '.png'" mode=""></image>
					<view class="shopBox">
						<view class="topLeft">Top {{ item.num }}</view>
						<view class="title blod fontbase">{{ item.name }}</view>
						<view class="sub-title">共{{ item.count }}套｜每天更新</view>
						<view class="line-list oneelli">
							<!-- @click="newxtTo(2, item, ite)" -->
							<view v-if="ind < 3" v-for="(ite, ind) in item.data" :key="ind" class="li oneelli">{{ ite.rank_num }}、{{ ite.desc }}</view>
						</view>
						<view class="all dffs">
							查看全部{{ item.count }}套
							<u-icon name="arrow-right" color="#fff" size="10"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="conwarp fl-box">
			<view class="gdHead dfsb"><view class="head">活动专区</view></view>
			<view class="fl-two dfsb">
				<image @click="toNext('/pagesA/mall/mall?type=2')" :src="info.pintuan_img" mode="widthFix"></image>
				<image @click="toNext('/pagesA/mall/mall?type=3')" :src="info.miaosha_img" mode="widthFix"></image>
			</view>
		</view>
		<!-- -->
		<view  v-if="info.vedio_status==1" class="conwarp fl-box">
			<view class="gdHead dfsb">
				<view class="head">教学视频</view>
				<view @click="toNext('/pages/index/video/video')" class="fontssm promain dffs">
					查看更多
					<u-icon name="arrow-right" color="#025B58" size="10"></u-icon>
				</view>
			</view>
			<view class="fl-thr">
				<view class="thr-tab scrollx">
					<navigator :url="'/pages/index/video/video?cat='+item.id" class="li fontssm" :class="ind == 0 ? 'sel' : ''" v-for="(item, ind) in vedio_cats" :key="ind">{{ item.name }}</navigator>
				</view>
				<view class="tab-con scrollx dffs"><video-list :flag="1" :list="video_list"></video-list></view>
			</view>
		</view>
		<view class="conwarp fl-box">
			<view class="gdHead dfsb">
				<view class="titBox dffs">
					<view class="head">名校推荐</view>
					<!-- <view
						@click="toNext('/pages/index/school/school?type=' + item.id)"
						v-for="(item, ind) in school_type"
						:key="ind"
						:class="[ind == 0 ? 'head' : '', 'textgrey fontmid']"
					>
						{{ item.name }}
					</view> -->
				</view>
				<view @click="toNext('/pages/index/school/school?type=' + school_type[0].id)" class="fontssm promain dffs">
					查看更多
					<u-icon name="arrow-right" color="#025B58" size="10"></u-icon>
				</view>
			</view>
			<view class="fl-four scrollx dffs">
				<view @click="toNext('/pages/index/school/schoolInfo?id=' + item.id)" class="schLi dffs" v-for="(item, ind) in school" :key="ind">
					<image class="bg" :src="item.logo" mode=""></image>
					<view class="shopBox flex1 dffd">
						<view class="bold fontmid oneelli">{{ item.name }}</view>
						<view class="textgrey desc fontssm">{{ item.brief }}</view>
						<view class="all dffs">
							查看更多
							<u-icon name="arrow-right" color="#025B58" size="10"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="conwarp fl-box">
			<view class="gdHead dfsb">
				<view class="head">热门资料</view>
				<!-- <navigator url="/pagesA/mall/class" class="fontssm promain dffs">
					查看更多
					<u-icon name="arrow-right" color="#025B58" size="10"></u-icon> -->
				</navigator>
			</view>
			<view class="fl-five"><shop-list :flag="1" :list="newsInfo"></shop-list></view>
		</view>
	</view>
</template>

<script>
import shMenu from './components/sh-menu.vue';
import videoList from '@/components/videoList.vue';
import shopList from '@/components/shopList.vue';
export default {
	components: {
		shMenu,
		shopList,
		videoList
	},
	data() {
		return {
			keyword: '',
			banner: [],
			notic: [],  
			info:{},
			list_one: {},
			nav: [],
			dl_nav:[],    //独立导航列表
			school: [],
			vedio_cats: [],
			school_type: '', //教学视频 选中
			video_list: [],
			newsInfo: [],
			page: 1,
			limit: 6
		};
	},
	onPullDownRefresh() {
		setTimeout(res => {
			uni.stopPullDownRefresh();
		}, 1000);
		this.newsInfo = [];
		this.page = 1;
		this.status = 'loadmore';
		// this.getInfoList();
		this.getInfoOne();
		this.getInfotwo();
		this.getInfothree();
	},
	onReachBottom() {
		if (this.status == 'nomore') return;
		this.status = 'loading';
		this.page = ++this.page;
		// this.getInfoList();
		this.getInfothree();
	},
	onLoad(opt) {
		var yqm = '';
		let scene = decodeURIComponent(opt.scene);
		if(scene)
		{
			let scene_arr = scene.split('=');
			
			var yqm = scene_arr[1];
			console.log(yqm);
		}
		
		// let yqm = opt.yqm || '';
		if(yqm)
		{
			uni.setStorageSync('yqm', yqm);
		}
		
		this.getInfoOne();
		this.getInfotwo();
		this.getInfothree();
		// this.getInfoList();
	},
	onShareAppMessage() {
		let that = this;
		return {
			title: that.goodInfo.info.name,
			path: ""
		};
	},
	methods: {
		// 轮播
		bannerClick(e) {
			console.log('bannerClick:',e);
			let item = this.banner[e];
			console.log('item:',item);
			if (item.goods_id != 0) {
				
				switch(item.type)
				{
					case 1:
						uni.navigateTo({
							url: '/pages/index/navDet?id= ' + item.goods_id
							// url: '/pages/index/navInfo?id=' + item.goods_id
						});
						break;
					case 2:
						uni.navigateTo({
							url: '/pages/index/video/videoInfo?id=' + item.goods_id
						});
						break;
					case 3:
						uni.navigateTo({
							url: '/pages/news/newsInfo?type=2&id=' + item.goods_id
						});
						break;
					case 4:
						uni.navigateTo({
							url: '/pages/news/newsInfo?type=2&id=' + item.goods_id
						});
						break;
				}
				
			}
		},
		// 热门榜单 val 1列表 2.详情  type 1 文档 2 视频
		newxtTo(val, item, ite) {
			if (val == 1) {
				// /pages/index/classList?flag=2&subject_id=2&grade_id=1&title=资源类
				uni.navigateTo({
					url: `/pages/index/indHot?id=${item.id}&type=${item.type}`
				});
				return;
			}
			if (item.type == 1) {
				uni.navigateTo({
					url: '/pages/index/navDet?id=' + ite.id
				});
			} else {
				console.log(ite);
				uni.navigateTo({
					url: '/pages/index/video/videoInfo?id=' + ite.id
				});
			}
		},
		// 公告
		navTo(item) {
			console.log('navTo:',item);
			uni.navigateTo({
				url: '/pages/news/newsInfo?type=2&id=' + item.id
			});
		},
		
		
		//首页第一块 (轮播图 +  公告 + 导航)
		getInfoOne() {
			this.$api
				.request('index/index_one', {
					
				})
				.then(data => {
					if (data.code == 200) {
						let dl_nav 	= data.data.dl_nav;
						let nav 	= data.data.nav;
						let hb = dl_nav.concat(nav);
						this.nav = hb;

						uni.setStorageSync('showVideo',data.data.vedio_status)
						this.info = data.data;
						this.banner = data.data.banner;
						this.notic = data.data.notic;

					} else {
						this.$api.toast(data.msg);
					}
				});
		},
		
		
		//首页第二块 (榜单 +  配置 + 视频  + 名校)
		getInfotwo() {
			this.$api
				.request('index/index_two', {
					
				})
				.then(data => {
					if (data.code == 200) {
						this.school_type = data.data.school_type;
						this.vedio_cats = data.data.vedio_cats;
						this.list_one = data.data.list_one;
						// this.nav = data.data.nav;
						this.school = data.data.school;
						this.video_list = data.data.video_list;

		
					} else {
						this.$api.toast(data.msg);
					}
				});
		},
		
		
		//首页第三块 (商品)
		getInfothree() {
			this.$api
				.request('index/index_three', {
					
				})
				.then(data => {
					if (data.code == 200) {
						this.newsInfo = this.newsInfo.concat(data.data.goods);
						console.log(this.newsInfo);
						if (data.data.goods.length < this.limit) {
							this.status = 'nomore';
						}
		
					} else {
						this.$api.toast(data.msg);
					}
				});
		},
		
		
		getInfoList() {
			this.$api
				.request('index/index', {
					school_type: this.school_type || '',
					video_cat: this.vedio_cats || '',
					page: this.page,
					limit: this.limit
				})
				.then(data => {
					console.log("热门资料",data);
					if (data.code == 200) {
						let dl_nav 	= data.data.dl_nav;
						let nav 	= data.data.nav;
						
						let hb = dl_nav.concat(nav);
						
						this.nav = hb;
						console.log('合并数组: ',hb);
						
						uni.setStorageSync('showVideo',data.data.vedio_status)
						this.info =data.data;
						this.school_type = data.data.school_type;
						this.vedio_cats = data.data.vedio_cats;
						this.list_one = data.data.list_one;
						// this.nav = data.data.nav;
						this.school = data.data.school;
						this.banner = data.data.banner;
						this.notic = data.data.notic;
						this.video_list = data.data.video_list;
						this.newsInfo = this.newsInfo.concat(data.data.goods);
						console.log(this.newsInfo);
						if (data.data.goods.length < this.limit) {
							this.status = 'nomore';
						}
					} else {
						this.$api.toast(data.msg);
					}
				});
		},
		toNext(url) {
			console.log(11);
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	.top-input {
		padding: 20rpx 30rpx;
	}
	.swiper {
		margin: 0 30rpx;
	}
	.notice {
		padding: 35rpx 0 33rpx;
		image {
			width: 66rpx;
			height: 31rpx;
			margin-right: 28rpx;
		}
		.title {
			border-left: 1rpx solid #bfbfbf;
			flex: 1;
			padding: 0 26rpx;
		}
		.noswiper {
			height: 50rpx;
		}
	}
	.nav {
		margin: 25rpx 30rpx 0;
	}
	.conwarp {
		margin-left: 32rpx;
		border-radius: 16rpx;
		.gdHead {
			line-height: 58rpx;
			margin-bottom: 16rpx;
			.head {
				font-size: 34rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 48rpx;
			}
			.fontmid {
				margin-right: 10rpx;
			}
		}
		.specGod { 
			padding: 5rpx 5rpx 10rpx;
			// flex-wrap: wrap;
			display: -webkit-box;
			overflow-x: auto;
			&::-webkit-scrollbar {
				display: none;
			}

			.shopsLi {
				margin-right: 30rpx;
				width: 286rpx;
				height: 331rpx;
				border-radius: 16rpx;
				overflow: hidden;
				position: relative;
				.bg {
					position: absolute;
					top: 0;
					left: 0;
					width: 286rpx;
					height: 431rpx;
				}
				.shopBox {
					width: 100%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;
					padding: 22rpx 18rpx 20rpx;
					.topLeft {
						background: linear-gradient(90deg, #fdd597 0%, #eec37a 100%);
						border-radius: 15rpx;
						font-size: 18rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						line-height: 25rpx;
						padding: 5rpx 12rpx;
						width: 120rpx;
					}
					.title {
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #ffffff;
						line-height: 42rpx;
						margin: 9rpx 5rpx 10rpx;
					}
					.sub-title {
						font-size: 18rpx;
						font-family: PingFangSC-Light, PingFang SC;
						font-weight: 300;
						color: #ffffff;
						line-height: 25rpx;
					}
					.line-list {
						margin-top: 27rpx;
						.li {
							width: 100%;
							font-size: 20rpx;
							color: #ffffff;
							line-height: 28rpx;
							margin-bottom: 13rpx;
						}
					}
					.all {
						font-size: 16rpx;
						font-family: PingFangSC-Light, PingFang SC;
						font-weight: 300;
						color: #ffffff;
						line-height: 22rpx;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}
	}
	.fl-box {
		margin: 30rpx 30rpx 0;
		.fl-two {
			image {
				width: 340rpx;
			}
		}
		.fl-thr {
			.thr-tab {
				.li {
					background: #f2f2f2;
					border-radius: 27rpx;
					color: #999;
					padding: 8rpx 15rpx;
					margin-right: 20rpx;
				}
				.sel {
					color: $promain;
					font-weight: 500rpx;
					background: rgba(2, 91, 88, 0.1);
					border-radius: 27rpx;
					border: 1px solid #025b58;
				}
			}
			.tab-con {
				margin-top: 30rpx;
				// width: 100%;
			}
		}
		.titBox {
			&:nth-of-type(2) {
				margin-left: 30rpx;
			}
		}
		.fl-four {
			margin-top: 21rpx;
			.schLi {
				width: 430rpx;
				background-color: #fff;
				margin-right: 20rpx;
				padding: 12rpx 10rpx;
				.bg {
					width: 149rpx;
					height: 149rpx;
					margin-right: 16rpx;
				}
				.shopBox {
					width: 240rpx;
					.oneelli {
						width: 100%;
					}
					.desc {
						margin: 12rpx 0 27rpx;
						font-family: PingFangSC-Light, PingFang SC;
						font-weight: 300;
						line-height: 34rpx;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					.all {
						padding: 6rpx 18rpx;
						background: rgba(#025b58, 0.2);
						border-radius: 21rpx;
						font-size: 20rpx;
						color: $promain;
						align-self: flex-end;
					}
				}
			}
		}
	}
}
</style>