yicangzongtai_app_240321/pages/research/recommend/merchant-top/top.vue

	<!-- 完成了商学院页面 -->
<template>
	<view class="business ">
		<view class="two-item">
				<view class="plat-form" @click="goToplatform()">
					<image :src="imgUrl+'/platform.png'" mode=""></image>
				</view>
				<view class="propaganda" @click="goTomaterial()">
					<image :src="imgUrl+'/propaganda.png'" mode=""></image>
				</view>
		</view>
<!-- 		<view class="" @click="getList">
			123123123
		</view> -->
		<view class="choice-course">

			<view class="item" v-for="(item,index) in curriculum"  :class="{itemActive:colorIndex==index}"  @click="getMsg(item,index)" :key="index">
				{{item.course_name}}
			</view>
			<view class="item"></view>
		</view>
		<view class="curriculum-list">
			<view class="curriculum-list-item">
				<view  v-if="bottomList&&bottomList.length>0">
				<view class="item"  v-for="(item) in bottomList" :key="item.id" @click="gotoarticle(item)">
					<view class="image"  style="position: relative;">
						<image :src="item.cover" mode="aspectFill" ></image>	
						<text v-if="item.article_type==0" style="position: absolute; left: 10rpx; top: 10rpx; width: 30rpx; height: 30rpx; color: #053520;" class="iconfont">&#xe683;</text>
						<text v-if="item.article_type==1" style="position: absolute; left: 10rpx; top: 10rpx; width: 30rpx; height: 30rpx; color: #053520;" class="iconfont">&#xe631;</text>
					</view>
					<view class="right-title">
						<view class="title">
							{{item.title}}
						</view>
						<view class="video-num">
							观看 {{item.browse_sum}}
						</view>
					</view>
				</view>
					<loadMore v-if="bottomList.length>0" :status="status" ></loadMore>
				</view>
				<nodata v-else  style="height: 100%;" :config="{top:1,content:'暂无课程'}"></nodata>
			</view>
		</view>
	</view>
</template>

<script>

	import {classifyList,articleList,recommendList,hotList} from "@/api/notice.js"
	export default{
		data(){
			return{
				curriculum:[
					{
						id:-1,
						course_name:"推荐课程",
					},
					{
						id:-2,
						course_name:"热门课程",
					},

				],
				
				params:{
			 page:1,
			 limit:10
				},
				bottomList:[],//底部list数据
				colorIndex:0,

					status:"more",
					page:1,
					limit:10,
					imgUrl: this.$mConfig.staticUrl
			}
		},
		created(){
			this.getList()
		},
		methods:{
			getMsg(item,index){
				this.colorIndex=index
				delete this.params.recommend
				delete this.params.hot
				delete this.params.course_id
				this.params.page=1
					this.bottomList=[]
				if(index==0){
					this.params.recommend=1
				}
				if(index==1){
					this.params.hot=1
				}
				if(index>1){
					this.params.course_id=item.id
				}
				this.initialization()
			},
			//上拉加载
			loaderMore(){
				if(this.status=="more"){
					this.params.page++
					this.initialization()
				}
			},
			isload(){
				this.params.page = 1;
				this.bottomList=[],
				this.initialization()
				
			},
			initialization(){
				this.$http.get('/bbs/article/list',this.params).then(res=>{
					if(res&&res.code==200){
						this.bottomList =this.bottomList.concat(res.page.list)
						this.$emit("bottomList",this.bottomList)
						if (res.page.totalPage <= res.page.currPage) {
						  this.status = "noMore";
						} else {
						  this.status = "more";
						}
					}
				})
			},			
			//获取头部list内容
			getList(){
				this.$http.get(classifyList).then(res=>{
					if(res&&res.code==200){
						console.log(res)
						this.curriculum = this.curriculum.concat(res.list)
						this.params.recommend=1
						this.initialization()
					}
				})
			},
			
			//跳转平台公告页面
			goToplatform(){
				uni.navigateTo({
					url:"../../../pages/research/business/platform"
				})
			},
			//跳转宣传素材页面
			goTomaterial(){
				uni.navigateTo({
					url:"../../../pages/research/business/material"
				})
			},
			gotoarticle(item){
				uni.navigateTo({
					url:"../../../pages/research/business/article?id="+item.id
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #F5F5F5;
	}
	</style>
<style lang="scss" scoped>
	
	/deep/.uni-load-more__text{
		font-size: 24rpx;
	}
	.business{
		overflow: hidden;
		.two-item{
			background-color: #02331e;
			margin-top: 148rpx;
			display: flex;
			padding: 32rpx 30rpx 41rpx 30rpx;
			.plat-form{
				image{
					width: 328rpx;
					height: 172rpx;
					margin-right: 34rpx;
				}
			}
			.propaganda{
				image{
					width: 328rpx;
					height: 172rpx;
				}
			}
		}
		.curriculum-list{
			background-color: #02331e;
			.curriculum-list-item{
				padding: 40rpx 30rpx 40rpx 30rpx;
				border-radius: 40rpx 40rpx 0 0;
				background-color: #f5f5f5;
				.item{
					background-color: #ffffff;
					padding: 20rpx;
					display: flex;
					margin-bottom: 25rpx;
					border-radius: 18rpx;
					.image{
						margin-right: 40rpx;
						image{
							border-radius: 18rpx;
							width: 238rpx;
							height: 151rpx;
						}
					}
				}
				.right-title{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.title{
						word-break:break-all;
						line-height: 36rpx;
						margin-top: 4rpx;
						color: #181818;
						font-size: 28rpx;
						font-weight: 400;
					}
					.video-num{
						margin-bottom: 4rpx;
						color: #999999;
						font-weight: 400;
						font-size: 24rpx;
					}
				}
				
			}
		}
		.choice-course{
			background-color: #02331e;
			display: flex;
			align-items: center;
			white-space: nowrap;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
			color: #ffffff;
			padding: 38rpx 33rpx 19rpx 30rpx;
			padding-right: 20rpx;
			
			.item:last-child{
				margin-right: 33rpx;
			}
			.item{
				margin-right: 33rpx;
				padding-bottom: 19rpx;
				margin-bottom: 10rpx;
				font-size: 28rpx;
				font-weight: Medium;
				color: rgba(255,255,255,1);
				position: relative;
			}
			.itemActive:before{
				content: "";
				position: absolute;
				left: 25%;
				bottom: 0;
				width: 50%;
				height: 2rpx;
				background-color: #FFFFFF;
			}
			.itemActive{
				font-size: 32rpx;
				font-weight: 700;
			}
		}
	}
</style>