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">
			<!-- <view>时间id{{date}}</view>
			<view>首次请求参数{{msg111}}</view> -->
			<!-- <view>copid{{corpId}}</view> -->
			<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" @click="inputget(item.externalContactId)">
					<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-between align-center" @click.passive.stop>
						<view class="justify-start">
							 <view class="mr20 fs24">最晚看课时间</view>
							 <view class="base-color-6 fs24">{{item.lastWatchDate?item.lastWatchDate:'暂无'}}</view>
						</view>
						<view class="justify-start align-center" @click="chulinew(item)">
							<u-icon name="edit-pen" size="20"></u-icon>
							<view class="fs24">处理</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="statusA" />
			</scroll-view>
		</view>
		<u-modal :show="chulishow" title="温馨提示" :content='content' :showCancelButton='true' @close='chulishow=!chulishow'
		:closeOnClickOverlay='true' @confirm='confirmchuli' @cancel='chulishow=!chulishow'></u-modal>
		<view class="">
			<u-calendar :show="showtime" :maxDate='maxDate' :minDate='minDate' @confirm="confirmData"
				:closeOnClickOverlay='true' @close="closedata"></u-calendar>
		</view>
	</view>
</template>

<script>
	import {
		getUrgeClasses,
		updataUrgeClasses
	} from "@/api/user.js";
	import { getConfigSignature,getQwExternalContactDetails } from '@/api/common.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'),
				corpId:null,
				statusColors: {
					0: '#909399',
					1: '#0bc6ff',
					2: '#67c23a',
					3: '#f55a4f',
					4: '#ffd700',
				  },
				  titname:['未看课','看课中','完课','待看课','看课中断',],
				  msg111:'',
				  chulishow:false,
				  selectitem:{},
				  content:''
			}
		},
		mounted() {
			this.date=uni.$u.timeFormat(new Date(), 'yyyy-mm-dd'),
			this.$nextTick(()=>{
				this.getCourselist()
				this.gettimeDate()
			})
			// this.getqiweilist()
		},
		onLoad(options) {
			this.qwUserId=options.userId
			this.date=options.data
			this.corpId=options.corpId
		},
		methods: {
			chulinew(item){
				this.chulishow=!this.chulishow
				this.selectitem=item
				console.log(this.selectitem)
				this.content=`是否确认处理${item.name}的催课数据`
			},
			confirmchuli(){
				this.chulishow=!this.chulishow
				const data={
					id:this.selectitem.id
				}
				uni.showLoading({
					title: "加载中..."
				})
				updataUrgeClasses(data).then(res=>{
					if(res.code==200){
						this.list=[]
						this.pageNum = 1;
						this.getCourselist()
						uni.hideLoading()
						uni.showToast({
							title: '处理成功',
							icon: 'none',
							duration: 2000,
						})
					}else{
						uni.hideLoading()
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000,
						})
					}
				})
			},
			isMobileQyWechat() {
			  const ua = navigator.userAgent.toLowerCase();
			  return ua.indexOf('mobile') > -1;
			},
			inputget(nextExternalUserId){
				if(this.isMobileQyWechat()){
					// uni.$emit('urgeUser', nextExternalUserId);
					uni.$emit('urgeUser', { pageurl: "/pages/user/UrgeClasses?userId="+this.qwUserId+'&data='+this.date+'&corpId='+this.corpId,
					 nextExternalUserIds: nextExternalUserId });
					uni.navigateBack({
						delta: 1
					});
				}else{
					jWeixin.openEnterpriseChat({
							// 注意：userIds和externalUserIds至少选填一个。内部群最多2000人；外部群最多500人；如果有微信联系人，最多40人
						externalUserIds: nextExternalUserId, // 参与会话的外部联系人列表，格式为userId1;userId2;…，用分号隔开。
						groupName: '',  // 会话名称。单聊时该参数传入空字符串""即可。
						chatId: "", // 若要打开已有会话，需指定此参数。如果是新建会话，chatId必须为空串
						success: function(res) {
							console.log(res);
							console.log("切换成功")
							uni.showToast({
								title: "切换成功",
								icon: 'none',
							});
							var data={cmd:"switchPage"};
							uni.$emit('sendMsg',data);
							 
						},
						fail: function(res) {
							console.log(res);
							console.log("切换失败")
							uni.showToast({
								title: "切换失败",
								icon: 'none',
							});
							var data={cmd:"switchPage"};
							uni.$emit('sendMsg',data);
						}
					});
				}
			},
			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 {
					console.log(index)
					let yesterday = new Date();
					yesterday.setDate(yesterday.getDate() - 1);
					this.date = uni.$u.timeFormat(yesterday, 'yyyy-mm-dd')
					// uni.$emit('urgeUser', { pageurl: "/pages/user/UrgeClasses?userId="+this.qwUserId+'&data='+this.date,
					//  nextExternalUserId: 'nextExternalUserId' });
					// uni.navigateBack({
					// 	delta: 1
					// });
				}
				
				this.getCourselist()
			},
			handleget() {
				this.isAgreement = !this.isAgreement
			},
			getCourselist(type) {
				uni.showLoading({
					title: "加载中..."
				})
				const parmas = {
					date: this.date,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					corpId:this.corpId,
					qwUserId: this.qwUserId,
					// corpId:'ww44239b22628b206c',
					// qwUserId:"ZhaoGuangDong_3",
				}
				this.msg111=parmas
				getUrgeClasses(parmas).then(res => {
					if (res.code == 200) {
						uni.hideLoading()
						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>
	page{
		background-color: #F5F7FA;
	}
	.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>