接口列表

src/api/port/port/index.js

@@ -34,6 +34,6 @@ export function updateConnector(data) {
 export function phonePlace(tel) {
   return request({
     url: '/port/list/phonePlace?tel='+tel,
-    method: 'get'
+    method: 'GET'
   })
 }

src/views/port/port/employee.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-row :gutter="50">
-      <el-col :span="7" v-for="connector in connectorList" v-if="connectorList.length !== 0">
+      <el-col :span="7" v-for="connector in connectorList" :key="connector.connectorId" v-if="connectorList.length !== 0">
         <el-card class="box-card" style="margin-top: 15px;width: 500px; height: 600px;" shadow="hover">
           <div slot="header" class="clearfix">
             <h1 style="font-weight: bold">{{connector.connectorName}}</h1>
@@ -14,24 +14,50 @@
           <span style="font-weight: bold;font-size: 20px">价格：</span>
           {{connector.connectorPrice}}/次<br>
 
-          <el-button type="primary" style="float: right; padding: 10px 10px" @click="dialogFormVisible=true" v-if="connector.connectorName=='手机号查询归属地'">测试</el-button>
+          <el-button type="primary" style="float: right; padding: 10px 10px" @click="testPhone()" v-if="connector.connectorName=='手机号查询归属地'">测试API</el-button>
-          <el-button type="primary" style="float: right; padding: 10px 10px" @click="buyIP(connector)" v-if="connector.connectorName=='IP查询归属地'">测试</el-button>
+          <el-button type="primary" style="float: right; padding: 10px 10px" @click="testIP(connector)" v-if="connector.connectorName=='IP查询归属地'">测试</el-button>
-          <el-button type="primary" style="float: right; padding: 10px 10px" @click="buyNews(connector)" v-if="connector.connectorName=='新闻头条'">测试</el-button>
+          <el-button type="primary" style="float: right; padding: 10px 10px" @click="testNews(connector)" v-if="connector.connectorName=='新闻头条'">测试</el-button>
-          <el-button type="primary" style="float: right; padding: 10px 10px" @click="buyWeather(connector)" v-if="connector.connectorName=='气象预警'">测试</el-button>
+          <el-button type="primary" style="float: right; padding: 10px 10px" @click="testWeather(connector)" v-if="connector.connectorName=='气象预警'">测试</el-button>
-          <el-button type="primary" style="float: right; padding: 10px 10px" @click="buyBirthdate(connector)" v-if="connector.connectorName=='生辰助手'">测试</el-button>
+          <el-button type="primary" style="float: right; padding: 10px 10px" @click="testBirthdate(connector)" v-if="connector.connectorName=='生辰助手'">测试</el-button>
-          <el-button type="primary" style="float: right; padding: 10px 10px" @click="buyMailbox(connector)" v-if="connector.connectorName=='邮编查询'">测试</el-button>
+          <el-button type="primary" style="float: right; padding: 10px 10px" @click="testMailbox(connector)" v-if="connector.connectorName=='邮编查询'">测试</el-button>
         </el-card>
       </el-col>
     </el-row>
-
+<!--    手机号查询归属地-->
     <el-dialog title="手机查询归属地" :visible.sync="dialogFormVisible">
       <el-form :model="formInline">
         <el-form-item label="手机号" :label-width="formLabelWidth">
           <el-input v-model="formInline.tel" autocomplete="off"></el-input>
         </el-form-item>
+        <span style="font-weight: bold;font-size: 20px" v-if="formInline.reason==true">
+        省份：{{this.formInline.province}}<br>
+        城市：{{this.formInline.city}}<br>
+        区号：{{this.formInline.areacode}}<br>
+        邮编：{{this.formInline.zip}}<br>
+        运营商：{{this.formInline.company}}<br>
+        </span>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="buyPhone(tel)">测试</el-button>
+        <el-button type="primary" @click="phonePlace()">发起请求</el-button>
+      </div>
+    </el-dialog>
+
+    <!--IP查询归属地-->
+    <el-dialog title="IP查询归属地" :visible.sync="dialogFormVisible1">
+      <el-form :model="formInline">
+        <el-form-item label="IP" :label-width="formLabelWidth">
+          <el-input v-model="formInline.tel" autocomplete="off"></el-input>
+        </el-form-item>
+        <span style="font-weight: bold;font-size: 20px" v-if="formInline.reason==true">
+        省份：{{this.formInline.province}}<br>
+        城市：{{this.formInline.city}}<br>
+        区号：{{this.formInline.areacode}}<br>
+        邮编：{{this.formInline.zip}}<br>
+        运营商：{{this.formInline.company}}<br>
+        </span>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="phonePlace()">发起请求</el-button>
       </div>
     </el-dialog>
   </div>
@@ -53,8 +79,19 @@ export default {
     return {
       connectorList:[],
       form:{},
-      formInline:{},
+      // 手机号查询归属地formInline
+      formInline:{
+        tel:"",
+        province:"",
+        city:"",
+        areacode:"",
+        zip:"",
+        company:"",
+        reason:"",
+      },
+      // IP查询归属地
       dialogFormVisible:false,
+      dialogFormVisible1:false,
     };
   },
   //计算属性 类似于data概念",
@@ -70,13 +107,20 @@ export default {
   watch: {},
   //方法集合",
   methods: {
-    buyPhone(tel){
+    testPhone(tel){
-      getPhonePlace(tel).then((res)=>{
+      this.formInline.tel=tel;
-        console.log(111);
+      this.dialogFormVisible=true;
+    },
+    phonePlace(){
+      phonePlace(this.formInline.tel).then((res)=>{
         console.log(res.data);
-        alert(res.msg);
         if (200==res.code){
-
+          this.formInline.province=res.data.province;
+          this.formInline.city=res.data.city;
+          this.formInline.areacode=res.data.areacode;
+          this.formInline.zip=res.data.zip;
+          this.formInline.company=res.data.company;
+          this.formInline.reason=true;
         }
       })
     },