证书查询的三个页面

ruoyi-ui/README.md

@@ -27,4 +27,15 @@ npm run build:stage
 
 # 构建生产环境
 npm run build:prod
-```
+```
+
+```
+# 证书页面：会员、理事证书、聘书查询
+http://localhost/certInquire/member
+
+# 证书页面：结业证书、学时证明查询
+http://localhost/certInquire/train
+
+# 证书页面：专业能力证书查询
+http://localhost/certInquire/profess
+```

ruoyi-ui/src/permission.js

@@ -8,7 +8,7 @@ import { isRelogin } from '@/utils/request'
 
 NProgress.configure({ showSpinner: false })
 
-const whiteList = ['/login', '/auth-redirect', '/bind', '/register']
+const whiteList = ['/login', '/auth-redirect', '/bind', '/register','/certInquire/member','/certInquire/train','/certInquire/profess']
 
 router.beforeEach((to, from, next) => {
   NProgress.start()

ruoyi-ui/src/router/index.js

@@ -87,6 +87,28 @@ export const constantRoutes = [
         meta: { title: '个人中心', icon: 'user' }
       }
     ]
+  },
+  {
+    path:'/certInquire',
+    hidden: true,
+    component:() => import('@/views/certInquire'),
+    children: [
+      {
+        path: 'member',
+        component: () => import('@/views/certInquire/member'),
+        name: 'Member',
+      },
+      {
+        path: 'train',
+        component: () => import('@/views/certInquire/train'),
+        name: 'Train',
+      },
+      {
+        path: 'profess',
+        component: () => import('@/views/certInquire/profess'),
+        name: 'Profess',
+      }
+    ]
   }
 ]
 

ruoyi-ui/src/views/certInquire/index.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="main">
+        <div class="img-box">
+            <img src="../../assets/logo/logo2.png" alt="广东省教师继续教育学会">
+        </div>
+        <div>
+            <router-view></router-view>
+        </div>
+    </div>
+</template>
+<script>
+</script>
+<style lang="scss">
+.main {
+  text-align: left;
+  margin: 100px auto;
+  width: 500px;
+}
+.img-box {
+  width: 360px;
+  height: 80px;
+//   background-color: brown;
+  text-align: center;
+  img{
+    height: 100%;
+    transform: scale(1.5);
+  }
+}
+.main-title {
+  width: 360px;
+  text-align: center;
+}
+.label-box {
+  display: flex;
+  align-items: center;
+  margin: 10px 0;
+}
+.label-title {
+  width: 150px;
+  line-height: 22px;
+  flex: 0 0 auto;
+  text-align: center;
+}
+.label-input {
+  line-height: 30px;
+  width: 210px;
+  border: 1px solid #50ac55;
+  padding-left: 10px;
+  box-sizing: border-box;
+  height: 45px;
+  line-height: 45px;
+}
+.label-must {
+  color: red;
+}
+.btn-box {
+  text-align: right;
+}
+.btn-box button {
+  width: 140px;
+  height: 40px;
+  margin: 10px;
+}
+.btn-reset {
+  background-color: #f1f2f3;
+  border: none;
+}
+.btn-search {
+  background-color: rgb(176,11,17);
+  color: white;
+    border: none;
+}
+.captcha-img {
+  width: 120px;
+  background: antiquewhite;
+  margin: auto;
+  height: 50px;
+}
+.activeSpan{
+    color: #50ac55;
+}
+</style>

ruoyi-ui/src/views/certInquire/member/index.vue

@@ -0,0 +1,80 @@
+<template>
+    <div>
+      <div style="text-align: center;line-height: 50px;">
+          <span class="main-title" style="margin: 0 10px;font-weight: bold;" >会员、理事证书、聘书查询</span>
+      </div>
+      <div>
+          <div class="label-box">
+              <div class="label-title">
+                  <p>持证人姓名</p>
+                  <p>（或持证单位全称）</p>
+              </div>
+              <input type="text" v-model="userName" class="label-input" />
+          </div>
+          <div class="label-box">
+              <div class="label-title">
+                  <p>证书编码</p>
+              </div>
+              <input type="text" v-model="certNumber" class="label-input" />
+          </div>
+          <div class="label-box">
+              <div class="label-title">
+                  <p>验证码<span class="label-must">*</span></p>
+              </div>
+              <input type="text" v-model="code" class="label-input" style="border-color:#acb1b5"/>
+              <div class="captcha-img">
+                  <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+              </div>
+          </div>
+          <div class="btn-box">
+              <button class="btn-reset">重置</button>
+              <button class="btn-search" @click="handleSearch">查询</button>
+          </div>
+      </div>
+    </div>
+</template>
+  
+<script>
+import { getCodeImg } from "@/api/login";
+export default {
+  data() {
+    return {
+      userName: "",
+      certNumber: "",
+      code: "",
+      codeUrl:"",
+      captchaEnabled:true,
+      uuid:"",
+    };
+  },
+  methods:{
+    getCode() {
+      getCodeImg().then(res => {
+        // console.log(res)
+        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
+        if (this.captchaEnabled) {
+          this.codeUrl = "data:image/gif;base64," + res.img;
+          this.uuid = res.uuid;
+        }
+      });
+    },
+    handleSearch(){
+        const form = {
+            userName: this.userName,
+            certNumber: this.certNumber,
+            code: this.code,
+            uuid: this.uuid
+        }
+        console.log(form)
+    }
+
+  },
+  mounted(){
+    this.getCode()
+  }
+};
+</script>
+  
+<style>
+
+</style>

ruoyi-ui/src/views/certInquire/profess/index.vue

@@ -0,0 +1,80 @@
+<template>
+    <div>
+      <div style="text-align: center;line-height: 50px;">
+          <span class="main-title" style="margin: 0 10px;font-weight: bold;" >专业能力证书查询</span>
+      </div>
+      <div>
+          <div class="label-box">
+              <div class="label-title">
+                  <p>持证人姓名</p>
+                  <p>（或持证单位全称）</p>
+              </div>
+              <input type="text" v-model="userName" class="label-input" />
+          </div>
+          <div class="label-box">
+              <div class="label-title">
+                  <p>证书编码</p>
+              </div>
+              <input type="text" v-model="certNumber" class="label-input" />
+          </div>
+          <div class="label-box">
+              <div class="label-title">
+                  <p>验证码<span class="label-must">*</span></p>
+              </div>
+              <input type="text" v-model="code" class="label-input" style="border-color:#acb1b5"/>
+              <div class="captcha-img">
+                  <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+              </div>
+          </div>
+          <div class="btn-box">
+              <button class="btn-reset">重置</button>
+              <button class="btn-search" @click="handleSearch">查询</button>
+          </div>
+      </div>
+    </div>
+</template>
+  
+<script>
+import { getCodeImg } from "@/api/login";
+export default {
+  data() {
+    return {
+      userName: "",
+      certNumber: "",
+      code: "",
+      codeUrl:"",
+      captchaEnabled:true,
+      uuid:"",
+    };
+  },
+  methods:{
+    getCode() {
+      getCodeImg().then(res => {
+        // console.log(res)
+        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
+        if (this.captchaEnabled) {
+          this.codeUrl = "data:image/gif;base64," + res.img;
+          this.uuid = res.uuid;
+        }
+      });
+    },
+    handleSearch(){
+        const form = {
+            userName: this.userName,
+            certNumber: this.certNumber,
+            code: this.code,
+            uuid: this.uuid
+        }
+        console.log(form)
+    }
+
+  },
+  mounted(){
+    this.getCode()
+  }
+};
+</script>
+
+<style>
+
+</style>

ruoyi-ui/src/views/certInquire/train/index.vue

@@ -0,0 +1,80 @@
+<template>
+    <div>
+      <div style="text-align: center;line-height: 50px;">
+          <span class="main-title" style="margin: 0 10px;font-weight: bold;" >结业证书、学时证明查询</span>
+      </div>
+      <div>
+          <div class="label-box">
+              <div class="label-title">
+                  <p>持证人姓名</p>
+                  <p>（或持证单位全称）</p>
+              </div>
+              <input type="text" v-model="userName" class="label-input" />
+          </div>
+          <div class="label-box">
+              <div class="label-title">
+                  <p>证书编码</p>
+              </div>
+              <input type="text" v-model="certNumber" class="label-input" />
+          </div>
+          <div class="label-box">
+              <div class="label-title">
+                  <p>验证码<span class="label-must">*</span></p>
+              </div>
+              <input type="text" v-model="code" class="label-input" style="border-color:#acb1b5"/>
+              <div class="captcha-img">
+                  <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+              </div>
+          </div>
+          <div class="btn-box">
+              <button class="btn-reset">重置</button>
+              <button class="btn-search" @click="handleSearch">查询</button>
+          </div>
+      </div>
+    </div>
+</template>
+  
+<script>
+import { getCodeImg } from "@/api/login";
+export default {
+  data() {
+    return {
+      userName: "",
+      certNumber: "",
+      code: "",
+      codeUrl:"",
+      captchaEnabled:true,
+      uuid:"",
+    };
+  },
+  methods:{
+    getCode() {
+      getCodeImg().then(res => {
+        // console.log(res)
+        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
+        if (this.captchaEnabled) {
+          this.codeUrl = "data:image/gif;base64," + res.img;
+          this.uuid = res.uuid;
+        }
+      });
+    },
+    handleSearch(){
+        const form = {
+            userName: this.userName,
+            certNumber: this.certNumber,
+            code: this.code,
+            uuid: this.uuid
+        }
+        console.log(form)
+    }
+
+  },
+  mounted(){
+    this.getCode()
+  }
+};
+</script>
+  
+<style>
+
+</style>