w-front-end / popularSports · Commits

Commit c0c5718e57c65c0b15eac4e45a9ad25fa26ca231

Authored by zhiyangdu
1 parent 2177fc7a

判断站内点击还是站外点击

Inline Side-by-side
Showing 2 changed files with 622 additions and 448 deletions
src/pages/common/common.vue
  View file @c0c5718
1 <template> 1 <template>
2 <div class="common"> 2 <div class="common">
3 3
4 - <!-- iOS QQ内 & Android WeChat内无法唤起APP，提示用Safari或浏览器打开蒙层 -->  
5 - <mask-layer ref="maskLayer"  
6 - :maskLayers="maskLayers">  
7 - </mask-layer>  
8 -  
9 - <!-- showModal -->  
10 - <show-modal  
11 - :options="showModals">  
12 - </show-modal>  
13 -  
14 - <router-view></router-view> 4 + <!-- iOS QQ内 & Android WeChat内无法唤起APP，提示用Safari或浏览器打开蒙层 -->
  5 + <mask-layer ref="maskLayer"
  6 + :maskLayers="maskLayers">
  7 + </mask-layer>
  8 +
  9 + <!-- 通用弹窗 -->
  10 + <show-modal ref="showModal"
  11 + :options="showOptions">
  12 + </show-modal>
  13 +
  14 + <!-- 唤起APP弹窗 -->
  15 + <show-modal ref="callAppModal"
  16 + :options="callAppModals">
  17 + </show-modal>
  18 +
  19 + <router-view ref="childCommon"></router-view>
15 </div> 20 </div>
16 </template> 21 </template>
17 22
@@ -19,10 +24,11 @@ @@ -19,10 +24,11 @@
19 24
20 // 引入组件 25 // 引入组件
21 import Helper from "@/common/helper.class"; 26 import Helper from "@/common/helper.class";
22 - import maskLayer from "@/components/maskLayer/maskLayer";  
23 - import showModal from "@/components/showModal/showModal";  
24 - // 引入组件  
25 - import { Toast, Indicator } from 'mint-ui'; 27 + // 读取文件属性
  28 + import Exif from 'exif-js';
  29 + import maskLayer from "@/components/maskLayer/maskLayer";
  30 + import showModal from "@/components/showModal/showModal";
  31 + import {Toast, Indicator } from 'mint-ui';
26 export default { 32 export default {
27 name: "common", 33 name: "common",
28 data () { 34 data () {
@@ -30,21 +36,31 @@ @@ -30,21 +36,31 @@
30 top: { 36 top: {
31 value: 0 37 value: 0
32 }, 38 },
33 - helper: null,  
34 - appShareParams: null, 39 + helper: null,
  40 + appShareParams: null,
35 schemeParams: null, 41 schemeParams: null,
36 callApps: null, 42 callApps: null,
37 - maskLayers: null,  
38 - showModals: null 43 + maskLayers: null,
  44 + callAppModals: null,
  45 + modals: null,
  46 + showOptions: null,
  47 + /* 上传图片参数开始 开始 */
  48 + files: {
  49 + name: "", // 图片名字
  50 + type: "" // 图片类型
  51 + },
  52 + Orientation: null, // 旋转角度
  53 + headerImage: null
  54 + /* 上传图片参数开始 结束 */
39 } 55 }
40 }, 56 },
41 components: { 57 components: {
42 - maskLayer,  
43 - showModal 58 + maskLayer,
  59 + showModal
44 }, 60 },
45 created() { 61 created() {
46 62
47 - // 设置访问设备 63 + // 设置访问设备
48 this.setDeviceType(); 64 this.setDeviceType();
49 65
50 // 设置浏览器类型 66 // 设置浏览器类型
@@ -55,55 +71,9 @@ @@ -55,55 +71,9 @@
55 71
56 // 实例化helper对象 72 // 实例化helper对象
57 this.helper = new Helper(this); 73 this.helper = new Helper(this);
58 - // 填写收货地址  
59 - var specianame = this.$route.name  
60 - if(specianame==="luckyWheel"||specianame==="drawRecord") {  
61 - if (this.isAndroid.value) {  
62 - var addressId = localStorage.getItem('addressId');  
63 - var giftId = localStorage.getItem('ext').split("=")[1]  
64 - } else {  
65 - var addressId = this.$route.query.addressId;  
66 - var giftId = this.$route.query.giftId;  
67 - }  
68 - if (addressId && giftId) {  
69 - this.getaddLuckDrawAddress();  
70 - }  
71 - }  
72 }, 74 },
73 methods: { 75 methods: {
74 - /**  
75 - * 判断是否有获取头部高度的方法有这个方法证明该webview在咱们自己部门的view里面  
76 - */  
77 - isBackIcon(){  
78 - // 判断获取状态栏高度的方法存不存在  
79 - if(typeof window.webkit === "object" && typeof window.webkit.messageHandlers === "object"  
80 - && typeof window.webkit.messageHandlers.getStatusHeight==="function"){  
81 - return true  
82 - }  
83 - },  
84 - /**  
85 - * 返回上一页  
86 - */  
87 - back(){  
88 - // APP内  
89 - if (this.isCNLive.value) {  
90 -  
91 - // 调用App，返回按键  
92 - if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.destory) {  
93 -  
94 - // APP内，iOS销毁WebView  
95 - window.webkit.messageHandlers.destory.postMessage({body: {}});  
96 - } else if (window.obj && window.obj.finish) {  
97 -  
98 - // APP内，Android销毁WebView  
99 - window.obj.finish();  
100 - }  
101 - } else {  
102 76
103 - // 后退  
104 - window.history.go(-1);  
105 - }  
106 - },  
107 /** 77 /**
108 * 设置访问设备 78 * 设置访问设备
109 */ 79 */
@@ -145,459 +115,663 @@ @@ -145,459 +115,663 @@
145 } else if (ua.match(/alipay/i) == "alipay") { 115 } else if (ua.match(/alipay/i) == "alipay") {
146 this.$store.commit("setBrowser", "AliPay"); 116 this.$store.commit("setBrowser", "AliPay");
147 this.$set(this.isAliPay, "value", true); 117 this.$set(this.isAliPay, "value", true);
148 - } else if (ua.match(/company\/cnlive/i) == "company/cnlive") { 118 + } else if (ua.match(/company\/cnlive/i) == "company/cnlive") {
149 this.$store.commit("setBrowser", "CNLive"); 119 this.$store.commit("setBrowser", "CNLive");
150 this.$set(this.isCNLive, "value", true); 120 this.$set(this.isCNLive, "value", true);
151 - } else {  
152 - this.$store.commit("setBrowser", "Other");  
153 - } 121 + } else {
  122 + this.$store.commit("setBrowser", "Other");
  123 + }
154 }, 124 },
155 125
156 /** 126 /**
157 * 设置uid 127 * 设置uid
158 */ 128 */
159 setUid() { 129 setUid() {
160 -  
161 if (this.$route.query.uid) { 130 if (this.$route.query.uid) {
162 131
163 - let uid = this.$route.query.uid; 132 + let uid = this.$route.query.uid;
164 133
165 - // 容错，截取uid  
166 - if (typeof uid === "object") {  
167 - uid = uid.pop();  
168 - } 134 + // 容错，截取uid
  135 + if (typeof uid === "object") {
  136 + uid = uid.pop();
  137 + }
169 138
170 - // 设置uid 139 + // 设置uid
171 this.$store.commit("setUid", uid); 140 this.$store.commit("setUid", uid);
172 } 141 }
173 - },  
174 -  
175 - /**  
176 - * 通用跳转  
177 - * @param {object} item [服务详情对象]  
178 - * @param {object} params [地址栏传参]  
179 - */  
180 - gotoDetail(item, params = null) {  
181 -  
182 - // 判断App内  
183 - if (this.isCNLive.value) {  
184 -  
185 - // 提取key，判断是广告位还是详情  
186 - let keyArr = Object.keys(item);  
187 -  
188 - // 判断是Ads还是Detail  
189 - let isAds = (keyArr.includes("type") && keyArr.includes("to") && keyArr.includes("shop_type"));  
190 -  
191 - // 初始化参数  
192 - let options = {};  
193 - console.log(isAds)  
194 - // 广告处理  
195 - if (isAds) {  
196 -  
197 - // 设置参数  
198 - options = {  
199 - type: item.type,  
200 - to: item.to,  
201 - shop_type: item.shop_type  
202 - };  
203 - console.log(options)  
204 - // 调用APP通用跳转，提交参数  
205 - if(window.webkit&&window.webkit.messageHandlers && window.webkit.messageHandlers.wjjToAppOnlineRetailers) {  
206 - window.webkit.messageHandlers.wjjToAppOnlineRetailers.postMessage({body: options});  
207 - } else if(window.obj && window.obj.wjjToAppOnlineRetailers) {  
208 - window.obj.wjjToAppOnlineRetailers(JSON.stringify(options));  
209 - }  
210 - }  
211 - }  
212 - }, 142 + },
  143 +
213 /** 144 /**
214 - * 唤起APP 145 + * 投票
  146 + * @param {object} item [列表项对象]
  147 + * @param {function} callback [回调函数]
215 */ 148 */
216 - callApp() { 149 + doVote(item, callback) {
217 150
218 - // 唤起APP层  
219 - this.helper.schemeLayer(this.schemeParams, this.showModal); 151 + // 请求接口
  152 + this.http("/Api/" + (this.getApiVersion().index) + "/moviesVote", {
  153 + id: item.id,
  154 + uid: item.uid,
  155 + type: 1
  156 + }, callback || function() {}, {
  157 + method: "POST",
  158 + item
  159 + });
220 }, 160 },
221 161
222 - /* 获取并设置分享参数 开始 */  
223 -  
224 - /**  
225 - * 获取并设置分享参数  
226 - * @param {object} params [获取分享数据参数]  
227 - */  
228 - getShareData(params) {  
229 -  
230 - // 请求接口  
231 - this.http("/Api/" + (this.getApiVersion().index) + "/getShareData", params, this.getShareDataCallback, {  
232 - method: "POST"  
233 - })  
234 - },  
235 -  
236 - /**  
237 - * 获取并设置分享参数回调  
238 - * @param {object} res [服务器返回数据]  
239 - * @param {object} ext [扩展参数]  
240 - */  
241 - getShareDataCallback(res, ext) {  
242 -  
243 - // 返回处理  
244 - if (res.code == 200) {  
245 -  
246 - // 解构数据  
247 - let {data: datas} = res;  
248 -  
249 - // 判断APP内  
250 - if (this.isCNLive.value) {  
251 -  
252 - /* 旧版APP内分享参数设置 开始 */  
253 -  
254 - // APP内分享参数  
255 - this.$set(this, "appShareParams", {  
256 - shareUrl: encodeURI(datas.url),  
257 - shareIcon: datas.share_img,  
258 - shareTitle: datas.share_title,  
259 - shareContent: datas.share_desc,  
260 - isShareWXMiniProgram: false,  
261 - wxMiniProgramId: datas.mini_app_id,  
262 - wxMiniProgramPath: datas.mini_app_url  
263 - });  
264 -  
265 - /* 旧版APP内分享参数设置 结束 */  
266 -  
267 - } else {  
268 -  
269 - /* 设置唤起APP参数 开始 */  
270 - if (datas.inside_aes && datas.inside_aes.type && datas.inside_aes.to && datas.inside_aes.shop_type) {  
271 -  
272 - // 附加其它参数到唤起APP连接中  
273 - this.$set(this, "schemeParams", this.$route.query);  
274 -  
275 - // 设置唤起APP参数  
276 - Object.assign(this.schemeParams, {  
277 - share_mold: "shop",  
278 - shop_type: datas.inside_aes.type,  
279 - shop_to: datas.inside_aes.to,  
280 - shop_shop_type: datas.inside_aes.shop_type  
281 - });  
282 -  
283 - // 遍历对象，重新编码  
284 - for (let index in this.schemeParams) {  
285 - this.schemeParams[index] = encodeURIComponent(decodeURIComponent(this.schemeParams[index]));  
286 - }  
287 -  
288 - this.$set(this, "callApps", {  
289 - funcs: {  
290 - callApp: this.helper,  
291 - callAppParams: this.schemeParams,  
292 - callAppCallback: this.showModalCallback  
293 - }  
294 - });  
295 - }  
296 - /* 设置唤起APP参数 结束 */  
297 -  
298 - /* 设置微信分享参数 开始 */  
299 - if (this.isWeChat.value) {  
300 -  
301 - // 微信分享参数  
302 - let shares = {  
303 - title: datas.share_title, // 分享标题  
304 - desc: datas.share_desc, // 分享描述  
305 - link: datas.url, // 分享链接  
306 - imgUrl: datas.share_img, // 分享图标  
307 - // type: "", // 分享类型,music、video或link，不填默认为link  
308 - // dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空  
309 - }  
310 -  
311 - // 设置分享  
312 - this.getWxParams(shares);  
313 - }  
314 - /* 设置微信分享参数 结束 */  
315 - }  
316 - }  
317 - },  
318 -  
319 - /**  
320 - * 获取微信公众号JS-SDK签名的等参数  
321 - * @param {object} shares [分享参数]  
322 - */  
323 - getWxParams(shares) {  
324 -  
325 - // 如果在微信内  
326 - if (this.isWeChat.value) {  
327 -  
328 - // 请求接口  
329 - this.http("/Api/" + (this.getApiVersion().miniapp) + "/getWxParams", {  
330 - url: encodeURIComponent(window.location.href.split('#')[0])  
331 - }, this.getWxParamsCallback, {  
332 - method: "POST",  
333 - shares  
334 - })  
335 - }  
336 - },  
337 -  
338 - /**  
339 - * 获取微信公众号JS-SDK签名的等参数回调  
340 - * @param {object} res [服务器返回数据]  
341 - * @param {object} ext [扩展参数]  
342 - */  
343 - getWxParamsCallback(res, ext) {  
344 -  
345 - // 返回处理  
346 - if (res.code == 200) {  
347 -  
348 - // 解构数据  
349 - let {data: datas} = res;  
350 -  
351 - /* 微信JS-SDK 开始 */  
352 -  
353 - // 上下文  
354 - let context = this;  
355 -  
356 - // 引入微信JS-SDK  
357 - this.$set(this.jweixin, "value", require("jweixin-module"));  
358 -  
359 - //获取微信公众号的配置  
360 - this.jweixin.value.config({  
361 - debug: context.debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。  
362 - appId: datas.appId, // 必填，公众号的唯一标识  
363 - timestamp: datas.timestamp, // 必填，生成签名的时间戳  
364 - nonceStr: datas.nonceStr, // 必填，生成签名的随机串  
365 - signature: datas.signature.toLowerCase(), // 必填，签名，见附录1  
366 - jsApiList: [  
367 - "onMenuShareTimeline",  
368 - "onMenuShareAppMessage",  
369 - "onMenuShareQQ",  
370 - "onMenuShareWeibo",  
371 - "onMenuShareQZone"  
372 - ]  
373 - });  
374 -  
375 - // 上下文  
376 - let contextWX = this.jweixin.value;  
377 -  
378 - // 设置分享参数  
379 - let shares = ext.shares;  
380 -  
381 - // JS-SDK准备好之后  
382 - this.jweixin.value.ready(function() {  
383 -  
384 - // 分享参数  
385 - let sharesParams = {  
386 - title: shares.title, // 分享标题  
387 - desc: shares.desc, // 分享描述  
388 - link: shares.link, // 分享链接  
389 - imgUrl: shares.imgUrl, // 分享图标  
390 - success: function () {  
391 - // 用户确认分享后执行的回调函数  
392 - this.setStorageParams("message", "分享成功", true);  
393 - },  
394 - cancel: function () {  
395 - // 用户取消分享后执行的回调函数  
396 - this.setStorageParams("message", "取消分享", true);  
397 - }  
398 - }  
399 -  
400 - //获取“分享到QQ”按钮点击状态及自定义分享内容接口（即将废弃）  
401 - contextWX.onMenuShareQQ(sharesParams);  
402 -  
403 - //获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）  
404 - contextWX.onMenuShareAppMessage(sharesParams);  
405 -  
406 - //获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）  
407 - contextWX.onMenuShareTimeline(sharesParams);  
408 -  
409 - //获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口  
410 - contextWX.onMenuShareWeibo(sharesParams);  
411 -  
412 - //获取“分享到QQ空间”按钮点击状态及自定义分享内容接口（即将废弃）  
413 - contextWX.onMenuShareQZone(sharesParams);  
414 - });  
415 -  
416 - /* 微信JS-SDK 结束 */  
417 - }  
418 - },  
419 -  
420 - /**  
421 - * 唤起APP弹窗  
422 - * @param {object} options [成功回调选项]  
423 - */  
424 - showModal(options) {  
425 -  
426 - // 调用showModal层参数  
427 - this.$set(this, "showModals", {  
428 - title: "",  
429 - content: "即将离开页面<br />打开网家家APP",  
430 - success: options.success,  
431 - success_params: options.success_params,  
432 - cb: this.showModalCallback,  
433 - isShow: true  
434 - });  
435 - },  
436 -  
437 /** 162 /**
438 - * 唤起APP操作后回调  
439 - */  
440 - showModalCallback(options) { 163 + * APP内拉起分享
  164 + * @param {int} type [分享类型]
  165 + * @param {int} id [页面id]
  166 + */
  167 + toShare(type, id) {
441 168
442 - // 判断是否在Android WeChat内或在iOS QQ内  
443 - if ((this.isAndroid.value && this.isWeChat.value) || (this.isiPhone.value && this.isQQ.value)) { 169 + // 判断APP内
  170 + if (this.isCNLive.value) {
444 171
445 - // 判断微信或QQ，给出不同的图片  
446 - if (this.isiPhone.value && this.isQQ.value) { 172 + // 调用分享（新方法）
  173 + if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.toShare) {
447 174
448 - // 设置蒙层图片  
449 - this.$set(this, "maskLayers", {  
450 - img: "static/img/mask_layer_browser_iOS.png"  
451 - });  
452 - } else { 175 + // 分享
  176 + window.webkit.messageHandlers.toShare.postMessage({body: {type: type, id: id}});
  177 + } else if (window.obj && window.obj.toShare) {
453 178
454 - // 设置蒙层图片  
455 - this.$set(this, "maskLayers", {  
456 - img: "static/img/mask_layer_browser.png"  
457 - });  
458 - } 179 + // 分享
  180 + window.obj.toShare(type, id);
  181 + }
459 182
460 - // 显示蒙层  
461 - this.$refs.maskLayer.showLayer();  
462 - } else { 183 + // 调用分享（旧方法）
  184 + if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.share) {
463 185
464 - // H5唤起APP  
465 - options.success(options.success_params.callApp, options.success_params.path, options.success_params.param);  
466 - }  
467 - }, 186 + // 分享
  187 + window.webkit.messageHandlers.share.postMessage({body: this.appShareParams});
  188 + } else if (window.obj && window.obj.shareUrl) {
468 189
469 - /* 获取并设置分享参数 结束 */ 190 + // 分享
  191 + window.obj.shareUrl(JSON.stringify(this.appShareParams));
  192 + }
  193 + }
  194 + },
470 195
471 /** 196 /**
472 - * 获取状态栏高度  
473 - */  
474 - getStatusHeight() {  
475 -  
476 - if (this.isCNLive.value) { 197 + * 唤起APP
  198 + */
  199 + callApp() {
477 200
478 - // 获取状态栏高度  
479 - if(window.webkit && window.webkit.messageHandlers) { 201 + // 唤起APP层
  202 + this.helper.schemeLayer(this.schemeParams, this.callAppModal);
  203 + },
480 204
481 - // 请求状态栏高度，等待App调用  
482 - window.webkit.messageHandlers.getStatusHeight.postMessage({body: {}});  
483 - } else if(window.obj) { 205 + /* 获取并设置分享参数 开始 */
484 206
485 - // 请求状态栏高度，等待App调用  
486 - window.obj.getStatusHeight();  
487 - }  
488 - }  
489 - },  
490 /** 207 /**
491 - * 获取最近使用的服务的接口  
492 - * @param {string} uid [用户]  
493 - * @param {string} id [服务id] 208 + * 获取并设置分享参数
  209 + * @param {object} params [获取分享数据参数]
494 */ 210 */
495 - gethistoryServiceApp(item) { 211 + getShareData(params) {
  212 +
496 // 请求接口 213 // 请求接口
497 - this.http("/Api/" + (this.getApiVersion().serviceApp) + "/historyServiceApp", {  
498 - uid: this.getStore("uid"),  
499 - id: item.id,  
500 - }, this.gethistoryServiceAppCallback, { 214 + this.http("/Api/" + (this.getApiVersion().index) + "/getShareData", params, this.getShareDataCallback, {
501 method: "POST" 215 method: "POST"
502 - }); 216 + })
503 }, 217 },
504 218
505 /** 219 /**
506 - * 获取最近使用的服务的接口 220 + * 获取并设置分享参数回调
507 * @param {object} res [服务器返回数据] 221 * @param {object} res [服务器返回数据]
508 * @param {object} ext [扩展参数] 222 * @param {object} ext [扩展参数]
509 */ 223 */
510 - gethistoryServiceAppCallback(res, ext) {  
511 - // 加载完成  
512 - Indicator.close(); 224 + getShareDataCallback(res, ext) {
  225 +
513 // 返回处理 226 // 返回处理
514 if (res.code == 200) { 227 if (res.code == 200) {
515 228
516 - } else if (res.code == 400) {  
517 - // 调取最近使用服务号失败  
518 - Toast(res.message);  
519 - } else {  
520 - // 调取最近使用服务号失败  
521 - Toast("调取最近使用服务号失败"); 229 + // 解构数据
  230 + let {data: datas} = res;
  231 +
  232 + // 判断APP内
  233 + if (this.isCNLive.value) {
  234 +
  235 + /* 旧版APP内分享参数设置 开始 */
  236 +
  237 + // APP内分享参数
  238 + this.$set(this, "appShareParams", {
  239 + shareUrl: encodeURI(datas.url),
  240 + shareIcon: datas.share_img,
  241 + shareTitle: datas.share_title,
  242 + shareContent: datas.share_desc,
  243 + isShareWXMiniProgram: false,
  244 + wxMiniProgramId: datas.mini_app_id,
  245 + wxMiniProgramPath: datas.mini_app_url
  246 + });
  247 +
  248 + /* 旧版APP内分享参数设置 结束 */
  249 +
  250 + } else {
  251 +
  252 + /* 设置唤起APP参数 开始 */
  253 + if (datas.inside_aes && datas.inside_aes.type && datas.inside_aes.to && datas.inside_aes.shop_type) {
  254 +
  255 + // 附加其它参数到唤起APP连接中
  256 + this.$set(this, "schemeParams", this.$route.query);
  257 +
  258 + // 设置唤起APP参数
  259 + Object.assign(this.schemeParams, {
  260 + share_mold: "shop",
  261 + shop_type: datas.inside_aes.type,
  262 + shop_to: datas.inside_aes.to,
  263 + shop_shop_type: datas.inside_aes.shop_type
  264 + });
  265 +
  266 + // 遍历对象，重新编码
  267 + for (let index in this.schemeParams) {
  268 + this.schemeParams[index] = encodeURIComponent(decodeURIComponent(this.schemeParams[index]));
  269 + }
  270 +
  271 + this.$set(this, "callApps", {
  272 + funcs: {
  273 + callApp: this.helper,
  274 + callAppParams: this.schemeParams,
  275 + callAppCallback: this.callAppModalCallback
  276 + }
  277 + });
  278 + }
  279 + /* 设置唤起APP参数 结束 */
  280 +
  281 + /* 设置微信分享参数 开始 */
  282 + if (this.isWeChat.value) {
  283 +
  284 + // 微信分享参数
  285 + let shares = {
  286 + title: datas.share_title, // 分享标题
  287 + desc: datas.share_desc, // 分享描述
  288 + link: datas.url, // 分享链接
  289 + imgUrl: datas.share_img, // 分享图标
  290 + // type: "", // 分享类型,music、video或link，不填默认为link
  291 + // dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
  292 + }
  293 +
  294 + // 设置分享
  295 + this.getWxParams(shares);
  296 + }
  297 + /* 设置微信分享参数 结束 */
  298 + }
522 } 299 }
523 }, 300 },
524 - // 填写收货地址 301 +
525 /** 302 /**
526 - * 填写收货地址  
527 - * @param {string} id [礼物订单id]  
528 - * * @param {string} addressId [地址] 303 + * 获取微信公众号JS-SDK签名的等参数
  304 + * @param {object} shares [分享参数]
529 */ 305 */
530 - getaddLuckDrawAddress() {  
531 - // 加载中提示  
532 - Indicator.open('加载中...');  
533 - // 填写收货地址  
534 - var addressId,giftId  
535 - if(this.isAndroid.value){  
536 - addressId = localStorage.getItem('addressId');  
537 - giftId = localStorage.getItem('ext').split("=")[1]  
538 - }else {  
539 - addressId = this.$route.query.addressId;  
540 - giftId = this.$route.query.giftId; 306 + getWxParams(shares) {
  307 +
  308 + // 如果在微信内
  309 + if (this.isWeChat.value) {
  310 +
  311 + // 请求接口
  312 + this.http("/Api/" + (this.getApiVersion().miniapp) + "/getWxParams", {
  313 + url: encodeURIComponent(window.location.href.split('#')[0])
  314 + }, this.getWxParamsCallback, {
  315 + method: "POST",
  316 + shares
  317 + })
541 } 318 }
542 - // 请求接口  
543 - this.http("/Api/" + (this.getApiVersion().LuckDraw) + "/addLuckDrawAddress", {  
544 - addressId: addressId,  
545 - id: giftId  
546 - }, this.getaddLuckDrawAddressCallback, {  
547 - method: "POST"  
548 - });  
549 }, 319 },
550 320
551 /** 321 /**
552 - * 填写收货地址回调 322 + * 获取微信公众号JS-SDK签名的等参数回调
553 * @param {object} res [服务器返回数据] 323 * @param {object} res [服务器返回数据]
554 * @param {object} ext [扩展参数] 324 * @param {object} ext [扩展参数]
555 */ 325 */
556 - getaddLuckDrawAddressCallback(res, ext) {  
557 -  
558 - // 加载完成  
559 - Indicator.close(); 326 + getWxParamsCallback(res, ext) {
560 327
561 // 返回处理 328 // 返回处理
562 if (res.code == 200) { 329 if (res.code == 200) {
563 - // 在安卓环境下清除  
564 - if(this.isAndroid.value){  
565 - localStorage.removeItem('addressId');  
566 - localStorage.removeItem('ext');  
567 - } 330 +
568 // 解构数据 331 // 解构数据
569 let {data: datas} = res; 332 let {data: datas} = res;
570 333
571 - /* 填写收货地址 */  
572 - this.$set(this, "prize_list", {  
573 - list: datas.gift 334 + /* 微信JS-SDK 开始 */
  335 +
  336 + // 上下文
  337 + let context = this;
  338 +
  339 + // 引入微信JS-SDK
  340 + this.$set(this.jweixin, "value", require("jweixin-module"));
  341 +
  342 + //获取微信公众号的配置
  343 + this.jweixin.value.config({
  344 + debug: context.debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  345 + appId: datas.appId, // 必填，公众号的唯一标识
  346 + timestamp: datas.timestamp, // 必填，生成签名的时间戳
  347 + nonceStr: datas.nonceStr, // 必填，生成签名的随机串
  348 + signature: datas.signature.toLowerCase(), // 必填，签名，见附录1
  349 + jsApiList: [
  350 + "onMenuShareTimeline",
  351 + "onMenuShareAppMessage",
  352 + "onMenuShareQQ",
  353 + "onMenuShareWeibo",
  354 + "onMenuShareQZone"
  355 + ]
  356 + });
  357 +
  358 + // 上下文
  359 + let contextWX = this.jweixin.value;
  360 +
  361 + // 设置分享参数
  362 + let shares = ext.shares;
  363 +
  364 + // JS-SDK准备好之后
  365 + this.jweixin.value.ready(function() {
  366 +
  367 + // 分享参数
  368 + let sharesParams = {
  369 + title: shares.title, // 分享标题
  370 + desc: shares.desc, // 分享描述
  371 + link: shares.link, // 分享链接
  372 + imgUrl: shares.imgUrl, // 分享图标
  373 + success: function () {
  374 + // 用户确认分享后执行的回调函数
  375 + this.setStorageParams("message", "分享成功", true);
  376 + },
  377 + cancel: function () {
  378 + // 用户取消分享后执行的回调函数
  379 + this.setStorageParams("message", "取消分享", true);
  380 + }
  381 + }
  382 +
  383 + //获取“分享到QQ”按钮点击状态及自定义分享内容接口（即将废弃）
  384 + contextWX.onMenuShareQQ(sharesParams);
  385 +
  386 + //获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
  387 + contextWX.onMenuShareAppMessage(sharesParams);
  388 +
  389 + //获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
  390 + contextWX.onMenuShareTimeline(sharesParams);
  391 +
  392 + //获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
  393 + contextWX.onMenuShareWeibo(sharesParams);
  394 +
  395 + //获取“分享到QQ空间”按钮点击状态及自定义分享内容接口（即将废弃）
  396 + contextWX.onMenuShareQZone(sharesParams);
574 }); 397 });
575 - /* 获取活动详情页 结束 */  
576 - } else if (res.code == 400) {  
577 - // 填写收货地址失败  
578 - Toast(res.message); 398 +
  399 + /* 微信JS-SDK 结束 */
  400 + }
  401 + },
  402 +
  403 + /**
  404 + * 唤起APP弹窗
  405 + * @param {object} options [成功回调选项]
  406 + */
  407 + callAppModal(options) {
  408 +
  409 + // 调用showModal层参数
  410 + this.$set(this, "callAppModals", {
  411 + title: "",
  412 + message: "即将离开页面<br />打开网家家APP",
  413 + confirmButtonText: "允许",
  414 + confirmButtonCallback: this.callAppModalCallback,
  415 + showCancelButton: true,
  416 + cancelButtonText: "取消",
  417 + success: options.success,
  418 + success_params: options.success_params
  419 + });
  420 +
  421 + // 显示唤起APP浮层
  422 + this.$refs.callAppModal.showLayer();
  423 + },
  424 +
  425 + /**
  426 + * 唤起APP操作后回调
  427 + */
  428 + callAppModalCallback(options) {
  429 +
  430 + // 判断是否在Android WeChat内或在iOS QQ内
  431 + if ((this.isAndroid.value && this.isWeChat.value) || (this.isiPhone.value && this.isQQ.value)) {
  432 +
  433 + // 判断微信或QQ，给出不同的图片
  434 + if (this.isiPhone.value && this.isQQ.value) {
  435 +
  436 + // 设置蒙层图片
  437 + this.$set(this, "maskLayers", {
  438 + img: "static/img/mask_layer_browser_iOS.png"
  439 + });
  440 + } else {
  441 +
  442 + // 设置蒙层图片
  443 + this.$set(this, "maskLayers", {
  444 + img: "static/img/mask_layer_browser.png"
  445 + });
  446 + }
  447 +
  448 + // 显示蒙层
  449 + this.$refs.maskLayer.showLayer();
579 } else { 450 } else {
580 - // 填写收货地址失败  
581 - Toast("填写收货地址失败"); 451 +
  452 + // H5唤起APP
  453 + options.success(options.success_params.callApp, options.success_params.path, options.success_params.param);
582 } 454 }
583 }, 455 },
  456 +
  457 + /* 获取并设置分享参数 结束 */
  458 +
  459 + /**
  460 + * 唤起APP弹窗
  461 + * @param {object} options [成功回调选项]
  462 + */
  463 + showModal(options) {
  464 +
  465 + // 调用showModal层参数
  466 + this.$set(this, "showOptions", options);
  467 +
  468 + // 显示通用浮层
  469 + this.$refs.showModal.showLayer();
  470 + },
  471 +
  472 + /**
  473 + * 唤起APP操作后回调
  474 + */
  475 + showModalCallback(options) {
  476 +
  477 + // 暂未使用
  478 +
  479 + },
  480 +
  481 + /**
  482 + * 获取状态栏高度
  483 + */
  484 + getStatusHeight() {
  485 +
  486 + if (this.isCNLive.value) {
  487 +
  488 + // 获取状态栏高度
  489 + if(window.webkit && window.webkit.messageHandlers) {
  490 +
  491 + // 请求状态栏高度，等待App调用
  492 + window.webkit.messageHandlers.getStatusHeight.postMessage({body: {}});
  493 + } else if(window.obj) {
  494 +
  495 + // 请求状态栏高度，等待App调用
  496 + window.obj.getStatusHeight();
  497 + }
  498 + }
  499 + },
  500 +
  501 + /* 图片上传压缩/旋转优化 开始 */
  502 +
  503 + /**
  504 + * 待上传图片处理
  505 + * @param {object} file [文件对象]
  506 + * @param {object} ext [扩展参数]
  507 + */
  508 + imgPreview(file, ext) {
  509 +
  510 + // 定义变量
  511 + let context = this;
  512 +
  513 + /* 定义文件名/文件类型 开始 */
  514 + this.$set(this.files, {
  515 + name: "",
  516 + type: ""
  517 + });
  518 + this.$set(this.files, "name", file.name);
  519 + this.$set(this.files, "type", file.type);
  520 + /* 定义文件名/文件类型 结束 */
  521 +
  522 + // 初始化文件编码/图片方向对象
  523 + this.$set(this, "headerImage", null);
  524 + this.$set(this, "Orientation", null);
  525 +
  526 + // 去获取拍照时的信息，解决拍出来的照片旋转问题
  527 + Exif.getData(file, function () {
  528 + context.Orientation = Exif.getTag(this, "Orientation");
  529 + });
  530 +
  531 + // 检测是否支持FileReader
  532 + if (!file || !window.FileReader) {
  533 + return;
  534 + }
  535 +
  536 + if (/^image/.test(file.type)) {
  537 +
  538 + // 创建一个reader
  539 + let reader = new FileReader();
  540 +
  541 + // 将图片转成 base64 格式
  542 + reader.readAsDataURL(file);
  543 +
  544 + // 读取成功后的回调
  545 + reader.onloadend = function () {
  546 +
  547 + // 实例化图片对象
  548 + let result = this.result;
  549 + let img = new Image();
  550 + img.src = result;
  551 +
  552 + // 判断图片是否大于500K，是就直接上传，反之压缩图片
  553 + if (this.result.length <= 500 * 1024) {
  554 + context.headerImage = this.result;
  555 + context.postImg(ext);
  556 + } else {
  557 + img.onload = function () {
  558 + let data = context.compress(img, context.Orientation);
  559 + context.headerImage = data;
  560 + context.postImg(ext);
  561 + };
  562 + }
  563 + };
  564 + }
  565 + },
  566 +
  567 + /**
  568 + * 压缩图片
  569 + * @param {object} img [待处理图片对象]
  570 + * @param {int} Orientation [图片上传旋转值]
  571 + */
  572 + compress(img, Orientation) {
  573 +
  574 + // 初始化canvas对象
  575 + let canvas = document.createElement("canvas");
  576 + let ctx = canvas.getContext("2d");
  577 +
  578 + // 瓦片canvas
  579 + let tCanvas = document.createElement("canvas");
  580 + let tctx = tCanvas.getContext("2d");
  581 +
  582 + // let initSize = img.src.length;
  583 + let width = img.width;
  584 + let height = img.height;
  585 +
  586 + // 如果图片大于四百万像素，计算压缩比并将大小压至400万以下
  587 +
  588 + // 缩放比例
  589 + let ratio;
  590 +
  591 + if ((ratio = (width * height) / 4000000) > 1) {
  592 +
  593 + // 大于400万像素
  594 + ratio = Math.sqrt(ratio);
  595 + width /= ratio;
  596 + height /= ratio;
  597 + } else {
  598 +
  599 + // 等比不缩放
  600 + ratio = 1;
  601 + }
  602 +
  603 + // 设置canvas宽高
  604 + canvas.width = width;
  605 + canvas.height = height;
  606 +
  607 + // 背景色
  608 + ctx.fillStyle = "#fff";
  609 + ctx.fillRect(0, 0, canvas.width, canvas.height);
  610 +
  611 + // 如果图片像素大于100万则使用瓦片绘制
  612 + let count;
  613 +
  614 + if ((count = (width * height) / 1000000) > 1) {
  615 +
  616 + // 超过100万像素;
  617 + count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
  618 +
  619 + // 计算每块瓦片的宽和高
  620 + let nw = ~~(width / count);
  621 + let nh = ~~(height / count);
  622 + tCanvas.width = nw;
  623 + tCanvas.height = nh;
  624 + for (let i = 0; i < count; i++) {
  625 + for (let j = 0; j < count; j++) {
  626 + tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
  627 + ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
  628 + }
  629 + }
  630 + } else {
  631 + ctx.drawImage(img, 0, 0, width, height);
  632 + }
  633 +
  634 + // 修复iOS上传图片的时候，被旋转的问题
  635 + if (Orientation != "" && Orientation != 1) {
  636 +
  637 + switch (Orientation) {
  638 + case 6: // 需要顺时针（向左）90度旋转
  639 + this.rotateImg(img, "left", canvas);
  640 + break;
  641 + case 8: // 需要逆时针（向右）90度旋转
  642 + this.rotateImg(img, "right", canvas);
  643 + break;
  644 + case 3: // 需要180度旋转
  645 + this.rotateImg(img, "right", canvas); // 转两次
  646 + this.rotateImg(img, "right", canvas);
  647 + break;
  648 + }
  649 + }
  650 +
  651 + // 进行最小压缩
  652 + let ndata = canvas.toDataURL("image/jpeg", 0.1);
  653 + tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
  654 + return ndata;
  655 + },
  656 +
  657 + /**
  658 + * 旋转图片
  659 + * @param {object} img [图片对象]
  660 + * @param {string} direction [旋转方向]
  661 + * @param {object} canvas对象
  662 + */
  663 + rotateImg(img, direction, canvas) {
  664 +
  665 + // 最小与最大旋转方向，图片旋转4次后回到原方向
  666 + const min_step = 0;
  667 + const max_step = 3;
  668 +
  669 + if (img == null) {
  670 + return;
  671 + }
  672 +
  673 + // img的高度和宽度不能在img元素隐藏后获取，否则会出错
  674 + let height = img.height;
  675 + let width = img.width;
  676 + let step = 2;
  677 + if (step == null) {
  678 + step = min_step;
  679 + }
  680 + if (direction == "right") {
  681 + step++;
  682 +
  683 + //旋转到原位置，即超过最大值
  684 + step > max_step && (step = min_step);
  685 + } else {
  686 + step--;
  687 + step < min_step && (step = max_step);
  688 + }
  689 +
  690 + // 旋转角度以弧度值为参数
  691 + let degree = (step * 90 * Math.PI) / 180;
  692 + let ctx = canvas.getContext("2d");
  693 + switch (step) {
  694 + case 0:
  695 + canvas.width = width;
  696 + canvas.height = height;
  697 + ctx.drawImage(img, 0, 0);
  698 + break;
  699 + case 1:
  700 + canvas.width = height;
  701 + canvas.height = width;
  702 + ctx.rotate(degree);
  703 + ctx.drawImage(img, 0, -height);
  704 + break;
  705 + case 2:
  706 + canvas.width = width;
  707 + canvas.height = height;
  708 + ctx.rotate(degree);
  709 + ctx.drawImage(img, -width, -height);
  710 + break;
  711 + case 3:
  712 + canvas.width = height;
  713 + canvas.height = width;
  714 + ctx.rotate(degree);
  715 + ctx.drawImage(img, -width, 0);
  716 + break;
  717 + }
  718 + },
  719 +
  720 + /**
  721 + * 将base64字符串转成file对象
  722 + * @param {string} dataurl [图片URL/base64编码]
  723 + */
  724 + dataURLtoFile(dataurl) {
  725 + var arr = dataurl.split(","),
  726 + bstr = atob(arr[1]),
  727 + n = bstr.length,
  728 + u8arr = new Uint8Array(n);
  729 + while (n--) {
  730 + u8arr[n] = bstr.charCodeAt(n);
  731 + }
  732 +
  733 + return new File([u8arr], this.files.name, {
  734 + type: this.files.type
  735 + });
  736 + },
  737 +
  738 + /**
  739 + * 七牛云图片上传
  740 + * @param {object} ext [扩展参数]
  741 + */
  742 + async postImg(ext) {
  743 +
  744 + // 设置返回参数，加上base64编码数据
  745 + let files = {
  746 + content: this.headerImage,
  747 + file: this.dataURLtoFile(this.headerImage)
  748 + };
  749 +
  750 + // 返回压缩后的文件数据
  751 + if (typeof ext.postImgCallback === "function") {
  752 + ext.postImgCallback(files, ext);
  753 + }
  754 + }
  755 +
  756 + /* 图片上传压缩/旋转优化 结束 */
  757 +
584 }, 758 },
585 mounted () { 759 mounted () {
586 760
587 - // 判断APP内 761 + // 判断APP内
588 if (this.isCNLive.value) { 762 if (this.isCNLive.value) {
589 763
590 - // 上下文 764 + // 上下文
591 let context = this; 765 let context = this;
592 766
593 - // 暴露方法，由App调用，接收返回  
594 - window.getStatusHeight = function(statusString) { 767 + // 暴露方法，由App调用，接收返回
  768 + window.getStatusHeight = function(statusString) {
595 769
596 - // 获取状态栏高度  
597 - let statusJSON = JSON.parse(statusString); 770 + // 获取状态栏高度
  771 + let statusJSON = JSON.parse(statusString);
598 772
599 - // 设置状态栏参数  
600 - context.$set(context.top, "value", statusJSON.statusHeight || context.top.value); 773 + // 设置状态栏参数
  774 + context.$set(context.top, "value", statusJSON.statusHeight || context.top.value);
601 }; 775 };
602 776
603 this.$nextTick(function(){ 777 this.$nextTick(function(){
@@ -605,7 +779,7 @@ @@ -605,7 +779,7 @@
605 // 获取状态栏高度，等待App调用window["getStatusHeight"] 779 // 获取状态栏高度，等待App调用window["getStatusHeight"]
606 this.getStatusHeight(); 780 this.getStatusHeight();
607 }) 781 })
608 - } 782 + }
609 } 783 }
610 } 784 }
611 </script> 785 </script>
src/pages/index/index.vue
  View file @c0c5718
@@ -53,7 +53,7 @@ @@ -53,7 +53,7 @@
53 link(index){ 53 link(index){
54 // 区分app内点击还是app外点击 54 // 区分app内点击还是app外点击
55 if(this.isCNLive.value){ 55 if(this.isCNLive.value){
56 - 56 + this.$parent.callAppCallback()
57 }else { 57 }else {
58 var items; 58 var items;
59 if(index==1){ 59 if(index==1){