w-front-end / Worship_and_learn_upward · Files

<template>
    <div class="common">

		<!-- iOS QQ内 & Android WeChat内无法唤起APP，提示用Safari或浏览器打开蒙层 -->
		<mask-layer ref="maskLayer"
			:maskLayers="maskLayers">
		</mask-layer>

		<!-- showModal -->
		<show-modal
			:options="showModals">
		</show-modal>

        <router-view></router-view>
    </div>
</template>

<script>

    // 引入组件
    import Helper from "@/common/helper.class";
	import maskLayer from "@/components/maskLayer/maskLayer";
	import showModal from "@/components/showModal/showModal";
    // 引入组件
    import { Toast, Indicator } from 'mint-ui';
    export default {
        name: "common",
        data () {
            return {
                top: {
                    value: 0
                },
				helper: null,
				appShareParams: null,
                schemeParams: null,
                callApps: null,
				maskLayers: null,
				showModals: null
            }
        },
        components: {
			maskLayer,
			showModal
        },
        created() {

			// 设置访问设备
            this.setDeviceType();

            // 设置浏览器类型
            this.setBrowser();

            // 设置uid
            this.setUid();

            // 实例化helper对象
            this.helper = new Helper(this);
            // 填写收货地址
            var specianame = this.$route.name
            if(specianame==="luckyWheel"||specianame==="drawRecord") {
                if (this.isAndroid.value) {
                    var addressId = localStorage.getItem('addressId');
                    var giftId = localStorage.getItem('ext').split("=")[1]
                } else {
                    var addressId = this.$route.query.addressId;
                    var giftId = this.$route.query.giftId;
                }
                if (addressId && giftId) {
                    this.getaddLuckDrawAddress();
                }
            }
        },
        methods: {
            /**
             * 判断是否有获取头部高度的方法有这个方法证明该webview在咱们自己部门的view里面
             */
            isBackIcon(){
                // 判断获取状态栏高度的方法存不存在
                 if(typeof window.webkit === "object" && typeof window.webkit.messageHandlers === "object"
                     && typeof window.webkit.messageHandlers.getStatusHeight==="function"){
                     return true
                 }
            },
            /**
             * APP内拉起分享
             * @param {int} type [分享类型]
             * @param {int} id [页面id]
             */
            toShare(type, id) {
                // 判断APP内
                if (this.isCNLive.value) {

                    // 调用分享（新方法）
                    if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.toShare) {

                        // 分享
                        window.webkit.messageHandlers.toShare.postMessage({body: {type: type, id: id}});
                    } else if (window.obj && window.obj.toShare) {

                        // 分享
                        window.obj.toShare(type, id);
                    }

                    // 调用分享（旧方法）
                    if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.share) {

                        // 分享
                        window.webkit.messageHandlers.share.postMessage({body: this.appShareParams});
                    } else if (window.obj && window.obj.shareUrl) {

                        // 分享
                        window.obj.shareUrl(JSON.stringify(this.appShareParams));
                    }
                }
            },
            /**
             * 返回上一页
             */
            back(){
                // APP内
                if (this.isCNLive.value) {

                    // 调用App，返回按键
                    if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.destory) {

                        // APP内，iOS销毁WebView
                        window.webkit.messageHandlers.destory.postMessage({body: {}});
                    } else if (window.obj && window.obj.finish) {

                        // APP内，Android销毁WebView
                        window.obj.finish();
                    }
                } else {

                    // 后退
                    window.history.go(-1);
                }
            },
            /**
             * 设置访问设备
             */
            setDeviceType () {

                // 判断设备和浏览器类型
                let ua = window.navigator.userAgent.toLowerCase();

                // 判断设备类型
                if(ua.match(/Android/i) == "android") {
                    this.$store.commit("setDeviceType", "Android");
                    this.$set(this.isAndroid, "value", true);
                } else if (ua.match(/iPhone/i) == "iphone") {
                    this.$store.commit("setDeviceType", "iPhone");
                    this.$set(this.isiPhone, "value", true);
                } else if (ua.match(/iPad/i) == "ipad") {
                    this.$store.commit("setDeviceType", "iPad");
                    this.$set(this.isiPad, "value", true);
                } else {
                    this.$store.commit("setDeviceType", "Other");
                }
            },

            /**
             * 设置浏览器类型
             */
            setBrowser () {

                // 判断设备和浏览器类型
                let ua = window.navigator.userAgent.toLowerCase();

                // 判断浏览器类型
                if(ua.match(/MicroMessenger/i) == "micromessenger") {
                    this.$store.commit("setBrowser", "weChat");
                    this.$set(this.isWeChat, "value", true);
                } else if (ua.match(/QQ/i) == "qq") {
                    this.$store.commit("setBrowser", "QQ");
                    this.$set(this.isQQ, "value", true);
                } else if (ua.match(/alipay/i) == "alipay") {
                    this.$store.commit("setBrowser", "AliPay");
                    this.$set(this.isAliPay, "value", true);
				} else if (ua.match(/company\/cnlive/i) == "company/cnlive") {
                    this.$store.commit("setBrowser", "CNLive");
                    this.$set(this.isCNLive, "value", true);
				} else {
					this.$store.commit("setBrowser", "Other");
				}
            },

            /**
             * 设置uid
             */
            setUid() {

                if (this.$route.query.uid) {

					let uid = this.$route.query.uid;

					// 容错，截取uid
					if (typeof uid === "object") {
						uid = uid.pop();
					}

					// 设置uid
                    this.$store.commit("setUid", uid);
                }
			},

			/**
			 * 通用跳转
			 * @param {object} item [服务详情对象]
			 * @param {object} params [地址栏传参]
			 */
			gotoDetail(item, params = null) {

				// 判断App内
				if (this.isCNLive.value) {

					// 提取key，判断是广告位还是详情
					let keyArr = Object.keys(item);

					// 判断是Ads还是Detail
					let isAds = (keyArr.includes("type") && keyArr.includes("to") && keyArr.includes("shop_type"));

					// 初始化参数
					let options = {};
                    console.log(isAds)
					// 广告处理
					if (isAds) {

						// 设置参数
						options = {
							type: item.type,
							to: item.to,
							shop_type: item.shop_type
						};
                        console.log(options)
						// 调用APP通用跳转，提交参数
						if(window.webkit&&window.webkit.messageHandlers && window.webkit.messageHandlers.wjjToAppOnlineRetailers) {
							window.webkit.messageHandlers.wjjToAppOnlineRetailers.postMessage({body: options});
						} else if(window.obj && window.obj.wjjToAppOnlineRetailers) {
							window.obj.wjjToAppOnlineRetailers(JSON.stringify(options));
						}
					}
				}
			},
            /**
             * 唤起APP
             */
            callApp() {

				// 唤起APP层
				this.helper.schemeLayer(this.schemeParams, this.showModal);
            },

            /* 获取并设置分享参数 开始 */

            /**
			 * 获取并设置分享参数
             * @param {object} params [获取分享数据参数]
			 */
			getShareData(params) {

				// 请求接口
				this.http("/Api/" + (this.getApiVersion().index) + "/getShareData", params, this.getShareDataCallback, {
					method: "POST"
				})
			},

			/**
			 * 获取并设置分享参数回调
			 * @param {object} res [服务器返回数据]
			 * @param {object} ext [扩展参数]
			 */
			getShareDataCallback(res, ext) {

				// 返回处理
				if (res.code == 200) {

					// 解构数据
					let {data: datas} = res;

					// 判断APP内
					if (this.isCNLive.value) {

						/* 旧版APP内分享参数设置 开始 */

						// APP内分享参数
						this.$set(this, "appShareParams", {
							shareUrl: encodeURI(datas.url),
							shareIcon: datas.share_img,
							shareTitle: datas.share_title,
							shareContent: datas.share_desc,
							isShareWXMiniProgram: false,
							wxMiniProgramId: datas.mini_app_id,
							wxMiniProgramPath: datas.mini_app_url
						});

						/* 旧版APP内分享参数设置 结束 */

					} else {

						/* 设置唤起APP参数 开始 */
						if (datas.inside_aes && datas.inside_aes.type && datas.inside_aes.to && datas.inside_aes.shop_type) {

							// 附加其它参数到唤起APP连接中
							this.$set(this, "schemeParams", this.$route.query);

							// 设置唤起APP参数
							Object.assign(this.schemeParams, {
								share_mold: "shop",
								shop_type: datas.inside_aes.type,
								shop_to: datas.inside_aes.to,
								shop_shop_type: datas.inside_aes.shop_type
							});

							// 遍历对象，重新编码
							for (let index in this.schemeParams) {
								this.schemeParams[index] = encodeURIComponent(decodeURIComponent(this.schemeParams[index]));
							}

							this.$set(this, "callApps", {
								funcs: {
									callApp: this.helper,
									callAppParams: this.schemeParams,
									callAppCallback: this.showModalCallback
								}
							});
						}
						/* 设置唤起APP参数 结束 */

						/* 设置微信分享参数 开始 */
						if (this.isWeChat.value) {

							// 微信分享参数
							let shares = {
								title: datas.share_title, // 分享标题
								desc: datas.share_desc, // 分享描述
								link: datas.url, // 分享链接
								imgUrl: datas.share_img, // 分享图标
								// type: "", // 分享类型,music、video或link，不填默认为link
								// dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
							}

							// 设置分享
							this.getWxParams(shares);
						}
						/* 设置微信分享参数 结束 */
					}
				}
			},

			/**
			 * 获取微信公众号JS-SDK签名的等参数
			 * @param {object} shares [分享参数]
			 */
			getWxParams(shares) {

				// 如果在微信内
				if (this.isWeChat.value) {

					// 请求接口
					this.http("/Api/" + (this.getApiVersion().miniapp) + "/getWxParams", {
						url: encodeURIComponent(window.location.href.split('#')[0])
					}, this.getWxParamsCallback, {
						method: "POST",
						shares
					})
				}
			},

			/**
			 * 获取微信公众号JS-SDK签名的等参数回调
			 * @param {object} res [服务器返回数据]
			 * @param {object} ext [扩展参数]
			 */
			getWxParamsCallback(res, ext) {

				// 返回处理
				if (res.code == 200) {

					// 解构数据
					let {data: datas} = res;

					/* 微信JS-SDK 开始 */

					// 上下文
					let context = this;

					// 引入微信JS-SDK
					this.$set(this.jweixin, "value", require("jweixin-module"));

					//获取微信公众号的配置
					this.jweixin.value.config({
						debug: context.debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						 appId: datas.appId, // 必填，公众号的唯一标识
						 timestamp: datas.timestamp, // 必填，生成签名的时间戳
						 nonceStr: datas.nonceStr, // 必填，生成签名的随机串
						 signature: datas.signature.toLowerCase(), // 必填，签名，见附录1
						 jsApiList: [
							 "onMenuShareTimeline",
							 "onMenuShareAppMessage",
							 "onMenuShareQQ",
							 "onMenuShareWeibo",
							 "onMenuShareQZone"
						]
					});

					// 上下文
					let contextWX = this.jweixin.value;

					// 设置分享参数
					let shares = ext.shares;

					// JS-SDK准备好之后
					this.jweixin.value.ready(function() {

						// 分享参数
						let sharesParams = {
							 title: shares.title, // 分享标题
							 desc: shares.desc, // 分享描述
							 link: shares.link, // 分享链接
							 imgUrl: shares.imgUrl, // 分享图标
							 success: function () {
								 // 用户确认分享后执行的回调函数
								 this.setStorageParams("message", "分享成功", true);
							 },
							 cancel: function () {
								 // 用户取消分享后执行的回调函数
								 this.setStorageParams("message", "取消分享", true);
							 }
						}

						//获取“分享到QQ”按钮点击状态及自定义分享内容接口（即将废弃）
						 contextWX.onMenuShareQQ(sharesParams);

						//获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
						 contextWX.onMenuShareAppMessage(sharesParams);

						//获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
						 contextWX.onMenuShareTimeline(sharesParams);

						//获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
						 contextWX.onMenuShareWeibo(sharesParams);

						 //获取“分享到QQ空间”按钮点击状态及自定义分享内容接口（即将废弃）
						 contextWX.onMenuShareQZone(sharesParams);
					});

					/* 微信JS-SDK 结束 */
				}
			},

			/**
			 * 唤起APP弹窗
			 * @param {object} options [成功回调选项]
			 */
			showModal(options) {

				// 调用showModal层参数
				this.$set(this, "showModals", {
					title: "",
					content: "即将离开页面<br />打开网家家APP",
					success: options.success,
					success_params: options.success_params,
					cb: this.showModalCallback,
					isShow: true
				});
			},

            /**
			 * 唤起APP操作后回调
			 */
			showModalCallback(options) {

				// 判断是否在Android WeChat内或在iOS QQ内
				if ((this.isAndroid.value && this.isWeChat.value) || (this.isiPhone.value && this.isQQ.value)) {

					// 判断微信或QQ，给出不同的图片
					if (this.isiPhone.value && this.isQQ.value) {

						// 设置蒙层图片
						this.$set(this, "maskLayers", {
							img: "static/img/mask_layer_browser_iOS.png"
						});
					} else {

						// 设置蒙层图片
						this.$set(this, "maskLayers", {
							img: "static/img/mask_layer_browser.png"
						});
					}

					// 显示蒙层
					this.$refs.maskLayer.showLayer();
				} else {

					// H5唤起APP
					options.success(options.success_params.callApp, options.success_params.path, options.success_params.param);
				}
			},

            /* 获取并设置分享参数 结束 */

            /**
			 * 获取状态栏高度
			 */
			getStatusHeight() {

				if (this.isCNLive.value) {

					// 获取状态栏高度
					if(window.webkit && window.webkit.messageHandlers) {

						// 请求状态栏高度，等待App调用
						window.webkit.messageHandlers.getStatusHeight.postMessage({body: {}});
					} else if(window.obj) {

						// 请求状态栏高度，等待App调用
						window.obj.getStatusHeight();
					}
				}
			},
            /**
             * 获取最近使用的服务的接口
             * @param {string} uid [用户]
             * @param {string} id [服务id]
             */
            gethistoryServiceApp(item) {
                // 请求接口
                this.http("/Api/" + (this.getApiVersion().serviceApp) + "/historyServiceApp", {
                    uid: this.getStore("uid"),
                    id: item.id,
                }, this.gethistoryServiceAppCallback, {
                    method: "POST"
                });
            },

            /**
             * 获取最近使用的服务的接口
             * @param {object} res [服务器返回数据]
             * @param {object} ext [扩展参数]
             */
            gethistoryServiceAppCallback(res, ext) {
                // 加载完成
                Indicator.close();
                // 返回处理
                if (res.code == 200) {

                } else if (res.code == 400) {
                    // 调取最近使用服务号失败
                    Toast(res.message);
                } else {
                    // 调取最近使用服务号失败
                    Toast("调取最近使用服务号失败");
                }
            },
            // 填写收货地址
            /**
             * 填写收货地址
             * @param {string} id [礼物订单id]
             * * @param {string} addressId [地址]
             */
            getaddLuckDrawAddress() {
                // 加载中提示
                Indicator.open('加载中...');
                // 填写收货地址
                var addressId,giftId
                if(this.isAndroid.value){
                    addressId = localStorage.getItem('addressId');
                    giftId = localStorage.getItem('ext').split("=")[1]
                }else {
                    addressId = this.$route.query.addressId;
                    giftId = this.$route.query.giftId;
                }
                // 请求接口
                this.http("/Api/" + (this.getApiVersion().LuckDraw) + "/addLuckDrawAddress", {
                    addressId: addressId,
                    id: giftId
                }, this.getaddLuckDrawAddressCallback, {
                    method: "POST"
                });
            },

            /**
             * 填写收货地址回调
             * @param {object} res [服务器返回数据]
             * @param {object} ext [扩展参数]
             */
            getaddLuckDrawAddressCallback(res, ext) {

                // 加载完成
                Indicator.close();

                // 返回处理
                if (res.code == 200) {
                    // 在安卓环境下清除
                    if(this.isAndroid.value){
                        localStorage.removeItem('addressId');
                        localStorage.removeItem('ext');
                    }
                    // 解构数据
                    let {data: datas} = res;

                    /* 填写收货地址 */
                    this.$set(this, "prize_list", {
                        list: datas.gift
                    });
                    /* 获取活动详情页 结束 */
                } else if (res.code == 400) {
                    // 填写收货地址失败
                    Toast(res.message);
                } else {
                    // 填写收货地址失败
                    Toast("填写收货地址失败");
                }
            },
        },
        mounted () {

			// 判断APP内
            if (this.isCNLive.value) {

				// 上下文
                let context = this;

				// 暴露方法，由App调用，接收返回
				window.getStatusHeight = function(statusString) {

					// 获取状态栏高度
					let statusJSON = JSON.parse(statusString);

					// 设置状态栏参数
					context.$set(context.top, "value", statusJSON.statusHeight || context.top.value);
                };

                this.$nextTick(function(){

                    // 获取状态栏高度，等待App调用window["getStatusHeight"]
                    this.getStatusHeight();
                })
			}
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style rel="stylesheet/less" lang="less">
    @import 'common';
</style>