study_sm/src/containers/certificate/index.vue

<template>
  <div class="cert-body">

    <div v-if="showTable" class="back-button" @click="showTable=false">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42-.39-.39-1.02-.39-1.41 0l-6.59 6.59c-.39.39-.39 1.02 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.03 0-1.42L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1z"/>
        </svg>
    </div>


    <el-card style="border-radius: 10px; padding-top: 2rem;">
      <div class="content_box_title">
        <img
          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFcAAAAOCAYAAABaSYBTAAAABHNCSVQICAgIfAhkiAAAANRJREFUWEftmO0NgyAYhOtOMIxr6By6RoeBnVTqR2rL6wlFOJPyy+QC3j0vIlAZY55a6/ohNHbd2S7tUWJXOcFaOyilXs++xq4zZPBx24CyA0T+GAHvZisKwK6zAf5aCtgBIn9MgL3rLArArrMAvu1PDBWYAbAIl8EcAoj00hkO4ZY2l+L9KcZARZR0CLekuXXvGBvufe/56xgx/U/B/QOeyxQK+DTcmME/Ty2h5lL3z50hCG5uc1ccxXNmCIa7mGunu4hOuIpwn08z6T2rvmS42mM7AlIFLwQXiU8MAAAAAElFTkSuQmCC" />
        <span style="font-weight: 700;">{{showTable?'证书信息':'学时验证'}}</span>
        <img
          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFcAAAAOCAYAAABaSYBTAAAABHNCSVQICAgIfAhkiAAAALRJREFUWEft2LENgCAQBVCZwtoZkBHcwtItnMTedSgI29CgmGhiRBS8K0w+7YX75AEFiCpzGGMa59yglBpjU7nrIZM7g6q/yLHVWkvv/dSuIzaPux4yuTMo+7/GpQwt2Zi/wYb1vsIFbNmNecQFbBns48kFbDlsEhew32BvcQH7HTaKC1ga2AsuYOlgT7iApYU9cAFLD7vhApYHdsftpZRz7Elqra3XT5qOqx4yuTO4+6f+ZhZW89Ai/bICGAAAAABJRU5ErkJggg==" />
      </div>

      <el-form class="sign-serach" :rules="rules" :inline="false" :model="searchInfo" ref="searchForm"
              label-width="80px">
        <el-form-item label="身份证号" prop="cardId">
          <el-input placeholder="输入身份证" v-model="searchInfo.cardId" type="text" style="width:260px;"
            clearable></el-input>
        </el-form-item>
        <el-form-item label="学员姓名" prop="nickname">
          <el-input placeholder="输入姓名" v-model="searchInfo.nickname" type="text" style="width:260px;"
            clearable></el-input>
        </el-form-item>


        <el-form-item label="校验码" prop="code">
          <el-input placeholder="校验码" v-model="searchInfo.code" type="text" style="width:130px;" clearable></el-input>
          <span class="qr-code ng-scope" @click="changeCode()">
            <img alt="验证码" :src="codeShow" v-show="codeShow">
          </span>
        </el-form-item>

        <el-form-item class="form-btn-group" label-width="0px">
          <el-button size="medium" @click="resetForm">重 置</el-button>
          <el-button size="medium" type="primary" @click="queryCertificate">查 询</el-button>
        </el-form-item>
      </el-form>

      <div v-if="certificates.length>0">
        <div class="certificate-cards">
          <h3 style="margin: 1rem;">验证结果</h3>
          <div v-for="(item, index) in certificates" :key="index" class="card">
            <el-card class="custom-card">
              <div class="card-content">
                <div class="left-section">
                  <span class="serial-number">{{ index+1 }}</span>
                </div>
                <div class="right-section">
                  <p class="right-section-item" style="font-size: 16px;">
                    <span > {{item.nd}}年度  {{ item.courseName }} </span>
                    <span > <strong style="color: green;">{{ item.totalXs/10 }}</strong> 学时 </span>
                  </p>

                  <p class="right-section-item" style="font-size: 12px;">
                    <span> 年度：{{item.nd}}</span>
                    <span style="color: green;margin-right: 20px;"> 合格</span>
                  </p>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </div>

      <div class="mess_style" style="margin-top: 40px;">
        <div class="mess_explain">
          <img
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAABHNCSVQICAgIfAhkiAAAATZJREFUSIm1lrtxwzAQRA8czTh36h5UgBKjEVfgBpyJylyDmwEVuhnHzp4DH6QT/hKlneFwCO7eLsATICcdAF5E9mbI630RkaOIiHNu7tWpFgcCOUpjANcZJYWCGvqE44FZLwtfrlpP3xZcaq1ZfVY2fYPzNGiUBzSEagrgHfgFvhocXzSyCRril2Tt3xrcuOTBDg51CPBtuNsO9zwbM72mgQqfgU9gN8CNdcNGzj+uLpxzPyLyMcq3juE0rTHe0NKq5v879z64EfgbTALApM9LT7AG0cQ/qP4xmiwip9323thHk4djEpGDdb0XTGMcJufcog/Zdr4Sr5lrttfkyYZbmNpm2xNrz6eX74TJTOovB8HloVeuwejptlZLfmbPtYbQ5OmRPR6uYIYWm6n/iymGudXsquJ/zhquFSAu+Z8AAAAASUVORK5CYII=" />
          <span>说明</span>
        </div>
        <div style="margin-top: 3rem;">
          <div class="mess_title">01、证书依据</div>
          <div class="mess_text">
            宁德市建筑业协会建设行业从业人员继续教育网络培训平台
          </div>
          <div class="mess_title">02、查询范围</div>
          <div class="mess_text">
            施工现场专业人员，企业安全生产培训,安全生产管理人员,建筑施工特种作业人员
          </div>
          <div class="mess_title">03、联系方式</div>
          <div class="mess_text">
            电话: 0593-2823165 邮箱：3436014603@qq.com
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
  import {
    httpServer
  } from "@/components/httpServer/httpServer.js";
  import {curDate} from "@/utils/date.js";
  export default {
    data() {
      return {
        id:'',
        codeShow: '',
        showTable: false,
        certificates: [
        ],
        searchInfo: {
          cardId: '',
          nickname: '',
          code: '',
          captchaId: '',
        },
        rules: {
          code: [{
              required: true,
              message: '请输入校验码',
              trigger: 'blur'
            },
            {
              len: 5,
              message: '校验码有误',
              trigger: 'blur'
            },
          ],
          nickname: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur',
            min: 2
          }],
          cardId: [{
              required: true,
              message: '请输入身份证号码',
              trigger: 'blur'
            },
            {
              validator: (rule, value, callback) => {
                if (!value) {
                  return callback(new Error('请输入身份证号码'));
                }
                const cleanValue = value.replace(/[\s()]/g, '').toUpperCase();
                const mainlandReg = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
                const hkReg = /^(?:C(?:\d{8}|[A-HJ-NP-Z]\d{7})|[HM](?:\d{10}|\d{8}))$/;
                if (mainlandReg.test(cleanValue) || hkReg.test(cleanValue)) {
                  callback();
                } else {
                  callback(new Error('请输入正确的大陆身份证（18位）或香港身份证（如 A1234567）'));
                }
              },
              trigger: 'blur'
            }
          ],
        },
      }
    },
    methods: {
      resetForm() {
        this.searchInfo.cardId = '';
        this.searchInfo.nickname = '';

      },
      changeCode() {
        httpServer("Auth.GetValidateCode", {}).then(res => {
          if (res.code == 200) {
            this.codeShow = res.data.codeData;
            this.searchInfo.captchaId = res.data.captchaId;
          } else {
            this.codeShow = ''
          }
        })
      },
      queryCertificate() {
        this.$refs.searchForm.validate(valid => {
          if (!valid) this.changeCode();
          let param = Object.assign({}, this.searchInfo);
          this.certificates = []
          httpServer("Auth.QueryStudyHistory", param).then(res => {
            this.changeCode();
            if (res.code != 200) return;
            this.certificates = res.data||[]
          })
        });
      }
    },
    created() {
      this.changeCode();
    }
  }
</script>
<style>
  @import url("./index.css");

</style>