MoeNovaClient/app/components/ShareModal.vue

<template>
  <view class="share-modal" v-if="visible">
    <view class="modal-overlay" @tap="handleClose"></view>
    <view class="modal-content">
      <view class="share-options">
        <view 
          v-for="option in shareOptions" 
          :key="option.id"
          class="share-item"
          @tap="handleShare(option.id)"
        >
          <view class="share-icon">
            <image :src="option.icon" mode="aspectFit"></image>
          </view>
          <text class="option-title">{{ option.title }}</text>
        </view>
      </view>
      <view class="cancel-button" @tap="handleClose">
        <text>更多</text>
      </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/images/share/wechat.png' },
        { id: 'moments', title: '朋友圈', icon: '/static/images/share/moments.png' },
        { id: 'qq', title: 'QQ好友', icon: '/static/images/share/qq.png' },
        { id: 'copy', title: '复制链接', icon: '/static/images/share/link.png' },
        { id: 'report', title: '举报', icon: '/static/images/share/report.png' }
      ]
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    handleShare(type) {
      switch (type) {
        case 'copy':
          this.copyToClipboard(this.shareUrl)
          uni.showToast({
            title: '链接已复制',
            icon: 'success'
          })
          break
        case 'wechat':
          this.shareToWechat()
          break
        case 'moments':
          this.shareToMoments()
          break
        case 'qq':
          // 实现QQ分享
          break
        case 'report':
          // 实现举报功能
          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: () => {
          console.log('复制成功')
        }
      })
      // #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: function (res) {
          uni.showToast({
            title: '分享成功',
            icon: 'success'
          })
        },
        fail: function (err) {
          uni.showToast({
            title: '分享失败',
            icon: 'none'
          })
          console.error('分享失败:', err)
        }
      })
      // #endif

      // #ifdef H5
      // H5环境下使用微信JS-SDK
      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)
            }
          })
        })
      }
      // #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: function (res) {
          uni.showToast({
            title: '分享成功',
            icon: 'success'
          })
        },
        fail: function (err) {
          uni.showToast({
            title: '分享失败',
            icon: 'none'
          })
          console.error('分享失败:', err)
        }
      })
      // #endif

      // #ifdef H5
      // H5环境下使用微信JS-SDK
      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)
            }
          })
        })
      }
      // #endif

      // #ifdef MP-WEIXIN
      uni.showShareMenu({
        withShareTicket: true,
        menus: ['shareTimeline']
      })
      // #endif
    }
  }
}
</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: #FFFFFF;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
  padding: 32rpx;
}

.share-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 16rpx 32rpx;
}

.share-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
  margin-bottom: 32rpx;
}

.share-icon {
  width: 88rpx;
  height: 88rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16rpx;
}

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

.option-title {
  font-size: 26rpx;
  color: #333333;
  text-align: center;
}

.cancel-button {
  position: relative;
  margin-top: 16rpx;
  padding: 24rpx 0;
  text-align: center;
  color: #666666;
  font-size: 28rpx;
}

.cancel-button::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2rpx;
  background-color: #EEEEEE;
  transform: scaleY(0.5);
}
</style>