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:() => {
      // 其他错误
      uni.showToast({
        title: '海报分享失败，请检测网络状态',
        icon: 'none',
        duration: 3000
      })}
    })
	}


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