证书

src/containers/certificate/index.css

@@ -231,3 +231,41 @@
     height: 30px;
     fill: white;
 }
+
+
+
+
+
+/* 卡片整体样式 */
+.custom-card {
+  margin: 10px auto;
+  --el-card-padding: 0; /* 清除卡片默认内边距 */
+}
+
+/* 卡片内容 flex 布局：左右分栏 */
+.card-content {
+  display: flex;
+  height: 50px; /* 固定卡片高度，可自行调整 */
+}
+
+/* 左侧序号区域：10% 宽度 */
+.left-section {
+  width: 50px;
+  background-color: #409eff; /* 主题蓝色 */
+  display: flex;
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中 */
+  color: white;
+  font-size: 36px;
+  font-weight: bold;
+}
+.right-section{
+  width: 380px;
+  margin-left: 4px;
+}
+.right-section-item{
+  margin: 4px 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

src/containers/certificate/index.vue

@@ -7,6 +7,7 @@
         </svg>
     </div>
 
+
     <el-card style="border-radius: 10px; padding-top: 2rem;">
       <div class="content_box_title">
         <img
@@ -16,75 +17,75 @@
           src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFcAAAAOCAYAAABaSYBTAAAABHNCSVQICAgIfAhkiAAAALRJREFUWEft2LENgCAQBVCZwtoZkBHcwtItnMTedSgI29CgmGhiRBS8K0w+7YX75AEFiCpzGGMa59yglBpjU7nrIZM7g6q/yLHVWkvv/dSuIzaPux4yuTMo+7/GpQwt2Zi/wYb1vsIFbNmNecQFbBns48kFbDlsEhew32BvcQH7HTaKC1ga2AsuYOlgT7iApYU9cAFLD7vhApYHdsftpZRz7Elqra3XT5qOqx4yuTO4+6f+ZhZW89Ai/bICGAAAAABJRU5ErkJggg==" />
       </div>
 
-      <div v-if="showTable">
-        <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="110"
-               :cell-style="{ backgroundColor: '#000' }"/>
-              <el-table-column prop="value" label="信息" />
-            </el-table>
+      <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>
 
-            <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;">培训证书</span>
-              <img
-                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFcAAAAOCAYAAABaSYBTAAAABHNCSVQICAgIfAhkiAAAALRJREFUWEft2LENgCAQBVCZwtoZkBHcwtItnMTedSgI29CgmGhiRBS8K0w+7YX75AEFiCpzGGMa59yglBpjU7nrIZM7g6q/yLHVWkvv/dSuIzaPux4yuTMo+7/GpQwt2Zi/wYb1vsIFbNmNecQFbBns48kFbDlsEhew32BvcQH7HTaKC1ga2AsuYOlgT7iApYU9cAFLD7vhApYHdsftpZRz7Elqra3XT5qOqx4yuTO4+6f+ZhZW89Ai/bICGAAAAABJRU5ErkJggg==" />
-            </div>
+        <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>
 
-            <img :src="certificate.imgUrl" style="width: 100%; margin:20px auto;">
+      <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 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 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 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 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>
@@ -102,7 +103,8 @@
         id:'',
         codeShow: '',
         showTable: false,
-        certificates: [],
+        certificates: [
+        ],
         searchInfo: {
           cardId: '',
           nickname: '',
@@ -168,75 +170,25 @@
           }
         })
       },
-      packData(data) {
-        this.showTable = true;
-        let firstItem = data[0]||{};
-        let certificate = {
-          imgUrl: 'https://sm-sign.oss-cn-shanghai.aliyuncs.com/cert/'+ firstItem.certUrl.split("#")[1],
-          tableData: [{
-              label: '姓名',
-              value: firstItem.nickname
-            },
-            {
-              label: '性别',
-              value: firstItem.gender
-            },
-            {
-              label: '身份证号',
-              value: firstItem.cardId
-            },
-            {
-              label: '人员类型',
-              value: firstItem.courseName
-            },
-            {
-              label: '单位名称',
-              value: firstItem.company
-            },
-            {
-              label: '发证日期',
-              value: firstItem.publishDate
-            },
-            {
-              label: '扫码日期',
-              value: curDate()
-            }
-          ]
-        }
-        this.certificates = [certificate];
-
-      },
       queryCertificate() {
         this.$refs.searchForm.validate(valid => {
           if (!valid) this.changeCode();
           let param = Object.assign({}, this.searchInfo);
-          httpServer("Auth.QueryCert", param).then(res => {
+          this.certificates = []
+          httpServer("Auth.QueryStudyHistory", param).then(res => {
             this.changeCode();
             if (res.code != 200) return;
-            this.packData(res.data || []);
-            this.showTable = true;
+            this.certificates = res.data||[]
           })
         });
-      },
-      queryCertificateById(id) {
-        let param = {uuid:id};
-        httpServer("Auth.QueryCertById", param).then(res => {
-          if (res.code != 200) return;
-          this.packData(res.data || []);
-          this.showTable = true;
-        })
       }
     },
     created() {
-      this.id = this.$route.query.id || '';
-      if(this.id){
-        this.showTable = true;
-        this.queryCertificateById(this.id)
-      }
       this.changeCode();
     }
   }
 </script>
 <style>
   @import url("./index.css");
+
 </style>