完成大体功能和样式

components/share/share.vue

@@ -1,15 +1,29 @@
 <template>
   <u-popup v-model="show" mode="bottom" border-radius="16" closeable>
     <view class="popup-content">
-      <view class="popup-title">分享房源</view>
+      <view class="popup-title">{{ 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" />
+        <!-- 微信小程序：官方分享 -->
+        <!-- #ifdef MP-WEIXIN -->
+        <button open-type="share" class="share-btn" :style="{backgroundColor: btnColor}">
+          📤 分享给好友
+        </button>
+        <!-- #endif -->
+
+        <!-- 非小程序：外部链接 -->
+        <!-- #ifndef MP-WEIXIN -->
+        <u-cell-item
+          title="🔗 复制网页分享链接"
+          @click="copyLink"
+        />
+        <!-- #endif -->
+
+        <!-- 全平台 -->
+        <!-- <u-cell-item
+          title="📱 生成二维码分享"
+          @click="generateQrcode"
+        /> -->
       </u-cell-group>
 
       <view class="cancel-btn" @click="show = false">取消</view>
@@ -18,8 +32,8 @@
     <!-- 二维码弹窗 -->
     <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>
+        <image v-if="qrcodeUrl" :src="qrcodeUrl" class="qrcode-img" />
+        <view class="tips">扫一扫打开</view>
       </view>
     </u-popup>
   </u-popup>
@@ -29,10 +43,55 @@
 import QRCode from 'qrcode'
 
 export default {
-  name: 'share',
+  name: 'SharePopup',
   props: {
-    assetId: [String, Number]
+    /** 弹窗标题 */
+    title: {
+      type: String,
+      default: '分享'
+    },
+
+    /** 微信分享标题 */
+    shareTitle: {
+      type: String,
+      default: ''
+    },
+
+    /** 小程序页面路径 */
+    pagePath: {
+      type: String,
+      required: true
+    },
+
+    /** H5 页面路径 */
+    h5Path: {
+      type: String,
+      required: true
+    },
+
+    /** 分享参数（id / code 等） */
+    query: {
+      type: Object,
+      default: () => ({})
+    },
+
+    /** 小程序码接口 */
+    minicodeApi: {
+      type: String,
+      default: ''
+    },
+
+    /** H5 基础域名（可选） */
+    baseUrl: {
+      type: String,
+      default: ''
+    },
+	btnColor: {
+	  type: String,
+	  default: ''
+	}
   },
+
   data() {
     return {
       show: false,
@@ -40,70 +99,127 @@ export default {
       qrcodeUrl: ''
     }
   },
+
+  computed: {
+    queryString() {
+        const query = this.query || {}
+        return Object.keys(query)
+          .filter(key => query[key] !== undefined && query[key] !== null)
+          .map(key => `${key}=${encodeURIComponent(query[key])}`)
+          .join('&')
+      }
+  },
+
   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}`
+
+      let url = ''
+
+      // #ifdef H5
+      url = `${window.location.origin}/#/${this.h5Path}?${this.queryString}`
+      // #endif
+
+      // #ifndef H5
+      url = `${this.baseUrl}/#/${this.h5Path}?${this.queryString}`
+      // #endif
+
       uni.setClipboardData({
-        data: shareUrl,
+        data: url,
         success: () => {
-          uni.showToast({ title: '分享链接已复制', icon: '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)
+      this.qrcodeUrl = ''
+
+      // ========== 小程序 ==========
+      // #ifdef MP-WEIXIN
+      if (!this.minicodeApi) {
+        uni.showToast({ title: '未配置小程序码接口', icon: 'none' })
+        this.showQrcode = false
+        return
+      }
+
+      const res = await uni.request({
+        url: this.minicodeApi,
+        method: 'POST',
+        data: {
+          page: this.pagePath,
+          scene: this.queryString
+        }
+      })
+
+      this.qrcodeUrl = res.data.url
+      // #endif
+
+      // ========== H5 / App ==========
+      // #ifndef MP-WEIXIN
+      let url = ''
+
+      // #ifdef H5
+      url = `${window.location.origin}/#/${this.h5Path}?${this.queryString}`
+      // #endif
+
+      // #ifndef H5
+      url = `${this.baseUrl}/#/${this.h5Path}?${this.queryString}`
+      // #endif
+
+      this.qrcodeUrl = await QRCode.toDataURL(url, {
+        width: 300,
+        margin: 2
+      })
+      // #endif
+    }
+  },
+
+  // #ifdef MP-WEIXIN
+  onShareAppMessage() {
+    return {
+      title: this.shareTitle || this.title,
+      path: `/${this.pagePath}?${this.queryString}`
     }
   }
+  // #endif
 }
 </script>
 
 <style scoped lang="scss">
 .popup-content {
   padding: 30rpx;
-  .popup-title {
-    text-align: center;
-    font-size: 32rpx;
-    font-weight: bold;
-    margin-bottom: 20rpx;
-  }
+}
+.popup-title {
+  text-align: center;
+  font-size: 32rpx;
+  font-weight: bold;
+  margin-bottom: 20rpx;
+}
+.share-btn {
+  margin: 10rpx 30rpx;
+  padding: 20rpx;
+  border-radius: 12rpx;
+  color: #fff;
 }
 .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;
-  }
+  text-align: center;
+}
+.qrcode-img {
+  width: 300rpx;
 }
 </style>