复制成功

package-lock.json

@@ -11,10 +11,12 @@
                 "@better-scroll/core": "^2.4.2",
                 "@chenfengyuan/vue-qrcode": "^2.0.0-rc.1",
                 "@vant/area-data": "^1.1.3",
+                "@vueuse/core": "^8.7.5",
                 "ali-oss": "^6.16.0",
                 "axios": "^0.21.4",
                 "better-scroll": "^2.4.2",
                 "clipboard": "^2.0.8",
+                "compressorjs": "^1.1.1",
                 "core-js": "^3.6.5",
                 "crypto-js": "^4.1.1",
                 "date-fns": "^2.27.0",
@@ -44,12 +46,14 @@
                 "vuex": "^4.0.0-0"
             },
             "devDependencies": {
+                "@volar-plugins/prettier": "^1.1.4",
                 "@vue/cli-plugin-babel": "~4.5.0",
                 "@vue/cli-plugin-eslint": "~4.5.0",
                 "@vue/cli-plugin-router": "~4.5.0",
                 "@vue/cli-plugin-vuex": "~4.5.0",
                 "@vue/cli-service": "~4.5.0",
                 "@vue/compiler-sfc": "^3.0.0",
+                "@vue/composition-api": "^1.6.1",
                 "@vue/eslint-config-prettier": "^6.0.0",
                 "babel-eslint": "^10.1.0",
                 "eslint": "^6.7.2",
@@ -2310,6 +2314,11 @@
                 "source-map": "^0.6.1"
             }
         },
+        "node_modules/@types/web-bluetooth": {
+            "version": "0.0.14",
+            "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.14.tgz",
+            "integrity": "sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A=="
+        },
         "node_modules/@types/webpack": {
             "version": "4.41.32",
             "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.32.tgz",
@@ -2380,6 +2389,16 @@
             "resolved": "https://registry.npmjs.org/@vant/use/-/use-1.3.5.tgz",
             "integrity": "sha512-S4rfMQT+71quUbSY9sF7vJTEADVWqHxn8zUbpEl4vzI2CCJx67ri/ZHV911LpXIaZVgSSGPLE5xLV8javmbU0Q=="
         },
+        "node_modules/@volar-plugins/prettier": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/@volar-plugins/prettier/-/prettier-1.1.4.tgz",
+            "integrity": "sha512-Gz6aD5Sjo8+j7xGDooxkKJGwMqzqF3PhITo+hrUIuVzMjJNyvYreuT2chHxXGe903/wojf4c3T3xVsxmsfaCBg==",
+            "dev": true,
+            "dependencies": {
+                "prettier": "^2.6.2",
+                "vscode-uri": "^3.0.3"
+            }
+        },
         "node_modules/@vue/babel-helper-vue-jsx-merge-props": {
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz",
@@ -2971,6 +2990,15 @@
             "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
             "dev": true
         },
+        "node_modules/@vue/composition-api": {
+            "version": "1.7.0",
+            "resolved": "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.7.0.tgz",
+            "integrity": "sha512-hxOgLYR+wjuPX9bkP2pAPlqUs98XxBoa9DSLyp1z6+YR92wC42PZcZKs4d+VRtcv4udOv041Kss+F6ap5nj8YA==",
+            "devOptional": true,
+            "peerDependencies": {
+                "vue": ">= 2.5 < 2.7"
+            }
+        },
         "node_modules/@vue/devtools-api": {
             "version": "6.0.5",
             "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.0.5.tgz",
@@ -3065,6 +3093,63 @@
             "integrity": "sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==",
             "dev": true
         },
+        "node_modules/@vueuse/core": {
+            "version": "8.9.4",
+            "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.9.4.tgz",
+            "integrity": "sha512-B/Mdj9TK1peFyWaPof+Zf/mP9XuGAngaJZBwPaXBvU3aCTZlx3ltlrFFFyMV4iGBwsjSCeUCgZrtkEj9dS2Y3Q==",
+            "dependencies": {
+                "@types/web-bluetooth": "^0.0.14",
+                "@vueuse/metadata": "8.9.4",
+                "@vueuse/shared": "8.9.4",
+                "vue-demi": "*"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.1.0",
+                "vue": "^2.6.0 || ^3.2.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                },
+                "vue": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@vueuse/metadata": {
+            "version": "8.9.4",
+            "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.9.4.tgz",
+            "integrity": "sha512-IwSfzH80bnJMzqhaapqJl9JRIiyQU0zsRGEgnxN6jhq7992cPUJIRfV+JHRIZXjYqbwt07E1gTEp0R0zPJ1aqw==",
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
+        "node_modules/@vueuse/shared": {
+            "version": "8.9.4",
+            "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.9.4.tgz",
+            "integrity": "sha512-wt+T30c4K6dGRMVqPddexEVLa28YwxW5OFIPmzUHICjphfAuBFTTdDoyqREZNDOFJZ44ARH1WWQNCUK8koJ+Ag==",
+            "dependencies": {
+                "vue-demi": "*"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.1.0",
+                "vue": "^2.6.0 || ^3.2.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                },
+                "vue": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@webassemblyjs/ast": {
             "version": "1.9.0",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
@@ -4121,6 +4206,11 @@
             "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
             "dev": true
         },
+        "node_modules/blueimp-canvas-to-blob": {
+            "version": "3.29.0",
+            "resolved": "https://registry.npmjs.org/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.29.0.tgz",
+            "integrity": "sha512-0pcSSGxC0QxT+yVkivxIqW0Y4VlO2XSDPofBAqoJ1qJxgH9eiUDLv50Rixij2cDuEfx4M6DpD9UGZpRhT5Q8qg=="
+        },
         "node_modules/bn.js": {
             "version": "5.2.0",
             "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.0.tgz",
@@ -5152,6 +5242,15 @@
                 "node": ">= 0.8"
             }
         },
+        "node_modules/compressorjs": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/compressorjs/-/compressorjs-1.1.1.tgz",
+            "integrity": "sha512-SysRuUPfmUNoq+RviE0iMFVUmoX2q/x+7PkEPUmk6NGkd85hDrmvujx0Qtp8UCGA6KMe5kuodsylPQcNaLf60w==",
+            "dependencies": {
+                "blueimp-canvas-to-blob": "^3.29.0",
+                "is-blob": "^2.1.0"
+            }
+        },
         "node_modules/concat-map": {
             "version": "0.0.1",
             "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -9574,6 +9673,17 @@
                 "node": ">=8"
             }
         },
+        "node_modules/is-blob": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/is-blob/-/is-blob-2.1.0.tgz",
+            "integrity": "sha512-SZ/fTft5eUhQM6oF/ZaASFDEdbFVe89Imltn9uZr03wdKMcWNVYSMjQPFtg05QuNkt5l5c135ElvXEQG0rk4tw==",
+            "engines": {
+                "node": ">=6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/is-boolean-object": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
@@ -13516,15 +13626,18 @@
             }
         },
         "node_modules/prettier": {
-            "version": "2.5.1",
-            "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz",
-            "integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==",
+            "version": "2.7.1",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
+            "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
             "dev": true,
             "bin": {
                 "prettier": "bin-prettier.js"
             },
             "engines": {
                 "node": ">=10.13.0"
+            },
+            "funding": {
+                "url": "https://github.com/prettier/prettier?sponsor=1"
             }
         },
         "node_modules/prettier-linter-helpers": {
@@ -16697,6 +16810,12 @@
                 "node": ">=6.0"
             }
         },
+        "node_modules/vscode-uri": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.3.tgz",
+            "integrity": "sha512-EcswR2S8bpR7fD0YPeS7r2xXExrScVMxg4MedACaWHEtx9ftCF/qHG1xGkolzTPcEmjTavCQgbVzHUIdTMzFGA==",
+            "dev": true
+        },
         "node_modules/vue": {
             "version": "3.2.30",
             "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.30.tgz",
@@ -16731,6 +16850,31 @@
                 "croppie": "^2.6.4"
             }
         },
+        "node_modules/vue-demi": {
+            "version": "0.13.6",
+            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.6.tgz",
+            "integrity": "sha512-02NYpxgyGE2kKGegRPYlNQSL1UWfA/+JqvzhGCOYjhfbLWXU5QQX0+9pAm/R2sCOPKr5NBxVIab7fvFU0B1RxQ==",
+            "hasInstallScript": true,
+            "bin": {
+                "vue-demi-fix": "bin/vue-demi-fix.js",
+                "vue-demi-switch": "bin/vue-demi-switch.js"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-rc.1",
+                "vue": "^3.0.0-0 || ^2.6.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/vue-eslint-parser": {
             "version": "7.11.0",
             "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",
@@ -19778,6 +19922,11 @@
                 "source-map": "^0.6.1"
             }
         },
+        "@types/web-bluetooth": {
+            "version": "0.0.14",
+            "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.14.tgz",
+            "integrity": "sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A=="
+        },
         "@types/webpack": {
             "version": "4.41.32",
             "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.32.tgz",
@@ -19847,6 +19996,16 @@
             "resolved": "https://registry.npmjs.org/@vant/use/-/use-1.3.5.tgz",
             "integrity": "sha512-S4rfMQT+71quUbSY9sF7vJTEADVWqHxn8zUbpEl4vzI2CCJx67ri/ZHV911LpXIaZVgSSGPLE5xLV8javmbU0Q=="
         },
+        "@volar-plugins/prettier": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/@volar-plugins/prettier/-/prettier-1.1.4.tgz",
+            "integrity": "sha512-Gz6aD5Sjo8+j7xGDooxkKJGwMqzqF3PhITo+hrUIuVzMjJNyvYreuT2chHxXGe903/wojf4c3T3xVsxmsfaCBg==",
+            "dev": true,
+            "requires": {
+                "prettier": "^2.6.2",
+                "vscode-uri": "^3.0.3"
+            }
+        },
         "@vue/babel-helper-vue-jsx-merge-props": {
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz",
@@ -20318,6 +20477,13 @@
                 }
             }
         },
+        "@vue/composition-api": {
+            "version": "1.7.0",
+            "resolved": "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.7.0.tgz",
+            "integrity": "sha512-hxOgLYR+wjuPX9bkP2pAPlqUs98XxBoa9DSLyp1z6+YR92wC42PZcZKs4d+VRtcv4udOv041Kss+F6ap5nj8YA==",
+            "devOptional": true,
+            "requires": {}
+        },
         "@vue/devtools-api": {
             "version": "6.0.5",
             "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.0.5.tgz",
@@ -20398,6 +20564,30 @@
             "integrity": "sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==",
             "dev": true
         },
+        "@vueuse/core": {
+            "version": "8.9.4",
+            "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.9.4.tgz",
+            "integrity": "sha512-B/Mdj9TK1peFyWaPof+Zf/mP9XuGAngaJZBwPaXBvU3aCTZlx3ltlrFFFyMV4iGBwsjSCeUCgZrtkEj9dS2Y3Q==",
+            "requires": {
+                "@types/web-bluetooth": "^0.0.14",
+                "@vueuse/metadata": "8.9.4",
+                "@vueuse/shared": "8.9.4",
+                "vue-demi": "*"
+            }
+        },
+        "@vueuse/metadata": {
+            "version": "8.9.4",
+            "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.9.4.tgz",
+            "integrity": "sha512-IwSfzH80bnJMzqhaapqJl9JRIiyQU0zsRGEgnxN6jhq7992cPUJIRfV+JHRIZXjYqbwt07E1gTEp0R0zPJ1aqw=="
+        },
+        "@vueuse/shared": {
+            "version": "8.9.4",
+            "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.9.4.tgz",
+            "integrity": "sha512-wt+T30c4K6dGRMVqPddexEVLa28YwxW5OFIPmzUHICjphfAuBFTTdDoyqREZNDOFJZ44ARH1WWQNCUK8koJ+Ag==",
+            "requires": {
+                "vue-demi": "*"
+            }
+        },
         "@webassemblyjs/ast": {
             "version": "1.9.0",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
@@ -21261,6 +21451,11 @@
             "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
             "dev": true
         },
+        "blueimp-canvas-to-blob": {
+            "version": "3.29.0",
+            "resolved": "https://registry.npmjs.org/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.29.0.tgz",
+            "integrity": "sha512-0pcSSGxC0QxT+yVkivxIqW0Y4VlO2XSDPofBAqoJ1qJxgH9eiUDLv50Rixij2cDuEfx4M6DpD9UGZpRhT5Q8qg=="
+        },
         "bn.js": {
             "version": "5.2.0",
             "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.0.tgz",
@@ -22112,6 +22307,15 @@
                 }
             }
         },
+        "compressorjs": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/compressorjs/-/compressorjs-1.1.1.tgz",
+            "integrity": "sha512-SysRuUPfmUNoq+RviE0iMFVUmoX2q/x+7PkEPUmk6NGkd85hDrmvujx0Qtp8UCGA6KMe5kuodsylPQcNaLf60w==",
+            "requires": {
+                "blueimp-canvas-to-blob": "^3.29.0",
+                "is-blob": "^2.1.0"
+            }
+        },
         "concat-map": {
             "version": "0.0.1",
             "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -25551,6 +25755,11 @@
                 "binary-extensions": "^2.0.0"
             }
         },
+        "is-blob": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/is-blob/-/is-blob-2.1.0.tgz",
+            "integrity": "sha512-SZ/fTft5eUhQM6oF/ZaASFDEdbFVe89Imltn9uZr03wdKMcWNVYSMjQPFtg05QuNkt5l5c135ElvXEQG0rk4tw=="
+        },
         "is-boolean-object": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
@@ -28691,9 +28900,9 @@
             "dev": true
         },
         "prettier": {
-            "version": "2.5.1",
-            "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz",
-            "integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==",
+            "version": "2.7.1",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
+            "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
             "dev": true
         },
         "prettier-linter-helpers": {
@@ -31276,6 +31485,12 @@
                 "acorn-walk": "^8.2.0"
             }
         },
+        "vscode-uri": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.3.tgz",
+            "integrity": "sha512-EcswR2S8bpR7fD0YPeS7r2xXExrScVMxg4MedACaWHEtx9ftCF/qHG1xGkolzTPcEmjTavCQgbVzHUIdTMzFGA==",
+            "dev": true
+        },
         "vue": {
             "version": "3.2.30",
             "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.30.tgz",
@@ -31310,6 +31525,12 @@
                 "croppie": "^2.6.4"
             }
         },
+        "vue-demi": {
+            "version": "0.13.6",
+            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.6.tgz",
+            "integrity": "sha512-02NYpxgyGE2kKGegRPYlNQSL1UWfA/+JqvzhGCOYjhfbLWXU5QQX0+9pAm/R2sCOPKr5NBxVIab7fvFU0B1RxQ==",
+            "requires": {}
+        },
         "vue-eslint-parser": {
             "version": "7.11.0",
             "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",

src/views/Room.vue

@@ -13,6 +13,7 @@
                 <div class="text1">{{ getLabelName(info.status, statusOptions) }}</div>
                 <div class="text2">
                     <span>房间号 {{ info.id }}</span>
+                    <img src="@assets/png-copy.png" @click="copy(info.id)" alt="" />
                 </div>
             </div>
             <div class="content-box">
@@ -237,6 +238,18 @@ export default {
         this.getInfo();
     },
     methods: {
+        copy(text) {
+            this.$copyText(JSON.stringify(text)).then(
+                e => {
+                    this.$toast.success('复制成功');
+                    console.log(e);
+                },
+                e => {
+                    this.$toast('复制失败');
+                    console.log(e);
+                }
+            );
+        },
         getInfo() {
             this.$toast.loading({
                 message: '加载中...',
@@ -421,6 +434,12 @@ export default {
             color: rgba(255, 255, 255, 0.6);
             line-height: 17px;
             margin-top: 2px;
+            .flex();
+            img {
+                width: 16px;
+                height: 16px;
+                margin-left: 6px;
+            }
         }
     }
 }