完成二维码生成及根据uuid获取扫码登录信息，可以进行正常登录

package-lock.json

@@ -12,6 +12,7 @@
         "cors": "^2.8.5",
         "element-plus": "^2.4.4",
         "js-md5": "^0.8.3",
+        "qrcode": "^1.5.3",
         "video.js": "^8.9.0",
         "vue": "^3.3.11",
         "vue-cookies": "^1.8.3",
@@ -930,6 +931,28 @@
         "npm": ">=5"
       }
     },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -997,6 +1020,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -1024,6 +1055,32 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -1057,6 +1114,14 @@
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
       "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
     },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/decompress-response": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
@@ -1079,6 +1144,11 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA=="
+    },
     "node_modules/dom-walk": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
@@ -1109,6 +1179,16 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/encode-utf8": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/encode-utf8/-/encode-utf8-1.0.3.tgz",
+      "integrity": "sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw=="
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -1180,6 +1260,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.4",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
@@ -1231,6 +1323,14 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/glob": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
@@ -1318,6 +1418,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-function": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
@@ -1359,6 +1467,17 @@
       "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
       "integrity": "sha512-ps3I9jAdNtRpJrbBvQjpzyFbss/skHqzS+eu4RxKLaEAtFqkjZaB6TZMSivPbLxf4K7VI4SjR0P5mRCX5+Q25A=="
     },
+    "node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -1545,11 +1664,52 @@
         "wrappy": "1"
       }
     },
+    "node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/parenthesis": {
       "version": "3.1.8",
       "resolved": "https://registry.npmjs.org/parenthesis/-/parenthesis-3.1.8.tgz",
       "integrity": "sha512-KF/U8tk54BgQewkJPvB4s/US3VQY68BRDpH638+7O/n58TpnwiwnOtGIOsT2/i+M78s61BBpeC83STB88d8sqw=="
     },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -1578,6 +1738,14 @@
         "pkcs7": "bin/cli.js"
       }
     },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.33",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
@@ -1618,6 +1786,23 @@
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
+    "node_modules/qrcode": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.3.tgz",
+      "integrity": "sha512-puyri6ApkEHYiVl4CFzo1tDkAZ+ATcnbJrJ6RiBM1Fhctdn/ix9MTE3hRph33omisEbC/2fcfemsseiKgBPKZg==",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "encode-utf8": "^1.0.3",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -1635,6 +1820,19 @@
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
       "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
+    },
     "node_modules/rollup": {
       "version": "4.9.4",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.9.4.tgz",
@@ -1700,6 +1898,11 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
+    },
     "node_modules/simple-concat": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
@@ -1759,6 +1962,30 @@
         "parenthesis": "^3.1.5"
       }
     },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -1938,10 +2165,66 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ=="
+    },
+    "node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
+    },
+    "node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
+    },
+    "node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
     }
   }
 }

package.json

@@ -13,6 +13,7 @@
     "cors": "^2.8.5",
     "element-plus": "^2.4.4",
     "js-md5": "^0.8.3",
+    "qrcode": "^1.5.3",
     "video.js": "^8.9.0",
     "vue": "^3.3.11",
     "vue-cookies": "^1.8.3",

src/api/user.js

@@ -3,6 +3,7 @@ import md5 from 'js-md5';
 
 export const loginService = (loginData) => {
     const params = new URLSearchParams();
+    loginData = loginData._value;
     for (let key in loginData) {
         if (key === "username") {
             //正则表达式判断邮箱
@@ -39,7 +40,7 @@ export const getUUIDService = (registerData) => {
 
 export const getQRService = (qrData) => {
     const params = new URLSearchParams();
-    console.log("qrdata=",qrData);
+    //console.log("qrdata=",qrData);
     for (let key in qrData) {
         params.append(key, qrData[key])
     }

src/views/Login.vue

@@ -86,160 +86,218 @@
     </el-form>
   </el-row>
   <div>
-    <div class="qrcode" ref="qrCodeUrl"></div>
+    <canvas ref="qrCodeCanvas"></canvas>
-    <vue-qr
-      :logoSrc="imageUrl"
-      text="https://blog.csdn.net/weixin_42601136"
-      :size="200"
-    ></vue-qr>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, inject } from "vue";  
+import { ref, onMounted, inject,onUnmounted } from "vue";
 import axios from "axios";
-import { getQRService, getUUIDService, loginService, registerService } from "@/api/user.js";  
+import {
+  getQRService,
+  getUUIDService,
+  loginService,
+  registerService,
+} from "@/api/user.js";
 import router from "@/router/index.js";
-import VueQr from 'vue-qr'; // 确保你已经注册了这个组件 
+import VueQr from "vue-qr"; // 确保你已经注册了这个组件
+import QRCode from "qrcode";
 
-export default {
+const isLogin = ref(true);
-  components: {  
+const qrCodeCanvas = ref(null);
-    VueQr, // 注册 VueQr 组件  
+const globalData = inject("globalData");
-  },
-  setup() {
-    const isLogin = ref(true);
-    const globalData = inject("globalData");
-    var uuid = "";
-    //表单数据
-    var loginData = ref({
-      username: "",
-      email: "lijun.lj@foxmail.com",
-      password: "",
-      ip:"",
-    });l
-    const registerData = ref({
-      username: "",
-      email: "",
-      password: "",
-      repassword: "",
-    });
 
-    //表单校验规则
+// 创建一个响应式引用来存储定时器ID  
-    const rules = {
+const intervalId = ref(null);
-      password: [
+var uuid = "";
-        { required: true, message: "请输入密码", trigger: "blur" },
+//表单数据
-        {
+var loginData = ref({
-          min: 6,
+  username: "",
-          max: 20,
+  email: "",
-          message: "密码长度在 6 到 20 个字符",
+  password: "",
-          trigger: "blur",
+  ip: "",
+});
+
+const registerData = ref({
+  username: "",
+  email: "",
+  password: "",
+  repassword: "",
+});
+
+//表单校验规则
+const rules = {
+  password: [
+    { required: true, message: "请输入密码", trigger: "blur" },
+    {
+      min: 6,
+      max: 20,
+      message: "密码长度在 6 到 20 个字符",
+      trigger: "blur",
+    },
+  ],
+  username: [
+    { required: true, message: "请输入用户名", trigger: "blur" },
+    {
+      min: 5,
+      max: 20,
+      message: "用户名长度在 6 到 20 个字符",
+      trigger: "blur",
+    },
+  ],
+  email: [{}],
+};
+onMounted(() => {
+  init();
+  startInterval();
+  const token = localStorage.getItem("token");
+  if (token !== null) {
+    isLogin.value = true; // 更新登录状态
+    router.push("/videoList"); // 跳转到视频列表页面
+    // 你可以在这里获取 UID 并更新 uid.value
+  }
+});
+onUnmounted(() => {
+  stopInterval();
+});
+
+// 开启定时器  
+const startInterval = () => {  
+  if (intervalId.value) {  
+    // 如果定时器已经开启，则不执行任何操作  
+    return;  
+  }  
+  intervalId.value = setInterval(getQRStatus, 1000);  
+};
+
+// 关闭定时器  
+const stopInterval = () => {  
+  if (intervalId.value) {  
+    clearInterval(intervalId.value);  
+    intervalId.value = null; // 清除引用中的定时器ID  
+  }  
+};  
+
+const creatQrCode = async () => {
+  console.log("creatQrCode:", uuid);
+  var qrcode = new qrcode(this.$refs.qrCodeUrl, {
+    text: uuid, // 需要转换为二维码的内容
+    width: 100,
+    height: 100,
+    colorDark: "#000000",
+    colorLight: "#ffffff",
+    correctLevel: QRCode.CorrectLevel.H,
+  });
+};
+
+//登录接口调用
+const login = async () => {
+  let result = await loginService(loginData);
+  globalData.token = result.data;
+  localStorage.setItem("token", result.data.token);
+  localStorage.setItem("userId", result.data.id);
+  localStorage.setItem("username", result.data.username);
+  let now = new Date();
+  localStorage.setItem("end_time", now.setDate(now.getHours() + 12)); //过期时间
+  //token.value= result.data;
+  router.push("/videoList");
+};
+
+const generateQRCode = () => {
+  // 假设我们有一个数据字符串要转换为二维码
+  const data = uuid;
+  // 确保 canvas 已经被渲染到 DOM 中
+  if (qrCodeCanvas.value) {
+    const canvas = qrCodeCanvas.value;
+    const ctx = canvas.getContext("2d");
+
+    // 设置 canvas 的大小
+    canvas.width = 256;
+    canvas.height = 256;
+
+    // 使用 qrcode 库生成二维码
+    QRCode.toCanvas(
+      canvas,
+      data,
+      {
+        width: 256,
+        height: 256,
+        color: {
+          dark: "#000000",
+          light: "#ffffff",
         },
-      ],
+      },
-      username: [
+      function (error) {
-        { required: true, message: "请输入用户名", trigger: "blur" },
+        if (error) console.error(error);
-        {
+        console.log("二维码已生成");
-          min: 5,
-          max: 20,
-          message: "用户名长度在 6 到 20 个字符",
-          trigger: "blur",
-        },
-      ],
-      email: [{}],
-    };
-    onMounted(() => {  
-      const token = localStorage.getItem("token");  
-      if (token !== null) {  
-        isLogin.value = true; // 更新登录状态  
-        router.push("/videoList"); // 跳转到视频列表页面  
-        // 你可以在这里获取 UID 并更新 uid.value  
       }
-    }); 
+    );
+  }
+};
 
-    const creatQrCode =async () =>{
+const getUUID = async () => {
-      var qrcode = new qrcode(this.$refs.qrCodeUrl, {
+  try {
-        text: uuid, // 需要转换为二维码的内容
+    const response = await getUUIDService({ device: "windows" });
-        width: 100,
+    uuid = response.data.toString();
-        height: 100,
+    let uid = uuid.toString();
-        colorDark: "#000000",
+    console.log("uuid=", uuid);
-        colorLight: "#ffffff",
+    //await creatQrCode(uid);
-        correctLevel: QRCode.CorrectLevel.H,
+    generateQRCode(uuid);
-      });
+  } catch (error) {
-    };
+    console.log(error);
+  }
+};
 
-    //登录接口调用
+const getQRStatus = async () => {
-    const login = async () => {
+  let result = await getQRService({ uuid: uuid });
-      let result = await loginService(loginData);
+  if (result.code === 0) {
+    if (result.data === "0") {
+    } else if (result.data === "1") {
+      alert("等待确认");
+    } else {
       globalData.token = result.data;
       localStorage.setItem("token", result.data.token);
       localStorage.setItem("userId", result.data.id);
       localStorage.setItem("username", result.data.username);
-      let now=new Date();
+      let now = new Date();
-      localStorage.setItem("end_time", now.setDate(now.getHours() + 12));//过期时间
+      localStorage.setItem("end_time", now.setDate(now.getHours() + 12)); //过期时间
       //token.value= result.data;
       router.push("/videoList");
-    };
-    const getUUID= async() => {
-          try {
-            const response = await getUUIDService({"device":"windows"});
-            uuid =response.data.toString();
-            let uid =uuid.toString();
-            console.log("uuid=",uuid);
-            await creatQrCode(uid);
-          } catch (error) {
-            console.error(error);
-          }
-        };
-
-    const getQRStatus = async () => {
-      let result = await getQRService({"uuid":uuid});
-      if (result.code === 0) {
-        if(result.data==="0"){
-        }else if(result.data==="1"){
-          alert("等待确认");
-        }else{
-          globalData.token = result.data;
-          localStorage.setItem("token", result.data.token);
-          localStorage.setItem("userId", result.data.id);
-          localStorage.setItem("username", result.data.username);
-          let now=new Date();
-          localStorage.setItem("end_time", now.setDate(now.getHours() + 12));//过期时间
-          //token.value= result.data;
-          router.push("/videoList");
-        }
-
-      } else {
-        alert(result.message);
-      }
     }
-
+  } else {
-    const  getIpClient= async() => {
+    alert(result.message);
-          try {
+  }
-            const response = await axios.get("https://ipinfo.io/json");
-            loginData.value.ip =response.data.ip;
-            localStorage.setItem("ip", response.data.ip);
-            localStorage.setItem("city", response.data.city);
-            // console.log("ip:",response.data.ip);
-            // console.log("login ip:",loginData.ip);
-            // console.log(response.data);
-            // console.log(loginData);
-          } catch (error) {
-            console.error(error);
-          }
-        };
-
-    getIpClient();
-    await getUUID();
-    getQRStatus();
-    setInterval("getQRStatus()","1000");//showLogin()函数名一定要带括号
-    const register = async () => {
-      let result = registerService(registerData.value);
-      if (result.code === 0) {
-        alert(result.message);
-      } else {
-        alert(result.message);
-      }
-    };
-  },
 };
 
+const getIpClient = async () => {
+  try {
+    const response = await axios.get("https://ipinfo.io/json");
+    loginData.value.ip = response.data.ip;
+    localStorage.setItem("ip", response.data.ip);
+    localStorage.setItem("city", response.data.city);
+    // console.log("ip:",response.data.ip);
+    // console.log("login ip:",loginData.ip);
+    // console.log(response.data);
+    // console.log(loginData);
+  } catch (error) {
+    console.error(error);
+  }
+};
+const init = async () => {
+  getIpClient();
+  getUUID();
+};
+const register = async () => {
+  let result = registerService(registerData.value);
+  if (result.code === 0) {
+    alert(result.message);
+  } else {
+    alert(result.message);
+  }
+};
 </script>
+<style scoped>
+canvas {
+  border: 1px solid #000;
+}
+</style>