实名检查

src/containers/center/play/components/iMedia.vue

@@ -93,8 +93,8 @@
     </el-row>
 
    <el-dialog  title="开始人脸认证" center :visible.sync="identifyFaceDialog" width="540px"
-      :close-on-click-modal = "false"
-       @close="closeIdentify":append-to-body="true" >
+   :show-close="false"
+      :close-on-click-modal = "false" :append-to-body="true" >
       <div>
         <i-collect :updateTime="updateTime" @getface="getface" />
         <div class="tc m20">
@@ -261,15 +261,9 @@
       },
       stopTick() {
         console.log( "stopTick")
+        this.errMsg = '';
         if (this.timer) clearInterval(this.timer);
       },
-      closeIdentify(){
-        console.log( "closeIdentify")
-        this.startPlay = false
-        this.onPlay = false
-        this.nextFaceTime = 0
-        this.stopTick();
-      },
       tryTick() {
         let that = this;
         try {
@@ -370,6 +364,11 @@
             this.faceInterval = 30*1000;
             this.closeDailogTime = this.updateTime + 30*1000;
           }
+          // 关闭播放
+          setTimeout( ()=>{
+            let myPlayer = this.$refs.videoPlayer.player;
+            myPlayer && myPlayer.pause()
+          }, 200);
         }
         this.startTick()
       },

src/containers/certificate/index.css

@@ -0,0 +1,208 @@
+.cert-body {
+  width: 100%;
+  min-height: 1024px;
+  max-width: 500px;
+  margin: 0px auto;
+  background-size: 100% auto;
+  background-color: #4eaceb;
+  font-family: "Arial";
+  color: #fff;
+  background-image: linear-gradient(#207ec8, #fff);
+}
+
+.box_title {
+  height: 3rem;
+  font-size: 1.6rem;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+}
+
+.content_box_title{
+  color: #000;
+  background-color: #f3f8fc;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 57px;
+}
+.content_box_title span{
+  width: 55%;
+  text-align: center;
+}
+
+.sign-serach{
+  width: 360px;
+  margin-top: 1rem;
+  padding-top: 1rem;
+  margin: 1rem auto;
+  background-color: white;
+}
+
+.sign-serach button{
+  padding: 12px 64px;
+}
+
+.mess_style {
+  background-color: #f3f8fc;
+  padding: 1rem;
+  font-size: 1.1rem;
+  color: #999;
+  line-height: 1.5rem;
+  margin-top: 1.2rem;
+}
+
+
+
+.mess_title {
+  color: #000;
+  font-weight: 600;
+  margin-top: 2rem;
+}
+
+.mess_explain {
+  position: relative;
+  width: 6rem;
+  height: 3rem;
+  text-align: right;
+  float: right;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  background: #178ce8;
+  opacity: .7;
+  border-radius: 0 0 0 20px;
+}
+
+.mess_explain img {
+  width: 2rem;
+  margin-right: 8px;
+}
+
+.mess_text {
+  display: inline-block;
+  text-align: justify;
+  text-indent: 2rem;
+  margin-top: .8rem;
+  line-height: 2rem;
+}
+
+
+.qr-code {
+  cursor: pointer; /* 鼠标悬停显示手型，提示可点击 */
+  display: inline-block;
+}
+
+/* 验证码图片样式 */
+.qr-code img {
+  height: 40px; /* 与输入框高度保持一致 */
+  width: auto; /* 自动计算宽度，保持图片比例 */
+  vertical-align: middle; /* 垂直居中对齐 */
+  border-radius: 4px; /* 可选：添加轻微圆角，与输入框风格统一 */
+}
+
+
+.certificate-cards {
+  display: flex;
+  margin-top: 0.5rem;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.card {
+  background-color: #fff;
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.04);
+}
+
+.card-title {
+  font-size: 15px;
+  font-weight: bold;
+  margin: 0;
+  color: #333;
+}
+
+.card-status {
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.card-status.valid {
+  background-color: #e6f7ed;
+  color: #00875a;
+}
+
+.card-status.expired {
+  background-color: #fff2e8;
+  color: #e53e3e;
+}
+
+/* 信息网格布局，适合手机屏幕 */
+.info-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0; /* 移除间隙，让线条连贯 */
+}
+
+.info-item {
+  display: flex;
+  padding: 0;
+}
+
+/* 为第一列（标签列）添加背景色 */
+.certificate-cards .el-table_1_column_1 {
+  flex: 0 0 35%;
+  font-size: 14px;
+  color: #666;
+  background-color: #f5f7fa !important; /* 浅灰色背景 */
+  padding: 10px 8px;
+  border-bottom: 1px solid #e9e9e9;
+  font-weight: 500;
+}
+
+.info-value {
+  flex: 0 0 65%;
+  font-size: 14px;
+  color: #333;
+  padding: 10px 8px;
+  border-bottom: 1px solid #e7f1f9;
+  word-break: break-word;
+}
+
+/* 最后一项去除底部边框 */
+.info-grid :last-child .info-label,
+.info-grid :last-child .info-value {
+  border-bottom: none;
+}
+
+.remark {
+  margin-top: 12px;
+  padding: 8px;
+  background-color: #f5f7fa;
+  border-left: 3px solid #2f86eb;
+  color: #666;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.cls-label{
+  background-color: #999;
+}
+/* 适配小屏手机 */
+@media (max-width: 360px) {
+  .main-title {
+    font-size: 15px;
+  }
+
+  .info-label, .info-value {
+    font-size: 13px;
+    padding: 8px 6px;
+  }
+}
+
+
+

src/containers/certificate/index.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="cert-body">
+    <div style="padding-top: 1rem;">
+      <div class="box_title">特种作业操作证及安全生产知识和</div>
+      <div class="box_title">管理能力考核合格信息查询平台</div>
+    </div>
+
+    <el-card style="border-radius: 10px; margin: 20px;">
+      <div class="content_box_title">
+        <img data-v-10945277=""
+          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFcAAAAOCAYAAABaSYBTAAAABHNCSVQICAgIfAhkiAAAANRJREFUWEftmO0NgyAYhOtOMIxr6By6RoeBnVTqR2rL6wlFOJPyy+QC3j0vIlAZY55a6/ohNHbd2S7tUWJXOcFaOyilXs++xq4zZPBx24CyA0T+GAHvZisKwK6zAf5aCtgBIn9MgL3rLArArrMAvu1PDBWYAbAIl8EcAoj00hkO4ZY2l+L9KcZARZR0CLekuXXvGBvufe/56xgx/U/B/QOeyxQK+DTcmME/Ty2h5lL3z50hCG5uc1ccxXNmCIa7mGunu4hOuIpwn08z6T2rvmS42mM7AlIFLwQXiU8MAAAAAElFTkSuQmCC" />
+        <span>特种作业操作证查询</span>
+        <img
+          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFcAAAAOCAYAAABaSYBTAAAABHNCSVQICAgIfAhkiAAAALRJREFUWEft2LENgCAQBVCZwtoZkBHcwtItnMTedSgI29CgmGhiRBS8K0w+7YX75AEFiCpzGGMa59yglBpjU7nrIZM7g6q/yLHVWkvv/dSuIzaPux4yuTMo+7/GpQwt2Zi/wYb1vsIFbNmNecQFbBns48kFbDlsEhew32BvcQH7HTaKC1ga2AsuYOlgT7iApYU9cAFLD7vhApYHdsftpZRz7Elqra3XT5qOqx4yuTO4+6f+ZhZW89Ai/bICGAAAAABJRU5ErkJggg==" />
+      </div>
+
+      <div v-if="showTable">
+        <p style="text-align: center;margin-top: 1rem;">最新证书信息</p>
+        <div class="certificate-cards">
+          <div v-for="(certificate, index) in certificates" :key="index" class="card">
+            <el-table :data="certificate.tableData" border style="width: 100%" :show-header="false">
+              <el-table-column prop="label" label="项目"
+                width="150"
+               :cell-style="{ backgroundColor: '#000' }"/>
+              <el-table-column prop="value" label="内容" />
+            </el-table>
+
+            <div class="remark" v-if="certificate.remark">
+              备注：{{ certificate.remark }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-else>
+        <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 class="mess_style">
+          <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: 4rem;">
+            <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">
+              平台中数据由各省级应急管理部门及矿山安全监管部门提供，如对查询结果存有疑问，请与原发证部门联系。
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+<script>
+  import {
+    httpServer
+  } from "@/components/httpServer/httpServer.js";
+  export default {
+    data() {
+      return {
+        codeShow: '',
+        showTable: false,
+        certificates: [],
+        searchInfo: {
+          cardId: '',
+          nickname: '',
+          code: '',
+          courseType: '特种作业',
+          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 = ''
+          }
+        })
+      },
+      packData(data) {
+        this.showTable = true;
+        this.certificates = [];
+        for (let i in data) {
+          let item = data[i];
+          this.certificates.push({
+            remark: `本证书应于${item.reviewDate}前进行复审`,
+            tableData: [{
+                label: '姓名',
+                value: item.nickname
+              },
+              {
+                label: '性别',
+                value: item.gender
+              },
+              {
+                label: '作业类别',
+                value: item.certificateType
+              },
+              {
+                label: '操作项目',
+                value: item.courseName
+              },
+              {
+                label: '签发机关',
+                value: item.certificateOrgan
+              },
+              {
+                label: '初领日期',
+                value: item.signDate
+              },
+              {
+                label: '有效期开始日期',
+                value: item.startDate
+              },
+              {
+                label: '有效期结束日期',
+                value: item.endDate
+              },
+              {
+                label: '应复审日期',
+                value: item.reviewDate
+              },
+              {
+                label: '实际复审日期',
+                value: item.realReviewDate
+              },
+            ]
+          })
+        }
+      },
+      queryCertificate() {
+        this.$refs.searchForm.validate(valid => {
+          if (!valid) this.changeCode();
+          let param = Object.assign({}, this.searchInfo);
+          httpServer("Auth.QueryCert", param).then(res => {
+            this.changeCode();
+            if (res.code != 200) return;
+            this.packData(res.data || []);
+            this.showTable = true;
+            this.changeCode()
+          })
+
+        });
+      }
+    },
+    created() {
+      this.changeCode();
+
+    }
+  }
+</script>
+<style>
+  @import url("./index.css");
+</style>

src/router/index.js

@@ -45,6 +45,9 @@ import CenterExamDownload from '@/containers/center/exam/download'
 
 import CenterUserSeat from '@/containers/center/userSeat/index'
 
+import PublicCertificate from '@/containers/certificate/index'
+
+
 Vue.use(Router)
 
 export default new Router({
@@ -72,6 +75,12 @@ export default new Router({
       component: login,
       component: PublicSign,
     },
+    {
+      path: '/certificate',
+      name: 'certificate',
+      component: login,
+      component: PublicCertificate,
+    },
     {
       path: '/wapplayer',
       name: 'wapplayer',