lookcommon_course/pages_tool/pages/MobileHome/MobileHome.vue

<template>
    <view class="MH-box">
        <view class="pages-box">
            <view class="fs32 fc99">请输入您要查询的手机号码</view>
            <view class="inp-box">
                <input @input="mobileFun" class="inp" placeholder="手机号码" 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.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">
                <view class="pg-l fs32">区号：</view>
                <view class="pg-r fs32">{{ getdata.areacode }}</view>
            </view>
            <view class="pglist fc99">
                <view class="pg-l fs32">邮编：</view>
                <view class="pg-r fs32">{{ getdata.zip }}</view>
            </view>
            <view class="pglist fc99 bd-n">
                <view class="pg-l fs32">运营商：</view>
                <view class="pg-r fs32">{{ getdata.company }}</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            mobile: '',
            show: false,
            getdata: {
                province: '',
                city: '',
                areacode: '',
                zip: '',
                company: ''
            }
        };
    },
    onShareAppMessage: function () {},
    methods: {
        mobileFun: function (e) {
			this.mobile= e.detail.value;
        },

        getdataFun: function (e) {
            var that = this;
            uni.showLoading({
                title: '加载中'
            });
            var a = this.mobile;
            if (false === /^1[3|4|5|7|8][0-9]\d{8}$/.test(a)) {
                uni.showToast({
                    title: '输入不合法',
                    icon: 'none',
                    image: '/static/images/error.png',
                    duration: 2000
                });
                return false;
            }
            uni.request({
                url: 'https://apis.juhe.cn/mobile/get?phone=' + a + '&key=f4e95fef6e241a9964ee5230c5e618fd',
                data: {},
                header: {
                    'content-type': 'application/json'
                },
                success: function (e) {
                    uni.hideLoading();
                    if ('200' == e.data.resultcode) {
                       
						this.show=true;
						this.getdata=e.data.result;
                    } else {
                        uni.showModal({
                            title: '提示',
                            content: '查询失败',
                            success: function (e) {
								that.show=false;
                            }
                        });
                    }
                }
            });
        }
    }
};
</script>
<style>
@import './MobileHome.css';
</style>