rtdeviceApp/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/viewCount+'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/viewCount+'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/viewCount+'px'}" @click="qwShare()">
				<image class="image" src="/static/images/icon_qwshare.png" mode=""></image>
				<text class="text">发给同事</text>
			</view>
			
			<view class="share-item" :style="{'width':viewWidth/viewCount+'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 class="share-item tsjy" :style="{'width':viewWidth/viewCount+'px'}" @click="goToFeedback()">
				<image class="image" src="/static/image/my/tsjy.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'
	import { getQwCompanyList } from '@/api/common.js'
	import { registerQW } from '@/utils/common.js'
	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, // 是否需要压缩
						showReport:false,
					}; // type 0:课程 1视频
				}
			},
			operate: {
				type: Array,
				default:['WXSceneSession','WXSceneTimeline','copyUrl']
			}
		},
		data() {
			return {
				viewWidth: 0,
				viewCount:4.0,
				companyList:[]
			};
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			this.viewWidth = systemInfo.screenWidth;
			if(this.shareItem.showReport){
				this.viewCount=5.2;
			}
		},
		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)
					}
				}
			},
			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
				});
			},
			qwShare() {
				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
				this.getQwCompanyList()
			},
			getQwCompanyList(){
				let token = uni.getStorageSync('CompanyUserToken');
				if (!token) {
					 uni.showToast({
						title: "请先登录销售账号",
						icon: 'none'
					 });
					 return
				}
				
				uni.showLoading()
				getQwCompanyList().then(res=>{
					uni.hideLoading()
					if(res.code == 200&&res.qwCompanyList&&res.qwCompanyList.length > 0) {
						this.companyList = res.qwCompanyList
						if(this.companyList.length==1) {
							this.initregisterQW(0)
						} else {
							uni.showActionSheet({
								itemList: this.companyList.map(item=>item.corpName),
								success: (res)=> {
									console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
									this.initregisterQW(res.tapIndex)
								},
								fail: (res)=> {
									console.log(res.errMsg);
								}
							});
						}
					} else {
						uni.showToast({
							title: "暂无可分享企业微信账号",
							icon: 'none'
						});
					}
				}).catch(()=>{
					uni.hideLoading()
				})
			},
			// 初始化注册到企业微信并分享
			initregisterQW(index) {
				getApp().globalData.shareSchema = this.companyList[index].yjfyySchema; //应用跳转标识，显示在具体应用下的 Schema字段
				getApp().globalData.shareCorpId = this.companyList[index].corpId; //企业唯一标识。创建企业后显示在，我的企业 CorpID字段
				getApp().globalData.shareAgentid = this.companyList[index].yjfyyAgentId; //应用
				getApp().globalData.shareAppid_gh = this.companyList[index].yjfyyAppId;
				registerQW((installed) => {
					this.doShare();
					this.$emit('closeShare')
				},this.shareItem)
			},
			goToFeedback(){
				uni.navigateTo({
					url: "/pages/user/feedback"
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.share-content {
		//border-radius: 40upx 40upx 0px 0px;
		width: 100%;
		height: auto; /* 改为自适应高度 */
		padding-bottom: 20rpx; /* 增加底部间距 */
		background: #fff;
	}

	.share-inner {
		padding: 20rpx 0; /* 增加上下内边距 */
		width: 100%;
		flex: 1;
		height: auto; /* 改为自适应高度 */
		flex-direction: row;
		flex-wrap: wrap;
		display: flex; /* 确保弹性布局生效 */
	}

	.share-item {
		/* width: 20%; 注释掉这行 */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 180rpx; /* 增加高度 */
		box-sizing: border-box;
		//flex: 1; /* 添加这个属性使5个项等宽 */
		min-width: 0; /* 防止内容溢出 */
	}

	.share-item .image {
		width: 80rpx;
		height: 80rpx;
		margin-top: 10rpx; /* 减少顶部间距 */
	}
	
	.share-item .text {
		font-size: 28rpx;
		font-weight: 500;
		color: #111111;
		height: auto; /* 改为自适应高度 */
		margin-top: 10rpx; /* 减少间距 */
		text-align: center; /* 文字居中 */
		white-space: nowrap; /* 防止文字换行 */
	}
	
	.tsjy .image {
		width: 48rpx;
		height: 48rpx;
		margin-top: 22rpx; /* 减少顶部间距 */
	}

	.tsjy .text {
		width: auto; /* 改为自适应宽度 */
		height: auto; /* 改为自适应高度 */
		margin-top: 30rpx; /* 减少间距 */
	}

	.cancel-btn {
		height: 90rpx; /* 增加高度 */
		line-height: 90rpx; /* 垂直居中 */
		text-align: center;
		font-size: 32upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #111111;
		border-top: 2upx solid #E8E8E8;
		background-color: #FFF;
	}
</style>