MoeNovaClient/components/SharePopup/SharePopup.vue

<template>
  <view class="share-modal" v-show="visible">
    <view class="modal-overlay" @click="handleClose"></view>
    <transition name="fade-up">
      <view v-if="visible" 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>
    </transition>
  </view>
</template>

<script>
import { generateSecureUrlParams } from '@/common/encryption.js'

export default {
  name: 'ShareModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    userId: {
      default: 0
    },
    shareTitle: {
      type: String,
      default: ''
    },
    shareDesc: {
      type: String,
      default: '快来加入萌创星球吧!'
    },
    shareImg: {
      type: String,
      default: ''
    },
    view: {
      type: String,
      default: ''
    },
    isReportContent: {
      type: Boolean,
      default: false
    },
    link: {
      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' } 
      ],
      from_id: 0
    }
  },
  computed: {
    shareUrl() {
      const urlParams = {
        userId: this.userId,
        action: this.view,
        timestamp: new Date().getTime(),
        from_id: this.from_id
      }
      const secureParams = generateSecureUrlParams(urlParams)
      return `${this.link || this.$shareUrl}?params=${secureParams}`
    }
  },
  created() {
    uni.$emit('check_login', () => {
      this.from_id = getApp().globalData.user_id
    })
  },
  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 || this.$icon,
        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 || this.$icon,
            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'],
        success: () => {
          uni.updateShareMenu({
            withShareTicket: true,
            isPrivateMessage: true
          })
        }
      })
      // #endif
    },
    shareToMoments() {
      // #ifdef APP-PLUS
      uni.share({
        provider: 'weixin',
        scene: 'WXSenceTimeline',
        type: 0,
        title: this.shareTitle,
        summary: this.shareDesc,
        imageUrl: this.shareImg || this.$icon,
        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 || this.$icon,
            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?isReportContent=' + this.isReportContent
        })
      })

    },
    qqShare() {
      // #ifdef APP-PLUS
      uni.share({
        provider: 'qq',
        type: 0,
        title: this.shareTitle,
        summary: this.shareDesc,
        imageUrl: this.shareImg || this.$icon,
        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;
}

/* 弹出动画 */
.fade-up-enter-active, .fade-up-leave-active
{
  transition: all 0.3s cubic-bezier(.55, 0, .1, 1);
}

.fade-up-enter, .fade-up-leave-to
{
  opacity: 0;
  transform: translateY(100%);
}

.fade-up-leave, .fade-up-enter-to
{
  opacity: 1;
  transform: translateY(0);
}

.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>