uniProject/components/sharePopUp/index.vue

<template>
	<!-- 分享弹窗 -->
	<uni-popup ref="popupRef" type="bottom" background-color="#fff" :mask-click="false">
		<view class="share-popup-box">
			<!-- 标题 -->
			<view class="share-title">分享到 </view>
			<view class="close-btn" @click="close"></view>
			<!-- 分享选项 -->
			<scroll-view scroll-x class="share-scroll" :show-scrollbar="false">
				<view class="share-list">
					<!-- 微信好友 -->
					<view class="share-item" @click="select('session')">
						<view class="share-icon wechat-icon"></view>
						<text class="share-text">微信好友</text>
					</view>
					<!-- 朋友圈 -->
					<view class="share-item" @click="select('timeline')">
						<view class="share-icon timeline-icon"></view>
						<text class="share-text">朋友圈</text>
					</view>
				</view>
				<!-- <view class="share-close" @click="close">取消</view> -->
			</scroll-view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	// 定义props
	const props = defineProps({
		// 分享标题
		title: {
			type: String,
			default: '分享标题'
		},
		// type=0: 图文分享（需要 title + summary + imageUrl）
		// type=1: 纯图片分享（只需要 imageUrl）
		// type=2: 链接分享（需要 title + summary + href + imageUrl）
		type: {
			type: String,
			default: "0" // 0:图文
		},
		// 分享描述
		desc: {
			type: String,
			default: '分享描述'
		},
		// 分享链接
		link: {
			type: String,
			default: ''
		},
		// 分享图片
		image: {
			type: String,
			default: ''
		},

	})

	const emit = defineEmits(['close', 'select', 'success', 'error'])

	const popupRef = ref(null)

	// 打开弹窗
	const open = () => {
		popupRef.value.open()
	}

	// 关闭弹窗
	const close = () => {
		popupRef.value.close()
		emit('close')
	}

	// 选择分享方式
	const select = (scene) => {
		//emit('select', scene)

		try {
			shareToWeChat(scene)
			close()
		} catch (error) {
			emit('error', error)
			handleShareError(error)
		}
	}




	// 分享到微信
	const shareToWeChat = (scene) => {
		console.log('props.link',props.link);
		uni.share({
			provider: 'weixin',
			scene: scene === 'timeline' ? 'WXSceneTimeline' : 'WXSceneSession',
			type: Number(props.type),
			title: props.title,
			summary: props.desc,
			href: props.link,
			imageUrl: props.image || 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png',
			success: function(res) {
				emit('success', {
					scene
				})
			},
			fail: function(err) {
				emit('error', err)
				handleShareError(err)
			}
		})
	}


	// 错误处理
	const handleShareError = (error) => {
		console.error('分享失败:', error)

		const errCode = error.errCode || error.code
		const errMsg = error.errMsg || error.message

		// 微信未安装
		if (errCode === 1004 || errCode === -4004) {
			uni.showModal({
				title: '提示',
				content: '请先安装微信',
				showCancel: false
			})
			return
		}

		// 用户取消不提示
		if (errCode === 1001 || errCode === -4001) {
			return
		}

		// 其他错误
		uni.showToast({
			title: errMsg || '分享失败，请重试',
			icon: 'none',
			duration: 3000
		})
	}

	// 暴露方法给父组件
	defineExpose({
		open,
		close
	})
</script>