w-front-end / select_good · Files

<template>
    <div class="common">

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

        <!-- 通用弹窗 -->
        <show-modal ref="showModal"
            :options="showOptions">
        </show-modal>

        <!-- 唤起App弹窗 -->
        <show-modal ref="callAppModal"
            :options="callAppModals">
        </show-modal>

        <router-view ref="childCommon"></router-view>
    </div>
</template>

<script>

    // 引入组件
    import { Toast, Indicator } from 'mint-ui';
    import Helper from "@/common/helper.class";

    // 读取文件属性
    import Exif from 'exif-js';
    import maskLayer from "@/components/maskLayer/maskLayer";
    import showModal from "@/components/showModal/showModal";
    export default {
        name: "common",
        data () {
            return {
                top: {
                    value: 0
                },
                onLine: navigator.onLine,
                helper: null,
                appShareParams: null,
                schemeParams: null,
                callApps: null,
                isOpenApp: {			// 是否可唤起App控制变量
					value: false
				},
                maskLayers: null,
                callAppModals: null,
                modals: null,
                showOptions: null,

                /* 上传图片参数开始 开始 */
                files: {
                    name: "", 	// 图片名字
                    type: ""  	// 图片类型
                },
                Orientation: null,	// 旋转角度
                headerImage: null,
                /* 上传图片参数开始 结束 */
                isBackBox: {		// 判断是否显示backBox组件
					value: true
				}
            }
        },
        components: {
            maskLayer,
            showModal
        },
        created() {

            // 判断是否有target=inside参数，有的话，不显示backBox组件
			if (this.$route.query.target && this.$route.query.target.toLowerCase() == "inside") {
				this.$set(this.isBackBox, "value", false);
			}

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

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

            // 设置uid
            this.setUid();

            // 实例化helper对象
            this.helper = new Helper(this);
        },
        methods: {
            /**
             * 失去焦点事件，处理微信端页面滚动条不归位的问题
             */
            onBlur() {

                // 判断iOS的WeChat内
                if (this.isiPhone.value && (this.isCNLive.value || this.isWeChat.value)) {

                    setTimeout(() => {
                        if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
                            return
                        }
                        // 回到页面顶部
                        document.documentElement.scrollTop = document.body.scrollTop = 0;
                    }, 100);
                }
            },
            /**
             * 设置访问设备
             */
            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);

                    // 获取并设置微信版本号
					let wechatInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);

					// 版本号
                	if (wechatInfo[1]) {

						// 拆分版本号/遍历数组值，转换成整数
						this.$set(this.isWeChat, "version", wechatInfo[1].split(".")).forEach((value, index) => {

							// 重新赋值为整数
							this.isWeChat.version[index] = parseInt(value);
						});
					}
                } 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 if (ua.match(/app\/plat_a/i) == "app/plat_a") {
                    this.$store.commit("setBrowser", "Plat");
                    this.$set(this.isPlat, "value", true);
				} else if (ua.match(/XiaoMi\/MiuiBrowser/i) == "xiaomi/miuibrowser") {
                    this.$store.commit("setBrowser", "XiaoMi");
                    this.$set(this.isXiaoMi, "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);
                }
            },

            /**
             * 返回上一页
             */
            back() {

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

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

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

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

                    // 后退
                    window.history.go(-1);
                }
            },

            /**
             * 前进
             */
            forward() {

                // 后退
                window.history.go(1);
            },
            
            /**
			 * 销毁WebView
			 */
			destroy() {
				
				// App内
				if (this.isCNLive.value) {
					
					// 调用App，销毁WebView
					if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.destroy) {
						window.webkit.messageHandlers.destroy.postMessage({body: {}});
					} else if (window.obj && window.obj.destroy) {
						window.obj.destroy();
					}
				} else {

                    // 后退
                    window.history.go(-1);
                }
			},

            /**
			 * 校验登录
			 * @param {boolean} doLogin [是否执行登录，默认是]
			 */
			checkLogin(doLogin = true) {

				// 如果已登录，返回true，不做处理
				if (this.getStore("uid")) {
					return true;
				}

				// 判断App内，未登录，调用App登录
				if (this.isCNLive.value) {

					// 判断是否要调用App内登录，默认调用
					if (doLogin) {

						// App内登录
						this.CNDSLogin();
					}

					return false;

				// 如果不在App内，未登录，调用mall项目登录页面
				} else {

					// 设置跳转登录域名
					let loginUrl = (this.mode == "prod") ? "https://managemall.cnlive.com/html/mall/1/#/pages/users/login/login" : "https://wjjshop.cnlive.com/html/mall/1/#/pages/users/login/login";

					// 跳转mall项目登录
					window.location.href = loginUrl + "?processing=redirect&pages=" + encodeURIComponent(window.location.href);

					return false;
				}
			},

			/**
			 * App登录
			 */
			CNDSLogin() {

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

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

                        // App内，iOS登录
                        window.webkit.messageHandlers.CNDSLogin.postMessage({body: {}});
                    } else if (window.obj && window.obj.CNDSLogin) {

                        // App内，Android登录
                        window.obj.CNDSLogin();
                    }
				}
            },

            /**
             * 设置navBar
             * @param {int} active [活动项目索引]
             * @returns {array}
             */
            setNavBar(active) {

                // 设置参数
                let navBars = [
                    {
                        icon: {
                            normal: "static/img/icon_home.png",
                            active: "static/img/icon_home_active.png"
                        },
                        text: "首页",
                        url: "/index",
                        active: false
                    },
                    {
                        icon: {
                            normal: "static/img/icon_profile.png",
                            active: "static/img/icon_profile_active.png"
                        },
                        text: "我的",
                        url: {
                            type: 24,
                            to: 40,
                            shop_type: ""
                        },
                        active: false
                    }
                ];

                // 设置活动项目
                for (let i = 0; i < navBars.length; i++) {
                    if (i == active) {
                        navBars[i].active = true;
                    }
                }

                // 返回navBars数据
                return navBars;
            },

            /**
             * navBar跳转
             */
            navBarJump(item) {

                // App内跳转
                if (this.isCNLive.value && typeof item.url === "object" && item.url.type !== null && item.url.type !== undefined && item.url.to !== null && item.url.to !== undefined && item.url.shop_type !== null && item.url.shop_type !== undefined) {

                    // 判断是否有通用跳转函数
                    if (typeof this.gotoDetail === "function") {

                        // 调用通用跳转
                        this.gotoDetail(item.url);
                    }
                }

                // 校验URL是否是网址
                else if (this.helper.checkURL(item.url)) {

                    // 跳转URL
                    window.location.href = item.url.trim();

                // 页面路由跳转
                } else {

                    // 判断如果不是同路由，跳转路由
                    if (typeof item.url === "string" && this.$route.path != item.url) {

                        // 内部路由跳转页面
                        this.$router.push({
                            path: item.url.trim(),
                            query: Object.assign({}, item.query)
                        });
                    }
                }
            },

            /**
             * App内拉起分享
			 * @param {int} type [分享类型]
			 * @param {int} id [页面id]
			 * @param {object} ext [分享扩展参数，可选参数]
             */
            toShare(type, id, ext = null) {

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

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

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

						// 分享
						if (ext) {
							window.obj.toShare(type, id, JSON.stringify(ext));
						} else {
							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));
                    }
				}
			},

            /**
             * 唤起App
             */
            callApp() {

                // 上下文
				let context = this;

				// 跳转连接
				let jumpUrl = (this.mode == "prod" ? "https://managemall.cnlive.com/html/leaflet/appDownload.html" : "https://wjjshop.cnlive.com/html/leaflet/appDownloadTest.html");

				// 系统判断
				if (this.isiPhone.value) {

					// OpenInstall唤起
					// window.location.href = jumpUrl;

					// 唤起App层
                    this.helper.schemeLayer(this.schemeParams, this.callAppModal);
				} else if (this.isAndroid.value) {

					// 唤起App层
                    this.helper.schemeLayer(this.schemeParams, this.callAppModal);

					window.setTimeout(function() {

						// 小米浏览器内，请求PHP页面下载
						if (context.isXiaoMi.value) {
							window.open("http://wjjh5.cnlive.com/apkdownload.php");
						}
					}, 2000);
				}
            },

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

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

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

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

                    // 初始化参数
                    let options = {};

                    // 广告处理
                    if (isAds) {

                        // 设置参数
                        options = {
                            type: item.type.toString().trim(),
                            to: item.to.toString().trim(),
                            shop_type: item.shop_type.toString().trim()
                        };

                        // 调用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));
                        }
                    }
                } else {

                    // * type = 0: 不跳转
                    // * type = 2：跳转商品详情，shop_type 1跳转普通商品 2跳转文创商品 to为商品id  为0不跳转
                    // * type = 5：webView页 to Url地址
                    // * type = 12: 商城总分类 to  分类id   shop_type  1,2,3 级分类
                    // * type = 14: 商城首页
                    // * type = 20: 商城店铺分类 to  分类id   shop_type  1,2 级分类
                    // * type = 25：跳转达人详情页

                    // 广告处理
                    if (isAds) {

                        // 判断广告类型，进行处理
                        switch (item.type) {
                            case "2":		// 跳转商品详情，shop_type 1跳转普通商品 2跳转文创商品 to为商品id  为0不跳转

                                // 判断是否需要跳转
                                if (item.to) {

                                    // 判断跳转详情对应页面类型
                                    switch (item.shop_type) {
                                        case "2":


                                            // 文创商品详情页连接
                                            if (item.to) {
                                                window.location.href = (this.mode == "prod") ? "https://managemall.cnlive.com/html/mall/1/#/pages/main/cultureDetail/cultureDetail?id=" + item.to + "&from=redirect" : "https://wjjshop.cnlive.com/html/mall/1/#/pages/main/cultureDetail/cultureDetail?id=" + item.to + "&from=redirect";
                                            }
                                            break;
                                        case "1":
                                        default:

                                            // 商品详情页连接
                                            if (item.to) {
                                                window.location.href = (this.mode == "prod") ? "https://managemall.cnlive.com/html/mall/1/#/pages/main/detail/detail?id=" + item.to + "&from=redirect" : "https://wjjshop.cnlive.com/html/mall/1/#/pages/main/detail/detail?id=" + item.to + "&from=redirect";
                                            }
                                    }
                                }
                                break;
                            case "5":		// WebView页 to Url地址
                            case "34":

                                // 跳转URL
                                if (item.to.trim()) {
                                    window.location.href = item.to.trim();
                                }
                                break;
                            case "12":		// 商城总分类 to  分类id   shop_type  1,2,3 级分类

                                // 跳转商品列表页面，带着参数，平台分类（groupid）
                                if (item.to) {


                                    // TODO


                                }
                                break;
                            case "14":		// 商城首页


                                // TODO


                                break;
                            case "20":		// 商城店铺分类 to  分类id   shop_type  1,2 级分类


                                // TODO


                                break;
                            case "21":		// 跳转店铺首页 to 店铺id shop_type 页面地址


                                // TODO


                                break;
                            case "24":      // 跳转达人个人主页连接，跟参数from=redirect

                                // 达人个人主页连接
                                if (item.to) {
                                    window.location.href = (this.mode == "prod") ? "https://managemall.cnlive.com/html/preferred-library/1/#/pages/darenProfile/darenProfile?id=" + item.to + "&from=redirect" : "https://wjjshop.cnlive.com/html/preferred-library/1/#/pages/darenProfile/darenProfile?id=" + item.to + "&from=redirect";
                                }
                                break;
                            case "25":      // 跳转达人动态详情页连接，跟参数from=redirect

                                // 达人动态详情页连接
                                if (item.id || item.to) {
                                    window.location.href = (this.mode == "prod") ? "https://managemall.cnlive.com/html/preferred-library/1/#/pages/darenProfileDynamicDetail/darenProfileDynamicDetail?id=" + (item.id || item.to) + "&from=redirect" : "https://wjjshop.cnlive.com/html/preferred-library/1/#/pages/darenProfileDynamicDetail/darenProfileDynamicDetail?id=" + (item.id || item.to) + "&from=redirect";
                                }
                                break;
                        }
                    } else {

                        // 判断是否需要跳转
                        if (item.id) {

                            // 判断跳转详情对应页面类型
                            switch (item.shop_type) {
                                case "2":


                                    // TODO


                                    break;
                                case "1":
                                default:


                                    // TODO


                            }
                        }
                    }
                }
            },

            /* 获取并设置唤起App参数 开始 */

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

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

					//  处理扩展参数转为字符串传参
					if (params.ext && typeof params.ext === "object") {
						this.$set(params, "ext", JSON.stringify(params.ext));
					}

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

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

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

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

					/* 设置唤起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]));
						}

						// 设置唤起App对象
						this.$set(this, "callApps", {
							funcs: {
								callApp: this.helper,
								callAppParams: this.schemeParams,
								callAppCallback: this.callAppModalCallback
							}
						});

						// 是否可以唤起App控制变量
						this.$set(this.isOpenApp, "value", true);
					} else {

                        // 清除唤起App参数
                        this.$set(this, "schemeParams", null);
                        this.$set(this, "callApps", null);
                        this.$set(this.isOpenApp, "value", false);
                    }

					/* 设置唤起App参数 结束 */

				}
			},

			/* 获取并设置唤起App参数 结束 */

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

            /**
			 * 获取并设置分享参数
             * @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内分享参数设置 结束 */

					}

					/* 设置微信分享参数 开始 */

					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 [成功回调选项]
             */
            callAppModal(options) {

                // 调用showModal层参数
                this.$set(this, "callAppModals", {
                    title: "",
                    message: "即将离开页面<br />打开网家家APP",
                    confirmButtonText: "允许",
                    confirmButtonCallback: this.callAppModalCallback,
                    showCancelButton: true,
                    cancelButtonText: "取消",
                    success: options.success,
                    success_params: options.success_params
                });

                // 显示唤起App浮层
                this.$refs.callAppModal.showLayer();
            },

            /**
             * 唤起App操作后回调
             */
            callAppModalCallback(options) {

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

					// 判断安卓或iOS，给出不同的图片
					// if (this.isiPhone.value && (this.isQQ.value || this.isWeChat.value)) {
					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);
                }
            },

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

            /**
             * 通用弹窗
             * @param {object} options [配置参数]
             */
            showModal(options) {

                // 调用showModal层参数
                this.$set(this, "showOptions", options);

                // 显示通用浮层
                this.$refs.showModal.showLayer();
            },

            /**
             * 通用弹窗回调
             */
            showModalCallback(options) {

                // 暂未使用

                // TODO

            },

            /**
             * 在线状态监听处理（online/offline）
             * @param {object} e [事件对象]
             */
            updateOnlineStatus(e) {

                // 修改onLine的值
                const { type } = e;
                this.$set(this, "onLine", (type === "online"));

                // 判断在线状态，给出提示
                if (this.onLine) {
                    Toast("网络连接恢复");
                } else {
                    Toast("网络异常，请检查网络");
                }
            },

            /**
             * App内，获取状态栏高度
             */
            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 {object} file [文件对象]
             * @param {object} ext [扩展参数]
             */
            imgPreview(file, ext) {

                // 定义变量
                let context = this;

                /* 定义文件名/文件类型 开始 */
                this.$set(this.files, {
                    name: "",
                    type: ""
                });
                this.$set(this.files, "name", file.name);
                this.$set(this.files, "type", file.type);
                /* 定义文件名/文件类型 结束 */

                // 初始化文件编码/图片方向对象
                this.$set(this, "headerImage", null);
                this.$set(this, "Orientation", null);

                // 去获取拍照时的信息，解决拍出来的照片旋转问题
                Exif.getData(file, function () {
                    context.Orientation = Exif.getTag(this, "Orientation");
                });

                // 检测是否支持FileReader
                if (!file || !window.FileReader) {
                    return;
                }

                if (/^image/.test(file.type)) {

                    // 创建一个reader
                    let reader = new FileReader();

                    // 将图片转成 base64 格式
                    reader.readAsDataURL(file);

                    // 读取成功后的回调
                    reader.onloadend = function () {

                        // 实例化图片对象
                        let result = this.result;
                        let img = new Image();
                        img.src = result;

                        // 判断图片是否大于500K，是就直接上传，反之压缩图片
                        if (this.result.length <= 500 * 1024) {
                            context.headerImage = this.result;
                            context.postImg(ext);
                        } else {
                            img.onload = function () {
                                let data = context.compress(img, context.Orientation);
                                context.headerImage = data;
                                context.postImg(ext);
                            };
                        }
                    };
                }
            },

            /**
             * 压缩图片
             * @param {object} img [待处理图片对象]
             * @param {int} Orientation [图片上传旋转值]
             */
            compress(img, Orientation) {

                // 初始化canvas对象
                let canvas = document.createElement("canvas");
                let ctx = canvas.getContext("2d");

                // 瓦片canvas
                let tCanvas = document.createElement("canvas");
                let tctx = tCanvas.getContext("2d");

                // let initSize = img.src.length;
                let width = img.width;
                let height = img.height;

                // 如果图片大于四百万像素，计算压缩比并将大小压至400万以下

                // 缩放比例
                let ratio;

                if ((ratio = (width * height) / 4000000) > 1) {

                    // 大于400万像素
                    ratio = Math.sqrt(ratio);
                    width /= ratio;
                    height /= ratio;
                } else {

                    // 等比不缩放
                    ratio = 1;
                }

                // 设置canvas宽高
                canvas.width = width;
                canvas.height = height;

                // 背景色
                ctx.fillStyle = "#fff";
                ctx.fillRect(0, 0, canvas.width, canvas.height);

                // 如果图片像素大于100万则使用瓦片绘制
                let count;

                if ((count = (width * height) / 1000000) > 1) {

                    // 超过100万像素;
                    count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片

                    // 计算每块瓦片的宽和高
                    let nw = ~~(width / count);
                    let nh = ~~(height / count);
                    tCanvas.width = nw;
                    tCanvas.height = nh;
                    for (let i = 0; i < count; i++) {
                        for (let j = 0; j < count; j++) {
                            tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
                            ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
                        }
                    }
                } else {
                    ctx.drawImage(img, 0, 0, width, height);
                }

                // 修复iOS上传图片的时候，被旋转的问题
                if (Orientation != "" && Orientation != 1) {

                    switch (Orientation) {
                        case 6: // 需要顺时针（向左）90度旋转
                            this.rotateImg(img, "left", canvas);
                            break;
                        case 8: // 需要逆时针（向右）90度旋转
                            this.rotateImg(img, "right", canvas);
                            break;
                        case 3: // 需要180度旋转
                            this.rotateImg(img, "right", canvas); // 转两次
                            this.rotateImg(img, "right", canvas);
                            break;
                    }
                }

                // 进行最小压缩
                let ndata = canvas.toDataURL("image/jpeg", 0.1);
                tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
                return ndata;
            },

            /**
             * 旋转图片
             * @param {object} img [图片对象]
             * @param {string} direction [旋转方向]
             * @param {object} canvas对象
             */
            rotateImg(img, direction, canvas) {

                // 最小与最大旋转方向，图片旋转4次后回到原方向
                const min_step = 0;
                const max_step = 3;

                if (img == null) {
                    return;
                }

                // img的高度和宽度不能在img元素隐藏后获取，否则会出错
                let height = img.height;
                let width = img.width;
                let step = 2;
                if (step == null) {
                    step = min_step;
                }
                if (direction == "right") {
                    step++;

                    //旋转到原位置，即超过最大值
                    step > max_step && (step = min_step);
                } else {
                    step--;
                    step < min_step && (step = max_step);
                }

                // 旋转角度以弧度值为参数
                let degree = (step * 90 * Math.PI) / 180;
                let ctx = canvas.getContext("2d");
                switch (step) {
                    case 0:
                        canvas.width = width;
                        canvas.height = height;
                        ctx.drawImage(img, 0, 0);
                        break;
                    case 1:
                        canvas.width = height;
                        canvas.height = width;
                        ctx.rotate(degree);
                        ctx.drawImage(img, 0, -height);
                        break;
                    case 2:
                        canvas.width = width;
                        canvas.height = height;
                        ctx.rotate(degree);
                        ctx.drawImage(img, -width, -height);
                        break;
                    case 3:
                        canvas.width = height;
                        canvas.height = width;
                        ctx.rotate(degree);
                        ctx.drawImage(img, -width, 0);
                        break;
                }
            },

            /**
             * 将base64字符串转成file对象
             * @param {string} dataurl [图片URL/base64编码]
             */
            dataURLtoFile(dataurl) {
                var arr = dataurl.split(","),
                    bstr = atob(arr[1]),
                    n = bstr.length,
                    u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }

                return new File([u8arr], this.files.name, {
                    type: this.files.type
                });
            },

            /**
             * 七牛云图片上传
             * @param {object} ext [扩展参数]
             */
            async postImg(ext) {

                // 设置返回参数，加上base64编码数据
                let files = {
                    content: this.headerImage,
                    file: this.dataURLtoFile(this.headerImage)
                };

                // 返回压缩后的文件数据
                if (typeof ext.postImgCallback === "function") {
                    ext.postImgCallback(files, ext);
                }
            }

            /* 图片上传压缩/旋转优化 结束 */

        },
        mounted () {

            // 网络由正常常到异常时触发
            window.addEventListener('online', this.updateOnlineStatus);
            window.addEventListener('offline', this.updateOnlineStatus);

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

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

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

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

                this.$nextTick(function(){

                    // 获取状态栏高度，等待App调用window["getStatusHeight"]
                    this.getStatusHeight();
                })
            }
        },
        beforeDestroy() {
            window.removeEventListener('online',  this.updateOnlineStatus);
            window.removeEventListener('offline', this.updateOnlineStatus);
        }
    }
</script>

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