版权详情页面更新

package-lock.json

@@ -203,6 +203,12 @@
       "integrity": "sha512-BG7fQKZ689HIoc5h+6D2Dgq1fABRa0RbBWKBd9SP/MVRVXROflpm5fhwyATX5duFmbStzyzyycPB8qUYKDH3NA==",
       "dev": true
     },
+    "@types/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==",
+      "dev": true
+    },
     "@types/js-md5": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@types/js-md5/-/js-md5-0.4.3.tgz",
@@ -1203,6 +1209,11 @@
         "reusify": "^1.0.4"
       }
     },
+    "file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -1639,6 +1650,11 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "print-js": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/print-js/-/print-js-1.6.0.tgz",
+      "integrity": "sha512-BfnOIzSKbqGRtO4o0rnj/K3681BSd2QUrsIZy/+WdCIugjIswjmx3lDEZpXB2ruGf9d4b3YNINri81+J0FsBWg=="
+    },
     "promise": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",

package.json

@@ -21,9 +21,11 @@
     "crypto-js": "^4.1.1",
     "dom-to-image": "^2.6.0",
     "element-plus": "^2.1.9",
+    "file-saver": "^2.0.5",
     "js-md5": "^0.7.3",
     "js-sha256": "^0.9.0",
     "pdfjs-dist": "^2.5.207",
+    "print-js": "^1.6.0",
     "simple-components01": "^0.1.15",
     "unplugin-element-plus": "^0.3.2",
     "vue": "^3.2.16",
@@ -33,6 +35,7 @@
   },
   "devDependencies": {
     "@types/crypto-js": "^4.1.1",
+    "@types/file-saver": "^2.0.5",
     "@types/js-md5": "^0.4.3",
     "@types/node": "^17.0.22",
     "@vitejs/plugin-vue": "^2.2.0",

src/components/ImageDisplay/index.vue

+<template>
+  <Transition>
+    <div
+      v-if="visible"
+      class="fixed h-screen w-screen top-0 left-0 flex items-center justify-center flex-col"
+    >
+      <div class="opacity-70 bg-black absolute w-full h-full"></div>
+      <div
+        class="close bg-white cursor-pointer"
+        @click="$emit('update:visible', false)"
+      >
+        <img src="@/assets/img/close.png" class="w-9" alt="" srcset="" />
+      </div>
+      <ElImage
+        id="imageDisplay"
+        :src="url"
+        :style="{
+          transform: `scale(${scale})`,
+          zIndex: 1,
+          position: 'relative',
+        }"
+      />
+      <div class="relative z-10">
+        <slot></slot>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { ElImage } from "element-plus";
+import { ref, watch } from "vue";
+import { useEventListener } from "@vueuse/core";
+
+const props = defineProps<{
+  visible: boolean;
+  url: string;
+}>();
+const emit = defineEmits(["update:visible"]);
+const scale = ref(1);
+
+watch(
+  () => [props.visible, props.url],
+  () => {
+    scale.value = 1;
+  }
+);
+
+useEventListener(window, "keydown", (e) => {
+  if (e.key === "Escape") {
+    emit("update:visible", false);
+  }
+});
+
+useEventListener(document, "wheel", (e) => {
+  if (e.deltaY > 0) {
+    if (scale.value < 0.2) return;
+    scale.value /= 1.1;
+  } else {
+    if (scale.value > 7) return;
+    scale.value *= 1.1;
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.close {
+  position: absolute;
+  top: 20px;
+  right: 30px;
+}
+</style>

src/views/CopyRightDetail/index.vue

@@ -13,12 +13,46 @@
           <syButton mode="elementBtn" type="default" size="large"
             >删除</syButton
           >
-          <syButton mode="elementBtn" type="default" size="large"
+          <syButton
+            mode="elementBtn"
+            type="default"
+            size="large"
+            @click="showCert = true"
             >查看证书</syButton
           >
-          <syButton mode="elementBtn" type="default" size="large"
+          <syButton
+            mode="elementBtn"
+            type="default"
+            size="large"
+            @click="
+              saveAs(
+                'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                '证书.png'
+              )
+            "
             >下载tsa证书</syButton
           >
+          <ImageDisplay
+            v-model:visible="showCert"
+            url="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+          >
+            <div class="flex mt-7">
+              <div
+                class="imgBtn mr-2.5"
+                @click="
+                  saveAs(
+                    'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                    '证书.png'
+                  )
+                "
+              >
+                保存证书
+              </div>
+              <div class="imgBtn" @click="printJS('imageDisplay', 'html')">
+                打印证书
+              </div>
+            </div>
+          </ImageDisplay>
         </div>
       </div>
       <div class="time">2022-06-27 12:12:20</div>
@@ -167,6 +201,12 @@
 <script setup lang="ts">
 import { syHeaderNavBar, syButton } from "cqk-sy-ui";
 import ModuleContainer from "@/components/ModuleContainer/index.vue";
+import ImageDisplay from "@/components/ImageDisplay/index.vue";
+import { ref } from "vue";
+import { saveAs } from "file-saver";
+import printJS from "print-js";
+
+const showCert = ref(false);
 </script>
 
 <style lang="scss" scoped>
@@ -211,4 +251,18 @@ import ModuleContainer from "@/components/ModuleContainer/index.vue";
   line-height: 40px;
   word-break: break-all;
 }
+.imgBtn {
+  width: 100px;
+  height: 40px;
+  border-radius: 4px;
+  border: 1px solid #ffffff;
+  font-size: 14px;
+  font-weight: 500;
+  color: #ffffff;
+  line-height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
 </style>