baiyuApp/pages_manage/components/UrgeIndex.vue

<template>
	<view class="container column hb flex-1 hidden">
		<view class="p20 bgf titleBox" 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 class="list-box mt10" @click="openProjectPopup" v-if="current>0">
			<view class="justify-start align-center">
				项目: {{projectItem && projectItem.dictLabel || '选择项目'}}
			</view>
		</view>
		<view style="height: 100%;" class="column flex-1 hb">
			<scroll-view scroll-y="true" class="hb pb2" :refresher-enabled="isEnabled" :refresher-triggered="triggered"
				refresher-background="rgba(0,0,0,0)" @refresherrefresh="pullDownRefresh"
				@refresherrestore="triggered = false" :upper-threshold="100" :lower-threshold="100"
				@refresherabort="triggered = false" @scrolltolower="reachBottom">
				<view class="" v-if="current==0">
					<view class="listBox mt10" v-for="(item,index) in logList" :key="index"
						@tap="detailFun(item.logId)">
						<view class="x-bc">
							<view class="">
								{{item.videoName}}
							</view>
							<view class="listBox-btn bg9 colorF" :class="[item.sendStatus==1?'green':'']">
								{{item.sendStatus==1?'已完成':'进行中'}}
							</view>
						</view>
						<view class="listBox-line"></view>
						<view class="">
							发课时间:{{item.planSendTime}}
						</view>
						<view class="x-f mt20" v-if="item.tagNames">
							<view class="mr10">
								标签:
							</view>
							<view class="x-f" v-if="item.tagNames">
								<view class="listBox-btn mr10" v-for="(val,key) in tagNamesFun(item.tagNames)"
									:key="key">
									{{val}}
								</view>
							</view>
						</view>
						<view class="mt20 overflow">
							会员:{{item.nickNames}}
						</view>
						<view class="mt20">
							自动催课:{{item.isUrgeCourse==1?'是':'否'}}
						</view>
						<view class="mt20 overflow">
							催课文案:{{item.urgeSendTitle}}
						</view>
						<view class="x-bc mt20">
							<view class=""></view>
							<view class="x-end">
								<view class="listBox-btn mr20" @tap="detailFun(item.logId)">
									详情
								</view>
								<view class="listBox-btn" @tap.prevent.stop="sendLogDelFun(item.logId)">
									删除
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="" v-else>
					<view class="list-box mt10" v-for="(item,index) in userlist" :key="index">
						<view class="justify-start align-center">
							<u-avatar :src="item.fsAvatar" size="50"></u-avatar>
							<view class="ml20">
								<view>{{item.fsNickName}}</view>
								<!-- <view class="fs24 mt10 base-color">{{item.title}}</view> -->
								<view class="fs24 mt10">项目: {{item.projectName}}</view>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" :class="[current==2?'current3':'current']" />
				<view class="h260"></view>
			</scroll-view>
		</view>
		<view class="urgeClasses x-c" @click="showUrgeClasses" v-if="current==2 && userlist.length>0">
			<u-button type="primary" text="一键催课"></u-button>
		</view>
		<view class="fixedBox x-c y-bc" @click="createTask" v-if="current==0">
			<view class="">
				创建
			</view>
			<view class="">
				任务
			</view>
		</view>
		<u-loading-page :loading="viewload" iconSize="32" loadingColor="#3c9cff" fontSize="24"
			:loading-text="loadingtext"></u-loading-page>
		<view class="h120"></view>
		<u-popup :show="urgeClassesShow" :closeOnClickOverlay="true" :round='10' @close="closeUrgeClasses"
			mode="center">
			<view class="urgeClassesPop x-ac y-start">
				<view class="x-bc urgeClassesPop-title">
					<view class="">

					</view>
					<view class="f-c">
						催课
					</view>
					<view class="" @click="closeUrgeClasses">
						<u-icon name="close" size="16"></u-icon>
					</view>
				</view>
				<view class="mt20">
					是否需要催课
				</view>
				<u-radio-group class="mt20" v-model="params.isSendCourse" @change="groupChange" placement="row">
					<u-radio class="mr20" label="是" :name="true"></u-radio>
					<u-radio label="否" :name="false"></u-radio>
				</u-radio-group>
				<view class="mt20">
					发课内容
				</view>
				<u--textarea class="mt20 textarea" v-model="params.title"></u--textarea>
				<view class="mt20">
					催课话术
				</view>
				<u--textarea class="mt20 textarea" v-model="params.urgeContent"></u--textarea>
				<view class="x-c urgeClassesPop-btn mt20" @click="submitUrgeClasses">
					<view>
						<u-button type="primary" text="一键催课"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="selectProjectShow" mode="bottom" :round="10" @close="selectProjectShow=false">
			<view class="popbox project-popup">
				<view class="popbox-head">
					<view class="title">选择项目</view>
					<view class="close-btn" @click="selectProjectShow=false">
						<u-icon name="close" color="#ccc" size="18"></u-icon>
					</view>
				</view>
				<view class="search-box">
					<u-search placeholder="搜索项目" v-model="searchKeyword" :showAction="false" height="36" bgColor="#F5F5F5"></u-search>
				</view>
				<view class="popbox-body">
					<scroll-view scroll-y="true" class="project-scroll-view">
						<view class="tagbox-list">
							<view class="empty-tip" v-if="filteredProjectList.length<=0">
								暂无项目
							</view>
							<view class="tag-item" v-for="(item,index) in filteredProjectList" :key='item.dictValue'>
								<u-tag :text="item.dictLabel"
									:plain="(tempProjectItem && tempProjectItem.dictValue) != item.dictValue" 
									:type="(tempProjectItem && tempProjectItem.dictValue) == item.dictValue ? 'primary' : 'info'"
									@click="handleProjectSelect(item)"></u-tag>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="popbox-footer">
					<u-button type="primary" text="确定" shape="circle" @click="confirmProject"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		sendLog,
		courseWatchLog,
		batchUrgeCourse,
		getDictProject,
		sendLogDel
	} from "../api/courseManage.js"
	import {
		getFsCourseList,
		getCourseVdieoList,
		getWorkTask
	} from "../api/manageCompany.js";
	export default {
		data() {
			return {
				list: [{
						name: '任务'
					},
					{
						name: '今日完课'
					},
					{
						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: [],
				urgeClassesShow: false,
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				isUrgeClasses: '',
				urgeClassesText: '',
				params: {
					imMsgSendDetailId: [],
					isSendCourse: false,
					title: '',
					urgeContent: ''
				},
				parameter: {
					pageNum: 1,
					pageSize: 10
				},
				projectList: [],
				projectItem: null,
				selectProjectShow: false,
				logList: [],
				triggereds: false,
				isEnableds: true,
				pagetag: [],
				scrollHeight: 0,
				searchKeyword: '',
				tempProjectItem: null,
			};
		},
		computed: {
			filteredProjectList() {
				if (!this.searchKeyword) {
					return this.projectList;
				}
				return this.projectList.filter(item => 
					item.dictLabel.toLowerCase().includes(this.searchKeyword.toLowerCase())
				);
			}
		},
		mounted() {
			uni.$on('updateList',()=>{
				this.sendLogFun()
			})
			// this.getcourseA()
			// this.getlist()
			this.sendLogFun()
		},
		onShow() {
			uni.$on('updateList',()=>{
				this.sendLogFun()
			})
		},
		methods: {
			detailFun(id) {
				uni.navigateTo({
					url: `/pages_manage/taskDetail?id=${id}`
				})
			},
			sendLogDelFun(id) {
				uni.showModal({
					title: "提示",
					content: "确认删除此任务吗?",
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							sendLogDel(id).then((res) => {
								if (res.code == 200) {
									uni.showToast({
										title: '删除成功！'
									})
									setTimeout(() => {
										this.sendLogFun('refresh')
									}, 1000)
								} else {
									uni.showToast({
										icon: 'none',
										title: res.msg
									})
								}
							})
						}
					}
				})
			},
			openProjectPopup() {
				this.tempProjectItem = this.projectItem;
				this.searchKeyword = '';
				this.selectProjectShow = true;
			},
			handleProjectSelect(item) {
				this.tempProjectItem = item;
			},
			confirmProject() {
				if (this.tempProjectItem) {
					this.projectItem = this.tempProjectItem;
					this.courseWatchLogFun('refresh');
				}
				this.selectProjectShow = false;
			},
			async getDictProjectFun() {
				const res = await getDictProject()
				if (res.code == 200) {
					this.projectList = res.data
				}
			},
			tagNamesFun(e) {
				return e.split(',')
			},
			async sendLogFun(type) {
				let params = {
					pageNum: this.parameter.pageNum,
					pageSize: this.parameter.pageSize
				}
				const res = await sendLog(params)
				if (res.code == 200) {
					this.viewload = false
					if (type == 'refresh') {
						this.logList = res.data.list
					} else {
						this.logList = [...this.logList, ...res.data.list]
					}
					this.pagetag = res.data
					this.list[0].name = `任务(${res.data.total})`
					if (res.data.isLastPage) {
						this.status = 'nomore'
					} else {
						this.status = 'loadmore'
					}
				}
			},
			async courseWatchLogFun(type) {
				let params = {
					pageNum: this.parameter.pageNum,
					pageSize: this.parameter.pageSize,
					logType: this.current * 1 + 1,
					sendType: 1,
					project: this.projectItem && this.projectItem.dictValue || '',
				}
				const res = await courseWatchLog(params)
				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
					})
				}
			},
			sectionChange(index) {
				this.current = index
				this.projectItem = null
				this.parameter.pageNum = 1
				if ([1, 2].includes(index)) {
					this.getDictProjectFun()
					this.courseWatchLogFun('refresh')
				} else {
					this.sendLogFun('refresh')
				}
			},
			reachBottom() {
				if (this.status === 'loadmore') {
					this.status = 'loading'
					uni.showNavigationBarLoading()
					setTimeout(() => {
						this.parameter.pageNum++
						if (this.current == 0) {
							this.sendLogFun()
						} else {
							this.courseWatchLogFun()
						}
						uni.hideNavigationBarLoading()
					}, 1000);
				}
			},
			//列表展示下拉
			pullDownRefresh() {
				this.triggered = true; //下拉了状态为true
				setTimeout(() => {
					this.triggered = false;
					uni.stopPullDownRefresh()
					this.pageNum = 1;
					if (this.current == 0) {
						this.sendLogFun('refresh')
					} else {
						this.courseWatchLogFun('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()
			},
			getCoursetwo(item, index) {
				//获取课程列表
				this.actC = index
				this.courseListCid = item.courseId
				this.filterData[1].name = item.courseName
			},
			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
						})
					}
				})
			},
			closeUrgeClasses() {
				this.urgeClassesShow = false
			},
			showUrgeClasses() {
				this.urgeClassesShow = true
			},
			groupChange(e) {
				this.isUrgeClasses = e
			},
			async submitUrgeClasses() {
				if (!this.params.title) return uni.showToast({
					title: '请填写发课内容！',
					icon: 'none'
				})
				if (!this.params.urgeContent) return uni.showToast({
					title: '请填写催课话术！',
					icon: 'none'
				})
				this.params.imMsgSendDetailId = this.userlist.map(item => item.imMsgSendDetailId)
				const res = await batchUrgeCourse(this.params)
				if (res.code == 200 || res.errCode == 0) {
					uni.showToast({
						title: '催课成功！'
					})
					setTimeout(() => {
						this.sendLogFun('refresh')
					}, 1000)
					this.closeUrgeClasses()
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			createTask() {
				uni.navigateTo({
					url: '/pages_manage/createTask'
				})
			}
		}
	}
</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;
	}

	.urgeClasses {
		position: fixed;
		bottom: 138rpx;
		height: 88rpx;
		width: 100vw;
	}

	.fixedBox {
		position: fixed;
		bottom: 158rpx;
		right: 20rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background: rgb(231, 241, 254);
		padding: 10rpx;
		box-sizing: border-box;
		color: rgb(22, 119, 255);
	}

	.mt20 {
		margin-top: 20rpx;
	}

	.mr20 {
		margin-right: 20rpx;
	}

	.mr10 {
		margin-right: 10rpx;
	}

	.urgeClassesPop {
		width: calc(100vw - 100rpx);
		padding: 24rpx 48rpx;

		.textarea {
			width: 100%;
		}

		.urgeClassesPop-btn,
		.urgeClassesPop-title {
			width: 100%;
		}
	}

	.listBox {
		background: #fff;
		padding: 28rpx;

		.listBox-line {
			margin: 20rpx 0;
			border-bottom: 2rpx solid #999999;
		}

		.listBox-btn {
			padding: 2rpx 20rpx;
			border-radius: 10rpx;
			border: 1rpx solid #999999;
			width: auto;
			height: auto;
		}
	}

	.bg9 {
		background: #999999;
	}

	.popbox {
		background-color: #fff;
		border-radius: 12px;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 14px;
		color: #333;

		&-head {
			padding: 15px;
			font-weight: bold;
			font-size: 15px;
			text-align: center;
			position: relative;
		}

		.close-circle {
			position: absolute;
			right: 10px;
			top: 50%;
			transform: translateY(-50%);
		}

		&-body {
			padding: 10px 10px;
		}

		.radiobox {
			&-item {
				padding: 10px 0;
				border-bottom: 1px solid #f5f5f5;

				&:last-child {
					border-bottom: none;
				}
			}
		}

		&-footer {
			padding: 15px 0;
		}

		&-footer-btn {
			flex: 1;
			height: 44px;
			line-height: 44px;
			margin: 0 10px;
			border-radius: 50px;
			border: none;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 14px;
			color: #333;

			&::after {
				border: none;
			}
		}

		.con-btn {
			background-color: #1677ff;
			color: #fff;
		}

		.choosetitle {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 15px;
			color: #333;
		}

		.invitetip {
			margin-top: 10px;
			background-color: #ebf5fb;
			color: #1677ff;
			padding: 5px 10px;
			border-radius: 5px;
		}

		.sharePop-item {
			padding: 0 10px;
			box-sizing: border-box;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 14px;
			display: inline-flex !important;

			image {
				height: 48px;
				width: 48px;
				margin-bottom: 10px;
			}
		}
	}

	.green {
		background: #4FC06B;
		border: 1rpx solid #4FC06B !important;
	}

	.mt10 {
		margin-top: 10rpx;
	}

	.colorF {
		color: #FFFFFF;
	}

	.current {
		::v-deep .u-loadmore {
			margin-bottom: 140rpx !important;
		}
	}

	.current3 {
		::v-deep .u-loadmore {
			margin-bottom: 170rpx !important;
		}
	}

	.h260 {
		height: 260rpx;
	}

	.overflow {
		word-break: break-all;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.project-popup {
		width: 100%;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		display: flex;
		flex-direction: column;

		.popbox-head {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 30rpx;
			font-size: 32rpx;
			font-weight: bold;
			position: relative;
			border-bottom: none;

			.title {
				flex: 1;
				text-align: center;
			}

			.close-btn {
				position: absolute;
				right: 30rpx;
				top: 50%;
				transform: translateY(-50%);
				padding: 10rpx;
			}
		}

		.search-box {
			padding: 0 30rpx 20rpx;
		}

		.popbox-body {
			flex: 1;
			overflow: hidden;
			padding: 0;
		}

		.project-scroll-view {
			height: 50vh;
			padding: 0 30rpx;
			box-sizing: border-box;
		}

		.tagbox-list {
			display: flex;
			flex-wrap: wrap;
			padding-bottom: 20rpx;
		}

		.tag-item {
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}

		.empty-tip {
			width: 100%;
			text-align: center;
			color: #999;
			padding: 50rpx 0;
			font-size: 28rpx;
		}

		.popbox-footer {
			padding: 20rpx 30rpx 40rpx;
			border-top: 1px solid #f5f5f5;
		}
	}
</style>