From 6d37054cfcccbfec163681d9cd2f7a66ac1c901f Mon Sep 17 00:00:00 2001
From: chaiyapeng <3535863041@qq.com>
Date: Fri, 23 Aug 2024 21:38:26 +0800
Subject: [PATCH] =?UTF-8?q?IP=E5=B0=8F=E5=8D=A1=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/port/port/index.vue | 39 +++++++++++++++++++++++++++++------
 1 file changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/views/port/port/index.vue b/src/views/port/port/index.vue
index 92b56f1..54e0826 100644
--- a/src/views/port/port/index.vue
+++ b/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() {
   },