ylrz_scrm_company_h5/components/qiweiUrgeCourse.vue

<template>
	<view class="column " style="height: 100%;">
		<view class="bgf justify-between pb16  flex-1" style="z-index:2;">
			<dropdownPanel :filterData='filterData' @confirm="confirm" @reset="reset" @onChange="onChange"
				style="flex: 1;">
				<view class="p20 fs28 column flex-1 scrolly hb hidden" v-if="searchbarNav == 0">
					<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 qiweilist" :key="item.dictValue" class="m10 p10 center"
							:class="qiweiuser.dictLabel==item.dictLabel?'select':''"
							style="border-bottom: 2rpx solid #eee;" @click="getCourseOne(item)">
							{{item.dictLabel}}
						</view>
						<u-loadmore :status="statusC" />
					</scroll-view>
				</view>
			</dropdownPanel>
		</view>
		<view class="bgf p20 justify-between align-center ">
			<view style="color: #666;font-size: 24rpx;" @click="showtime=!showtime">{{date||"请选择时间"}}</view>
			<view class="justify-between">
				<view :class="timeact==index?'tabtime selecttime':'tabtime'" v-for="(item,index) in timeTab"
					:key="index" @click="seltime(index)">
					{{item}}
				</view>
			</view>
		</view>
		<view class="justify-between align-center p20 ">
			<view class="fs24">共{{list.length}}条数据</view>
		</view>
		<view class="column hb hidden">
			<scroll-view scroll-y="true" class="hb" :refresher-enabled="isEnableds"
				style="height: calc(100vh - 300rpx);" :refresher-triggered="triggereds"
				refresher-background="rgba(0,0,0,0)" @refresherrefresh="pullDownRefreshs"
				@refresherrestore="triggereds = false" :upper-threshold="100" :lower-threshold="100"
				@refresherabort="triggereds = false" @scrolltolower="reachBottoms">
				<view class="list-box" v-for="(item,index) in list" :key="index">
					<view class="justify-between align-center ptb40">
						<view>{{item.title}}</view>
						<view class="justify-start align-center">
							<u-icon name="file-text" color="#999999" size="20" class="mr10"></u-icon>
							<u-icon name="more-circle" color="#999999" size="16"></u-icon>
						</view>
					</view>
				</view>
				<u-loadmore :status="statusA" />
			</scroll-view>
		</view>
		<view class="">
			<u-calendar :show="showtime" :maxDate='maxDate' :minDate='minDate' @confirm="confirmData"
				:closeOnClickOverlay='true' @close="closedata"></u-calendar>
		</view>
	</view>
</template>

<script>
	import {
		geturgeCourse,
		geturgeqiwei
	} from "@/api/courseManage.js";
	import dropdownPanel from "@/components/dropdownPanel.vue"
	export default {
		name: "qiweiUrgeCourse",
		components: {
			dropdownPanel
		},
		data() {
			return {
				actnav: 0,
				showsel: false,
				timeTab: ['今天', '昨天'],
				timeact: 0,
				isAgreement: false,
				littleTime: ['01', '02', '03', '04', '05', '06', '07'],
				qiweilist: [],
				qiweiuser: [],
				valuetime: '',
				showtime: false,
				todayday: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd'),
				maxDate: '',
				minDate: '',
				date: '',
				list: [],
				//分页
				triggereds: false,
				isEnableds: true,
				statusA: 'nomore',
				pageNum: 1,
				pageSize: 8,
				filterData: [{
					name: '选择企微账号',
					value: 0,
				}, ],
				searchbarNav: 0,
				//企微分页
				triggeredC: false,
				isEnabledC: true,
				statusC: 'nomore',
				pageNumC: 1,
				pageSizeC: 6,
			}
		},
		mounted() {
			this.getCourselist()
			this.getqiweilist()
			this.gettimeDate()
		},
		methods: {
			getCourseOne(e) {
				console.log(e)
				this.qiweiuser = e
			},
			reachBottomC() {
				// status这个是加载状态
				console.log(12345)
				if (this.statusC === 'loadmore') {
					this.statusC = 'loading'
					uni.showNavigationBarLoading()
					setTimeout(() => {
						this.pageNumC++
						this.getqiweilist() //触底  不穿执行else
						uni.hideNavigationBarLoading()
					}, 1000);
				}
			},
			//列表展示下拉
			pullDownRefreshC() {
				// 下拉
				console.log(12345)
				this.triggeredC = true; //下拉了状态为true
				setTimeout(() => {
					this.triggeredC = false;
					uni.stopPullDownRefresh()
					this.pageNumC = 1;
					this.getqiweilist('refresh') //触底  不穿执行else
					// 请求接口里面需要判断是不是最后一页   是最后一页 status赋值为‘loadmore’没有更多了
					// 请求接口
				}, 1000)
			},
			confirm() {
				this.filterData[0].name = this.qiweiuser.dictLabel
				this.getCourselist()
			},
			reset() {
				this.qiweiuser = []
				this.filterData[0].name = '请选择企微账号'
				this.getCourselist()
			},
			onChange(index) {
				this.searchbarNav = index
			},
			reachBottoms() {
				// status这个是加载状态
				if (this.statusA === 'loadmore') {
					this.statusA = 'loading'
					uni.showNavigationBarLoading()
					setTimeout(() => {
						this.pageNum++
						this.getCourselist() //触底  不穿执行else
						uni.hideNavigationBarLoading()
					}, 1000);
				}
			},
			//列表展示下拉
			pullDownRefreshs() {
				// 下拉
				this.triggereds = true; //下拉了状态为true
				setTimeout(() => {
					this.triggereds = false;
					uni.stopPullDownRefresh()
					this.pageNum = 1;
					this.getCourselist('refresh') //触底  不穿执行else
					// 请求接口里面需要判断是不是最后一页   是最后一页 status赋值为‘loadmore’没有更多了
					// 请求接口
				}, 1000)
			},
			confirmData(e) {
				this.showtime = !this.showtime
				this.date = e[0]
				this.pageNum = 1
				this.getCourselist()
			},
			gettimeDate() {
				// 获取当前时间
				const currentDate = new Date();

				// 获取一个月前的时间
				const oneMonthAgo = new Date(currentDate);
				oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 1);
				this.minDate = oneMonthAgo.getTime();

				// 获取一个月后的时间
				const oneMonthLater = new Date(currentDate);
				oneMonthLater.setMonth(oneMonthLater.getMonth() + 1);
				this.maxDate = oneMonthLater.getTime();

			},
			selcourse() {
				this.showsel = !this.showsel
			},
			close() {
				this.showsel = !this.showsel
			},
			seltime(index) {
				this.timeact = index
				this.pageNum = 1
				if (index == 0) {
					this.date = this.todayday
				} else {
					let yesterday = new Date();
					yesterday.setDate(yesterday.getDate() - 1);
					this.date = uni.$u.timeFormat(yesterday, 'yyyy-mm-dd')
				}
				this.getCourselist()
			},
			handleget() {
				this.isAgreement = !this.isAgreement
			},
			getCourselist(type) {
				// console.log(this.qiweiuser.dictValue)
				if (this.qiweiuser.dictValue == undefined) {
					uni.showToast({
						icon: 'none',
						title: '请选择企微账号'
					})
					return
				}
				const parmas = {
					qwUserId: this.qiweiuser.dictValue,
					corpId: this.qiweiuser.corpId,
					date: this.date,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				geturgeCourse(parmas).then(res => {
					if (res.code == 200) {
						const dataList = res.data.list
						if (type == 'refresh') {
							this.list = dataList
						} else {
							this.list = [...this.list, ...dataList]
						}
						this.statusC = res.data.isLastPage ? 'nomore' : 'loadmore';
						console.log(this.list)
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			getqiweilist(type) {
				const data = {
					pageNum: this.pageNumC,
					pageSize: this.pageSizeC
				}
				geturgeqiwei(data).then(res => {
					if (res.code == 200) {
						if (type == 'refresh') {
							this.qiweilist = res.data.list
						} else {
							this.qiweilist = [...this.qiweilist, ...res.data.list]
						}
						if (res.data.isLastPage) {
							this.statusC = 'nomore'
						} else {
							this.statusC = 'loadmore'
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			confirmuser(e) {
				this.showsel = !this.showsel
				this.qiweiuser = e.value[0]
				this.pageNum = 1
				this.getCourselist()
			},
			canceluser() {
				this.showsel = !this.showsel
			},
			closeuser() {
				this.showsel = !this.showsel
			},
			closedata() {
				this.showtime = !this.showtime
			}
		}
	}
</script>

<style lang="scss" scoped>
	.icon-triangle {
		width: 16rpx;
		height: 16rpx;
		margin-left: 10rpx;
	}

	.select {
		color: #1773ff;
		background-color: #e6ecff;
	}

	.tabtime {
		background-color: #f0f0f0;
		text-align: center;
		width: 140rpx;
		padding: 12rpx 0;
		border-radius: 200rpx;
		margin-left: 20rpx;
		font-size: 24rpx;
	}

	.selecttime {
		color: #fff;
		background-color: #1773ff;
	}

	/deep/ .uni-checkbox-input {
		border-radius: 50% !important;
	}

	.timelitle {
		background-color: #c2c2c2;
		color: #fff;
		border-radius: 50%;
		width: 40rpx;
		text-align: center;
		line-height: 40rpx;
		height: 40rpx;
		margin-right: 6rpx;
	}

	.list-box {
		background-color: #fff;
		padding: 28rpx;
		margin-bottom: 12rpx;
	}
</style>