lookcommon_course/pages_tool/pages/IP/IP.vue

<template>
    <view class="ip-box">
        <view class="pages-box">
            <view class="fs32 fc99">请输入您要查询的IP地址</view>
            <view class="inp-box">
                <input @input="ipFun" class="inp" placeholder="例如：188.188.188.188" placeholderStyle="font-size:30rpx" />
                <view class="inpimg">
                    <image class="pagesimg" src="@/static/images/search.png"></image>
                </view>
            </view>
            <view class="btn-box">
                <button @tap="getdataFun" class="btn fs32">查 询</button>
            </view>
        </view>
        <view :class="'det-box ' + (show ? '' : 'dp-n')">
            <view class="pg-t fs36 fc99">详细信息</view>
            <view class="pglist fc99">
                <view class="pg-l fs32">国家：</view>
                <view class="pg-r fs32">{{ getdata.Country }}</view>
            </view>
            <view class="pglist fc99">
                <view class="pg-l fs32">省份：</view>
                <view class="pg-r fs32">{{ getdata.Province }}</view>
            </view>
            <view class="pglist fc99">
                <view class="pg-l fs32">城市：</view>
                <view class="pg-r fs32">{{ getdata.City }}</view>
            </view>
            <view class="pglist fc99 bd-n">
                <view class="pg-l fs32">运营商：</view>
                <view class="pg-r fs32">{{ getdata.Isp }}</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            ip: '',
            show: false,
            getdata: {
                Country: '',
                Province: '',
                City: '',
                Isp: ''
            }
        };
    },
    onShareAppMessage: function () {},
    methods: {
        ipFun: function (t) {
			this.ip=t.detail.value;
        },

        getdataFun: function (t) {
            var that = this;
            uni.showLoading({
                title: '加载中'
            });
            var e = this.ip;
            if ('' == e) {
                uni.showToast({
                    title: '输入不合法',
                    icon: 'none',
                    image: '/static/images/error.png',
                    duration: 2000
                });
                return false;
            }
            uni.request({
                url: 'https://apis.juhe.cn/ip/ipNew?ip=' + e + '&key=9a77a7c215a0b4dbdf2854fd2e02202c',
                data: {},
                header: {
                    'Content-Type': 'application/json'
                },
                success: function (t) {
                    uni.hideLoading();
                    if ('200' == t.data.resultcode) {
                        
						this.show=true;
						this.getdata=t.data.result;
                    } else {
                        uni.showModal({
                            title: '提示',
                            content: '查询失败',
                            success: function (t) {
								that.show=false;
                            }
                        });
                    }
                }
            });
        }
    }
};
</script>
<style>
@import './IP.css';
</style>