tremble 3 tahun lalu
induk
melakukan
264783fa9d
3 mengubah file dengan 74 tambahan dan 22 penghapusan
  1. 43 5
      src/app.vue
  2. TEMPAT SAMPAH
      src/assets/images/guide/novice_guide_text@2x.png
  3. 31 17
      src/components/Controls/Panel/Main.vue

+ 43 - 5
src/app.vue

@@ -64,6 +64,23 @@ import { useApp, getApp } from "@/app";
 import common from "@/utils/common";
 import * as apis from "@/apis/index.js";
 
+let jumpNewScene = (sceneFirstView) => {
+  let url = window.location.href;
+
+  if (!browser.hasURLParam("novideo")) {
+    url = `${window.location.href}&novideo=1`;
+  }
+
+  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 visibilitychangeFn = () => {
   if (browser.isTabHidden()) {
     apis.burying_point({ type: 1 });
@@ -198,6 +215,9 @@ const onClickTagInfo = (el) => {
       type: "goodlist",
       data: item,
     });
+  } else if (item.type == "link_scene") {
+    let sceneFirstView = item.hotContent.sceneFirstView;
+    window.location.href = jumpNewScene(sceneFirstView);
   }
 };
 
@@ -212,6 +232,7 @@ onMounted(async () => {
     scene: {
       markerOpacity: 1,
       markerURL: "https://eurs3.4dkankan.com/cdf/file/43aa29799bfd472298a47cc6370b10cc.png",
+      pathEndColor:'#FF4641'
     },
   });
   app.use("MinMap", { theme: { camera_fillStyle: "#ED5D18" } });
@@ -231,7 +252,13 @@ onMounted(async () => {
             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>`;
+          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>
+                        </div>
+                      </div>
+                  `;
         } 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;
@@ -273,19 +300,19 @@ onMounted(async () => {
             browser.openLink(tag.hotContent.liveLink);
           } else if (tag.type == "link_scene") {
             let sceneFirstView = tag.hotContent.sceneFirstView;
-            window.location.href = "".concat(window.location.pathname, "?").concat(`m=${sceneFirstView.num}&novideo=1&${sceneFirstView.sceneview}`);
+            window.location.href = jumpNewScene(sceneFirstView);
           }
         });
       });
 
       view.on("focus", (e) => {
         document.querySelectorAll("[xui_tags_view] >div").forEach((el) => {
-          if (el.getAttribute("data-tag-type") == "commodity") {
+          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") {
+        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);
@@ -474,7 +501,8 @@ onMounted(async () => {
     transform-origin: bottom;
     transition: all 0.3s cubic-bezier(0.35, 0.32, 0.65, 0.63);
     // pointer-events: none;
-    .tag-commodity {
+    .tag-commodity,
+    .tag-link_scene {
       min-width: 230px;
       height: 76px;
       background: rgba(255, 255, 255, 0.8);
@@ -529,6 +557,16 @@ onMounted(async () => {
     &.show {
       transform: translateX(-50%) scale(1);
     }
+
+    .tag-link_scene {
+      height: auto;
+      min-width: unset;
+      .tag-title {
+        padding: 10px;
+        width: auto;
+        text-align: center;
+      }
+    }
   }
 
   .coupon {

TEMPAT SAMPAH
src/assets/images/guide/novice_guide_text@2x.png


+ 31 - 17
src/components/Controls/Panel/Main.vue

@@ -1,5 +1,5 @@
 <template>
-  <Panel v-show="player.showWidgets" :isOpen="isOpen" >
+  <Panel v-show="player.showWidgets" :isOpen="isOpen">
     <div @click="toggleOpen" class="menu color">
       <div class="logo">
         <img :src="require('@/assets/images/icon/logo.png')" alt="" />
@@ -23,10 +23,16 @@
         <div class="h3">專櫃導航</div>
         <div class="swiper-container" id="sw-navigation">
           <ul class="swiper-wrapper">
-            <li class="swiper-slide" :class="{liactive:item.sceneUrl === currentM && (item.inPosition.indexOf(currentPose)>-1)}"  @click.stop="onClickShop(item)" v-for="(item, i) in brandlist" :key="i">
+            <li
+              class="swiper-slide"
+              :class="{ liactive: item.sceneUrl === currentM && item.inPosition.indexOf(currentPose) > -1 }"
+              @click.stop="onClickShop(item)"
+              v-for="(item, i) in brandlist"
+              :key="i"
+            >
               <div v-if="item.shopLogo" class="img" :style="{ 'background-image': `url(${item.shopLogo})` }"></div>
               <div class="name" v-if="item.shopName">
-                <span :class="{active:item.shopName.length>6}">
+                <span :class="{ active: item.shopName.length > 6 }">
                   {{ item.shopName }}
                 </span>
               </div>
@@ -78,18 +84,17 @@ const store = useStore();
 
 const isOpen = ref(false);
 
-const toggleOpen = ()=>{
-  isOpen.value = !isOpen.value
-}
+const toggleOpen = () => {
+  isOpen.value = !isOpen.value;
+};
 
 const currentCategory = ref({
   id: "",
   categoryName: "全部",
 });
 
-const currentM = computed(()=>(browser.getURLParam("m")))
-const currentPose = computed(()=>(browser.getURLParam("pose")))
-
+const currentM = computed(() => browser.getURLParam("m"));
+const currentPose = computed(() => browser.getURLParam("pose"));
 
 const isPlay = computed(() => {
   let status = store.getters["tour/isPlay"];
@@ -244,13 +249,11 @@ const onClickMenu = (item) => {
   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')
-
+    window.open(mglink, "_blank");
   } else if (item.id == "shopping") {
     browser.openLink("/subPackage/pages/shoppingcart/shoppingcart", "https://m.cdfmembers.com/shop/600667208/shoppingcart", "/pages/shoppingcart/main");
   } else if (item.id == "help") {
     store.commit("showUserGuide", true);
-
   }
 };
 
@@ -266,7 +269,19 @@ const onClickCategory = (item) => {
 };
 
 const onClickShop = (item) => {
-  window.location.href = "".concat(window.location.pathname, "?").concat(`m=${item.sceneUrl}&novideo=1&${item.inPosition}`);
+  let url = window.location.href;
+  if (!browser.hasURLParam("novideo")) {
+    url += `&novideo=1`;
+  }
+
+  if (!browser.hasURLParam("pose")) {
+    url += `&${item.inPosition}`;
+  } else {
+    url = browser.replaceQueryString(url, "pose", item.inPosition.replace("pose=", ""));
+  }
+
+  url = browser.replaceQueryString(url, "m", item.sceneUrl);
+  window.location.href = url;
 };
 
 watch(
@@ -391,8 +406,8 @@ onMounted(() => {
           overflow: hidden;
           border: 1px transparent solid;
           box-sizing: border-box;
-          &.liactive{
-            color:var(--editor-main-color);
+          &.liactive {
+            color: var(--editor-main-color);
             border: 1px var(--editor-main-color) solid;
           }
           .img {
@@ -418,7 +433,7 @@ onMounted(() => {
               display: inline-block;
               white-space: nowrap;
             }
-            .active{
+            .active {
               animation: 5s wordsLoop linear infinite normal;
             }
           }
@@ -462,5 +477,4 @@ onMounted(() => {
     -webkit-transform: translateX(-100%);
   }
 }
-
 </style>