Merge branch 'dev' 更新自动导览

.env

@@ -1,10 +1,10 @@
 
 # 场景资源地址
-VUE_APP_RESOURCE_URL=https://glp-vr.cdfmembers.com/
+VUE_APP_RESOURCE_URL=https://eurs3.4dkankan.com/
 # 静态资源地址
 VUE_APP_CDN_URL=https://4dkk.4dage.com/v4/www/
 # sdk文件地址
-VUE_APP_SDK_DIR=https://eurs3.4dkankan.com/v4/cdfg/sdk
+VUE_APP_SDK_DIR=https://eurs3.4dkankan.com/v4/cdfg/sdk-new
 
 # socket地址
 VUE_APP_SOCKET_URL=https://vr-admin.cdfmembers.com/

.env.development

@@ -4,7 +4,7 @@ VUE_APP_RESOURCE_URL=https://eurs3.4dkankan.com/
 # 静态资源地址
 VUE_APP_CDN_URL=https://4dkk.4dage.com/v4/www/
 # sdk文件地址
-VUE_APP_SDK_DIR=https://eurs3.4dkankan.com/v4/cdfg/sdk
+VUE_APP_SDK_DIR=https://eurs3.4dkankan.com/v4/cdfg/sdk-new
 
 
 # socket地址
@@ -18,5 +18,6 @@ VUE_APP_STATIC_DIR=viewer
 VUE_APP_REGION_URL=aws
 
 # 接口请求地址
-VUE_APP_APIS_URL=http://192.168.0.38:8888/
+#VUE_APP_APIS_URL=http://192.168.0.38:8888/
+VUE_APP_APIS_URL=https://vr.cdfmembers.com/
 

.env.prod

@@ -3,7 +3,7 @@ VUE_APP_RESOURCE_URL=https://glp-vr.cdfmembers.com/
 # 静态资源地址
 VUE_APP_CDN_URL=https://4dkk.4dage.com/v4/www/
 # sdk文件地址
-VUE_APP_SDK_DIR=https://eurs3.4dkankan.com/v4/cdfg/sdk
+VUE_APP_SDK_DIR=https://eurs3.4dkankan.com/v4/cdfg/sdk-new
 
 # 静态资源目录
 VUE_APP_STATIC_DIR=viewer

package-lock.json

@@ -11,12 +11,15 @@
         "axios": "^0.21.1",
         "clipboard": "^2.0.8",
         "core-js": "^3.8.3",
+        "jsonp": "^0.2.1",
         "socket.io": "^4.5.1",
         "trtc-js-sdk": "^4.13.0",
         "vue": "^3.2.36",
+        "vue-i18n": "9",
         "vuex": "^4.0.2"
       },
       "devDependencies": {
+        "@intlify/vue-i18n-loader": "^4.2.0",
         "@vue/cli-plugin-babel": "~5.0.0",
         "@vue/cli-service": "~5.0.0",
         "@vue/compiler-sfc": "^3.0.0",
@@ -1706,6 +1709,130 @@
         "@hapi/hoek": "^9.0.0"
       }
     },
+    "node_modules/@intlify/bundle-utils": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmmirror.com/@intlify/bundle-utils/-/bundle-utils-2.2.2.tgz",
+      "integrity": "sha512-vngkvlIVV8ZJoyC5VqMvqJd2nvsx+qMN7pQjPiPjOrVndeiR7Dlue0k86Q8FsFUzyksW3HJZZi833ldxwbFzTA==",
+      "dev": true,
+      "dependencies": {
+        "@intlify/message-compiler": "^9.1.0",
+        "@intlify/shared": "^9.1.0",
+        "jsonc-eslint-parser": "^1.0.1",
+        "source-map": "^0.6.1",
+        "yaml-eslint-parser": "^0.3.2"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependenciesMeta": {
+        "petite-vue-i18n": {
+          "optional": true
+        },
+        "vue-i18n": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@intlify/core-base": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmmirror.com/@intlify/core-base/-/core-base-9.2.2.tgz",
+      "integrity": "sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==",
+      "dependencies": {
+        "@intlify/devtools-if": "9.2.2",
+        "@intlify/message-compiler": "9.2.2",
+        "@intlify/shared": "9.2.2",
+        "@intlify/vue-devtools": "9.2.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/devtools-if": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmmirror.com/@intlify/devtools-if/-/devtools-if-9.2.2.tgz",
+      "integrity": "sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==",
+      "dependencies": {
+        "@intlify/shared": "9.2.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmmirror.com/@intlify/message-compiler/-/message-compiler-9.2.2.tgz",
+      "integrity": "sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==",
+      "dependencies": {
+        "@intlify/shared": "9.2.2",
+        "source-map": "0.6.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmmirror.com/@intlify/shared/-/shared-9.2.2.tgz",
+      "integrity": "sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/vue-devtools": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmmirror.com/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz",
+      "integrity": "sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==",
+      "dependencies": {
+        "@intlify/core-base": "9.2.2",
+        "@intlify/shared": "9.2.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/vue-i18n-loader": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/@intlify/vue-i18n-loader/-/vue-i18n-loader-4.2.0.tgz",
+      "integrity": "sha512-d7aBmMNWJskcZPT5rJH4h2XHe/PwNoJUaY0PGla9g+NSD4B0UR8LBKrp126nlaUfA74Xt0FEGvzCfG9KdC9KoA==",
+      "dev": true,
+      "dependencies": {
+        "@intlify/bundle-utils": "^2.2.2",
+        "@intlify/shared": "^9.1.0",
+        "js-yaml": "^4.1.0",
+        "json5": "^2.2.0",
+        "loader-utils": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "petite-vue-i18n": "^9.1.0",
+        "vue": "^3.0.0",
+        "vue-i18n": "^9.1.0"
+      },
+      "peerDependenciesMeta": {
+        "petite-vue-i18n": {
+          "optional": true
+        },
+        "vue-i18n": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@intlify/vue-i18n-loader/node_modules/loader-utils": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.2.tgz",
+      "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+      "dev": true,
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.1.1",
       "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@@ -2718,9 +2845,9 @@
       "dev": true
     },
     "node_modules/@vue/devtools-api": {
-      "version": "6.1.4",
-      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.1.4.tgz",
-      "integrity": "sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ=="
+      "version": "6.2.1",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.2.1.tgz",
+      "integrity": "sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ=="
     },
     "node_modules/@vue/reactivity": {
       "version": "3.2.36",
@@ -3007,6 +3134,15 @@
         "acorn": "^8"
       }
     },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmmirror.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
     "node_modules/acorn-walk": {
       "version": "8.2.0",
       "resolved": "https://registry.npmmirror.com/acorn-walk/-/acorn-walk-8.2.0.tgz",
@@ -3148,6 +3284,12 @@
       "integrity": "sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==",
       "dev": true
     },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
     "node_modules/array-flatten": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/array-flatten/-/array-flatten-2.1.2.tgz",
@@ -4851,6 +4993,53 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/eslint-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/eslint-utils/-/eslint-utils-2.1.0.tgz",
+      "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
+      "dev": true,
+      "dependencies": {
+        "eslint-visitor-keys": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/espree": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmmirror.com/espree/-/espree-6.2.1.tgz",
+      "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^7.1.1",
+        "acorn-jsx": "^5.2.0",
+        "eslint-visitor-keys": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/espree/node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmmirror.com/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/esrecurse": {
       "version": "4.3.0",
       "resolved": "https://registry.npmmirror.com/esrecurse/-/esrecurse-4.3.0.tgz",
@@ -5948,6 +6137,18 @@
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
       "dev": true
     },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-2.5.2.tgz",
@@ -5990,6 +6191,34 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsonc-eslint-parser": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/jsonc-eslint-parser/-/jsonc-eslint-parser-1.4.1.tgz",
+      "integrity": "sha512-hXBrvsR1rdjmB2kQmUjf1rEIa+TqHBGMge8pwi++C+Si1ad7EjZrJcpgwym+QGK/pqTx+K7keFAtLlVNdLRJOg==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^7.4.1",
+        "eslint-utils": "^2.1.0",
+        "eslint-visitor-keys": "^1.3.0",
+        "espree": "^6.0.0",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/jsonc-eslint-parser/node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmmirror.com/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/jsonfile": {
       "version": "6.1.0",
       "resolved": "https://registry.npmmirror.com/jsonfile/-/jsonfile-6.1.0.tgz",
@@ -6002,6 +6231,27 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jsonp": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmmirror.com/jsonp/-/jsonp-0.2.1.tgz",
+      "integrity": "sha512-pfog5gdDxPdV4eP7Kg87M8/bHgshlZ5pybl+yKxAnCZ5O7lCIn7Ixydj03wOlnDQesky2BPyA91SQ+5Y/mNwzw==",
+      "dependencies": {
+        "debug": "^2.1.3"
+      }
+    },
+    "node_modules/jsonp/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/jsonp/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
     "node_modules/kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmmirror.com/kind-of/-/kind-of-6.0.3.tgz",
@@ -9214,6 +9464,23 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "node_modules/vue-i18n": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmmirror.com/vue-i18n/-/vue-i18n-9.2.2.tgz",
+      "integrity": "sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==",
+      "dependencies": {
+        "@intlify/core-base": "9.2.2",
+        "@intlify/shared": "9.2.2",
+        "@intlify/vue-devtools": "9.2.2",
+        "@vue/devtools-api": "^6.2.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-loader": {
       "version": "17.0.0",
       "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-17.0.0.tgz",
@@ -9902,6 +10169,17 @@
         "node": ">= 6"
       }
     },
+    "node_modules/yaml-eslint-parser": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmmirror.com/yaml-eslint-parser/-/yaml-eslint-parser-0.3.2.tgz",
+      "integrity": "sha512-32kYO6kJUuZzqte82t4M/gB6/+11WAuHiEnK7FreMo20xsCKPeFH5tDBU7iWxR7zeJpNnMXfJyXwne48D0hGrg==",
+      "dev": true,
+      "dependencies": {
+        "eslint-visitor-keys": "^1.3.0",
+        "lodash": "^4.17.20",
+        "yaml": "^1.10.0"
+      }
+    },
     "node_modules/yargs": {
       "version": "16.2.0",
       "resolved": "https://registry.npmmirror.com/yargs/-/yargs-16.2.0.tgz",
@@ -11108,6 +11386,87 @@
         "@hapi/hoek": "^9.0.0"
       }
     },
+    "@intlify/bundle-utils": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmmirror.com/@intlify/bundle-utils/-/bundle-utils-2.2.2.tgz",
+      "integrity": "sha512-vngkvlIVV8ZJoyC5VqMvqJd2nvsx+qMN7pQjPiPjOrVndeiR7Dlue0k86Q8FsFUzyksW3HJZZi833ldxwbFzTA==",
+      "dev": true,
+      "requires": {
+        "@intlify/message-compiler": "^9.1.0",
+        "@intlify/shared": "^9.1.0",
+        "jsonc-eslint-parser": "^1.0.1",
+        "source-map": "^0.6.1",
+        "yaml-eslint-parser": "^0.3.2"
+      }
+    },
+    "@intlify/core-base": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmmirror.com/@intlify/core-base/-/core-base-9.2.2.tgz",
+      "integrity": "sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==",
+      "requires": {
+        "@intlify/devtools-if": "9.2.2",
+        "@intlify/message-compiler": "9.2.2",
+        "@intlify/shared": "9.2.2",
+        "@intlify/vue-devtools": "9.2.2"
+      }
+    },
+    "@intlify/devtools-if": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmmirror.com/@intlify/devtools-if/-/devtools-if-9.2.2.tgz",
+      "integrity": "sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==",
+      "requires": {
+        "@intlify/shared": "9.2.2"
+      }
+    },
+    "@intlify/message-compiler": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmmirror.com/@intlify/message-compiler/-/message-compiler-9.2.2.tgz",
+      "integrity": "sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==",
+      "requires": {
+        "@intlify/shared": "9.2.2",
+        "source-map": "0.6.1"
+      }
+    },
+    "@intlify/shared": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmmirror.com/@intlify/shared/-/shared-9.2.2.tgz",
+      "integrity": "sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q=="
+    },
+    "@intlify/vue-devtools": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmmirror.com/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz",
+      "integrity": "sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==",
+      "requires": {
+        "@intlify/core-base": "9.2.2",
+        "@intlify/shared": "9.2.2"
+      }
+    },
+    "@intlify/vue-i18n-loader": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/@intlify/vue-i18n-loader/-/vue-i18n-loader-4.2.0.tgz",
+      "integrity": "sha512-d7aBmMNWJskcZPT5rJH4h2XHe/PwNoJUaY0PGla9g+NSD4B0UR8LBKrp126nlaUfA74Xt0FEGvzCfG9KdC9KoA==",
+      "dev": true,
+      "requires": {
+        "@intlify/bundle-utils": "^2.2.2",
+        "@intlify/shared": "^9.1.0",
+        "js-yaml": "^4.1.0",
+        "json5": "^2.2.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.2.tgz",
+          "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        }
+      }
+    },
     "@jridgewell/gen-mapping": {
       "version": "0.1.1",
       "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@@ -11964,9 +12323,9 @@
       }
     },
     "@vue/devtools-api": {
-      "version": "6.1.4",
-      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.1.4.tgz",
-      "integrity": "sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ=="
+      "version": "6.2.1",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.2.1.tgz",
+      "integrity": "sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ=="
     },
     "@vue/reactivity": {
       "version": "3.2.36",
@@ -12228,6 +12587,13 @@
       "dev": true,
       "requires": {}
     },
+    "acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmmirror.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "requires": {}
+    },
     "acorn-walk": {
       "version": "8.2.0",
       "resolved": "https://registry.npmmirror.com/acorn-walk/-/acorn-walk-8.2.0.tgz",
@@ -12337,6 +12703,12 @@
       "integrity": "sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==",
       "dev": true
     },
+    "argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
     "array-flatten": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/array-flatten/-/array-flatten-2.1.2.tgz",
@@ -13701,6 +14073,40 @@
         "estraverse": "^4.1.1"
       }
     },
+    "eslint-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/eslint-utils/-/eslint-utils-2.1.0.tgz",
+      "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
+      "dev": true,
+      "requires": {
+        "eslint-visitor-keys": "^1.1.0"
+      }
+    },
+    "eslint-visitor-keys": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+      "dev": true
+    },
+    "espree": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmmirror.com/espree/-/espree-6.2.1.tgz",
+      "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==",
+      "dev": true,
+      "requires": {
+        "acorn": "^7.1.1",
+        "acorn-jsx": "^5.2.0",
+        "eslint-visitor-keys": "^1.1.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.1",
+          "resolved": "https://registry.npmmirror.com/acorn/-/acorn-7.4.1.tgz",
+          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+          "dev": true
+        }
+      }
+    },
     "esrecurse": {
       "version": "4.3.0",
       "resolved": "https://registry.npmmirror.com/esrecurse/-/esrecurse-4.3.0.tgz",
@@ -14587,6 +14993,15 @@
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
       "dev": true
     },
+    "js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "requires": {
+        "argparse": "^2.0.1"
+      }
+    },
     "jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-2.5.2.tgz",
@@ -14617,6 +15032,27 @@
       "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
       "dev": true
     },
+    "jsonc-eslint-parser": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/jsonc-eslint-parser/-/jsonc-eslint-parser-1.4.1.tgz",
+      "integrity": "sha512-hXBrvsR1rdjmB2kQmUjf1rEIa+TqHBGMge8pwi++C+Si1ad7EjZrJcpgwym+QGK/pqTx+K7keFAtLlVNdLRJOg==",
+      "dev": true,
+      "requires": {
+        "acorn": "^7.4.1",
+        "eslint-utils": "^2.1.0",
+        "eslint-visitor-keys": "^1.3.0",
+        "espree": "^6.0.0",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.1",
+          "resolved": "https://registry.npmmirror.com/acorn/-/acorn-7.4.1.tgz",
+          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+          "dev": true
+        }
+      }
+    },
     "jsonfile": {
       "version": "6.1.0",
       "resolved": "https://registry.npmmirror.com/jsonfile/-/jsonfile-6.1.0.tgz",
@@ -14627,6 +15063,29 @@
         "universalify": "^2.0.0"
       }
     },
+    "jsonp": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmmirror.com/jsonp/-/jsonp-0.2.1.tgz",
+      "integrity": "sha512-pfog5gdDxPdV4eP7Kg87M8/bHgshlZ5pybl+yKxAnCZ5O7lCIn7Ixydj03wOlnDQesky2BPyA91SQ+5Y/mNwzw==",
+      "requires": {
+        "debug": "^2.1.3"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmmirror.com/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+        }
+      }
+    },
     "kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmmirror.com/kind-of/-/kind-of-6.0.3.tgz",
@@ -17126,6 +17585,17 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "vue-i18n": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmmirror.com/vue-i18n/-/vue-i18n-9.2.2.tgz",
+      "integrity": "sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==",
+      "requires": {
+        "@intlify/core-base": "9.2.2",
+        "@intlify/shared": "9.2.2",
+        "@intlify/vue-devtools": "9.2.2",
+        "@vue/devtools-api": "^6.2.1"
+      }
+    },
     "vue-loader": {
       "version": "17.0.0",
       "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-17.0.0.tgz",
@@ -17670,6 +18140,17 @@
       "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
       "dev": true
     },
+    "yaml-eslint-parser": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmmirror.com/yaml-eslint-parser/-/yaml-eslint-parser-0.3.2.tgz",
+      "integrity": "sha512-32kYO6kJUuZzqte82t4M/gB6/+11WAuHiEnK7FreMo20xsCKPeFH5tDBU7iWxR7zeJpNnMXfJyXwne48D0hGrg==",
+      "dev": true,
+      "requires": {
+        "eslint-visitor-keys": "^1.3.0",
+        "lodash": "^4.17.20",
+        "yaml": "^1.10.0"
+      }
+    },
     "yargs": {
       "version": "16.2.0",
       "resolved": "https://registry.npmmirror.com/yargs/-/yargs-16.2.0.tgz",

package.json

@@ -12,12 +12,15 @@
     "axios": "^0.21.1",
     "clipboard": "^2.0.8",
     "core-js": "^3.8.3",
+    "jsonp": "^0.2.1",
     "socket.io": "^4.5.1",
     "trtc-js-sdk": "^4.13.0",
     "vue": "^3.2.36",
+    "vue-i18n": "9",
     "vuex": "^4.0.2"
   },
   "devDependencies": {
+    "@intlify/vue-i18n-loader": "^4.2.0",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "@vue/compiler-sfc": "^3.0.0",

public/index.html

@@ -1,47 +1,46 @@
 <!DOCTYPE html>
 <html lang="">
-    <head>
-        <meta charset="utf-8" />
-        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
-        <link rel="icon" href="<%= BASE_URL %><%= VUE_APP_STATIC_DIR %>/favicon.png" />
-        <link rel="stylesheet" href="//at.alicdn.com/t/font_2596172_ejg30arrayu.css" />
-        <link rel="stylesheet" href="//at.alicdn.com/t/font_3423899_m7c62apktz.css" />
-        <link rel="stylesheet" href="<%= BASE_URL %><%= VUE_APP_STATIC_DIR %>/static/lib/animate/animate.min.css" />
-        <link rel="stylesheet" href="<%= BASE_URL %><%= VUE_APP_STATIC_DIR %>/static/lib/swiper/swiper-bundle.min.css" />
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+    <link rel="icon" href="<%= BASE_URL %><%= VUE_APP_STATIC_DIR %>/favicon.png" />
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_2596172_ejg30arrayu.css" />
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_3423899_m7c62apktz.css" />
+    <link rel="stylesheet" href="<%= BASE_URL %><%= VUE_APP_STATIC_DIR %>/static/lib/animate/animate.min.css" />
+    <link rel="stylesheet" href="<%= BASE_URL %><%= VUE_APP_STATIC_DIR %>/static/lib/swiper/swiper-bundle.min.css" />
 
-        <script src="<%= BASE_URL %><%= VUE_APP_STATIC_DIR %>/static/lib/mobile-detect.js"></script>
-        <script src="<%= BASE_URL %><%= VUE_APP_STATIC_DIR %>/static/lib/flexible.min.js"></script>
-        <title>中免VR商城</title>
-    </head>
+    <script src="<%= BASE_URL %><%= VUE_APP_STATIC_DIR %>/static/lib/mobile-detect.js"></script>
+    <script src="<%= BASE_URL %><%= VUE_APP_STATIC_DIR %>/static/lib/flexible.min.js"></script>
+    <title>cdf澳門上葡京店</title>
+  </head>
 
-    <body>
-        <noscript>
-            <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-        </noscript>
-        <div id="app"></div>
-        <script src="<%= BASE_URL %><%= VUE_APP_STATIC_DIR %>/static/lib/flv.min.js"></script>
-        <script src="<%= BASE_URL %><%= VUE_APP_STATIC_DIR %>/static/lib/vconsole.js"></script>
-        <script src="<%= BASE_URL %><%= VUE_APP_STATIC_DIR %>/static/lib/swiper/swiper-bundle.min.js"></script>
-        <script src="<%= BASE_URL %><%= VUE_APP_STATIC_DIR %>/static/lib/socket.io.min.js"></script>
-        <script src="<%= BASE_URL %><%= VUE_APP_STATIC_DIR %>/static/lib/lib-generate-test-usersig.min.js"></script>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <script src="<%= BASE_URL %><%= VUE_APP_STATIC_DIR %>/static/lib/flv.min.js"></script>
+    <script src="<%= BASE_URL %><%= VUE_APP_STATIC_DIR %>/static/lib/vconsole.js"></script>
+    <script src="<%= BASE_URL %><%= VUE_APP_STATIC_DIR %>/static/lib/swiper/swiper-bundle.min.js"></script>
+    <script src="<%= BASE_URL %><%= VUE_APP_STATIC_DIR %>/static/lib/socket.io.min.js"></script>
+    <script src="<%= BASE_URL %><%= VUE_APP_STATIC_DIR %>/static/lib/zmjm.min.js"></script>
 
+    <script src="<%= VUE_APP_STATIC_DIR %>/static/lib/jweixin-1.6.0.js"></script>
 
-        <script src="<%= BASE_URL %><%= VUE_APP_STATIC_DIR %>/static/lib/jweixin-1.6.0.js"></script>
-        
-        <script src="<%= VUE_APP_SDK_DIR %>/kankan-sdk-deps.js?v=4.35.0-alpha.51"></script>
-        <script src="<%= VUE_APP_SDK_DIR %>/kankan-sdk.js?v=4.35.0-alpha.51"></script>
+    <script src="<%= VUE_APP_SDK_DIR %>/kankan-sdk-deps.js?v=4.37.3-alpha.81"></script>
+    <script src="<%= VUE_APP_SDK_DIR %>/kankan-sdk.js?v=4.37.3-alpha.80"></script>
 
-        <!-- <script src="https://4dkk.4dage.com/v4/www/sdk/kankan-sdk-deps.js?v=4.0.0-alpha.44"></script>
+    <!-- <script src="https://4dkk.4dage.com/v4/www/sdk/kankan-sdk-deps.js?v=4.0.0-alpha.44"></script>
         <script src="https://4dkk.4dage.com/v4/www/sdk/kankan-sdk.js?v=4.0.0-alpha.44"></script> -->
 
-        <!-- <script src="https://eurs3.4dkankan.com/v4/cdfg/sdk/kankan-sdk-deps.js?v=4.0.0-alpha.45"></script>
+    <!-- <script src="https://eurs3.4dkankan.com/v4/cdfg/sdk/kankan-sdk-deps.js?v=4.0.0-alpha.45"></script>
         <script src="https://eurs3.4dkankan.com/v4/cdfg/sdk/kankan-sdk.js?v=4.0.0-alpha.45"></script> -->
-        <!-- built files will be auto injected -->
-        <script>
-            if ((query = window.location.href.indexOf('vlog') != -1)) {
-                var vConsole = new window.VConsole()
-            }
-        </script>
-    </body>
+    <!-- built files will be auto injected -->
+    <script>
+      if ((query = window.location.href.indexOf('vlog') != -1)) {
+        var vConsole = new window.VConsole();
+      }
+    </script>
+  </body>
 </html>

src/components/Controls/Control.Mobile.vue

@@ -1,97 +1,93 @@
 <template>
   <FloorSwitch />
   <transition mode="out-in">
-      <component class="limitwidth" :is="panelPage"></component>
+    <component class="limitwidth" :is="panelPage"></component>
   </transition>
-
-
 </template>
 
 <script setup>
-import { useStore } from "vuex";
-import { onMounted, watch, computed, ref, shallowRef, nextTick } from "vue";
-import { useApp, getApp } from "@/app";
-import FloorSwitch from "./FloorSwitch";
-
-import vMain from "./Panel/Main";
-import Guide from "./Panel/Guide";
+import { useStore } from 'vuex';
+import { onMounted, watch, computed, ref, shallowRef, nextTick } from 'vue';
+import { useApp, getApp } from '@/app';
+import FloorSwitch from './FloorSwitch';
 
-import guideShop from "../RTC/index";
+import vMain from './Panel/Main';
+import Guide from './Panel/Guide';
 
+import guideShop from '../RTC/index';
 
-import { Scrollbar, Dialog } from "@/global_components/";
-import common from "@/utils/common";
-import { useMusicPlayer } from "@/utils/sound";
+import { Scrollbar, Dialog } from '@/global_components/';
+import common from '@/utils/common';
+import { useMusicPlayer } from '@/utils/sound';
 
 const store = useStore();
 
 const musicPlayer = useMusicPlayer();
-const metadata = computed(() => store.getters["scene/metadata"]);
-const flying = computed(() => store.getters["flying"]);
+const metadata = computed(() => store.getters['scene/metadata']);
+const flying = computed(() => store.getters['flying']);
 const controls = computed(() => {
   return metadata.value.controls;
 });
-const player = computed(() => store.getters["player"]);
-const mode = computed(() => store.getters["mode"]);
+const player = computed(() => store.getters['player']);
+const mode = computed(() => store.getters['mode']);
 
 let timer = null;
 
 const panelPage = computed(() => {
-  let status = store.getters["tour/isPlay"] ? Guide :  vMain;
-  return store.getters["shoppingguide"] ? guideShop : status;
+  // let status = store.getters["tour/isPlay"] ? Guide :  vMain;
+  let status = store.getters['tour/isHome'] ? vMain : Guide;
+  return store.getters['shoppingguide'] ? guideShop : status;
 });
 
-
-
-const modeTips = ref("");
+const modeTips = ref('');
 const isCollapse = ref(false);
 const progressNum = ref(0);
 const isInit = ref(false);
-const tours = computed(() => store.getters["tour/tours"]);
+const tours = computed(() => store.getters['tour/tours']);
 
 const isSelect = ref(false);
 const labelTimer = ref(null);
-const showTours = computed(() => store.getters["tour/showTours"]);
+const showTours = computed(() => store.getters['tour/showTours']);
 const partId = computed(() => {
-  let id = store.getters["tour/partId"];
+  let id = store.getters['tour/partId'];
   return id;
 });
 
 const frameId = computed(() => {
-  let id = store.getters["tour/frameId"];
+  let id = store.getters['tour/frameId'];
   return id;
 });
 const isPlay = computed(() => {
-  let status = store.getters["tour/isPlay"];
-  let map = document.querySelector(".kankan-app div[xui_min_map]");
+  let status = store.getters['tour/isPlay'];
+  let map = document.querySelector('.kankan-app div[xui_min_map]');
   if (map) {
     if (status) {
-      map.classList.add("disabled");
+      map.classList.add('disabled');
     } else {
-      map.classList.remove("disabled");
+      map.classList.remove('disabled');
     }
   }
   return status;
 });
 const onModeSwitch = (mode) => {
   if (labelTimer.value) {
-    modeTips.value = "";
+    modeTips.value = '';
     clearTimeout(labelTimer.value);
   }
   modeTips.value = mode;
   labelTimer.value = setTimeout(() => {
-    modeTips.value = "";
+    modeTips.value = '';
   }, 2000);
   console.log(mode);
   // flyToNewMode(mode)
-  store.commit("setMode", mode);
+  store.commit('setMode', mode);
 };
 
 const onCollapse = () => {
   if (player.value.showToolbar == false) {
     isCollapse.value = false;
     let show = !player.value.showToolbar;
-    store.commit("SetPlayerOptions", {
+    store.commit('SetPlayerOptions', {
       showMore: false,
       showMap: show == false,
       showToolbar: show,
@@ -99,11 +95,10 @@ const onCollapse = () => {
     });
   } else {
     isCollapse.value = !isCollapse.value;
-    store.commit("tour/setData", { showTours: false });
+    store.commit('tour/setData', { showTours: false });
   }
 };
 
-
 const hanlderTourPartPlay = (time) => {
   if (!timer) {
     timer = KanKan.Animate.transitions.start((progress) => {
@@ -120,58 +115,58 @@ const cancelTimer = () => {
 
 const hanlderTour = async () => {
   let player = await getApp().TourManager.player;
-  player.on("play", (data) => {
-    musicPlayer.pause(true);
-    // if (tours.value.length > 1) {
-    //     let time = getPartTime(data.partId)
-    //     hanlderTourPartPlay(time)
-    // }
-  });
-  player.on("pause", (tours) => {
-    console.log("pause", player);
-    musicPlayer.resume();
-
-    progressNum.value = 0;
-    cancelTimer();
-    store.commit("tour/setData", { isPlay: false });
-  });
-  player.on("end", (tours) => {
-    musicPlayer.resume();
-    progressNum.value = 100;
-    store.commit("tour/setData", { isPlay: false });
-    cancelTimer();
-  });
+  // player.on("play", (data) => {
+  //   musicPlayer.pause(true);
+  //   // if (tours.value.length > 1) {
+  //   //     let time = getPartTime(data.partId)
+  //   //     hanlderTourPartPlay(time)
+  //   // }
+  // });
+  // player.on("pause", (tours) => {
+  //   console.log("pause", player);
+  //   musicPlayer.resume();
+
+  //   progressNum.value = 0;
+  //   cancelTimer();
+  //   store.commit("tour/setData", { isPlay: false });
+  // });
+  // player.on("end", (tours) => {
+  //   musicPlayer.resume();
+  //   progressNum.value = 100;
+  //   store.commit("tour/setData", { isPlay: false });
+  //   cancelTimer();
+  // });
   let currPartId = null;
   let currProgress = 0;
   let currFrames = 0;
-  player.on("progress", (data) => {
-    if (tours.value.length == 1) {
-      progressNum.value = data.progress * 100;
-    } else {
-      // let time = getPartTime(data.partId)
-
-      // hanlderTourPartPlay(time)
-
-      if (currPartId != data.partId) {
-        currPartId = data.partId;
-        currFrames = tours.value[data.partId].list.length;
-        currProgress = 0;
-      } else {
-        currProgress += data.progress / currFrames;
-        if (currProgress >= 100) {
-          currProgress = 100;
-        }
-
-        progressNum.value = currProgress;
-      }
-    }
+  //   player.on("progress", (data) => {
+  //     if (tours.value.length == 1) {
+  //       progressNum.value = data.progress * 100;
+  //     } else {
+  //       // let time = getPartTime(data.partId)
+
+  //       // hanlderTourPartPlay(time)
+
+  //       if (currPartId != data.partId) {
+  //         currPartId = data.partId;
+  //         currFrames = tours.value[data.partId].list.length;
+  //         currProgress = 0;
+  //       } else {
+  //         currProgress += data.progress / currFrames;
+  //         if (currProgress >= 100) {
+  //           currProgress = 100;
+  //         }
+
+  //         progressNum.value = currProgress;
+  //       }
+  //     }
 
-    store.commit("tour/setData", { partId: data.partId, frameId: data.frameId, isPlay: true });
-  });
+  //     store.commit("tour/setData", { partId: data.partId, frameId: data.frameId, isPlay: true });
+  //   });
 
-  // nextTick(() => {
-  //     editorMain.value = document.querySelector('.ui-editor-main')
-  // })
+  //   // nextTick(() => {
+  //   //     editorMain.value = document.querySelector('.ui-editor-main')
+  //   // })
 };
 const getPartTime = (partId) => {
   cancelTimer();
@@ -201,8 +196,7 @@ const getPartTime = (partId) => {
 const openTours = () => {
   // showTours.value = !showTours.value
 
-  store.commit("tour/setData", { showTours: !showTours.value });
- 
+  store.commit('tour/setData', { showTours: !showTours.value });
 };
 const changeFrame = async (type, id) => {
   if (flying.value || isSelect.value) {
@@ -222,7 +216,7 @@ const changeFrame = async (type, id) => {
     player.selectFrame(f_id).then(() => {
       isSelect.value = false;
     });
-    store.commit("tour/setData", {
+    store.commit('tour/setData', {
       frameId: f_id,
       partId: id,
     });
@@ -230,27 +224,26 @@ const changeFrame = async (type, id) => {
     player.selectFrame(id).then(() => {
       isSelect.value = false;
     });
-    store.commit("tour/setData", {
+    store.commit('tour/setData', {
       frameId: id,
     });
   }
-
 };
 const onClickHandler = async () => {
   if (isPlay.value) {
     let player = await getApp().TourManager.player;
-    player.pause();
+    // player.pause();
     musicPlayer.resume();
   }
 };
 onMounted(() => {
   useApp().then(async (sdk) => {
-    hanlderTour();
+    // hanlderTour();
   });
 
   nextTick(() => {
     let player = document.querySelector('.player[name="main"]');
-    player.addEventListener("touchstart", onClickHandler);
+    player.addEventListener('touchstart', onClickHandler);
   });
 });
 </script>
@@ -260,7 +253,7 @@ onMounted(() => {
   opacity: 1;
 }
 
-.limitwidth{
+.limitwidth {
   max-width: 500px;
   margin: 0 auto;
 }
@@ -301,7 +294,7 @@ onMounted(() => {
       width: 0.8rem;
       margin: 0 0.3rem;
       &::after {
-        content: "";
+        content: '';
         position: absolute;
         top: 50%;
         right: -0.3rem;
@@ -365,4 +358,3 @@ onMounted(() => {
   }
 }
 </style>
-

src/components/Controls/Panel/Guide.vue

@@ -1,15 +1,15 @@
 <template>
   <div v-show="player.showWidgets" class="root-panel">
-    <div class="guide-panel" >
+    <div class="guide-panel" :class="{ disable: disable }">
       <div class="g-con">
-        
         <div class="swiper-container" id="sw-guide">
-          <ul class="swiper-wrapper"  v-if="tours.length > 1">
+          <!-- <ul class="swiper-wrapper" v-if="tours.length > 1"> -->
+          <ul class="swiper-wrapper">
             <li
+              @click.stop="changeItem('part', index)"
               class="swiper-slide"
               :style="`background-image:url(${i.frameId ? common.changeUrl(i.list[i.frameId].enter.cover) : common.changeUrl(i.list[0].enter.cover)});`"
               :class="{ active: isPlay && partId == index }"
-              @click="changeFrame(1, index)"
               v-for="(i, index) in tours"
               :key="index"
             >
@@ -18,12 +18,12 @@
               <span v-if="partId == index && progressNum > 0" class="bar" :style="{ '--w': progressNum + '%' }"></span>
             </li>
           </ul>
-          <ul class="swiper-wrapper" v-else>
+          <!-- <ul class="swiper-wrapper" v-else>
             <li
+              @click.stop="changeItem('frame', index)"
               class="swiper-slide"
               :style="`background-image:url(${common.changeUrl(i.enter.cover)});`"
               :class="{ active: isPlay && frameId == index }"
-              @click="changeFrame(2, index)"
               v-for="(i, index) in tours[0].list"
               :key="index"
             >
@@ -31,11 +31,17 @@
 
               <span v-if="frameId == index && progressNum > 0" class="bar" :style="{ '--w': progressNum + '%' }"></span>
             </li>
-          </ul>
+          </ul> -->
         </div>
-        <div class="back" @click.stop="playTour">
-          <ui-icon type="back"></ui-icon>
-          <div>返回</div>
+        <div class="back">
+          <div @click.stop="back">
+            <ui-icon type="back"></ui-icon>
+            <div>{{ $t('common.back') }}</div>
+          </div>
+          <div @click.stop="playTour">
+            <ui-icon :type="isPlay ? 'pause' : 'preview'"></ui-icon>
+            <div>{{ isPlay ? $t('common.pause') : $t('common.play') }}</div>
+          </div>
         </div>
       </div>
     </div>
@@ -43,111 +49,117 @@
 </template>
 
 <script setup>
-import { useStore } from "vuex";
-import common from "@/utils/common";
-import { onMounted, watch, computed, ref, nextTick } from "vue";
-import { useApp, getApp } from "@/app";
-import { useMusicPlayer } from "@/utils/sound";
-let timer = null
+import { useStore } from 'vuex';
+import common from '@/utils/common';
+import { onMounted, watch, computed, ref, nextTick } from 'vue';
+import { useApp, getApp } from '@/app';
+import { useMusicPlayer } from '@/utils/sound';
+
+import { useI18n, getLocale } from '@/i18n';
+const { t } = useI18n({ useScope: 'global' });
+
+let timer = null;
 
 const store = useStore();
 const musicPlayer = useMusicPlayer();
-const flying = computed(() => store.getters['flying'])
-const isSelect = ref(false)
+const isSelect = ref(false);
+const disable = ref(false);
 
 const isPlay = computed(() => {
-  let status = store.getters["tour/isPlay"];
-  let map = document.querySelector(".kankan-app div[xui_min_map]");
+  let status = store.getters['tour/isPlay'];
+  let map = document.querySelector('.kankan-app div[xui_min_map]');
   if (map) {
     if (status) {
-      map.classList.add("disabled");
+      map.classList.add('disabled');
     } else {
-      map.classList.remove("disabled");
+      map.classList.remove('disabled');
     }
   }
   return status;
 });
 
-const partId = computed(() => store.getters["tour/partId"]);
-const frameId = computed(() => store.getters["tour/frameId"]);
+const partId = computed(() => store.getters['tour/partId']);
+const frameId = computed(() => store.getters['tour/frameId']);
+const changeItem = async (type, id) => {
+  disable.value = true;
+  let player = await getApp().TourManager.player;
+  if (type == 'part') {
+    store.commit('tour/setData', {
+      frameId: 0,
+      partId: id,
+    });
+    progressNum.value = 0;
 
+    player.selectPart(id).then(() => {
+      disable.value = false;
+      if (!isPlay.value) {
+        return;
+      }
+      store.commit('tour/setData', {
+        isPlay: true,
+      });
+      player.play(id);
+    });
+  } else {
+    player.selectFrame(id).then(() => {
+      disable.value = false;
+
+      store.commit('tour/setData', {
+        frameId: id,
+      });
+    });
+  }
+  // mySwiper.slideTo(id);
+  // cancelTimer();
+  // store.commit('tour/setData', { isPlay: false });
+
+  // slideScroll()
+};
+
+const back = async () => {
+  let player = await getApp().TourManager.player;
+  if (isPlay.value) {
+    store.commit('tour/setData', { isPlay: false });
+    player.pause();
+  }
+  store.commit('tour/setData', {
+    partId: 0,
+    isHome: true,
+  });
+};
 const playTour = async () => {
+  progressNum.value = 0;
   let player = await getApp().TourManager.player;
   if (isPlay.value) {
-    store.commit("tour/setData", { isPlay: true });
+    store.commit('tour/setData', { isPlay: false });
     player.pause();
   } else {
-    store.commit("tour/setData", { isPlay: true });
+    store.commit('tour/setData', { isPlay: true });
     player.play(partId.value);
   }
 };
 
 const progressNum = ref(0);
 
-const metadata = computed(() => store.getters["scene/metadata"]);
+const metadata = computed(() => store.getters['scene/metadata']);
 
 const controls = computed(() => metadata.value.controls);
 
-const player = computed(() => store.getters["player"]);
-
-const tours = computed(() => store.getters["tour/tours"]);
-
-const menulist = ref([
-  {
-    icon: "customer_service",
-    name: "客服",
-  },
-  {
-    icon: "guided_shopping",
-    name: "導購",
-  },
-  {
-    icon: "shopping",
-    name: "購物",
-  },
-]);
-
-const categorylist = ref([
-  {
-    id: "all",
-    name: "全部",
-  },
-  {
-    id: "all",
-    name: "香化",
-  },
-  {
-    id: "all",
-    name: "香化",
-  },
-  {
-    id: "all",
-    name: "香化",
-  },
-  {
-    id: "all",
-    name: "香化",
-  },
-  {
-    id: "all",
-    name: "全部",
-  },
-  {
-    id: "all",
-    name: "全部",
-  },
-]);
+const player = computed(() => store.getters['player']);
 
-const brandlist = ref([]);
+const tours = computed(() => store.getters['tour/tours']);
 
+const brandlist = ref([]);
+let mySwiper = null;
 const brandScroll = () => {
   nextTick(() => {
     let t = setTimeout(() => {
       clearTimeout(t);
-      new Swiper("#sw-guide", {
+      mySwiper = new Swiper('#sw-guide', {
         freeMode: true,
-        slidesPerView: "auto",
+        slidesPerView: 'auto',
         spaceBetween: 6,
+
         on: {
           touchMove(swiper, e) {
             e.stopPropagation();
@@ -159,120 +171,137 @@ const brandScroll = () => {
   });
 };
 
-const changeFrame = async (type, id) => {
-    if (flying.value || isSelect.value) {
-        return
-    }
-    progressNum.value = 0
-    // recorder.selectFrame(id)
-    let player = await getApp().TourManager.player
-    // player.selectFrame(id)
-    isSelect.value = true
-    if (type == 1) {
-        player.selectPart(id)
-        let f_id = 0
-        if (tours.value[id].frameId) {
-            f_id = tours.value[id].frameId
-        }
-        player.selectFrame(f_id).then(() => {
-            isSelect.value = false
-        })
-        store.commit('tour/setData', {
-            frameId: f_id,
-            partId: id,
-        })
-    } else {
-        player.selectFrame(id).then(() => {
-            isSelect.value = false
-        })
-        store.commit('tour/setData', {
-            frameId: id,
-        })
-    }
-
-}
 const onClickHandler = async () => {
-    if (isPlay.value) {
-        let player = await getApp().TourManager.player
-        player.pause()
-        musicPlayer.resume()
-    }
-}
+  console.log('onClickHandler');
+  if (isPlay.value) {
+    let player = await getApp().TourManager.player;
+    player.pause();
+    musicPlayer.resume();
+  }
+};
 const cancelTimer = () => {
-    if (timer) {
-        KanKan.Animate.transitions.cancel(timer)
-        timer = null
-    }
-}
+  if (timer) {
+    KanKan.Animate.transitions.cancel(timer);
+    timer = null;
+  }
+};
 
 const hanlderTour = async () => {
   let player = await getApp().TourManager.player;
-  player.on("play", (data) => {
+  player.on('play', (data) => {
+    progressNum.value = 0;
     musicPlayer.pause(true);
+
     // if (tours.value.length > 1) {
     //     let time = getPartTime(data.partId)
     //     hanlderTourPartPlay(time)
     // }
   });
-  player.on("pause", (tours) => {
-    console.log("pause", player);
+  player.on('pause', (tours) => {
+    // console.log('pause', player);
     musicPlayer.resume();
-
+    currProgress = 0;
+    currFrameProgress = 0;
     progressNum.value = 0;
     cancelTimer();
-    store.commit("tour/setData", { isPlay: false });
+    store.commit('tour/setData', { isPlay: false });
   });
-  player.on("end", (tours) => {
+  player.on('end', (tours) => {
     musicPlayer.resume();
     progressNum.value = 100;
-    store.commit("tour/setData", { isPlay: false });
+    currProgress = 0;
+    currFrameProgress = 0;
+    store.commit('tour/setData', { isPlay: false });
     cancelTimer();
   });
   let currPartId = null;
+  let currFrameId = null;
   let currProgress = 0;
-  let currFrames = 0;
-  player.on("progress", (data) => {
-    if (tours.value.length == 1) {
-      progressNum.value = data.progress * 100;
-    } else {
-      // let time = getPartTime(data.partId)
+  let FrameLength = 0;
+  let currFrameProgress = 0;
+  // player.on('progress', (data) => {
+  //   // if (tours.value.length == 1) {
+  //   //   progressNum.value = data.progress * 100;
+  //   // } else {
 
-      // hanlderTourPartPlay(time)
+  //   if (currPartId != data.partId) {
+  //     mySwiper.slideTo(data.partId);
+  //     currPartId = data.partId;
+  //     FrameLength = Math.max(tours.value[data.partId].list.length - 1, 1);
+  //     currProgress = 0;
+  //   } else {
+  //     console.log(FrameLength);
+  //     currProgress += data.progress / FrameLength;
+  //     if (currProgress >= 100) {
+  //       currProgress = 100;
+  //     }
 
-      if (currPartId != data.partId) {
-        currPartId = data.partId;
-        currFrames = Math.max(tours.value[data.partId].list.length-1,1);
-        currProgress = 0;
+  //     console.log(currProgress);
+
+  //     progressNum.value = currProgress;
+  //   }
+  //   // }
+
+  //   store.commit('tour/setData', { partId: data.partId, frameId: data.frameId, isPlay: true });
+  // });
+
+  player.on('progress', (data) => {
+    // if (tours.value.length == 1) {
+    //     progressNum.value = data.progress * 100
+    // } else {
+    // let time = getPartTime(data.partId)
+
+    // hanlderTourPartPlay(time)
+
+    if (currPartId != data.partId) {
+      mySwiper.slideTo(data.partId);
+      currPartId = data.partId;
+      FrameLength = tours.value[data.partId].list.length;
+      currProgress = 0;
+      currFrameProgress = 0;
+    } else {
+      FrameLength = tours.value[data.partId].list.length;
+      let precent = (data.frameId + 1) / FrameLength;
+
+      if (currFrameId != data.frameId) {
+        currFrameId = data.frameId;
+        currFrameProgress = currProgress;
       } else {
-        console.log(currFrames);
-        currProgress += data.progress / currFrames;
-        if (currProgress >= 100) {
-          currProgress = 100;
-        }
+        currProgress = (data.progress / FrameLength) * 100 + currFrameProgress;
+      }
+      // currProgress = data.progress / FrameLength;
 
-        console.log(currProgress);
+      // console.log(currFrameProgress);
 
-        progressNum.value = currProgress;
+      if (currProgress >= 100) {
+        currProgress = 100;
       }
+
+      progressNum.value = currProgress;
     }
+    // }
 
-    store.commit("tour/setData", { partId: data.partId, frameId: data.frameId, isPlay: true });
+    store.commit('tour/setData', {
+      partId: data.partId,
+      frameId: data.frameId,
+      isPlay: true,
+    });
   });
 
   // nextTick(() => {
   //     editorMain.value = document.querySelector('.ui-editor-main')
   // })
 };
-
 onMounted(() => {
   useApp().then(async (sdk) => {
     hanlderTour();
     brandScroll();
   });
   nextTick(() => {
-        let player = document.querySelector('.player[name="main"]')
-        player.addEventListener('touchstart', onClickHandler)
-    })
+    let player = document.querySelector('.player[name="main"]');
+    player.addEventListener('touchstart', onClickHandler);
+    player.addEventListener('click', onClickHandler);
+  });
 });
 </script>
 
@@ -284,11 +313,15 @@ onMounted(() => {
   right: 0;
   z-index: 99;
   width: 100%;
-  background: rgba(0,0,0,0.3000);
-  border: 1px solid rgba(255,255,255,0.2000);
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.2);
   .guide-panel {
     width: 100%;
     position: relative;
+    &.disable {
+      opacity: 0.8;
+      pointer-events: none;
+    }
     .g-con {
       background: rgba(0, 0, 0, 0.3);
       border-radius: 4px;
@@ -309,12 +342,12 @@ onMounted(() => {
         display: flex;
         justify-content: center;
         align-items: center;
-        border-top: solid 1px rgba(255,255,255,0.2000);
+        border-top: solid 1px rgba(255, 255, 255, 0.2);
         height: 48px;
 
         > div {
           font-size: 14px;
-          margin-left: 10px;
+          margin-left: 20px;
         }
       }
       #sw-guide {
@@ -358,7 +391,7 @@ onMounted(() => {
                 left: 0;
                 width: 100%;
                 height: 100%;
-                content: "";
+                content: '';
                 display: inline-block;
                 background: rgba(24, 24, 24, 0.5);
               }
@@ -376,7 +409,7 @@ onMounted(() => {
                 left: 50%;
                 transform: translateX(-50%);
                 &::after {
-                  content: "";
+                  content: '';
                   width: var(--w);
                   background: var(--editor-main-color);
                   height: 100%;

src/components/Controls/Panel/Main.vue

@@ -1,16 +1,16 @@
 <template>
   <div>
-    <Panel v-show="player.showWidgets" :isOpen="isOpen">
+    <Panel v-show="player.showWidgets" :class="{ disabled: !showdaogou }" :isOpen="isOpen">
       <div @click="toggleOpen" class="menu color">
         <div class="logo">
           <img :src="require('@/assets/images/icon/logo.png')" alt="" />
-          <p>cdf澳門上葡京店</p>
+          <p v-if="player.lang != 'en'">{{$t('common.title') }}</p>
         </div>
         <div class="vline"></div>
-        <ul>
+        <ul :class="player.lang" @touchmove.stop>
           <li v-if="tours.length > 0">
             <ui-icon type="preview" @click.stop="playTour"></ui-icon>
-            <div>導覽</div>
+            <div>{{$t('common.tour')}}</div>
           </li>
           <li @click.stop="onClickMenu(item)" v-for="(item, i) in menulist" :key="i">
             <ui-icon :type="item.icon"></ui-icon>
@@ -24,11 +24,11 @@
                 onClickMenu({
                   icon: 'guided_shopping',
                   id: 'guided_shopping',
-                  name: '導購',
+                  name: $t('common.mode'),
                 })
               "
             ></ui-icon>
-            <div>導購</div>
+            <div>{{ $t('common.mode') }}</div>
           </li>
 
           <li>
@@ -38,11 +38,11 @@
                 onClickMenu({
                   icon: 'shopping',
                   id: 'shopping',
-                  name: '購物',
+                  name: $t('common.shopping'),
                 })
               "
             ></ui-icon>
-            <div>購物</div>
+            <div>{{ $t('common.shopping') }}</div>
           </li>
         </ul>
       </div>
@@ -50,10 +50,10 @@
       <div class="toolbar color">
         <div class="navigation">
           <div class="h3">
-            <span>專櫃導航</span>
+            <span>{{ $t('common.guide') }}</span>
             <div @click="showShopList = true">
               <img :src="require(`@/assets/images/icon/search.svg`)" alt="" />
-              搜索專櫃
+              {{ $t('common.searchguide') }}
             </div>
           </div>
           <div class="swiper-container" id="sw-navigation">
@@ -85,19 +85,13 @@
                 @click.stop="
                   onClickCategory({
                     id: '',
-                    categoryName: '全部',
+                    categoryName: $t('common.all'),
                   })
                 "
               >
-                <div>全部</div>
+                <div>{{ $t('common.all') }}</div>
               </li>
-              <li
-                @click.stop="onClickCategory(item)"
-                :class="{ categoryactive: item.id == currentCategory.id }"
-                class="swiper-slide"
-                v-for="(item, i) in categorylist"
-                :key="i"
-              >
+              <li @click.stop="onClickCategory(item)" :class="{ categoryactive: item.id == currentCategory.id }" class="swiper-slide" v-for="(item, i) in categorylist" :key="i">
                 <div>{{ item.categoryName }}</div>
               </li>
             </ul>
@@ -108,13 +102,13 @@
     <teleport :to="`#app`">
       <div v-show="showShopList" class="shoplist">
         <div class="l-title">
-          專櫃列表 ({{ searchList.length }})
+          {{ $t('common.guidelist') }} ({{ searchList.length }})
           <ui-icon type="close" @click="showShopList = false" />
         </div>
 
         <div class="search">
           <img :src="require(`@/assets/images/icon/search.svg`)" alt="" />
-          <input v-model="searchKey" type="text" placeholder="專櫃搜索" />
+          <input v-model="searchKey" type="text" :placeholder="$t('common.guideSearch')" />
           <ui-icon class="close" v-if="searchKey.length > 0" @click.stop="searchKey = ''" type="state_f"></ui-icon>
         </div>
 
@@ -130,24 +124,26 @@
           </li>
         </ul>
 
-        <div class="noresult" v-else>暫無結果</div>
+        <div class="noresult" v-else>{{ $t('common.noResult') }}</div>
       </div>
     </teleport>
   </div>
 </template>
 
 <script setup>
-import { useStore } from "vuex";
-import { onMounted, watch, computed, ref, nextTick } from "vue";
-import Panel from "@/views/Panel.vue";
-import { useApp, getApp } from "@/app";
-import * as apis from "@/apis/index.js";
-import browser from "@/utils/browser";
+import { useStore } from 'vuex';
+import { onMounted, watch, computed, ref, nextTick } from 'vue';
+import Panel from '@/views/Panel.vue';
+import { useApp, getApp } from '@/app';
+import * as apis from '@/apis/index.js';
+import browser from '@/utils/browser';
+import { useI18n, getLocale } from '@/i18n';
+const { t } = useI18n({ useScope: 'global' });
 
 const store = useStore();
 
 const isOpen = ref(false);
-const searchKey = ref("");
+const searchKey = ref('');
 
 const showShopList = ref(false);
 
@@ -156,57 +152,57 @@ const toggleOpen = () => {
 };
 
 const currentCategory = ref({
-  id: "",
-  categoryName: "全部",
+  id: '',
+  categoryName: '全部',
 });
 
-const currentM = computed(() => browser.getURLParam("m"));
-const currentPose = computed(() => browser.getURLParam("pose"));
-const showdaogou = computed(() => store.getters["rtc/showdaogou"]);
+const currentM = computed(() => browser.getURLParam('m'));
+const currentPose = computed(() => browser.getURLParam('pose'));
+const showdaogou = computed(() => store.getters['rtc/showdaogou']);
 
 const isPlay = computed(() => {
-  let status = store.getters["tour/isPlay"];
-  let map = document.querySelector(".kankan-app div[xui_min_map]");
+  let status = store.getters['tour/isPlay'];
+  let map = document.querySelector('.kankan-app div[xui_min_map]');
   if (map) {
     if (status) {
-      map.classList.add("disabled");
+      map.classList.add('disabled');
     } else {
-      map.classList.remove("disabled");
+      map.classList.remove('disabled');
     }
   }
   return status;
 });
 
-const partId = computed(() => store.getters["tour/partId"]);
+const partId = computed(() => store.getters['tour/partId']);
 
 const playTour = async () => {
   let player = await getApp().TourManager.player;
   if (isPlay.value) {
-    store.commit("tour/setData", { isPlay: true });
+    store.commit('tour/setData', { isHome: true });
     player.pause();
   } else {
-    store.commit("tour/setData", { isPlay: true });
+    store.commit('tour/setData', { isHome: false });
     player.play(partId.value);
   }
 };
 
-const metadata = computed(() => store.getters["scene/metadata"]);
+const metadata = computed(() => store.getters['scene/metadata']);
 
-const player = computed(() => store.getters["player"]);
+const player = computed(() => store.getters['player']);
 
-const tours = computed(() => store.getters["tour/tours"]);
+const tours = computed(() => store.getters['tour/tours']);
 
 const menulist = computed(() => {
   let fff = [
     {
-      icon: "help",
-      id: "help",
-      name: "幫助",
+      icon: 'help',
+      id: 'help',
+      name: t('common.help'),
     },
     {
-      icon: "customer_service",
-      id: "kefu",
-      name: "客服",
+      icon: 'customer_service',
+      id: 'kefu',
+      name: t('common.kefu'),
     },
   ];
 
@@ -226,9 +222,9 @@ const brandScroll = () => {
   nextTick(() => {
     let t = setTimeout(() => {
       clearTimeout(t);
-      new Swiper("#sw-navigation", {
+      new Swiper('#sw-navigation', {
         freeMode: true,
-        slidesPerView: "auto",
+        slidesPerView: 'auto',
         centeredSlides: false,
         spaceBetween: 10,
         grid: {
@@ -242,9 +238,9 @@ const brandScroll = () => {
         },
       });
 
-      new Swiper("#sw-category", {
+      new Swiper('#sw-category', {
         freeMode: true,
-        slidesPerView: "auto",
+        slidesPerView: 'auto',
         spaceBetween: 10,
         on: {
           touchMove(swiper, e) {
@@ -258,20 +254,16 @@ const brandScroll = () => {
 };
 
 const onClickMenu = (item) => {
-  if (item.id == "kefu") {
+  if (item.id == 'kefu') {
     let mglink =
-      "https://webpage.qidian.qq.com/2/chat/h5/index.html?linkType=1&env=ol&kfuin=3009110132&fid=3655&key=9b4334768c39150ead3f23e11e5dc2e4&cate=7&source=0&isLBS=0&isCustomEntry=0&type=10&ftype=1&_type=wpa&qidian=true&_pid=kvrmvu.74cg11.l43qvbcu&translateSwitch=0&isSsc=0&roleValue=4&roleData=922223821";
-    window.open(mglink, "_blank");
-  } else if (item.id == "shopping") {
-    browser.openLink(
-      "/subPackage/pages/shoppingcart/shoppingcart",
-      "https://m.cdfmembers.com/shop/600667208/shoppingcart",
-      "/subPackage/pages/shoppingcart/shoppingcart"
-    );
-  } else if (item.id == "help") {
-    store.commit("showUserGuide", true);
-  } else if (item.id == "guided_shopping") {
-    store.commit("showShoppingguide", true);
+      'https://webpage.qidian.qq.com/2/chat/h5/index.html?linkType=1&env=ol&kfuin=3009110132&fid=3655&key=9b4334768c39150ead3f23e11e5dc2e4&cate=7&source=0&isLBS=0&isCustomEntry=0&type=10&ftype=1&_type=wpa&qidian=true&_pid=kvrmvu.74cg11.l43qvbcu&translateSwitch=0&isSsc=0&roleValue=4&roleData=922223821';
+    window.open(mglink, '_blank');
+  } else if (item.id == 'shopping') {
+    browser.openLink('/subPackage/pages/shoppingcart/shoppingcart', 'https://m.cdfmembers.com/shop/600667208/shoppingcart', '/subPackage/pages/shoppingcart/shoppingcart');
+  } else if (item.id == 'help') {
+    store.commit('showUserGuide', true);
+  } else if (item.id == 'guided_shopping') {
+    store.commit('showShoppingguide', true);
   }
 };
 
@@ -289,13 +281,13 @@ const onClickCategory = (item) => {
 const onClickShop = (item) => {
   let url = window.location.href;
 
-  if (!browser.hasURLParam("pose")) {
+  if (!browser.hasURLParam('pose')) {
     url += `&${item.inPosition}`;
   } else {
-    url = browser.replaceQueryString(url, "pose", item.inPosition.replace("pose=", ""));
+    url = browser.replaceQueryString(url, 'pose', item.inPosition.replace('pose=', ''));
   }
 
-  url = browser.replaceQueryString(url, "m", item.sceneUrl);
+  url = browser.replaceQueryString(url, 'm', item.sceneUrl);
   window.location.href = url;
 };
 
@@ -357,6 +349,8 @@ onMounted(() => {
   .logo {
     width: 90px;
     transform: translateY(-24%);
+    min-width: 90px;
+    flex-shrink: 0;
     > img {
       width: 100%;
       border-radius: 4px;
@@ -376,8 +370,9 @@ onMounted(() => {
     align-items: center;
     font-size: 0;
     justify-content: flex-end;
+    overflow-x: auto;
     > li {
-      margin-left: 0.5rem;
+      margin-left: 0.4rem;
       &:first-of-type {
         margin-left: 0;
       }
@@ -387,6 +382,11 @@ onMounted(() => {
       }
     }
   }
+
+  .en{
+    justify-content: flex-start;
+    width: calc(100% - 100px);
+  }
 }
 
 .toolbar {
@@ -433,7 +433,7 @@ onMounted(() => {
         position: absolute;
         right: 0;
         bottom: 0;
-        content: "";
+        content: '';
         display: inline-block;
         height: 100%;
         z-index: 99;

src/components/RTC/PageRtcLive.vue

@@ -2,7 +2,7 @@
   <div id="PageRtcLive">
     <div class="member_number">
       <div class="members"></div>
-      <span>{{ user_list.length }}觀看</span>
+      <span>{{ user_list.length }}{{$t('common.viewnum')}}</span>
     </div>
     <chat v-show="chatShow" :chatList="chatList" :user_info="user_info"></chat>
 
@@ -12,20 +12,20 @@
       <div v-if="connectStatus == 1" :class="{ disabled: !user_info.IsWords }" class="saySomething" @click="onFocus">
         <!-- <i class="speakIcon"
            :class="{'dis':!user_info.IsWords}"></i> -->
-        <span v-if="user_info.IsWords">說點什麽</span>
-        <span v-if="!user_info.IsWords">已被禁言</span>
+        <span v-if="user_info.IsWords">{{$t('common.saysomething')}}</span>
+        <span v-if="!user_info.IsWords">{{$t('common.cantsay')}}</span>
 
         <div class="disSpeakBtn" @click.stop="chatShow = !chatShow" :class="{ dis: !chatShow }"></div>
       </div>
-      <div style="text-align: right; width: 100%" v-if="connectStatus == 0">連接中...</div>
+      <div style="text-align: right; width: 100%" v-if="connectStatus == 0">{{$t('common.linking')}}</div>
       <div v-if="connectStatus == 1" class="contorl_btn">
         <div v-if="isBrushes && user_info.Role == 'leader'" @click="onDrawUndo" class="brushesBack" :class="{ disabled: !canUndo }"></div>
         <div v-if="user_info.Role == 'leader'" @click="onDraw(!isBrushes)" :class="{ brushesed: isBrushes }" class="brushes"></div>
 
-        <div v-if="user_list.length < 5" class="invitation" @click="openDialog('dialogShare', shareLink)"></div>
+        <div v-if="user_list.length < 5" class="invitation" @click="onClickShare"></div>
         <div v-if="role == 'leader'" class="members" @click="openMember"></div>
-        <div v-if="!disableMic" @click="handleMuteAduio" :class="{ mic_off: audioMuted }" class="mic_on"></div>
-        <div v-if="disableMic" class="mic_no"></div>
+        <div v-if="!disableMic" @click="handleMuteAduio" :class="{ mic_off: audioMuted, disabled: !audioDeviceId }" class="mic_on"></div>
+        <div v-if="disableMic" class="mic_no" :class="{ disabled: !audioDeviceId }"></div>
         <div v-if="role == 'leader'" @click="handleMuteVideo" :class="[videoMuted ? 'video_no' : 'video_on', videoDeviceId ? '' : 'disabled']"></div>
         <div class="exit" @click="openDialog('dialogIndex')"></div>
       </div>
@@ -33,8 +33,8 @@
     <div class="layer" v-if="showInput" @click="closeInput">
       <div class="inputBox" @click.stop>
         <div class="msgBox">
-          <input id="input_msg" type="text" maxlength="200" v-model.trim="text" :placeholder="`說點什麽~`" />
-          <span class="iconsend_icon" :class="{ disable: text == '' }" @click.stop="sendText">發送</span>
+          <input id="input_msg" type="text" maxlength="200" v-model.trim="text" :placeholder="`${$t('common.saysomething')}~`" />
+          <span class="iconsend_icon" :class="{ disable: text == '' }" @click.stop="sendText">{{$t('common.send')}}</span>
         </div>
       </div>
     </div>
@@ -45,7 +45,7 @@
         <div class="blurBox"></div>
         <div class="content">
           <div class="memberHeader">
-            <span> 成員管理（{{ user_list.length }}）</span>
+            <span> {{$t('common.member')}}（{{ user_list.length }}）</span>
             <i class="iconfont"></i>
           </div>
           <div class="memberList">
@@ -54,8 +54,8 @@
                 <div class="avatar">
                   <img :src="require('@/assets/images/rtcLive/avatar_small@2x.png')" alt="" />
                 </div>
-                <div class="name" v-if="user_info.Role == 'leader'">{{ user_info.Nickname }} (主持人,我)</div>
-                <div class="name" v-else>{{ user_info.Nickname }} (我)</div>
+                <div class="name" v-if="user_info.Role == 'leader'">{{ user_info.Nickname }} ({{$t('common.leader')}},{{$t('common.me')}})</div>
+                <div class="name" v-else>{{ user_info.Nickname }} ({{$t('common.me')}})</div>
               </div>
 
               <div class="button" v-if="user_info.Role == 'leader'">
@@ -76,7 +76,7 @@
               <div class="button" v-if="user_info.Role == 'leader'">
                 <div class="micBtn" :class="i.IsWords ? 'ban_speak_on' : 'ban_speak_off'" @click="userCanSpeak(i)"></div>
 
-                <div class="outBtn icon_remove" @click="userGetOut(i, idx)"></div>
+                <!-- <div class="outBtn icon_remove" @click="userGetOut(i, idx)"></div> -->
                 <div class="micBtn" :class="i.IsMuted ? 'mute_one_mic_off' : 'mute_one_mic_on'" @click="onMemberMuted(i)"></div>
               </div>
             </div>
@@ -85,10 +85,16 @@
       </div>
     </div>
   </div>
+
+  <teleport :to="`#app`">
+    <div v-if="showShare" @click="showShare = false" class="sharetip">
+      <img @click.stop :style="`right:${isMP ? '16%' : '6%'}`" :src="require('@/assets/images/icon/img_scene_share.png')" alt="" />
+    </div>
+  </teleport>
 </template>
 
 <script setup>
-import { onMounted, watch, defineEmits, ref, reactive, computed, nextTick } from "vue";
+import { onMounted, onUnmounted, watch, defineEmits, ref, reactive, computed, nextTick } from "vue";
 import { useApp, getApp } from "@/app";
 import { useStore } from "vuex";
 import { Dialog } from "@/global_components/";
@@ -98,11 +104,28 @@ import { mapGetters } from "vuex";
 import chat from "./chat/chat.vue";
 // import Trtccom from "./Trtccom.vue";
 import browser from "@/utils/browser";
+import wxShare from "@/utils/wxshare";
+
+import { useI18n, getLocale } from '@/i18n'
+const { t } = useI18n({ useScope: 'global' })
 
-const emit = defineEmits(["openDialog"]);
+const emit = defineEmits(["openDialog", "closeSocket"]);
 
 const store = useStore();
 
+let jumpNewScene = (sceneFirstView) => {
+  let url = window.location.href;
+
+  if (!browser.hasURLParam("pose")) {
+    url += `&${sceneFirstView.sceneview}`;
+  } else {
+    url = browser.replaceQueryString(url, "pose", sceneFirstView.sceneview.replace("pose=", ""));
+  }
+
+  url = browser.replaceQueryString(url, "m", sceneFirstView.num);
+  return url;
+};
+
 let chatAutoScroll = () => {
   let el = document.getElementById("chat");
   let client_h = document.getElementById("chat").clientHeight;
@@ -124,7 +147,8 @@ store.commit("rtc/setSocket", createSocket());
 let getUrl = (href, queryArr) => {
   queryArr.forEach((item) => {
     if (!browser.hasURLParam(item.key)) {
-      href += `&${item.key}=${item.val}`;
+      let ttt = href.split("index.html?");
+      href = `${ttt[0]}index.html?${item.key}=${item.val}&${ttt[1]}`;
     } else {
       href = browser.replaceQueryString(href, item.key, item.val);
     }
@@ -133,6 +157,7 @@ let getUrl = (href, queryArr) => {
   return href;
 };
 const videoDeviceId = computed(() => store.getters["rtc/videoDeviceId"]);
+const audioDeviceId = computed(() => store.getters["rtc/audioDeviceId"]);
 
 window.addEventListener("message", (e) => {
   if (e.data.source != "cdf") {
@@ -146,6 +171,8 @@ const isBrushes = ref(false);
 const showInput = ref(false);
 const showMember = ref(false);
 const animateActive = ref(false);
+const showShare = ref(false);
+const isMP = ref(false);
 
 const audioMuted = ref(false);
 const videoMuted = ref(false);
@@ -206,6 +233,25 @@ const tags = computed(() => {
   return store.getters["tag/tags"] || [];
 });
 
+const onClickShare = () => {
+  if (browser.detectWeixin()) {
+    //ios的ua中无miniProgram，但都有MicroMessenger（表示是微信浏览器）
+    wx.miniProgram.getEnv((res) => {
+      showShare.value = true;
+
+      if (res.miniprogram) {
+        isMP.value = true;
+        //在小程序里
+      } else {
+        // 不在小程序里
+        isMP.value = false;
+      }
+    });
+  } else {
+    openDialog("dialogShare", shareLink.value);
+  }
+};
+
 const userGetOut = (item, i) => {
   socket.value &&
     socket.value.emit("action", {
@@ -221,7 +267,7 @@ const userGetOut = (item, i) => {
 const setUserWords = (res) => {
   if (res.userId == user_info.value.UserId) {
     user_info.value.IsWords = res.words;
-    Dialog.toast({ content: !user_info.value.IsWords ? `主持人設置了禁言` : `主持人已解除禁言` });
+    Dialog.toast({ content: !user_info.value.IsWords ? t('common.setTaboo') : t('common.relieveTaboo') });
   }
 };
 
@@ -231,13 +277,16 @@ const handleMuteVideo = () => {
 
 const handleMuteAduio = () => {
   audioMuted.value = !audioMuted.value;
+  if (role.value == "leader") {
+    socket.value.emit("action", { type: "users-muted", muted: audioMuted.value, userId: user_info.value.UserId });
+  }
 };
 
 const setUserMuted = (res) => {
   if (res.userId) {
-    if (res.userId == user_info.value.UserId) {
+    if (res.userId == user_info.value.UserId && role.value == "customer") {
       user_info.value.IsMuted = res.muted;
-      Dialog.toast({ content: !user_info.value.IsMuted ? `主持人設置了开麦` : `主持人设置了静音` });
+      Dialog.toast({ content: !user_info.value.IsMuted ?  t('common.openMic') : t('common.closeMic') });
       disableMic.value = res.muted;
       audioMuted.value = res.muted;
     }
@@ -267,7 +316,7 @@ const onAllMuted = (res) => {
     user_info.value.IsMuted = res.muted;
     item.IsMuted = res.muted;
     if (role.value == "customer") {
-      Dialog.toast({ content: !user_info.value.IsMuted ? `主持人設置了开麦` : `主持人设置了静音` });
+      Dialog.toast({ content: !user_info.value.IsMuted ? t('common.openMic') : t('common.closeMic') });
       disableMic.value = res.muted;
       audioMuted.value = res.muted;
     }
@@ -287,15 +336,16 @@ const setUserJoin = async (res) => {
   // self.chekcLeaderInfo();
   let name = res.user.Nickname;
   if (res.user.Role == "leader") {
-    name = "主持人";
-    Dialog.toast({ content: `主持人進入房間` });
-  }
+    name = t('common.leader') ;
+    Dialog.toast({ content: t('common.leader')+t('common.inRoom') });
+    socket.value.emit("action", { type: "user-init" });
+  } 
   let data = {
     role: res.user.Role,
     mode: mode.value,
     Nickname: name,
     UserId: res.user.UserId,
-    text: "進入房間",
+    text: t('common.inRoom'),
   };
   chatList.value.push(data);
   await nextTick();
@@ -367,7 +417,7 @@ const sendText = async () => {
 const setReceiveMsg = async (res) => {
   console.log(res);
   if (res.role == "leader") {
-    res.Nickname = "主持人";
+    res.Nickname = t('common.leader');
   }
   chatList.value.push(res);
   await nextTick();
@@ -416,14 +466,14 @@ const onMemberLeave = async (res) => {
   let name = res.user.Nickname;
   if (res.user.Role == "leader") {
     name = "主持人";
-    Dialog.toast({ content: `主持人離開了房間` });
+    Dialog.toast({ content: t('common.leader') + t('common.leaveRoom') });
   }
   let data = {
     role: res.user.Role,
     mode: mode.value,
     Nickname: name,
     UserId: res.user.UserId,
-    text: "离开房間",
+    text: t('common.leaveRoom') ,
   };
   chatList.value.push(data);
   await nextTick();
@@ -438,35 +488,65 @@ const userCanSpeak = (item) => {
 };
 
 const onGetOuT = (data) => {
-  console.log(data.id, "data.id == user_info.value.UserId,", user_info.value.UserId);
   if (data.id == user_info.value.UserId) {
     emit("closeSocket");
-    Dialog.toast({ content: `您已被移除` });
+    Dialog.toast({ content: t('common.removed')});
   }
 };
 
+watch(
+  user_list,
+  () => {
+    if (role.value == "leader") {
+      all_mute_mic.value = !user_list.value.some((item) => !item.IsMuted && item.Role == "customer");
+    }
+  },
+  {
+    deep: true,
+  }
+);
+
 const startFollow = (app) => {
   app.Connect.follow.start({ follow: role.value == "customer" });
 
-  store.commit("rtc/setUserId", browser.getURLParam("userId") || `user_${role.value}_${Math.floor(Math.random() * 100000000)}`);
-  store.commit("rtc/setRoomId", browser.getURLParam("roomId") || Math.floor(Math.random() * 100000000));
+  store.commit("rtc/setUserId", browser.getURLParam("vruserId") || `user_${role.value}${Math.floor(Math.random() * 100000000)}`);
+  store.commit("rtc/setRoomId", browser.getURLParam("roomId") || `room_${Math.floor(Math.random() * 100000000)}`);
 
-  socket.value.on("connect", () => {
+  socket.value.on("connect", (e) => {
     socket.value.emit("join", {
       userId: userId.value,
       roomId: roomId.value,
       role: role.value || "leader",
-      nickname: browser.getURLParam("name") || common.uuid(12),
+      nickname: browser.getURLParam("name"),
     });
   });
 
   // 加入房間成功
   socket.value.on("join", (data) => {
+    let meblist = data.members.reduce(function (tempArr, item) {
+      if (tempArr.findIndex((ele) => ele.UserId === item.UserId) === -1) {
+        tempArr.push(item);
+      }
+      return tempArr;
+    }, []);
+
+    if (meblist.length > 5 && role.value == "customer") {
+      Dialog.toast({ content: t('common.fullStarffed') });
+      emit("closeSocket");
+      return;
+    }
+
     connectStatus.value = 1;
     if (role.value == "customer") {
+      socket.value.emit("action", { type: "ask-currentscene" });
       socket.value.emit("action", { type: "user-init" });
       if (data.user.IsMuted) {
         disableMic.value = true;
+        audioMuted.value = true;
+      }
+    } else {
+      if (data.user.IsMuted) {
+        audioMuted.value = true;
       }
     }
 
@@ -484,12 +564,7 @@ const startFollow = (app) => {
     isJoined.value = true;
 
     user_info.value = data.user;
-    user_list.value = data.members.reduce(function (tempArr, item) {
-      if (tempArr.findIndex((ele) => ele.UserId === item.UserId) === -1) {
-        tempArr.push(item);
-      }
-      return tempArr;
-    }, []);
+    user_list.value = meblist;
 
     //更新分享鏈接
     shareLink.value = getUrl(window.location.href.replace('scene.html','index.html'), [
@@ -502,7 +577,7 @@ const startFollow = (app) => {
         val: "",
       },
       {
-        key: "userId",
+        key: "vruserId",
         val: "",
       },
       {
@@ -515,6 +590,32 @@ const startFollow = (app) => {
       },
     ]);
 
+    wxShare({
+      donotconfig: true,
+      title: t('common.invitation'),
+      desc:  t('common.invitation'),
+      link: shareLink.value,
+      imgUrl: "https://glp-vr.cdfmembers.com/cdf/file/91dd5305525f463286f03a31abd1c154.jpg",
+    });
+
+    if (browser.detectWeixin()) {
+      //ios的ua中无miniProgram，但都有MicroMessenger（表示是微信浏览器）
+      wx.miniProgram.getEnv((res) => {
+        if (res.miniprogram) {
+          wx.miniProgram.postMessage({
+            data: {
+              title: t('common.invitation'),
+              imageUrl: "https://glp-vr.cdfmembers.com/cdf/file/91dd5305525f463286f03a31abd1c154.jpg",
+              h5Url: shareLink.value,
+            },
+          });
+          //在小程序里
+        }
+      });
+    }
+
+    console.log("分享", shareLink.value);
+
     let tmp = "";
 
     if (user_info.value.Role == "leader") {
@@ -524,19 +625,20 @@ const startFollow = (app) => {
           val: user_info.value.RoomId,
         },
         {
-          key: "userId",
+          key: "vruserId",
           val: user_info.value.UserId,
         },
       ]);
     } else {
       tmp = getUrl(window.location.href, [
         {
-          key: "userId",
+          key: "vruserId",
           val: user_info.value.UserId,
         },
       ]);
     }
-
+    console.log("創建房間後更新url", tmp);
+    store.commit("rtc/setRole", user_info.value.Role);
     history.replaceState(null, null, tmp);
     window.parent.postMessage(
       {
@@ -551,8 +653,9 @@ const startFollow = (app) => {
   });
 
   socket.value.on("action", (data) => {
+    console.log(data,'=============');
     if (data.type == "error") {
-      Dialog.toast({ content: `房間未找到`, type: "error" });
+      Dialog.toast({ content: t('common.notFoundRoom'), type: "error" });
       emit("closeSocket");
     } else if (data.type == "danmumsg") {
       setReceiveMsg(data.data);
@@ -564,13 +667,12 @@ const startFollow = (app) => {
       onDraw(data.open);
       if (role.value == "customer") {
         if (data.open) {
-          Dialog.toast({ content: `主持人開啟畫筆` });
+          Dialog.toast({ content: t('common.leader')+t('common.openBrush')  });
         } else {
-          Dialog.toast({ content: `主持人關閉畫筆` });
+          Dialog.toast({ content:  t('common.leader')+t('common.closeBrush') });
         }
       }
     } else if (data.type == "user-join") {
-      console.log(1111, data);
       setUserJoin(data);
     } else if (data.type == "users-muted") {
       setUserMuted(data);
@@ -583,7 +685,7 @@ const startFollow = (app) => {
       onMemberLeave(data);
     } else if (data.type == "leader-dismiss") {
       emit("closeSocket");
-      Dialog.toast({ content: `主持人已解散房间` });
+      Dialog.toast({ content: t('common.leader')+t('common.dismissRoom')  });
     } else if (data.type == "tagclick") {
       if (role.value == "customer") {
         let item = tags.value.find((item) => item.sid == data.data.sid);
@@ -597,6 +699,9 @@ const startFollow = (app) => {
             type: "waterfall",
             data: item,
           });
+        } else if (item.type == "link_scene") {
+          let sceneFirstView = item.hotContent.sceneFirstView;
+          window.location.href = jumpNewScene(sceneFirstView);
         }
         // document.querySelector(`[data-tag-id="${data.data.sid}"]`).click();
         // console.log(data.data.sid);
@@ -608,6 +713,25 @@ const startFollow = (app) => {
           data: {},
         });
       }
+    } else if (data.type == "ask-currentscene") {
+      console.log(111111111);
+      if (role.value == "leader") {
+        socket.value.emit("action", {
+          type: "answer-currentscene",
+          data: {
+            scene: browser.getURLParam("m"),
+            pose: browser.getURLParam("pose"),
+          },
+        });
+      }
+    } else if (data.type == "answer-currentscene") {
+      if (role.value == "customer") {
+        if (data.data.scene != browser.getURLParam("m")) {
+          let url1 = browser.replaceQueryString(window.location.href, "m", data.data.scene);
+          let url = browser.replaceQueryString(url1, "pose", data.data.pose);
+          location.replace(url)
+        }
+      }
     }
   });
 
@@ -626,20 +750,28 @@ const startFollow = (app) => {
   });
 };
 
-onMounted(() => {
-  useApp().then((app) => {
-    startFollow(app);
-    app.Connect.follow.on("data", (data) => {
-      if (isJoined.value) {
-        socket.value.emit("sync", data);
-      }
-    });
+let onfollowData = (data) => {
+  if (isJoined.value) {
+    socket.value.emit("sync", data);
+  }
+};
 
-    app.Connect.paint.on("data", (data) => {
-      canUndo.value = app.Connect.paint.records.length > 0;
-      socket.value.emit("paint", data);
-    });
-  });
+let onfollowPaint = async (data) => {
+  canUndo.value = (await getApp().Connect.paint.records.length) > 0;
+  socket.value.emit("paint", data);
+};
+
+onMounted(async () => {
+  let app = await getApp();
+  startFollow(app);
+  app.Connect.follow.on("data", onfollowData);
+  app.Connect.paint.on("data", onfollowPaint);
+});
+
+onUnmounted(async () => {
+  let app = await getApp();
+  app.Connect.follow.off("data", onfollowData);
+  app.Connect.follow.off("data", onfollowData);
 });
 </script>
 
@@ -1140,4 +1272,21 @@ onMounted(() => {
     }
   }
 }
+.sharetip {
+  position: fixed;
+  z-index: 99999;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  background-color: rgba($color: #000000, $alpha: 0.66);
+  > img {
+    position: absolute;
+    right: 16%;
+    top: 0;
+    max-width: 70vw;
+  }
+}
 </style>

src/components/RTC/Trtccom.vue

@@ -37,12 +37,13 @@
 <script setup>
 import TRTC, { Client, LocalStream } from "trtc-js-sdk";
 import { Dialog } from "@/global_components/";
-import { ref, computed, watch, defineEmits, defineProps, nextTick } from "vue";
+import { ref, computed, watch, defineEmits, defineProps, nextTick, onUnmounted } from "vue";
 import Device from "./trtc/Device";
 import { useStore } from "vuex";
 import browser from "@/utils/browser";
+// import * as apis from "@/apis/index.js";
 
-const emit = defineEmits(["audioMuted", "videoMuted"]);
+const emit = defineEmits(["audioMuted", "videoMuted", "closeSocket"]);
 
 const store = useStore();
 
@@ -56,13 +57,12 @@ const muteVideoLeader = ref(false);
 
 const isJoined = computed(() => store.getters["rtc/isJoined"]);
 const isPublished = computed(() => store.getters["rtc/isPublished"]);
-const userSig = computed(() => store.getters["rtc/userSig"]);
 const videoDeviceId = computed(() => store.getters["rtc/videoDeviceId"]);
 
 const initParamsStates = computed(
   () => !!(store.getters["rtc/sdkAppId"] && store.getters["rtc/secretKey"] && store.getters["rtc/roomId"] && store.getters["rtc/userId"])
 );
-
+const userSig = computed(() => store.getters["rtc/userSig"]);
 let localClient = "";
 let localStream = "";
 let shareClient = "";
@@ -101,14 +101,14 @@ watch(
   }
 );
 
-watch(
-  () => isJoined.value,
-  () => {
-    if (!isJoined.value) {
-      handleLeave();
-    }
-  }
-);
+// watch(
+//   () => isJoined.value,
+//   () => {
+//     if (!isJoined.value) {
+//       handleLeave();
+//     }
+//   }
+// );
 
 TRTC.checkSystemRequirements().then((checkResult) => {
   if (!checkResult.result) {
@@ -131,6 +131,12 @@ async function createLocalStream() {
     isLeader && localStream.setVideoProfile("480p");
 
     await localStream.initialize();
+    if (props.audioMuted) {
+      localStream.muteAudio();
+      if (role.value == "leader") {
+        muteAudioLeader.value = props.audioMuted;
+      }
+    }
   } catch (error) {
     console.log(error, "createStream");
   }
@@ -142,15 +148,18 @@ async function handleJoin() {
   }
 
   try {
+    // let res = await apis.getSign({ userId: store.getters["rtc/userId"] });
     localClient = TRTC.createClient({
       mode: "rtc",
       sdkAppId: parseInt(store.getters["rtc/sdkAppId"], 10),
       userId: store.getters["rtc/userId"],
       userSig: userSig.value,
+      useStringRoomId: true,
+      enableAutoPlayDialog: false,
     });
     installEventHandlers();
 
-    await localClient.join({ roomId: parseInt(store.getters["rtc/roomId"], 10) });
+    await localClient.join({ roomId: store.getters["rtc/roomId"] });
     store.commit("rtc/setIsJoined", true);
     // inviteLink.value = store.commit("rtc/createShareLink");
   } catch (error) {
@@ -164,7 +173,29 @@ async function handleJoin() {
     .then(() => {
       // addLocalControlView();
     })
-    .catch((e) => {});
+    .catch((e) => {
+      console.log(stream);
+    });
+
+  localStream.on("error", (error) => {
+    if (error.getCode() === 0x4043) {
+      // 自动播放受限导致播放失败，此时引导用户点击页面。
+      // 在点击事件的回调函数中，执行 stream.resume();
+      Dialog.confirm({
+        showCloseIcon: false,
+        okText: "确定",
+        content:
+          "<span style='font-size: 16px; line-height: 1.5;'>在用户与网页产生交互（例如点击、触摸页面等）之前，网页将被禁止播放带有声音的媒体。点击恢复播放<span/>",
+        title: "隱私條款：",
+        single: true,
+        func: (state) => {
+          if (state == "ok") {
+            localStream.resume();
+          }
+        },
+      });
+    }
+  });
 }
 
 async function handlePublish() {
@@ -178,15 +209,18 @@ async function handlePublish() {
   try {
     await localClient.publish(localStream);
     store.commit("rtc/setIsPublished", true);
-  } catch (error) {}
+  } catch (error) {
+    console.error(error, "---------------handlePublish--------------------");
+  }
 }
 
 async function handleStartShare() {
   shareClient = new ShareClient({
     sdkAppId: parseInt(store.getters["rtc/sdkAppId"], 10),
     userId: `share${store.getters["rtc/userId"]}`,
-    roomId: parseInt(store.getters["rtc/roomId"], 10),
+    roomId: store.getters["rtc/roomId"],
     secretKey: store.getters["rtc/secretKey"],
+    useStringRoomId: true,
   });
   try {
     await shareClient.join();
@@ -208,7 +242,9 @@ async function handleUnpublish() {
   try {
     await localClient.unpublish(localStream);
     store.commit("rtc/setIsPublished", false);
-  } catch (error) {}
+  } catch (error) {
+    console.error(error, "-----------handleUnpublish--------------");
+  }
 }
 
 async function handleLeave() {
@@ -218,12 +254,24 @@ async function handleLeave() {
   try {
     uninstallEventHandlers();
     await localClient.leave();
+    localClient.destroy();
+    localClient = null;
+    invitedRemoteStreams.value.forEach((item) => {
+      item.stop();
+    });
+    invitedRemoteStreams.value = [];
+    store.commit("rtc/setVideoDeviceId", "");
+    store.commit("rtc/setAudioDeviceId", "");
+
     if (localStream) {
       localStream.stop();
       localStream.close();
       localStream = null;
+      console.log("有执行到这里-------------");
     }
-  } catch (error) {}
+  } catch (error) {
+    console.error(error, "-----------handleLeave--------------");
+  }
 }
 
 function installEventHandlers() {
@@ -323,12 +371,12 @@ function handleStreamAdded(event) {
   if (remoteStream.getUserId() === store.getters["rtc/userId"]) {
     // don't need to screen shared by us
     localClient.unsubscribe(remoteStream).catch((error) => {
-      console.error(`unsubscribe failed: ${error.message_}`);
+      console.info(`unsubscribe failed: ${error.message_}`);
     });
   } else {
     console.log(`remote stream added: [${userId}] ID: ${id} type: ${remoteStream.getType()}`);
     localClient.subscribe(remoteStream).catch((error) => {
-      console.error(`subscribe failed: ${error.message_}`);
+      console.info(`subscribe failed: ${error.message_}`);
     });
   }
 }
@@ -339,6 +387,7 @@ async function handleStreamSubscribed(event) {
   if (remoteStream.userId_ == store.getters["rtc/userId"]) {
     return;
   }
+  console.info(remoteStream.userId_, store.getters["rtc/userId"], "handleStreamSubscribedhandleStreamSubscribed.value");
 
   if (!invitedRemoteStreams.value.some((item) => item.userId_ == remoteStream.userId_)) {
     invitedRemoteStreams.value.push(remoteStream);
@@ -392,6 +441,10 @@ let switchDevice = async ({ videoId, audioId }) => {
   }
 };
 
+onUnmounted(() => {
+  handleLeave();
+});
+
 let canUseDevice = () => {
   console.log("可用");
   handleJoin();

src/components/RTC/dialog/createdRoom.vue

@@ -3,15 +3,15 @@
     <div class="created_dialog">
       <div class="blurBox"></div>
       <div class="content">
-        <div class="dialog_title" v-if="role == 'leader'">創建帶看場景</div>
-        <div class="dialog_title" v-else>進入帶看場景</div>
+        <div class="dialog_title" v-if="role == 'leader'">{{ $t("common.createTour") }}</div>
+        <div class="dialog_title" v-else>{{ $t("common.joinTour") }}</div>
         <div class="user_name">
           <input
             class="input_name"
             maxlength="20"
             v-model.trim="userName"
             type="text"
-            :placeholder="role == 'leader' ? ' 請輸入帶看主持人名稱' : '請輸入您的昵稱'"
+            :placeholder="role == 'leader' ? $t('common.leadernickName') : $t('common.inputnickName')"
           />
           <span class="limitNum">{{ userName.length }}/20</span>
         </div>
@@ -19,17 +19,23 @@
           <div @click="chooseMode(i.mode)" v-for="i,index in modeList" :key="index" :class="{ active: mode==i.mode }" class="mode">{{i.title}}</div>
         </div> -->
         <div class="created_btn">
-          <div class="created_cancel" @click="closeCreated">取消</div>
-          <div class="created_confirm" @click="createdConfirm">確認</div>
+          <div class="created_cancel" @click="closeCreated">{{ $t("common.cancel") }}</div>
+          <div class="created_confirm" @click="createdConfirm">{{ $t("common.confirm") }}</div>
         </div>
       </div>
     </div>
   </div>
 </template>
 
+<script setup>
+import { useI18n, getLocale } from "@/i18n";
+const { t } = useI18n({ useScope: "global" });
+</script>
+
 <script>
 import { Dialog } from "@/global_components/";
 import browser from "@/utils/browser";
+import { useStore } from "vuex";
 
 export default {
   data() {
@@ -46,8 +52,10 @@ export default {
           title: "多人模式",
         },
       ],
+      store: useStore(),
       userName: "",
       roomId: browser.getURLParam("roomId"),
+      $t: this.t,
     };
   },
 
@@ -59,7 +67,8 @@ export default {
     getUrl(href, queryArr) {
       queryArr.forEach((item) => {
         if (!browser.hasURLParam(item.key)) {
-          href += `&${item.key}=${item.val}`;
+          let ttt = href.split("index.html?");
+          href = `${ttt[0]}index.html?${item.key}=${item.val}&${ttt[1]}`;
         } else {
           href = browser.replaceQueryString(href, item.key, item.val);
         }
@@ -73,11 +82,10 @@ export default {
     },
     closeCreated() {
       this.$emit("closeCreated");
-      !browser.hasURLParam("pose");
     },
     createdConfirm() {
       if (this.userName == "") {
-        Dialog.toast({ content: "請輸入您的昵稱", type: "error" });
+        Dialog.toast({ content: this.$t("common.inputnickName"), type: "error" });
         return;
       }
       let name = encodeURIComponent(this.userName);
@@ -102,6 +110,7 @@ export default {
             val: this.roomId,
           },
         ]);
+        // history.replaceState(null, null, hh + "&mode=" + this.mode + "&name=" + name + "&role=customer&roomId=" + this.roomId);
         history.replaceState(null, null, tempUrl);
         window.parent.postMessage(
           {
@@ -129,18 +138,12 @@ export default {
           },
         ]);
 
+        // history.replaceState(null, null,hh + "&mode=" + this.mode + "&name=" + name + "&role=leader");
         history.replaceState(null, null, tempUrl);
-        window.parent.postMessage(
-          {
-            source: "cdf",
-            event: "urlReplace",
-            params: {
-              tempUrl,
-            },
-          },
-          "*"
-        );
+        console.log(tempUrl);
       }
+      this.store.commit("rtc/setRole", this.role);
+
       this.$nextTick(() => {
         this.$emit("createdConfirm");
       });

src/components/RTC/dialog/index.vue

@@ -3,11 +3,11 @@
     <div class="created_dialog">
       <div class="blurBox"></div>
       <div class="content">
-        <div class="dialog_title">{{ props.title }}</div>
-        <p class="dialog_desc">{{ props.desc }}</p>
+        <div class="dialog_title">{{ props.title || $t('common.wenxintips') }}</div>
+        <p class="dialog_desc">{{ props.desc ||  $t('common.isOver')}}</p>
         <div class="created_btn">
-          <div class="end_cancel" @click="endLiveCancel">取消</div>
-          <div class="end_confirm" @click="endLiveConfirm">確認</div>
+          <div class="end_cancel" @click="endLiveCancel">{{$t('common.cancel')}}</div>
+          <div class="end_confirm" @click="endLiveConfirm">{{$t('common.confirm')}}確認</div>
         </div>
       </div>
     </div>
@@ -18,9 +18,12 @@
 import browser from "@/utils/browser";
 import { onMounted, watch, defineProps, defineEmits, ref, computed } from "vue";
 import { useStore } from "vuex";
+import { useI18n, getLocale } from '@/i18n'
+
 const store = useStore();
 
 const emit = defineEmits(["closeDialog","confirmDialog"]);
+const { t } = useI18n({ useScope: 'global' })
 
 const role = ref(browser.urlHashValue("role"));
 const socket = computed(() => store.getters["rtc/socket"]);
@@ -29,11 +32,11 @@ const socket = computed(() => store.getters["rtc/socket"]);
 const props = defineProps({
   title: {
     type: String,
-    default: "溫馨提示",
+    default: '',
   },
   desc: {
     type: String,
-    default: "是否結束帶看",
+    default: "",
   },
 });
 

src/components/RTC/dialog/share.vue

@@ -3,7 +3,7 @@
     <div class="created_dialog">
       <div class="blurBox"></div>
       <div class="content">
-        <div class="dialog_title">{{ title }}</div>
+        <div class="dialog_title">{{ title || $t('share.shareLinkTips') }}</div>
         <div class="dialog_link">
           <p>
             {{ shareLink }}
@@ -11,8 +11,8 @@
         </div>
 
         <div class="created_btn">
-          <div class="created_cancel" @click="closeCreated">取消</div>
-          <div class="created_confirm"  ref="copylink$" :data-clipboard-text="shareLink" @click="createdConfirm">復製分享</div>
+          <div class="created_cancel" @click="closeCreated">{{ $t('common.cancel')}}</div>
+          <div class="created_confirm"  ref="copylink$" :data-clipboard-text="shareLink" @click="createdConfirm">{{ $t('share.shareLink')}} 複製分享</div>
         </div>
       </div>
     </div>
@@ -23,13 +23,15 @@
 import { onMounted, watch, defineProps, defineEmits, ref, nextTick } from "vue";
 import ClipboardJS from 'clipboard'
 import { Dialog } from '@/global_components/'
+import { useI18n, getLocale } from '@/i18n'
+const { t } = useI18n({ useScope: 'global' })
 
 const emit = defineEmits(["closeDialog"]);
 
 const props = defineProps({
   title: {
     type: String,
-    default: "邀請好友",
+    default: ``,
   },
   shareLink: {
     type: String,
@@ -50,7 +52,7 @@ onMounted(() => {
    nextTick(()=>{
      new ClipboardJS(copylink$.value).on('success', function (e) {
         e.clearSelection()
-        Dialog.toast({ content: '鏈接復製成功', type: 'success' })
+        Dialog.toast({ content: '鏈接複製成功', type: 'success' })
     })
    })
 })

src/components/RTC/index.vue

@@ -15,6 +15,7 @@ import PageRtcLive from "./PageRtcLive";
 import createdRoom from "./dialog/createdRoom";
 import dialogIndex from "./dialog/index.vue";
 import dialogShare from "./dialog/share.vue";
+import { Dialog } from "@/global_components/";
 import browser from "@/utils/browser";
 import { onMounted, watch, computed, ref, nextTick } from "vue";
 import { useStore } from "vuex";
@@ -43,54 +44,73 @@ const closeDialog = (str, link) => {
 
 const confirmDialog = async () => {
   await getApp().Connect.follow.exit();
-  store.commit("rtc/setIsJoined", false);
   if (socket.value) {
-    if (role.value == "leader") {
+    if (browser.getURLParam("role") == "leader") {
       socket.value.emit("action", { type: "leader-dismiss" });
     }
 
-    socket.value.close();
-    store.commit("rtc/setSocket", null);
-    window.parent.postMessage(
-      {
-        source: "cdf",
-        event: "exit",
-        params: {
-          role:role.value
-        },
-      },
-      "*"
-    );
+    setTimeout(() => {
+      socket.value.close();
+      store.commit("rtc/setSocket", null);
+    }, 0);
   }
 
+  store.commit("rtc/setIsJoined", false);
+
+  store.commit("rtc/setVideoDeviceId", "");
+  store.commit("rtc/setAudioDeviceId", "");
+
   let tempUrl = window.location.href;
-  ["mode", "name", "role", "roomId", "userId"].forEach((item) => {
+  ["mode", "name", "role", "roomId", "vruserId"].forEach((item) => {
     tempUrl = browser.replaceQueryString(tempUrl, item, "");
   });
+
   history.replaceState(null, null, tempUrl);
-  window.parent.postMessage(
-    {
-      source: "cdf",
-      event: "urlReplace",
-      params: {
-        tempUrl,
-      },
-    },
-    "*"
-  );
+  store.commit("rtc/setRole", "");
 
   store.commit("showShoppingguide", false);
   dialog.value = "";
+
+  setTimeout(() => {
+    location.reload();
+  }, 100);
 };
 
 const closeCreated = (str, link) => {
   store.commit("showShoppingguide", false);
   showCreated.value = false;
+  showguide();
+  if (browser.getURLParam("role")) {
+    let tempUrl = window.location.href;
+    ["mode", "name", "role", "roomId", "vruserId"].forEach((item) => {
+      tempUrl = browser.replaceQueryString(tempUrl, item, "");
+    });
+    history.replaceState(null, null, tempUrl);
+  }
 };
 
 const createdConfirm = (str, link) => {
   showCreated.value = false;
   show.value = true;
+  showguide();
+};
+
+const showguide = () => {
+  if (!localStorage.getItem("user_guide")) {
+    Dialog.confirm({
+      showCloseIcon: false,
+      okText: "我知道了",
+      content:
+        "<span style='font-size: 16px; line-height: 1.5;'>開發者已遵守收集、使用最終用戶個人信息有關的所有可適用法律、政策和法規，保護用戶個人信息安全。<span/>",
+      title: "隱私條款：",
+      single: true,
+      func: (state) => {
+        if (state == "ok") {
+          localStorage.setItem("user_guide", Date.now());
+        }
+      },
+    });
+  }
 };
 
 onMounted(() => {
@@ -100,6 +120,7 @@ onMounted(() => {
       createdConfirm();
     } else {
       showCreated.value = true;
+      // showguide()
     }
   });
   // showCreated.value = true;

src/components/RTC/trtc/Device.vue

@@ -50,11 +50,9 @@ const updateDevice = async () => {
   }
 };
 
-let quxian = { audio: true };
+let quxian = role.value == "leader" ?{ audio: true,video:true }: { audio: true };
 
-if (role.value == "leader") {
-  quxian["video"] == true;
-}
+console.log(quxian, '--------quxian-------');
 
 navigator.mediaDevices
   .getUserMedia(quxian)

src/components/Tags/goods-list.vue

@@ -11,57 +11,59 @@
       <div class="swiper-container" id="goodlist">
         <ul class="swiper-wrapper">
           <li class="swiper-slide" v-for="(i, index) in tagclick.data.products" :key="index">
-            <viewimg :list="i.pics" :keyid="`viewimg_${index + 1}`" />
+            <div>
+              <viewimg :list="i.pics" :keyid="`viewimg_${index + 1}`" />
 
-            <div class="info">
-              <p>{{ i.name }}</p>
-              <div v-if="i.skus">
-                <span>{{ i.price[0].symbol }}</span
-                ><span>{{ i.currentSku.price }}</span>
+              <div class="info">
+                <p>{{ i.name }}</p>
+                <div v-if="i.skus">
+                  <span>{{ i.price[0].symbol }}</span
+                  ><span>{{ i.currentSku.price }}</span>
+                </div>
+                <ul>
+                  <li>
+                    <span>{{$t('common.guige')}}</span>
+                    <ul>
+                      <li @click.stop="onClickSku(item)" :class="{ active: item.id == i.currentSku.id }" v-for="(item, idx) in i.skus" :key="idx">
+                        <span v-if="item.properties[0]">
+                          {{ item.properties[0].value }}
+                        </span>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <span>{{$t('common.shuliang')}}</span>
+                    <div class="number">
+                      <ui-icon
+                        @click="
+                          () => {
+                            i.cartnum--;
+                            i.cartnum = Math.max(i.cartnum, 0);
+                          }
+                        "
+                        type="cad-neiqiang"
+                      ></ui-icon>
+                      <input maxlength="5" v-model="i.cartnum" type="number" />
+                      <ui-icon
+                        @click="
+                          () => {
+                            i.cartnum++;
+                            i.cartnum = Math.min(i.cartnum, 9999);
+                          }
+                        "
+                        type="add"
+                      ></ui-icon>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+              <div class="goods-button">
+                <span v-if="i.saleChannel == 1" class="tipss">{{$t('common.onlyOffLine')}}</span>
+                <template v-else>
+                  <div @click.stop="viewDetail(i)">{{$t('common.viewDetail')}}</div>
+                  <div @click.stop="addCart(i)">{{$t('common.addCart')}}</div>
+                </template>
               </div>
-              <ul>
-                <li>
-                  <span>規格：</span>
-                  <ul>
-                    <li @click.stop="onClickSku(item)" :class="{ active: item.id == i.currentSku.id }" v-for="(item, idx) in i.skus" :key="idx">
-                      <span v-if="item.properties[0]">
-                        {{ item.properties[0].value }}
-                      </span>
-                    </li>
-                  </ul>
-                </li>
-                <li>
-                  <span>數量：</span>
-                  <div class="number">
-                    <ui-icon
-                      @click="
-                        () => {
-                          i.cartnum--;
-                          i.cartnum = Math.max(i.cartnum, 0);
-                        }
-                      "
-                      type="cad-neiqiang"
-                    ></ui-icon>
-                    <input maxlength="5" v-model="i.cartnum" type="number" />
-                    <ui-icon
-                      @click="
-                        () => {
-                          i.cartnum++;
-                          i.cartnum = Math.min(i.cartnum, 9999);
-                        }
-                      "
-                      type="add"
-                    ></ui-icon>
-                  </div>
-                </li>
-              </ul>
-            </div>
-            <div class="goods-button">
-              <span  v-if="i.saleChannel == 1" class="tipss">僅供線下門店購買</span>
-               <template  v-else>
-                <div @click.stop="viewDetail(i)">查看詳情</div>
-                <div @click.stop="addCart(i)">加入購物車</div>
-              </template>
             </div>
           </li>
         </ul>
@@ -79,8 +81,13 @@ import { Loading, Dialog } from "@/global_components/";
 import browser from "@/utils/browser";
 import viewimg from "@/views/viewimg";
 
+import { useI18n, getLocale } from '@/i18n'
+const { t } = useI18n({ useScope: 'global' })
+
+
 // get_product_info
 const store = useStore();
+const isshoppingguide = computed(() => store.getters["shoppingguide"]);
 
 const tagclick = computed(() => store.getters["tag/tagClickType"]);
 
@@ -88,12 +95,18 @@ const emit = defineEmits(["close"]);
 
 const current = ref(0);
 
+const mysw = ref(null);
+
 const viewDetail = (item) => {
+  if (isshoppingguide.value) {
+    return;
+  }
   apis.burying_point({ type: 3, productId: item.id });
   browser.openLink(
-  `/pages/item/item?productId=${item.id}`, 
-  `https://m.cdfmembers.com/shop/600667208/item?productId=${item.id}`,
-  `/pages/item/item?productId=${item.id}`);
+    `/pages/item/item?productId=${item.id}`,
+    `https://m.cdfmembers.com/shop/600667208/item?productId=${item.id}`,
+    `/pages/item/item?productId=${item.id}`
+  );
 };
 
 const onClickSku = (item) => {
@@ -111,19 +124,22 @@ const onClickSku = (item) => {
 };
 
 const addCart = async (item) => {
+  if (isshoppingguide.value) {
+    return;
+  }
   Loading.show();
 
   let result = await apis.inCat({
     AccessToken: browser.getURLParam("AccessToken"),
     skuId: item.currentSku.id,
     num: item.cartnum,
-    rnd:Math.random()
+    rnd: Math.random(),
   });
 
   Loading.hide();
   if (result.code === 0) {
-    apis.burying_point({ type: 7, productId: item.id});
-    return Dialog.toast({ content: `添加成功`, type: "success" });
+    apis.burying_point({ type: 7, productId: item.id });
+    return Dialog.toast({ content: t('common.addSuccess'), type: "success" });
   } else {
     let callbackUrl = `${window.location.origin}${window.location.pathname}?m=${browser.getURLParam("m")}&${getApp().Camera.getPoseUrlParams()}`;
 
@@ -133,7 +149,7 @@ const addCart = async (item) => {
       callbackUrl = browser.replaceQueryString(callbackUrl, "tagid", tagclick.value.data.sid);
     }
     console.log(callbackUrl);
-    //  Dialog.toast({ content: `登录状态失效，请重新登录`, type: 'error' })
+    //  Dialog.toast({ content: `登錄狀態失效，請重新登錄`, type: 'error' })
     browser.openLink(
       `/pages/login/login?callbackHttpUrl=${encodeURIComponent(callbackUrl)}`,
       `https://m.cdfmembers.com/shop/600667208/h5login?redirectUrl=${encodeURIComponent(callbackUrl)}`,
@@ -148,40 +164,50 @@ const close = () => {
 
 const updateProductsById = async (idx) => {
   if (!tagclick.value.data.products[idx]) {
-    Dialog.toast({ content: `获取商品详情失败，请稍后再试`, type: "error" });
+    Dialog.toast({ content: t('common.viewDetailFail'), type: "error" });
     close();
     return;
   }
   Loading.show();
-  let res = await apis.get_product_info({
-    // productId: 'p15677829'
-    productId: tagclick.value.data.products[idx].id,
-  });
+  try {
+    let res = await apis.get_product_info({
+      // productId: 'p15677829'
+      productId: tagclick.value.data.products[idx].id,
+    });
 
-  let tempData = toRaw(tagclick.value.data);
+    let tempData = toRaw(tagclick.value.data);
 
-  tempData.products[idx] = {
-    ...tempData.products[idx],
-    ...res.data,
-    currentSku: res.data.skus[0] || {
-      price: "",
-      id: "",
-    },
-    cartnum: 1,
-  };
+    tempData.products[idx] = {
+      ...tempData.products[idx],
+      ...res.data,
+      currentSku: res.data.skus[0] || {
+        price: "",
+        id: "",
+      },
+      cartnum: 1,
+    };
 
-  store.commit("tag/setTagClickType", {
-    type: tagclick.value.type,
-    data: tempData,
-  });
-  Loading.hide();
+    store.commit("tag/setTagClickType", {
+      type: tagclick.value.type,
+      data: tempData,
+    });
+    Loading.hide();
+  } catch (error) {
+    Loading.hide();
+  }
 };
 
 watch(
   () => tagclick.value.type,
   (val, old) => {
-    if (val === "goodlist") {
-      updateProductsById(current.value);
+    if (mysw.value) {
+      if (val === "goodlist") {
+        current.value = 0;
+        updateProductsById(current.value);
+      }
+      if (!val) {
+        mysw.value.slideTo(0);
+      }
     }
   }
 );
@@ -190,7 +216,7 @@ const brandScroll = () => {
   nextTick(() => {
     let t = setTimeout(() => {
       clearTimeout(t);
-      new Swiper("#goodlist", {
+      mysw.value = new Swiper("#goodlist", {
         effect: "coverflow",
         grabCursor: true,
         centeredSlides: true,
@@ -208,8 +234,10 @@ const brandScroll = () => {
             e.preventDefault();
           },
           slideChange() {
-            current.value = this.activeIndex;
-            updateProductsById(current.value);
+            if (tagclick.value.type) {
+              current.value = this.activeIndex;
+              updateProductsById(current.value);
+            }
           },
         },
       });
@@ -270,108 +298,111 @@ onMounted(() => {
         position: relative;
         font-size: 0;
         overflow: hidden;
+
+        > div {
         background: #fff;
         padding-bottom: 14px;
 
-        .info {
-          font-size: 14px;
-          color: #131d34;
-          padding: 16px 20px;
-          > p {
-            font-size: 16px;
-            width: 100%;
-            line-height: 1.5;
-            word-break: break-all;
-          }
-          > div {
-            color: var(--editor-main-color);
-            padding: 8px 0px 10px;
-            border-bottom: 1px solid #ebebeb;
-            > span {
+          .info {
+            font-size: 14px;
+            color: #131d34;
+            padding: 16px 20px;
+            > p {
               font-size: 16px;
-              &:first-of-type {
-                font-size: 12px;
-                margin-right: 4px;
-              }
+              width: 100%;
+              line-height: 1.5;
+              word-break: break-all;
             }
-          }
-          > ul {
-            padding: 12px 0;
-            border-bottom: 1px solid #ebebeb;
-
-            > li {
-              margin: 10px 0;
-              color: #909090;
-              &:last-of-type {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-              }
+            > div {
+              color: var(--editor-main-color);
+              padding: 8px 0px 10px;
+              border-bottom: 1px solid #ebebeb;
               > span {
-                font-size: 12px;
+                font-size: 16px;
+                &:first-of-type {
+                  font-size: 12px;
+                  margin-right: 4px;
+                }
               }
-              > ul {
-                display: block;
-                > li {
-                  display: inline-block;
-                  > span {
+            }
+            > ul {
+              padding: 12px 0;
+              border-bottom: 1px solid #ebebeb;
+
+              > li {
+                margin: 10px 0;
+                color: #909090;
+                &:last-of-type {
+                  display: flex;
+                  justify-content: space-between;
+                  align-items: center;
+                }
+                > span {
+                  font-size: 12px;
+                }
+                > ul {
+                  display: block;
+                  > li {
                     display: inline-block;
-                    border: 1px solid #ebebeb;
-                    padding: 2px 4px;
-                    min-width: 73px;
-                    height: 30px;
-                    line-height: 30px;
-                    margin: 8px 8px 0 0;
-                    text-align: center;
-                    border-radius: 4px;
-                    font-size: 12px;
-                  }
-                  &.active {
                     > span {
-                      border: solid 1px var(--editor-main-color);
-                      color: var(--editor-main-color);
+                      display: inline-block;
+                      border: 1px solid #ebebeb;
+                      padding: 2px 4px;
+                      min-width: 73px;
+                      height: 30px;
+                      line-height: 30px;
+                      margin: 8px 8px 0 0;
+                      text-align: center;
+                      border-radius: 4px;
+                      font-size: 12px;
+                    }
+                    &.active {
+                      > span {
+                        border: solid 1px var(--editor-main-color);
+                        color: var(--editor-main-color);
+                      }
                     }
                   }
                 }
-              }
-              .number {
-                display: flex;
-                i {
-                  font-size: 12px;
-                  border: 1px solid #ebebeb;
-                  padding: 2px 8px;
-                  border-radius: 15px;
-                }
-                input {
-                  max-width: 40px;
-                  text-align: center;
-                  color: #131d34;
+                .number {
+                  display: flex;
+                  i {
+                    font-size: 12px;
+                    border: 1px solid #ebebeb;
+                    padding: 2px 8px;
+                    border-radius: 15px;
+                  }
+                  input {
+                    max-width: 40px;
+                    text-align: center;
+                    color: #131d34;
+                  }
                 }
               }
             }
           }
-        }
-        .goods-button {
-          display: flex;
-          justify-content: space-between;
-          font-size: 16px;
-          padding: 0 20px;
+          .goods-button {
+            display: flex;
+            justify-content: space-between;
+            font-size: 16px;
+            padding: 0 20px;
 
-          > div {
-            height: 42px;
-            background: #ff8e24;
-            border-radius: 4px;
-            width: 48%;
-            text-align: center;
-            line-height: 42px;
-            &:last-of-type {
-              background: var(--editor-main-color);
+            > div {
+              height: 42px;
+              background: #ff8e24;
+              border-radius: 4px;
+              width: 48%;
+              text-align: center;
+              line-height: 42px;
+              &:last-of-type {
+                background: var(--editor-main-color);
+              }
+            }
+            .tipss {
+              color: #909090;
+              display: inline-block;
+              margin: 0 auto;
             }
-          }
-          .tipss{
-            color: #909090;
-            display: inline-block;
-            margin: 0 auto;
           }
         }
       }

src/components/Tags/waterfall.vue

@@ -13,7 +13,7 @@
             <div class="wfavatar" :style="{ backgroundImage: `url(${item.pic})` }"></div>
             <div class="wfinfo">
               <p>{{ item.name }}</p>
-              <p>{{ item.symbol }} {{ item.price }} | 查看 ></p>
+              <p>{{ item.symbol }} {{ item.price }} | {{$t('common.view')}} ></p>
             </div>
           </li>
         </ul>
@@ -29,13 +29,21 @@ import { useStore } from "vuex";
 import browser from "@/utils/browser";
 import * as apis from "@/apis/index.js";
 
+
+import { useI18n, getLocale } from '@/i18n'
+const { t } = useI18n({ useScope: 'global' })
+
 const store = useStore();
 
 const tagclick = computed(() => store.getters["tag/tagClickType"]);
+const isshoppingguide = computed(() => store.getters["shoppingguide"]);
 
 const emit = defineEmits(["close"]);
 const gotoGoods = (item) => {
-  apis.burying_point({type:3});
+  if (isshoppingguide.value) {
+      return;
+  }
+  apis.burying_point({ type: 3, productId: item.id });
   browser.openLink(`/pages/item/item?productId=${item.id}`, `https://m.cdfmembers.com/shop/600667208/item?productId=${item.id}`,`/pages/item/item?productId=${item.id}`);
 };
 </script>

src/components/openVideo/index.vue

@@ -3,7 +3,7 @@
     <div class="open-video">
       <!-- <div class="vmask"></div> -->
       <video x5-playsinline="true" playsinline="true" webkit-playsinline="true" class="video" ref="openvideo$" preload autoplay :src="videourl"></video>
-      <div v-show="videourl" @click.stop="countdown==0&&emit('close')" class="jump">{{countdown>0?countdown+'s 後可跳過視頻':'跳過'}}</div>
+      <div v-show="videourl" @click.stop="countdown==0&&emit('close')" class="jump">{{countdown>0?countdown+$t('common.jumpTips'):$t('common.jump')}}</div>
       <img v-show="videourl && bofanging" @click.stop="bofang" class="bofang" :src="require('@/assets/images/icon/bofang.png')" alt="" />
     </div>
   </transition>
@@ -11,7 +11,8 @@
 <script setup>
 import { ref, watch, defineEmits, computed, onMounted, nextTick, defineProps } from "vue";
 import * as apis from "@/apis/index.js";
-
+import { useI18n, getLocale } from '@/i18n'
+const { t } = useI18n({ useScope: 'global' })
 const openvideo$ = ref(null);
 
 const videourl = ref(null);

src/components/shared/Guide.vue

@@ -1,7 +1,15 @@
 <template>
   <div v-if="show && isMobile" class="user-guide-overlay">
     <div class="user-guide-mobile">
-      <div class="zh">
+      <div class="zh en" v-if="player.lang == 'en'">
+        <div class="btn" @click="onSet"></div>
+      </div>
+
+      <div class="zh" v-else-if="player.lang == 'zh_CN'">
+        <div class="btn" @click="onSet"></div>
+      </div>
+
+      <div class="zh fan" v-else>
         <div class="btn" @click="onSet"></div>
       </div>
     </div>
@@ -12,10 +20,12 @@ import { onMounted, watch, computed, ref, nextTick } from "vue";
 import { useApp } from "@/app";
 import browser from "@/utils/browser";
 import { useStore } from "vuex";
+import { useI18n, getLocale } from '@/i18n'
 
 const isMobile = browser.isMobile();
 const show = computed(() => store.getters["player"].showUserGuide);
 const store = useStore();
+const player = computed(() => store.getters["player"]);
 
 const onSet = () => {
   store.commit("showUserGuide", false);
@@ -40,7 +50,7 @@ useApp().then((app) => {
   top: 0;
   width: 100%;
   height: 100%;
-  z-index: 10999999999;
+  z-index: 1099999;
   background-color: rgba(0, 0, 0, 0.7);
 }
 .user-guide {
@@ -148,53 +158,19 @@ useApp().then((app) => {
     background-repeat: no-repeat;
   }
   .en {
-    width: 100%;
-    color: #fff;
-    ul,
-    li {
-      list-style: none;
-      padding: 0;
-      margin: 0;
-      width: 100%;
-    }
-    ul {
-      margin: 0;
-    }
-    li {
-      display: flex;
-      align-items: flex-start;
-      padding: 0.5rem 0;
-      &:first-child {
-        padding-top: 0;
-      }
-      i {
-        font-size: 1.32rem;
-      }
-      > div {
-        font-size: 0.4rem;
-        margin-left: 0.3rem;
-        :deep(span) {
-          font-size: 0.6rem;
-          color: #00c2c4;
-        }
-        :deep(div) {
-          font-size: 0.5rem;
-          margin-top: 0.1rem;
-          white-space: pre-line;
-          line-height: 1.3;
-        }
-      }
+    background-image: url(~@/assets/images/guide/novice_guide_text_en@2x.png);
+    .btn {
+      background-image: url(~@/assets/images/guide/novice_guide_button@2x.png);
     }
+  }
 
+  .fan {
+    background-image: url(~@/assets/images/guide/novice_guide_text@2x.png);
     .btn {
-      background-image: none;
-      color: #00c2c4;
-      line-height: 1.2rem;
-      text-align: center;
-      font-size: 0.52632rem;
-      background-image: url(~@/assets/images/guide/novice_guide_button_empty@2x.png);
+      background-image: url(~@/assets/images/guide/novice_guide_button@2x.png);
     }
   }
+
   .btn {
     position: absolute;
     bottom: -3.15789rem;
@@ -208,7 +184,7 @@ useApp().then((app) => {
     transform: translateX(-50%);
   }
 
-  .guide-tips{
+  .guide-tips {
     font-size: 16px;
     margin-top: 1rem;
     line-height: 1.5;
@@ -252,9 +228,9 @@ useApp().then((app) => {
   }
 }
 
-  @media (orientation: landscape) {
-    .user-guide-mobile {
-        overflow-y: auto;
-    }
+@media (orientation: landscape) {
+  .user-guide-mobile {
+    overflow-y: auto;
   }
+}
 </style>

src/i18n/index.js

@@ -0,0 +1,73 @@
+import { nextTick } from 'vue'
+import { useI18n, createI18n } from 'vue-i18n'
+import browser from '@/utils/browser'
+
+export { useI18n }
+export const SUPPORT_LOCALES = ['zh_CN', 'en', 'zh_HK']
+
+
+export function getLocale() {
+    // 先不更新多语言
+    // let lang = browser.getURLParam('lang')
+    // if (!lang) {
+    //     lang = window.navigator.language || window.navigator.userLanguage || null
+    //     if (lang && /^en/.test(lang)) {
+    //         console.log('自动获取浏览器语言:' + lang)
+    //         lang = 'en'
+    //     }
+    //     else if (lang && /^zh_CN/.test(lang)) {
+    //         lang = 'zh_CN'
+    //     }
+    //     else {
+    //         lang = 'zh_HK'
+    //     }
+    // }
+    // return lang 
+    return 'zh_HK'
+}
+
+export function setupI18n(options = { locale: 'zh_HK' }) {
+    console.log(options.locale);
+    const i18n = createI18n(options)
+    // 先不更新多语言
+    // setI18nLanguage(i18n, options.locale)
+    setI18nLanguage(i18n, 'zh_HK')
+
+    return i18n
+}
+
+export function setI18nLanguage(i18n, locale) {
+    //先不更新多语言
+    locale = 'zh_HK'
+    if (i18n.mode === 'legacy') {
+        i18n.global.locale = locale
+    } else {
+        i18n.global.locale.value = locale
+    }
+    /**
+     * NOTE:
+     * If you need to specify the language setting for headers, such as the `fetch` API, set it here.
+     * The following is an example for axios.
+     *
+     * axios.defaults.headers.common['Accept-Language'] = locale
+     */
+
+    document.querySelector('html').setAttribute('lang', locale)
+}
+
+export async function loadLocaleMessages(i18n, locale) {
+    // load locale messages with dynamic import
+    // set locale and locale message
+
+    const messages = await import(/* webpackChunkName: "locale-[request]" */ `../locales/${locale}.json`)
+    i18n.global.setLocaleMessage(locale, messages.default)
+
+    return nextTick()
+}
+
+export default setupI18n({
+    globalInjection: true,
+    legacy: false,
+    locale: '',
+    fallbackLocale: 'zh_HK',
+})

src/locales/en.json

@@ -0,0 +1,102 @@
+{
+  "common": {
+    "none": "None",
+    "confirm": "Confirm",
+    "cancel": "Cancel",
+    "tips": "Tips",
+    "hide": "Hide",
+    "show": "Show",
+    "review": "Preview",
+    "open": "Open",
+    "close": "Close",
+    "pause": "Pause",
+    "play": "Play",
+    "pauseTour": "Pause",
+    "playTour": "Play",
+    "passwordTips": "Please enter the password",
+    "passwordError": "“Password incorrect” error",
+    "tour": "Navigation",
+    "all": "All",
+    "model": "Dollhouse",
+    "title":"cdf Macau Grand Lisboa Palace Shop",
+    "mode":"Livestream",
+    "shopping":"Cart",
+    "guide":"Guide",
+    "guidelist":"List",
+    "noResult":"No results found",
+    "searchguide":"Search",
+    "help":"Help",
+    "kefu":"Agent",
+    "viewnum":"View",
+    "saysomething":"Comment...",
+    "cantsay":"Muted",
+    "back":"Back",
+    "linking":"Connecting...",
+    "send":"Send",
+    "member":"Participants",
+    "me":"Me",
+    "leader":"Host",
+    "setTaboo":"Mute all participants",
+    "relieveTaboo":"Unmute all participants",
+    "openMic":" You are unmuted by the host",
+    "closeMic":"You are muted by the host",
+    "inRoom":"Enter the breakout room",
+    "leaveRoom":"Exit the breakout room",
+    "removed":"You are removed by the host",
+    "fullStarffed":"The breakout room is full",
+    "notFoundRoom":"The breakout room cannot be found",
+    "openBrush":" The paintbrush is enabled by the host",
+    "closeBrush":"The paintbrush is disabled by the host",
+    "dismissRoom":"The breakout room is dismissed by the host",
+    "jumpTips":"Skip after Xs",
+    "jump":"Skip",
+
+    "goNext":"Click to navigate the next area  .",
+    "view":"View",
+    "calculation":"Current scene calculation still in progress, please try again later",
+    "error":"System Busy! Please try again later",
+    "know":"Got It",
+    "privacy":"Privacy Policies：",
+    "notice":"To preserve the security of user personal information, the developer has complied with all applicable laws, policies, and regulations regulating the collection and use of end-user personal information.",
+    "invitation":"【Friends Recommend】 Let's start a virtual walkthrough together!",
+    "inputnickName": "Please enter a nickname~",
+    "leadernickName": " Please enter an inviter's nickname",
+    "createTour": " Create a livestream",
+    "joinTour": " Join a livestream",
+    "addSuccess": "Successfully added",
+    "viewDetailFail": "Failed to get the product information; Please try again later",
+    "addCart": "Add to cart",
+    "viewDetail": "View details",
+    "onlyOffLine":"Offline shopping only",
+    "guige":"Specification:",
+    "shuliang":"Quantity：",
+    "guideSearch":"Search",
+    "isOver":"Are you sure to end the livestream？",
+    "wenxintips":"Tips"
+
+  },
+  "share": {
+    "wechat": "Wechat",
+    "friends": "Moments",
+    "qq": "QQ",
+    "facebook": "Facebook",
+    "whatsApp": "WhatsApp",
+    "copyLink": "Copy the link",
+    "shareLink": "Share the link",
+    "shareLinkTips": "Share with friends",
+    "vrMode": "VR Mode",
+    "fastCopy": "Fast copy",
+    "copySuccess":"Successfully copied"
+  },
+  "mode": {
+    "panorama": "Panorama",
+    "floorplan": "Floor plan",
+    "dollhouse": "Dollhouse",
+    "dollhouseModel": "3D Model",
+    "vr": "VR",
+    "music": "Music",
+    "fullScene": "Full screen",
+    "exitFullScene": "Exit full screen",
+    "rule": "Measurement Tools"
+  }
+}

src/locales/zh.json

@@ -0,0 +1,86 @@
+{
+  "common": {
+    "none": "無",
+    "confirm": "確定",
+    "cancel": "取消",
+    "tips": "提示",
+    "hide": "隱藏",
+    "show": "顯示",
+    "review": "預覽",
+    "open": "開",
+    "close": "關",
+    "pause": "暫停",
+    "play": "播放",
+    "pauseTour": "暫停導覽",
+    "playTour": "播放導覽",
+    "passwordTips": "請輸入浏覽密碼",
+    "passwordError": "密碼錯誤",
+    "tour": "導覽",
+    "all": "全部",
+    "model": "三維模式",
+    "title": "cdf澳門上葡京店",
+    "mode": "一起逛",
+    "shopping": "購物",
+    "guide": "專櫃導航",
+    "guidelist": "專櫃列表",
+    "noResult": "暫無結果",
+    "searchguide": "搜索專櫃",
+    "help": "幫助",
+    "kefu": "客服",
+    "viewnum": "觀看",
+    "saysomething": "說點什麼",
+    "cantsay": "已被禁言",
+    "back": "返回",
+    "linking": "連接中...",
+    "send": "發送",
+    "member": "成員管理",
+    "me": "我",
+    "leader": "主持人",
+    "setTaboo": "主持人設置了禁言",
+    "relieveTaboo": "主持人已解除禁言",
+    "openMic": "主持人設置了開麥",
+    "closeMic": "主持人設置了靜音",
+    "inRoom": "進入房間",
+    "leaveRoom": "離開房間",
+    "removed": "您已被移除",
+    "fullStarffed": "房間已滿員",
+    "notFoundRoom": "房間未找到",
+    "openBrush": "開啟畫筆",
+    "closeBrush": "關閉畫筆",
+    "dismissRoom": "已解散房間",
+    "jumpTips": "s 後可跳過視頻",
+    "jump": "跳過",
+    "goNext": "點擊前往下一個區域",
+    "view": "查看",
+    "calculation": "该场景正在计算中，请稍后再试",
+    "error": "服务端开小差，请稍后再试",
+    "know": "我知道了",
+    "privacy": "隱私條款：",
+    "notice": "開發者已遵守收集、使用最終用戶個人信息有關的所有可適用法律、政策和法規，保護用戶個人信息安全。",
+    "invitation": "【好友推薦】一起雲逛店吧~"
+  },
+  "share": {
+    "wechat": "微信",
+    "friends": "朋友圈",
+    "qq": "QQ",
+    "facebook": "Facebook",
+    "whatsApp": "WhatsApp",
+    "copyLink": "複製鏈接",
+    "shareLink": "分享鏈接",
+    "shareLinkTips": "分享鏈接給好友",
+    "vrMode": "VR模式",
+    "fastCopy": "一鍵複製",
+    "copySuccess": "場景鏈接複製成功"
+  },
+  "mode": {
+    "panorama": "漫遊",
+    "floorplan": "平面",
+    "dollhouse": "三維",
+    "dollhouseModel": "3D模型",
+    "vr": "VR功能",
+    "music": "音樂",
+    "fullScene": "全屏",
+    "exitFullScene": "退出全屏",
+    "rule": "測量工具"
+  }
+}

src/locales/zh_CN.json

@@ -0,0 +1,102 @@
+{
+  "common": {
+    "none": "无",
+    "confirm": "确定",
+    "cancel": "取消",
+    "tips": "提示",
+    "hide": "隐藏",
+    "show": "显示",
+    "review": "预览",
+    "open": "开",
+    "close": "关",
+    "pause": "暂停",
+    "play": "播放",
+    "pauseTour": "暂停导览",
+    "playTour": "播放导览",
+    "passwordTips": "请输入浏览密码",
+    "passwordError": "密码错误",
+    "tour": "导览",
+    "all": "全部",
+    "model": "三维模式",
+    "title":"cdf澳门上葡京店",
+    "mode":"一起逛",
+    "shopping":"购物",
+    "guide":"专柜导航",
+    "guidelist":"专柜列表",
+    "noResult":"暂无结果",
+    "searchguide":"搜索专柜",
+    "help":"帮助",
+    "kefu":"客服",
+    "viewnum":"观看",
+    "saysomething":"说点什么",
+    "cantsay":"已被禁言",
+    "back":"返回",
+    "linking":"连接中...",
+    "send":"发送",
+    "member":"成员管理",
+    "me":"我",
+    "leader":"主持人",
+    "setTaboo":"主持人设置了禁言",
+    "relieveTaboo":"主持人已解除禁言",
+    "openMic":"主持人设置了开麦",
+    "closeMic":"主持人设置了静音",
+    "inRoom":"进入房间",
+    "leaveRoom":"离开房间",
+    "removed":"您已被移除",
+    "fullStarffed":"房间已满员",
+    "notFoundRoom":"房间未找到",
+    "openBrush":"开启画笔",
+    "closeBrush":"关闭画笔",
+    "dismissRoom":"已解散房间",
+    "jumpTips":"s 后可跳过视频",
+    "jump":"跳过",
+
+    "goNext":"点击前往下一个区域",
+    "view":"查看",
+    "calculation":"该场景正在计算中，请稍后再试",
+    "error":"服务端开小差，请稍后再试",
+    "know":"我知道了",
+    "privacy":"隐私条款：",
+    "notice":"开发者已遵守收集、使用最终用户个人信息有关的所有可适用法律、政策和法规，保护用户个人信息安全。",
+    "invitation":"【好友推荐】一起云逛店吧~",
+    "inputnickName": "请输入您的昵称~",
+    "leadernickName": " 请输入发起人昵称",
+    "createTour": " 创建一起逛",
+    "joinTour": " 进入一起逛",
+    "addSuccess": "添加成功",
+    "viewDetailFail": "获取商品详情失败，请稍后再试",
+    "addCart": "加入购物车",
+    "viewDetail": "查看详情",
+    "onlyOffLine":"仅供线下门店购买",
+    "guige":"规格：",
+    "shuliang":"数量：",
+    "guideSearch":"专柜搜索",
+    "isOver":"是否结束带看？",
+    "wenxintips":"温馨提示"
+
+  },
+  "share": {
+    "wechat": "微信",
+    "friends": "朋友圈",
+    "qq": "QQ",
+    "facebook": "Facebook",
+    "whatsApp": "WhatsApp",
+    "copyLink": "複制分享",
+    "shareLink": "分享链接",
+    "shareLinkTips": "邀请好友",
+    "vrMode": "VR模式",
+    "fastCopy": "一键複制",
+    "copySuccess":"场景链接複制成功"
+  },
+  "mode": {
+    "panorama": "漫游",
+    "floorplan": "平面",
+    "dollhouse": "三维",
+    "dollhouseModel": "3D模型",
+    "vr": "VR功能",
+    "music": "音乐",
+    "fullScene": "全屏",
+    "exitFullScene": "退出全屏",
+    "rule": "测量工具"
+  }
+}

src/locales/zh_HK.json

@@ -0,0 +1,102 @@
+{
+  "common": {
+    "none": "無",
+    "confirm": "確定",
+    "cancel": "取消",
+    "tips": "提示",
+    "hide": "隱藏",
+    "show": "顯示",
+    "review": "預覽",
+    "open": "開",
+    "close": "關",
+    "pause": "暫停",
+    "play": "播放",
+    "pauseTour": "暫停導覽",
+    "playTour": "播放導覽",
+    "passwordTips": "請輸入浏覽密碼",
+    "passwordError": "密碼錯誤",
+    "tour": "導覽",
+    "all": "全部",
+    "model": "三維模式",
+    "title":"cdf澳門上葡京店",
+    "mode":"一起逛",
+    "shopping":"購物",
+    "guide":"專櫃導航",
+    "guidelist":"專櫃列表",
+    "noResult":"暫無結果",
+    "searchguide":"搜索專櫃",
+    "help":"幫助",
+    "kefu":"客服",
+    "viewnum":"觀看",
+    "saysomething":"說點什麼",
+    "cantsay":"已被禁言",
+    "back":"返回",
+    "linking":"連接中...",
+    "send":"發送",
+    "member":"成員管理",
+    "me":"我",
+    "leader":"主持人",
+    "setTaboo":"主持人設置了禁言",
+    "relieveTaboo":"主持人已解除禁言",
+    "openMic":"主持人設置了開麥",
+    "closeMic":"主持人設置了靜音",
+    "inRoom":"進入房間",
+    "leaveRoom":"離開房間",
+    "removed":"您已被移除",
+    "fullStarffed":"房間已滿員",
+    "notFoundRoom":"房間未找到",
+    "openBrush":"開啟畫筆",
+    "closeBrush":"關閉畫筆",
+    "dismissRoom":"已解散房間",
+    "jumpTips":"s 後可跳過視頻",
+    "jump":"跳過",
+
+    "goNext":"點擊前往下一個區域",
+    "view":"查看",
+    "calculation":"该场景正在计算中，请稍后再试",
+    "error":"服务端开小差，请稍后再试",
+    "know":"我知道了",
+    "privacy":"隱私條款：",
+    "notice":"開發者已遵守收集、使用最終用戶個人信息有關的所有可適用法律、政策和法規，保護用戶個人信息安全。",
+    "invitation":"【好友推薦】一起雲逛店吧~",
+    "inputnickName": "請輸入您的昵稱~",
+    "leadernickName": " 請輸入發起人昵稱",
+    "createTour": " 創建一起逛",
+    "joinTour": " 進入一起逛",
+    "addSuccess": "添加成功",
+    "viewDetailFail": "獲取商品詳情失敗，請稍後再試",
+    "addCart": "加入購物車",
+    "viewDetail": "查看詳情",
+    "onlyOffLine":"僅供線下門店購買",
+    "guige":"規格：",
+    "shuliang":"數量：",
+    "guideSearch":"專櫃搜索",
+    "isOver":"是否結束帶看？",
+    "wenxintips":"溫馨提示"
+
+  },
+  "share": {
+    "wechat": "微信",
+    "friends": "朋友圈",
+    "qq": "QQ",
+    "facebook": "Facebook",
+    "whatsApp": "WhatsApp",
+    "copyLink": "複製分享",
+    "shareLink": "分享鏈接",
+    "shareLinkTips": "邀請好友",
+    "vrMode": "VR模式",
+    "fastCopy": "一鍵複製",
+    "copySuccess":"場景鏈接複製成功"
+  },
+  "mode": {
+    "panorama": "漫遊",
+    "floorplan": "平面",
+    "dollhouse": "三維",
+    "dollhouseModel": "3D模型",
+    "vr": "VR功能",
+    "music": "音樂",
+    "fullScene": "全屏",
+    "exitFullScene": "退出全屏",
+    "rule": "測量工具"
+  }
+}

src/pages/scene.js

@@ -5,6 +5,7 @@ import { createApp } from "vue";
 import store from "@/store";
 import App from "./scene.vue";
 import browser from "@/utils/browser";
+import i18n, { getLocale, setI18nLanguage, loadLocaleMessages } from './i18n'
 
 if (!window.location.search) {
   window.location.href = "/index.html?m=eur-KJ-z5ZEV22AeU&pose=pano:408,qua:-0.006,0.6299,0.0049,0.7766";
@@ -12,10 +13,18 @@ if (!window.location.search) {
   let url = window.location.href + `&pose=pano:408,qua:-0.006,0.6299,0.0049,0.7766`;
   window.location.href = url;
 } else {
-  const app = createApp(App);
 
-  app.use(store);
-  app.use(Components);
-  app.directive("click-outside", ClickOutSide);
-  app.mount("#app");
+
+  const local = getLocale()
+  loadLocaleMessages(i18n, local).then(() => {
+    setI18nLanguage(i18n, local)
+    const app = createApp(App);
+    app.use(i18n);
+    app.use(store);
+    app.use(Components);
+    app.directive("click-outside", ClickOutSide);
+    app.mount("#app");
+  })
+
+
 }

src/pages/scene.vue

@@ -8,32 +8,28 @@
     <template v-if="dataLoaded">
       <Information v-if="!isshoppingguide" />
       <Control />
+
       <teleport v-if="refMiniMap && player.showWidgets" :to="refMiniMap">
-        <span :class="{ gudieDisabled: isshoppingguide && role.value != 'leader' }" class="button-switch" @click.stop="toggleMap">
+        <span :class="{ gudieDisabled: isshoppingguide && role != 'leader' }" class="button-switch" @click.stop="toggleMap">
           <ui-icon type="show_map_collect"></ui-icon>
         </span>
-
-        <p class="change" :class="{ gudieDisabled: isshoppingguide && role.value != 'leader' }" @click="changeMode('dollhouse', $event, 'focus3d')">
+        <div v-if="controls.showDollhouse" :class="{ gudieDisabled: isshoppingguide && role != 'leader' }" class="change" @click="changeMode('dollhouse')">
           <ui-icon type="show_3d_normal"></ui-icon>
-          3D模型
-        </p>
+          <span> {{ $t('mode.dollhouseModel') }}</span>
+        </div>
       </teleport>
+
       <template v-if="refMiniMap && player.showWidgets">
-        <div
-          :class="{ disabled: flying, gudieDisabled: isshoppingguide && role.value != 'leader' }"
-          v-show="mode != 'panorama'"
-          v-if="controls.showFloorplan && controls.showDollhouse"
-          class="tab-layer"
-        >
+        <div :class="{ disabled: flying, gudieDisabled: isshoppingguide && role != 'leader' }" v-show="mode != 'panorama'" v-if="controls.showFloorplan && controls.showDollhouse" class="tab-layer">
           <div class="tabs" v-if="controls.showMap">
-            <span :class="{ active: mode === 'floorplan' }" @click="changeMode('floorplan', $event)">
+            <span :class="{ active: mode === 'floorplan' }" ref="floorplan_ref" @click="changeMode('floorplan', $event)">
               <ui-icon :type="mode == 'floorplan' ? 'show_plane_selected' : 'show_plane_normal'"></ui-icon>
-              二維
+              {{ $t('mode.floorplan') }}
             </span>
-            <span :class="{ active: mode === 'dollhouse' }" @click="changeMode('dollhouse', $event)">
+            <span :class="{ active: mode === 'dollhouse' }" ref="dollhouse_ref" @click="changeMode('dollhouse', $event)">
               <ui-icon :type="mode == 'dollhouse' ? 'show_3d_selected' : 'show_3d_normal'"></ui-icon>
 
-              三維
+              {{ $t('mode.dollhouse') }}
             </span>
             <div class="background" ref="background"></div>
           </div>
@@ -49,40 +45,45 @@
 </template>
 
 <script setup>
-import { useMusicPlayer } from "@/utils/sound";
+import { useMusicPlayer } from '@/utils/sound';
 // import UiTags from "@/components/Tags";
-import GoodsList from "@/components/Tags/goods-list.vue";
-import Treasure from "@/components/Tags/treasure.vue";
-import Waterfall from "@/components/Tags/waterfall.vue";
-
-import Information from "@/components/Information";
-import Control from "@/components/Controls/Control.Mobile.vue";
-import LoadingLogo from "@/components/shared/Loading.vue";
-import OpenVideo from "@/components/openVideo/";
-import Guide from "@/components/shared/Guide.vue";
-import { Dialog } from "@/global_components/";
-
-import { createApp } from "@/app";
-import { ref, onMounted, computed, nextTick, watch } from "vue";
-import { useStore } from "vuex";
-import browser from "@/utils/browser";
-import { useApp, getApp } from "@/app";
-import common from "@/utils/common";
-import { Cache } from "@/utils/index";
-
-import * as apis from "@/apis/index.js";
+import GoodsList from '@/components/Tags/goods-list.vue';
+import Treasure from '@/components/Tags/treasure.vue';
+import Waterfall from '@/components/Tags/waterfall.vue';
+
+import Information from '@/components/Information';
+import Control from '@/components/Controls/Control.Mobile.vue';
+import LoadingLogo from '@/components/shared/Loading.vue';
+import OpenVideo from '@/components/openVideo/';
+import Guide from '@/components/shared/Guide.vue';
+import { Dialog } from '@/global_components/';
+
+import { createApp } from '@/app';
+import { ref, onMounted, computed, nextTick, watch } from 'vue';
+import { useStore } from 'vuex';
+import browser from '@/utils/browser';
+import { useApp, getApp } from '@/app';
+import common from '@/utils/common';
+import { useI18n, getLocale } from '@/i18n';
+import { Cache } from '@/utils/index';
+import wxShare from '@/utils/wxshare';
+
+import * as apis from '@/apis/index.js';
+
+const { t } = useI18n({ useScope: 'global' });
+
 const store = useStore();
 
 let jumpNewScene = (sceneFirstView) => {
   let url = window.location.href;
 
-  if (!browser.hasURLParam("pose")) {
+  if (!browser.hasURLParam('pose')) {
     url += `&${sceneFirstView.sceneview}`;
   } else {
-    url = browser.replaceQueryString(url, "pose", sceneFirstView.sceneview.replace("pose=", ""));
+    url = browser.replaceQueryString(url, 'pose', sceneFirstView.sceneview.replace('pose=', ''));
   }
 
-  url = browser.replaceQueryString(url, "m", sceneFirstView.num);
+  url = browser.replaceQueryString(url, 'm', sceneFirstView.num);
   return url;
 };
 
@@ -93,7 +94,7 @@ let visibilitychangeFn = () => {
 };
 
 let hashchangefn = () => {
-  if (window.location.hash.indexOf("#showpage") >= 0) {
+  if (window.location.hash.indexOf('#showpage') >= 0) {
     window.history.go(-1);
   }
 };
@@ -102,53 +103,54 @@ const musicPlayer = useMusicPlayer();
 
 let app = null;
 
-let tagid = browser.getURLParam("tagid");
-const role = ref(browser.getURLParam("role"));
+let tagid = browser.getURLParam('tagid');
+
+const role = computed(() => store.getters['rtc/role']);
 
 const closetagtype = () => {
-  store.commit("tag/setTagClickType", {
-    type: "",
+  store.commit('tag/setTagClickType', {
+    type: '',
     data: {},
   });
 
   if (isshoppingguide.value) {
-    if (role.value == "leader") {
+    if (role.value == 'leader') {
       socket.value &&
-        socket.value.emit("action", {
-          type: "tagclose",
+        socket.value.emit('action', {
+          type: 'tagclose',
         });
     }
   }
 };
-const socket = computed(() => store.getters["rtc/socket"]);
+const socket = computed(() => store.getters['rtc/socket']);
 
 const tags = computed(() => {
-  return store.getters["tag/tags"] || [];
+  return store.getters['tag/tags'] || [];
 });
 
-const isshoppingguide = computed(() => store.getters["shoppingguide"]);
+const isshoppingguide = computed(() => store.getters['shoppingguide']);
 
-const player = computed(() => store.getters["player"]);
-const flying = computed(() => store.getters["flying"]);
-const metadata = computed(() => store.getters["scene/metadata"]);
+const player = computed(() => store.getters['player']);
+const flying = computed(() => store.getters['flying']);
+const metadata = computed(() => store.getters['scene/metadata']);
 const controls = computed(() => {
   return metadata.value.controls;
 });
-const mode = computed(() => store.getters["mode"]);
-const showNavigations = computed(() => store.getters["showNavigations"]);
+const mode = computed(() => store.getters['mode']);
+const showNavigations = computed(() => store.getters['showNavigations']);
 const scene$ = ref(null);
 const hadVideo = ref(true);
 
-if (!Cache.get("HIDENVIDEOEXPIRES")) {
-  if (browser.getURLParam("m") == "eur-KJ-z5ZEV22AeU" && browser.getURLParam("pose") == "pano:408,qua:-0.006,0.6299,0.0049,0.7766") {
-    Cache.set("HIDENVIDEOEXPIRES", "yes", 60 * 8 * 60);
+if (!Cache.get('HIDENVIDEOEXPIRES')) {
+  if (browser.getURLParam('m') == 'eur-KJ-z5ZEV22AeU' && browser.getURLParam('pose') == 'pano:408,qua:-0.006,0.6299,0.0049,0.7766') {
+    Cache.set('HIDENVIDEOEXPIRES', 'yes', 60 * 8 * 60);
     hadVideo.value = false;
   } else {
     hadVideo.value = true;
   }
 }
 
-if (role.value) {
+if (browser.getURLParam('role')) {
   hadVideo.value = true;
 }
 
@@ -158,11 +160,11 @@ const refMiniMap = ref(null);
 const isCollapse = ref(false);
 const background = ref(null);
 const resize = () => {
-  if (this.$refs.background && (this.mode == "floorplan" || this.mode == "dollhouse")) {
+  if (this.$refs.background && (this.mode == 'floorplan' || this.mode == 'dollhouse')) {
     this.$nextTick(() => {
-      let $active = $(this.$el).find(".tabs .active");
-      background.value.style.width = $active[0].getBoundingClientRect().width + "px";
-      background.value.style.left = $active.position().left + "px";
+      let $active = $(this.$el).find('.tabs .active');
+      background.value.style.width = $active[0].getBoundingClientRect().width + 'px';
+      background.value.style.left = $active.position().left + 'px';
     });
   }
 };
@@ -170,17 +172,23 @@ const resize = () => {
 watch(
   () => isshoppingguide.value,
   (val, old) => {
-    let $minmap = document.querySelector("[xui_min_map]");
+    let $minmap = document.querySelector('[xui_min_map]');
+
     if ($minmap) {
       setTimeout(async () => {
-        if (role.value == "leader") {
-          return;
-        }
-        await nextTick();
-        if (isshoppingguide.value) {
-          $minmap.classList.add("gudieDisabled");
-        } else {
-          $minmap.classList.remove("gudieDisabled");
+        if (browser.getURLParam('role') == 'customer') {
+          await nextTick();
+          if (isshoppingguide.value) {
+            $minmap.classList.add('gudieDisabled');
+          } else {
+            $minmap.classList.remove('gudieDisabled');
+            // wxShare({
+            //   title: `cdf澳門上葡京店~`,
+            //   desc: "cdf澳門上葡京店~",
+            //   link: window.location.href.split("#")[0],
+            //   imgUrl: "https://glp-vr.cdfmembers.com/cdf/file/91dd5305525f463286f03a31abd1c154.jpg",
+            // });
+          }
         }
       });
     }
@@ -194,12 +202,12 @@ watch(
   () => player.value.showMap,
   (val, old) => {
     if (!isCollapse.value) {
-      let $minmap = document.querySelector("[xui_min_map]");
+      let $minmap = document.querySelector('[xui_min_map]');
       if ($minmap) {
         if (val) {
-          $minmap.classList.remove("collapse");
+          $minmap.classList.remove('collapse');
         } else {
-          $minmap.classList.add("collapse");
+          $minmap.classList.add('collapse');
         }
       }
     }
@@ -211,12 +219,12 @@ watch(
 watch(
   () => player.value.showWidgets,
   (val, old) => {
-    let $minmap = document.querySelector("[xui_min_map]");
+    let $minmap = document.querySelector('[xui_min_map]');
     if ($minmap) {
       if (val) {
-        $minmap.classList.remove("collapse");
+        $minmap.classList.remove('collapse');
       } else {
-        $minmap.classList.add("collapse");
+        $minmap.classList.add('collapse');
       }
     }
   },
@@ -224,31 +232,49 @@ watch(
     deep: true,
   }
 );
-const changeMode = (name, e, focus3d = false) => {
-  if (!flying.value) {
-    let width, left;
-    store.commit("setMode", name);
-    nextTick(() => {
-      if (focus3d) {
-        let $active = document.querySelector(".tabs>span:last-of-type");
-        background.value.style.width = $active.getBoundingClientRect().width + "px";
-        background.value.style.left = $active.offsetLeft + "px";
-      } else {
-        background.value.style.width = width || e.srcElement.getBoundingClientRect().width + "px";
-        background.value.style.left = left || e.srcElement.offsetLeft + "px";
+
+watch(
+  () => mode.value,
+  (val, old) => {
+    console.log(val);
+    let timer = setTimeout(() => {
+      clearTimeout(timer);
+      if (val == 'floorplan') {
+        if (floorplan_ref.value && floorplan_ref.value) {
+          background.value.style.width = floorplan_ref.value.getBoundingClientRect().width + 'px';
+          background.value.style.left = floorplan_ref.value.offsetLeft + 'px';
+        }
+      } else if (val == 'dollhouse') {
+        if (dollhouse_ref.value && dollhouse_ref.value) {
+          background.value.style.width = dollhouse_ref.value.getBoundingClientRect().width + 'px';
+          background.value.style.left = dollhouse_ref.value.offsetLeft + 'px';
+        }
       }
-    });
+    }, 0);
+  },
+  {
+    deep: true,
+  }
+);
+const floorplan_ref = ref(null);
+const dollhouse_ref = ref(null);
+const changeMode = (name, e) => {
+  if (e) {
+    if (!flying.value) {
+      store.commit('setMode', name);
+    }
+  } else {
+    store.commit('setMode', name);
   }
-  // console.dir(document.querySelector(".tabs>span:last-of-type"));
 };
 const toggleMap = () => {
   isCollapse.value = !isCollapse.value;
-  let $minmap = document.querySelector("[xui_min_map]");
+  let $minmap = document.querySelector('[xui_min_map]');
   if ($minmap) {
     if (!isCollapse.value) {
-      $minmap.classList.remove("collapse");
+      $minmap.classList.remove('collapse');
     } else {
-      $minmap.classList.add("collapse");
+      $minmap.classList.add('collapse');
     }
   }
 };
@@ -256,13 +282,14 @@ const toggleMap = () => {
 const onClickTagInfo = (el) => {
   el.stopPropagation();
   let item = tags.value.find((item) => item.sid == el.target.dataset.id);
-  if (item.type == "commodity") {
-    store.commit("tag/setTagClickType", {
-      type: "goodlist",
+  if (item.type == 'commodity') {
+    guideclicktag(item);
+    store.commit('tag/setTagClickType', {
+      type: 'goodlist',
       data: item,
     });
+  } else if (item.type == 'link_scene') {
     guideclicktag(item);
-  } else if (item.type == "link_scene") {
     let sceneFirstView = item.hotContent.sceneFirstView;
     window.location.href = jumpNewScene(sceneFirstView);
   }
@@ -270,70 +297,70 @@ const onClickTagInfo = (el) => {
 
 const guideclicktag = (tag) => {
   if (isshoppingguide.value) {
-    if (role.value == "leader") {
+    if (role.value == 'leader') {
       socket.value &&
-        socket.value.emit("action", {
-          type: "tagclick",
+        socket.value.emit('action', {
+          type: 'tagclick',
           data: {
             sid: tag.sid,
           },
         });
     }
   }
+  return;
 };
 
 onMounted(async () => {
   apis.burying_point({ type: 0 });
 
   app = createApp({
-    num: browser.getURLParam("m"),
+    num: browser.getURLParam('m'),
     dom: scene$.value,
     mobile: true,
     isLoadTags: false,
-    sceneKind: "tiles",
+    sceneKind: 'tiles',
+    lang: getLocale(),
     scene: {
       markerOpacity: 1,
-      markerURL: "https://eurs3.4dkankan.com/cdf/file/43aa29799bfd472298a47cc6370b10cc.png",
-      pathEndColor: "#FF4641",
+      markerURL: 'https://eurs3.4dkankan.com/cdf/file/43aa29799bfd472298a47cc6370b10cc.png',
+      pathEndColor: '#FF4641',
     },
   });
-  app.use("MinMap", { theme: { camera_fillStyle: "#ED5D18" } });
-  app.use("Tag");
+  app.use('MinMap', { theme: { camera_fillStyle: '#ED5D18' } });
+  app.use('Tag');
   app
-    .use("TagView", {
+    .use('TagView', {
       render(data) {
-        if (data.type == "waterfall") {
+        if (data.type == 'waterfall') {
           return `<span class="tag-icon waterfall animate" style="background-image:url({{icon}})"></span>`;
-        } else if (data.type == "coupon") {
+        } else if (data.type == 'coupon') {
           return `<span class="tag-icon coupon animate" style="background-image:url({{icon}})"></span>`;
-        } else if (data.type == "applet_link") {
+        } else if (data.type == 'applet_link') {
           try {
             data.hotContent = JSON.parse(data.hotContent);
           } catch (error) {}
-          return `<span class="tag-icon applet_link animate" style="background-image:url(${
-            data.hotContent.liveIcon.src ? common.changeUrl(data.hotContent.liveIcon.src) : "{{icon}}"
-          })"></span>`;
-        } else if (data.type == "link_scene") {
+          return `<span class="tag-icon applet_link animate" style="background-image:url(${data.hotContent.liveIcon.src ? common.changeUrl(data.hotContent.liveIcon.src) : '{{icon}}'})"></span>`;
+        } else if (data.type == 'link_scene') {
           return `<span class="tag-icon animate" style="background-image:url({{icon}})"></span>
                       <div class="tag-body">
                         <div data-id="${data.sid}" class="tag-commodity tag-link_scene">
-                          <p class="tag-title">點擊前往下一個區域</p>
+                          <p class="tag-title">${t('common.goNext')}</p>
                         </div>
                       </div>
                   `;
-        } else if (data.type == "commodity") {
+        } else if (data.type == 'commodity') {
           let arr = data.products.map((item) => item.price);
           let priceMin = isFinite(Math.min.apply(null, arr)) ? Math.min.apply(null, arr) : 0;
           let priceMax = isFinite(Math.max.apply(null, arr)) ? Math.max.apply(null, arr) : 0;
           let price = priceMin == priceMax ? priceMax : `${priceMin}-${priceMax}`;
-          let range = `${data.products[0] ? data.products[0].symbol : "MOP$"} ${price}`;
+          let range = `${data.products[0] ? data.products[0].symbol : 'MOP$'} ${price}`;
           return `<span class="tag-icon animate" style="background-image:url({{icon}})"></span>
                       <div class="tag-body">
                         <div data-id="${data.sid}" class="tag-commodity">
-                          <div  style="background-image:url(${data.products[0] ? data.products[0].pic : ""})" class='tag-avatar'>
+                          <div  style="background-image:url(${data.products[0] ? data.products[0].pic : ''})" class='tag-avatar'>
                           </div>
                           <p class="tag-title">${data.title}</p>
-                          <p class="tag-info">${range} | 查看 ></p>
+                          <p class="tag-info">${range} | ${t('common.view')} ></p>
                         </div>
                       </div>
                   `;
@@ -343,55 +370,62 @@ onMounted(async () => {
       },
     })
     .then((view) => {
-      view.on("click", (e) => {
+      view.on('click', (e) => {
         var tag = e.data;
         // 聚焦當前點擊的熱點
         view.focus(tag.sid).then(() => {
-          if (tag.type == "coupon") {
+          if (tag.type == 'coupon') {
             try {
-              document.querySelector(`[data-tag-id="${tag.sid}"] .tag-icon`).style.display = "none";
-              let hotcontent = typeof tag.hotContent == "string" ? JSON.parse(tag.hotContent) : tag.hotContent;
+              if (isshoppingguide.value) {
+                return;
+              }
+              document.querySelector(`[data-tag-id="${tag.sid}"] .tag-icon`).style.display = 'none';
+              let hotcontent = typeof tag.hotContent == 'string' ? JSON.parse(tag.hotContent) : tag.hotContent;
               browser.openLink(
-                "/subPackage/pages/activity/activity?pageId=" + hotcontent.couponLink,
+                '/subPackage/pages/activity/activity?pageId=' + hotcontent.couponLink,
                 `https://m.cdfmembers.com/shop/600667208/showactivity?pageId=${hotcontent.couponLink}`,
                 `/pages/showactivity/showactivity?pageId=${hotcontent.couponLink}`
               );
               apis.burying_point({ type: 2 });
             } catch (error) {}
-          } else if (tag.type == "waterfall") {
-            store.commit("tag/setTagClickType", {
-              type: "waterfall",
+          } else if (tag.type == 'waterfall') {
+            store.commit('tag/setTagClickType', {
+              type: 'waterfall',
               data: tag,
             });
             guideclicktag(tag);
-          } else if (tag.type == "applet_link") {
+          } else if (tag.type == 'applet_link') {
             try {
-              let hotcontent = typeof tag.hotContent == "string" ? JSON.parse(tag.hotContent) : tag.hotContent;
+              if (isshoppingguide.value) {
+                return;
+              }
+              let hotcontent = typeof tag.hotContent == 'string' ? JSON.parse(tag.hotContent) : tag.hotContent;
               browser.openLink(
-                "/subPackage/pages/home/home?pageType=2&pageId=" + hotcontent.liveLink,
+                '/subPackage/pages/home/home?pageType=2&pageId=' + hotcontent.liveLink,
                 `https://m.cdfmembers.com/shop/600667208/showactivity?pageId=${hotcontent.liveLink}`,
                 `/pages/showactivity/showactivity?pageId=${hotcontent.liveLink}`
               );
             } catch (error) {}
-          } else if (tag.type == "link_scene") {
+          } else if (tag.type == 'link_scene') {
+            guideclicktag(tag);
             let sceneFirstView = tag.hotContent.sceneFirstView;
             window.location.href = jumpNewScene(sceneFirstView);
           }
         });
       });
 
-      view.on("focus", (e) => {
-        document.querySelectorAll("[xui_tags_view] >div").forEach((el) => {
-          if (el.getAttribute("data-tag-type") == "link_scene" || el.getAttribute("data-tag-type") == "commodity") {
-            el.querySelector(".tag-body").classList.remove("show");
-            el.style.zIndex = "auto";
+      view.on('focus', (e) => {
+        document.querySelectorAll('[xui_tags_view] >div').forEach((el) => {
+          if (el.getAttribute('data-tag-type') == 'link_scene' || el.getAttribute('data-tag-type') == 'commodity') {
+            el.querySelector('.tag-body').classList.remove('show');
+            el.style.zIndex = 'auto';
           }
         });
-        if (e.data.type == "commodity" || e.data.type == "link_scene") {
-          e.target.style.zIndex = "999";
-          e.target.querySelector(".tag-body").classList.add("show");
-          e.target.querySelector(".tag-commodity").removeEventListener("click", onClickTagInfo);
-          e.target.querySelector(".tag-commodity").addEventListener("click", onClickTagInfo);
+        if (e.data.type == 'commodity' || e.data.type == 'link_scene') {
+          e.target.style.zIndex = '999';
+          e.target.querySelector('.tag-body').classList.add('show');
+          e.target.querySelector('.tag-commodity').removeEventListener('click', onClickTagInfo);
+          e.target.querySelector('.tag-commodity').addEventListener('click', onClickTagInfo);
 
           if (tagid) {
             document.querySelector(`[data-id="${tagid}"]`) && document.querySelector(`[data-id="${tagid}"]`).click();
@@ -400,141 +434,154 @@ onMounted(async () => {
         }
       });
 
-      view.on("rendered", (e) => {
+      view.on('rendered', (e) => {
         tagid && view.focus(tagid);
       }); //dom渲染完成
     });
 
-  app.use("TourPlayer");
+  app.use('TourPlayer');
+
+  app.TourManager.on('loaded', (list) => {
+    store.commit('tour/loaded', list);
+    // app.TourManager.load(tours.value);
+  });
   // if (!hadVideo.value) {
   //   app.Scene.lock();
   // }
-  app.Scene.on("ready", () => {
+  app.Scene.on('ready', () => {
     show.value = true;
-    if (!localStorage.getItem("user_guide")) {
-      Dialog.confirm({
-        showCloseIcon: false,
-        okText: "我知道了",
-        content:
-          "<span style='font-size: 16px; line-height: 1.5;'>開發者已遵守收集、使用最終用戶個人信息有關的所有可適用法律、政策和法規，保護用戶個人信息安全。<span/>",
-        title: "隱私條款：",
-        single:true,
-        func: (state) => {
-          if (state == "ok") {
-            localStorage.setItem("user_guide", Date.now());
-          }
-        },
-      });
-    }
+    store.commit('SetPlayerOptions', {
+      lang: getLocale(),
+    });
+    wxShare({
+      title: `${t('common.title')}~`,
+      desc: `${t('common.title')}~`,
+      link: window.location.href,
+      imgUrl: 'https://glp-vr.cdfmembers.com/cdf/file/91dd5305525f463286f03a31abd1c154.jpg',
+    });
   });
-  app.Scene.on("error", (data) => {
+  app.Scene.on('error', (data) => {
     switch (data.code) {
       case 5033:
-        Dialog.alert("该场景正在计算中，请稍后再试");
+        Dialog.alert(t('common.calculation'));
         break;
       case 5034:
-        Dialog.alert("服务端开小差，请稍后再试");
+        Dialog.alert(t('common.title'));
         break;
       case 5009:
-        Dialog.alert("服务端开小差，请稍后再试");
+        Dialog.alert(t('common.title'));
         break;
       case 5005:
-        Dialog.alert("服务端开小差，请稍后再试");
+        Dialog.alert(t('common.title'));
         break;
     }
   });
-  app.Scene.on("loaded", (pano) => {
-    refMiniMap.value = "[xui_min_map]";
-    store.commit("setFloorId", pano.floorIndex);
-    store.commit("rtc/setShowdaogou", true);
-
+  app.Scene.on('loaded', (pano) => {
+    refMiniMap.value = '[xui_min_map]';
+    store.commit('setFloorId', pano.floorIndex);
+    store.commit('rtc/setShowdaogou', true);
 
-    if (browser.getURLParam("roomId")) {
-      store.commit("showShoppingguide", true);
+    if (browser.getURLParam('roomId')) {
+      store.commit('showShoppingguide', true);
+    } else {
+      if (!localStorage.getItem('user_guide')) {
+        Dialog.confirm({
+          showCloseIcon: false,
+          okText: t('common.know'),
+          content: "<span style='font-size: 16px; line-height: 1.5;'>" + t('common.notice') + '<span/>',
+          title: `${t('common.tips')}：`,
+          single: true,
+          func: (state) => {
+            if (state == 'ok') {
+              localStorage.setItem('user_guide', Date.now());
+            }
+          },
+        });
+      }
     }
 
-    app.resource.tags(`${process.env.VUE_APP_RESOURCE_URL}cdf/hot/${browser.getURLParam("m")}/hot.json?rnd=${Math.random()}`);
+    app.resource.tags(`${process.env.VUE_APP_RESOURCE_URL}cdf/hot/${browser.getURLParam('m')}/hot.json?rnd=${Math.random()}`);
     useMusicPlayer();
   });
-  app.Scene.on("panorama.videorenderer.resumerender", () => {
+  app.Scene.on('panorama.videorenderer.resumerender', () => {
     musicPlayer.pause(true);
   });
 
-  app.Scene.on("panorama.videorenderer.suspendrender", async () => {
+  app.Scene.on('panorama.videorenderer.suspendrender', async () => {
     let player = await getApp().TourManager.player;
     if (!player.isPlaying) {
       musicPlayer.resume();
     }
   });
-  app.store.on("metadata", (metadata) => {
-    store.commit("scene/load", metadata);
+  app.store.on('metadata', (metadata) => {
+    store.commit('scene/load', metadata);
     if (!metadata.controls.showMap) {
       app.MinMap.hide(true);
     }
     dataLoaded.value = true;
   });
-  app.store.on("tags", (tags) => {
-    store.commit("tag/load", tags);
+  app.store.on('tags', (tags) => {
+    store.commit('tag/load', tags);
   });
-  app.Camera.on("mode.beforeChange", ({ fromMode, toMode, floorIndex }) => {
+  app.Camera.on('mode.beforeChange', ({ fromMode, toMode, floorIndex }) => {
     if (fromMode) {
-      store.commit("setFlying", true);
+      store.commit('setFlying', true);
     }
   });
-  app.Camera.on("mode.afterChange", ({ toMode, floorIndex }) => {
-    store.commit("setFlying", false);
+  app.Camera.on('mode.afterChange', ({ toMode, floorIndex }) => {
+    store.commit('setFlying', false);
   });
-  app.Camera.on("flying.started", (pano) => {
-    store.commit("setFlying", true);
+  app.Camera.on('flying.started', (pano) => {
+    store.commit('setFlying', true);
   });
-  app.Camera.on("flying.ended", ({ targetPano }) => {
-    store.commit("setFlying", false);
-    store.commit("setPanoId", targetPano.id);
+  app.Camera.on('flying.ended', ({ targetPano }) => {
+    store.commit('setFlying', false);
+    store.commit('setPanoId', targetPano.id);
     if (app.Scene.isCurrentPanoHasVideo) {
       apis.burying_point({ type: 5 });
     }
   });
 
-  app.Camera.on("pano.chosen", (pano) => {
+  app.Camera.on('pano.chosen', (pano) => {
     apis.burying_point({ type: 4 });
   });
-  app.store.on("tour", async (tour) => {
-    app.TourManager.load(tour);
-    store.commit("tour/setData", {
-      tours: JSON.parse(
-        JSON.stringify(app.TourManager.tours, (key, val) => {
-          if (key === "audio") {
-            return null;
-          } else {
-            return val;
-          }
-        })
-      ),
-    });
-    store.commit("tour/setBackUp", {
-      tours: JSON.parse(
-        JSON.stringify(app.TourManager.tours, (key, val) => {
-          if (key === "audio") {
-            return null;
-          } else {
-            return val;
-          }
-        })
-      ),
-    });
-  });
-  app.store.on("floorcad", (floor) => store.commit("scene/loadFloorData", floor));
+  // app.store.on('tour', async (tour) => {
+  //   app.TourManager.load(tour);
+  //   store.commit('tour/setData', {
+  //     tours: JSON.parse(
+  //       JSON.stringify(app.TourManager.tours, (key, val) => {
+  //         if (key === 'audio') {
+  //           return null;
+  //         } else {
+  //           return val;
+  //         }
+  //       })
+  //     ),
+  //   });
+  //   store.commit('tour/setBackUp', {
+  //     tours: JSON.parse(
+  //       JSON.stringify(app.TourManager.tours, (key, val) => {
+  //         if (key === 'audio') {
+  //           return null;
+  //         } else {
+  //           return val;
+  //         }
+  //       })
+  //     ),
+  //   });
+  // });
+  app.store.on('floorcad', (floor) => store.commit('scene/loadFloorData', floor));
 
   app.render();
-  document.removeEventListener("visibilitychange", visibilitychangeFn);
-  document.addEventListener("visibilitychange", visibilitychangeFn);
+  document.removeEventListener('visibilitychange', visibilitychangeFn);
+  document.addEventListener('visibilitychange', visibilitychangeFn);
 
   if (browser.detectWeixin()) {
     //ios的ua中无miniProgram，但都有MicroMessenger（表示是微信浏览器）
     wx.miniProgram.getEnv((res) => {
       if (res.miniprogram) {
-        window.removeEventListener("hashchange", hashchangefn);
-        window.addEventListener("hashchange", hashchangefn);
+        window.removeEventListener('hashchange', hashchangefn);
+        window.addEventListener('hashchange', hashchangefn);
       }
     });
   }
@@ -624,7 +671,7 @@ onMounted(async () => {
       position: relative;
       margin-bottom: 30px;
       &::before {
-        content: "";
+        content: '';
         display: inline-block;
         left: 50%;
         transform: translateX(-50%);
@@ -686,7 +733,7 @@ onMounted(async () => {
     width: 84px !important;
     height: 84px !important;
     &::after {
-      content: "發現好禮";
+      content: '發現好禮';
       width: 100%;
       color: #ed5d18;
       position: absolute;
@@ -710,7 +757,7 @@ onMounted(async () => {
     position: relative;
     overflow: hidden;
     &::after {
-      content: "直播中";
+      content: '直播中';
       width: 100%;
       height: 20px;
       background: #ed5d18;

src/store/index.js

@@ -8,7 +8,7 @@ const store = createStore({
             flying: false,
             floorId: null,
             player: {
-                lang: 'zh',
+                lang: 'zh_HK',
                 showVR: false,
                 showMore: false,
                 showDescription: false,

src/store/modules/rtc.js

@@ -1,17 +1,17 @@
 
 
-import { genTestUserSig } from '@/utils/generateTestUserSig';
-// import { apis } from '@/apis';
 
+import { genTestUserSig } from '@/utils/generateTestUserSig';
 export default {
     namespaced: true,
     state() {
         return {
             socket: null,
             showdaogou: false,
-            sdkAppId: '1400709402',
+            sdkAppId: "1400709402",
             userId: '',
             roomId: '',
+            role:'',
             secretKey: 'def391b02e6423a6db15eea3d9a0c131f2abac921204246bbe3f36fcea7d111d',
             userSig: 'eJw1jlELgjAURv-LnkPunXNToZceosB6SPsBwVbelrLpFCH675XW43c*Dpwnq4oyMpOjzrBcgkgBVjMbTcdyxiNgy*61vThHmuUoABRkAvjykDZtoCvNAsbAUaWA8u-R7YttFno-JNPou7LBuH0MQR6t2tp6cz-5sy75zrXV3heH9U8M1HySUCapirnC7PUGl3Ix6g__',
             audioDeviceId: '',
@@ -33,10 +33,6 @@ export default {
         showdaogou: state => {
             return state.showdaogou
         },
-        sdkAppId: state => state.sdkAppId,
-        userId: state => state.userId,
-        roomId: state => state.roomId,
-        secretKey: state => state.secretKey,
         userSig: state => {
             const { userSig } = genTestUserSig({
                 sdkAppId: parseInt(state.sdkAppId, 10),
@@ -45,6 +41,11 @@ export default {
             });
             return userSig
         },
+        sdkAppId: state => state.sdkAppId,
+        role: state => state.role,
+        userId: state => state.userId,
+        roomId: state => state.roomId,
+        secretKey: state => state.secretKey,
         audioDeviceId: state => state.audioDeviceId,
         videoDeviceId: state => state.videoDeviceId,
         cameraList: state => state.cameraList,
@@ -91,6 +92,9 @@ export default {
                 "*"
             );
         },
+        setRole(state, payload) {
+            state.role=payload
+        },
 
         setDeviceList(state, payload) {
             state.cameraList = payload.cameraItems

src/store/modules/tour.js

@@ -1,284 +1,291 @@
-import { getApp, getNum } from '@/app'
-import { base64ToBlob, convertBlob2File } from '@/utils/file'
+import { getApp, getNum } from '@/app';
+import { base64ToBlob, convertBlob2File } from '@/utils/file';
 export default {
-    namespaced: true,
-    state() {
-        return {
-            // showPath: false,
-            // showFrame: false,
-            toursList: [],
-            sourceList: null,
-            frameId: 0,
-            partId: 0,
-            tours: [],
-            musicList: [],
-            delList: [],
-            isPlay: false,
-            showTours: false,
-        }
+  namespaced: true,
+  state() {
+    return {
+      // showPath: false,
+      // showFrame: false,
+      toursList: [],
+      sourceList: null,
+      frameId: 0,
+      partId: 0,
+      tours: [],
+      musicList: [],
+      delList: [],
+      isPlay: false,
+      showTours: false,
+      isHome: true,
+    };
+  },
+  getters: {
+    tours: (state) => {
+      return state.tours;
     },
-    getters: {
-        tours: state => {
-            return state.tours
-        },
 
-        partId: state => {
-            return state.partId
-        },
-        frameId: state => {
-            return state.frameId
-        },
-        isPlay: state => {
-            return state.isPlay
-        },
-        showTours: state => {
-            return state.showTours
-        },
+    partId: (state) => {
+      return state.partId;
     },
-    mutations: {
-        setData(state, payload) {
-            if (payload) {
-                for (let key in payload) {
-                    state[key] = payload[key]
-                }
-            }
-        },
-        setBackUp(state) {
-            state.toursList = JSON.parse(JSON.stringify(state.tours))
-        },
-        update(state, tours) {
-            this.commit('enterEdit')
-            //如果删除片段和备份数据一样则退出编辑模式
-            let t = setTimeout(() => {
-                clearTimeout(t)
-                if (state.tours.length == 0 && state.toursList.length == 0) {
-                    this.commit('leaveEdit')
-                }
-            }, 0)
-        },
-        async setFrame(state, payload) {
-            const recordr = await getApp().TourManager.recorder
-            recordr.setFrame(state.frameId, payload)
-            this.commit('tour/update')
-        },
-        async setPart(state, payload) {
-            const recordr = await getApp().TourManager.recorder
-            let data = JSON.parse(JSON.stringify(payload))
-            for (let key in data) {
-                if (key === 'file') {
-                    delete data[key]
-                }
-            }
-            recordr.setPart(state.partId, data)
+    frameId: (state) => {
+      return state.frameId;
+    },
+    isPlay: (state) => {
+      return state.isPlay;
+    },
+    isHome: (state) => {
+      return state.isHome;
+    },
+    showTours: (state) => {
+      return state.showTours;
+    },
+  },
+  mutations: {
+    setData(state, payload) {
+      if (payload) {
+        for (let key in payload) {
+          state[key] = payload[key];
+        }
+      }
+    },
+    loaded(state, payload) {
+      state.tours = payload;
+    },
+    setBackUp(state) {
+      state.toursList = JSON.parse(JSON.stringify(state.tours));
+    },
+    update(state, tours) {
+      this.commit('enterEdit');
+      //如果删除片段和备份数据一样则退出编辑模式
+      let t = setTimeout(() => {
+        clearTimeout(t);
+        if (state.tours.length == 0 && state.toursList.length == 0) {
+          this.commit('leaveEdit');
+        }
+      }, 0);
+    },
+    async setFrame(state, payload) {
+      const recordr = await getApp().TourManager.recorder;
+      recordr.setFrame(state.frameId, payload);
+      this.commit('tour/update');
+    },
+    async setPart(state, payload) {
+      const recordr = await getApp().TourManager.recorder;
+      let data = JSON.parse(JSON.stringify(payload));
+      for (let key in data) {
+        if (key === 'file') {
+          delete data[key];
+        }
+      }
+      recordr.setPart(state.partId, data);
 
-            for (let key in payload) {
-                state.tours[state.partId][key] = payload[key]
-            }
+      for (let key in payload) {
+        state.tours[state.partId][key] = payload[key];
+      }
 
-            this.commit('tour/update')
-        },
-        getUploadMuscis(state, payload) {
-            let musics = state.tours.filter(item => {
-                console.log(item.file)
-                if (item.file) {
-                    return item
-                }
-            })
-            console.log(musics)
-            return musics
-        },
-        // setTime(state, time) {
-        //     // state.tours[state.partId].list[state.frameId].time = time * 1000
-        //     this.commit('tour/setFrame', { time: time * 1000 })
-        // },
-        delList(state, payload) {
-            let frameId = payload.frameId || 0
-            let list = state.tours[state.partId].list
-            let music = state.tours[state.partId].music
-            let name = state.tours[state.partId].list[frameId].enter.cove
-            switch (payload.type) {
-                case 'part':
-                    // if (music.indexOf('blob:') == -1 && music != '') {
-                    if (music != '') {
-                        let file = state.tours[state.partId].musicUrl ? state.tours[state.partId].musicUrl.split('/').pop().split('?').shift() : music.split('/').pop().split('?').shift()
-                        state.delList.push(file)
-                    }
-                    if (list.length > 0) {
-                        list.forEach((i, index) => {
-                            // if (i.enter.coverUrl || i.enter.cover.indexOf('data:image') == -1) {
-                            //     state.delList.push(i.enter.cover.split('/').pop().split('?').shift())
-                            // }
-                            let cover = i.enter.coverUrl ? i.enter.coverUrl.split('/').pop().split('?').shift() : i.enter.cover.split('/').pop().split('?').shift()
-                            state.delList.push(cover)
-                        })
-                    }
-                    console.log(state.delList)
-                    break
-                case 'frame':
-                    // if (name.indexOf('data:image') == -1) {
-                    //     state.delList.push(name.split('/').pop().split('?').shift())
-                    // }
-                    let cover = state.tours[state.partId].list[frameId].enter.coverUrl
-                        ? state.tours[state.partId].list[frameId].enter.coverUrl.split('/').pop().split('?').shift()
-                        : state.tours[state.partId].list[frameId].enter.cover.split('/').pop().split('?').shift()
-                    state.delList.push(cover)
-                    break
-                case 'music':
-                    // if (music.indexOf('blob:') == -1 && music != '') {
-                    //     state.delList.push(name.split('/').pop().split('?').shift())
-                    // }
-                    if (music != '') {
-                        let file = state.tours[state.partId].musicUrl ? state.tours[state.partId].musicUrl.split('/').pop().split('?').shift() : music.split('/').pop().split('?').shift()
-                        state.delList.push(file)
-                    }
-                    break
-                // case 'all':
-                //     for (var i = 0; i < state.tours.length; i++) {
-                //         let music = state.tours[i].music
-                //         if (music.indexOf('blob:') == -1 && music != '') {
-                //             state.delList.push(music.split('/').pop().split('?').shift())
-                //         }
-                //         state.tours[i].list.forEach((frame, index) => {
-                //             if (frame.enter.cover.indexOf('data:image') == -1) {
-                //                 state.delList.push(frame.enter.cover.split('/').pop().split('?').shift())
-                //             }
-                //         })
-                //     }
-                //     break
-            }
-            console.log(state.delList)
-        },
+      this.commit('tour/update');
+    },
+    getUploadMuscis(state, payload) {
+      let musics = state.tours.filter((item) => {
+        console.log(item.file);
+        if (item.file) {
+          return item;
+        }
+      });
+      console.log(musics);
+      return musics;
+    },
+    // setTime(state, time) {
+    //     // state.tours[state.partId].list[state.frameId].time = time * 1000
+    //     this.commit('tour/setFrame', { time: time * 1000 })
+    // },
+    delList(state, payload) {
+      let frameId = payload.frameId || 0;
+      let list = state.tours[state.partId].list;
+      let music = state.tours[state.partId].music;
+      let name = state.tours[state.partId].list[frameId].enter.cove;
+      switch (payload.type) {
+        case 'part':
+          // if (music.indexOf('blob:') == -1 && music != '') {
+          if (music != '') {
+            let file = state.tours[state.partId].musicUrl ? state.tours[state.partId].musicUrl.split('/').pop().split('?').shift() : music.split('/').pop().split('?').shift();
+            state.delList.push(file);
+          }
+          if (list.length > 0) {
+            list.forEach((i, index) => {
+              // if (i.enter.coverUrl || i.enter.cover.indexOf('data:image') == -1) {
+              //     state.delList.push(i.enter.cover.split('/').pop().split('?').shift())
+              // }
+              let cover = i.enter.coverUrl ? i.enter.coverUrl.split('/').pop().split('?').shift() : i.enter.cover.split('/').pop().split('?').shift();
+              state.delList.push(cover);
+            });
+          }
+          console.log(state.delList);
+          break;
+        case 'frame':
+          // if (name.indexOf('data:image') == -1) {
+          //     state.delList.push(name.split('/').pop().split('?').shift())
+          // }
+          let cover = state.tours[state.partId].list[frameId].enter.coverUrl
+            ? state.tours[state.partId].list[frameId].enter.coverUrl.split('/').pop().split('?').shift()
+            : state.tours[state.partId].list[frameId].enter.cover.split('/').pop().split('?').shift();
+          state.delList.push(cover);
+          break;
+        case 'music':
+          // if (music.indexOf('blob:') == -1 && music != '') {
+          //     state.delList.push(name.split('/').pop().split('?').shift())
+          // }
+          if (music != '') {
+            let file = state.tours[state.partId].musicUrl ? state.tours[state.partId].musicUrl.split('/').pop().split('?').shift() : music.split('/').pop().split('?').shift();
+            state.delList.push(file);
+          }
+          break;
+        // case 'all':
+        //     for (var i = 0; i < state.tours.length; i++) {
+        //         let music = state.tours[i].music
+        //         if (music.indexOf('blob:') == -1 && music != '') {
+        //             state.delList.push(music.split('/').pop().split('?').shift())
+        //         }
+        //         state.tours[i].list.forEach((frame, index) => {
+        //             if (frame.enter.cover.indexOf('data:image') == -1) {
+        //                 state.delList.push(frame.enter.cover.split('/').pop().split('?').shift())
+        //             }
+        //         })
+        //     }
+        //     break
+      }
+      console.log(state.delList);
+    },
 
-        cancel(state) {
-            state.tours = JSON.parse(JSON.stringify(state.toursList))
-            getApp().TourManager.load(JSON.parse(JSON.stringify(state.toursList))) //通知回滚
-            state.toursList = JSON.parse(JSON.stringify(state.tours))
-            this.commit('leaveEdit')
-        },
-        save(state, newdData) {
-            state.toursList = JSON.parse(JSON.stringify(newdData))
+    cancel(state) {
+      state.tours = JSON.parse(JSON.stringify(state.toursList));
+      getApp().TourManager.load(JSON.parse(JSON.stringify(state.toursList))); //通知回滚
+      state.toursList = JSON.parse(JSON.stringify(state.tours));
+      this.commit('leaveEdit');
+    },
+    save(state, newdData) {
+      state.toursList = JSON.parse(JSON.stringify(newdData));
 
-            for (let i = 0; i < state.tours.length; i++) {
-                state.tours[i].musicUrl = newdData[i].music
-                for (let j = 0; j < newdData[i].list.length; j++) {
-                    state.tours[i].list[j].coverUrl = newdData[i].list[j].cover
-                }
-            }
-            console.log(state.tours)
-            // state.tours = JSON.parse(JSON.stringify(newdData))
-            this.commit('leaveEdit')
-        },
+      for (let i = 0; i < state.tours.length; i++) {
+        state.tours[i].musicUrl = newdData[i].music;
+        for (let j = 0; j < newdData[i].list.length; j++) {
+          state.tours[i].list[j].coverUrl = newdData[i].list[j].cover;
+        }
+      }
+      console.log(state.tours);
+      // state.tours = JSON.parse(JSON.stringify(newdData))
+      this.commit('leaveEdit');
+    },
 
-        // filterFiles(state,list){
-        //   for()
-        // }
+    // filterFiles(state,list){
+    //   for()
+    // }
+  },
+  actions: {
+    delTours({ commit, state }, payload) {
+      // tour/delete
+      return getApp()
+        .remote_editor.tour_delete({ num: getNum() })
+        .then((res) => {
+          if (res.success) {
+            state.tours = [];
+            commit('save', []);
+            getApp().TourManager.load([]);
+          }
+          return res;
+        })
+        .catch((err) => {
+          console.log(err);
+          return err;
+        });
     },
-    actions: {
-        delTours({ commit, state }, payload) {
-            // tour/delete
-            return getApp()
-                .remote_editor.tour_delete({ num: getNum() })
-                .then(res => {
-                    if (res.success) {
-                        state.tours = []
-                        commit('save', [])
-                        getApp().TourManager.load([])
-                    }
-                    return res
-                })
-                .catch(err => {
-                    console.log(err)
-                    return err
-                })
-        },
-        async delFile({ commit, state }, payload) {
-            let params = {
-                num: getNum(),
-                bizType: 'tour',
-                fileNames: state.delList,
-            }
-            let res = await this.dispatch('delFiles', params)
-            console.log(res)
-            if (res.success) {
-                state.delList = []
-            }
-        },
-        async save({ commit, dispatch, state }, payload) {
-            if (state.delList.length > 0) {
-                dispatch('delFile')
+    async delFile({ commit, state }, payload) {
+      let params = {
+        num: getNum(),
+        bizType: 'tour',
+        fileNames: state.delList,
+      };
+      let res = await this.dispatch('delFiles', params);
+      console.log(res);
+      if (res.success) {
+        state.delList = [];
+      }
+    },
+    async save({ commit, dispatch, state }, payload) {
+      if (state.delList.length > 0) {
+        dispatch('delFile');
+      }
+      let recorder = await getApp().TourManager.recorder;
+      let exportFiles = recorder.exportFiles();
+      let files = [];
+      console.log(exportFiles);
+      exportFiles.map((item) => {
+        let obj = {};
+        if (item.type == 'base64') {
+          obj.file = convertBlob2File(base64ToBlob(item.file), item.name);
+          obj.filename = item.name;
+        } else if (item.type == 'file') {
+          state.tours.filter((i) => {
+            let fileId = item.name.split('.')[0].split('-')[2];
+            if (fileId == i.sid) {
+              obj.file = i.file;
+              obj.filename = item.name;
             }
-            let recorder = await getApp().TourManager.recorder
-            let exportFiles = recorder.exportFiles()
-            let files = []
-            console.log(exportFiles)
-            exportFiles.map(item => {
-                let obj = {}
-                if (item.type == 'base64') {
-                    obj.file = convertBlob2File(base64ToBlob(item.file), item.name)
-                    obj.filename = item.name
-                } else if (item.type == 'file') {
-                    state.tours.filter(i => {
-                        let fileId = item.name.split('.')[0].split('-')[2]
-                        if (fileId == i.sid) {
-                            obj.file = i.file
-                            obj.filename = item.name
-                        }
-                    })
-                }
-                files.push(obj)
-            })
-            console.log(files)
+          });
+        }
+        files.push(obj);
+      });
+      console.log(files);
 
-            let res = await this.dispatch('scene/upload_files', { bizType: 'tour', num: getNum(), type: 0, files: files })
-            if (res.success) {
-            }
-            let data = recorder.exportData()
-            // let audioFiles = files.filter(i => {
-            //     return i.type === 'file'
-            // })
-            // let imageFiles = files.filter(i => {
-            //     return i.type === 'base64'
-            // })
+      let res = await this.dispatch('scene/upload_files', { bizType: 'tour', num: getNum(), type: 0, files: files });
+      if (res.success) {
+      }
+      let data = recorder.exportData();
+      // let audioFiles = files.filter(i => {
+      //     return i.type === 'file'
+      // })
+      // let imageFiles = files.filter(i => {
+      //     return i.type === 'base64'
+      // })
 
-            // if (audioFiles.length > 0) {
-            //     for (let i = 0; i < audioFiles.length; i++) {
-            //         for (let j = 0; j < state.tours.length; j++) {
-            //             let fileId = audioFiles[i].name.split('.')[0].split('-')[2]
-            //             console.log(fileId)
-            //             if (fileId == state.tours[j].sid) {
-            //                 let res = await this.dispatch('scene/upload_files', { files: state.tours[j].file, bizType: 'tour', num: getNum(), type: 0, fileName: audioFiles[i].name })
-            //                 if (res.success) {
-            //                 }
-            //             }
-            //         }
-            //     }
-            // }
-            // if (imageFiles.length > 0) {
-            //     for (let i = 0; i < imageFiles.length; i++) {
-            //         let res = await this.dispatch('scene/upload_files', { base64: imageFiles[i].file, bizType: 'tour', num: getNum(), type: 0, fileName: imageFiles[i].name })
-            //         if (res.success) {
-            //         }
-            //     }
-            // }
+      // if (audioFiles.length > 0) {
+      //     for (let i = 0; i < audioFiles.length; i++) {
+      //         for (let j = 0; j < state.tours.length; j++) {
+      //             let fileId = audioFiles[i].name.split('.')[0].split('-')[2]
+      //             console.log(fileId)
+      //             if (fileId == state.tours[j].sid) {
+      //                 let res = await this.dispatch('scene/upload_files', { files: state.tours[j].file, bizType: 'tour', num: getNum(), type: 0, fileName: audioFiles[i].name })
+      //                 if (res.success) {
+      //                 }
+      //             }
+      //         }
+      //     }
+      // }
+      // if (imageFiles.length > 0) {
+      //     for (let i = 0; i < imageFiles.length; i++) {
+      //         let res = await this.dispatch('scene/upload_files', { base64: imageFiles[i].file, bizType: 'tour', num: getNum(), type: 0, fileName: imageFiles[i].name })
+      //         if (res.success) {
+      //         }
+      //     }
+      // }
 
-            console.log('data', data)
-            console.log('tours', state.tours)
-            let params = {
-                num: getNum(),
-                data: JSON.stringify(data),
-            }
-            return getApp()
-                .remote_editor.tour_save(params)
-                .then(res => {
-                    if (res.success) {
-                        commit('save', data)
-                    }
-                    return res
-                })
-                .catch(err => {
-                    console.log(err)
-                    return err
-                })
-        },
+      console.log('data', data);
+      console.log('tours', state.tours);
+      let params = {
+        num: getNum(),
+        data: JSON.stringify(data),
+      };
+      return getApp()
+        .remote_editor.tour_save(params)
+        .then((res) => {
+          if (res.success) {
+            commit('save', data);
+          }
+          return res;
+        })
+        .catch((err) => {
+          console.log(err);
+          return err;
+        });
     },
-}
+  },
+};

src/utils/browser.js

@@ -357,9 +357,9 @@ var browser = {
     let re = new RegExp(name + "=[^&]*", "gi");
     if (!value) {
       let ttt = url.replace(new RegExp('&' + name + "=[^&]*", "gi"), '')
-      return ttt.replace(re, '');
+      return (ttt.replace(re, '')).replace("?&",'?');
     }
-    return url.replace(re, name + "=" + value);
+    return (url.replace(re, name + "=" + value)).replace("?&",'?');
   },
   openLink(mglink, h5link, appLink) {
     if (this.getURLParam("isBuyerApp") === "1") {

src/utils/wxshare.js

@@ -0,0 +1,287 @@
+import browser from '@/utils/browser'
+import jsonp from 'jsonp'
+function toConfigure() {
+    return new Promise((resolve, reject) => {
+        let name = '中免项目'
+        name = encodeURIComponent(name)
+        let uri = encodeURIComponent(location.href.split('#')[0])
+        jsonp(
+            '//www.4dage.com/wechat/jssdk/share?name=' + name + '&uri=' + uri,
+            {
+                param: 'callback',
+            },
+            function (err, data) {
+                console.log(data, '-------------------------------------=========')
+                wx.config({
+                    debug: false,
+                    appId: data.appId,
+                    timestamp: data.timestamp,
+                    nonceStr: data.nonceStr,
+                    signature: data.signature,
+                    jsApiList: [
+                        'checkJsApi',
+                        'onMenuShareTimeline',
+                        'onMenuShareAppMessage',
+                        'updateTimelineShareData',
+                        'updateAppMessageShareData',
+                        'onMenuShareQQ',
+                        'onMenuShareWeibo',
+                        'hideMenuItems',
+                        'showMenuItems',
+                        'hideAllNonBaseMenuItem',
+                        'showAllNonBaseMenuItem',
+                        'translateVoice',
+                        'startRecord',
+                        'stopRecord',
+                        'onRecordEnd',
+                        'playVoice',
+                        'pauseVoice',
+                        'stopVoice',
+                        'uploadVoice',
+                        'downloadVoice',
+                        'chooseImage',
+                        'previewImage',
+                        'uploadImage',
+                        'downloadImage',
+                        'getNetworkType',
+                        'openLocation',
+                        'getLocation',
+                        'hideOptionMenu',
+                        'showOptionMenu',
+                        'closeWindow',
+                        'scanQRCode',
+                        'chooseWXPay',
+                        'openProductSpecificView',
+                        'addCard',
+                        'chooseCard',
+                        'openCard',
+                    ],
+                })
+                resolve()
+            }
+        )
+
+        // jsonp({
+        //     url: '//www.4dage.com/wechat/jssdk/share',
+        //     data: {
+        //         name: name,
+        //         uri: location.href.split('#')[0],
+        //     },
+        //     // 把前端方法作为参数传递给服务器
+        //     success: function (data) {
+        //         console.log(data)
+        //         wx.config({
+        //             debug: false,
+        //             appId: data.appId,
+        //             timestamp: data.timestamp,
+        //             nonceStr: data.nonceStr,
+        //             signature: data.signature,
+        //             jsApiList: [
+        //                 'checkJsApi',
+        //                 'onMenuShareTimeline',
+        //                 'onMenuShareAppMessage',
+        //                 'updateTimelineShareData',
+        //                 'updateAppMessageShareData',
+        //                 'onMenuShareQQ',
+        //                 'onMenuShareWeibo',
+        //                 'hideMenuItems',
+        //                 'showMenuItems',
+        //                 'hideAllNonBaseMenuItem',
+        //                 'showAllNonBaseMenuItem',
+        //                 'translateVoice',
+        //                 'startRecord',
+        //                 'stopRecord',
+        //                 'onRecordEnd',
+        //                 'playVoice',
+        //                 'pauseVoice',
+        //                 'stopVoice',
+        //                 'uploadVoice',
+        //                 'downloadVoice',
+        //                 'chooseImage',
+        //                 'previewImage',
+        //                 'uploadImage',
+        //                 'downloadImage',
+        //                 'getNetworkType',
+        //                 'openLocation',
+        //                 'getLocation',
+        //                 'hideOptionMenu',
+        //                 'showOptionMenu',
+        //                 'closeWindow',
+        //                 'scanQRCode',
+        //                 'chooseWXPay',
+        //                 'openProductSpecificView',
+        //                 'addCard',
+        //                 'chooseCard',
+        //                 'openCard',
+        //             ],
+        //         })
+        //         resolve()
+        //     },
+        // })
+
+        // $.ajax({
+        //     url: '//www.4dage.com/wechat/jssdk/share',
+        //     type: 'get',
+        //     data: {
+        //         uri: location.href.split('#')[0],
+        //         name: '厦门四维时代微信公众号',
+        //     },
+        //     dataType: 'jsonp',
+        //     //jsonpCallback: "success_jsonp",
+        //     success: function (data, textStatus) {
+        //       console.log(data)
+        //         wx.config({
+        //             debug: false,
+        //             appId: data.appId,
+        //             timestamp: data.timestamp,
+        //             nonceStr: data.nonceStr,
+        //             signature: data.signature,
+        //             jsApiList: [
+        //                 'checkJsApi',
+        //                 'onMenuShareTimeline',
+        //                 'onMenuShareAppMessage',
+        //                 'onMenuShareQQ',
+        //                 'onMenuShareWeibo',
+        //                 'hideMenuItems',
+        //                 'showMenuItems',
+        //                 'hideAllNonBaseMenuItem',
+        //                 'showAllNonBaseMenuItem',
+        //                 'translateVoice',
+        //                 'startRecord',
+        //                 'stopRecord',
+        //                 'onRecordEnd',
+        //                 'playVoice',
+        //                 'pauseVoice',
+        //                 'stopVoice',
+        //                 'uploadVoice',
+        //                 'downloadVoice',
+        //                 'chooseImage',
+        //                 'previewImage',
+        //                 'uploadImage',
+        //                 'downloadImage',
+        //                 'getNetworkType',
+        //                 'openLocation',
+        //                 'getLocation',
+        //                 'hideOptionMenu',
+        //                 'showOptionMenu',
+        //                 'closeWindow',
+        //                 'scanQRCode',
+        //                 'chooseWXPay',
+        //                 'openProductSpecificView',
+        //                 'addCard',
+        //                 'chooseCard',
+        //                 'openCard',
+        //             ],
+        //         })
+        //         resolve()
+        //     },
+        //     error: function (XMLHttpRequest, textStatus, errorThrown) {
+        //         reject('jsonp.error:' + textStatus)
+        //     },
+        // })
+    })
+}
+
+function strToJSON(search) {
+    let args = search.substr(1).split('&')
+    let obj = {}
+    args.forEach(arg => {
+        let index = arg.indexOf('=')
+        if (!~index) {
+            obj[arg] = null
+        } else {
+            obj[arg.substr(0, index)] = arg.substr(index + 1)
+        }
+    })
+
+    return obj
+}
+
+function jsonToStr(data) {
+    let strs = []
+    Object.keys(data).forEach(k => {
+        if (data[k] !== null) {
+            strs.push(`${k}=${data[k]}`)
+        }
+    })
+    return '?' + strs.join('&')
+}
+
+function setup({ title, link, imgUrl, desc }) {
+    let defaultFn = () => { }
+    let defaultChar = ''
+    let search = link.substr(link.indexOf('?'))
+    let path = link.substr(0, link.indexOf('?'))
+    let data = strToJSON(search)
+    wx.ready(function () {
+        // 微信朋友圈
+        data.open = 'wx_friends'
+        wx.onMenuShareTimeline({ title, link: path + jsonToStr(data), imgUrl, desc })
+        // 微信好友
+        data.open = 'wx_friend'
+        wx.onMenuShareAppMessage({ title, desc, link: path + jsonToStr(data), imgUrl, type: defaultChar, dataUrl: defaultChar })
+        // 微博
+        data.open = 'weibo'
+        wx.onMenuShareWeibo({ title, desc, link: path + jsonToStr(data), imgUrl, success: defaultFn, cancel: defaultFn })
+        // 空间
+        data.open = 'qq_zone'
+        wx.onMenuShareQZone({ title, desc, link: path + jsonToStr(data), imgUrl, success: defaultFn, cancel: defaultFn })
+        // QQ好友
+        data.open = 'qq'
+        wx.onMenuShareQQ({ title, desc, link: path + jsonToStr(data), imgUrl, success: defaultFn, cancel: defaultFn })
+
+        wx.hideMenuItems({
+            menuList: [
+                'menuItem:copyUrl',
+                'menuItem:openWithQQBrowser',
+                'menuItem:openWithSafari',
+                'menuItem:originPage',
+            ]
+        });
+        wx.error(function (e) {
+            console.log(e)
+        })
+    })
+}
+// // 封装JSONP方法
+// function jsonp(options) {
+//     // 创建一个script标签
+//     var script = document.createElement('script')
+
+//     // 随机生成一个函数名
+//     /*   Math.random() 随机生成小数 0.123
+//       toString() 转换为字符串
+//       replace('.','') 把点替换 0123
+//       最后随机生成的funName是 myJSONP0123 这种格式 */
+//     var funName = 'myJSONP' + Math.random().toString().replace('.', '')
+
+//     // 多个参数进行拼接
+//     var param = ''
+//     for (var arr in options.data) {
+//         param += '&' + arr + '=' + options.data[arr]
+//     }
+
+//     // 把这个客户传过来的函数设置为全局函数
+//     // . 后面不能跟变量，所以只能用[]
+//     window[funName] = options.success
+
+//     // 给script中的src属性赋值
+//     script.src = options.url + '?callback=' + funName + param
+//     // 放到body容器里面
+//     document.body.appendChild(script)
+
+//     // 等script标签加载完之后，清除标签
+//     script.onload = function () {
+//         document.body.removeChild(script)
+//     }
+// }
+
+export default async args => {
+    if (typeof wx != 'undefined' && browser.detectWeixin()) {
+        // if (typeof wx != 'undefined') {
+        //需要引入 https://res.wx.qq.com/open/js/jweixin-1.2.0.js
+        !args.donotconfig && await toConfigure()
+        setup(args)
+    }
+}
+

src/views/viewimg.vue

@@ -30,7 +30,6 @@ const initScroll = () => {
   nextTick(() => {
     let t = setTimeout(() => {
       clearTimeout(t);
-      console.log(props.keyid);
       new Swiper(`.${props.keyid}`, {
         on: {
           touchMove(swiper, e) {