siyu_app/components/share-box/share-boxN.vue

<template>
	<view class="share-content" :style="{'width':viewWidth+'px'}">

		<view class="share-inner" style="width: 100%;">
			<view class="share-item" :style="{'width':viewWidth/4.0+'px'}" @click="wxShare(0)">
				<image class="image" src="/static/images/icon_wx.png" mode=""></image>
				<text class="text">微信</text>
			</view>
			<view class="share-item" :style="{'width':viewWidth/4.0+'px'}" @click="wxShare(1)">
				<image class="image" src="/static/images/icon_pyq.png" mode=""></image>
				<text class="text">朋友圈</text>
			</view>
			<view class="share-item" :style="{'width':viewWidth/4.0+'px'}" @click="copyUrl()" v-if="operate.indexOf('copyUrl') > -1">
				<image class="image" src="/static/images/icon_copy_link.png" mode=""></image>
				<text class="text">复制链接</text>
			</view>
		</view>
		<text class="cancel-btn" @click="closeShare">取消</text>
	</view>

</template>

<script>
	import {shareCourse} from '@/api/course'
	import { shareVideo } from '@/api/shortvideo'
	export default {
		name: "share-box",
		props: {
			shareItem: {
				type: Object,
				default: function() {
					return {
						imageUrl: "",
						title: "",
						url: "",
						summary: url,
						courseId: 0,
						videoId: 0,
						isMini: false,
						compressImage: 0, // 是否需要压缩
					}; // type 0:课程 1视频
				}
			},
			operate: {
				type: Array,
				default: ['WXSceneSession','WXSceneTimeline','copyUrl']
			}
		},
		data() {
			return {
				viewWidth: 0,
			};
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			this.viewWidth = systemInfo.screenWidth;
		},
		methods: {
			wxShare(type) {
				if (this.isEmpty(this.shareItem.title)) {
					uni.showToast({
						title: "数据未加载",
						icon: "none",
						position: 'top',
						duration: 2000
					})
					return;
				}
				// #ifdef APP-PLUS
				if (!plus.runtime.isAgreePrivacy()) {
					uni.showToast({
						title: "请同意隐私政策",
						icon: "none",
						position: 'top',
						duration: 2000
					})
					return;
				}
				// #endif
				let that = this;
				let sceneStr = type == 0 ? "WXSceneSession" : "WXSceneTimeline";
				// 仅支持分享微信小程序到微信聊天界面，想进入朋友圈需改为分享图片方式，在图片中包含小程序码
				if (sceneStr == 'WXSceneTimeline' || !this.shareItem.isMini) {
					uni.share({
						provider: "weixin",
						scene: sceneStr,
						type: 0,
						imageUrl: this.shareItem.imageUrl, //分享封面图片
						title: this.shareItem.title, // 分享标题
						href: this.shareItem.url, //跳转链接
						summary: this.shareItem.summary, // 分享内容文字
						success: function(res) {
							that.doShare();
							uni.showToast({
								title: "分享成功",
								icon: 'none'
							});
						},
						fail: function(err) {
							// 此处是调起微信分享失败的回调
						},
						complete: (e) => {
							console.log("WXSceneTimeline", e)
						}
					});
				} else {
					if(this.shareItem.compressImage == 1) {
						uni.downloadFile({
							url: this.shareItem.imageUrl, //仅为示例，并非真实接口地址。
							success: (images)=> {
								uni.compressImage({
								  src: images.tempFilePath,
								  quality: 40,
								  width:  '50%',
								  height: '50%',
								  success: res => {
										this.shareMini(res.tempFilePath,sceneStr)
								  },
								  fail: function(err) {
								  	// 此处是压缩失败
								  }
								})
							}
						});
					}else{
						this.shareMini(this.shareItem.imageUrl,sceneStr)
					}
				}
			},
			shareMini(imageUrl,sceneStr) {
				const that = this
				uni.share({
					provider: "weixin",
					scene: sceneStr,
					type: 5,
					imageUrl: imageUrl, //分享封面图片
					title: this.shareItem.title, // 分享标题
					//summary: this.shareItem.summary,    // 分享内容文字
					miniProgram: {
						id: "gh_7a6a32e5ef61",
						path: this.shareItem.path,
						type: 0, //0-正式版； 1-测试版； 2-体验版。 默认值为0。
						webUrl: "http://uniapp.dcloud.io"
					},
					success: function(res) {
						that.doShare();
						uni.showToast({
							title: "分享成功",
							icon: 'none'
						});
					},
					fail: function(err) {
						// 此处是调起微信分享失败的回调
					},
					complete: (e) => {
						console.log("WXSceneSession", e)
					}
				});
			},
			doShare() {
				if (!this.shareItem.isMini) {
					if (this.shareItem.courseId > 0) {
						this.shareCourse();
					}
				}
				if(this.shareItem.videoId > 0) {
					this.shareVideo();
				}
			},
			isEmpty(obj) {
				if (typeof obj == "undefined" || obj == null || obj == "") {
					return true;
				} else {
					return false;
				}
			},
			shareCourse() {
				shareCourse(this.shareItem.courseId).then(res => {
			
					},
					rej => {}
				);
			},
			shareVideo() {
				shareVideo({videoId:this.shareItem.videoId})
			},
			copyUrl() {
				uni.setClipboardData({
					data: this.shareItem.url,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					},
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
			},
			closeShare() {
				return this.$emit('closeShare');
			},
			showToast(title) {
				uni.showToast({
					icon: 'none',
					title: title,
					duration: 3000
				});
			}

		}
	}
</script>

<style scoped>
	.share-content {
		border-radius: 40upx 40upx 0px 0px;
		width: 100%;
		height: 250rpx;
		/* background-color:blue; */
	}

	.share-inner {
		padding: 0 0 0 0;
		width: 100%;
		flex: 1;
		height: 160rpx;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.share-item {
		width: 25%;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 160rpx;
		/* background-color:red; */
	}

	.share-item .image {
		width: 80rpx;
		height: 80rpx;
		margin-top: 40rpx;
	}

	.text {
		font-size: 28rpx;
		font-weight: 500;
		color: #111111;
		height: 60rpx;
		margin-top: 20rpx;
	}

	.cancel-btn {
		height: 70upx;
		line-height: 80upx;
		text-align: center;
		font-size: 32upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #111111;
		border-top: 2upx solid #E8E8E8;
		background-color: #FFF;
	}
</style>