ylrz_his_scrm_company_qw/components/courseItem.vue

<template>
	<view class="courselist-item">
		<view class="courselist-con x-start" @click="toCourseDetail(info)">
			<view class="courselist-img">
				<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>
				<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>
			</view>
		</view>
		<view class="courselist-footer x-f">
			<view class="courselist-footer-item x-c"  @click="openShare"><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="sendInput()">
					<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>
	</view>
</template>

<script>
	
	import {
		createRoomLink,createPhoneLink
	} from '@/api/courseManage'
	export default {
		props: {
			activeTab: {
				type: [Number, String],
				default: 0
			},
			// 来源
			from: {
				type: String,
				default: 'live'
			},
			info: {
				type: Object,
				default: () => {
					return {}
				}
			},
			config:{
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				showShare: false,
				type: 1,
			}
		},
		
		mounted() {
			
		},
		methods: {
			toCourseDetail(info) {
				uni.navigateTo({
					url:'/pages/course/courseVideo?videoId='+info.videoId
				})

			},
			openShare() {
				if(this.isDesktopQyWechat()){
					this.showShare = true
				}
				console.log(this.info)
				this.$emit('child-click', { show: true, list: this.info })
				//this.getlink('preload'); // 提前加载链接
			},
			closeShare() {
				this.showShare = false
				// console.log('open');
			},
			sendInput(){
				this.setupwindowsShare();   // 电脑端分享
				// if (this.isDesktopQyWechat()) {
				// }
			},
			setupwindowsShare(){
				uni.showLoading({
					title: '加载中'
				});
				var corpId=uni.getStorageSync("corpId");
				var qwUserId=uni.getStorageSync("qwUserId");
				var qwarrid=uni.getStorageSync("qwarrid");
				var fsUserId=uni.getStorageSync("fsUserId");
				const param = {
					videoId:this.info.videoId,
					corpId:corpId,
					qwUserId:qwUserId,
					courseId:this.info.courseId,
					title:this.info.title,
					externalUserId:qwarrid,
					fsUserId:fsUserId
				}
				createRoomLink(param).then(res => {
					 console.log(res)
					 if(res.code==200){
						 uni.hideLoading();
						jWeixin.invoke('sendChatMessage', {
							msgtype:"miniprogram", //消息类型，必填
							enterChat: true,
							miniprogram:
							{
								appid: res.data.miniprogramAppid,
								title: res.data.miniprogramTitle, 
								imgUrl: res.data.miniprogramPicUrl,
								page: res.data.miniprogramPage
							}
							 
						}, function(res) {
							console.log("发送成功")
							console.log(res)
							uni.showToast({
								title: "发送成功",
							});
						})
						 
					 }
					 else{
						 uni.showToast({
						 	title: res.msg,
						 });
					 }
				})
			},
			
			
			// 判断是否为电脑端企业微信
			isDesktopQyWechat() {
			  const ua = navigator.userAgent.toLowerCase();
			  return ua.indexOf('windows') > -1 || ua.indexOf('macintosh') > -1;
			}
		}
	}
</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: 20px 0;
		// padding-bottom: 100px;
		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>