|
@@ -1,19 +1,75 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="certification-view">
|
|
<div class="certification-view">
|
|
|
- sfdjslfdjk
|
|
|
|
|
- <button
|
|
|
|
|
- class="return"
|
|
|
|
|
- @click="router.go(-1)"
|
|
|
|
|
|
|
+ <div
|
|
|
|
|
+ ref="certifWrap"
|
|
|
|
|
+ class="certif-wrap"
|
|
|
>
|
|
>
|
|
|
- 返回
|
|
|
|
|
- </button>
|
|
|
|
|
|
|
+ <img
|
|
|
|
|
+ class="certif"
|
|
|
|
|
+ src="@/assets/images/certification.jpg"
|
|
|
|
|
+ alt=""
|
|
|
|
|
+ draggable="false"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div class="certif-code">
|
|
|
|
|
+ {{ certificationCode }}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="name">
|
|
|
|
|
+ {{ name }}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <img
|
|
|
|
|
+ class="cert-name-bottom-line"
|
|
|
|
|
+ src="@/assets/images/cert-name-bottom-line.png"
|
|
|
|
|
+ alt=""
|
|
|
|
|
+ draggable="false"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div class="main-text">
|
|
|
|
|
+ 业已完成“担当——证券期货基金行业公益力量展”观展任务,实现见证证券期货基金行业公益力量的目标,中国证券博物馆特授予公益合伙人证书。
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="organization-name">
|
|
|
|
|
+ 中国证券博物馆
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="date">
|
|
|
|
|
+ {{ date }}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="btn-group">
|
|
|
|
|
+ <button
|
|
|
|
|
+ class="download"
|
|
|
|
|
+ @click="onClickDownload"
|
|
|
|
|
+ >
|
|
|
|
|
+ 保存证书
|
|
|
|
|
+ </button>
|
|
|
|
|
+ <button
|
|
|
|
|
+ class="return"
|
|
|
|
|
+ @click="router.go(-1)"
|
|
|
|
|
+ >
|
|
|
|
|
+ 返回
|
|
|
|
|
+ </button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ <van-loading
|
|
|
|
|
+ v-show="isShowLoading"
|
|
|
|
|
+ class="loading"
|
|
|
|
|
+ type="spinner"
|
|
|
|
|
+ />
|
|
|
|
|
+
|
|
|
|
|
+ <a
|
|
|
|
|
+ v-show="false"
|
|
|
|
|
+ ref="forDownload"
|
|
|
|
|
+ :href="aDownloadHref"
|
|
|
|
|
+ download="share.jpg"
|
|
|
|
|
+ />
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
-import { ref, computed, watch, onMounted } from "vue"
|
|
|
|
|
|
|
+import { ref, computed, watch, onMounted, nextTick } from "vue"
|
|
|
import { useRoute, useRouter } from "vue-router"
|
|
import { useRoute, useRouter } from "vue-router"
|
|
|
import { useStore } from "vuex"
|
|
import { useStore } from "vuex"
|
|
|
|
|
+import { getMyCertificationInfo } from '@/api.js'
|
|
|
|
|
+import dayjs from 'dayjs'
|
|
|
|
|
+import html2canvas from 'html2canvas'
|
|
|
|
|
|
|
|
const route = useRoute()
|
|
const route = useRoute()
|
|
|
const router = useRouter()
|
|
const router = useRouter()
|
|
@@ -24,6 +80,40 @@ const {
|
|
|
windowSizeWhenDesignForRef,
|
|
windowSizeWhenDesignForRef,
|
|
|
} = useSizeAdapt(390, 752)
|
|
} = useSizeAdapt(390, 752)
|
|
|
|
|
|
|
|
|
|
+const certificationCode = ref('')
|
|
|
|
|
+const name = ref('')
|
|
|
|
|
+const date = ref('')
|
|
|
|
|
+
|
|
|
|
|
+const isShowLoading = ref(true)
|
|
|
|
|
+getMyCertificationInfo().then((res) => {
|
|
|
|
|
+ isShowLoading.value = false
|
|
|
|
|
+ certificationCode.value = res.description
|
|
|
|
|
+ name.value = res.certName
|
|
|
|
|
+ date.value = dayjs(res.createTime).format('YYYY年MM月DD日')
|
|
|
|
|
+})
|
|
|
|
|
+
|
|
|
|
|
+const certifWrap = ref(null)
|
|
|
|
|
+const aDownloadHref = ref(null)
|
|
|
|
|
+const forDownload = ref('')
|
|
|
|
|
+
|
|
|
|
|
+const onClickDownload = utils.throttle(function() {
|
|
|
|
|
+ isShowLoading.value = true
|
|
|
|
|
+ nextTick(() => {
|
|
|
|
|
+ // #capture 就是我们要获取截图对应的 DOM 元素选择器
|
|
|
|
|
+ html2canvas(certifWrap.value, {
|
|
|
|
|
+ useCORS: true, // 【重要】开启跨域配置
|
|
|
|
|
+ scale: 1920 / certifWrap.value.clientWidth,
|
|
|
|
|
+ allowTaint: true, // 允许跨域图片
|
|
|
|
|
+ preserveDrawingBuffer: true,
|
|
|
|
|
+ }).then((canvas) => {
|
|
|
|
|
+ aDownloadHref.value = canvas.toDataURL('image/jpeg', 1.0)
|
|
|
|
|
+ nextTick(() => {
|
|
|
|
|
+ forDownload.value.click()
|
|
|
|
|
+ isShowLoading.value = false
|
|
|
|
|
+ })
|
|
|
|
|
+ })
|
|
|
|
|
+ })
|
|
|
|
|
+})
|
|
|
|
|
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
@@ -35,20 +125,116 @@ const {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
height: 100%;
|
|
height: 100%;
|
|
|
background-color: rgba(207, 187, 156, 1);
|
|
background-color: rgba(207, 187, 156, 1);
|
|
|
- >button.return{
|
|
|
|
|
|
|
+ >.certif-wrap{
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 43%;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ width: calc(390 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ transform: translateY(-50%);
|
|
|
|
|
+ >img.certif{
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+ >.certif-code{
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ right: calc(43 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ top: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ font-size: calc(6 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ font-family: Source Han Serif CN, Source Han Serif CN;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: #31271D;
|
|
|
|
|
+ line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ }
|
|
|
|
|
+ >.name{
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ left: calc(66 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ width: calc(37 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ top: calc(130 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ font-size: calc(8 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ font-family: Source Han Serif CN, Source Han Serif CN;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: #31271D;
|
|
|
|
|
+ line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ white-space: pre;
|
|
|
|
|
+ }
|
|
|
|
|
+ .cert-name-bottom-line{
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ left: calc(66 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ top: calc(145 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ width: calc(37 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ }
|
|
|
|
|
+ >.main-text{
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ left: calc(66 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ top: calc(149 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ width: calc(261 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ text-indent: 2em;
|
|
|
|
|
+ font-size: calc(8 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ font-family: Source Han Serif CN, Source Han Serif CN;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: #31271D;
|
|
|
|
|
+ line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ }
|
|
|
|
|
+ >.organization-name{
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ right: calc(66 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ top: calc(206 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ font-size: calc(7 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ font-family: Source Han Serif CN, Source Han Serif CN;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: #31271D;
|
|
|
|
|
+ line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ }
|
|
|
|
|
+ >.date{
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ right: calc(66 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ top: calc(217 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ font-size: calc(7 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ font-family: Source Han Serif CN, Source Han Serif CN;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: #31271D;
|
|
|
|
|
+ line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ >.btn-group{
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
- width: calc(348 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
- height: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
- top: calc(630 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
|
|
+ bottom: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
left: 50%;
|
|
left: 50%;
|
|
|
transform: translate(-50%, 0);
|
|
transform: translate(-50%, 0);
|
|
|
- background-color: #FFE6A5;
|
|
|
|
|
- border-radius: calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
- font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
- font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
|
|
- font-weight: bold;
|
|
|
|
|
- color: #A97C46;
|
|
|
|
|
- line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
|
|
+ >button.download{
|
|
|
|
|
+ width: calc(348 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ height: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ background-color: #FFE6A5;
|
|
|
|
|
+ border-radius: calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: #A97C46;
|
|
|
|
|
+ line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ }
|
|
|
|
|
+ >button.return{
|
|
|
|
|
+ margin-top: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ border: 1px solid #fff;
|
|
|
|
|
+ width: calc(348 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ height: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ border-radius: calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ >.loading{
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ background-color: rgba(0, 0, 0, 0.3);
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|