1、前端工具页面查询身份证功能实现

ruoyi-ui/src/api/business/openapi/apitools.js

@@ -25,3 +25,12 @@ export function getHistoryToday() {
     method: 'get',
   })
 }
+
+
+//获取身份证信息
+export function getIdCardQuery(idCard) {
+  return request({
+    url: '/openapi/apitools/idcardquery/'+idCard,
+    method: 'get',
+  })
+}

ruoyi-ui/src/views/business/tools/apitools/index.vue

@@ -13,7 +13,7 @@
         <div class="table_col">
           <div>
             <el-form label-width="80px" label-position="right">
-              <el-form-item label="节假日" label-width="auto">
+              <el-form-item label="节假日" label-width="80px">
                 <el-popover
                   v-loading="loading1"
                   placement="bottom"
@@ -35,9 +35,10 @@
               </el-form-item>
             </el-form>
           </div>
+
           <div>
             <el-form label-width="80px" label-position="right">
-              <el-form-item label="MM图片" label-width="auto">
+              <el-form-item label="MM图片" label-width="80px">
 
                 <el-popover
                   v-loading="loading2"
@@ -60,7 +61,7 @@
 
           <div>
             <el-form label-width="80px" label-position="right">
-              <el-form-item label="历史今天" label-width="auto">
+              <el-form-item label="历史今天" label-width="80px">
 
                 <el-popover
                   v-loading="loading3"
@@ -91,12 +92,34 @@
         </div>
 
         <div class="table_col2">
-          <el-form :inline="true" class="">
+          <el-form :inline="true" :rules="rules" :model="idCardForm" ref="idCardForm">
-            <el-form-item label="身份证查询" label-width="100px">
+            <el-form-item label="身份证查询" label-width="100px" prop="idCard">
-              <el-input placeholder="请输入身份证"></el-input>
+              <el-input v-model="idCardForm.idCard" placeholder="请输入身份证"></el-input>
             </el-form-item>
             <el-form-item>
-              <el-button type="primary">搜索</el-button>
+              <el-popover
+                v-loading="loading4"
+                placement="bottom"
+                width="300"
+                v-model="idCardVisible">
+                <el-card shadow="hover">
+                  <div style="font-size: 12px">
+                    <span>身份证号：{{ idCardData.idCardNum }}</span> <br>
+                    <hr>
+                    <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;地址：'"></span>
+                    <span>{{ idCardData.address }}</span>
+                    <br>
+                    <hr>
+                    <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生日：'"></span>
+                    <span>{{ idCardData.birthday }}</span> <br>
+                    <hr>
+                    <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性别：'"></span>
+                    <span>{{ idCardData.sex }}</span> <br>
+                    <hr>
+                  </div>
+                </el-card>
+                <el-button type="primary" @click="getIdCardQuery('idCardForm')" slot="reference">搜索</el-button>
+              </el-popover>
             </el-form-item>
           </el-form>
         </div>
@@ -190,7 +213,7 @@
 
 <script>
 
-import {getHoliday, getHistoryToday, getBeautyPicture} from "@/api/business/openapi/apitools";
+import {getHoliday, getHistoryToday, getBeautyPicture, getIdCardQuery} from "@/api/business/openapi/apitools";
 
 export default {
   name: "Apitools",
@@ -202,18 +225,35 @@ export default {
       BeautyPictureData: [],
       pictureList: [],   //单独存放图片路径
       historyTodayData: [],
+      idCardData: {},
+
+
+      //-------------input框数据-------------------
+      idCardForm: {
+        idCard: ''
+      },
 
 
       //------------控制弹出显示隐藏-----------------
       holidayVisible: false,
       beautyPictureVisible: false,
       historyTodayVisible: false,
+      idCardVisible: false,
 
 
-      //遮罩层
+      //----------------遮罩层-------------------
       loading1: false,
       loading2: false,
       loading3: false,
+      loading4: false,
+
+
+      //---------------校验规则--------------------
+      rules: {
+        idCard: [
+          {required: true, message: '请输入身份证号！！！', trigger: 'blur'},
+        ],
+      }
 
 
     }
@@ -221,19 +261,39 @@ export default {
 
   created() {
 
-  },
+  }
+  ,
 
   methods: {
+    //获取身份证信息
+    getIdCardQuery(idCardForm) {
+      this.$refs[idCardForm].validate((valid) => {
+        if (valid) {
+          this.loading4 = true
+          getIdCardQuery(this.idCardForm.idCard).then(res => {
+            this.loading4 = false
+            this.idCardData = res.data
+          }).catch(err => {
+            this.loading4 = false
+          })
+        } else {
+          return false;
+        }
+      });
+    }
+    ,
+
     //获取历史今天数据信息
     getHistoryToday() {
       this.loading3 = true
       getHistoryToday().then(res => {
         this.loading3 = false
         this.historyTodayData = res.data
-      }).catch(err =>{
+      }).catch(err => {
         this.loading3 = false
       })
-    },
+    }
+    ,
 
     //获取节假日信息
     getHoliday() {
@@ -241,10 +301,11 @@ export default {
       getHoliday().then(res => {
         this.loading1 = false
         this.holidayData = res.data
-      }).catch(err =>{
+      }).catch(err => {
         this.loading3 = false
       })
-    },
+    }
+    ,
 
     //获取mm图片信息
     getBeautyPicture() {
@@ -257,10 +318,11 @@ export default {
         res.data.forEach(data => {
           this.pictureList.push(data.imageUrl)
         })
-      }).catch(err =>{
+      }).catch(err => {
         this.loading3 = false
       })
-    },
+    }
+    ,
 
   }