toolbox/plugin/web/checkurl/index.html

{extend name="common/plugin_layout" /}
{block name="title"}{$plugin.title} - {:config_get('title')}{/block}
{block name="main"}
<div class="container-xl" id="app">
<div class="col-sm-12 col-md-10 col-xl-8 center-block">
    <div class="card card-preview">
        <div class="card-inner mt-3">
            <div class="nya-title nk-ibx-action-item progress-rating">
                <span class="nk-menu-text font-weight-bold">腾讯域名拦截查询</span>
            </div>
            <div class="form-group">
                <label class="form-label">请输入要查询的网址：</label>
                <div class="form-control-wrap">
                    <input type="text" v-model="input" placeholder="请输入要查询的网址" class="form-control form-control-lg" ref="input" autocomplete="off">
                </div>
            </div>
            <div class="row">
                <div class="col-6">
                    <button class="btn btn-dim btn-outline-info btn-block btn-lg card-link" @click="queryqq()" :disabled="query_disabled">
                        查询管家&QQ拦截
                    </button>
                </div>
                <div class="col-6">
                    <button class="btn btn-dim btn-outline-success btn-block btn-lg card-link" @click="query('wx')" :disabled="query_disabled">
                        查询微信拦截
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="card card-preview" v-show="showresult" style="display:none">
        <div class="card-inner mt-3">
            <div class="nya-title nk-ibx-action-item progress-rating">
                <span class="nk-menu-text font-weight-bold">查询结果</span>
            </div>
            <ul class="list-group">
                <li class="list-group-item" v-for="(item,index) in result_info"><b>{{index}}：</b><span v-html="item"></span></li>
            </ul>
        </div>
    </div>
</div>
</div>
{/block}
{block name="script"}
<script src="{$cdn_cdnjs}vue/2.6.14/vue.min.js"></script>
<script src="https://static.geetest.com/v4/gt4.js"></script>
<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
<script>
new Vue({
    el: '#app',
    data: {
        query_disabled: true,
        input: '',
        type: '',
        showresult: false,
        result_info: [],
        captcha: null,
        captcha1: null,
    },
    mounted() {
        this.$refs.input.focus();
        var that=this;
        initGeetest4({
            captchaId: "99b142aaece96330d0f3ffb565ffb3ef",
            product: 'bind',
            protocol: 'https://',
            riskType: 'ai',
        },function (captcha) {
            captcha.onReady(function(){
                that.query_disabled=false;
                that.captcha = captcha;
            }).onSuccess(function(){
                var result = captcha.getValidate();
                if (!result) {
                    layer.closeAll();
                    return alert('请先完成验证');
                }
                var data = { url: that.input, type: that.type};
                $.ajax({
                    url: '/api/{$plugin.alias}/query',
                    type: 'post',
                    dataType: 'json',
                    data: Object.assign(data, result),
                    cache: false,
                    success: function (data) {
                        layer.closeAll();
                        if(data.status=='ok'){
                            that.showresult = true;
                            that.result_info = data.data;
                            captcha.reset();
                        }else{
                            layer.alert(data.message, {icon: 5});
                            captcha.reset();
                        }
                    },
                    error: function () {
                        layer.closeAll();
                        layer.msg('服务器错误', {icon: 5});
                        captcha.reset();
                    }
                });
            }).onError(function(){
                alert('验证码加载失败，请刷新页面重试');
            })
        });

        var tcaptchaCallback = function(res){
            if (res.ret === 0) {
                layer.load(0, {shade:0.1});
                var data = { url: that.input, ticket: res.ticket, randstr: res.randstr};
                $.ajax({
                    url: '/api/{$plugin.alias}/queryqq',
                    type: 'post',
                    dataType: 'json',
                    data: data,
                    cache: false,
                    success: function (data) {
                        layer.closeAll();
                        if(data.status=='ok'){
                            that.showresult = true;
                            that.result_info = data.data;
                        }else{
                            layer.alert(data.message, {icon: 5});
                        }
                    },
                    error: function () {
                        layer.closeAll();
                        layer.msg('服务器错误', {icon: 5});
                    }
                });
            }else{
                layer.msg('请先完成验证',{time:800,icon:2});
            }
        }
        this.captcha1 = new TencentCaptcha('2046626881', tcaptchaCallback);
    },
    methods: {
        checkURL()
        {
            var url = this.input.trim();
            if (url.indexOf(" ")>=0){
                url = url.replace(/ /g,"");
            }
            if (url.toLowerCase().indexOf("http://")<0 && url.toLowerCase().indexOf("https://")<0){
                url = "http://"+url;
            }
            this.input = url;
        },
        query(type) {
            if(this.input.trim() == ''){
                layer.alert('要查询的网址不能为空');return;
            }
            this.checkURL();
            layer.load(0, {shade:0.1});
            this.type = type;
            this.captcha.showCaptcha();
        },
        queryqq(){
            if(this.input.trim() == ''){
                layer.alert('要查询的网址不能为空');return;
            }
            this.checkURL();
            this.captcha1.show();
        }
    },
})
</script>
{/block}