邃芒慧影管理端
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
 
 
 
 

302 lignes
7.1 KiB

  1. <template>
  2. <div class="page flex justify-around">
  3. <div class="card">
  4. <div class="title">密钥详情</div>
  5. <div class="key">
  6. <span class="text">{{ $t("keyMangage.name") }}:{{ name }}</span>
  7. </div>
  8. <!-- appId -->
  9. <div class="key">
  10. <span class="text">appId:{{ showCode }}</span>
  11. <span class="showOrHide" @click="showHideCode">{{ showText }}</span>
  12. <span v-if="showText == '隐藏'" class="copy" @click="copyKey(showCode)"
  13. >复制</span
  14. >
  15. </div>
  16. <!-- appKey -->
  17. <div class="key">
  18. <span class="text">appKey:{{ showCodeII }}</span>
  19. <span class="showOrHide" @click="showHideCodeII">{{ showTextII }}</span>
  20. <span
  21. v-if="showTextII == '隐藏'"
  22. class="copy"
  23. @click="copyKey(showCodeII)"
  24. >复制</span
  25. >
  26. </div>
  27. <!-- signKey -->
  28. <div class="key">
  29. <span class="text">signKey:{{ showCodeIII }}</span>
  30. <span class="showOrHide" @click="showHideCodeIII(showCodeIII)">{{
  31. showTextIII
  32. }}</span>
  33. <span v-if="showTextIII == '隐藏'" class="copy" @click="copyKey"
  34. >复制</span
  35. >
  36. </div>
  37. <div class="keyStatus">
  38. <span class="text"
  39. >密钥状态:
  40. <span v-if="!keyStatus" style="color: #36db43">正常</span>
  41. <span v-else style="color: #ff0000">失效</span>
  42. </span>
  43. <span v-if="keyStatus" class="fail" @click="changeStatus(0)">恢复</span>
  44. <span v-if="!keyStatus" class="success" @click="changeStatus(1)"
  45. >作废</span
  46. >
  47. </div>
  48. </div>
  49. </div>
  50. </template>
  51. <!-- videoType==1为竖,==2为横 -->
  52. <script setup>
  53. //#region 导入
  54. import { linkEmits } from "element-plus";
  55. import { getCurrentInstance } from "vue";
  56. import { useI18n } from "vue-i18n";
  57. import { useRoute, useRouter } from "vue-router";
  58. import { getKeyByIdApi, updateKeyStatusApi } from "@/api_mangage/key";
  59. const route = useRoute();
  60. const router = useRouter();
  61. const { locale } = useI18n();
  62. const lanChange = ref(locale);
  63. const AccessToken = localStorage.getItem("AccessToken"); // 判断有没有登录
  64. const keyId = ref("");
  65. const name = ref("");
  66. const appId = ref("");
  67. const hideCode = ref("");
  68. const showCode = ref("");
  69. const showText = ref("查看");
  70. const showHideCode = () => {
  71. if (showText.value == "查看") {
  72. showText.value = "隐藏";
  73. showCode.value = appId.value;
  74. } else {
  75. showText.value = "查看";
  76. showCode.value = hideCode.value;
  77. }
  78. };
  79. const appKey = ref("");
  80. const hideCodeII = ref("");
  81. const showCodeII = ref("");
  82. const showTextII = ref("查看");
  83. const showHideCodeII = () => {
  84. if (showTextII.value == "查看") {
  85. showTextII.value = "隐藏";
  86. showCodeII.value = appKey.value;
  87. } else {
  88. showTextII.value = "查看";
  89. showCodeII.value = hideCodeII.value;
  90. }
  91. };
  92. const signKey = ref("");
  93. const hideCodeIII = ref("");
  94. const showCodeIII = ref("");
  95. const showTextIII = ref("查看");
  96. const showHideCodeIII = () => {
  97. if (showTextIII.value == "查看") {
  98. showTextIII.value = "隐藏";
  99. showCodeIII.value = signKey.value;
  100. } else {
  101. showTextIII.value = "查看";
  102. showCodeIII.value = hideCodeIII.value;
  103. }
  104. };
  105. const getKeyFunc = async () => {
  106. const id = keyId.value;
  107. try {
  108. const res = await getKeyByIdApi(id);
  109. console.log(res, "res");
  110. appId.value = res.data.appId;
  111. appKey.value = res.data.appKey;
  112. signKey.value = res.data.signKey;
  113. keyStatus.value = res.data.status;
  114. name.value = res.data.name;
  115. const len = signKey.value.length;
  116. const lenII = signKey.value.length;
  117. const lenIII = signKey.value.length;
  118. let code = "";
  119. let codeII = "";
  120. let codeIII = "";
  121. for (let index = 0; index < len; index++) {
  122. code += "*";
  123. }
  124. for (let index = 0; index < lenII; index++) {
  125. codeII += "*";
  126. }
  127. for (let index = 0; index < lenIII; index++) {
  128. codeIII += "*";
  129. }
  130. hideCode.value = code;
  131. showCode.value = code;
  132. hideCodeII.value = codeII;
  133. showCodeII.value = codeII;
  134. hideCodeIII.value = codeIII;
  135. showCodeIII.value = codeIII;
  136. } catch (error) {
  137. console.log(error, "err");
  138. }
  139. };
  140. const copyKey = (text) => {
  141. navigator.clipboard
  142. .writeText(text)
  143. .then(() => {
  144. ElMessage.success("复制成功!");
  145. })
  146. .catch(() => {
  147. ElMessage.error("复制失败!");
  148. });
  149. };
  150. const keyStatus = ref("");
  151. const changeStatus = async (status) => {
  152. const id = keyId.value;
  153. if (status) {
  154. ElMessageBox.confirm("此操作将作废密钥,确定?", "Warning", {
  155. confirmButtonText: "确定",
  156. cancelButtonText: "取消",
  157. type: "warning",
  158. })
  159. .then(async () => {
  160. try {
  161. const res = await updateKeyStatusApi(id, status);
  162. if (res.code == 200) {
  163. ElMessage({
  164. type: "success",
  165. message: "作废成功!",
  166. });
  167. getKeyFunc();
  168. }
  169. } catch (error) {
  170. console.log(error, "err");
  171. }
  172. })
  173. .catch(() => {});
  174. } else {
  175. try {
  176. const res = await updateKeyStatusApi(id, status);
  177. if (res.code == 200) {
  178. ElMessage({
  179. type: "success",
  180. message: "恢复成功!",
  181. });
  182. getKeyFunc();
  183. }
  184. } catch (error) {
  185. console.log(error, "err");
  186. }
  187. }
  188. };
  189. onMounted(() => {
  190. keyId.value = route.query.id;
  191. getKeyFunc();
  192. });
  193. </script>
  194. <style lang="scss" scoped>
  195. .page {
  196. height: calc(100vh - 80px);
  197. // height: calc(100vh - 80px);
  198. background-color: #ffffff;
  199. border-radius: 30px 0 0 0;
  200. overflow: hidden;
  201. .card {
  202. width: 80%;
  203. height: 70%;
  204. background-color: #fafafa;
  205. margin-top: 10vh;
  206. border-radius: 5vh;
  207. box-shadow: #0000002e 1px 1px 1px 1px;
  208. .title {
  209. text-align: center;
  210. font-size: 3vh;
  211. padding: 4vh;
  212. }
  213. .key {
  214. text-align: center;
  215. font-size: 2.5vh;
  216. padding: 5vh;
  217. padding-bottom: 0.5vh;
  218. text-align: left;
  219. .copy {
  220. color: #ffffff;
  221. margin-left: 2vh;
  222. cursor: pointer;
  223. transition: all 0.3s;
  224. background-color: #3a57b6;
  225. padding: 0.7vh;
  226. border-radius: 15px;
  227. &:hover {
  228. background-color: #1ceedc;
  229. }
  230. }
  231. .showOrHide {
  232. color: #20b4a8;
  233. margin-left: 2vh;
  234. cursor: pointer;
  235. transition: all 0.3s;
  236. &:hover {
  237. color: #476ad9;
  238. }
  239. }
  240. }
  241. .keyStatus {
  242. text-align: center;
  243. font-size: 2.9vh;
  244. padding: 4vh;
  245. margin-top: 1vh;
  246. .success {
  247. color: #ffffff;
  248. background-color: #ff0000;
  249. margin-left: 2vh;
  250. padding: 0.7vh;
  251. border-radius: 15px;
  252. cursor: pointer;
  253. transition: all 0.3s;
  254. &:hover {
  255. background-color: #36db43;
  256. }
  257. }
  258. .fail {
  259. color: #ffffff;
  260. background-color: #36db43;
  261. margin-left: 2vh;
  262. padding: 0.7vh;
  263. border-radius: 15px;
  264. cursor: pointer;
  265. transition: all 0.3s;
  266. &:hover {
  267. background-color: #ff0000;
  268. }
  269. }
  270. }
  271. }
  272. }
  273. </style>