ylrz_scrm_company_h5/components/courseItem.vue

<template>
	<view class="courselist-item" style="height: 100%;">
		<view class="courselist-con x-start" @click="toCourseDetail(info)">
			<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>
					<text class="more-t ">{{info.title}}</text>
					<view class="btn_icon" style="margin-left: 5px;" @click="copyId">ID
						<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>
					<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="courselist-footer x-f ">
			<!--#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 shishi" 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'
			@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=:src="imgPath+'/app/image/wxmore.png'" class="w50 h50 mlr10"></image>
					</view>
					<view class="mt20">选择 “转发给朋友”</view>
					<view style="color: #cbcbcb;" class="fs28 mt40">点击任意位置关闭弹窗</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import {
		sharecourselink,
		buildCode,
		getSDK,
		updataTime
	} from '@/api/courseManage'
	import html2canvas from 'html2canvas'
	import wx from 'weixin-js-sdk'
	export default {
		props: {
			activeTab: {
				type: [Number, String],
				default: 0
			},
			// 来源
			from: {
				type: String,
				default: 'live'
			},
			info: {
				type: Object,
				default: () => {
					return {}
				}
			},
			parentMethod:{
				type: Function
			}
		},
		data() {
			return {
				cavansimg: false,
				showShare: false,
				setTimeShow: false,
				time: "",
				user: [],
				type: 1,
				copylink: '',
				setImg: '',
				codeLink: '',
				setImg: false,
				painterId: 'myPainter',
				isLongPress: false,
				painterSrc: '',
				showzhidao: false,
				// imgPath:this.$store.state.imgpath,
				imgs:this.$store.state.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.state.imgpath
		    }
		  },
		onLoad() {},
		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,
					 courseId:this.info.courseId,videoId:this.info.videoId,periodId:this.info.periodId},
					 img:this.info.thumbnail||this.imgs
				   });
			},
			// 获取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
						})
					}
				})
			},
			toCourseDetail(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_course/course/courseVideo?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() {
				this.setTimeShow = !this.setTimeShow
				this.showShare = !this.showShare
				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,
					id:this.info.id
				}
				sharecourselink(params).then(res => {
					if (res.code == 200) {
						this.copylink = res.url
						// if (this.copylink.startsWith('http://')) {
						// 	this.copylink = this.copylink.replace('http://', 'https://');
						//   }
						// console.log(this.copylink)
						setTimeout(() => {
							uni.setClipboardData({
								data: this.copylink,
								success: () => {
									uni.showToast({
										title: '链接已复制',
										icon: 'none',
										duration: 2000
									});
								},
								fail: () => {
									uni.showToast({
										title: '复制失败',
										icon: 'none'
									});
								}
							});
						}, 100)

						console.log(this.copylink)
					} 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/courseManage/statistics?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: '复制课程标题成功'
						})
					}
				});
			}
		}
	}
</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>