-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #16 from MonteCarloClub/history-onchain
查询证书的链上信息，历史颁发记录
- Loading branch information
Showing
8 changed files
with
296 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| <script setup lang="ts"> | ||
| import { ref, onMounted } from "vue"; | ||
| import { history } from "@/api/cert"; | ||
| const modalVisible = ref(false); | ||
| const loadingMore = ref(false); | ||
| const hasMore = ref(true); | ||
| const list = ref<string[]>([]) | ||
| let index = 0; | ||
| const count = 10; | ||
| function fetchNext() { | ||
| history({ | ||
| count, | ||
| index | ||
| }).then((res) => { | ||
| const { certificates } = res; | ||
| list.value = list.value.concat(certificates); | ||
| index += count; | ||
| // 不够的时候，认为后续没有了 | ||
| if (certificates.length < count) { | ||
| hasMore.value = false; | ||
| } | ||
| }).catch(console.log) | ||
| } | ||
| onMounted(() => { | ||
| fetchNext(); | ||
| }); | ||
| </script> | ||
|
|
||
| <template> | ||
| <a-modal v-model:visible="modalVisible" centered :footer="null" title="证书颁发记录" @ok="modalVisible = false"> | ||
| <div class="scrollable"> | ||
| <p v-for="cert in list" :key="cert">{{ cert }}</p> | ||
| <div style="text-align: center;"> | ||
| <a-button v-if="hasMore" type="link" :loading="loadingMore" @click="fetchNext">获取更多</a-button> | ||
| <p v-else style="color: gray">没有更多了</p> | ||
| </div> | ||
| </div> | ||
| </a-modal> | ||
| <a-button class="link-btn" type="link" size="large" @click="modalVisible = true"> 历史颁发记录 </a-button> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| .link-btn { | ||
| padding: 0; | ||
| } | ||
| .scrollable { | ||
| height: 300px; | ||
| overflow-y: auto; | ||
| } | ||
| .scrollable::-webkit-scrollbar { | ||
| width: 5px; | ||
| height: 5px; | ||
| } | ||
| .scrollable::-webkit-scrollbar-thumb { | ||
| background-color: lightgray; | ||
| border-radius: 2px; | ||
| } | ||
| .scrollable::-webkit-scrollbar-track { | ||
| background-color: transparent; | ||
| } | ||
| .scrollable-hidden { | ||
| overflow: auto; | ||
| } | ||
| .scrollable-hidden::-webkit-scrollbar { | ||
| width: 0px; | ||
| height: 0px; | ||
| } | ||
| .scrollable-hidden::-webkit-scrollbar-track { | ||
| background-color: transparent; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| <script setup lang="ts"> | ||
| import { ref } from "vue"; | ||
| import { message } from "ant-design-vue"; | ||
| import CertDetail from "@/components/CertDetail.vue"; | ||
| import SearchInput from "@/components/SearchInput.vue"; | ||
| import { statusOnChain } from "@/api/cert"; | ||
| import { SEARCH_PLACE_HOLDER } from "@/common/constants"; | ||
| import { isObject } from "@/utils/is"; | ||
| const modalVisible = ref(false); | ||
| const cert = ref<API.Cert>(); | ||
| const inputKey = ref('') | ||
| const first = ref(false) | ||
| const loading = ref(false); | ||
| const hasResult = ref(false); | ||
| const revokedTime = ref(''); | ||
| const searchOnChain = (searchKey: string) => { | ||
| const s = searchKey; | ||
| if (s.length < 1) { | ||
| message.error('请输入证书编号') | ||
| return; | ||
| } | ||
| first.value = true; | ||
| inputKey.value = s; | ||
| loading.value = true; | ||
| statusOnChain({ | ||
| no: searchKey | ||
| }).then((res) => { | ||
| hasResult.value = true; | ||
| // 如果未撤销，是 object | ||
| if (isObject(res)) { | ||
| revokedTime.value = '' | ||
| cert.value = res | ||
| return; | ||
| } | ||
| // 如果是 string | ||
| const regexp = /\[Revoked at (.*)\] (.*)/g; | ||
| const matches = Array.from(res.matchAll(regexp)); | ||
| if (matches.length > 0 && matches[0].length === 3) { | ||
| // 撤销时间 | ||
| revokedTime.value = matches[0][1]; | ||
| // 证书信息 | ||
| cert.value = JSON.parse(JSON.parse(matches[0][2])) | ||
| } | ||
| else { | ||
| hasResult.value = false; | ||
| } | ||
| }).catch(() => { | ||
| hasResult.value = false; | ||
| }).finally(() => { | ||
| loading.value = false; | ||
| }) | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <a-modal v-model:visible="modalVisible" centered :footer="null" title="查询证书的链上信息" @ok="modalVisible = false"> | ||
| <div class="panel"> | ||
| <SearchInput :placeholder="SEARCH_PLACE_HOLDER" @search="searchOnChain" /> | ||
| <div v-if="first"> | ||
| <div v-if="loading" class="loading-area"> | ||
| <a-spin tip="正在检索" /> | ||
| </div> | ||
| <div v-else> | ||
| <a-card v-if="hasResult" class="cert-card" title="证书详情"> | ||
| <template #extra> | ||
| <a-tooltip v-if="revokedTime" placement="left" color="#f50"> | ||
| <template #title> | ||
| <span> 撤销时间为：{{ revokedTime }} </span> | ||
| </template> | ||
| <a-tag color="#f50">已撤销</a-tag> | ||
| </a-tooltip> | ||
| <a-tag v-else color="#87d068">有效</a-tag> | ||
| </template> | ||
| <CertDetail :cert="cert" /> | ||
| </a-card> | ||
| <div v-else> | ||
| <a-empty style="margin-top: 100px"> | ||
| <template #description> | ||
| <span>未搜索到编号为</span> | ||
| <a-tag> {{ inputKey }} </a-tag> | ||
| <span>的证书</span> | ||
| </template> | ||
| </a-empty> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </a-modal> | ||
| <a-button class="link-btn" type="link" size="large" @click="modalVisible = true"> 查询链上证书 </a-button> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| .link-btn { | ||
| padding: 0; | ||
| } | ||
| .panel { | ||
| margin: 0 auto; | ||
| } | ||
| .cert-card { | ||
| margin-top: 22px; | ||
| text-align: left; | ||
| } | ||
| .panel .ant-card-meta { | ||
| margin-bottom: 22px; | ||
| } | ||
| .loading-area { | ||
| margin-top: 120px; | ||
| text-align: center; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.