IP小卡片

src/views/port/port/index.vue

@@ -5,10 +5,19 @@
         <span>手机号查询归属地</span>
         <el-button style="float: right; padding: 3px 0" type="text">购买</el-button>
       </div>
-      <span>{{'列表内容 '  }}</span>
-      <span>{{'列表内容 '  }}</span>
-      <span>{{'列表内容 '  }}</span>
-      <span>{{'列表内容 '  }}</span>
+      <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
+        <el-form-item placeholder="请输入手机号">
+          <el-input v-model="formLabelAlign.tel"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <button @click="getPhonePlace">查询</button>
+        </el-form-item>
+      </el-form>
+      <span>省份：{{this.formLabelAlign.province}}</span><br>
+      <span>城市：{{this.formLabelAlign.city}}</span><br>
+      <span>区号：{{this.formLabelAlign.areacode}}</span><br>
+      <span>邮编：{{this.formLabelAlign.zip}}</span><br>
+      <span>运营商：{{this.formLabelAlign.company}}</span>
     </el-card>
     <el-card class="box-card">
       <div slot="header" class="clearfix">
@@ -33,14 +42,32 @@ export default {
   data() {
     //这里存放数据"
 
-    return {};
+    return {
+      formLabelAlign:{
+        province:"",
+        city:"",
+        areacode:"",
+        zip:"",
+        company:"",
+      },
+    };
   },
   //计算属性 类似于data概念",
   computed: {},
   //监控data中的数据变化",
   watch: {},
   //方法集合",
-  methods: {},
+  methods: {
+    getPhonePlace(){
+      getPhonePlace().then((res)=>{
+        this.formLabelAlign.province=res.data.province;
+        this.formLabelAlign.city=res.data.city;
+        this.formLabelAlign.areacode=res.data.areacode;
+        this.formLabelAlign.zip=res.data.zip;
+        this.formLabelAlign.company=res.data.company;
+      })
+    }
+  },
   //生命周期 - 创建完成（可以访问当前this实例）",
   created() {
   },