<template>
    <div class="recieveVip-wrap">
        <!-- <div class="top-img"></div> -->
      
        <!-- 权益列表 -->
        <div class="vip-box">
            <div class="get-title">请选择您要领取的权益：</div>
            <div class="sub-title">爆款会员月卡</div>

            <div class="vip-list">
                <div class="vip-item" v-for="(item, index) in vipList" :key="index" v-if="index < 10" @click="selectVip(index)">
                    <div class="vip-icon" :class="curVipIndex == index? 'active' : ''"
                    :style=" `background: url(${item.icon}) no-repeat;background-size: 100% 100%;`"></div>
                    <!-- <div class="vip-name">{{ item.name }}</div> -->
                </div>
            </div>
            <div class="sub-title">美团外卖5元券</div>
            <div class="mt-list">
                <div class="mt-item" v-for="(item, index) in vipList" :key="index" v-if="index == 10" @click="selectVip(index)">
                    <div class="mt-icon" :class="curVipIndex == 10? 'active' : ''"
                    :style=" `background: url(${item.icon}) no-repeat;background-size: 100% 100%;`"></div>
                    <!-- <div class="vip-name">{{ item.name }}</div> -->
                </div>
            </div>

        </div>
         <!-- 手机号输入框 -->
         <div class="mid-box" >
            <div class="cls_div_phone_input">
                <input class="cls_input_phone"  v-model="mobile" type="text" maxlength="11" placeholder="请输入您的手机号">
                <img class="phone-icon" src="https://img.bnyer.cn/vip/hotAIphone.png" alt="">
            </div>
            <img class="cls_img_btn" @click="clickMainButton()" src="https://image.ireadwo.cn/resources/yq-mtwm-20djj/btn-get.png">
        </div>
        <!-- 资费 -->
        <!-- <div class="price">业务资费：19.9元 / 月</div> -->
        <!-- 规则 -->
        <div class="rule-box">
            <div class="rule-icon">活动规则</div>
            <div class="rule-content">
                [产品名称] : 惠点联合会员 <br/>
                [计费方式] : 支付宝连续包月<br/>
                [权益说明] :<br/>
                活动期间开通业务，即可获得爆款会员月卡(10选1) +美团外卖20元代金券(每月领取5元代金卷，连续领取4个月)，数量有限，送完即止。<br/>
                [爆款会员月卡] :<br/>
                腾讯视频月卡、爱奇艺月卡、优酷月卡、芒果TV月卡、哗哩哗哩大会员月卡、网易云音乐月卡、喜马拉雅会员月卡、知乎盐选会员月卡、饿了么会员月卡、百度网盘会员月卡。<br/>
                [领取方式]:<br/>
                本产品订购生效后，用户需要通过关注【次元意境】微信公众号，[会员福利 - 会员月月领] 入口及时领取权益，领取成功后1小时到账。凭订购手机号登录相应APP即可享受会员权益。<br/>
                 [注意事项]：<br/>
                1.权益领取成功后当月内不能进行退订、更改；<br/>
                2.订购生效后凭订购手机号可每月领取会员一次，不可结转与转赠，当月不领取则视为自动放弃当月领取资格；<br/>
                3.如您在权益充值未到账期间退订产品，将会导致权益充值失败。<br/>
                [退订方式]：<br/>
                进入支付宝APP---右下方“我的”---右上方的齿轮进入设置页面---点击“支付设置”---点击“免密支付/自动扣款”---选择“惠点联合会员”---点击“关闭服务”即可完成退订。<br/>
                [联系我们]：<br/>
                致电客服热线：13258821507，客服在线时间：9:00-18:00。
            </div>
        </div>
        <div class="confirm-wrap" v-if="showPop">
            <div class="confirm-box">
                <div class="close-button" @click="isShowPop()">×</div>
                <div class="confirm-title">确认领取<br/>【{{ vipList[curVipIndex].name}}】吗？<br/><br/>
                领取手机号：{{ mobile }}</div>
                <div class="icon" :style=" `background: url(${vipList[curVipIndex].icon}) no-repeat;background-size: 100% 100%;`"></div>
                <div class="confirm-button" @click="receiveRights()">确认</div>
            </div>
        </div>
       
    </div>
</template>

<script>
import { Indicator, Toast } from "mint-ui";
export default {
    data() {
     return{
        curVipIndex: 0,
        mobile: '',
        showPop: false,
        canClick: true,
       
        vipList: [
            {
                name: '优酷黄金会员',
                icon: 'https://img.bnyer.cn/vip/youku.png',
                vipKey: '10000281'
            },
            {
                name: '爱奇艺黄金会员',
                icon: 'https://img.bnyer.cn/vip/aiqiyi.png',
                vipKey: '10000260'
            },
            {
                name: '腾讯视频VIP会员',
                icon: 'https://img.bnyer.cn/vip/tcenttv.png',
                vipKey: '10000224'
            },
            {
                name: '芒果TV全屏会员',
                icon: 'https://img.bnyer.cn/vip/mangotv.png',
                vipKey: '10000271'
            },
            {
                name: '哔哩哔哩大会员',
                icon: 'https://img.bnyer.cn/vip/bili.png',
                vipKey: '10000257'
            },
          
            {
                name: '网易云音乐黑胶VIP',
                icon: 'https://img.bnyer.cn/vip/wangyiyun.png',
                vipKey: '10000298'
            },
            {
                name: '饿了么超级会员',
                icon: 'https://img.bnyer.cn/vip/eleme.png',
                vipKey: '10000377'
            },
            {
                name: '搜狐视频会员月卡',
                icon: 'https://img.bnyer.cn/vip/ximalaya.png',
                vipKey: '10000253'
            },
           
            {
                name: '知乎盐选会员月卡',
                icon: 'https://img.bnyer.cn/vip/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230804224645.png',
                vipKey: '10000440'
            },
  
            {
                name: '百度网盘普通会员',
                icon: 'https://img.bnyer.cn/vip/baidu.png',
                vipKey: '10000437'
            },
            {   
                name: '美团外卖5元券',
                icon: '	https://p1.meituan.net/travelcube/7264ce9c25de2e464e3acd996fe8ad362803.png',
                 vipKey: '10000153'
            },
          
            
        ]
     }
    },
    created(){
      document.documentElement.scrollTop = 0;
      document.title = "联合会员";   
    },

    mounted() {
      
    },

    methods: {
        selectVip(index) {
            this.curVipIndex = index
            console.log(index);
        },
        isShowPop() {
            this.showPop = !this.showPop
        },
        clickMainButton() {
            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
            }
            this.isShowPop()
        },

        // 领取权益
        receiveRights(){
            
            Indicator.open('领取中...')

            // 查询余额
       
                        let parms = {
                            chargeAccountNumber: this.mobile,
                            skuId: this.vipList[this.curVipIndex].vipKey,
                            chargeAccountType:10
                        }

                        this.axios({
                            method: "post",
                            url: `https://interface.bnyer.cn/yunmei/directBuy`,
                            // url: `http://192.168.2.64:8086/yunmei/directBuy`,
                            data: parms
                            }).then((rsp) => {
                                
                                console.log(rsp);
                                if(rsp.code == 0) {

                                
                                if(rsp.res.code == '000000'){
                                Indicator.close();
                                this.isShowPop()
                                this.mobile = ''
                                this.curVipIndex = 0
                               
                                    Toast({
                                        message: "领取成功，充值过程存在一定延时，请稍后前往对应APP查看~",
                                    })
                                
                               
                            } else if(rsp.res.code == '10024' || rsp.res.code == '10026'){
                                Indicator.close();
                                this.isShowPop()
                                this.mobile = ''
                                this.curVipIndex = 0
                                Toast({
                                    message: "您暂无领取资格",
                                })
                            } else if(rsp.res.code == '10025'){
                                Indicator.close();
                                this.isShowPop()
                                this.mobile = ''
                                this.curVipIndex = 0
                                Toast({
                                    message: "您当月已领取过权益，请下月再来~",
                                })
                            } else {
                                Indicator.close();
                                this.isShowPop()
                                this.mobile = ''
                                this.curVipIndex = 0
                                Toast({
                                    message: "网络异常，请稍后再试~",
                                })
                            }
                        }else {
                            Indicator.close();
                            this.isShowPop()
                            this.mobile = ''
                            this.curVipIndex = 0
                            Toast({
                                message: "网络异常，请稍后再试~",
                            });
                        }
                       
                               
                                
                        })
                       
                        
                
            .catch((err)=>{
                Indicator.close();
                this.isShowPop()
                this.mobile = ''
                this.curVipIndex = 0
                Toast({
                    message: "系统错误，请联系客服~",
                });
            })
           
        },
    }
}
</script>

<style lang="scss" scoped>
.recieveVip-wrap {
    width: 100%;
    height: auto;
    position: absolute;
    background-color: #fc7e2a;
    padding-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    overflow-y: scroll;
    background-image: url('https://img.bnyer.cn/vip/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230901115742.png');
    background-size: 100% 13.35rem;
    background-repeat: no-repeat;
    // .top-img {
    //     width: 100%;
    //     height: 13.35rem;
    //     position: absolute;
    //     top: 0rem;
    //     left: 0rem;
    //     background-image: url('https://img.bnyer.cn/vip/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230901115742.png');
    //     background-size: 100% 100%;
    //     background-repeat: no-repeat;
    //     border-bottom: 5px solid rgb(255, 102, 0);

    // }

    .fixed {
        position: fixed !important;
        bottom: 0rem !important;
        left: 0;
        right: 0;
        // z-index: 100;
        transform: scale(0.8);
        margin-top: 0rem !important;
    }
  
    .confirm-wrap {
        // z-index: 100;
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.7);
    }
    .confirm-box {
        position: absolute;
        width: 80%;
        height: 7rem;
        border: 3px solid #f37151;
        background-color: rgb(244, 234, 222);
        border-radius: 10px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 20px 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        .close-button {
            font-size: 35px;
            position: absolute;
            right: 5px;
            top: -8px;
            color: #a73a1e;
        }
        .confirm-title {
            font-size: 16px;
            font-weight: bold;
            color: #a73a1e;
            text-align: center;
        }
        .icon {
            width: 2rem;
            height: 2rem;
            // background-color: #fb986e;
            border-radius: 8px;
        }
        .confirm-button {
            background: linear-gradient(#fb986e, #d7502f);
			width:4rem;
			height: 1rem;
			border-radius: 50px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 20px;
            font-weight: bold;
        }
    }
    .vip-box {
        margin-top: 3.1rem;
        width: 90%;
        height: auto;
        background-color: rgb(252, 242, 228);
        border-radius: 10px;
        padding: 15px;
        box-sizing: border-box;
        .get-title {
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 15px;
        }
        .sub-title {
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 10px;
            
        }
        .vip-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            // align-items: center;
            .active {
                border: 5px solid #dc5100;
            }
            .vip-item {
                width: 18%;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-bottom: 10px;
                .vip-icon {
                    // border-radius: 5px;
                    width: 100%;
                    height: 1.11rem;
                    background-color: #fff;
                    margin-bottom: 4px;
                    box-sizing: border-box;
                }
                .vip-name {
                    width: 100%;
                    text-align: center;
                    white-space: wrap;
                    font-size: 10px;
                    line-height: 12px;
                }
            }
        }
        .mt-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;

            // align-items: center;
            .active {
                border: 5px solid #dc5100;
            }
            .mt-item {
                width: 18%;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-bottom: 10px;
                .mt-icon {
                    // border-radius: 5px;
                    width: 100%;
                    height: 1.11rem;
                    background-color: #fff;
                    margin-bottom: 4px;
                    box-sizing: border-box;
                }
                .vip-name {
                    width: 100%;
                    text-align: center;
                    white-space: wrap;
                    font-size: 10px;
                    line-height: 12px;
                }
            }
        }
    }

    .mid-box {
        // z-index: 100;
        left: 0rem;
        right: 0rem;
        position: relative;
        margin-top: 0.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;

        .cls_div_phone_input {
            height: 1rem;
            width: 7rem;
            position: relative;
            .phone-icon {
                width: 0.6rem;
                position: absolute;
                top: 0.27rem;
                left: 0.8rem;
                // z-index: 1;
            }
            .cls_input_phone {
                position: relative;
                left: 50%;
                transform: translateX(-50%);
                height: 1.1rem;
                width: 5rem;
                border-radius: 50px;
                padding-left: 1.5rem;
                font-size: 0.4rem;
                background-color: white;
                border: none;
            }
        }
        .cls_img_btn {
            margin-top: 0.4rem;
            position: relative;
            width: 5.2rem;
            // height: 1.6rem;
            // animation: btnScaleAnim 1s infinite;
            @keyframes btnScaleAnim {
                0%{
                    transform: scale(0.9);
                }
                50% {
                    transform: scale(0.95);
                }
                100% {
                    transform: scale(0.9);
                }
            }
        }
    }

    .price {
            text-align: center;
            color: #fff;
            font-size: 11px;
    }
    .rule-box {
        margin-top: 0.3rem;
        position: relative;
        width: 100%;
        // height: 12rem;
        // background-color: #f37151;
        border-radius: 5px;
        padding: 12px 30px;
        box-sizing: border-box;
        // border-top: 5px solid rgb(255, 102, 0);
        .rule-icon {
            margin-top: 0.6rem;

            text-align: center;
            font-size: 0.32rem;
            color: #FFF;
            // background-image: url('https://img.bnyer.cn/vip/rule-icon.png');
            // background-size: 100% 100%;
            // width: 1.7rem;
            // height: 0.6rem;
        }

        .rule-content {
            margin-top: 10px;
            // line-height: 15px;
            font-size: 0.22rem;
            color: #FFF;
        }
        
    }

}
</style>