ylrz_scrm_company_h5/pages/course/course.vue

<template>
	<view class="column hidden" style="height: 100%;">
		<!-- <view class="p20 bgf" 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>
		<living v-if="current==0" style="margin-top: -240rpx;"></living> -->
		<liveCourse @child-data-update="onChildDataUpdate" :parent-method="handleParentMethod"></liveCourse>
		<u-popup :show="showShare" :closeOnClickOverlay="true" :round='20' @close="closeShare">
			<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>
					<button open-type="share" class="share">分享课程</button>
				</view>
				<!--#endif-->
			</view>
		</u-popup>
	</view>
</template>

<script>
	import liveCourse from "@/components/liveCourse.vue"
	import living from "@/components/living.vue"
	export default {
		components: {
			living,
			liveCourse
		},
		data() {
			return {
				list: [{
					name: '直播课',
				}, {
					name: '训练营'
				}],
				current: 0,
				childdata: [],
				showShare: false
			}
		},
		onLoad() {
			wx.showShareMenu({
				withShareTicket: true, // 支持群聊分享带shareTicket
				menus: ['shareAppMessage'] // 同时启用两种分享
			})
			console.log(this.$store.state.imgpath+'/app/images/card_icon.png')
		},
		computed: {
			    imgPath() {
			      return this.$store.state.imgpath
			    }
			  },
		mounted() {},
		onShareAppMessage() {
			return {
				title: this.childdata.title, // 分享卡片标题
				path: this.childdata.path + "?course=" + JSON.stringify(this.childdata.params), // 目标页面路径
				// 携带参数：将当前页面的数据拼接到路径中
				imageUrl: this.childdata.img, // 分享卡片封面图（可选）
				success: (res) => {
					console.log("分享成功", res);
				},
				fail: (err) => {
					console.log("分享失败", err);
				},
			}
		},
		methods: {
			closeShare() {
				this.showShare = false
				// console.log('open');
			},
			handleParentMethod() {
				// uni.showToast({ title: '父组件方法被调用' });
				/* if (!this.childdata || Object.keys(this.childdata).length === 0) {
					uni.showToast({
						title: '数据未准备好，无法分享',
						icon: 'none'
					});
					return;
				}
				this.$nextTick(() => {
					setTimeout(() => {
						this.showShare = this.childdata.onshow
					}, 200)
				}) */


			},
			onChildDataUpdate(data) {
				this.childdata = data
				this.showShare = this.childdata.onshow
				console.log(this.childdata);
				console.log('父组件', this.childdata.path + "?course=" +JSON.stringify(this.childdata.params) )
			},

			sectionChange(index) {
				this.current = index
			}
		}
	}
</script>

<style lang="scss">
	.card-share{
		position: relative;
	}
	.share{
			display: inline-block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
		}
	.sharePop {
		background-color: #fff;
		padding: 30rpx 0;
		border-radius: 20px 20px 0 0;
		/* #ifdef MP-WEIXIN */
		/* #endif */

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

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