ylrz_scrm_company_h5/components/userUrgeCourse.vue

<template>
	<view class="container">
		<!-- <dropdownPanel :filterData='filterData' @confirm="confirmA" @reset="resetA" @onChange="onChangeA"
			style="flex: 1;">
			<view class="p20 fs28 column flex-1 hb hidden" v-if="searchbarNav == 0">
				<scroll-view scroll-y="true" class="hb" :refresher-enabled="isEnabledA"
					:refresher-triggered="triggeredA" refresher-background="rgba(0,0,0,0)"
					@refresherrefresh="pullDownRefreshA" @refresherrestore="triggeredA = false" :upper-threshold="100"
					:lower-threshold="100" @refresherabort="triggeredA = false" @scrolltolower="reachBottomA">
					<view v-for="(item,index) in courseListA" :key="item.index" class="m10 p10 center"
						:class="courseListAid==item.periodId?'select':''" style="border-bottom: 2rpx solid #eee;"
						@click="getCourseOne(item)">
						{{item.periodName}}
					</view>
					<u-loadmore :status="statusA" />
				</scroll-view>
			</view>
			<view class="p20 fs28 column flex-1 hb hidden" v-if="searchbarNav == 1">
				<scroll-view scroll-y="true" class="hb" :refresher-enabled="isEnabledC"
					:refresher-triggered="triggeredC" refresher-background="rgba(0,0,0,0)"
					@refresherrefresh="pullDownRefreshC" @refresherrestore="triggeredC = false" :upper-threshold="100"
					:lower-threshold="100" @refresherabort="triggeredC = false" @scrolltolower="reachBottomC">
					<view v-for="(item,index) in courseListC" :key="item.index" class="m10 p10 center"
						:class="actC==index?'select':''" style="border-bottom: 2rpx solid #eee;"
						@click="getCoursetwo(item,index)">
						{{item.courseName}}
					</view>
					<u-loadmore :status="statusC" />
				</scroll-view>
			</view>
		</dropdownPanel> -->
		<view style="flex: 1;
		height: calc(100% - 80rpx);
		overflow-y: scroll;">
			<scroll-view scroll-y="true" class="hb" :refresher-enabled="isEnabled"
				:refresher-triggered="triggered" refresher-background="rgba(0,0,0,0)"
				@refresherrefresh="pullDownRefresh" @refresherrestore="triggere = false" :upper-threshold="100"
				:lower-threshold="100" @refresherabort="triggered = false" @scrolltolower="reachBottom">
				<view class="list-box" v-for="(item,index) in userlist" :key="index">
					<view class="justify-start align-center">
						<u-avatar :src="item.avatar" size="50"></u-avatar>
						<view class="ml20">
							<view>{{item.name}}</view>
							<view class="fs24 mt10 base-color">{{item.title}}</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" />
			</scroll-view>
		</view>
		<u-loading-page :loading="viewload" iconSize="32" loadingColor="#3c9cff" fontSize="24"
		:loading-text="loadingtext"></u-loading-page>
		<view class="h120"></view>
		
	</view>
</template>

<script>
	import dropdownPanel from "@/components/dropdownPanel.vue"
	import {
		getFsCourseList,
		getCourseVdieoList,
		getWorkTask
	} from "@/api/courseManage.js";
	export default {
		name: "userUrgeCourse",
		components: {
			dropdownPanel
		},
		data() {
			return {
				viewload:true,
				loadingtext:"数据加载中...",
				filterData: [{
					name: '营期',
					value: 0,
				}, {
					name: '课程',
					value: 1,
				}],
				searchbarNav: 0,
				//营期分页
				triggeredA: false,
				isEnabledA: true,
				statusA: 'nomore',
				pageNumA: 1,
				pageSizeA: 6,
				//课程分页
				triggeredC: false,
				isEnabledC: true,
				statusC: 'nomore',
				pageNumC: 1,
				pageSizeC: 6,
				//获取营期/课程列表
				courseListA: [],
				courseListAid: '',
				courseListC: [],
				courseListCid: '',
				actC: '',
				//获取会员列表
				//课程分页
				triggered: false,
				isEnabled: true,
				status: 'nomore',
				pageNum: 1,
				pageSize: 8,
				userlist:[]
			};
		},
		mounted() {
			this.getcourseA()
			this.getlist()
		},
		methods: {
			reachBottom() {
				if (this.status === 'loadmore') {
					this.status = 'loading'
					uni.showNavigationBarLoading()
					setTimeout(() => {
						this.pageNum++
						this.getlist() 
						uni.hideNavigationBarLoading()
					}, 1000);
				}
			},
			//列表展示下拉
			pullDownRefresh() {
				this.triggered = true; //下拉了状态为true
				setTimeout(() => {
					this.triggered = false;
					uni.stopPullDownRefresh()
					this.pageNum = 1;
					this.getlist('refresh') 
				}, 1000)
			},
			getlist(type){
				const data={
					pageNum:this.pageNum,
					pageSize:this.pageSize
				}
				getWorkTask(data).then(res=>{
					if (res.code == 200) {
						this.viewload=false
						if (type == 'refresh') {
							this.userlist = res.data.list
						} else {
							this.userlist = [...this.userlist, ...res.data.list]
						}
						if (res.data.isLastPage) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			onChangeA(index) {
				this.searchbarNav = index
				if(index==1){
					if(this.courseListAid==''){
						uni.showToast({
							icon: 'none',
							title: '请先选择营期'
						})
					}
				}
			},
			confirmA() {
			},
			resetA() {
				this.courseListAid = ''
			},
			getCourseOne(item) {
				//获取营期列表
				this.courseListAid = item.periodId
				this.filterData[0].name = item.periodName
				this.courseListC=[]
				this.pageNumC=1
				this.getcourseB()
				// console.log(this.courseListAid)
			},
			getCoursetwo(item, index) {
				//获取课程列表
				this.actC = index
				this.courseListCid = item.courseId
				this.filterData[1].name = item.courseName
				// console.log(item)
			},
			reachBottomA() {
				// status这个是加载状态
				if (this.statusA === 'loadmore') {
					this.statusA = 'loading'
					uni.showNavigationBarLoading()
					setTimeout(() => {
						this.pageNumA++
						this.getcourseA() //触底  不穿执行else
						uni.hideNavigationBarLoading()
					}, 1000);
				}
			},
			//列表展示下拉
			pullDownRefreshA() {
				// 下拉
				this.triggeredA = true; //下拉了状态为true
				setTimeout(() => {
					this.triggeredA = false;
					uni.stopPullDownRefresh()
					this.pageNumA = 1;
					this.getcourseA('refresh') //触底  不穿执行else
					// 请求接口里面需要判断是不是最后一页   是最后一页 status赋值为‘loadmore’没有更多了
					// 请求接口
				}, 1000)
			},
			reachBottomC() {
				// status这个是加载状态
				if (this.statusC === 'loadmore') {
					this.statusC = 'loading'
					uni.showNavigationBarLoading()
					setTimeout(() => {
						this.pageNumC++
						this.getcourseB() //触底  不穿执行else
						uni.hideNavigationBarLoading()
					}, 1000);
				}
			},
			//列表展示下拉
			pullDownRefreshC() {
				// 下拉
				this.triggeredC = true; //下拉了状态为true
				setTimeout(() => {
					this.triggeredC = false;
					uni.stopPullDownRefresh()
					this.pageNumC = 1;
					this.getcourseB('refresh') //触底  不穿执行else
					// 请求接口里面需要判断是不是最后一页   是最后一页 status赋值为‘loadmore’没有更多了
					// 请求接口
				}, 1000)
			},
			getcourseA(type) {
				//获取营期列表
				const data = {
					pageNum: this.pageNumA,
					pageSize: this.pageSizeA,
				}
				getFsCourseList(data).then(res => {
					if (res.code == 200) {
						if (type == 'refresh') {
							this.courseListA = res.data.list
						} else {
							this.courseListA = [...this.courseListA, ...res.data.list]
						}
						if (res.data.isLastPage) {
							this.statusA = 'nomore'
						} else {
							this.statusA = 'loadmore'
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			getcourseB(type) {
				//获取课程列表
				const data = {
					pageNum: this.pageNumC,
					pageSize: this.pageSizeC,
					periodId: this.courseListAid,
					keyword: ''
				}
				getCourseVdieoList(data).then(res => {
					if (res.code == 200) {
						if (type == 'refresh') {
							this.courseListC = res.data.list
						} else {
							this.courseListC = [...this.courseListC, ...res.data.list]
						}
						if (res.data.isLastPage) {
							this.statusC = 'nomore'
						} else {
							this.statusC = 'loadmore'
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 14px;
		color: #222;
		display: flex;
		flex-direction: column;
		/* #ifdef MP-WEIXIN */
		height: 100vh;
		/* #endif */
	}
	.select {
		color: #1773ff;
		background-color: #e6ecff;
	}
	.list-box {
		background-color: #fff;
		padding: 28rpx;
		margin-bottom: 12rpx;
	}
</style>