xiuli.gao 6 years ago
parent
commit
418436a5fa
5 changed files with 201 additions and 20 deletions
  1. 94 12
      share/Invitation.html
  2. BIN
      share/images/close.png
  3. BIN
      share/images/wx_jiantou.png
  4. 31 8
      share/index.html
  5. 76 0
      share/weChatShare.js

+ 94 - 12
share/Invitation.html

@@ -6,6 +6,8 @@
6 6
 <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no">
7 7
 <title>分享领红包</title>
8 8
 <link rel="stylesheet" type="text/css" href="public/public_css.css"/>
9
+<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
10
+<script src="weChatShare.js"></script>
9 11
 <style type="text/css">
10 12
 	body,html{font-size: 0.16rem;height: 100vh;}
11 13
 	body, div, button, h3, h6, span, ul, li, p, a,input{font-family: -apple-system,SF UI Text,Helvetica Neue,Helvetica,Arial,sans-serif;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0; margin: 0; box-sizing: inherit; font-weight: normal;}
@@ -83,6 +85,32 @@
83 85
 		color: #555555;
84 86
 		text-align: center;
85 87
 	}
88
+	.alert-info {
89
+	    position: absolute;
90
+	    top: 1.74rem;
91
+	    right: 0;
92
+	    left: 0;
93
+	    bottom: 0;
94
+	    text-align: center;
95
+	    z-index: 99;
96
+	}
97
+	
98
+	.alert-info p {
99
+	    display: inline-block;
100
+	    height: 0.38rem;
101
+	    color: #fff;
102
+	    font-size: 0.14rem;
103
+	    line-height: 0.38rem;
104
+	    padding: 0 0.10rem;
105
+	    background-color: rgba(0, 0, 0, 0.7);
106
+	    border-radius: 5px;
107
+	}
108
+	.shareWechat{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: rgba(0,0,0,0.7);display: none;}
109
+	.shareWechatCon{width:2.5rem;background:#ffffff;border-radius:0.12rem;position: absolute;top: 2rem;left: 0;right: 0;margin: auto;}
110
+	.shareWechat .wx_jiantou{width: 0.72rem;position: absolute;right: 0.15rem;top: 0.2rem;}
111
+	.shareWechat .shareWechatCon h3{font-size: 0.16rem;color: #FF2E2E;text-align: center;padding-bottom: 0.15rem;padding-top: 0.3rem;}
112
+	.shareWechat .shareWechatCon p{font-size: 0.14rem;color: #333333;text-align: center;padding-bottom: 0.3rem;}
113
+	.shareWechat .shareWechatCon .cancel{width: 0.34rem;height: 0.34rem;position: absolute;left: 0;right: 0;bottom: -0.5rem;margin: auto;}
86 114
 </style>
87 115
 	<script type="text/javascript">
88 116
 		document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
@@ -123,13 +151,27 @@
123 151
 			<div class="cancel">取消分享</div>
124 152
 		</div>
125 153
 	</div>
154
+	
155
+	<div class="shareWechat">
156
+		<img src="./images/wx_jiantou.png" class="wx_jiantou" />
157
+		<div class="shareWechatCon">
158
+			<h3>恭喜你,获得淘宝红包</h3>
159
+			<p>分享给好友,有奖一起拿</p>
160
+			<img class="cancel" src="./images/close.png"></img>
161
+		</div>
162
+	</div>
163
+	
164
+	<div class="alert-info" style="display: none;">
165
+        <!-- tip提示,3s后消失 -->
166
+        <p></p>
167
+    </div>
126 168
 </body>
127 169
 </html>
128 170
 <script type="text/javascript" src="public/jquery-2.1.0.js"></script>
129 171
 <script type="text/javascript">
130 172
 	var userId = null;
131
-	var activity_id = null;
132
-	var share_code = null;
173
+//	var activity_id = null;
174
+//	var share_code = null;
133 175
 	var str=location.href;  //取得整个地址栏
134 176
     var num=str.indexOf("?"); 
135 177
     str=str.substr(num+1); //str得到?之后的字符串
@@ -139,13 +181,13 @@
139 181
     		userId = brr[i].split('=')[1];//用户id
140 182
     		localStorage.setItem('userId', userId);
141 183
     	}
142
-    	if(brr[i].indexOf('activity_id') != -1){
143
-    		activity_id = brr[i].split('=')[1];//活动id
144
-    		localStorage.setItem('activity_id', activity_id);
145
-    	}
146
-    	if(brr[i].indexOf('share_code') != -1){
147
-    		share_code = brr[i].split('=')[1];
148
-    	}
184
+//  	if(brr[i].indexOf('activity_id') != -1){
185
+//  		activity_id = brr[i].split('=')[1];//活动id
186
+//  		localStorage.setItem('activity_id', activity_id);
187
+//  	}
188
+//  	if(brr[i].indexOf('share_code') != -1){
189
+//  		share_code = brr[i].split('=')[1];
190
+//  	}
149 191
     }
150 192
 	
151 193
 	
@@ -182,16 +224,25 @@
182 224
 	}
183 225
 	
184 226
 	$("#share").click(function () {
185
-		$(".shareMask").css('display','block')
227
+//		if(navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == "micromessenger"){
228
+			//微信
229
+			$(".shareWechat").css('display','block')
230
+			shareFriend ();
231
+//		}else{
232
+////			//app端
233
+//			$(".shareMask").css('display','block')
234
+//		}
186 235
 		share();
187 236
 	})
188 237
 	$(".cancel").click(function () {
189
-		$(".shareMask").css('display','none')
238
+		$(".shareMask").css('display','none');
239
+		$(".shareWechat").css('display','none')
190 240
 	})
191 241
 	
192 242
 	var num = 0;
193 243
 	//分享
194 244
 	function share() {
245
+		//分享统计
195 246
 		$.ajax({
196 247
 			type:"post",
197 248
 			url:"/api/V2/share",
@@ -205,5 +256,36 @@
205 256
 			}
206 257
 		})
207 258
 	}
208
-
259
+	function shareFriend () {
260
+		//微信sdk分享验证信息
261
+		$.ajax({
262
+			type:"post",
263
+			url:"/api/V2/jsonConfig",
264
+			dataType:"json",
265
+			data:{
266
+				url:'index.html?userId=' + userId
267
+			},
268
+			success: function (res) {
269
+				if(res && res.code == 0){
270
+					wexinPay(res.res.url,'./hongbao.png',res.res,() => {
271
+						showMsg("成功")
272
+					},() => {
273
+						showMsg("失败")
274
+					})
275
+				}
276
+			}
277
+		})
278
+	}
279
+	/**
280
+	 * [showMsg 提示各种错误信息,3s后消失]
281
+	 */
282
+	function showMsg(msg) {
283
+	    var msgBox = $('.alert-info');
284
+	    msgBox.children('p').text(msg);
285
+	    msgBox.show();
286
+	
287
+	    setTimeout(function() {
288
+	        msgBox.hide();
289
+	    }, 3000);
290
+	}
209 291
 </script>

BIN
share/images/close.png


BIN
share/images/wx_jiantou.png


+ 31 - 8
share/index.html

@@ -75,15 +75,25 @@
75 75
 	    <div id="copy_2"></div>
76 76
 		<text id="taokouling">€WVXSb1pT51S€</text>
77 77
 		
78
-		<div class="alert-info" style="display: none;">
79
-            <!-- tip提示,3s后消失 -->
80
-            <p></p>
81
-        </div>
78
+	<div class="alert-info" style="display: none;">
79
+        <!-- tip提示,3s后消失 -->
80
+        <p></p>
81
+    </div>
82 82
 </body>
83 83
 </html>
84 84
 <script type="text/javascript" src="public/jquery-2.1.0.js"></script>
85 85
 <script type="text/javascript">
86
-	var user_id = 1;
86
+	var userId = null;
87
+	var str=location.href;  //取得整个地址栏
88
+    var num=str.indexOf("?"); 
89
+    str=str.substr(num+1); //str得到?之后的字符串
90
+    var brr=str.split("&");
91
+	for(var i = 0 ; i<brr.length; i++){
92
+    	if(brr[i].indexOf('userId') != -1){
93
+    		userId = brr[i].split('=')[1];//用户id
94
+    		localStorage.setItem('userId', userId);
95
+    	}
96
+    }
87 97
 		//页面加载,显示数据
88 98
 	window.onload = function () {
89 99
 		Lead() ;
@@ -94,7 +104,7 @@
94 104
 			type:"post",
95 105
 			url:"/api/V2/receiveRedPacket",
96 106
 			data:{
97
-				user_id:user_id
107
+				user_id:userId
98 108
 			},
99 109
 			success: function (res) {
100 110
 				var data =JSON.parse(res)
@@ -102,7 +112,9 @@
102 112
 				if(data.code == 0){
103 113
 					copyPassword();
104 114
 				}else if(data.code == 4003){
105
-					console.log("领取失败")
115
+					showMsg("领取失败")
116
+				}else if(data.code == 4002){
117
+					showMsg(data.message)
106 118
 				}
107 119
 			}
108 120
 		})
@@ -162,7 +174,7 @@
162 174
 	        Url2.select(); // 选择对象
163 175
 	        document.execCommand("Copy"); // 执行浏览器复制命令
164 176
 	    }
165
-	    window.location.href="Invitation.html"
177
+	    window.location.href="Invitation.html?userId=" + userId
166 178
 	}
167 179
 	
168 180
 	
@@ -210,6 +222,17 @@
210 222
 	        });
211 223
 	    }
212 224
 	}
225
+	/**
226
+	 * [showMsg 提示各种错误信息,3s后消失]
227
+	 */
228
+	function showMsg(msg) {
229
+	    var msgBox = $('.alert-info');
230
+	    msgBox.children('p').text(msg);
231
+	    msgBox.show();
213 232
 	
233
+	    setTimeout(function() {
234
+	        msgBox.hide();
235
+	    }, 3000);
236
+	}
214 237
 	
215 238
 </script>

+ 76 - 0
share/weChatShare.js

@@ -0,0 +1,76 @@
1
+//微信方法(点击按键调用)
2
+/*
3
+微信分享方法
4
+获取微信加签信息
5
+@param{data}:获取的微信加签
6
+@param{cb}:成功回调
7
+*/
8
+let wexinPay = (shareUrl,shareImgUrl,payData,cb,errorCb) => {
9
+  let data = payData;
10
+//console.log(wx);
11
+  let appId = data.appId;
12
+  let timestamp = data.timestamp;
13
+  let nonceStr = data.nonceStr;
14
+  let signature = data.signature;
15
+//let rawString = data.rawString;
16
+//let packages = data.package;
17
+//let paySign = data.paySign;
18
+alert('appId,' + appId)
19
+alert('timestamp,' + timestamp)
20
+alert('nonceStr,' + nonceStr)
21
+alert('signature,' + signature)
22
+  wx.config({
23
+    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
24
+    appId: appId, // 必填,公众号的唯一标识
25
+    timestamp: timestamp, // 必填,生成签名的时间戳
26
+    nonceStr: nonceStr, // 必填,生成签名的随机串
27
+    signature: signature, // 必填,签名,见附录1
28
+    jsApiList: [
29
+    	'onMenuShareTimeline',//分享到朋友圈
30
+    	'onMenuShareAppMessage'//分享给朋友
31
+    ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
32
+  });
33
+  wx.ready(function(){
34
+//		let imgUrl = shareImgUrl;
35
+//			if(imgUrl.indexOf("https") == -1){
36
+//				imgUrl = imgUrl.replace('http', 'https');
37
+//			}
38
+  		// 分享给朋友
39
+  		 wx.onMenuShareAppMessage({
40
+  		   title: '我想0元拼到这件宝贝,急需你的帮助', // 分享标题
41
+  		   desc: '点击助我一臂之力', // 分享描述
42
+		   link: shareUrl, // 分享链接
43
+  		   imgUrl: imgUrl, // 分享的图标
44
+  		   success: function (res) {
45
+  		   	//分享成功的回调
46
+  		   	cb(res);
47
+  		   },
48
+  		   fail: function (res) {
49
+  		     errorCb(res);
50
+  		   }
51
+  		 });
52
+			// 分享到朋友圈
53
+			wx.onMenuShareTimeline({
54
+			  title: '我想0元拼到这件宝贝,急需你的帮助', // 分享标题
55
+			  desc: '点击助我一臂之力', // 分享描述
56
+			  link: shareUrl, // 分享链接
57
+			  imgUrl: imgUrl, // 分享的图标
58
+			  success: function (res) {
59
+			  	//分享成功的回调
60
+			  	cb(res);
61
+			  },
62
+			  fail: function (res) {
63
+			    errorCb(res);
64
+			  }
65
+			});
66
+  });
67
+  wx.error(function(res) {
68
+    // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
69
+    alert("签名错误")
70
+//  Toast({
71
+//		  message:res,
72
+//		  duration: 15000
73
+//		});
74
+  });
75
+}
76
+//export default wexinPay;