feat: 微信分享

pages/other_package/components/share-popup.vue

@@ -1,22 +1,27 @@
 <template>
-	<up-popup
+	<up-popup :show="show" :round="24" :closeOnClickOverlay="false">
-	  :show="show"
-	  :round="24"
-	  :closeOnClickOverlay="false"
-	>
 		<view class="share-popup-view">
 			<view class="share-head">
 				<text class="text-28 text-gray">分享信任桥</text>
 			</view>
 			<view class="share-btn-view">
-			  <view class="share-box" @click="onBtn(index)" v-for="(item,index) in btnList" :key="index">
+				<!-- #ifndef APP-PLUS || H5 -->
+				<block v-for="(item, index) in btnList" :key="index">
+					<button v-if="index === 0" open-type="share" hover-class="none" class="share-box share-btn-clean" @click="onBtn(index)">
+						<image :src="`https://static.tbmall.xin/static/new/share_${index}.png`" class="share-img"></image>
+						<text class="text-24 text-gray">{{ item }}</text>
+					</button>
+					<view v-else class="share-box" @click="onBtn(index)">
 						<image :src="`https://static.tbmall.xin/static/new/share_${index}.png`" class="share-img"></image>
 						<text class="text-24 text-gray">{{ item }}</text>
 					</view>
+				</block>
+				<!-- #endif -->
 
 				<!-- #ifdef APP-PLUS || H5 -->
 				<view class="share-box" @click="onBtn(index)" v-for="(item, index) in appBtnList" :key="index">
-			  	<image :src="`https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/new/share_${index}.png`" class="share-img"></image>
+					<image :src="`https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/new/share_${index}.png`"
+						class="share-img"></image>
 					<text class="text-24 text-gray">{{ item }}</text>
 				</view>
 				<!-- #endif -->
@@ -84,7 +89,7 @@
 
 	methods: {
 
-			onWxBtn(index){
+		onBtn(index) {
 			console.log('微信分享', index);
 			this.$emit('wxShare', index)
 		},
@@ -116,6 +121,7 @@
 	position: absolute;
 	background-color: #fff;
 	top: -638rpx;
+
 	.image-view-bottom {
 		width: 100%;
 		flex: 1;
@@ -124,6 +130,7 @@
 		align-items: center;
 		justify-content: space-between;
 		margin-top: 20rpx;
+
 		.image-view-bottom-left {
 			height: 72rpx;
 			min-height: 72rpx;
@@ -133,6 +140,7 @@
 			padding-right: 10rpx;
 
 		}
+
 		.image-view-bottom-right {
 			// min-width:130rpx;
 			margin-left: 10rpx;
@@ -144,11 +152,13 @@
 			justify-content: flex-end;
 		}
 	}
+
 	.tu-img {
 		width: 100%;
 		height: 344rpx;
 	}
 }
+
 .share-popup-view {
 	width: 100%;
 	height: 400rpx;
@@ -158,6 +168,7 @@
 	background-color: #fff;
 	border-radius: 24rpx 24rpx 0 0;
 	position: relative;
+
 	.share-head {
 		width: 100%;
 		height: 88rpx;
@@ -165,6 +176,7 @@
 		align-items: center;
 		justify-content: center;
 	}
+
 	.share-bottom {
 		width: 100%;
 		height: 92rpx;
@@ -173,6 +185,7 @@
 		align-items: center;
 		justify-content: center;
 	}
+
 	.share-line {
 		display: flex;
 		width: 100%;
@@ -180,6 +193,7 @@
 		min-height: 2rpx;
 		background-color: #e7e7e7;
 	}
+
 	.qr-view {
 		width: 100%;
 		height: 332rpx;
@@ -188,6 +202,7 @@
 		align-items: center;
 		justify-content: center;
 	}
+
 	.share-btn-view {
 		width: 100%;
 		height: 124rpx;
@@ -199,6 +214,7 @@
 		// padding: 0 36rpx;
 		box-sizing: border-box;
 		margin-top: 36rpx;
+
 		.share-box {
 			flex: 1;
 			height: 100%;
@@ -206,14 +222,36 @@
 			flex-direction: column;
 			justify-content: space-between;
 			align-items: center;
+
 			.share-img {
 				width: 80rpx;
 				height: 80rpx;
 			}
 		}
+
+		.share-btn-clean {
+			background: none !important;
+			background-color: transparent !important;
+			border: 0 !important;
+			padding: 0 !important;
+			margin: 0 !important;
+			line-height: normal !important;
+			font-size: inherit !important;
+			color: inherit !important;
+			outline: none !important;
+			border-radius: 0 !important;
+			box-sizing: border-box !important;
+			display: flex !important;
+			flex-direction: column !important;
+			justify-content: space-between !important;
+			align-items: center !important;
+
+			&::after {
+				border: none !important;
+				display: none !important;
+			}
+		}
 	}
 
 }
-	
-	
 </style>

pages/other_package/productInfo/productInfo.vue

@@ -334,8 +334,8 @@
         <view class="popup_but" @click="addressOk"> 确认 </view>
       </view>
     </up-popup>
-    <SharePopup ref="share" v-if="shareOpen" :show="shareShow" @close="onClose" @share="onShare" :id="id"
+    <SharePopup ref="share" v-if="shareOpen" :show="shareShow" @close="onClose" @wxShare="onWxShare" @share="onShare"
-      :text="orderInfo.name ? orderInfo.name : ''" :price="orderInfo.minPrice ? orderInfo.minPrice : ''"
+      :id="id" :text="orderInfo.name ? orderInfo.name : ''" :price="orderInfo.minPrice ? orderInfo.minPrice : ''"
       :tu="swiperList.length && swiperList[0]"></SharePopup>
     <EvaluateDialog ref="evaluateDialog" v-if="evaluateDialogShow" :show="evaluateDialogShow"
       @close="evaluateDialogShow = false" :evalId="id" :mainGraph="orderInfo.mainGraph" :name="orderInfo.name">
@@ -449,6 +449,11 @@ export default {
     // #endif
   },
   onLoad(options) {
+    // #ifdef MP-WEIXIN
+    // 默认禁止小程序右上角的分享菜单
+    // uni.hideShareMenu();
+    // #endif
+
     const id = options.id;
     this.activedType = options.activedType;
     this.activityId = options.activityId;
@@ -498,17 +503,19 @@ export default {
     timer = null;
   },
   onShareAppMessage(res) {
+    const queryStr = this.buildShareParams();
     return {
       title: this.orderInfo.name || "商品分享",
-      path: `/pages/other_package/productInfo/productInfo?id=${this.id}`,
+      path: `/pages/other_package/productInfo/productInfo?${queryStr}`,
-      imageUrl: this.swiperList.length > 0 ? this.swiperList[0] : "",
+      imageUrl: (this.swiperList && this.swiperList.length > 0) ? this.swiperList[0] : (this.orderInfo.mainGraph || ""),
     };
   },
   onShareTimeline(res) {
+    const queryStr = this.buildShareParams();
     return {
       title: this.orderInfo.name || "商品分享",
-      query: `id=${this.id}`,
+      query: queryStr,
-      imageUrl: this.swiperList.length > 0 ? this.swiperList[0] : "",
+      imageUrl: (this.swiperList && this.swiperList.length > 0) ? this.swiperList[0] : (this.orderInfo.mainGraph || ""),
     };
   },
   methods: {
@@ -579,21 +586,43 @@ export default {
         url: `/pages/rwa_package/kefu/kefu?scene=product&goodsId=${this.id}`,
       });
     },
-    getValue,
+    buildShareParams() {
+      const params = [];
+      if (this.id) params.push(`id=${this.id}`);
+      if (this.activedType) params.push(`activedType=${this.activedType}`);
+      if (this.activityId) params.push(`activityId=${this.activityId}`);
+      if (this.isCoupon) params.push(`isPar=${this.isCoupon}`);
+      return params.join("&");
+    },
     // 微信小程序环境分享
     onWxShare(index) {
-      console.log("分享", index);
+      console.log("微信小程序分享", index);
       if (index == 0) {
-        // 微信好友，通过button open-type="share"触发，这里只需要关闭弹窗
+        // 微信好友：通过 button open-type="share" 触发，此处只需关闭分享弹窗
         this.onClose();
-      } else {
+      } else if (index == 1) {
-        // 分享到微信朋友圈
+        // 分享到微信朋友圈：开启右上角朋友圈分享菜单并引导用户点击右上角 [...]
-        // 小程序不支持API直接唤起朋友圈分享，提示用户点击右上角
+        // #ifdef MP-WEIXIN
+        uni.showShareMenu({
+          withShareTicket: true,
+          menus: ["shareTimeline"],
+          success: () => {
             uni.showModal({
               title: "提示",
-          content: "请点击右上角...分享到朋友圈",
+              content: "已为您开启朋友圈分享功能，请点击右上角 [...] 选择【分享到朋友圈】",
               showCancel: false,
             });
+          },
+          fail: () => {
+            uni.showModal({
+              title: "提示",
+              content: "请点击右上角 [...] 分享到朋友圈",
+              showCancel: false,
+            });
+          },
+        });
+        // #endif
+        this.onClose();
       }
     },
     onShare(index) {
@@ -885,12 +914,21 @@ export default {
       this.openShow = false;
     },
     jumpLeft() {
-      if (this.isSplash == "true") {
+      const pages = getCurrentPages();
-        uni.switchTab({ url: "/pages/home/home" });
+      // 如果是从分享链接直接打开（页面栈数量 <= 1）或闪屏/引导打开，点击返回直接回到首页
+      if (this.isSplash == "true" || pages.length <= 1) {
+        uni.switchTab({
+          url: "/pages/home/home",
+        });
         return;
       }
       uni.navigateBack({
-        delta: 1, // 返回的页面数，默认为1,返回到上一级
+        delta: 1, // 返回上一级页面
+        fail: () => {
+          uni.switchTab({
+            url: "/pages/home/home",
+          });
+        },
       });
     },
     jumpOther(type) {