RentWeAppFront/components/share/share.vue

<template>
  <u-popup v-model="show" mode="bottom" border-radius="16" closeable>
    <view class="popup-content">
      <view class="popup-title">分享房源</view>

      <u-cell-group>
        <!-- <u-cell-item title="📤 分享给微信好友" @click="shareToWeChat" /> -->
       <button open-type="share" class="share-btn">
            📤 分享给好友
       </button>
        <u-cell-item  title="🔗 生成外部分享链接" @click="copyLink" />
        <u-cell-item  title="📱 生成二维码分享" @click="generateQrcode" />
      </u-cell-group>

      <view class="cancel-btn" @click="show = false">取消</view>
    </view>

    <!-- 二维码弹窗 -->
    <u-popup v-model="showQrcode" mode="center" border-radius="12">
      <view class="qrcode-box">
        <image :src="qrcodeUrl" mode="widthFix" style="width: 300rpx;" />
        <view class="tips">扫一扫查看房源</view>
      </view>
    </u-popup>
  </u-popup>
</template>

<script>
import QRCode from 'qrcode'

export default {
  name: 'share',
  props: {
    assetId: [String, Number]
  },
  data() {
    return {
      show: false,
      showQrcode: false,
      qrcodeUrl: ''
    }
  },
  methods: {
    open() {
      console.log()
      this.show = true
    },
    shareToWeChat() {
      this.show = false
      // #ifdef MP-WEIXIN
      uni.showToast({ title: '请使用右上角“···”转发好友或群', icon: 'none' })
      uni.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline']
      })
      // #endif

      // #ifdef H5
      uni.showToast({ title: '请在微信内使用原生分享功能', icon: 'none' })
      // #endif
    },
    copyLink() {
      this.show = false
      const shareUrl = `${window.location.origin}/#/pages/detail/assetsDetail?id=${this.assetId}`
      uni.setClipboardData({
        data: shareUrl,
        success: () => {
          uni.showToast({ title: '分享链接已复制', icon: 'success' })
        }
      })
    },
    async generateQrcode() {
      this.show = false
      const shareUrl = `${window.location.origin}/#/pages/detail/assetsDetail?id=${this.assetId}`
      this.showQrcode = true
      this.qrcodeUrl = await QRCode.toDataURL(shareUrl)
    }
  }
}
</script>

<style scoped lang="scss">
.popup-content {
  padding: 30rpx;
  .popup-title {
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
}
.cancel-btn {
  text-align: center;
  font-size: 30rpx;
  color: #666;
  margin-top: 20rpx;
}
.qrcode-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx;
  .tips {
    margin-top: 20rpx;
    color: #666;
    font-size: 26rpx;
  }
}
</style>