Переглянути джерело

feat: 开启展示页导览

jinx 3 роки тому
батько
коміт
82fc8abcc6

+ 1 - 1
.env

@@ -4,7 +4,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
 
 # socket地址
 VUE_APP_SOCKET_URL=https://vr-admin.cdfmembers.com/

+ 3 - 2
.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
 

+ 36 - 36
public/index.html

@@ -1,47 +1,47 @@
 <!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>cdf澳門上葡京店</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/zmjm.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="<%= VUE_APP_STATIC_DIR %>/static/lib/jweixin-1.6.0.js"></script>
-        
-        <script src="<%= VUE_APP_SDK_DIR %>/kankan-sdk-deps.js?v=4.37.3-alpha.52"></script>
-        <script src="<%= VUE_APP_SDK_DIR %>/kankan-sdk.js?v=4.37.3-alpha.52"></script>
+    <script src="http://127.0.0.1:3099/dist/sdk/kankan-sdk-deps.js?v=4.37.3-alpha.70"></script>
+    <!-- <script src="<%= VUE_APP_SDK_DIR %>/kankan-sdk.js?v=4.37.3-alpha.70"></script> -->
+    <script src="http://127.0.0.1:3099/dist/sdk/kankan-sdk.js?v=4.37.3-alpha.70"></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>

+ 202 - 204
src/app.vue

@@ -15,26 +15,21 @@
         </span>
         <div v-if="controls.showDollhouse" :class="{ gudieDisabled: isshoppingguide && role != 'leader' }" class="change" @click="changeMode('dollhouse')">
           <ui-icon type="show_3d_normal"></ui-icon>
-          <span> {{ $t("mode.dollhouseModel") }}</span>
+          <span> {{ $t('mode.dollhouseModel') }}</span>
         </div>
       </teleport>
 
       <template v-if="refMiniMap && player.showWidgets">
-        <div
-          :class="{ disabled: flying, gudieDisabled: isshoppingguide && role != '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' }" ref="floorplan_ref" @click="changeMode('floorplan', $event)">
               <ui-icon :type="mode == 'floorplan' ? 'show_plane_selected' : 'show_plane_normal'"></ui-icon>
-              {{ $t("mode.floorplan") }}
+              {{ $t('mode.floorplan') }}
             </span>
             <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") }}
+              {{ $t('mode.dollhouse') }}
             </span>
             <div class="background" ref="background"></div>
           </div>
@@ -50,45 +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 { 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" });
+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;
 };
 
@@ -99,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);
   }
 };
@@ -108,54 +103,54 @@ const musicPlayer = useMusicPlayer();
 
 let app = null;
 
-let tagid = browser.getURLParam("tagid");
+let tagid = browser.getURLParam('tagid');
 
-const role = computed(() => store.getters["rtc/role"]);
+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 (browser.getURLParam("role")) {
+if (browser.getURLParam('role')) {
   hadVideo.value = true;
 }
 
@@ -165,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';
     });
   }
 };
@@ -177,16 +172,16 @@ 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 (browser.getURLParam("role") == "customer") {
+        if (browser.getURLParam('role') == 'customer') {
           await nextTick();
           if (isshoppingguide.value) {
-            $minmap.classList.add("gudieDisabled");
+            $minmap.classList.add('gudieDisabled');
           } else {
-            $minmap.classList.remove("gudieDisabled");
+            $minmap.classList.remove('gudieDisabled');
             // wxShare({
             //   title: `cdf澳門上葡京店~`,
             //   desc: "cdf澳門上葡京店~",
@@ -207,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');
         }
       }
     }
@@ -224,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');
       }
     }
   },
@@ -244,15 +239,15 @@ watch(
     console.log(val);
     let timer = setTimeout(() => {
       clearTimeout(timer);
-      if (val == "floorplan") {
+      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";
+          background.value.style.width = floorplan_ref.value.getBoundingClientRect().width + 'px';
+          background.value.style.left = floorplan_ref.value.offsetLeft + 'px';
         }
-      } else if (val == "dollhouse") {
+      } 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";
+          background.value.style.width = dollhouse_ref.value.getBoundingClientRect().width + 'px';
+          background.value.style.left = dollhouse_ref.value.offsetLeft + 'px';
         }
       }
     }, 0);
@@ -266,20 +261,20 @@ const dollhouse_ref = ref(null);
 const changeMode = (name, e) => {
   if (e) {
     if (!flying.value) {
-      store.commit("setMode", name);
+      store.commit('setMode', name);
     }
   } else {
-    store.commit("setMode", name);
+    store.commit('setMode', name);
   }
 };
 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');
     }
   }
 };
@@ -287,13 +282,13 @@ const toggleMap = () => {
 const onClickTagInfo = (el) => {
   el.stopPropagation();
   let item = tags.value.find((item) => item.sid == el.target.dataset.id);
-  if (item.type == "commodity") {
+  if (item.type == 'commodity') {
     guideclicktag(item);
-    store.commit("tag/setTagClickType", {
-      type: "goodlist",
+    store.commit('tag/setTagClickType', {
+      type: 'goodlist',
       data: item,
     });
-  } else if (item.type == "link_scene") {
+  } else if (item.type == 'link_scene') {
     guideclicktag(item);
     let sceneFirstView = item.hotContent.sceneFirstView;
     window.location.href = jumpNewScene(sceneFirstView);
@@ -302,10 +297,10 @@ 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,
           },
@@ -319,55 +314,53 @@ 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">${t("common.goNext")}</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} | ${t("common.view")} ></p>
+                          <p class="tag-info">${range} | ${t('common.view')} ></p>
                         </div>
                       </div>
                   `;
@@ -377,43 +370,43 @@ 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 {
               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;
+              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 {
               if (isshoppingguide.value) {
                 return;
               }
-              let hotcontent = typeof tag.hotContent == "string" ? JSON.parse(tag.hotContent) : tag.hotContent;
+              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);
@@ -421,18 +414,18 @@ onMounted(async () => {
         });
       });
 
-      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();
@@ -441,149 +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;
-    store.commit("SetPlayerOptions", {
+    store.commit('SetPlayerOptions', {
       lang: getLocale(),
     });
     wxShare({
-      title: `${t("common.title")}~`,
-      desc: `${t("common.title")}~`,
+      title: `${t('common.title')}~`,
+      desc: `${t('common.title')}~`,
       link: window.location.href,
-      imgUrl: "https://glp-vr.cdfmembers.com/cdf/file/91dd5305525f463286f03a31abd1c154.jpg",
+      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(t("common.calculation"));
+        Dialog.alert(t('common.calculation'));
         break;
       case 5034:
-        Dialog.alert(t("common.title"));
+        Dialog.alert(t('common.title'));
         break;
       case 5009:
-        Dialog.alert(t("common.title"));
+        Dialog.alert(t('common.title'));
         break;
       case 5005:
-        Dialog.alert(t("common.title"));
+        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")) {
+      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.know")}:`,
+          okText: t('common.know'),
+          content: "<span style='font-size: 16px; line-height: 1.5;'>" + t('common.notice') + '<span/>',
+          title: `${t('common.know')}:`,
           single: true,
           func: (state) => {
-            if (state == "ok") {
-              localStorage.setItem("user_guide", Date.now());
+            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);
       }
     });
   }
@@ -673,7 +671,7 @@ onMounted(async () => {
       position: relative;
       margin-bottom: 30px;
       &::before {
-        content: "";
+        content: '';
         display: inline-block;
         left: 50%;
         transform: translateX(-50%);
@@ -735,7 +733,7 @@ onMounted(async () => {
     width: 84px !important;
     height: 84px !important;
     &::after {
-      content: "發現好禮";
+      content: '發現好禮';
       width: 100%;
       color: #ed5d18;
       position: absolute;
@@ -759,7 +757,7 @@ onMounted(async () => {
     position: relative;
     overflow: hidden;
     &::after {
-      content: "直播中";
+      content: '直播中';
       width: 100%;
       height: 20px;
       background: #ed5d18;

+ 87 - 95
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>
-

+ 159 - 115
src/components/Controls/Panel/Guide.vue

@@ -1,11 +1,12 @@
 <template>
   <div v-show="player.showWidgets" class="root-panel">
-    <div class="guide-panel" >
+    <div class="guide-panel">
       <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 }"
@@ -17,8 +18,9 @@
               <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 }"
@@ -29,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>{{$t('common.back')}}</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 ? '暫停' : '播放' }}</div>
+          </div>
         </div>
       </div>
     </div>
@@ -41,71 +49,113 @@
 </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";
+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' })
+import { useI18n, getLocale } from '@/i18n';
+const { t } = useI18n({ useScope: 'global' });
 
-let timer = null
+let timer = null;
 
 const store = useStore();
 const musicPlayer = useMusicPlayer();
-const flying = computed(() => store.getters['flying'])
-const isSelect = ref(false)
+const flying = computed(() => store.getters['flying']);
+const isSelect = 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) => {
+  let player = await getApp().TourManager.player;
+  if (type == 'part') {
+    store.commit('tour/setData', {
+      frameId: 0,
+      partId: id,
+    });
+    progressNum.value = 0;
+
+    player.selectPart(id).then(() => {
+      // store.commit('tour/setData', { isPlay: true });
+      if (!isPlay.value) {
+        return;
+      }
+      store.commit('tour/setData', {
+        isPlay: true,
+      });
+      player.play(id);
+    });
+  } else {
+    player.selectFrame(id).then(() => {});
+    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 player = computed(() => store.getters['player']);
 
+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();
@@ -117,120 +167,114 @@ 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();
 
     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 });
+    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;
+  // player.on('progress', (data) => {
+  //   // if (tours.value.length == 1) {
+  //   //   progressNum.value = data.progress * 100;
+  //   // } else {
+
+  //   if (currPartId != data.partId) {
+  //     mySwiper.slideTo(data.partId);
+  //     currPartId = data.partId;
+  //     currFrames = Math.max(tours.value[data.partId].list.length - 1, 1);
+  //     currProgress = 0;
+  //   } else {
+  //     console.log(currFrames);
+  //     currProgress += data.progress / currFrames;
+  //     if (currProgress >= 100) {
+  //       currProgress = 100;
+  //     }
+
+  //     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;
+      currFrames = tours.value[data.partId].list.length;
+      currProgress = 0;
     } else {
-      // let time = getPartTime(data.partId)
-
-      // hanlderTourPartPlay(time)
-
-      if (currPartId != data.partId) {
-        currPartId = data.partId;
-        currFrames = Math.max(tours.value[data.partId].list.length-1,1);
-        currProgress = 0;
-      } else {
-        console.log(currFrames);
-        currProgress += data.progress / currFrames;
-        if (currProgress >= 100) {
-          currProgress = 100;
-        }
-
-        console.log(currProgress);
-
-        progressNum.value = currProgress;
+      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')
   // })
 };
-
 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>
 
@@ -242,8 +286,8 @@ 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;
@@ -267,12 +311,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 {
@@ -316,7 +360,7 @@ onMounted(() => {
                 left: 0;
                 width: 100%;
                 height: 100%;
-                content: "";
+                content: '';
                 display: inline-block;
                 background: rgba(24, 24, 24, 0.5);
               }
@@ -334,7 +378,7 @@ onMounted(() => {
                 left: 50%;
                 transform: translateX(-50%);
                 &::after {
-                  content: "";
+                  content: '';
                   width: var(--w);
                   background: var(--editor-main-color);
                   height: 100%;

+ 55 - 67
src/components/Controls/Panel/Main.vue

@@ -1,7 +1,6 @@
 <template>
   <div>
-              
-    <Panel v-show="player.showWidgets" :class="{disabled:!showdaogou}" :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="" />
@@ -9,10 +8,10 @@
         </div>
         <div class="vline"></div>
         <ul>
-          <!-- <li v-if="tours.length > 0">
+          <li v-if="tours.length > 0">
             <ui-icon type="preview" @click.stop="playTour"></ui-icon>
             <div>導覽</div>
-          </li> -->
+          </li>
           <li @click.stop="onClickMenu(item)" v-for="(item, i) in menulist" :key="i">
             <ui-icon :type="item.icon"></ui-icon>
             <div>{{ item.name }}</div>
@@ -43,7 +42,7 @@
                 })
               "
             ></ui-icon>
-            <div>{{$t('common.shopping')}}</div>
+            <div>{{ $t('common.shopping') }}</div>
           </li>
         </ul>
       </div>
@@ -51,10 +50,10 @@
       <div class="toolbar color">
         <div class="navigation">
           <div class="h3">
-            <span>{{$t('common.guide')}}</span>
+            <span>{{ $t('common.guide') }}</span>
             <div @click="showShopList = true">
               <img :src="require(`@/assets/images/icon/search.svg`)" alt="" />
-              {{$t('common.searchguide')}}
+              {{ $t('common.searchguide') }}
             </div>
           </div>
           <div class="swiper-container" id="sw-navigation">
@@ -90,15 +89,9 @@
                   })
                 "
               >
-                <div>{{$t('common.all')}}</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>
@@ -109,7 +102,7 @@
     <teleport :to="`#app`">
       <div v-show="showShopList" class="shoplist">
         <div class="l-title">
-          {{$t('common.guidelist')}} ({{ searchList.length }})
+          {{ $t('common.guidelist') }} ({{ searchList.length }})
           <ui-icon type="close" @click="showShopList = false" />
         </div>
 
@@ -131,27 +124,26 @@
           </li>
         </ul>
 
-        <div class="noresult" v-else>{{$t('common.noResult')}}</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 { useI18n, getLocale } from '@/i18n'
-const { t } = useI18n({ useScope: 'global' })
-
+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);
 
@@ -160,56 +152,56 @@ 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",
+      icon: 'help',
+      id: 'help',
       name: t('common.help'),
     },
     {
-      icon: "customer_service",
-      id: "kefu",
+      icon: 'customer_service',
+      id: 'kefu',
       name: t('common.kefu'),
     },
   ];
@@ -230,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: {
@@ -246,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) {
@@ -262,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);
   }
 };
 
@@ -293,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;
 };
 
@@ -437,7 +425,7 @@ onMounted(() => {
         position: absolute;
         right: 0;
         bottom: 0;
-        content: "";
+        content: '';
         display: inline-block;
         height: 100%;
         z-index: 99;

+ 276 - 269
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;
+        });
     },
-}
+  },
+};

+ 1 - 1
vue.config.js

@@ -11,7 +11,7 @@ module.exports = defineConfig({
   },
   devServer: {
     // port: 443,
-    https: true,
+    // https: true,
     // disableHostCheck: true,
     headers: {
       "Cache-Control": "no-store",