<template>
    <div class="changshi" id="temp">
        <div class="banner">
            <img src="./img/bannerHy.jpg" alt="">
        </div>
        <div class="inputBox">
            <input v-model="phone" class="input" type="text" @input="inpChange" maxlength="11" placeholder="请输入联通号码">
        </div>
        <div class="btnBox" @click="btnClick">
            <div class="btnText">
                立即开通
            </div>
        </div>
        <div class="contentBox3">
            <img src="./img/quanyi.png" alt="">
        </div>
        <div class="contentBox1">
            <div class="title"><img src="./img/product.png" alt=""></div>
            <div class="main">
                <p>1.资费：用户订购后按25元/月收取（按自然月份在每月初进行扣费)，订购后立即生效，次月自动续订。</p>
                <p>2.权益一：本产品包含：10GB/月专属流量，8款APP共享(腾讯视频、爱奇艺、优酷、芒果TV、哔哩哔哩、PP视频、PP体育、搜狐视频），订购成功后将自动充值到账。</p>
                <p>权益二：本产品包含30+款会员权益，每月任意挑选其二，会员权益不定期更新。</p>
                <p>3.权益领取：订购成功后会收到短信提醒，或打开微信搜索微信小程序“联通畅视”-我的-绑定订购号码-首页领取会员即可。</p>
                <p>4.本产品为中国联通用户专享，在订购时请保证电话畅通不欠费。</p>
                <p>5.查询本产品流量剩余或其他疑问可通过微信公众号“联通畅视”获取帮助。</p>
                <p>6.免流量费注意事项：订购成功用户，当月可享受腾讯视频、爱奇艺、优酷、芒果TV、哗哩哔哩、PP视频、PP体育、搜狐视频8个客户端合计10GB的定向流量免流，超出部分的流量，將消耗用户套内、套外流量。
                </p>
            </div>
        </div>
        <div class="bottom">京ICP备17006367号-3</div>
        <!-- 订购超时 -->
        <van-overlay :show="showTimeout" :duration="0.1" @click="showTimeout = false">
            <div class="timeout-modal modal" @click.stop>
                <div>中国联通正在努力为您开通，</div>
                <div>请以收到开通成功的短信为准。</div>
                <div>感谢您的耐心等待！</div>
                <div class="btn" @click="showTimeout = false">确认</div>
            </div>
        </van-overlay>
    </div>
</template>
<script>
    import axios from 'axios'
    import util from '../../util'
    import {
        Toast
    } from "vant";
    export default {
        data() {
            return {
                iframeUrl: process.env.VUE_APP_IFAMRE,
                param: {
                    cpid: 'changshi',
                    spid: '99144187',
                    channel: "boyuan",
                    channeltype: "1",
                    timestamp: "",
                    clienttype: "3",
                    sign: "",
                    phone: "",
                    theme: "",
                    version: "1.0.0",
                    servicephone: "",
                },
                phone: "",
                user: "",
                iframe: {},
                isFrame: false,
                showTimeout: false,
                apiQuery: {},
                harf: 'https://v.wo186.tv/a/proapi/h5'
                // harf: 'https://test.wo186.tv/TJtest/host/api/h5'
                // harf: 'https://operationimg.mige.tv'

            }
        },
        created() {
            document.title = "流量会员包"
            // this.apiQuery = this.$route.query
            this.apiQuery = util.query2obj(location.search)
            // this.test()
        },
        mounted() {
            var that = this
            // 统一认证监听
            window.addEventListener('message', e => {
                this.isFrame = false;
                try {
                    var data = JSON.parse(e.data);
                    switch (data.resultcode) {
                        case "0": //处理成功
                            this.onMessageSuccess(data);
                            break;
                        case "0001": //auth_no无效
                        case "0003": //client_id不存在
                        case "4444": //服务暂时不可用（系统忙/系统队列满）
                        case "9001": //关闭H5认证页面
                            that.iframe.remove();
                            that.$toast(res.data);
                            break;
                        default:
                            that.$toast(res.data)
                            break;
                    }
                } catch (e) {}
            }, false);
        },
        methods: {
            openIframe() {
                var that = this
                that.isFrame = true
                this.$toast.loading({
                    message: '请求中...'
                });
                let now = Date.now()
                that.param.timestamp = now
                if (that.phone) {
                    that.param.phone = that.phone
                }
                that.param.sign = that.$md5(this.param.cpid + now + '!QAZ2wsx')
                let iframe = document.createElement('iframe');
                let bodyDom = document.getElementById('temp');
                iframe.id = 'iframe'
                iframe.classList.add('iframe')
                iframe.src = that.iframeUrl
                bodyDom.insertBefore(iframe, bodyDom.lastChild)
                this.iframe = iframe
                iframe.onload = function () {
                    iframe.contentWindow.postMessage(JSON.stringify(that.param), that.iframeUrl)
                    that.$toast.clear();
                }
            },
            async onMessageSuccess(data) {
                this.user = decodeURIComponent(data.userid)
                this.iframe.remove();

                let updata = {
                    cpid: this.param.cpid,
                    spid: this.param.spid,
                    productId: '64',
                    channelKey: '0d91c7dd88f6',
                    token: data.token,
                    type: '0',
                    userid: decodeURIComponent(data.userid),
                    needJoinActivity: 0,
                    fromSource: "订购页",
                    anonymousId: this.$sensors.store._state.$device_id,
                    testId: this.$store.state.testId,
                    testGroupId: this.$store.state.testGroupId,
                }
                Toast.loading({
                    message: '加载中',
                    forbidClick: true,
                    duration: 10000
                });
                // axios.post(this.harf + '/a/proapi/h5/handle', updata)
                axios.post(this.harf + '/handle', updata)
                    .then(res => {
                        Toast.clear()
                        if (res.data.code === 10000) {
                            this.$toast.success('订购成功');
                            // setTimeout(() => {
                            //     this.giveMember()
                            // }, 1500)
                            this.postApi()
                        } else if (res.data.code === 999) {
                            this.showTimeout = true
                            this.postApi()
                        } else {
                            this.$toast.fail({
                                message: res.data.message
                            })
                        }
                    })
            },
            inpChange(e) {
                if (/^1[3456789]\d{9}$/.test(this.phone) && this.isFrame === false) {
                    setTimeout(() => {
                        this.openIframe()
                        e.srcElement.blur()
                    }, 100)

                }
            },
            btnClick() {
                if (this.phone === "") {
                    this.$toast('手机号不能为空!')
                } else {
                    if (/^1[3456789]\d{9}$/.test(this.phone)) {
                        this.openIframe()
                    } else {
                        this.$toast('请输入正确手机号!')
                    }
                }
            },
            postApi() {
                let nowTime = new Date().getTime()
                let params = {
                    event_type: "form",
                    context: {
                        ad: {
                            callback: this.apiQuery.clickid
                        },
                        // properties:{
                        //     pay_amount:1.234, //合法采纳
                        //     "pay_amount":"1.234", // 可以被转型成浮点型，合法采纳
                        //     "pay_amount":true ,//非法不采纳
                        //     "pay_amount":"some string", // 非法不采纳
                        //     "pay_amount":1234, //可以被转型成浮点型，合法采纳
                        //     "pay_amount":"1234",//可以被转型成浮点型，合法采纳
                        // }
                    },
                    timestamp: nowTime
                }
                axios({
                    method: "post",
                    headers: {
                        'Content-Type': 'application/json;charset=UTF-8'
                    },
                    // url: this.harf + "/a/proapi/h5/eventmgr",
                    url: this.harf + "/eventmgr",
                    data: params,

                })
                    .then(res => {
                        console.log(res)
                    })
                    .catch(err => {
                        console.error(err);
                    })
            },
            // 直接领取会员
            giveMember() {
                let requestUrl = this.harf + '/joinActivity'
                let updata = {
                    activeType: '89',
                    userid: this.user,
                    channelKey: '0d91c7dd88f6',
                    isCompositeProduct: 0,
                };
                axios({
                    method: 'post',
                    url: requestUrl,
                    data: updata
                }).then((res) => {
                    this.$toast.success('会员领取成功');
                }, (response) => {
                    this.$toast(response.message);
                })
            },
            test() {
                let params = {
                    channelKey: "0d91c7dd88f6"
                }
                // axios.get(this.harf + '/a/proapi/h5/detailByKey', {
                axios.get(this.harf + '/detailByKey', {
                    params: params
                })
                    .then(res => {
                        console.log(res)
                    })
                    .catch(err => {
                        console.error(err);
                    })
            },

        }


    }
</script>
<style lang='scss'>
    .changshi {
        background-color: #042B85;
        color: #0d0d0d;
        min-height: 100vh;
        font-family: PingFang SC;
        width: 100vw;
        overflow-x: hidden;

        @keyframes scale {
            from {
                transform: scale(1);
            }

            to {
                transform: scale(0.8);
            }
        }


        .iframe {
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            z-index: 9999;
        }

        .banner {
            width: 100%;
            height: 668px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .inputBox {
            width: 603px;
            height: 91px;
            background: #FFFFFF;
            border-radius: 46px;
            margin: 18px auto 0 auto;
            box-sizing: border-box;
            padding-left: 44px;
            padding-right: 44px;

            .input {
                width: 100%;
                margin: 0;
                padding: 0;
                border: none;
                outline: none;
                height: 100%;
                font-size: 29px;

                font-family: HYQiHei;
                font-weight: bold;
                color: #B0ACAC;
                opacity: 0.7;
                line-height: 79px;
            }
        }

        .btnBox {
            width: 516px;
            height: 96px;
            margin: 30px auto 40px auto;
            border-radius: 35px;
            animation-name: scale;
            animation-duration: 0.3s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            animation-direction: alternate-reverse;

            .btnText {
                width: 100%;
                height: 100%;
                border-radius: 48px;
                text-align: center;
                line-height: 96px;
                font-size: 50px;
                font-family: HYQiHei;
                font-weight: bold;
                background: linear-gradient(#F9F3DB, #FBD657);
                // box-shadow: 0px 3px 6px 0px rgba(255, 255, 255, 0.64);
                color: #F60F0B;

            }
        }

        .contentBox1 {
            width: 638px;
            // height: 1184px;
            background: #0131A0;
            border-radius: 20px;
            margin: 0 auto;
            margin-bottom: 68px;
            color: #ffffff;
            padding: 40px 38px 50px 40px;
            box-sizing: border-box;

            .title {
                width: 394px;
                height: 68px;
                margin: 0 auto;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .main {
                margin-top: 40px;

                p {
                    margin-top: 15px;
                    line-height: 35px;
                }
            }

            img {
                width: 100%;
                height: 100%;
            }


        }

        .contentBox3 {
            width: 638px;
            /*height: 1184px;*/
            /*background: #0131A0;*/
            /*border-radius: 20px;*/
            margin: 0 auto;
            margin-bottom: 68px;
            /*color: #ffffff;*/
            padding: 40px 38px 50px 40px;
            /*box-sizing: border-box;*/

            img {
                width: 100%;
                height: 100%;
            }


        }

        .bottom {
            width: 100%;
            font-size: 16px;
            color: gray;
            text-align: center;
            padding-bottom: 30px;
        }

        .timeout-modal {
            padding: 60px 40px;
            font-size: 28px;
            line-height: 50px;
            text-align: center;
            color: #222222;

            .btn {
                width: 160px;
                line-height: 60px;
                margin: 50px auto 0;
                border-radius: 8px;
                background-color: #1876bc;
                color: #fff;
            }
        }

        .modal {
            box-sizing: border-box;
            position: absolute;
            left: 50%;
            top: 333px;
            transform: translateX(-50%);
            width: 530px;
            background-color: #fff;
            border-radius: 8px;

            .close {
                width: 80px;
                height: 80px;
                position: absolute;
                bottom: -130px;
                left: 50%;
                transform: translateX(-50%);
            }

            .top {
                width: 100%;
                height: 96px;
            }

            .logo {
                width: 92px;
                height: 50px;
                position: absolute;
                top: 22px;
                left: 37px;
            }
        }

    }
</style>
