<template>
    <div class="hotVipV2-wrap">
        <!-- 头图 -->
        <div class="top-img"></div>
        <div class="scroll-wrap">
            <div class="scroll-box" >
                <div class="scroll-item" v-for="(item, index) in scrollArr" :key="index">{{item}}</div> 
            </div>
        </div>
         <!-- 手机号输入框 -->
         <div class="mid-box" >
            <div class="cls_div_phone_input">
                 <input class="cls_input_phone"  ref="phoneInput" v-model="mobile" type="tel" maxlength="11" placeholder="请输入手机号码">
            </div>
            <img class="cls_img_btn" @click="aiThreePay()" src="https://img.bnyer.cn/vip/vip-btn.gif">
           
            
            <!-- 隐私协议 -->
            <div class="privacy-box">
                <img v-if="!agreePrivacy" @click="clickAgreePrivacy()" src="https://ydsh0516.cjdsp.com/ydshh5s/static/images-gd/ic-select-not.png" class="selectBox"  />
                <img v-if="agreePrivacy"  @click="clickAgreePrivacy()" src="https://ydsh0516.cjdsp.com/ydshh5s/static/images-gd/ic-select.png" class="selectBox"  />

                我已阅读并同意下方活动规则、
                <span class="cls_sp_procotol_2" @click="goLookPrivacy()"> 隐私条款 </span>等协议
            </div>
             <!-- 资费 -->
             <div class="price" style="margin-top:0.05rem;">业务资费：19.9元/月 </div>
             
            
             <!-- <div class="price"></div> -->
        </div>
        <!-- 规则 -->
        <div class="rule-box">
            <div class="rule-icon">活动规则</div>
            <div class="rule-content">
                [商品名称] :惠点生活 <br/>
                [计费方式] : 支付宝连续包月<br/>
                [商品权益说明] :<br/>
                用户每月可领取腾讯视频月卡、爱奇艺月卡、优酷月卡、芒果TV月卡、哗哩哗哩大会员月卡、网易云音乐月卡、喜马拉雅会员月卡、知乎盐选会员月卡、饿了么会员月卡、百度网盘会员月卡中的任意一张。<br/>
                [领取方式]:<br/>
                本产品订购生效后，用户需要通过关注【次元意境】微信公众号，[会员福利 - 会员月月领] 入口及时领取权益，领取成功后1小时到账。凭订购手机号登录相应APP即可享受会员权益。<br/>
                 [注意事项]：<br/>
                1.权益领取成功后当月内不能进行退订、更改；<br/>
                2.订购生效后凭订购手机号可每月领取会员一次，不可结转与转赠，当月不领取则视为自动放弃当月领取资格；<br/>
                3.如您在权益充值未到账期间退订产品，将会导致权益充值失败。<br/>
                [退订方式]：<br/>
                进入支付宝APP---右下方“我的”---右上方的齿轮进入设置页面---点击“支付设置”---点击“免密支付/自动扣款”---选择“惠点生活”---点击“关闭服务”即可完成退订。<br/>
                [联系我们]：<br/>
                致电客服热线：19983417235，客服在线时间：9:00-18:00。
            </div>
        </div>

        
     
    </div>
</template>

<script>
import { Toast, Indicator } from "mint-ui";
export default {
    data() {
    return{
        scrollTop: 0,
        phoneFixed: false,
        mobile: '',
        lid: 0,
        channelType: null,
        canClick: true,
        showPop: false,
        agreePrivacy: false,
        appkey: null,
        scrollArr:[
            '151****2290已领取优酷视频会员',
            '135****7952已领取爱奇艺会员',
            '132****1506已领取腾讯视频会员',
            '189****7756已领取芒果TV会员',
            '180****6543已领取哔哩哔哩会员',
            '181****2234已领取网易云音乐会员',
            '134****8775已领取饿了么会员',
            '132****1355已领取喜马拉雅听书会员',
            '189****2293已领取百度网盘会员',
            '153****9412已领取知乎盐选会员',
            '172****5644已领取优酷视频会员',
            '185****7885已领取爱奇艺会员',
            '199****9877已领取腾讯视频会员',
            '175****7655已领取芒果TV会员',
            '156****3455已领取哔哩哔哩会员',
            '145****1135已领取网易云音乐会员',
            '175****2231已领取饿了么会员',
            '137****9122已领取喜马拉雅听书会员',
            '177****4277已领取百度网盘会员',
            '189****7952已领取知乎盐选会员',
        ],
     
    }
    },
    created(){
      document.documentElement.scrollTop = 0;
      document.title = "会员权益随心选";   
    },
    watch:{
        'mobile' : {
            handler(value) {
               this.checkPhone(value)
            }
        }
    },

    mounted() {
       this.getUrlParam()
    },


    methods: {
         // 同意隐私授权
         clickAgreePrivacy() {
            this.agreePrivacy = !this.agreePrivacy
        },
        goLookPrivacy() {
            window.open ("https://rights.bnyer.cn/#/privacy")
        },
        
        // 手机号居底
        handleScroll() {
            const scrollTop = window.scrollY || document.documentElement.scrollTop;
            if (scrollTop > this.scrollTop + 50) {
                this.phoneFixed = true;
            } else {
                this.phoneFixed = false;
            }
        },
        // 获取lid
        getUrlParam() {
            this.lid = this.$route.query.id;
            this.channelType = this.$route.query.type;
            console.log(this.lid);
            console.log(this.channelType);

            // if(this.channelType == 'llg') {
            //     this.getLLGAppKey()
            // } else {
            //     this.getAppKey()
            // }
            // ta
            if(this.lid == '1160') {
                this.getTAAppKey() 
            }
        }, 
        // ta
        getTAAppKey() {
            // this.appkey = location.search.replace(/^\?/, '') + location.hash.replace(/^\#/, '&')
            this.appkey = this.$route.query.a_oId;
        },
        // llg
        getLLGAppKey() {
            this.appkey = this.$route.query.llgclickid;
        },
        // gdt tt
        getAppKey() {
          this.appkey = "";

          let testNew = window.location.hash;
          let testsNew = decodeURIComponent(testNew);
          console.log(testsNew);
          this.union_site = ((testsNew || '').split("&")[1] || '').split("=")[1];

          var test = window.location.search;

          var tests = decodeURIComponent(test);

          var clickid;
          var dkey;

          if (tests.indexOf("?") != -1) {
            var str = tests.substr(1);
            var strs = str.split("&");
            console.log(strs,'打印strs');
            // console.log(strs);
            for (var i = 0; i < strs.length; i++) {
              // Request.push(strs[i].split("="))
              // console.log(strs[i].split("="));
              if (
                  strs[i].split("=")[0] == "clickid" ||
                  strs[i].split("=")[0] == "clickid " ||
                  strs[i].split("=")[1] == "clickid" ||
                  strs[i].split("=")[0] == "qz_gdt" ||
                  strs[i].split("=")[0] == "gdt_vid" ||
                  strs[i].split("=")[0] == "llgclickid"
              ) {
                clickid = strs[i].split("=")[1];
                // console.log(clickid);
                // console.log(clickid)
                this.appkey = clickid;
                console.log('打印this.appkey===',clickid,);
                // alert(this.appkey)
                // alert(this.appkey,"344444444444444444444444")
              }
              if (
                  strs[i].split("=")[0] == "adid" ||
                  strs[i].split("=")[0] == "adid "
              ) {
                dkey = strs[i].split("=")[1];
                // console.log(dkey, '0000000000000000000000')
                this.dkey = dkey;
                console.log(this.dkey);
                // alert(this.dkey,"566666666666666666666666")
              }
            }
          }
    //       console.log(this.appkey);
        },
      
        // 手机号末尾判断
        checkPhone(mobile) {
           if(mobile.length == 11) {
                this.agreePrivacy = true
                var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
                if (!myreg.test(this.mobile)) {
                    Toast('请输入正确的手机号')
                    return
                } else {
                    this.aiThreePay()
                }
           }
        },
        // 开通
        aiThreePay() {
            // 手机号校验
            if(this.mobile) {
                var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
                if (!myreg.test(this.mobile)) {
                    Toast('请输入正确的手机号')
                    return
                }
            } else {
                Toast('请输入正确的手机号')
                return
            }
            if(!this.agreePrivacy) {
                Toast('请阅读并同意隐私协议')
                return
            }
            // 防连点
            if(!this.canClick) return
            // 加载中
            Indicator.open('领取中...')
            this.canClick = false
            // 参数
            const data = {
                mobile: this.mobile,
                linkId: this.lid,
                openAddress: this.appkey,
                // channelType: this.channelType
            }
            this.axios({
                method: "post",
                url:"https://interface.bnyer.cn/alipay/signUp",
                //    url: `http://192.168.2.8:8086/alipay/signUp`,
                data: data
                }).then((res) => {
                    Indicator.close()
                    this.canClick = true
                    if(res.code == 0){
                        // 跳转支付宝
                        window.location.href = res.result
                    } else if (res.code == '10031') {
                        Toast('您当前已开通，请勿重复开通~')
                    } else if (res.code == '10033') {
                        // 黑名单用户
                        Toast('网络繁忙，请稍后再试~')
                    } else{
                        Toast('网络繁忙，请稍后再试~')
                    } 
                    
            })
        },
    }

      
}
</script>

<style lang="scss">
.mint-indicator-wrapper {
  z-index: 9999;
}
</style>

<style lang="scss" scoped>


.hotVipV2-wrap {
    width: 100%;
    height: auto;
    position: absolute;
    background-color: #e53c51;
    padding-bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    overflow-y: scroll;

   
    .top-img {
        background-image: url('https://img.bnyer.cn/vip/banner.jpg');
        background-size: 100% 100%;
        width: 100%;
        // height: 360px;
        height: 6.8rem;
    }



    .scroll-wrap {
        margin-top: 10px;
        width: 100%;
        // overflow: hidden;
        animation: 20s goleft linear infinite normal;
        @keyframes goleft {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(-100%);
            }
        }
        .scroll-box {
            // width: 5100px;
            width: auto;
            display: flex;
            

            .scroll-item {
                flex-shrink: 0;
                // width: 235px;
                display: inline-block;
                color: #fff;
                background-color: rgba($color: #000000, $alpha: 0.25);
                padding: 5px 25px;
                text-align: center;
                font-size: 0.25rem;
                border-radius: 25px;
                margin-right: 20px;
            }
        }
    }

    .fixed {
        position: fixed !important;
        bottom: 0rem !important;
        left: 0.16rem !important;
        right: 0;
        z-index: 100;
        transform: scale(0.8);
        margin-top: 0rem !important;
    }

    .mid-box {
        // z-index: 100;
        width: 87%;
        left: 0rem;
        right: 0rem;
        position: relative;
        margin-top: 0.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #fff;
     
        box-sizing: border-box;
        padding:35px 0px;
        border-radius: 10px;
        // box-sizing: border-box;

        .cls_div_phone_input {
            height: 1rem;
            width: 7rem;
            position: relative;
           
            .phone-icon {
                width: 0.6rem;
                position: absolute;
                top: 0.18rem;
                left: 1.1rem;
                z-index: 1;
            }
            .cls_input_phone {
                position: relative;
                left: 50%;
                transform: translateX(-50%);
                height: 1rem;
                width: 5.4rem;
                border-radius: 20px;
                padding-left: 20px;
                box-sizing: border-box;
                font-size: 0.32rem;
                font-weight: bold;
                // text-align: center;
                background-color: white;
                border: 2px solid red;
                
                // border: none;
            }
        }
        .cls_img_btn {
            margin-top: 0.2rem;
            position: relative;
            width: 5.2rem;
            // height: 1rem;
            // animation: btnScaleAnim 1s infinite;
            @keyframes btnScaleAnim {
                0%{
                    transform: scale(0.9);
                }
                50% {
                    transform: scale(1);
                }
                100% {
                    transform: scale(0.9);
                }
            }
        }
    }

    .price {
        // font-weight: bold;
        // margin-top: 0.25rem;
        text-align: center;
        color: rgba(0,0,0,0.9);
        font-size: 0.22rem;
    }

    .tips {
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        // margin-top: 0.25rem;
        // text-align: center;
        color: rgb(108, 1, 1);
        font-size: 0.22rem;
        margin-bottom: -0.2rem;
    }
  
    .privacy-box {
        color: rgba(0,0,0,0.9);

        margin-top: 0.2rem;
        // margin-bottom: 0.2rem;
        width: 100%;
        z-index: 1;
        // line-height: 0.25rem;
        text-align: center;
        // color: #fff6f3;
        font-size: 0.22rem;
        display: flex;
        align-items: center;
        justify-content: center;
        .selectBox {
            margin-right: 0.1rem;
            
            width: 0.26rem; 
            height: 0.26rem;
        }
        .cls_sp_procotol_2 {
            // margin-left: 0.1rem;
            // color: #fe7d4a;
            // font-weight: bold;
            // text-decoration: underline;
        }
    }

    

    .rule-box {
        margin-top: 0.7rem;
        position: relative;
        width: 87%;
        // height: 12rem;
        background-color: #fdf9e3;
        border-radius: 10px;
        padding: 30px 18px;
        box-sizing: border-box;
        .rule-icon {
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            // margin: 0 auto;
            // background-image: url('https://vediocnd.corpring.com/hotVIP/rule-icon.png');
            // background-size: 100% 100%;
            background-color: #ffc72c;
            border-radius: 25px;
            font-weight: bold;
            font-size: 0.38rem;
            padding: 8px 30px;
            display: inline-block;
            // width: auto;
            // width: 1.7rem;
            // height: 0.6rem;
        }
        .rule-content {
            margin-top: 30px;
            line-height: 15px;
            font-size: 0.26rem;
            line-height: 0.46rem;
            // color: #FFF;
        }
    }

}
</style>