【拼团商品详情】

1. 接入分销、分享的逻辑

pages/activity/goods_combination_details/index.vue

@@ -205,8 +205,11 @@
       @close="closeAttr"
     />
     <!-- TODO 芋艿 -->
-		<shareRedPackets :sharePacket="sharePacket" @listenerActionSheet="listenerActionSheet"
+		<shareRedPackets
-			@closeChange="closeChange"></shareRedPackets>
+      :sharePacket="sharePacket"
+      @listenerActionSheet="listenerActionSheet"
+			@closeChange="closeChange"
+    />
 		<!-- 分享按钮 -->
 		<view class="generate-posters acea-row row-middle" :class="posters ? 'on' : ''">
 			<!-- #ifndef MP -->
@@ -216,7 +219,7 @@
 			</button>
 			<!-- #endif -->
 			<!-- #ifdef MP -->
-			<button class="item" open-type="share" hover-class='none' @click="goFriend">
+			<button class="item" open-type="share" hover-class='none' @click="closePosters">
 				<view class="iconfont icon-weixin3"></view>
 				<view class="">发送给朋友</view>
 			</button>
@@ -363,7 +366,7 @@
 				posterImageStatus: false,
 				canvasStatus: false, //海报绘图标签
 				storeImage: '', //海报产品图
-				PromotionCode: '', //二维码图片
+				promotionCode: '', //二维码图片
 				posterImage: '', //海报路径
 				posterbackgd: '/static/images/posterbackgd.png',
 				navActive: 0,
@@ -389,6 +392,7 @@
 				deep: true
 			},
 		},
+    //#endif
 		onLoad(options) {
 			let that = this
 			this.$store.commit("PRODUCT_TYPE", 'normal');
@@ -459,9 +463,17 @@
 				}
 			}
 		},
+    //#ifdef MP
+    onShareAppMessage() {
+      return {
+        title: this.spu.name || '',
+        imageUrl: this.spu.picUrl,
+        path: app.globalData.openPages
+      };
+    },
+    //#endif
 		methods: {
       // ========== 拼团活动相关 ==========
-      // 获取详情
       combinationDetail() {
         CombinationActivityApi.getCombinationActivity(this.id).then(res => {
           this.activity = res.data;
@@ -555,7 +567,7 @@
           // #ifdef H5
           this.storeImage = spu.picUrl;
           this.make();
-          // this.ShareInfo(); TODO 芋艿：稍后 fix 下，临时注释
+          this.ShareInfo();
           // #endif
           // #ifdef MP
           this.getQrcode();
@@ -790,199 +802,122 @@
         });
       },
 
-      // TODO 芋艿：未整理
+      // ========== 分销相关的方法 ==========
-
+      /**
-      closePosters: function() {
+       * 生成二维码，设置到 promotionCode 变量
-				this.posters = false;
+       */
+      make() {
+        let href = location.href.split('?')[0] + "?id="+ this.id + "&spread="  + this.uid;
+        uQRCode.make({
+          canvasId: 'qrcode',
+          text: href,
+          size: this.qrcodeSize,
+          margin: 10,
+          success: res => {
+            this.promotionCode = res;
           },
-			closeChange: function() {
+          complete: () => {},
-				this.$set(this.sharePacket, 'isState', true);
+          fail:res => {
+            this.$util.Tips({
+              title: '海报二维码生成失败！'
+            });
+          }
+        })
       },
-
+      /**
-
+       * 设置微信公众号的分享标题、内容等信息
-			// 返回
+       */
-			returns() {
+      ShareInfo: function() {
-				uni.navigateBack();
+        // 只处理微信环境
-			},
+        if (!this.$wechat.isWeixin()) {
-			//#ifdef H5
+          return
-			setShare: function() {
+        }
-				this.$wechat.isWeixin() &&
+        const spu = this.spu;
+        let href = location.href;
+        href = href.indexOf("?") === -1 ?
+          href + "?spread=" + this.uid :
+          href + "&spread=" + this.uid;
+        const configAppMessage = {
+          title: spu.name,
+          imgUrl: spu.picUrl,
+          desc: spu.description,
+          link: href
+        };
         this.$wechat.wechatEvevt([
           "updateAppMessageShareData",
           "updateTimelineShareData",
           "onMenuShareAppMessage",
           "onMenuShareTimeline"
-					], {
+        ], configAppMessage);
-						desc: this.storeInfo.storeInfo,
-						title: this.storeInfo.storeName,
-						link: location.href,
-						imgUrl: this.storeInfo.image
-					}).then(res => {
-						console.log(res);
-					}).catch(err => {
-						console.log(err);
-					});
       },
-			//#endif
-
-			infoScroll: function() {
-				var that = this,
-					topArr = [],
-					heightArr = [];
-				for (var i = 0; i < that.navList.length; i++) { //productList
-					//获取元素所在位置
-					var query = uni.createSelectorQuery().in(this);
-					var idView = "#past" + i;
-					// if (!that.data.good_list.length && i == 2) {
-					//   var idView = "#past" + 3;
-					// }
-					query.select(idView).boundingClientRect();
-					query.exec(function(res) {
-						var top = res[0].top;
-						var height = res[0].height;
-						topArr.push(top);
-						heightArr.push(height);
-						that.topArr = topArr
-						that.heightArr = heightArr
-					});
-				}
-			},
-
       /**
-			 * 分享打开
+       * 获得商品的封面 base64
-			 *
        */
-			listenerActionSheet: function() {
+      getImageBase64:function(images) {
-				if (this.isLogin == false) {
-					toLogin();
-				} else {
-					// #ifdef H5
-					if(!this.imgTop) this.getImageBase64(this.storeImage);
-					if (this.$wechat.isWeixin() === true) {
-						this.weixinStatus = true;
-					}
-					// #endif
-					this.posters = true;
-
-				}
-			},
-			// 分享关闭
-			listenerActionClose: function() {
-				this.canvasStatus = false;
-			},
-			//隐藏海报
-			posterImageClose: function() {
-				this.canvasStatus = false
-			},
-			//替换安全域名
-			setDomain: function(url) {
-				url = url ? url.toString() : '';
-				//本地调试打开,生产请注销
-				if (url.indexOf("https://") > -1) return url;
-				else return url.replace('http://', 'https://');
-			},
-			//获取海报产品图
-			downloadFilestoreImage: function() {
-				let that = this;
-				uni.downloadFile({
-					url: that.setDomain(that.storeInfo.image),
-					success: function(res) {
-						that.storeImage = res.tempFilePath;
-					},
-					fail: function() {
-						return that.$util.Tips({
-							title: ''
-						});
-						that.storeImage = '';
-					},
-				});
-			},
-
-			// app获取二维码
-			downloadFileAppCode() {
-				let that = this;
-				uni.downloadFile({
-					url: that.setDomain(that.storeInfo.code_base),
-					success: function(res) {
-						that.PromotionCode = res.tempFilePath;
-					},
-					fail: function() {
-						return that.$util.Tips({
-							title: ''
-						});
-						that.PromotionCode = '';
-					},
-				});
-			},
-
-			/**
-			 * 获取产品分销二维码
-			 * @param function successFn 下载完成回调
-			 *
-			 */
-			downloadFilePromotionCode: function(successFn) {
-				let that = this;
-				scombinationCode(that.id).then(res => {
-					uni.downloadFile({
-						url: that.setDomain(res.data.code),
-						success: function(res) {
-							that.$set(that, 'isDown', false);
-							if (typeof successFn == 'function')
-								successFn && successFn(res.tempFilePath);
-							else
-								that.$set(that, 'PromotionCode', res.tempFilePath);
-						},
-						fail: function() {
-							that.$set(that, 'isDown', false);
-							that.$set(that, 'PromotionCode', '');
-						},
-					});
-				}).catch(err => {
-					that.$set(that, 'isDown', false);
-					that.$set(that, 'PromotionCode', '');
-				});
-			},
-			getImageBase64: function(images) {
-				let that = this;
         imageBase64({
           url: images
-				}).then(res => {
+        }).then(res=>{
-					that.imgTop = res.data.code
+          this.imgTop = res.data.code
         })
       },
-			// 小程序关闭分享弹窗；
+      /**
-			goFriend: function() {
+       * 获得小程序的二维码
-				this.posters = false;
+       */
+      getQrcode() {
+        let data = {
+          pid: this.uid,
+          id: this.id,
+          path: 'pages/activity/goods_seckill_details/index'
+        }
+        getQrcode(data).then(res=>{
+          base64src(res.data.code, res => {
+            this.promotionCode = res;
+          });
+        }).catch(err => {
+          this.errT = err;
+        });
       },
       /**
        * 生成海报
        */
       goPoster: function() {
-				let that = this;
+        // 提示正在生成中
         uni.showLoading({
           title: '海报生成中',
           mask: true
         });
-				that.posters = false;
+        this.posters = false;
-				let arrImagesUrl = '';
+        // 如果没有二维码图片，则说明加载失败，进行错误提示
-				let arrImagesUrlTop = '';
+        if(!this.promotionCode){
-				if (!that.PromotionCode) {
           uni.hideLoading();
-					that.$util.Tips({
+          this.$util.Tips({
-						title: that.errT
+            title: this.errT
           });
           return
         }
+        // 校验海报是否已经生成；如果失败，则进行错误提示
+        setTimeout(() => {
+          if (!this.imgTop) {
+            uni.hideLoading();
+            this.$util.Tips({
+              title: '无法生成商品海报！'
+            });
+          }
+        }, 1000);
+
+        // 展示海报
+        const that = this;
+        let arrImagesUrlTop = '';
         uni.downloadFile({
-					url: that.imgTop,
+          url: this.imgTop, //仅为示例，并非真实的资源
           success: (res) => {
             arrImagesUrlTop = res.tempFilePath;
-						let arrImages = [that.posterbackgd, arrImagesUrlTop, that.PromotionCode];
+            let arrImages = [that.posterbackgd, arrImagesUrlTop, that.promotionCode];
-						let storeName = that.storeInfo.storeName;
+            const name = that.spu.name;
-						let price = that.storeInfo.price;
+            const price = that.fen2yuan(that.spu.price);
+            const marketPrice = that.fen2yuan(that.spu.marketPrice);
             setTimeout(() => {
-							that.$util.PosterCanvas(arrImages, storeName, price, that.storeInfo
+              that.$util.PosterCanvas(arrImages, name, price, marketPrice,
-								.otPrice,
                 function(tempFilePath) {
                   that.posterImage = tempFilePath;
                   that.canvasStatus = true;
@@ -992,44 +927,69 @@
           }
         });
       },
-			// 小程序二维码
+      /**
-			getQrcode() {
+       * 关闭分享弹窗
+       */
+      closePosters: function() {
+        this.posters = false;
+      },
+      /**
+       * 隐藏海报
+       */
+      posterImageClose: function() {
+        this.canvasStatus = false
+      },
+      /**
+       * 获取海报产品图（解决跨域问题，只适用于小程序）
+       */
+      downloadFilestoreImage: function() {
         let that = this;
-				let data = {
+        uni.downloadFile({
-					pid: that.uid,
+          url: that.setDomain(that.spu.picUrl),
-					id: that.id,
+          success: function(res) {
-					path: 'pages/activity/goods_combination_details/index'
+            that.storeImage = res.tempFilePath;
+          },
+          fail: function() {
+            return that.$util.Tips({
+              title: ''
+            });
+          },
+        });
+      },
+      /**
+       * 替换安全域名
+       */
+      setDomain: function(url) {
+        url = url ? url.toString() : '';
+        // 本地调试打开,生产请注销
+        if (url.indexOf("https://") > -1) {
+          return url;
         }
-				getQrcode(data).then(res => {
+        return url.replace('http://', 'https://');
-					base64src(res.data.code, res => {
-						that.PromotionCode = res;
-					});
-				}).catch(err => {
-					that.errT = err;
-				});
       },
-			// 生成二维码；
+      /**
-			make() {
+       * 分享打开
-				let href = location.href.split('?')[0] + "?id="+ this.id + "&spread="  + this.uid;
+       */
-				uQRCode.make({
+      listenerActionSheet: function() {
-					canvasId: 'qrcode',
+        if (!this.isLogin) {
-					text: href,
+          toLogin();
-					size: this.qrcodeSize,
+          return
-					margin: 10,
-					success: res => {
-						this.PromotionCode = res;
-
-					},
-					complete: (res) => {},
-					fail: res => {
-						this.$util.Tips({
-							title: '海报二维码生成失败！'
-						});
         }
-				})
+        // #ifdef H5
+        if (this.$wechat.isWeixin() === true) {
+          this.weixinStatus = true;
+        }
+        // #endif
+        this.posters = true;
       },
-			/*
+      /**
-			 * 保存到手机相册
+       * 分享关闭
+       */
+      listenerActionClose: function() {
+        this.canvasStatus = false;
+      },
+      /**
+       * 微信小程序的保存图片到本机
        */
       // #ifdef MP
       savePosterPath: function() {
@@ -1078,71 +1038,80 @@
         })
       },
       // #endif
-			setShareInfoStatus: function() {
+      /**
-				let data = this.storeInfo;
+       * 关闭分销的弹窗
-				let href = location.href;
+       */
-				if (this.$wechat.isWeixin()) {
+      closeChange: function() {
-					href =
+        this.$set(this.sharePacket, 'isState', true);
-						href.indexOf("?") === -1 ?
-						href + "?spread=" + this.uid :
-						href + "&spread=" + this.uid;
-
-					let configAppMessage = {
-						desc: data.storeInfo,
-						title: data.storeName,
-						link: href,
-						imgUrl: data.image
-					};
-					this.$wechat.wechatEvevt(["updateAppMessageShareData", "updateTimelineShareData"],
-						configAppMessage)
-				}
       },
+
+      // ========== 顶部 nav 相关的方法 ==========
+      /**
+       * 后退
+       */
+      returns: function() {
+        uni.navigateBack()
+      },
+      /**
+       * 点击指定 nav bar
+       *
+       * @param index 新的 navList 位置
+       */
+      tap: function(index) {
+        this.$set(this, 'navActive', index);
+        this.$set(this, 'lock', true);
+        this.$set(this, 'scrollTop', index > 0 ? this.topArr[index] - (app.globalData.navHeight / 2)
+          : this.topArr[index]);
+      },
+      /**
+       * 滚动
+       *
+       * @param e 滚动事件
+       */
       scroll: function(e) {
-				var that = this,
+        const scrollY = e.detail.scrollTop;
-					scrollY = e.detail.scrollTop;
+        let opacity = scrollY / 200;
-				var opacity = scrollY / 200;
         opacity = opacity > 1 ? 1 : opacity;
-				that.opacity = opacity
+        this.$set(this, 'opacity', opacity);
-				that.scrollY = scrollY
+        this.$set(this, 'scrollY', scrollY);
-				if (that.lock) {
+        if (this.lock) {
-					that.lock = false
+          this.$set(this, 'lock', false)
           return;
         }
-				for (var i = 0; i < that.topArr.length; i++) {
+        // 设置选中的 nav
-					if (scrollY < that.topArr[i] - (app.globalData.navHeight / 2) + that.heightArr[i]) {
+        for (let i = 0; i < this.topArr.length; i++) {
-						that.navActive = i
+          if (scrollY < this.topArr[i] - (app.globalData.navHeight / 2) + this.heightArr[i]) {
+            this.$set(this, 'navActive', i)
             break
           }
         }
       },
-			tap: function(item, index) {
+      /**
-				var id = item.id;
+       * 处理器滚动条
-				var index = index;
+       */
-				var that = this;
+      infoScroll: function() {
-				// if (!this.data.good_list.length && id == "past2") {
+        const topArr = [];
-				//   id = "past3"
+        const heightArr = [];
-				// }
+        for (let i = 0; i < this.navList.length; i++) {
-				this.toView = id;
+          // 获取元素所在位置
-				this.navActive = index;
+          const query = wx.createSelectorQuery().in(this);
-				this.lock = true;
+          const idView = "#past" + i;
-				this.scrollTop = index > 0 ? that.topArr[index] - (app.globalData.navHeight / 2) : that.topArr[index]
+          query.select(idView).boundingClientRect();
+          query.exec(function(res) {
+            const top = res[0].top;
+            const height = res[0].height;
+            topArr.push(top);
+            heightArr.push(height);
+            this.$set(this, 'topArr', topArr);
+            this.$set(this, 'heightArr', heightArr);
+          });
+        }
       },
 
       fen2yuan(price) {
         return Util.fen2yuan(price)
       }
-		},
-		//#ifdef MP
-		onShareAppMessage() {
-			let that = this;
-			return {
-				title: that.storeInfo.storeName,
-				path: app.globalData.openPages,
-				imageUrl: that.storeInfo.image
-			};
 		}
-		//#endif
-
 	}
 </script>