|
- <template>
- <div class="page flex justify-around">
- <div class="card">
- <div class="title">密钥详情</div>
- <div class="key">
- <span class="text">{{ $t("keyMangage.name") }}:{{ name }}</span>
- </div>
- <!-- appId -->
- <div class="key">
- <span class="text">appId:{{ showCode }}</span>
- <span class="showOrHide" @click="showHideCode">{{ showText }}</span>
- <span v-if="showText == '隐藏'" class="copy" @click="copyKey(showCode)"
- >复制</span
- >
- </div>
- <!-- appKey -->
- <div class="key">
- <span class="text">appKey:{{ showCodeII }}</span>
- <span class="showOrHide" @click="showHideCodeII">{{ showTextII }}</span>
- <span
- v-if="showTextII == '隐藏'"
- class="copy"
- @click="copyKey(showCodeII)"
- >复制</span
- >
- </div>
- <!-- signKey -->
- <div class="key">
- <span class="text">signKey:{{ showCodeIII }}</span>
- <span class="showOrHide" @click="showHideCodeIII(showCodeIII)">{{
- showTextIII
- }}</span>
- <span v-if="showTextIII == '隐藏'" class="copy" @click="copyKey"
- >复制</span
- >
- </div>
- <div class="keyStatus">
- <span class="text"
- >密钥状态:
- <span v-if="!keyStatus" style="color: #36db43">正常</span>
- <span v-else style="color: #ff0000">失效</span>
- </span>
- <span v-if="keyStatus" class="fail" @click="changeStatus(0)">恢复</span>
- <span v-if="!keyStatus" class="success" @click="changeStatus(1)"
- >作废</span
- >
- </div>
- </div>
- </div>
- </template>
-
- <!-- videoType==1为竖,==2为横 -->
- <script setup>
- //#region 导入
- import { linkEmits } from "element-plus";
- import { getCurrentInstance } from "vue";
-
- import { useI18n } from "vue-i18n";
-
- import { useRoute, useRouter } from "vue-router";
-
- import { getKeyByIdApi, updateKeyStatusApi } from "@/api_mangage/key";
-
- const route = useRoute();
- const router = useRouter();
- const { locale } = useI18n();
- const lanChange = ref(locale);
- const AccessToken = localStorage.getItem("AccessToken"); // 判断有没有登录
-
- const keyId = ref("");
- const name = ref("");
-
- const appId = ref("");
- const hideCode = ref("");
- const showCode = ref("");
- const showText = ref("查看");
- const detailId = ref("");
-
-
- const showHideCode = () => {
- if (showText.value == "查看") {
- showText.value = "隐藏";
- showCode.value = appId.value;
- } else {
- showText.value = "查看";
- showCode.value = hideCode.value;
- }
- };
-
- const appKey = ref("");
- const hideCodeII = ref("");
- const showCodeII = ref("");
- const showTextII = ref("查看");
-
- const showHideCodeII = () => {
- if (showTextII.value == "查看") {
- showTextII.value = "隐藏";
- showCodeII.value = appKey.value;
- } else {
- showTextII.value = "查看";
- showCodeII.value = hideCodeII.value;
- }
- };
-
- const signKey = ref("");
- const hideCodeIII = ref("");
- const showCodeIII = ref("");
- const showTextIII = ref("查看");
-
- const showHideCodeIII = () => {
- if (showTextIII.value == "查看") {
- showTextIII.value = "隐藏";
- showCodeIII.value = signKey.value;
- } else {
- showTextIII.value = "查看";
- showCodeIII.value = hideCodeIII.value;
- }
- };
-
- const getKeyFunc = async () => {
- const id = keyId.value;
- try {
- const res = await getKeyByIdApi(id);
- console.log(res, "res");
- detailId.value = res.data.id
- appId.value = res.data.appId;
- appKey.value = res.data.appKey;
- signKey.value = res.data.signKey;
- keyStatus.value = res.data.status;
- name.value = res.data.name;
-
- const len = appId.value.length;
- const lenII = appKey.value.length;
- const lenIII = signKey.value.length;
-
- let code = "";
- let codeII = "";
- let codeIII = "";
- for (let index = 0; index < len; index++) {
- code += "*";
- }
-
- for (let index = 0; index < lenII; index++) {
- codeII += "*";
- }
-
- for (let index = 0; index < lenIII; index++) {
- codeIII += "*";
- }
- hideCode.value = code;
- showCode.value = code;
-
- hideCodeII.value = codeII;
- showCodeII.value = codeII;
-
- hideCodeIII.value = codeIII;
- showCodeIII.value = codeIII;
- } catch (error) {
- console.log(error, "err");
- }
- };
-
- const copyKey = (text) => {
- navigator.clipboard
- .writeText(text)
- .then(() => {
- ElMessage.success("复制成功!");
- })
- .catch(() => {
- ElMessage.error("复制失败!");
- });
- };
-
- const keyStatus = ref("");
-
- const changeStatus = async (status) => {
- const id = detailId.value;
- if (status) {
- ElMessageBox.confirm("此操作将作废密钥,确定?", "Warning", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning",
- })
- .then(async () => {
- try {
- const res = await updateKeyStatusApi(id, status);
- if (res.code == 200) {
- ElMessage({
- type: "success",
- message: "作废成功!",
- });
- getKeyFunc();
- }
- } catch (error) {
- console.log(error, "err");
- }
- })
- .catch(() => {});
- } else {
- try {
- const res = await updateKeyStatusApi(id, status);
- if (res.code == 200) {
- ElMessage({
- type: "success",
- message: "恢复成功!",
- });
- getKeyFunc();
- }
- } catch (error) {
- console.log(error, "err");
- }
- }
- };
-
- onMounted(() => {
- keyId.value = route.query.id;
- getKeyFunc();
- });
- </script>
-
- <style lang="scss" scoped>
- .page {
- height: calc(100vh - 80px);
- // height: calc(100vh - 80px);
- background-color: #ffffff;
- border-radius: 30px 0 0 0;
- overflow: hidden;
- .card {
- width: 80%;
- height: 70%;
- background-color: #fafafa;
- margin-top: 10vh;
- border-radius: 5vh;
- box-shadow: #0000002e 1px 1px 1px 1px;
-
- .title {
- text-align: center;
- font-size: 3vh;
- padding: 4vh;
- }
-
- .key {
- text-align: center;
- font-size: 2.5vh;
- padding: 5vh;
- padding-bottom: 0.5vh;
- text-align: left;
-
- .copy {
- color: #ffffff;
- margin-left: 2vh;
- cursor: pointer;
- transition: all 0.3s;
- background-color: #3a57b6;
- padding: 0.7vh;
- border-radius: 15px;
- &:hover {
- background-color: #1ceedc;
- }
- }
- .showOrHide {
- color: #20b4a8;
- margin-left: 2vh;
- cursor: pointer;
- transition: all 0.3s;
- &:hover {
- color: #476ad9;
- }
- }
- }
- .keyStatus {
- text-align: center;
- font-size: 2.9vh;
- padding: 4vh;
- margin-top: 1vh;
-
- .success {
- color: #ffffff;
- background-color: #ff0000;
- margin-left: 2vh;
- padding: 0.7vh;
- border-radius: 15px;
- cursor: pointer;
- transition: all 0.3s;
- &:hover {
- background-color: #36db43;
- }
- }
- .fail {
- color: #ffffff;
- background-color: #36db43;
- margin-left: 2vh;
- padding: 0.7vh;
- border-radius: 15px;
- cursor: pointer;
- transition: all 0.3s;
- &:hover {
- background-color: #ff0000;
- }
- }
- }
- }
- }
- </style>
|