feat(cfc-frontend): 商品详情加分享海报按钮+scene邀请码解析

cfc-frontend/pages/discover-detail/product-detail/product-detail.vue

@@ -45,6 +45,9 @@
           <text v-if="product.memberPrice" class="bottom-member">会员{{ formatPriceWithSymbol(product.memberPrice) }}</text>
         </view>
         <view class="action-btns">
+          <view class="action-extra">
+            <button class="btn-share" @click="onShareProduct">分享</button>
+          </view>
           <view class="action-extra">
             <button class="btn-cart" @click="onAddToCart">加入购物车</button>
           </view>
@@ -55,19 +58,28 @@
     <view v-else class="empty-wrap">
       <text class="empty-text">商品不存在或已下架</text>
     </view>
+
+    <ContentSharePoster :show="showPoster" :title="product.name" :coverImage="product.coverImage" :qrCodeBase64="posterQrCode" typeLabel="好物推荐" :dimensionCode="posterDimension" :priceText="priceText" :summary="product.intro" ctaText="长按识别二维码 · 查看商品" :inviteText="posterInviteText" @close="showPoster = false" />
   </view>
 </template>
 
 <script>
-import { productDetail, productOrderCreate, productOrderPay, cartAdd } from '@/utils/api.js'
+import { productDetail, productOrderCreate, productOrderPay, cartAdd, getShareQrCode } from '@/utils/api.js'
 import MpHtml from '@/components/mp-html/mp-html.vue'
+import ContentSharePoster from '@/components/ContentSharePoster.vue'
+import shareMixin from '../../../components/share-mixin.js'
 
 export default {
-  components: { MpHtml },
+  components: { MpHtml, ContentSharePoster },
+  mixins: [shareMixin],
   data() {
     return {
       product: {},
-      loading: false
+      loading: false,
+      showPoster: false,
+      posterQrCode: '',
+      posterDimension: '',
+      posterInviteText: ''
     }
   },
   computed: {
@@ -90,11 +102,52 @@ export default {
         wealth: '财富'
       }
       return map[this.product.domain] || this.product.domain
+    },
+    priceText() {
+      if (!this.product || !this.product.price) return ''
+      var txt = this.formatPriceWithSymbol(this.product.price)
+      if (this.product.memberPrice) {
+        txt += ' 会员' + this.formatPriceWithSymbol(this.product.memberPrice)
+      }
+      return txt
+    },
+    productDimension() {
+      var p = this.product
+      if (!p) return ''
+      if (p.dimensionWeights) {
+        try {
+          var w = JSON.parse(p.dimensionWeights)
+          if (w && typeof w === 'object') {
+            var best = null
+            var bestWeight = -1
+            var keys = Object.keys(w)
+            for (var i = 0; i < keys.length; i++) {
+              if (w[keys[i]] > bestWeight) {
+                bestWeight = w[keys[i]]
+                best = keys[i]
+              }
+            }
+            if (best) return best
+          }
+        } catch (e) {}
+      }
+      if (p.domain) return p.domain
+      return ''
     }
   },
   onLoad(options) {
-    if (options.id) {
-      this.loadDetail(options.id)
+    var pid = options && options.id ? options.id : ''
+    if (options && options.scene) {
+      try {
+        var sceneDecoded = decodeURIComponent(options.scene)
+        var idMatch = sceneDecoded.match(/id=(\d+)/)
+        if (idMatch && idMatch[1]) pid = idMatch[1]
+        var refMatch = sceneDecoded.match(/ref=([^&]+)/)
+        if (refMatch && refMatch[1]) this.autoBindInviteCode(refMatch[1])
+      } catch (e) {}
+    }
+    if (pid) {
+      this.loadDetail(pid)
     }
   },
   methods: {
@@ -157,6 +210,30 @@ export default {
         uni.showToast({ title: '网络异常', icon: 'none' })
       })
     },
+    async onShareProduct() {
+      if (!this.product || !this.product.id) return
+      uni.showLoading({ title: '生成海报中...' })
+      try {
+        if (!this.referralCode) {
+          await this.loadReferralCode()
+        }
+        var scene = 'id=' + this.product.id + (this.referralCode ? '&ref=' + this.referralCode : '')
+        if (scene.length > 32) {
+          scene = scene.substring(0, 32)
+        }
+        var res = await getShareQrCode('pages/discover-detail/product-detail/product-detail', scene)
+        if (res && res.data) {
+          this.posterQrCode = res.data.qrCodeBase64 || ''
+          this.posterDimension = this.productDimension
+          this.posterInviteText = '「' + (uni.getStorageSync('nickname') || '好友') + '」邀请你一起看看这个好物'
+          this.showPoster = true
+        }
+      } catch (e) {
+        uni.showToast({ title: '生成失败', icon: 'none' })
+      } finally {
+        uni.hideLoading()
+      }
+    },
     doPay(orderNo) {
       uni.showLoading({ title: '支付中...' })
       productOrderPay({ orderNo }).then(res => {
@@ -346,4 +423,18 @@ export default {
 .btn-cart::after {
   border: none;
 }
+.btn-share {
+  background: #fff;
+  color: #666;
+  border: 2rpx solid #ddd;
+  font-size: 26rpx;
+  padding: 0 24rpx;
+  height: 64rpx;
+  line-height: 64rpx;
+  border-radius: 32rpx;
+  margin-right: 16rpx;
+}
+.btn-share::after {
+  border: none;
+}
 </style>