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>
			</scroll-view>
		</view>
	</uni-popup>
</template>



<!-- <SharePopup ref="sharePopup" :type="0" title="测试图文分享" desc="这是分享描述" link="https://xxx.com"
	image="https://xxx.com/xxx.jpg" currentPage="" :mini-program="{
				appId: 'wxXXXXXXX',
				path: '/pages/index/index'
			}" @success="handleShareSuccess" @error="handleShareError" /> -->
<script setup>
	import {
		ref,
		computed
	} from 'vue'

	// 定义props，支持你指定的6种分享类型
	const props = defineProps({
		// 分享类型 0:图文 1:纯文字 2:纯图片 3:音乐 4:视频 5:小程序
		type: {
			type: [String, Number],
			default: 0,
			validator: (val) => [0, 1, 2, 3, 4, 5].includes(Number(val))
		},
		// 分享标题
		title: {
			type: String,
			default: '分享标题'
		},
		// 分享描述/纯文字内容
		desc: {
			type: String,
			default: '分享描述'
		},
		// 分享链接，图文/音乐/视频/小程序使用
		link: {
			type: String,
			default: ''
		},
		// 分享图片/封面，纯图片/音乐/视频/小程序/图文使用
		image: {
			type: String,
			default: ''
		},
		// 标识是否为海报分享，华为卓易通纯图片分享传 haibao
		currentPage: {
			type: String,
			default: ''
		},
		// 小程序专属配置，type=5时必传
		miniProgram: {
			type: Object,
			default: () => ({
				appId: '',
				path: '',
				hdImageUrl: '',
				withShareTicket: false,
				miniprogramType: 'release'
			})
		}
	})

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

	const popupRef = ref(null)
	// 计算标准化的分享类型
	const shareType = computed(() => Number(props.type))

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

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

	// 选择分享场景
	const select = (scene) => {
		emit('select', scene)
		try {
			// 朋友圈限制：不支持纯文字、音乐、小程序
			if (scene === 'timeline' && [1, 3, 5].includes(shareType.value)) {
				uni.showToast({
					title: '朋友圈不支持该分享类型',
					icon: 'none'
				})
				return
			}

			if (props.currentPage == 'tupian') {
				shareToWeChatHaibao(scene)
			} else {
				shareToWeChat(scene)
			}
			close()
		} catch (error) {
			emit('error', error)
			handleShareError(error)
		}
	}

	// 微信常规分享，支持6种类型
	const shareToWeChat = (scene) => {
		const type = shareType.value
		// 基础分享配置
		const shareConfig = {
			provider: 'weixin',
			scene: scene === 'timeline' ? 'WXSceneTimeline' : 'WXSceneSession',
			type: type,
			success: (res) => {
				emit('success', {
					scene
				})
			},
			fail: (err) => {
				emit('error', err)
				handleShareError(err)
			}
		}

		// 按类型填充参数
		switch (type) {
			// 图文分享
			case 0:
				shareConfig.title = props.title
				shareConfig.summary = props.desc
				shareConfig.imageUrl = props.image
				shareConfig.href = props.link
				break
				// 纯文字分享
			case 1:
				shareConfig.summary = props.desc || props.title
				break
				// 纯图片分享
			case 2:
				shareConfig.imageUrl = props.image
				break
				// 音乐分享
			case 3:
				shareConfig.title = props.title
				shareConfig.summary = props.desc
				shareConfig.imageUrl = props.image
				shareConfig.href = props.link
				break
				// 视频分享
			case 4:
				shareConfig.title = props.title
				shareConfig.summary = props.desc
				shareConfig.imageUrl = props.image
				shareConfig.href = props.link
				break
				// 小程序分享，仅微信好友支持
			case 5:
				shareConfig.title = props.title
				shareConfig.imageUrl = props.image
				shareConfig.href = props.link
				shareConfig.miniprogram = props.miniProgram
				break
		}

		console.log('常规微信分享配置', shareConfig)
		uni.share(shareConfig)
	}

	// 华为卓易通海报纯图片分享，保留你原有逻辑
	const shareToWeChatHaibao = (scene) => {
		console.log('海报分享模式')
		if (!props.image) {
			const err = new Error('海报图片地址不能为空')
			emit('error', err)
			handleShareError(err)
			return
		}

		uni.downloadFile({
			url: props.image,
			success: (downloadRes) => {
				const type = shareType.value
				const shareConfig = {
					provider: 'weixin',
					scene: scene === 'timeline' ? 'WXSceneTimeline' : 'WXSceneSession',
					type: type,
					success: (res) => {
						emit('success', {
							scene
						})
					},
					fail: (err) => {
						emit('error', err)
						handleShareError(err)
					}
				}

				// 仅纯图片类型使用本地临时路径
				if (type == 2) {
					shareConfig.imageUrl = downloadRes.tempFilePath
				} else {
					shareConfig.title = props.title
					shareConfig.summary = props.desc
					shareConfig.imageUrl = props.image
					shareConfig.href = props.link
					// 小程序配置透传
					if (type === 5) {
						shareConfig.miniprogram = props.miniProgram
					}
				}

				console.log('海报分享配置', shareConfig)
				uni.share(shareConfig)
			},
			fail: (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>