|
|
@@ -0,0 +1,156 @@
|
|
|
+<template>
|
|
|
+ <!-- 分享弹窗 -->
|
|
|
+ <uni-popup ref="popupRef" type="bottom" background-color="#fff" :mask-click="false">
|
|
|
+ <view class="share-popup-container">
|
|
|
+ <!-- 标题 -->
|
|
|
+ <view class="share-header">
|
|
|
+ <text class="share-title">分享到</text>
|
|
|
+ </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=1: 纯图片分享（只需要 imageUrl）
|
|
|
+ // type=2: 链接分享（需要 title + summary + href + imageUrl）
|
|
|
+ type: {
|
|
|
+ type: String,
|
|
|
+ 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) => {
|
|
|
+ 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>
|
wangguoyu