baiyuApp/pages_manage/components/courseItem.vue

<template>
	<view class="courselist-item" style="height: 100%">
		<view class="courselist-con x-start" @click="toCourseDetail(info,sourceType)">
			<view class="courselist-img">
				<!-- <view class="status">进行中</view> -->
				<image :src="info.thumbnail" mode="aspectFill"></image>
			</view>
			<view class="courselist-con-r">
				<view @click.passive.stop="taskFun(info,sourceType)">
					<text class="more-t">{{ info.title }}</text>
					<view class="btn_icon" style="margin-left: 5px" @click="copyId">
						<image :src="imgpath + '/app/images/copy_icon.png'" mode="aspectFill"></image>
					</view>
				</view>
				<view class="courselist-desc one-t" v-show="from != 'course'">{{ info.courseName }}</view>
				<view :class="from == 'course' ? 'courselist-con-timebox ' : 'courselist-con-timebox x-f'"
					@click.passive.stop="taskFun(info,sourceType)">
					<view class="x-f acea-row">
						<u-icon class="icon" name="hourglass" color="#999" size="20"></u-icon>
						开始时间：{{ info.startDateTime ? info.startDateTime : '' }}
					</view>
					<view class="x-f acea-row">
						<u-icon class="icon" name="hourglass-half-fill" color="#999" size="20"></u-icon>
						结束时间：{{ info.endDateTime ? info.endDateTime : '' }}
					</view>
					<view class="justify-between align-center">
						<view class="x-f acea-row">
							<u-icon class="icon" name="clock" color="#999" size="16"></u-icon>
							{{ $formatSeconds(info.duration, 1) }}
						</view>
						<view class="u-border radius50 ptb8 plr18 base-color-6" style="width: fit-content"
							@click="showtime = !showtime">调整看课时间</view>
					</view>
					<u-modal :show="showtime" :title="titletime" @confirm="confirmtime" @close="showtime = !showtime"
						@cancel="showtime = !showtime" :closeOnClickOverlay="true" :showCancelButton="true">
						<view class="slot-content">
							<view class="justify-start align-center">
								<view class="mr20">开始时间：</view>
								<u-input v-model="startTimevalue" placeholder="请选择开始时间"
									@focus="startTime = !startTime"></u-input>
							</view>
							<view class="justify-start align-center mt20">
								<view class="mr20">结束时间：</view>
								<u-input v-model="endTimevalue" placeholder="请选择结束时间"
									@focus="endtime = !endtime"></u-input>
							</view>
						</view>
					</u-modal>
					<u-datetime-picker :show="startTime" v-model="value1" mode="time" @cancel="startTime = !startTime"
						@confirm="confirmstart"></u-datetime-picker>
					<u-datetime-picker :show="endtime" v-model="value2" mode="time" @cancel="endtime = !endtime"
						@confirm="confirmend"></u-datetime-picker>
				</view>
			</view>
		</view>
		<view class="justify-start align-center ml20">
			<view class="base-color-6 mr20">所属项目</view>
			<view>{{ info.projectName }}</view>
		</view>
		<view class="courselist-footer x-f">
			<!--#ifdef APP-PLUS-->
			<view class="courselist-footer-item x-c" @click="handleSendIm()">
				<u-icon name="share-square" color="#1677ff" size="18"></u-icon>
				分享课程
			</view>
			<!--#endif-->

			<!--#ifdef MP-WEIXIN-->
			<view class="courselist-footer-item x-c" @click="handleClick()">
				<u-icon name="share-square" color="#1677ff" size="18"></u-icon>
				分享课程
			</view>
			<!--#endif-->

			<!--#ifdef H5-->
			<view class="courselist-footer-item x-c" @click="handleShare">
				<u-icon name="share-square" color="#1677ff" size="18"></u-icon>
				分享课程
			</view>
			<!--#endif-->
			<view class="courselist-footer-item x-c" @click="createTask(info)">
				一键群发
			</view>
			<view class="courselist-footer-item x-c" v-show="activeTab == 1" @click="handleStatistics">
				<u-icon name="share-square" color="#1677ff" size="18"></u-icon>
				课程统计
			</view>
			<view class="courselist-footer-item x-c shuju" v-show="activeTab == 2" @click="handleStatistics">
				<u-icon name="share-square" color="#1677ff" size="18"></u-icon>
				数据统计
			</view>
		</view>
		<!-- 分享弹窗 -->
		<u-popup :show="showShare" :closeOnClickOverlay="true" :round="20" @close="closeShare" @open="openShare">
			<view class="sharePop x-ac">
				<!--#ifdef MP-WEIXIN-->
				<view class="sharePop-item y-f card-share">
					<image :src="imgPath + '/app/images/card_icon.png'" mode="aspectFill"
						style="width: 80rpx; height: 80rpx; margin-top: 20rpx"></image>
					<view style="font-weight: bold; margin-bottom: 4px">生成卡片</view>
					<view style="font-size: 12px; color: #888">指导分享轻松转发</view>
				</view>
				<!--#endif-->
				<!--#ifdef H5-->
				<view class="sharePop-item y-f" @click="buildimg">
					<image :src="imgPath + '/app/images/poster_icon.png'" mode="aspectFill"></image>
					<view style="font-weight: bold; margin-bottom: 4px">生成海报</view>
					<view style="font-size: 12px; color: #888">保存海报美观宣传</view>
				</view>
				<view class="sharePop-item y-f" @click="copyLink">
					<image :src="imgPath + '/app/images/link_icon.png'" mode="aspectFill"></image>
					<view style="font-weight: bold; margin-bottom: 4px">复制链接</view>
					<view style="font-size: 12px; color: #888">生成链接一键复制</view>
				</view>
				<!--#endif-->
			</view>
		</u-popup>
		<!-- 设置链接有效时长弹窗 -->
		<u-modal :show="setTimeShow" content="content" class="model" @confirm="confirmTime" :closeOnClickOverlay="true"
			:asyncClose="false" @close="closetext">
			<view class="setTimebox">
				<view class="timetip">不传默认以系统参数为准</view>
				<view class="x-f">
					<text style="margin-right: 20px">链接有效时长(分钟)</text>
					<u-input fontSize="14px" placeholder="链接有效时长" border="none" v-model="time" maxlength="5"></u-input>
				</view>
			</view>
		</u-modal>
		<!-- <u-notify ref="uNotify" message=""></u-notify> -->
		<!-- 生成海报 -->
		<u-popup :show="setImg" @close="closeimg" :round="12" style="z-index: 999">
			<view class="w100 h540 center">
				<image :src="codeLink.url" mode="aspectFill"></image>
			</view>
			<view class="justify-around mb40">
				<!-- <view class="column justify-center align-center" @click="shareimg">
					<image :src=:src="imgPath+'/app/image/wechat.png'" class="w80 h80"></image>
					<view class="mt10">微信好友</view>
				</view> -->
				<view class="column justify-center align-center" @click="downimg">
					<image :src="imgPath + '/app/image/downicon.png'" class="w80 h80"></image>
					<view class="mb10">长按图片保存</view>
				</view>
			</view>
		</u-popup>
		<u-overlay :show="showzhidao" @click="showzhidao = false" style="z-index: 9999">
			<view class="point-box">
				<view class="imgshe">
					<image :src="imgPath + '/app/image/point.png'" class="w300 h300"></image>
				</view>
				<view class="column colorf fs32 xu-box fs40 align-center justify-center">
					<view class="justify-center">
						点击右上角
						<image :src="imgPath + '/app/image/wxmore.png'" class="w50 h50 mlr10" />
					</view>
					<view class="mt20">选择 “转发给朋友”</view>
					<view style="color: #cbcbcb" class="fs28 mt40">点击任意位置关闭弹窗</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import {
		props
	} from 'uview-ui/libs/mixin/mixin';
	import {
		sharecourselink,
		buildCode,
		getSDK,
		updataTime
	} from '../api/courseManage';
	import IMSDK, {
		IMMethods,
		MessageStatus,
		MessageType,
		SessionType
	} from 'openim-uniapp-polyfill';
	export default {
		props: {
			activeTab: {
				type: [Number, String],
				default: 0
			},
			// 来源
			from: {
				type: String,
				default: 'live'
			},
			sourceType: {
				type: String,
				default: ''
			},
			info: {
				type: Object,
				default: () => {
					return {};
				}
			},
			parentMethod: {
				type: Function
			}
		},
		data() {
			return {
				cavansimg: false,
				showShare: false,
				setTimeShow: false,
				time: '',
				user: [],
				type: 1,
				copylink: '',
				codeLink: '',
				setImg: false,
				sendCourse: false,
				painterId: 'myPainter',
				isLongPress: false,
				painterSrc: '',
				showzhidao: false,
				imgPath: this.$store.getters.imgpath,
				imgs: this.$store.getters.imgpath + '/app/image/logoshare.png',
				showtime: false,
				titletime: '调整看课时间',
				endTimevalue: '',
				startTimevalue: '',
				startTime: false,
				endtime: false,
				value1: '00:00',
				value2: '23:59'
			};
		},
		computed: {
			imgPath() {
				return this.$store.getters.imgpath;
			}
		},
		onLoad() {},
		onShow() {
			this.setTimeShow = false
			this.showShare = false
		},
		mounted() {
			this.user = uni.getStorageSync('companyUserInfo') ? JSON.parse(uni.getStorageSync('companyUserInfo')) : {};
		},
		methods: {
			confirmstart(e) {
				this.startTimevalue = e.value;
				this.startTime = !this.startTime;
				console.log(e);
			},
			confirmend(e) {
				this.endTimevalue = e.value;
				this.endtime = !this.endtime;
				console.log(e);
			},
			confirmtime() {
				if (this.startTimevalue == '') {
					uni.showToast({
						title: '请选择开始时间',
						icon: 'none',
						duration: 1000
					});
					return;
				}
				if (this.endTimevalue == '') {
					uni.showToast({
						title: '请选择结束时间',
						icon: 'none',
						duration: 1000
					});
					return;
				}
				this.showtime = !this.showtime;
				const data = {
					periodId: this.info.periodId,
					courseId: this.info.courseId,
					videoId: this.info.videoId,
					startDateTime: this.info.startDateTime.substring(0, 10) + ' ' + this.startTimevalue + ':00',
					endDateTime: this.info.endDateTime.substring(0, 10) + ' ' + this.endTimevalue + ':59'
				};
				updataTime([data]).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '完成看课时间调整!',
							icon: 'none',
							duration: 1000
						});
						this.$emit('retime', 1);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1000
						});
					}
				});
			},
			handleClick() {
				this.parentMethod();
				this.$emit('trigger-share', {
					title: this.info.courseName + this.info.title,
					path: 'pages_course/videovip',
					onshow: true,
					params: {
						companyId: this.user.companyId,
						companyUserId: this.user.userId,
						id: this.info.id,
						projectId: this.info.projectId,
						courseId: this.info.courseId,
						videoId: this.info.videoId,
						periodId: this.info.periodId
					},
					img: this.info.thumbnail || this.imgs
				});
			},
			handleSendIm() {
				this.sendCourse = true;
				this.setTimeShow = true;
			},
			async handleSendImAction(linkId) {
				let payloadJson = {
					payload: {
						data: "course",
						extension: {
							title: this.info.title,
							appRealLink: this.copylink,
							courseUrl: this.info.thumbnail
						}
					}
				};
				let forwardMessage = {
					data: JSON.stringify(payloadJson),
					extension: '',
					description: 'course'
				};
				this.info.linkId = linkId
				uni.setStorageSync('courseItemData', this.info)
				uni.navigateTo({
					url: `/pages_im/pages/common/contactChoose/index?type=SendCourse&forwardMessage=${encodeURIComponent(JSON.stringify(forwardMessage))}&linkId=${linkId}`
				});
			},
			// 获取jssdk
			getjssdklist() {
				const param = {
					url: window.location.href.split('#')[0] // 注意去除 hash
				};
				getSDK(param).then((res) => {
					wx.config({
						debug: false,
						appId: res.data.appId, // 必填，公众号的唯一标识
						timestamp: res.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
						signature: res.data.signature, // 必填，签名
						jsApiList: ['updateAppMessageShareData', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
					});
				});
			},
			shareimg() {
				let self = this;
				//分享好友
				// 配置--配置全局
				console.log(self.info.thumbnail + self.copylink, 11111);
				wx.ready(function() {
					//需在用户可能点击分享按钮前就先调用
					wx.updateAppMessageShareData({
						title: self.info.courseName + self.info.title, // 分享标题
						desc: self.info.description, // 分享描述
						// link: self.copylink,
						link: self.copylink,
						// 分享链接，该链接域名或路径必须与当前页面对应的公众 号JS安全域名一致
						imgUrl: self.info.thumbnail || self.imgs, // 分享图标
						success: function(res) {
							console.log(self.info, '456');
							self.showzhidao = true;
							self.setImg = false;
							self.showShare = false;
							// 设置成功
							uni.showToast({
								title: '卡片已生成',
								icon: 'none',
								duration: 1000
							});
						}
					});

					// 另外一个方法·
					wx.onMenuShareAppMessage({
						title: self.info.courseName + self.info.title, // 分享标题
						desc: self.info.title, // 分享描述
						link: self.copylink,
						// 分享链接，该链接域名或路径必须与当前页面对应的公众 号JS安全域名一致
						imgUrl: self.info.thumbnail, // 分享图标
						success: function(res) {
							console.log(self.info, '456');
							self.showzhidao = true;
							self.setImg = false;
							self.showShare = false;
							// 设置成功
							uni.showToast({
								title: '卡片已生成',
								icon: 'none',
								duration: 1000
							});
						}
						// complete: function(res) {
						// 	uni.showToast({
						// 		title: JSON.stringify(res),
						// 		icon: 'none',
						// 		duration: 2000
						// 	})
						// }
					});
					// wx.error((res) => {
					// 	console.log('wx.error：', res);
					// })
				});
			},
			downimg() {},
			handleLongPress() {
				this.isLongPress = true;
				// 延时执行保存操作，避免误触
				setTimeout(() => {
					if (this.isLongPress) {
						this.saveImage();
					}
				}, 1000); // 1000毫秒后执行保存操作
			},
			saveImage() {
				const painter = this.$painter.getPainter(this.painterId);
				painter.saveImage(
					'jpg',
					(path) => {
						uni.saveImageToPhotosAlbum({
							filePath: path,
							success: () => {
								uni.showToast({
									title: '保存成功'
								});
							},
							fail: () => {
								uni.showToast({
									title: '保存失败',
									icon: 'none'
								});
							}
						});
					},
					'myCanvas'
				);
			},
			closeimg() {
				this.setImg = false;
				this.showShare = false;
			},
			closetext() {
				this.setTimeShow = false;
			},
			buildimg() {
				this.buildimgAcode();
			},
			//生成海报和二维码
			buildimgAcode() {
				uni.showLoading({
					title: '正在生成中...'
				});
				buildCode({
					companyId: this.user.companyId,
					companyUserId: this.user.userId,
					courseId: this.info.courseId,
					effectiveDuration: this.time,
					videoId: this.info.videoId,
					imgUrl: this.info.thumbnail,
					title: this.info.title,
					duration: this.info.duration,
					periodId: this.info.periodId,
					id: this.info.id
				}).then((res) => {
					if (res.code == 200) {
						this.codeLink = res.posterImage;
						this.setImg = true;
						this.getlink();
						console.log(this.codeLink);
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				});
			},
			taskFun(info, sourceType) {
				if (sourceType == 'createTask') {
					return this.$emit('courseClick', info);
				}
			},
			toCourseDetail(info, sourceType) {
				if (sourceType == 'createTask') {
					return this.$emit('courseClick', info);
				}
				uni.navigateTo({
					// url: '/pages/courseManage/course/learning?course='+JSON.stringify(info)
					// url: `/pages/courseManage/course/learning?course=${JSON.stringify(info)}&isvip=1`
					url: '/pages_managedata/coursedetail?videoId=' + info.videoId + '&id=' + info.id +
						'&periodId=' + info.periodId
				});
			},
			handleShare() {
				// #ifdef H5
				this.getjssdklist();
				this.showShare = true;
				// #endif
				// this.getlink('preload'); // 提前加载链接
			},
			closeShare() {
				this.showShare = false;
				// console.log('open');
			},
			openShare() {
				// this.showShare = false
				// console.log('close');
			},
			copyLink() {
				this.setTimeShow = true;
			},
			confirmTime() {
				const params = {
					companyId: this.user.companyId,
					companyUserId: this.user.userId,
					courseId: this.info.courseId,
					effectiveDuration: this.time,
					videoId: this.info.videoId,
					periodId: this.info.periodId,
					type: 1,
					id: this.info.id
				};
				sharecourselink(params).then((res) => {
					this.showShare = false;
					this.setTimeShow = false;
					if (res.code == 200) {
						this.copylink = res.url;
						if (this.sendCourse) {
							this.sendCourse = false;
							this.handleSendImAction(res.linkId);
							return;
						}
						setTimeout(() => {
							uni.setClipboardData({
								data: this.copylink,
								success: () => {
									uni.showToast({
										title: '链接已复制',
										icon: 'none',
										duration: 2000
									});
								},
								fail: () => {
									uni.showToast({
										title: '复制失败',
										icon: 'none'
									});
								}
							});
						}, 100);
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				});
			},
			getlink(type) {
				const params = {
					companyId: this.user.companyId,
					companyUserId: this.user.userId,
					courseId: this.info.courseId,
					time: this.time,
					periodId: this.info.periodId,
					id: this.info.id,
					// type: this.type,
					videoId: this.info.videoId
				};
				sharecourselink(params).then((res) => {
					if (res.code == 200) {
						this.copylink = res.url;
						// 强制使用 HTTPS
						//  if (this.copylink.startsWith('http://')) {
						// this.copylink = this.copylink.replace('http://', 'https://');
						//  }
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				});
			},
			handleStatistics() {
				const info = {
					courseId: this.info.courseId,
					title: this.info.title,
					thumbnail: this.info.thumbnail,
					createTime: this.info.createTime,
					duration: this.info.duration,
					fileId: this.info.fileId,
					courseName: this.info.courseName,
					videoId: this.info.videoId,
					periodId: this.info.periodId
				};
				console.log();
				uni.navigateTo({
					url: '/pages_manage/statistic?info=' + JSON.stringify(info)
				});
			},
			copyId() {
				uni.setClipboardData({
					data: this.info.title,
					success: () => {
						// this.$refs.uNotify.show({
						// 	top: 0,
						// 	type: 'success',
						// 	// color: '#000',
						// 	// bgColor: '#e8e8e8',
						// 	message: '复制课程标题成功',
						// 	duration: 1000 * 2,
						// 	fontSize: 20,
						// 	safeAreaInsetTop: true
						// })
						uni.showToast({
							icon: 'none',
							title: '复制课程标题成功'
						});
					}
				});
			},
			createTask(e) {
				uni.setStorageSync('courseItemArr', e)
				uni.navigateTo({
					url: '/pages_manage/createTask?title=一键群发'
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.card-share {
		position: relative;
	}

	.share {
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	.imgshe {
		display: flex;
		flex-direction: row-reverse;
	}

	.point-box {
		height: 100%;
		width: 100%;

		.xu-box {
			border: #f5f5f5 4rpx dashed;
			padding: 20rpx 20rpx;
		}
	}

	#codeurl {
		position: relative;
	}

	::v-deep {
		.model .u-fade-enter-active {
			z-index: 10075 !important;
		}
	}

	.sharePop {
		background-color: #fff;
		padding: 30rpx 0;
		border-radius: 20px 20px 0 0;
		/* #ifdef MP-WEIXIN */
		/* #endif */

		/* #ifdef H5 */
		padding-bottom: 100px;

		/* #endif */
		&-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;
			}
		}
	}

	.setTimebox {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 14px;
	}

	.timetip {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 14px;
		color: #2979ff;
		text-align: center;
		margin-bottom: 5px;
	}

	.courselist {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 14px;

		&-item {
			width: 100%;
			border-radius: 14px;
			background-color: #fff;
			overflow: hidden;
			margin-bottom: 10px;
		}

		&-con {
			padding: 10px 10px 5px 10px;
			font-size: 12px;
			color: #777;
		}

		&-con-r {
			flex: 1;
			overflow: hidden;

			.more-t {
				flex: 1;
				font-size: 14px;
				color: #222;
				display: inline;
			}

			image {
				width: 20px;
				height: 20px;
			}

			.btn_icon {
				font-size: 14px;
				color: #1677ff;
				display: inline-flex;
				align-items: center;
			}
		}

		&-img {
			width: 110px;
			height: 70px;
			border-radius: 10px;
			overflow: hidden;
			flex-shrink: 0;
			margin-right: 10px;
			position: relative;

			image {
				height: 100%;
				width: 100%;
			}

			.status {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 2;
				height: 21px;
				padding: 0 5px;
				box-sizing: border-box;
				line-height: 21px;
				border-radius: 10px 0 10px 0;
				text-align: center;
				color: #fff;
				background-color: #08ce36;
			}
		}

		&-desc {
			flex: 1;
			margin-top: 7px;
		}

		&-con-timebox {
			margin-top: 7px;
			flex-wrap: wrap;

			.acea-row {
				margin-right: 12px;
				margin-bottom: 5px;
				flex-wrap: nowrap;
			}

			.icon {
				margin-right: 5px;
			}
		}

		&-footer {
			padding: 5px;
			font-size: 14px;

			&-item {
				flex: 1;
				text-align: center;
				color: #1677ff;
				padding: 6px;
				box-sizing: border-box;
			}

			.shishi {
				border-left: 1px solid #f5f5f5;
			}

			.shuju {
				border-radius: 5px;
				border: 1px solid #1677ff;
			}
		}
	}
</style>