{"version":3,"file":"certificate.7d4eb482.mjs","sources":["../../../../pages/account/certificate.vue"],"sourcesContent":["<template>\n  <NuxtLayout name=\"account\">\n    <div class=\"page-account-certificate\">\n      <el-tabs v-model=\"courseType\" class=\"demo-tabs\" @tab-change=\"handleClick\">\n        <el-tab-pane\n          v-for=\"(item, index) in data.tabsList\"\n          :key=\"index\"\n          :label=\"item.name\"\n          :name=\"item.type\"\n        ></el-tab-pane>\n      </el-tabs>\n      <div class=\"list\" v-loading=\"ctrl.loading\">\n        <div class=\"item\" v-for=\"(item, index) in data.list\" :key=\"index\">\n          <div class=\"flex_left\">\n          <div class=\"pic\">\n            <cert-canvas\n              v-if=\"canvasHeight\"\n              :canvas-id=\"item.id\"\n              :canvas-height=\"canvasHeight\"\n              :cert-data=\"item.certInfo\"\n            />\n            <!-- <img :src=\"item.certInfo.logoUrl\" alt=\"\" /> -->\n          </div>\n          <div class=\"rt\">\n            <div class=\"name\">{{ item.certInfo.name }}</div>\n            <div class=\"time\">颁奖日期：{{ item.issuedTime }}</div>\n            <div class=\"time\">\n              到期时间：{{ item.expireTime || '永久有效' }}\n            </div>\n            <div class=\"bottom\" v-if=\"item.sourceName\">\n              <span>源自：{{ item.sourceName }}</span>\n            </div>\n          </div>\n          </div>\n          <div class=\"flex_right\">\n            <el-button type=\"primary\" @click=\"preview(item)\">预览下载</el-button>\n          </div>\n        </div>\n      </div>\n      <client-only>\n        <el-pagination\n          class=\"pagination\"\n          v-model:currentPage=\"data.current\"\n          layout=\"prev, pager, next, jumper\"\n          :total=\"data.totalCount\"\n          background\n          hide-on-single-page\n          @current-change=\"handleCurrentChange\"\n        >\n        </el-pagination>\n      </client-only>\n      <div class=\"preview\" v-if=\"data.certImgVisible\" @click=\"data.certImgVisible = false\">\n        <div class=\"close\">\n          <el-icon color=\"#fff\"><close /></el-icon>\n        </div>\n        <img :src=\"currentItem.logoUrl\" alt=\"\">\n      </div>\n      <!-- <el-dialog\n        class=\"dialog\"\n        v-model=\"data.certImgVisible\"\n        title=\"查看证书\"\n        width=\"800px\"\n        :before-close=\"handleClose\"\n      >\n        <img :src=\"currentItem.logoUrl\" alt=\"\" />\n        <template #footer>\n          <span class=\"dialog-footer\">\n            <el-button type=\"primary\" @click=\"data.certImgVisible = false\"\n              >确定</el-button\n            >\n          </span>\n        </template>\n      </el-dialog> -->\n      <cert-preview v-model=\"previewModel.visible\" :form=\"previewModel.form\" />\n    </div>\n  </NuxtLayout>\n</template>\n\n<script setup>\nimport { Close } from \"@element-plus/icons-vue\";\nimport { userCertPage } from \"~/api/user\";\nimport { useUserStore } from \"~/stores/user\";\nconst store = useUserStore();\nconst { getUserView } = store;\nuseHead({\n  title:'我的证书'\n});\nconst router = useRouter();\nconst canvasHeight = ref(0)\nconst courseType = ref(\"\");\nconst data = reactive({\n  certImgVisible: false,\n  currentItem: {},\n  tabsList: [\n    {\n      name: \"全部证书\",\n      type: \"\",\n    },\n    {\n      name:'生效中',\n      type:1\n    },\n    {\n      name:'已过期',\n      type:2\n    }\n  ],\n  list: [],\n  pages: 0,\n  current: 1,\n  totalCount: 0,\n  userInfo:{nickname:''}\n});\nconst ctrl = reactive({\n  loading:false\n})\n  //预览\n  const previewModel = reactive({\n    visible: false,\n    form: {},\n  });\n\nonMounted(() => {\n  getUserView(true).then(res=>{\n    data.userInfo = res;\n  })\n  getData();\n});\n\nconst handleClick = (tab, event) => {\n  data.list = []\n  getData();\n};\n\nconst toCourse = (courseId) => {\n  router.push(\"/course/detail?id=\" + courseId);\n};\n\nconst handleCurrentChange = (val) => {\n  canvasHeight.value = 0\n  getData(val);\n  document.querySelector('#app').scrollTop = 150\n};\n\nconst getData = (page = 1) => {\n  ctrl.loading = true\n  userCertPage({\n    effectiveStatus: parseInt(courseType.value) || \"\",\n    pageCurrent: page,\n    pageSize: 10,\n  }).then((res) => {\n    ctrl.loading = false\n    if (res) {\n      res.list = res.list || []\n      res.list.forEach(item=>{\n        item.certInfo.userName = data.userInfo.nickname\n      })\n      data.list = res.list;\n      data.pages = res.totalPage;\n      data.current = res.pageCurrent;\n      data.totalCount = res.totalCount;\n      canvasHeight.value = 110\n    }\n  }).catch(()=>{\n    ctrl.loading = true\n  });\n};\n\nconst preview = (item) => {\n  previewModel.form = {...item}\n  previewModel.visible = true\n}\n\nconst handleClose = () => {};\n</script>\n\n<style lang=\"scss\">\n.page-account-certificate {\n  .el-tabs__header {\n    margin: 0;\n  }\n  .el-tabs__nav-wrap {\n    padding: 0 30px;\n  }\n  .el-tabs__nav {\n    padding: 10px 0;\n  }\n}\n</style>\n<style lang=\"scss\" scoped>\n.list {\n  padding: 0 30px;\n  .item {\n    padding: 30px 0;\n    border-bottom: 1px solid #EBEEF5;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-wrap: wrap;\n    .flex_left{\n      display: flex;\n    }\n    .flex_right .el-button{\n      width: 100px;\n      height: 38px;\n      border-radius: 5px;\n    }\n    .pic {\n      padding: 5px;\n      width: 165px;\n      height: 120px;\n      border-radius: 5px;\n      overflow: hidden;\n      position: relative;\n      background: #f6f8fb;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      img {\n        max-width: 155px;\n        max-height: 100px;\n      }\n    }\n    .rt {\n      display: flex;\n      flex-direction: column;\n      flex: 1;\n      margin-left: 20px;\n      position: relative;\n      .name {\n        width: 460px;\n        font-size: 16px;\n        display: -webkit-box;\n        text-overflow: ellipsis;\n        -webkit-line-clamp: 1;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n      }\n      .time {\n        color: #999;\n        margin-top: 5px;\n      }\n      .bottom {\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        width: 100%;\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-end;\n        color: #999;\n        display: -webkit-box;\n        text-overflow: ellipsis;\n        -webkit-line-clamp: 1;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n      }\n      .cgray {\n        color: #999;\n      }\n      .cred {\n        color: #f61818;\n      }\n    }\n  }\n  .preview {\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    background: rgba(0, 0, 0, 0.5);\n    img {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n    .close {\n      position: absolute;\n      width: 40px;\n      height: 40px;\n      background: #727272;\n      border-radius: 50%;\n      top: 80px;\n      right: 80px;\n    }\n  }\n}\n</style>\n"],"names":["store","useUserStore","getUserView","useHead","title","useRouter","canvasHeight","ref","courseType","data","reactive","certImgVisible","currentItem","tabsList","name","type","list","pages","current","totalCount","userInfo","nickname","ctrl","loading","previewModel","visible","form","onMounted","then","res","handleClick","tab","event","handleCurrentChange","val","value","getData","document","querySelector","scrollTop","page","userCertPage","effectiveStatus","parseInt","pageCurrent","pageSize","forEach","item","certInfo","userName","totalPage","catch"],"mappings":"ggBAkFA,MAAAA,EAAAC,KACAC,YAAAA,GAAAF,EACAG,EAAA,CACAC,MAAA,SAEAC,IACA,MAAAC,EAAAC,EAAA,GACAC,EAAAD,EAAA,IACAE,EAAAC,EAAA,CACAC,gBAAA,EACAC,YAAA,CAAA,EACAC,SAAA,CACA,CACAC,KAAA,OACAC,KAAA,IAEA,CACAD,KAAA,MACAC,KAAA,GAEA,CACAD,KAAA,MACAC,KAAA,IAGAC,KAAA,GACAC,MAAA,EACAC,QAAA,EACAC,WAAA,EACAC,SAAA,CAAAC,SAAA,MAEAC,EAAAZ,EAAA,CACAa,SAAA,IAGAC,EAAAd,EAAA,CACAe,SAAA,EACAC,KAAA,CAAA,IAGAC,GAAA,KACAzB,GAAA,GAAA0B,MAAAC,IACApB,EAAAW,SAAAS,CAAA,WAKA,MAAAC,EAAA,CAAAC,EAAAC,KACAvB,EAAAO,KAAA,QAQAiB,EAAAC,IACA5B,EAAA6B,MAAA,EACAC,EAAAF,GACAG,SAAAC,cAAA,QAAAC,UAAA,GAAA,EAGAH,EAAA,CAAAI,EAAA,KACAlB,EAAAC,SAAA,EACAkB,EAAA,CACAC,gBAAAC,SAAAnC,EAAA2B,QAAA,GACAS,YAAAJ,EACAK,SAAA,KACAjB,MAAAC,IACAP,EAAAC,SAAA,EACAM,IACAA,EAAAb,KAAAa,EAAAb,MAAA,GACAa,EAAAb,KAAA8B,SAAAC,IACAA,EAAAC,SAAAC,SAAAxC,EAAAW,SAAAC,QAAA,IAEAZ,EAAAO,KAAAa,EAAAb,KACAP,EAAAQ,MAAAY,EAAAqB,UACAzC,EAAAS,QAAAW,EAAAe,YACAnC,EAAAU,WAAAU,EAAAV,WACAb,EAAA6B,MAAA,IACA,IACAgB,OAAA,KACA7B,EAAAC,SAAA,CAAA,GACA,48BAGA,CAAAwB,IACAvB,EAAAE,KAAA,IAAAqB,GACAvB,EAAAC,SAAA,CAAA"}