|
|
@@ -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',
|