lookcommon_course/pages/index/index.vue

<template>
	<view class="content p20">
		<view class="banner" v-if="advImgs.length>0">
			<u-swiper
				:list="advImgs"
				keyName="imageUrl"
				indicator
				indicatorMode="line"
				circular
				@click="handleAdvClick"
			></u-swiper>
		</view>
		<view class="p20" style="width: 100%;">
			<view class="yangshengbox bg-white p20 radius12">
				<view>养生讲堂</view>
				<view class="justify-between align-center" @click="goClassList(1)">
					<view class="fs24">查看更多</view>
					<u-icon name="arrow-right" size="20"></u-icon>
				</view>
			</view>
			<view class="courseBox">
				<view class="listbox" v-for="(item,index) in looklist" :key="index" @click="goClass(item.courseId,1)">
					<view>
						<image :src="item.imgUrl" mode="aspectFill" ></image> 
					</view>
					<view class="mt20 ">
						<view class="ellipsis bold">{{item.courseName}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getAdvList} from '@/api/index'
	import {courseList} from '@/api/class'
	export default {
		data() {
			return {
				title: '',
				advImgs:[],
				looklist:[]
			}
		},
		onLoad() {
			this.getimgList()
			this.getcourselist()
		},
		methods: {
			goClass(id,type) {
				console.log(id)
				uni.navigateTo({
					url:'/pages_course/learn?courseId='+id+'&type='+type
				})
			},
			goClassList(type) {
				uni.navigateTo({
					url: '/pages_course/teacherClassroom?type='+type
				})
			},
			getcourselist(){
				courseList().then(res=>{
					if(res.code==200){
						this.looklist=res.data
						console.log(res.data)
						console.log(111,this.looklist)
					}else{
						uni.showToast({
							title: res.msg,
							icon:'none'
						});
					}
				})
			},
			getimgList(){
				getAdvList().then(res=>{
					console.log(res)
					if(res.code==200){
						this.advImgs=res.data
					}else{
						uni.showToast({
							title: res.msg,
							icon:'none'
						});
					}
				})
			},
			handleAdvClick(){
				
			},
		}
	}
</script>

<style lang="scss" scoped>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: calc(100% - 40rpx);
	.banner{
		width: 100%;
		height: 236upx;
		border-radius: 10upx;
	}
	.yangshengbox{
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;
	}
	.courseBox{
		display: flex;
		justify-content: start;
		flex-wrap: wrap;
		margin-top: 20rpx;
		.listbox{
			display: flex;
			flex-direction: column;
			background-color: #fff;
			padding: 20rpx;
			margin: 10rpx;
			border-radius: 12rpx;
			width:  calc(44% - 20rpx);
			image{
				width: 100%;
				height: 360rpx;
			}
		}
	}
	
}
</style>