查询手机号归属地

注意，该功能已经下架。

下架原因：在小程序上架审核时被拒，被拒原因（涉及收集、存储用户身份信息，平台暂不支持此功能，请修改）。

实现原理：在服务器端实现一个查询手机号归属地的接口，根据小程序端提交的用户输入的手机号，截取手机号前 7 位，从数据文件中查找归属地，并返回给前端。

wxml 文件

<view class="page">
  <form catchsubmit="formSubmit" catchreset="formReset">
    <view class="weui-form">
      <view class="weui-form__text-area">
        <h2 class="weui-form__title">手机号段所属地</h2>
        <view class="weui-form__desc">查询手机号段的所属地</view>
      </view>
      <view class="weui-form__control-area">
        <view class="weui-cells__group weui-cells__group_form">
          <view class="weui-cells__title">表单</view>
          <view class="weui-cells">

            <view class="weui-cell weui-cell_active">
              <view class="weui-cell__hd"><label class="weui-label">手机号</label></view>
              <view class="weui-cell__bd">
                <input class="weui-input" placeholder="填写待查询的手机号" placeholder-class="weui-input__placeholder" type="number" name="mobile" />
              </view>
            </view>
            <view class="weui-cell">
              <text style="word-break:break-all">{{content}}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="weui-form__tips-area">
        <view class="weui-form__tips">
          {{tips}}
        </view>
      </view>
      <view class="weui-form__opr-area">
        <button class="weui-btn weui-btn_default" aria-role="button" formType="reset">重置</button>
        <button class="weui-btn weui-btn_primary" aria-role="button" formType="submit">确定提交</button>
        <button class="weui-btn weui-btn_primary" aria-role="button" bindtap="clipData">复制到剪切板</button>
      </view>
    </view>
  </form>
</view>

js 文件

const utils = require("../../utils/utils.js");
const ohttp = require("../../utils/ostrichHttp");
const app = getApp();
Page({

    /**
     * 页面的初始数据
     */
    data: {
        content: '展示查询后的结果',
        tips: '',
    },

    formReset(e) {
        this.setData({
            tips: '',
        })
    },

    formSubmit(e) {
        const that = this;
        // const curpoints = app.getPoints();
        // if (curpoints < 1) {
        //     wx.showToast({
        //         title: '点数不足',
        //     })
        //     return
        // }
        let obj = e.detail.value
        if (utils.isEmpty(obj.mobile)) {
            that.setData({
                tips: '请填写待查询的手机号',
            })
            // 弹窗错误
            wx.showToast({
                title: '内容不能为空',
            })
            return
        }


        ohttp
            .httpGet("/imobile", {
                mobile: obj.mobile
            })
            .then((res) => {
                if (res.data.code === 1) {
                    console.log(res)

                    let province = res.data.data.Province
                    let city = res.data.data.City
                    let cardtype = res.data.data.CardType
                    that.setData({
                        content: `${province},${city}-${cardtype}`,
                        tips: '查询成功',
                    })
                    // app.cost1Points();
                    wx.showToast({
                        title: '查询成功',
                    })


                } else {
                    that.setData({
                        content: '展示查询后的结果',
                        tips: '未找到记录',
                    })
                    // 生成失败
                    wx.showToast({
                        title: '未找到记录',
                    })
                }
            });
    },


    clipData: function () {
        const that = this;
        if (that.data.content == '展示查询后的结果') {
            that.setData({
                tips: '请先进行查询',
            })
            // 弹窗错误
            wx.showToast({
                title: '请先查询',
            })
            return
        }
        wx.setClipboardData({
            data: that.data.content,
            success(res) {
                wx.getClipboardData({
                    success(res) {
                        wx.showToast({
                            title: '复制成功',
                        })
                    }
                })
            }
        })
    },
})

wxss 文件

button {
  margin-top: 8rpx;
}

.weui-label {
  width: 4.1em;
}