ylrz_his_scrm_company_qw/pages/user/UrgeClasses.vue

<template>
	<view class="column " style="height: 100%;">
		<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="justify-start ">
			<view v-for="(item,index) in titname" :key="index" class="justify-start align-center ml28">
				<view :style="{ backgroundColor: statusColors[index] || '#CCCCCC' }" 
				class="w24 h24 radius4"></view>
				<view class="fs24 mr6 ml10">{{item}}</view>
			</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 ptb20">
						<view class="justify-start align-center">
							 <u-avatar :src="item.avatar"></u-avatar>
							 <view class="column ml20">
								 <view class="ml20 mr20">{{item.name}}</view>
								 <view class="base-color-red fs24">{{item.title}}</view>
							 </view>
							
						</view>
						<view class="column align-center" >
							<view class="fs24 base-color-6">过往7天看课记录</view>
							<view class="justify-start align-center mt12" >
								<view class="w24 h24 mr10 radius4" v-for="(item,index) in item.logs" :key="index"
								:style="{ backgroundColor: statusColors[item] || '#CCCCCC' }"></view>
							</view>
						</view>
					</view>
					<view class="justify-start">
						 <view class="mr20 fs24">最晚看课时间</view>
						 <view class="base-color-6 fs24">{{item.lastWatchDate?item.lastWatchDate:'暂无'}}</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 {
		getUrgeClasses,
	} from "@/api/user.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: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd'),
				list: [],
				//分页
				triggereds: false,
				isEnableds: true,
				statusA: 'nomore',
				pageNum: 1,
				pageSize: 8,
				filterData: [{
					name: '选择企微账号',
					value: 0,
				}, ],
				searchbarNav: 0,
				qwUserId:uni.getStorageSync('qwUserId'),
				statusColors: {
					0: '#909399',
					1: '#0bc6ff',
					2: '#67c23a',
					3: '#f55a4f',
					4: '#ffd700',
				  },
				  titname:['未看课','看课中','完课','待看课','看课中断',]
			}
		},
		mounted() {
			this.getCourselist()
			// this.getqiweilist()
			this.gettimeDate()
		},
		methods: {
			checkdetail(){
				uni.navigateTo({
					url:'/pages/course/urgeclassDetail'
				})
			},
			getCourseOne(e) {
				this.qiweiuser = e
			},
			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
				}, 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
				this.list=[]
				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) {
				const parmas = {
					qwUserId: this.qwUserId,
					date: this.date,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					companyUserId: 8584,
					companyId: 11,
				}
				getUrgeClasses(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.statusA = res.data.isLastPage ? 'nomore' : '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;
		margin:18rpx 20rpx;
		border-radius: 12rpx;
	}
</style>