feat: 新增证书查询

package-lock.json

@@ -11,6 +11,7 @@
         "@vueuse/core": "^9.4.0",
         "axios": "^1.1.3",
         "element-plus": "^2.2.19",
+        "file-saver": "^2.0.5",
         "pinia": "^2.0.23",
         "qrcode.vue": "^3.3.3",
         "query-string": "^7.1.1",
@@ -2242,6 +2243,11 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "node_modules/file-uri-to-path": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/file-uri-to-path/-/file-uri-to-path-2.0.0.tgz",
@@ -6279,6 +6285,11 @@
         "flat-cache": "^3.0.4"
       }
     },
+    "file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "file-uri-to-path": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/file-uri-to-path/-/file-uri-to-path-2.0.0.tgz",

package.json

@@ -18,6 +18,7 @@
     "@vueuse/core": "^9.4.0",
     "axios": "^1.1.3",
     "element-plus": "^2.2.19",
+    "file-saver": "^2.0.5",
     "pinia": "^2.0.23",
     "qrcode.vue": "^3.3.3",
     "query-string": "^7.1.1",

src/api/base.ts

@@ -66,3 +66,16 @@ export function getOpenId(data?: any) {
     headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
   })
 }
+
+/**
+ * 获取证书手机验证码
+ */
+export function certSendCode(params: { phone: number }) {
+  return httpRequest.get('https://project-api.ezijing.com/api/psp/v1/welfare/send-code', { params })
+}
+/**
+ * 获取证书地址
+ */
+export function certSearch(params: { phone: number; code: number }) {
+  return httpRequest.get('https://project-api.ezijing.com/api/psp/v1/welfare/get-certificate', { params })
+}

src/main.ts

@@ -6,9 +6,9 @@ import router from './router'
 
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
-import { Overlay,Tab,Tabs,ActionSheet } from 'vant'
+import { Overlay, Tab, Tabs, ActionSheet } from 'vant'
 // 2. 引入组件样式
-import 'vant/lib/index.css';
+import 'vant/lib/index.css'
 // 公共css
 import './assets/css/base.css'
 // 公共组件

src/modules/home/components/Cert.vue

+<template>
+  <section class="section">
+    <div class="section__inner">
+      <div class="section-title">
+        <div class="tit_img"><img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" /></div>
+        <h2>证书查询</h2>
+        <div class="tit_img"><img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" /></div>
+      </div>
+      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="80px" class="rule-form">
+        <el-form-item label="手机号" prop="phone">
+          <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
+        </el-form-item>
+        <el-form-item label="验证码" prop="code">
+          <el-input v-model="form.code" placeholder="请输入手机验证码">
+            <template #append>
+              <el-button type="primary" @click="sendCode" id="checkedCode" :disabled="isBtnDisabled">获取验证码</el-button>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSubmit">查询证书</el-button>
+          <el-button v-if="certUrl" type="primary" @click="handleDownload" plain style="margin-left: 40px">下载证书</el-button>
+        </el-form-item>
+      </el-form>
+      <div class="cert" v-if="certUrl">
+        <img :src="certUrl" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import { saveAs } from 'file-saver'
+import { certSendCode, certSearch } from '@/api/base'
+const MOBILE_REG = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
+const checkMobile = (rule, value, callback) => {
+  if (value) {
+    if (!MOBILE_REG.test(value)) {
+      callback(new Error('手机号格式错误'))
+    } else {
+      callback()
+    }
+  }
+}
+export default {
+  data() {
+    return {
+      form: { phone: '', code: '' },
+      rules: {
+        phone: [
+          { required: true, message: '请输入手机号', trigger: 'blur' },
+          { validator: checkMobile, trigger: 'blur' }
+        ],
+        code: { required: true, message: '请输入验证码', trigger: 'blur' }
+      },
+      isBtnDisabled: false,
+      certUrl: '' // https://webapp-pub.oss-cn-beijing.aliyuncs.com/certificate/13034769668.jpg
+    }
+  },
+  methods: {
+    handleSubmit() {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          this.fetchCertSearch()
+        }
+      })
+    },
+    handleDownload() {
+      saveAs(this.certUrl, this.certUrl)
+    },
+    sendCode() {
+      if (!this.form.phone) {
+        this.$message('请填写手机号')
+      } else if (!MOBILE_REG.test(this.form.phone)) {
+        this.$message('手机号格式错误')
+      } else {
+        this.fetchSendCode()
+        this.isBtnDisabled = true
+        this.btnDisabledTimer()
+      }
+    },
+    // 发送验证码按钮计时器
+    btnDisabledTimer() {
+      let count = 60
+      const btnEl = document.querySelector('#checkedCode')
+      btnEl.innerHTML = count + '秒后重发'
+      const timer = setInterval(() => {
+        count--
+        if (count < 1) {
+          clearInterval(timer)
+          this.isBtnDisabled = false
+          btnEl.innerHTML = '获取验证码'
+        } else {
+          btnEl.innerHTML = count + '秒后重发'
+        }
+      }, 1000)
+    },
+    fetchSendCode() {
+      certSendCode({ phone: this.form.phone })
+        .then(() => {
+          this.$message.success('验证码发送成功')
+        })
+        .catch(res => {
+          this.$message.error(res.message || '发送验证码失败')
+        })
+    },
+    fetchCertSearch() {
+      certSearch(this.form)
+        .then(res => {
+          this.certUrl = res.data.url
+        })
+        .catch(res => {
+          this.$message.error(res.message || '获取证书失败')
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.rule-form {
+  width: 400px;
+  margin: 0 auto 40px;
+}
+.cert {
+  width: 1200px;
+  margin: 0 auto;
+  padding: 10px 0 40px;
+}
+.cert img {
+  width: 100%;
+}
+</style>

src/modules/home/style.scss

@@ -9,6 +9,7 @@
   justify-content: center;
   padding: 40px 0;
   h2 {
+    margin: 0 10px;
     font-size: 32px;
     font-weight: 500;
     line-height: 1;

src/modules/home/views/Index.vue

@@ -5,6 +5,7 @@ import ProjectSystem from '../components/ProjectSystem.vue'
 import Course from '../components/Course.vue'
 import ExamProcess from '../components/ExamProcess.vue'
 import Teacher from '../components/Teacher.vue'
+import Cert from '../components/Cert.vue'
 </script>
 
 <template>
@@ -14,6 +15,7 @@ import Teacher from '../components/Teacher.vue'
   <Teacher></Teacher>
   <Course></Course>
   <ExamProcess></ExamProcess>
+  <Cert></Cert>
 </template>
 
 <style lang="scss">