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) => {

			uni.downloadFile({
					url: props.image, // 你的网络图片地址
					success: (downloadRes) => {
						// 获取分享类型，确保是数字类型
						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
							shareConfig.imageUrl = downloadRes.tempFilePath
						} else {
							// 图文或链接分享（兼容原有逻辑）
							shareConfig.title = props.title
							shareConfig.summary = props.desc
							shareConfig.imageUrl = props.image
							shareConfig.href = props.link
						}
						console.log('分享配置:', shareConfig)
						uni.share(shareConfig)
					},
					fail: (err) => {
						emit('error', err)
						handleShareError(err)
					})
			}


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