MoeNovaClient/components/SharePopup/SharePopup.vue

<template>
  <view class="share-modal" v-if="visible">
    <view class="modal-overlay" @click="handleClose"></view>
    <view class="modal-content">
      <view class="share-options">
        <view v-for="option in shareOptions" :key="option.id" class="share-item" @click="handleShare(option.id)">
          <view class="share-icon">
            <image :src="option.icon" :alt="option.title" mode="aspectFit"></image>
          </view>
          <text class="option-title">{{ option.title }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ShareModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    shareUrl: {
      type: String,
      required: true
    },
    shareTitle: {
      type: String,
      default: ''
    },
    shareDesc: {
      type: String,
      default: ''
    },
    shareImg: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      shareOptions: [
        { id: 'wechat', title: '微信好友', icon: '/static/icon/sy_icon_weixin.png' },
        { id: 'moments', title: '朋友圈', icon: '/static/icon/sy_icon_pengyouquan.png' },
        { id: 'qq', title: 'QQ好友', icon: '../../static/icon/sy_icon_qq.png' },
        { id: 'copy', title: '复制链接', icon: '/static/icon/sy_icon_fuzhilianjie.png' },
        { id: 'report', title: '举报', icon: '/static/icon/sy_icon_jubao01.png' },
        { id: 'more', title: '更多', icon: '../../static/icon/sy_icon_gengduo.png' } 
      ]
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    handleShare(type) {
      switch (type) {
        case 'copy':
          this.copyToClipboard(this.shareUrl)
          break
        case 'wechat':
          this.shareToWechat()
          break
        case 'moments':
          this.shareToMoments()
          break
        case 'report':
          this.handleReport()
          break
        case 'qq':
          this.qqShare()
          break
        case 'more':
          this.moreShare()
          break
      }
    },
    copyToClipboard(text) {
      // #ifdef H5
      const input = document.createElement('input')
      input.value = text
      document.body.appendChild(input)
      input.select()
      document.execCommand('copy')
      document.body.removeChild(input)
      // #endif

      // #ifdef APP-PLUS || MP
      uni.setClipboardData({
        data: text,
        success: () => {
          uni.showToast({
            title: '链接已复制',
            icon: 'success'
          })
        },
        fail: () => {
          uni.showToast({
            title: '复制失败',
            icon: 'none'
          })
        }
      })
      // #endif
    },
    shareToWechat() {
      // #ifdef APP-PLUS
      uni.share({
        provider: 'weixin',
        scene: 'WXSceneSession',
        type: 0,
        title: this.shareTitle,
        summary: this.shareDesc,
        imageUrl: this.shareImg,
        href: this.shareUrl,
        success: () => {
          uni.showToast({
            title: '分享成功',
            icon: 'success'
          })
        },
        fail: (err) => {
          uni.showToast({
            title: '分享失败',
            icon: 'none'
          })
          console.error('分享失败:', err)
        }
      })
      // #endif

      // #ifdef H5
      if (typeof wx !== 'undefined') {
        wx.ready(() => {
          wx.updateAppMessageShareData({
            title: this.shareTitle,
            desc: this.shareDesc,
            link: this.shareUrl,
            imgUrl: this.shareImg,
            success: () => {
              uni.showToast({
                title: '分享成功',
                icon: 'success'
              })
            },
            fail: (err) => {
              uni.showToast({
                title: '分享失败',
                icon: 'none'
              })
              console.error('分享失败:', err)
            }
          })
        })
      } else {
        uni.showToast({
          title: '请在微信中打开',
          icon: 'none'
        })
      }
      // #endif

      // #ifdef MP-WEIXIN
      uni.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage']
      })
      // #endif
    },
    shareToMoments() {
      // #ifdef APP-PLUS
      uni.share({
        provider: 'weixin',
        scene: 'WXSenceTimeline',
        type: 0,
        title: this.shareTitle,
        summary: this.shareDesc,
        imageUrl: this.shareImg,
        href: this.shareUrl,
        success: () => {
          uni.showToast({
            title: '分享成功',
            icon: 'success'
          })
        },
        fail: (err) => {
          uni.showToast({
            title: '分享失败',
            icon: 'none'
          })
          console.error('分享失败:', err)
        }
      })
      // #endif

      // #ifdef H5
      if (typeof wx !== 'undefined') {
        wx.ready(() => {
          wx.updateTimelineShareData({
            title: this.shareTitle,
            link: this.shareUrl,
            imgUrl: this.shareImg,
            success: () => {
              uni.showToast({
                title: '分享成功',
                icon: 'success'
              })
            },
            fail: (err) => {
              uni.showToast({
                title: '分享失败',
                icon: 'none'
              })
              console.error('分享失败:', err)
            }
          })
        })
      } else {
        uni.showToast({
          title: '请在微信中打开',
          icon: 'none'
        })
      }
      // #endif

      // #ifdef MP-WEIXIN
      uni.showShareMenu({
        withShareTicket: true,
        menus: ['shareTimeline']
      })
      // #endif
    },
    handleReport() {
      // 实现举报功能
      uni.$emit('check_login', () => {
				uni.navigateTo({
					url: '/pages/my/feedback'
				})
			})
      uni.showToast({
        title: '举报功能开发中',
        icon: 'none'
      })
    },
    qqShare() {
      // #ifdef APP-PLUS
      uni.share({
        provider: 'qq',
        type: 0,
        title: this.shareTitle,
        summary: this.shareDesc,
        imageUrl: this.shareImg,
        href: this.shareUrl,
        success: () => {
          uni.showToast({
            title: '分享成功',
            icon: 'success'
          })
        }
      })
      // #endif
    },
    moreShare() {
      // 更多分享方式
      uni.showToast({
        title: '更多分享功能开发中',
        icon: 'none'
      })
    }
  }
}
</script>

<style scoped>
.share-modal {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1000;
}

.modal-overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f2f6f2;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  padding: 16px;
}

.share-options {
  display: flex;
  flex-wrap: wrap;
  padding: 8px 16px;
}

.share-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}

.share-icon {
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.share-icon image {
  width: 100%;
  height: 100%;
}

.option-title {
  font-size: 13px;
  color: #333333;
  text-align: center;
}
</style>