security_study_h5/pages/index/index.vue

<template>
	<view class="pages">
		<view class="" :style="{height: navHeight+'px' }"></view>
		<u-swiper
			:list="bannerList"
			indicator
			height="300"
			:circular="true"
			keyName="sliderImg"
			bgColor="#ffffff"
			indicatorMode="dot"
			@click="bannerClick"
		></u-swiper>
		<view class="page-wrap">
			<view class="icon-nav u-flex u-row-around">
			<!-- 	<view class="nav-item" @click="$u.route('/center/mybalance')">
					<u--image class="image" :src="staticUrl+'/img/index-nav-4.png'" width="101rpx" height="101rpx"></u--image>
					需要删除
				</view> -->
				<view class="nav-item" @click="$u.route('/examination/typelist')">
					<u--image class="image" src="../../static/img/index-nav-1.png" width="101rpx" height="101rpx"></u--image>
					题库
				</view>
				<view class="nav-item" @click="$u.route('/study/studylist')">
					<u--image class="image" src="../../static/img/index-nav-2.png" width="101rpx" height="101rpx"></u--image>
					安全学习
				</view>
				<view class="nav-item" @click="$u.route('/shopping/supermarket')">
					<u--image class="image" src="../../static/img/index-nav-3.png" width="101rpx" height="101rpx"></u--image>
					云超市
				</view>
				<view class="nav-item" @click="$u.route('/pages/about/about')">
					<u--image class="image" src="../../static/img/index-nav-4.png" width="101rpx" height="101rpx"></u--image>
					关于我们
				</view>
			</view>
			<view class="hot-product">
				<view class="single-til u-flex u-row-between">
					<text class="text">学习资料</text>
					<view class="u-flex" @click="$u.route('/study/studylist')">
						<text class="more-text">更多</text>
						<u-icon name="arrow-right" color="#676767" size="24rpx"></u-icon>
					</view>
				</view>
				<view class="course u-flex u-col-top" v-for="(item,index) in courseList" :key="item.id" @click="$u.route('/study/studydetails',{id:item.id})">
					<view class="pic">
						<u--image mode="scaleToFill" width="180rpx" height="170rpx" radius="10rpx" :showLoading="true" class="image" :src="item.mainImg"></u--image>
					</view>
					<view class="text">
						<view class="title ellipsis-2">
							<text class="new" v-if="index<9">最新</text>
							{{item.title}}
						</view>
						<view class="classify">
							<!-- <text class="classify-item">测试</text> -->
						</view>
						<view class="studyUserNum">
							{{item.studyUserNum}}人已学习
						</view>
					</view>
				</view>
			</view>
			<tabbar :tabbarIndexProps='0' />
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import { systemInfo } from "@/mixin.js";
	import tabbar from "../../components/tabbar.vue";
	export default {
		components:{
			tabbar,
		},
		mixins:[systemInfo],
		data() {
			return {
				staticUrl:this.$commonConfig.staticUrl,
				advantageSize:14,
				bannerList: [],
				courseList:[],
				xsIntro:{},
				indexData:{},
			}
		},
		onLoad() {
			// let userInfo = uni.getStorageSync('userInfo');
			// console.log('userInfo',userInfo);
			let that = this;
			this.swiperList();
			this.getSystemInfo();
			// console.log('statusBarHeight',this.statusBarHeight);
			// console.log('navigationBarHeight',this.navigationBarHeight);
			// console.log('windowHeight',this.windowHeight);
			// console.log('navHeight',this.navHeight);
		},
		onShow() {
			this.getStudyLib();
		},
		methods: {
			swiperList(){
				this.$u.api.swiperList({postion:1}).then(res=>{
					this.bannerList = res.data.rows;
					// console.log('res',res.data.rows);
				}).catch(err=>{
					console.log('swiperList',err.data);
				})
			},
			bannerClick(e){
				console.log('e',e);
				// console.log('bannerClick',this.bannerList[e]);
				let item = this.bannerList[e];
				uni.$u.route('/pages/news/newsdetails', {
					type: 'swiperDetail',
					id: item.id
				});
			},
			getStudyLib(){
				this.$u.api.studyLib({pageNum:1,pageSize:10}).then(res=>{
					this.courseList = res.data.rows;
					// console.log('res',res);
				}).catch(err=>{
					console.log('getHotGoods',err.data);
				})
			}

		}
	}
</script>
<style>
page{
	background-color: #fff;
	padding-top: 0;
}
</style>
<style lang="scss" scoped>
.page-bg{
	.img{
		height: 100vh;
	}
}
.icon-nav{
	margin: 50rpx auto;
}
.product{
	background-color: #F5F5F5;
	border-bottom: 0;
	.btn{
		padding: 14rpx 40rpx;
		background: linear-gradient(90deg, #00D17D 0%, #00A447 100%);
		color: #fff;
		position: relative;
		right: -20rpx;
		border-top-left-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
	}
}
</style>