share_h5/components/recommend/merchant-top/top.vue

<!-- 完成了商学院页面 -->
<template>
	<view class="business ">
		<view class="two-item">
				<view class="plat-form" @click="goToplatform()">
					<image src="../../../static/platform.png" mode=""></image>
				</view>
				<view class="propaganda" @click="goTomaterial()">
					<image src="../../../static/propaganda.png" mode=""></image>
				</view>
		</view>
		<view class="choice-course">
			<view class="item" v-for="(item,index) in curriculum"  :class="{itemActive:colorIndex==index}"  @click="getMsg(item,index)" :key="item.id">
				{{item.course_name}}
			</view>
		</view>
		<view class="curriculum-list">
			<view class="curriculum-list-item">
				<view class="item" v-for="(item,index) in bottomList" @click="gotoarticle()">
					<view class="image">
						<image :src="item.cover" mode=""></image>
					</view>
					<view class="right-title">
						<view class="title">
							{{item.title}}
						</view>
						<view class="video-num">
							观看 241321
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {classifyList,articleList} from "@/api/notice.js"
	export default{
		data(){
			return{
				curriculum:[
					{
						id:1,
						name:"推荐课程",
					},
					{
						id:2,
						name:"热门课程",
					},
					{
						id:3,
						name:"社区运营",
					},
					{
						id:4,
						name:"选品"
					}
				],
				
				params:{
					recommend:1,
					hot:1,
					title:1,
					article_id:1
				},
				bottomList:[],//底部list数据
				colorIndex:0,

			}
		},
		created() {
			this.getList()
		},
		onPullDownRefresh(){
			this.getMsg()
		},
		
		methods:{
			//获取list列表内容
			getMsg(item,index){
				console.log(index)
				this.colorIndex = index
				this.params.article_id = item.id
					this.$http.get(articleList,this.params).then(res=>{
						if(res&&res.code==200){
							// this.bottomList = res.data.list
							console.log(res.page.list)
							this.bottomList= res.page.list
						}
					})
					
			},
			//获取头部list内容
			getList(){
				console.log(6666666666666)
				this.$http.get(classifyList).then(res=>{
					if(res&&res.code==200){
						console.log(res)
						this.curriculum = res.list
					}
				})
			},
			
			//跳转平台公告页面
			goToplatform(){
				uni.navigateTo({
					url:"../../../pages/research/business/platform"
				})
			},
			//跳转宣传素材页面
			goTomaterial(){
				uni.navigateTo({
					url:"../../../pages/research/business/material"
				})
			},
			gotoarticle(){
				uni.navigateTo({
					url:"../../../pages/research/business/article"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.business{
		overflow: hidden;
		.two-item{
				background-color: #02331e;
			margin-top: 88rpx;
			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{
						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;
			color: #ffffff;
			padding: 38rpx 33rpx 19rpx 30rpx;
			.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;
			}
		}
	}
</style>