ylrz_scrm_company_h5/pages/courseManage/components/courseItem.vue

<template>
	<view class="courselist-item">
		<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="@/static/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'">
					<view class="x-f acea-row"><u-icon class="icon" name="file-text" color="#999"
							size="20"></u-icon>{{info.createTime}}</view>
					<view class="x-f acea-row"><u-icon class="icon" name="clock" color="#999"
							size="16"></u-icon>{{$formatSeconds(info.duration,1)}}</view>
				</view>
			</view>
		</view>
		<view class="courselist-footer x-f">
			<view class="courselist-footer-item x-c" v-show="user.userType==1" @click="handleShare"><u-icon
					name="share-square" color="#1677ff" size="18"></u-icon>分享课程</view>
			<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">
				<view class="sharePop-item y-f" @click="buildimg">
					<image src="@/static/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="@/static/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>
			</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 h500">
				<image :src="codeLink.url" class="codeimg w660" mode="widthFix"></image>
			</view>
			<view class="justify-around mtb40">
				<view class="column justify-center align-center" @click="shareimg">
					<image src='@/static/image/wechat.png' class="w80 h80"></image>
					<view class="mt10">微信好友</view>
				</view>
				<view class="column justify-center align-center" @click="downimg">
					<image src='@/static/image/downicon.png' class="w80 h80"></image>
					<view class="mt10">长按海报保存</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='@/static/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="../../../static/image/wxmore.png"
					class="w50 h50 mlr10"></image>
					</view>
					<view class="mt20">选择 “转发给朋友”</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import {
		sharecourselink,
		buildCode,
		getSDK
	} 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 {}
				}
			},
		},
		data() {
			return {
				cavansimg: false,
				showShare: false,
				setTimeShow: false,
				time: "",
				user: [],
				type: 1,
				copylink: '',
				setImg: '',
				codeLink: '',
				setImg: false,
				painterId: 'myPainter',
				isLongPress: false,
				painterSrc: '',
				showzhidao:false,
			}
		},
		onLoad() {
		},
		mounted() {
			this.user = uni.getStorageSync("companyUserInfo") ? JSON.parse(uni.getStorageSync("companyUserInfo")) : {},
			this.getjssdklist()
		},
		methods: {
			// 获取jssdk
			getjssdklist() {
				const param = {
					url: window.location.href
				}
				getSDK(param).then(res => {
					wx.config({
						appId: res.data.appId, // 必填，公众号的唯一标识
						timestamp: res.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
						signature: res.data.signature, // 必填，签名
						jsApiList: ["updateAppMessageShareData"] // 必填，需要使用的JS接口列表
					});
				})
			},
			
			shareimg() {
				  let self = this
				  //分享好友
				  // 配置--你到时候把配置全局 --就是这些东西  调接口拿
				  wx.ready(function() { //需在用户可能点击分享按钮前就先调用
				  	wx.updateAppMessageShareData({
				  		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
				  			}); 
				  		},
				  		fail: function(err) {
				  			console.log(err);
				  			uni.showToast({
				  				title: '海报生成失败，请重试',
				  				icon: 'none',
				  				duration: 2000
				  			})
				  		}
				  	})
				  });
			},
			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,
					time: this.time,
					type: this.type,
					videoId: this.info.videoId,
				}).then(res => {
					if (res.code == 200) {
						this.codeLink = res.data
						this.setImg = true
						this.getlink()
					} 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/courseManage/course/learning?course=JSON.stringify(info)&param2=2'
				})

			},
			handleShare() {
				this.showShare = true
			},
			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,
					time: this.time,
					type: this.type,
					videoId: this.info.videoId,
				}
				sharecourselink(params).then(res => {
					if (res.code == 200) {
						this.copylink = res.data
						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() {
				const params = {
					companyId: this.user.companyId,
					companyUserId: this.user.userId,
					courseId: this.info.courseId,
					time: this.time,
					type: this.type,
					videoId: this.info.videoId,
				}
				sharecourselink(params).then(res => {
					if (res.code == 200) {
						this.copylink = res.data
					} 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,
				}
				uni.navigateTo({
					url: '/pages/courseManage/statistics?info=' + JSON.stringify(info)
				})
			},
			copyId() {
				uni.setClipboardData({
					data: this.info.fileId,
					success: () => {
						this.$refs.uNotify.show({
							top: 0,
							type: 'success',
							// color: '#000',
							// bgColor: '#e8e8e8',
							message: '复制课程ID成功',
							duration: 1000 * 2,
							fontSize: 20,
							safeAreaInsetTop: true
						})
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.imgshe{
		display: flex;
		flex-direction: row-reverse
	}
	.point-box{
		height: 100%;
		width: 100%;
		.xu-box{
			border: #f5f5f5 4rpx dashed;
			padding: 20rpx 20rpx;
		}
	}
	.codeimg {
		position: absolute;
		z-index: 99999;
		left: 40rpx;
		top: 40rpx;
	}

	#codeurl {
		position: relative;
	}

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

	.sharePop {
		background-color: #fff;
		padding: 50px 0;
		border-radius: 20px 20px 0 0;

		&-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>