签字不显示问题

src/main/resources/static/components/plugins/sysSignature/pc.vue

@@ -35,22 +35,58 @@ module.exports = {
   },
   data() {
     return {
-      //前端唯一标识 当然后端还有用户id作为唯一标识
+      // 二维码携带本次组件实例的标识，与服务端当前登录用户共同确定签字记录。
       id: new Date().getTime() + Math.floor(Math.random() * 10000) + 1,
       signatureAddress: null,
       interval: null,
+      connectionWaitResolve: null,
+      unsubscribeSignature: null,
       signatureContent: null,
       loading: true,
     }
   },
   methods: {
-    async init() {
-      const {code, data} = await this.$axios.post("/platform/signature/get")
-      if (code === 0) {
-        this.signatureContent = data && data.signature
-        this.$emit("input", this.signatureContent)
-      }
+    /**
+     * 无请求参数，返回 Promise；响应 code 为0表示成功，data.signature 为已有签字图片地址。
+     * 请求结束后由 mounted 的 finally 统一关闭 loading。
+     */
+    init() {
       this.signatureAddress = origin + "/platform/signature/scanPcCode?id=" + this.id
+      return this.$axios.post("/platform/signature/get")
+          .then((res) => {
+            if (this._isBeingDestroyed || this._isDestroyed) {
+              return
+            }
+            if (res.code !== 0) {
+              throw new Error("签字信息加载失败")
+            }
+            this.signatureContent = res.data && res.data.signature
+            this.$emit("input", this.signatureContent)
+          })
+    },
+    // 返回等待完成的 Promise；连接成功、等待30秒或组件销毁时结束等待。
+    waitForConnection() {
+      return new Promise((resolve) => {
+        const startedAt = Date.now()
+        this.connectionWaitResolve = resolve
+        const checkReady = () => {
+          this.interval = null
+          if (this._isBeingDestroyed || this._isDestroyed ||
+              (webSocketPubSub.ws && webSocketPubSub.ws.readyState === WebSocket.OPEN)) {
+            this.connectionWaitResolve = null
+            resolve()
+            return
+          }
+          if (Date.now() - startedAt >= 30000) {
+            this.connectionWaitResolve = null
+            this.$message.warning("签字消息连接超时，请刷新页面重试")
+            resolve()
+            return
+          }
+          this.interval = setTimeout(checkReady, 100)
+        }
+        checkReady()
+      })
     },
     signatureAgain() {
       const val = sessionStorage.getItem("h5-scan-code-signature-" + this.id)
@@ -58,25 +94,42 @@ module.exports = {
       this.$emit("input", val)
     }
   },
-  async mounted() {
-    await this.init()
-    webSocketPubSub.subscribe("h5-scan-code-signature", (data) => {
-      console.info("ws:收到签字成功消息:", data)
+  mounted() {
+    this.loading = true
+    // 先登记消息回调，连接成功后由公共连接加入房间，避免请求期间遗漏订阅。
+    this.unsubscribeSignature = webSocketPubSub.subscribe("h5-scan-code-signature", (data) => {
       this.signatureContent = data.value
       this.$emit("input", data.value)
     })
-
-    // 可选：轮询或 watch ready 状态
-    const checkReady = () => {
-      if (webSocketPubSub.ws && webSocketPubSub.ws.readyState === WebSocket.OPEN) {
-        console.info("ws.readyState is open");
-        this.loading = false;
-        console.log(this.signatureAddress)
-      } else {
-        setTimeout(checkReady, 100);
-      }
-    };
-    checkReady();
+    this.init()
+        .then(() => {
+          if (!this._isBeingDestroyed && !this._isDestroyed) {
+            return this.waitForConnection()
+          }
+        })
+        .catch(() => {
+          if (!this._isBeingDestroyed && !this._isDestroyed) {
+            this.$message.error("签字信息加载失败，请刷新页面重试")
+          }
+        })
+        .finally(() => {
+          if (!this._isBeingDestroyed && !this._isDestroyed) {
+            this.loading = false
+          }
+        })
+  },
+  beforeDestroy() {
+    // pjax 切换页面时取消轮询和订阅，旧组件不得继续接收签字消息。
+    clearTimeout(this.interval)
+    this.interval = null
+    if (this.connectionWaitResolve) {
+      this.connectionWaitResolve()
+      this.connectionWaitResolve = null
+    }
+    if (this.unsubscribeSignature) {
+      this.unsubscribeSignature()
+      this.unsubscribeSignature = null
+    }
   }
 }
 </script>