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=2: 纯图片分享（只需要 imageUrl）
		type: {
			type: [String, Number],
			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) => {
		// 获取分享类型，确保是数字类型
		const shareType = Number(props.type)

		// 构建基础分享配置
		const shareConfig = {
			provider: 'weixin',
			scene: scene === 'timeline' ? 'WXSceneTimeline' : 'WXSceneSession',
			type: shareType,
			success: function(res) {
				emit('success', {
					scene
				})
			},
			fail: function(err) {
				emit('error', err)
				handleShareError(err)
			}
		}
		// 根据类型添加不同的参数
		if (shareType == 2) {
			// 纯图片分享
			shareConfig.imageUrl = props.image
		} else {
			// 图文或链接分享（兼容原有逻辑）
			shareConfig.title = props.title
			shareConfig.summary = props.desc
			shareConfig.imageUrl = props.image
			shareConfig.href = props.link
		}

		console.log('分享配置:', shareConfig)
		uni.share(shareConfig)
	}


	// 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>