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 1 <template>
2 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 20 </div>
16 21 </template>
17 22  
... ... @@ -19,10 +24,11 @@
19 24  
20 25 // 引入组件
21 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 32 export default {
27 33 name: "common",
28 34 data () {
... ... @@ -30,21 +36,31 @@
30 36 top: {
31 37 value: 0
32 38 },
33   - helper: null,
34   - appShareParams: null,
  39 + helper: null,
  40 + appShareParams: null,
35 41 schemeParams: null,
36 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 57 components: {
42   - maskLayer,
43   - showModal
  58 + maskLayer,
  59 + showModal
44 60 },
45 61 created() {
46 62  
47   - // 设置访问设备
  63 + // 设置访问设备
48 64 this.setDeviceType();
49 65  
50 66 // 设置浏览器类型
... ... @@ -55,55 +71,9 @@
55 71  
56 72 // 实例化helper对象
57 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 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 115 } else if (ua.match(/alipay/i) == "alipay") {
146 116 this.$store.commit("setBrowser", "AliPay");
147 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 119 this.$store.commit("setBrowser", "CNLive");
150 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 127 * 设置uid
158 128 */
159 129 setUid() {
160   -
161 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 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 215 method: "POST"
502   - });
  216 + })
503 217 },
504 218  
505 219 /**
506   - * 获取最近使用的服务的接口
  220 + * 获取并设置分享参数回调
507 221 * @param {object} res [服务器返回数据]
508 222 * @param {object} ext [扩展参数]
509 223 */
510   - gethistoryServiceAppCallback(res, ext) {
511   - // 加载完成
512   - Indicator.close();
  224 + getShareDataCallback(res, ext) {
  225 +
513 226 // 返回处理
514 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 323 * @param {object} res [服务器返回数据]
554 324 * @param {object} ext [扩展参数]
555 325 */
556   - getaddLuckDrawAddressCallback(res, ext) {
557   -
558   - // 加载完成
559   - Indicator.close();
  326 + getWxParamsCallback(res, ext) {
560 327  
561 328 // 返回处理
562 329 if (res.code == 200) {
563   - // 在安卓环境下清除
564   - if(this.isAndroid.value){
565   - localStorage.removeItem('addressId');
566   - localStorage.removeItem('ext');
567   - }
  330 +
568 331 // 解构数据
569 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 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 759 mounted () {
586 760  
587   - // 判断APP内
  761 + // 判断APP内
588 762 if (this.isCNLive.value) {
589 763  
590   - // 上下文
  764 + // 上下文
591 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 777 this.$nextTick(function(){
... ... @@ -605,7 +779,7 @@
605 779 // 获取状态栏高度，等待App调用window["getStatusHeight"]
606 780 this.getStatusHeight();
607 781 })
608   - }
  782 + }
609 783 }
610 784 }
611 785 </script>
... ...
src/pages/index/index.vue
  View file @c0c5718
... ... @@ -53,7 +53,7 @@
53 53 link(index){
54 54 // 区分app内点击还是app外点击
55 55 if(this.isCNLive.value){
56   -
  56 + this.$parent.callAppCallback()
57 57 }else {
58 58 var items;
59 59 if(index==1){
... ...