llpt_orderchannel-s1h5/douyin/rbt15/202204/js/main.js

import * as compnt from "../../../../public/js/compnt.js";
import * as unicom from "../../../../public/js/unicom.js";

import "../scss/main.scss";
var douyinProductId = "2021073002"
var flowproductid = "2018072301"
compnt.showLoading();
var $douyinItem = $($('.biao_a').find('.tu')[0]);
var $baiduItem = $($('.biao_a').find('.tu')[1]);
$douyinItem.unbind('click').on('click', function(e) {
    orderPageProductChange(douyinProductId)
        // $douyinItem.addClass('abb');
    $(".main").css("display", "block")
    $(".biao_a").css("display", "block")
        // $('#majors').attr('id', 'btn-order')
        // $baiduItem.removeClass('abc');
    $(".mains").css("display", "none")
    $(".biao_bb").css("display", "none")
        // $('#major').attr('id', 'btn-order')
        // btn-order
})
$baiduItem.unbind('click').on('click', function() {
    orderPageProductChange(flowproductid)
        // $douyinItem.removeClass('abb');
    $(".main").css("display", "none")
    $(".biao_a").css("display", "none")
        // $('#btn-order').attr('id', 'majors')
        // $baiduItem.addClass('abc');
    $(".mains").css("display", "block")
    $(".biao_bb").css("display", "block")
        // $('#major').attr('id', 'btn-order ')
})
var $douyinItems = $($('.biao_bb').find('.tu')[0]);
var $baiduItems = $($('.biao_bb').find('.tu')[1]);
$douyinItems.unbind('click').on('click', function(e) {
    orderPageProductChange(douyinProductId)
        // $douyinItems.addClass('abb');
    $(".main").css("display", "block")
    $(".biao_a").css("display", "block")
        // $('#majors').attr('id', 'btn-order')
        // $baiduItems.removeClass('abc');
    $(".mains").css("display", "none")
    $(".biao_bb").css("display", "none")
        // $('#major').attr('id', 'btn-order')
        // btn-order
})
$baiduItems.unbind('click').on('click', function() {
    orderPageProductChange(flowproductid)
        // $douyinItems.removeClass('abb');
    $(".main").css("display", "none")
    $(".biao_a").css("display", "none")
        // $('#btn-order').attr('id', 'majors')
        // $baiduItems.addClass('abc');
    $(".mains").css("display", "block")
    $(".biao_bb").css("display", "block")
        // $('#major').attr('id', 'btn-order ')
})


$('#tiu').unbind('click').on('click', function() {
    unicom.showCancelReasonPage().done(function(cancelReason) {
        doShowCancelPage(cancelReason)
    })
})

function doShowCancelPage(cancelReason) {
    var k = JSON.stringify(cancelReason)
    window.localStorage.setItem('kye', k)
        // https://800.wo.cn
        // window.location.href = "https://800.wo.cn/orderchannel/douyin/poly/cancel.html?fes=jh9&sou=26&pid=2018072301"; 
    window.location.href = "http://100.0.4.69:3344/orderchannel/douyin/poly/cancel.html?fes=jjh&sou=33&pid=2018072301";
}

compnt.showLoading();
//alert('开始初始化')
unicom.init().then(function(response) {
    compnt.hideLoading();
    unicom.product = response.product[0];
    unicom.fesname = response.festival;
    //    alert('页面初始化完成')
    findRbtMvs();
    bindEvent();

    if (location.href.indexOf('/cancel') >= 0) {
        unicom.burypointLogId('110002'); // 退订页面pv, pv去重得到uv
        WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'open', ea: 'cancel_open' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })
    } else if (location.href.indexOf('/draw') >= 0) {
        unicom.burypointLogId('110003'); // 领取页面pv, pv去重得到uv
        WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'open', ea: 'draw_open' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })
    } else if (location.href.indexOf('/flow') >= 0) {
        unicom.burypointLogId('110004'); // 流量查询pv, pv去重得到uv
        WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'open', ea: 'flow_open' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })
    } else if (location.href.indexOf('/active') >= 0) {
        unicom.burypointLogId('110005'); // 激活页面pv, pv去重得到uv
        WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'open', ea: 'active_open' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })
    } else if (location.href.indexOf('/refund') >= 0) {
        unicom.burypointLogId('110006'); // 退款
    } else {
        unicom.burypointLogId('110001'); // 订购页面pv, pv去重得到uv
        WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'open', ea: 'order_open' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })
    }
})



function orderPageProductChange(productid) {
    // console.log(productid)
    if (unicom.products[productid] == null) {
        return;
    }
    unicom.product = unicom.products[productid];

    // if (productid == flowproductid) {
    //     $('body').addClass('body-9')
    //     $('.banner-text').addClass('banner-text-9')

    // } else {
    //     $('body').removeClass('body-9')
    //     $('.banner-text').removeClass('banner-text-9')
    // }

    // if (window.location.href.indexOf('/index') >= 0) {
    //     // 记录当前选择的是哪个产品，等从退订页面返回到订购页面的时候，还能选择同样的产品
    //     localStorage.setItem('pid', productid);
    //     localStorage.setItem('pidtime', new Date().getTime())

    // }
}




function bindEvent() {
    $('#btn-order').unbind('click').on('click', function() {
        if (!compnt.lockClick()) {
            return;
        }
        doOrder(null);
    })

    $('#open-agr').unbind('click').on('click', function() {
        showDialogAgr();
    })
}

function doOrder(ringid) {
    unicom.showCapPage().then(function(data) {
        compnt.unlockClick();
        order(data.userid, data.token, data.usermob, ringid || unicom.query.ringid);
    }).fail(function(response) {
        compnt.unlockClick();
    })

    WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'order_click_order_btn' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })
}

function showCancelPage($parentDialog) {
    $parentDialog && $parentDialog.hide();

    unicom.showCancelReasonPage().done(function(cancelReason) {
        doShowCancelPage(cancelReason)
    }).fail(function() {

    });

    function doShowCancelPage(cancelReason) {
        var $overlay = $('<div class="overlay"></div>');
        var $dialog = $(
            '<div class="fixed-center sms-form section-login"' +
            '    <div class="sms-form">' +
            '        <div class="form-group">' +
            '            <div class="input-row">' +
            '                <input class="usermob" type="tel" maxLength="11" name="phone" placeholder="请输入您的手机号码" />' +
            '            </div>' +
            '            <div class="input-row">' +
            '                <input class="smscode" type="tel" maxLength="6" name="sms" placeholder="请输入验证码">' +
            '                <span class="sendcode">获取验证码</span>' +
            '            </div>' +
            '        </div>' +
            '        <div class="actions">' +
            '            <div class="btn btn-primary cancel">取消</div>' +
            '            <div class="btn btn-info okay">确认</div>' +
            '        </div>' +
            '    </div>' +
            '</div>');

        $overlay.appendTo($(document.body))
        $dialog.appendTo($(document.body))

        $('body').css('overflow', 'hidden')
        $dialog.close = function() {
            $overlay.remove();
            $dialog.remove();
            $parentDialog && $parentDialog.show();
            $("body").css("overflow", "auto");
        }

        $dialog.find('.cancel').unbind('click').on('click', function() {
            $dialog.close()
        })

        $dialog.find('.sendcode').unbind('click').on('click', function() {
            unicom.sendSms($dialog, 'cancellogin');
            WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'cancel_click_send_sms_code_btn' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })
        })

        $dialog.find('.okay').unbind('click').on('click', function() {
            compnt.showLoading();
            unicom.checkCode($dialog).done(function() {
                compnt.hideLoading();
                $dialog.close();
                showConfirm('您确定退订视频彩铃包吗？', function() {
                    doCancel($dialog, $parentDialog, cancelReason)
                });
            }).fail(function(data) {
                compnt.hideLoading();
            })

            WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'cancel_click_confirm_btn' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })

            return $dialog;
        });

        WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'cancel_open' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })
    }
}

function doCancel($dialog, $parentDialog, cancelReason) {
    compnt.showLoading();
    unicom.cancel(null, null, cancelReason.canceltype, cancelReason.cancelmsg).done(function(response) {
        compnt.hideLoading();

        switch (response.resultCode) {
            case "0000":
                showAlertDialog('退订成功');
                $dialog.close();
                $parentDialog.close();
                WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'cancel_success' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })

                break;
            case "7605": //应该是已经退订了吧，因此不需要在重复退订啦
                compnt.showAlert(response.errorInfo);
                $dialog.close();
                $parentDialog.close();
                WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'cancel_failure' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })

                break;
            default:
                var prefix = '';
                if (response.errorInfo.indexOf('退订失败') < 0) {
                    prefix = '退订失败，';
                }
                compnt.showAlert(prefix + response.errorInfo);
                WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'cancel_failure' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })

                break;
        }
    }).fail(function(data) {
        compnt.hideLoading();
    })
}

function findRbtMvs() {
    findRbtMvss().then(function(data) {
        //        alert('列表加载完成')
        window.rbtMvList = JSON.parse(data).data;
        window.rbtMvListLength = JSON.parse(data).data.length;
        for (var i = 0; i < window.rbtMvList.length; i++) {
            window.rbtMvList[i]['shown'] = '0';
        }
        showRbtMvs();
    }).fail(function(response) {

    })
}

function findRbtMvss(productid) {
    var param = {
        "productid": productid,
        "fog": 'df3958be828815ec18613612fa1e7a55e6077a33cfc0098b64a25eeabaa4e118b806cbda3b123edf230cca1bb4d81cfab6cfb4426a44c74048fd613bddd4165c96a3672b793a9ed13fd22c1057f475dfeb62d61cdd6e1c116fb001ce236ffa65dd6c41c5537ae6a7ecac4570319f817bc2c17a86c5d024d9aa920aff9f1e2f48f129289fd6713b56956a922787dd184a124f7f1c16f64a6d6e2e9e7241ed51ebd6ad5c0c0af844ce616567bf6867b64b'
    }
    return $.ajax({
        url: root + "-s1api" + '/rbtmv/findRbtMvs',
        type: "POST",
        contentType: "application/json",
        data: JSON.stringify(param)
    });
}

function showRbtMvs(label) {
    $('#rbt-item-box').empty();
    var labelMap = {};
    for (var i = 0; i < window.rbtMvList.length; i++) {
        if (labelMap[window.rbtMvList[i].label] == null) {
            labelMap[window.rbtMvList[i].label] = '其它';
        }
    }
    // 重排序，使热门排在第一个
    var labelList = []
    $.each(labelMap, function(item, i) {
        if (item == '热门') {
            labelList[labelList.length] = labelList[0];
            labelList[0] = item;
        } else {
            labelList[labelList.length] = item;
        }
    })

    $.each(labelList, function(i, item) {
            var $item = $('<div id="' + item + '" class="item" total="0" showcount="0" oldshowcount="0">' + item + '</div>');

            if (label == null && item == '热门') {
                $item.addClass('item-active');
                label = '热门';
            }

            $item.on('click', function(event) {
                if ($(event.target).hasClass('item-active')) {
                    return;
                }

                // 删除以前选择的
                $('#rbt-item-box .item-active').removeClass('item-active');

                $(event.target).addClass('item-active');
                $(event.target).attr("showcount", "0"); //用于翻页
                $(event.target).attr("oldshowcount", "0");
                $('#rbtmv-container').attr('scrollTop', 0);
                $('#rbtmv-content').empty();
                for (var i = 0; i < window.rbtMvList.length; i++) {
                    window.rbtMvList[i]['shown'] = '0';
                }
                showRbtMvsBody($(event.target).html());
            })

            for (var i = 0; i < window.rbtMvList.length; i++) {
                if (window.rbtMvList[i].label == item) {
                    var total = $item.attr("total");
                    $item.attr("total", parseInt(total) + 1);
                }
            }

            $item.appendTo($('#rbt-item-box'));


        })
        //    alert('标题加载完成')
    showRbtMvsBody(label);
}

function showRbtMvsBody(label) {
    for (var i = 0; i < window.rbtMvList.length; i++) {
        if (window.rbtMvList[i].label == label) {
            var total = parseInt($('#' + label).attr("total"));
            var showcount = parseInt($('#' + label).attr("showcount"));
            var oldshowcount = parseInt($('#' + label).attr("oldshowcount"));
            if (showcount == oldshowcount + 6) {
                $('#' + label).attr("oldshowcount", showcount);
                break;
            }
            if (window.rbtMvList[i]['shown'] == '1') {
                continue;
            }

            $('#' + label).attr("showcount", showcount + 1);
            window.rbtMvList[i]['shown'] = '1';

            var $item = $(
                '<div class="rbt-item">' +
                '    <div class="rbt-main" src="' + window.rbtMvList[i].videUrl + '" poster="' + window.rbtMvList[i].coverUrl +
                '" contentid="' + window.rbtMvList[i].contentid + '" contentname="' + window.rbtMvList[i].contentname + '">' +
                '       <img class="rbt-cover" src="' + window.rbtMvList[i].coverUrl + '">' +
                '       <img class="rbt-play" src="v1/images/icon-play.png">' +
                '       <div class="btn btn-setting">设为彩铃</div>' +
                '    </div>' +
                '    <div class="rbt-title">' + window.rbtMvList[i].contentname + '</div>' +
                '</div>');

            $item.find('.rbt-play').unbind('click').on('click', function(event) {
                var videoUrl = $(event.target).parent().attr('src');
                var poster = $(event.target).parent().attr('poster');
                var ringid = $(event.target).parent().attr('contentid');
                var ringname = $(event.target).parent().attr('contentname');
                showDialogPreview(videoUrl, ringid, ringname, poster);
            });

            $item.find('.btn-setting').on('click', function() {
                var ringid = $(event.target).parent().attr('contentid');
                var ringname = $(event.target).parent().attr('contentname');
                setting(ringid, ringname);
            });

            $item.appendTo($('#rbtmv-content'));

            // 已经显示到底了
            if (total == showcount + 1) {
                var $dom = $('<div class="no-more"><div class="line"></div><div class="title">已经到底啦</div><div class="line"></div></div>')
                $dom.appendTo($('#rbtmv-content'))
            }
        }
    }
}

function setting(ringid, ringname) {
    if (ringid == null || ringid.trim() == "") {
        compnt.showAlert("请选择一个视频彩铃！");
        return;
    }
    var user = unicom.loadUserInfo();

    if (user != null && user.userid != null) {
        queryOrderStatusForSetting(user.userid, null, ringid, ringname);
    } else {
        showDialogMobile(ringid, ringname);
    }
}

function settingExecutor(ringid, ringname) {
    var usermob = unicom.user.usermob.substr(0, 3) + 'xxxx' + unicom.user.usermob.substr(7, 4);
    var message = '确认设置“' + ringname + '” 为' + usermob + '的视频彩铃吗？';
    showConfirm(message, function() {
        compnt.showLoading();
        unicom.setting(ringid).done(function(data) {
            compnt.hideLoading();
            if (data.resultCode == "0000") {
                showAlertDialog('设置成功')
                WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'draw_success' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })

            } else {
                compnt.showAlert(data.errorInfo);
                WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'draw_failure' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })

            }

            WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'draw_click_confirm_btn' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })
        });
    })
}

function showDialogMobile(ringid, ringname) {
    var $overlay = $('<div class="overlay"></div>');
    var $dialog = $(
        '<div class="fixed-center section-setting">' +
        '    <div class="content">' +
        '        <div class="form-group">' +
        '            <input class="mobile" maxLength="11" type="tel" placeholder="输入联通手机号码">' +
        '        </div>' +
        '    </div>' +
        '    <div class="actions">' +
        '        <div class="btn btn-lg btn-primary">去设置</div>' +
        '    </div>' +
        '</div>');

    $overlay.appendTo($(document.body))
    $dialog.appendTo($(document.body))

    $dialog.close = function() {
        $overlay.remove();
        $dialog.remove();
    }

    $dialog.find('.btn').on('click', function(event) {
        var mobile = $dialog.find('.mobile').val();

        if (mobile == null || mobile.length != 11) {
            compnt.showAlert('请输入正确的手机号码！');
            return;
        }
        $dialog.close();
        queryOrderStatusForSetting(null, mobile, ringid, ringname);
    })

    $overlay.on('click', function() {
        $dialog.close();
    })

    return $dialog;
}

function queryOrderStatusForSetting(userid, mobile, ringid, ringname) {
    unicom.loadUserInfo();
    if (unicom.user != null && unicom.user.userid != null && (
            unicom.user.orderStatus == "0000" ||
            unicom.user.orderStatus == "0001")) {
        settingExecutor(ringid, ringname);
        return;
    }

    compnt.showLoading();
    unicom.queryOrder(userid, mobile).then(function(data) {
        compnt.hideLoading();

        switch (data.resultCode) {
            case "0000": //订购
            case "0001": //退订
                if (unicom.user != null && unicom.user.userid != null) {
                    unicom.user.orderStatus = data.resultCode;
                    unicom.saveUserInfo();
                }

                if (userid) {
                    settingExecutor(ringid, ringname)
                } else {
                    showDialogSmsCode(mobile, ringid, ringname);
                }

                break;
            case "9201":
                showConfirm('您未订购视频彩铃包产品', function() {
                    //                        alert(ringid)
                    doOrder(ringid);
                    //                        $('#btn-order').trigger('click');
                }, '取消', '去订购');
                break;
            default:
                compnt.showAlert(data.errorInfo);
                break;
        }

        return;
    })
}

function showDialogPreview(videUrl, ringid, ringname, poster) {
    var $dialog = $(
        '<div class="section-preview">' +
        '    <div class="content">' +
        '        <div class="close"><span>《</span>返回</div>' +
        '        <video src="' + videUrl + '" poster="' + poster + '"></video>' +
        '        <div class="play"></div>' +
        '        <div class="dail"></div>' +
        '        <div class="setting">设为视频彩铃</div>' +
        '        <a class="must-know" href="https://m.10155.com/h5/mactivity/terminal.html">设置须知</a>' +
        '    </div>' +
        '</div>');

    $dialog.appendTo($(document.body))

    $dialog.close = function() {
        $dialog.remove();
    }

    var $video = $dialog.find('video');
    var $playIcon = $dialog.find('.play');
    $video.on('play', function() {
        $playIcon.css('display', 'none')
    });

    $video.on('pause', function() {
        $playIcon.css('display', 'block')
    });

    $video.on('ended', function() {
        $playIcon.css('display', 'block')
    });

    $video.on('click', function() {
        if ($video.prop('paused')) {
            $video[0].play();
        } else {
            $video[0].pause();
        }
    });

    $playIcon.on('click', function() {
        $video[0].play()
    });

    $dialog.find('.setting').on('click', function() {
        setting(ringid, ringname, $dialog);
    })

    $dialog.find('.close').on('click', function() {
        $dialog.close();
    })

    return $dialog;
}

function showDialogAgr() {
    var $overlay = $('<div class="overlay"></div>');
    var $dialog = $(
        '<div id="section-agr" class="section-agr">' +
        '     <div class="agr-title">' +
        '         <div class="close"></div>' +
        '     </div>' +
        '     <div class="agr-content">' +
        '         <div class="title">活动说明</div>' +
        '         <div class="content">' +
        '             <ul>' +
        '                 <li>1.活动时间：2022年4月1日—2022年6月30日；</li>' +
        '                 <li>2.活动期间按照15元/月扣除手机话费，订购成功后可享首月返10元话费，当月不退订，次月续订可再返5元话费；成功订购且符合活动规则，返还话费将于10个工作日内充值至订购号码（联通预付费用户，不参与此次赠送话费活动）；</li>' +
        '                 <li>3.活动期间，每个用户只可参与一次优惠活动；</li>' +
        '                 <li>4.该产品为续订类产品，次月自动续订，按自然月扣费，产品资费15元/月，包含15GB专属定向流量及抖音视频彩铃服务。</li>' +
        '             </ul>' +
        '         </div>' +
        '         <div class="title">业务说明</div>' +
        '         <div class="content">' +
        '             <ul>' +
        '                 <li>1.符合订购约定的中国联通手机4G、5G套餐（除智慧沃家等部分融合套餐）用户均可订购“抖音视频彩铃定向流量月包”。手机套餐中流量资费、流量使用规则另有约定的，按照手机套餐执行；</li>' +
        '                 <li>2.全国共享组合套餐、智慧沃家成员用户、全国套餐主副卡等共享类套餐用户订购，仅限该成员使用，其他成员不可共享，需单独订购；</li>' +
        '                 <li>3.达量限速套餐用户订购本产品，包内定向流量不提升原套餐限速阈值和网速，不能作为限速后解限的加速包使用，依然执行基础套餐限速阈值的约定；</li>' +
        '                 <li>4.该产品内定向流量仅限当月使用，未使用部分不能延续、累加至次月及以后各月使用，且服从联通套餐流量封顶统一限制；</li>' +
        '                 <li>5.请在UNINET、3GNET 、WONET手机接入点环境下访问使用，其他接入点将无法正常使用定向流量；</li>' +
        '                 <li>6.用户成功订购该产品后即可正常使用无需激活，如遇页面提示当前为非WIFI环境，请注意流量消耗，敬请忽略；</li>' +
        '                 <li>7.关于产品使用过程中有任何疑问可咨询联通客服：10010。</li>' +
        '                 <li>8.对我们有任何意见和建议，点此<a href="https://account.bol.wo.cn/v2/feedback?clientId=directflow2021073001" style="color: #266cd6">反馈</a>。</li>' +
        '             </ul>' +
        '         </div>' +

        '         <div class="title">流量说明</div>' +
        '         <div class="content">' +
        '             <ul>' +
        '                   <li>1.定向流量适用范围包含：抖音短视频、今日头条、西瓜视频、火山小视频、多闪、懂车帝、图虫、皮皮虾、海豚股票、海豚财富、gogokid、轻颜、好好学习、飞聊、时光相册、半次元、飞书、激萌、番茄畅听APP使用；</li>' +
        '                   <li>2.定向流量适用范围不包含：发起直播及上传视频；第三方提供的广告、视频、图片；下载/缓存客户端及第三方链接视频所产生的流量；</li>' +
        '                   <li>3.用户订购抖音视频彩铃定向流量月包后，将优先消耗抖音视频彩铃定向流量月包内流量，定向流量包用罄后，再消耗用户套餐内流量；</li> ' +
        '                   <li>4.若您的套餐（如蚂蚁宝卡、阿里宝卡、钉钉宝卡或工商银行e卡等）流量使用范围包含头条系相关产品，将优先使用套餐内的专属定向流量，用罄后即消耗该产品包内的定向流量。</li> ' +
        '             </ul>' +
        '         </div>' +

        '         <div class="titles">视频彩铃说明</div>' +
        '         <div class="content">' +
        '             <ul>' +
        '                   <li>备注：视频彩铃功能开通是设置/订购视频彩铃的前提，如果用户不支持视频彩铃功能开通，则无法设置/订购视频彩铃。</li>' +
        '                   <li>(1)中国联通手机4G、5G套餐用户（其中5G腾讯王卡用户入网第三个月起）可以享受抖音视频彩铃服务；</li>' +
        '                   <li>(2)部分省分4G/5G联通用户如有一号多端IVPN服务，则不支持视频彩铃功能开通，即不支持视频彩铃业务使用；目前已有24个省分已支持一号多端IVPN服务同时使用视频彩铃业务，包括河南、湖北、浙江、四川、海南、河北、山东、山西、上海、江苏、福建、北京、江西、辽宁、吉林、内蒙古、广东、天津、湖南、贵州、陕西、广西、黑龙江、西藏;</li>' +
        '                   <li>(3)订购该产品用户可通过抖音APP客户端进入视频彩铃专区，享受音视频彩铃不限次设置服务，同时可通过页面进行彩铃DIY；</li>' +
        '                   <li>(4)成功设置视频彩铃后，其他人拨打已订购该产品的设备电话时，Ta就能看到已设置的视频；</li>' +
        '                   <li>(5)该产品中的抖音视频彩铃仅支持适配终端使用，适配手机终端型号可在温馨提示的视频彩铃说明中查看；</li>' +
        '                   <li>(6)成功设置视频彩铃后，他人来电时看到已订购该产品设备的视频彩铃有2个条件：①Ta的终端支持播放中国联通视频彩铃；②Ta开通了VoLTE网络并拨打您电话时处于VoLTE网络下，手机信号显示HD或5G（手机设置—移动网络—移动数据—volte高清通话，打开volte高清通话并编辑短信“DGVOLTE”至10010免费开通）；注：仅支持联通用户间拨打观看；</li>' +
        '                   <li>(7)手机终端型号支持拨打呈现视频彩铃适用机型可通过关注“沃音乐”微信公众号发送“终端”进行查询或点击链接<a class="a_a" href="https://m.10155.com/h5/mactivity/terminal.html">https://m.10155.com/h5/mactivity/terminal.html</a>了解适配机型。</li>' +
        '             </ul>' +
        '         </div>' +

        '     </div>' +
        '     <div class="action">' +
        '         <div class="btn cancel">退订入口</div>' +
        '     </div>' +
        '</div>');

    $overlay.appendTo($(document.body))
    $dialog.appendTo($(document.body))

    $('body').css('overflow', 'hidden')
    $dialog.close = function() {
        $overlay.remove();
        $dialog.remove();
        $("body").css("overflow", "auto");
    }

    $dialog.hide = function() {
        $overlay.css('display', 'none');
        $dialog.css('display', 'none');
    }

    $dialog.show = function() {
        $overlay.css('display', 'block');
        $dialog.css('display', 'block');
    }

    $dialog.find('.close').unbind('click').on('click', function() {
        $dialog.close()
    })

    $dialog.find('.cancel').unbind('click').on('click', function() {
        $dialog.close();
        showCancelPage($dialog)
    })

    return $dialog;
}

function showDialogSmsCode(mobile, ringid, ringname) {
    var $overlay = $('<div class="overlay"></div>');
    var $dialog = $(
        '<div class="fixed-center section-setting">' +
        '    <div class="content">' +
        '        <div class="form-group">' +
        '            <input type="hidden" class="usermob" value="' + mobile + '">' +
        '            <input class="code smscode" maxLength="6" type="tel" placeholder="输入联通验证码">' +
        '            <input class="send sendcode" type="button" value="发送验证码">' +
        '        </div>' +
        '    </div>' +
        '    <div class="actions">' +
        '        <div class="btn close">取消</div>' +
        '        <div class="btn btn-primary login">确认</div>' +
        '    </div>' +
        '</div>');

    $overlay.appendTo($(document.body))
    $dialog.appendTo($(document.body))

    $dialog.find('.close').unbind('click').on('click', function() {
        $dialog.close()
    })

    $dialog.find('.sendcode').on('click', function() {
        unicom.sendSms($dialog, 'drawlogin');
        WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'draw_click_send_sms_code_btn' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })
    })

    $dialog.find('.login').on('click', function() {
        compnt.showLoading();
        unicom.checkCode($dialog).done(function() {
            compnt.hideLoading();
            unicom.saveUserInfo();
            $dialog.close();
            settingExecutor(ringid, ringname);
        }).fail(function() {
            compnt.hideLoading();
        })
    })

    $dialog.find('.sendcode').trigger('click');

    $('body').css('overflow', 'hidden')
    $dialog.close = function() {
        $overlay.remove();
        $dialog.remove();
        $dialog = null;
        $('body').css('overflow', 'auto')
    }

    return $dialog;
}

function showAlertDialog(message) {
    var $overlay = $('<div class="overlay"></div>');
    var $dialog = $(
        '<div class="fixed-center section-setting section-alert">' +
        '    <div class="content">' +
        '        <div class="status">' +
        '            <div class="status-icon"></div>' +
        '            <span class="status-name">' + message + '</span>' +
        '        </div>' +
        '    </div>' +
        '    <div class="actions">' +
        '        <div class="btn btn-lg btn-primary">知道了</div>' +
        '    </div>' +
        '</div>');

    $overlay.appendTo($(document.body))
    $dialog.appendTo($(document.body))

    $dialog.find('.btn').unbind('click').on('click', function() {
        $dialog.close()
    })

    $dialog.close = function() {
        $overlay.remove();
        $dialog.remove();
        $dialog = null;
        $('body').css('overflow', 'auto')
    }

    $('body').css('overflow', 'hidden')

    return $dialog;
}

function showConfirm(message, handler, cancelLabel, okayLabel) {
    var $overlay = $('<div class="overlay"></div>');
    var $dialog = $(
        '<div class="fixed-center section-message">' +
        '    <div class="content">' + message + '</div>' +
        '    <div class="actions">' +
        '        <div class="btn close btn-primary">' + (cancelLabel || "取消") + '</div>' +
        '        <div class="btn okay btn-info">' + (okayLabel || '确认') + '</div>' +
        '    </div>' +
        '</div>');

    $overlay.appendTo($(document.body))
    $dialog.appendTo($(document.body))

    $dialog.find('.close').unbind('click').on('click', function() {
        $dialog.close()
    })

    $dialog.find('.okay').unbind('click').on('click', function() {
        handler && handler();
        $dialog.close();
    })

    $dialog.close = function() {
        $overlay.remove();
        $dialog.remove();
        $dialog = null;
    }

    return $dialog;
}

/**
 * 订购
 */
function order(userid, token, usermob, ringid) {
    compnt.showLoading('处理中，请稍后...');
    unicom.order(userid, token, usermob, ringid).done(function(response) {
        compnt.hideLoading();
        switch (response.resultCode) {
            case "0000": //订购成功！跳转到领取会员页面
                unicom.saveUserInfo();
                showAlertDialog('订购成功');
                WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'order_success' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) });
                return;
            case "0013":
                compnt.showAlert('该号码归属省分2/3G暂未开通此产品！');
                WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'order_failure' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) });
                break;
            case "6611":
                compnt.showAlert('错误代码（6611），订购失败，请重试！');
                WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'order_failure' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) });
                break;
            case "6615":
                compnt.showAlert('订购失败，请确定用户套餐！');
                WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'order_failure' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) });
                break;
            case "6622": // 用户已订购过此产品！跳转到流量查页面
                // localStorage.setItem('message', '您已经订购了本产品~');
                compnt.showAlert('您已经订购了本产品~')
                unicom.saveUserInfo();
                WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'order_failure' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) });
                break;
            default:
                compnt.showAlert(response.errorInfo + '，订购失败，请确定用户套餐！');
                WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'order_failure' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) });
                break;
        }
    }).fail(function(error) {
        compnt.hideLoading();
        console.log(error);
    });
}

$('#rbtmv-container').on('touchmove', function(event) {
    if ($('#rbtmv-content').height() + $('#rbtmv-content').scrollTop() >= $('#rbtmv-container').height()) {
        showRbtMvsBody($('.item-active')[0].id);
    }
})

$('#rbtmv-container').on('touchstart', function(event) {
    if ($('#rbtmv-content').height() + $('#rbtmv-content').scrollTop() >= $('#rbtmv-container').height()) {
        showRbtMvsBody($('.item-active')[0].id);
    }
})

var t1 = 0;
var t2 = 0;
let timer = null;
$('#rbtmv-content').on('scroll', function(event) {
    clearTimeout(timer)
    timer = setTimeout(isScrollEnd, 100)
    t1 = $('#rbtmv-content').scrollTop()
})

function isScrollEnd() {
    t2 = $('#rbtmv-content').scrollTop();
    if (t2 == t1) {
        clearTimeout(timer)

        if ($('#rbtmv-content').height() + $('#rbtmv-content').scrollTop() >= $('#rbtmv-container').height() - 200) {
            showRbtMvsBody();
        }
    }
}