wangguoyu 8 hours ago
parent
commit
2bc959df21
1 changed files with 239 additions and 0 deletions
  1. 239 0
      components/sharePopUp/index.vue

+ 239 - 0
components/sharePopUp/index.vue

@@ -0,0 +1,239 @@
+<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: ''
+		},
+		// 目前只是给海报用 (华为 卓网通问题)
+		currentPage: {
+			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)
+		console.log('props.currentPageprops.currentPageprops.currentPage',props.currentPage);
+		try {
+			if (props.currentPage == 'haibao') {
+				shareToWeChatHaibao(scene)
+			} else {
+				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 shareToWeChatHaibao = (scene) => {
+		console.log('12311');
+		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)
+			}
+		})
+	}
+
+
+	// 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>