init

components/share/share.vue

@@ -0,0 +1,109 @@
+<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>