XLJK-web/xinlijiankang-uniapp-main/pages/index/hd.vue

<template>
	<view>
		<u-navbar :is-back="false" :border-bottom="false" :background="background">
			<view style="width: 100%;padding: 0 10rpx;">
				<view class="flztoa inlbhhe ">
					<navigator class="indihh" url="../index/index" open-type="redirect" hover-class="none">
						<text>最新</text>
					</navigator>
<!-- 					<navigator class="indihh" url="../index/hykt" open-type="redirect" hover-class="none">
						<text>会员</text>
					</navigator> -->
					<navigator class="indihh" url="../index/zylx" open-type="redirect" hover-class="none">
						<text>治愈练习</text>
					</navigator>
					<view class="indihh">
						<text style="font-size: 44rpx;color:  #374B6E;">活动</text>
						<view style="width: 26rpx;height: 4rpx;background: #374B6E;border-radius: 4rpx;margin-top: 10rpx;"></view>
					</view>
				</view>
			</view>
		</u-navbar>
		
		<view class="hdxmjjr">
			<view class="hddderimg" style="overflow: hidden;">
				<!-- 图片预留 -->
				<image :src="bannerImage" style="width: 100%; height: 100%;" mode="aspectFill"></image>
			</view>
			<view class="hdwdxinr">
				<navigator  url="/pages/lecturer/wdhd"  hover-class="none">
					<text style="font-size: 44rpx;color:  #374B6E;">我的活动</text>
				</navigator>
				<view class="hdmmner"></view>
				<navigator  url="/pages/lecturer/wdkc"  hover-class="none">
					<text style="font-size: 44rpx;color:  #374B6E;">我的课程</text>
				</navigator>
			</view>
		</view>
		<view class="inyyeddf" v-if="kclist.length">
			<view class="indhuyr">
				<view class="indjbrr"></view>
				<text>热门课程</text>
			</view>
			<scroll-view class="hdceert" style="white-space: nowrap;" @scrolltolower="scrolltolowerkc" scroll-x>
				<view class="hdhhyyr" v-for="(item,index) in kclist" :key="index" style="display: inline-block;">
					
				</view>
			</scroll-view>
		</view>
		
		<view class="inyyeddf" v-if="zblist.length">
			<view class="indhuyr">
				<view class="indjbrr"></view>
				<text>直播课程</text>
			</view>
			<scroll-view class="hdceert" style="white-space: nowrap;" @scrolltolower="scrolltolowerzb" scroll-x>
				<view class="hdhhyyr" v-for="(item,index) in zblist" :key="index" style="display: inline-block;">
					
				</view>
			</scroll-view>
		</view>
		
		<view class="inyyeddf" v-if="actlist.length">
			<view class="indhuyr">
				<view class="indjbrr"></view>
				<text>线下活动</text>
			</view>
			<scroll-view class="hdceert" style="white-space: nowrap;" @scrolltolower="scrolltoloweract" scroll-x >
				<view class="hdhhyyr" v-for="(item,index) in actlist" :key="index" @click="toDetail(item.id)" style="display: inline-block; overflow: hidden;">
					<image :src="item.imglist[0]" mode="aspectFill" style="width: 100%; height: 100%;"></image>
				</view>
			</scroll-view>
		</view>
		
		<view class="youjdje" @click="toAddcourse">
			<image src="/static/index/inr2.png" style="width: 96rpx;height: 96rpx;min-width: 96rpx;" mode=""></image>
		</view>
		
		<view style="height: 130rpx;"></view>
		<view class="dibuboot">
			<navigator class="dibubootlb" url="../index/index" open-type="redirect" hover-class="none">
				<image src="/static/dibu/bob1.png" style="width: 48rpx;height: 48rpx;"></image>
				<text style="color: #374B6E">首页</text>
			</navigator>
<!-- 			<navigator class="dibubootlb" url="../lecturer/wdzx" open-type="redirect" hover-class="none">
				<image src="/static/dibu/boa2.png" style="width: 48rpx;height: 48rpx;"></image>
				<text>咨询</text>
			</navigator>
			<navigator class="dibubootlb" url="../index/jiehuo" open-type="redirect" hover-class="none">
				<image src="/static/dibu/boa3.png" style="width: 48rpx;height: 48rpx;"></image>
				<text>解惑</text>
			</navigator> -->
			<navigator class="dibubootlb" url="../lecturer/my" open-type="redirect" hover-class="none">
				<image src="/static/dibu/boa4.png" style="width: 48rpx;height: 48rpx;"></image>
				<text>我的</text>
			</navigator>
		</view>





	</view>
</template>
<style>
	page {
		background: #FAFAFA;
	}
</style>
<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#ffffff',
				},
				bannerImage:'',   // 顶部图片
				kclist:[],   // 热门课程
				kcpage:1,    // 当前第几页课程
				kctotal:0,    // 课程总条数
				kc_id:0,			// 热门课程的id
				
				actlist:[],   // 活动列表 
				actpage:1,    // 当前第几页活动
				acttotal:0,		// 活动总条数
				
				zblist:[],			// 直播课程列表
				zbpage:1,    	// 当前第几页直播课程
				zbtotal:20,    // 直播课程总条数
			}
		},
		onLoad() {
			this.getCover()
			this.getMyCourseOrder()
			this.getAcList()
			// 我的报名 留着备用
			// this.$post({
			// 	data:{
			// 		do:'MyGoodOrder',
			// 		data:{
			// 			page:1,
			// 			num:10,
			// 			type:1,
			// 			user_id:uni.getStorageSync('id'),
			// 			pw:375
			// 		}
			// 	}
				
			// }).then(res=>{
			// 	console.log(res,'+++++')
			// 	console.log(JSON.parse(res.data.list[0].app_content))
			// })
		},
		methods: {
			
			// 热门课程到底
			scrolltolowerkc(){
				if(this.kclist.length<this.kctotal){
					this.zbpage++
					this.getClassList(this.kc_id)
				}
			},
			// 直播划到底
			scrolltolowerzb(){
				if(this.zblist.length<this.zbtotal){
					this.zbpage++
					// 调直播课程接口
				}
			},
			// 活动划到底
			scrolltoloweract(){
				if(this.actlist.length < this.acttotal){
					this.actpage++
					this.getAcList()
				}
			},
			// 获取课程分类
			getMyCourseOrder(){
				this.$post({
					data:{
						do:'CourseType',
						data:{
							user_id:uni.getStorageSync('id'),
							type_id:0,
							pw:375
						}
					}
				}).then(res=>{
					let id  = res.data.find(item=>item.title=='热门课程').id
					this.kc_id = id
					this.getClassList(id)
				})
			},
			// 获取热门课程
			getClassList(type_id){
				this.$post({
					data:{
						do:'CourseList',
						data:{
							page:1,
							num:10,
							type_id,
							user_id:uni.getStorageSync('id')
						}
					}
				}).then(res=>{
					this.kctotal = res.data.total
					this.kclist = this.actpage==1?res.data.data:[...this.kclist,...res.data.data]
				})
			},
			// 获取活动列表
			getAcList(){
				this.$post({
					data:{
						do:'GoodList',
						data:{
							page:this.actpage,
							num:20,
							type_id:1,
						}
					}
				}).then(res=>{
					console.log(res,'actlist')
					this.acttotal = res.data.total
					this.actlist = this.actpage==1?res.data.data:[...this.actlist,...res.data.data]
				})
			},
			// 获取活动顶部图片
			getCover(){
				this.$post({
					data:{
						do:'HomeView',
					}
				}).then(res=>{
					console.log(res,'cover')
					this.bannerImage = res.data.type_4[0].img || ''
				})
			},
			// 活动详情
			toDetail(id){
				uni.navigateTo({
					url:'/pages/user/wdhd-xq?id='+id
				})
			},
            // 去添加课程
            toAddcourse(){
                if(uni.getStorageSync('is_lecturer')!=1){
                   uni.showToast({
                       title:'您还不是讲师，暂不能添加课程',
                       icon:'none'
                   }) 
                   return
                }else{
                    uni.navigateTo({
                        url:"../lecturer/sckc"
                    })
                }
            }
			
		}
	}
</script>

<style lang="scss" scoped>
	.hdxmjjr{
		margin: 30rpx 20rpx;
	}
	.hddderimg{
		height: 364rpx;
		background: #4D6E99;
		box-shadow: 0rpx 8rpx 12rpx 2rpx rgba(15, 45, 209, 0.1607843137254902);
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}
	.hdmmner{
		width: 2rpx;
		height: 60rpx;
		background:#E4E4E4;
	}
	.hdwdxinr{
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.058823529411764705);
		border-radius: 0rpx 0rpx 16rpx 16rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 36rpx;
		font-weight: 400;
		color: #374B6E;
		line-height: 50rpx;
		padding: 30rpx 96rpx;
		font-family: PingFang SC-Bold, PingFang SC;
	}
	.hdhhyyr{
		width: 266rpx;
		min-width: 266rpx;
		height: 180rpx;
		background: #88BBDA;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-right: 20rpx;
	}
	.hdceert{
		display: flex;
		justify-content: flex-start;
		overflow-x: auto;
		margin-top: 30rpx;
	}
	 
	 
	 
</style>