wangguoyu 6 gün önce
ebeveyn
işleme
9002694d6c
1 değiştirilmiş dosya ile 125 ekleme ve 86 silme
  1. 125 86
      components/sharePopUp/index.vue

+ 125 - 86
components/sharePopUp/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<!-- 分享弹窗 -->
+	<!-- 分享弹窗,沿用你原有样式结构 -->
 	<uni-popup ref="popupRef" type="bottom" background-color="#fff" :mask-click="false">
 		<view class="share-popup-box">
 			<!-- 标题 -->
@@ -19,73 +19,100 @@
 						<text class="share-text">朋友圈</text>
 					</view>
 				</view>
-				<!-- <view class="share-close" @click="close">取消</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
+		ref,
+		computed
 	} from 'vue'
 
-	// 定义props
+	// 定义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: '分享标题'
 		},
-		// 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: ''
 		},
-		// 目前只是给海报用 (华为 卓网通问题)
+		// 标识是否为海报分享,华为卓易通纯图片分享传 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()
+		popupRef.value?.open()
 	}
 
 	// 关闭弹窗
 	const close = () => {
-		popupRef.value.close()
+		popupRef.value?.close()
 		emit('close')
 	}
 
-	// 选择分享方式
+	// 选择分享场景
 	const select = (scene) => {
-		//emit('select', scene)
-		console.log('props.currentPageprops.currentPageprops.currentPage',props.currentPage);
+		emit('select', scene)
 		try {
+			// 朋友圈限制:不支持纯文字、音乐、小程序
+			if (scene === 'timeline' && [1, 3, 5].includes(shareType.value)) {
+				uni.showToast({
+					title: '朋友圈不支持该分享类型',
+					icon: 'none'
+				})
+				return
+			}
+
 			if (props.currentPage == 'haibao') {
 				shareToWeChatHaibao(scene)
 			} else {
@@ -98,117 +125,129 @@
 		}
 	}
 
-
-
-
-	// 分享到微信
+	// 微信常规分享,支持6种类型
 	const shareToWeChat = (scene) => {
-		// 获取分享类型,确保是数字类型
-		const shareType = Number(props.type)
-
-		// 构建基础分享配置
+		const type = shareType.value
+		// 基础分享配置
 		const shareConfig = {
 			provider: 'weixin',
 			scene: scene === 'timeline' ? 'WXSceneTimeline' : 'WXSceneSession',
-			type: shareType,
-			success: function(res) {
+			type: type,
+			success: (res) => {
 				emit('success', {
 					scene
 				})
 			},
-			fail: function(err) {
+			fail: (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
+
+		// 按类型填充参数
+		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)
+		console.log('常规微信分享配置', shareConfig)
 		uni.share(shareConfig)
 	}
-	// 分享针对海报
+
+	// 华为卓易通海报纯图片分享,保留你原有逻辑
 	const shareToWeChatHaibao = (scene) => {
-		console.log('12311');
+		console.log('海报分享模式')
+		if (!props.image) {
+			const err = new Error('海报图片地址不能为空')
+			emit('error', err)
+			handleShareError(err)
+			return
+		}
+
 		uni.downloadFile({
-			url: props.image, // 你的网络图片地址
+			url: props.image,
 			success: (downloadRes) => {
-				// 获取分享类型,确保是数字类型
-				const shareType = Number(props.type)
-				// 构建基础分享配置
+				const type = shareType.value
 				const shareConfig = {
 					provider: 'weixin',
 					scene: scene === 'timeline' ? 'WXSceneTimeline' : 'WXSceneSession',
-					type: shareType,
-					success: function(res) {
+					type: type,
+					success: (res) => {
 						emit('success', {
 							scene
 						})
 					},
-					fail: function(err) {
+					fail: (err) => {
 						emit('error', err)
 						handleShareError(err)
 					}
 				}
-				// 根据类型添加不同的参数
-				if (shareType == 2) {
-					// 纯图片分享
-					// shareConfig.imageUrl = props.image
+
+				// 仅纯图片类型使用本地临时路径
+				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)
+
+				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: '提示',
@@ -218,12 +257,12 @@
 			return
 		}
 
-		// 用户取消不提示
+		// 用户取消不提示
 		if (errCode === 1001 || errCode === -4001) {
 			return
 		}
 
-		// 其他错误
+		// 其他错误提示
 		uni.showToast({
 			title: errMsg || '分享失败,请重试',
 			icon: 'none',