商城-查看证书：因为兼容性问题，从打开新窗口改为在原页面显示一张图片。

src/views/ShopView.vue

@@ -208,6 +208,22 @@
       @close="redeemPrizeData = {}, isShowRedeem = false"
       @success="handlePrizeSuccess"
     />
+
+    <div
+      v-show="isShowCertImg"
+      class="cert-view"
+    >
+      <img
+        class="cert-img"
+        :src="certImgUrl"
+        alt=""
+        draggable="false"
+      >
+      <button
+        class="close"
+        @click="isShowCertImg = false"
+      />
+    </div>
   </div>
 
   <div
@@ -364,14 +380,17 @@ const checkRedeem = async() => {
 }
 
 const certCanvas = ref()
-const $isSafari = inject('$isSafari')
+// const $isSafari = inject('$isSafari')
+const isShowCertImg = ref(false)
+const certImgUrl = ref('')
+
 const openCertImg = async(certName) => {
   try {
     pageLoading.value = true
-    let winRef
-    if ($isSafari) {
-      winRef = window.open('', '_blank')
-    }
+    // let winRef
+    // if ($isSafari) {
+    //   winRef = window.open('', '_blank')
+    // }
     if (isRedeemed.value) {
       await getRedeem()
     } else {
@@ -383,15 +402,17 @@ const openCertImg = async(certName) => {
     await nextTick(async() => {
       const canvas = await html2canvas(certCanvas.value, {
         width: certCanvas.value.offsetWidth,
-        scale: 2
+        scale: 1
       })
       canvas.toBlob((blob) => {
         if (blob) {
-          if ($isSafari && winRef) {
-            winRef.location.href = URL.createObjectURL(blob)
-          } else {
-            window.open(URL.createObjectURL(blob))
-          }
+          certImgUrl.value = URL.createObjectURL(blob)
+          isShowCertImg.value = true
+          // if ($isSafari && winRef) {
+          //   winRef.location.href = URL.createObjectURL(blob)
+          // } else {
+          //   window.open(URL.createObjectURL(blob))
+          // }
         }
       })
     })
@@ -765,14 +786,44 @@ const getRedeem = async() => {
       text-shadow: 0px 1px 1px rgba(0,0,0,0.25);
     }
   }
+
+  .cert-view {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(10px);
+    >img.cert-img{
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 80%;
+      height: 80%;
+      object-fit: contain;
+    }
+    >button.close{
+      position: absolute;
+      top: 20px;
+      right: 20px;
+      width: 50px;
+      height: 50px;
+      background-image: url(@/assets/images/icon_close.png);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center center;
+    }
+  }
 }
 
 .cert-canvas {
   position: absolute;
   top: calc(-200% - 1920px);
   left: calc(-200% - 2880px);
-  width: 2880px;
-  height: 1920px;
+  width: 2672px;
+  height: 1838px;
   background: url('@/assets/images/cert-min.png') no-repeat center / contain;
 
   p:first-child {
@@ -787,7 +838,7 @@ const getRedeem = async() => {
   }
   p:last-child {
     position: absolute;
-    left: 765px;
+    left: 705px;
     bottom: 310px;
     font-size: 40px;
   }