zkcommon_course/pages_manage/components/UrgeIndex.vue

<template>
	<view class="container column hb hidden">
		<view class="p20 bgf" style="z-index: 999;">
			<u-subsection class="subsection" :list="list" :current="current" bgColor="#e7f1fe" activeColor="#1677ff"
				:fontSize="15" :bold="false" @change="sectionChange"></u-subsection>
		</view>
		<view style="flex: 1;" >
			<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 {
		getFsCourseList,
		getCourseVdieoList,
		getWorkTask
	} from "@/api/manageCompany.js";
	export default {
		data() {
			return {
				list: [{
					name: '注册会员',
				}
				],
				current:0,
				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: {
			sectionChange(index){
				this.current=index
			},
			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>