ソースを参照

配置热点json

tremble 3 年 前
コミット
4b66170db1

+ 7 - 2
src/apis/index.js

@@ -15,13 +15,18 @@ export const get_shop_list = data => {
 }
 
 export const get_tags_list = data => {
-  return http.post('/service/scene/edit/tag/getHotJson', data)
+  return http.get('/service/scene/edit/tag/getHotJson', data)
 }
 
 export const get_product_info = data => {
-  return http.post('/api/getProductInfo', data)
+  return http.get('/api/getProductInfo', data)
 }
 
 export const get_video = data => {
   return http.get('/api/getVideo', data)
 }
+
+
+export const inCat = data => {
+  return http.get('/api/inCat', data)
+}

+ 55 - 25
src/app.vue

@@ -54,19 +54,22 @@ import Control from "@/components/Controls/Control.Mobile.vue";
 import LoadingLogo from "@/components/shared/Loading.vue";
 import OpenVideo from "@/components/openVideo/";
 
-
 import { createApp } from "@/app";
 import { ref, onMounted, computed, watch } from "vue";
 import { useStore } from "vuex";
 import browser from "@/utils/browser";
 import { useApp, getApp } from "@/app";
+import * as apis from "@/apis/index.js";
 
 const musicPlayer = useMusicPlayer();
 
 let app = null;
 
 const closetagtype = () => {
-  store.commit("tag/setTagClickType", "");
+  store.commit("tag/setTagClickType", {
+    type: "",
+    data: {},
+  });
 };
 
 const store = useStore();
@@ -82,7 +85,7 @@ const controls = computed(() => {
 const mode = computed(() => store.getters["mode"]);
 const showNavigations = computed(() => store.getters["showNavigations"]);
 const scene$ = ref(null);
-const hadVideo = ref(false);
+const hadVideo = ref(!!browser.getURLParam("novideo"));
 const show = ref(false);
 const dataLoaded = ref(false);
 const refMiniMap = ref(null);
@@ -98,12 +101,14 @@ const resize = () => {
   }
 };
 
-watch(()=>hadVideo.value,
-(val,old)=>{
-  if (val) {
-    app.Scene.unlock()
+watch(
+  () => hadVideo.value,
+  (val, old) => {
+    if (val) {
+      app.Scene.unlock();
+    }
   }
-});
+);
 
 watch(
   () => player.value.showMap,
@@ -163,17 +168,31 @@ const onClickTagInfo = (el) => {
   let item = tags.value.find((item) => item.sid == el.target.dataset.id);
   console.log(item);
   if (item.type == "commodity") {
-    store.commit("tag/setTagClickType", "goodlist");
+    store.commit("tag/setTagClickType", {
+      type: "goodlist",
+      data: item,
+    });
   } else if (item.type == "waterfall") {
-    store.commit("tag/setTagClickType", "waterfall");
+    store.commit("tag/setTagClickType", {
+      type: "waterfall",
+      data: item,
+    });
   }
 };
 
-onMounted(() => {
+onMounted(async () => {
+  let tags_cdf = (
+    await apis.get_tags_list({
+      num: browser.getURLParam("m"),
+    })
+  ).data;
+
   app = createApp({
     num: browser.getURLParam("m"),
     dom: scene$.value,
     mobile: true,
+    isLoadTags:false
+
   });
   app.use("MinMap", { theme: { camera_fillStyle: "#ED5D18" } });
   app.use("Tag");
@@ -182,13 +201,15 @@ onMounted(() => {
       render(data) {
         console.log(data, data.type);
         if (data.type == "waterfall") {
+          let arr = data.products.map(item=>item.price)
+          let range = `${data.products[0].symbol} ${Math.min.apply(null,arr)} - ${Math.max.apply(null,arr)}`
           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({{icon}})" class='tag-avatar'>
+                          <div  style="background-image:url(${data.products[0].pic})" class='tag-avatar'>
                           </div>
-                          <p class="tag-title">這裏是商品標題</p>
-                          <p class="tag-info">¥ 198 | 查看 ></p>
+                          <p class="tag-title">${data.title}</p>
+                          <p class="tag-info">${range} | 查看 ></p>
                         </div>
                       </div>
                   `;
@@ -197,17 +218,17 @@ onMounted(() => {
         } else if (data.type == "applet_link") {
           return `<span class="tag-icon applet_link" style="background-image:url({{icon}})"></span>`;
         } else if (data.type == "link_scene") {
-          return `<span class="tag-icon animate" style="background-image:url({{icon}})"></span>
-                                <div class="tag-body">sdfsdf</div>
-                            `;
+          return `<span class="tag-icon animate" style="background-image:url({{icon}})"></span>`;
         } else if (data.type == "commodity") {
+          let arr = data.products.map(item=>item.price)
+          let range = `${data.products[0].symbol} ${Math.min.apply(null,arr)}-${Math.max.apply(null,arr)}`
           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({{icon}})" class='tag-avatar'>
+                          <div  style="background-image:url(${data.products[0].pic})" class='tag-avatar'>
                           </div>
-                          <p class="tag-title">這裏是商品標題</p>
-                          <p class="tag-info">¥ 198 | 查看 ></p>
+                          <p class="tag-title">${data.title}</p>
+                          <p class="tag-info">${range} | 查看 ></p>
                         </div>
                       </div>
                   `;
@@ -223,9 +244,15 @@ onMounted(() => {
         // 聚焦当前点击的热点
         view.focus(tag.sid).then(() => {
           if (tag.type == "coupon") {
-            store.commit("tag/setTagClickType", "treasure");
+            store.commit("tag/setTagClickType", {
+              type: "treasure",
+              data: tag,
+            });
           } else if (tag.type == "applet_link") {
             // wx.miniProgram.navigateTo({url: `/pages/shared/shared?img_url=${encodeURIComponent(uploadRes.data.url)}&companyId=${this.serve.info.companyId}&shareImg=${encodeURIComponent(this.serve.info.shareWxQrCode)}&vrLink=${encodeURIComponent(`${window.location.origin}${location.pathname}?m=${this.$config.projectNum}`)}`})
+          } 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}`);
           }
         });
       });
@@ -247,13 +274,16 @@ onMounted(() => {
     });
 
   app.use("TourPlayer");
-  app.Scene.lock()
+  if (!hadVideo.value) {
+    app.Scene.lock();
+  }
   app.Scene.on("ready", () => {
     show.value = true;
   });
   app.Scene.on("loaded", (pano) => {
     refMiniMap.value = "[xui_min_map]";
     store.commit("setFloorId", pano.floorIndex);
+    app.resource.tags( `${process.env.VUE_APP_RESOURCE_URL}cdf/hot/${browser.getURLParam("m")}/hot.json`)
     useMusicPlayer();
   });
   app.Scene.on("panorama.videorenderer.resumerender", () => {
@@ -273,7 +303,7 @@ onMounted(() => {
     }
     dataLoaded.value = true;
   });
-  app.store.on("tags", async (tags) => {
+  app.store.on("tags", (tags) => {
     store.commit("tag/load", tags);
   });
   app.Camera.on("mode.beforeChange", ({ fromMode, toMode, floorIndex }) => {
@@ -397,7 +427,7 @@ onMounted(() => {
     transition: all 0.3s cubic-bezier(0.35, 0.32, 0.65, 0.63);
     // pointer-events: none;
     .tag-commodity {
-      width: 210px;
+      width: 230px;
       height: 76px;
       background: rgba(255, 255, 255, 0.8);
       box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
@@ -442,7 +472,7 @@ onMounted(() => {
       }
       .tag-info {
         padding: 0 0 0 76px;
-        font-size: 14px;
+        font-size: 12px;
       }
     }
     &.show {

+ 8 - 2
src/components/Controls/Panel/Main.vue

@@ -23,7 +23,7 @@
         <div class="h3">專櫃導航</div>
         <div class="swiper-container" id="sw-navigation">
           <ul class="swiper-wrapper">
-            <li class="swiper-slide" v-for="(item, i) in brandlist" :key="i">
+            <li class="swiper-slide" @click.stop="onClickShop(item)" v-for="(item, i) in brandlist" :key="i">
               <img :src="item.shopLogo" alt="" />
               <div>{{ item.shopName }}</div>
             </li>
@@ -218,11 +218,17 @@ const getCategorylist = async () => {
 };
 
 const onClickCategory = (item) => {
-  console.log(item);
   currentCategory.value.id = item.id;
   currentCategory.value.categoryName = item.categoryName;
 };
 
+const onClickShop = (item) => {
+  console.log('item',item);
+  window.location.href = "".concat(window.location.pathname, "?").concat(`m=${item.sceneUrl}&novideo=1`);
+};
+
+
+
 watch(
   () => currentCategory,
   (val, old) => {

+ 46 - 10
src/components/Tags/goods-list.vue

@@ -1,20 +1,22 @@
 <template>
   <transition mode="out-in" appear>
-    <div class="goodlist" v-show="tagtype == 'goodlist'">
+    <div class="goodlist" v-show="tagclick.type == 'goodlist'">
       <div class="head-pages">
         <div>
           <span>{{ current + 1 }}</span
-          ><span>/9</span>
+          ><span>/{{tagclick.data.products?tagclick.data.products.length:'-'}}</span>
         </div>
         <ui-icon @click.stop="emit('close')" type="state_f"></ui-icon>
       </div>
       <div class="swiper-container" id="goodlist">
         <ul class="swiper-wrapper">
-          <li class="swiper-slide" v-for="(i, index) in 4" :key="index">
-            <div :style="{ backgroundImage: `url(${require('@/assets/images/loading.jpg')})` }" class="img"></div>
+          <li class="swiper-slide" v-for="(i, index) in tagclick.data.products" :key="index">
+            <div :style="{ backgroundImage: `url(${i.pic})` }" class="img"></div>
             <div class="info">
-              <p>這裏是商品標題最長限製十五個字</p>
-              <div><span>¥</span><span>3688</span></div>
+              <p>{{ i.name }}</p>
+              <div>
+                <span>¥</span><span>{{ i.price }}</span>
+              </div>
               <ul>
                 <li v-for="(item, index) in 3" :key="index">
                   <span>型號:</span>
@@ -23,8 +25,8 @@
               </ul>
             </div>
             <div class="goods-button">
-              <div>查看詳情</div>
-              <div>加入購物車</div>
+              <div @click.stop="viewDetail(i)">查看詳情</div>
+              <div @click.stop="addCart(i)">加入購物車</div>
             </div>
           </li>
         </ul>
@@ -37,14 +39,47 @@
 import { onMounted, watch, computed, defineEmits, ref, defineProps, nextTick } from "vue";
 import { useApp, getApp } from "@/app";
 import { useStore } from "vuex";
+import * as apis from "@/apis/index.js";
+import { Loading } from '@/global_components/'
+
+// get_product_info
 const store = useStore();
 
-const tagtype = computed(() => store.getters["tag/tagClickType"]);
+const tagclick = computed(() => store.getters["tag/tagClickType"]);
 
 const emit = defineEmits(["close"]);
 
 const current = ref(0);
 
+const viewDetail = (item)=>{
+    // wx.miniProgram.navigateTo({url: `/pages/shared/shared?img_url=${encodeURIComponent(uploadRes.data.url)}&companyId=${this.serve.info.companyId}&shareImg=${encodeURIComponent(this.serve.info.shareWxQrCode)}&vrLink=${encodeURIComponent(`${window.location.origin}${location.pathname}?m=${this.$config.projectNum}`)}`})
+}
+
+
+const addCart = async (item)=>{
+  Loading.show()
+
+  await apis.inCat({
+    accessToken:'',
+    skuId:'',
+    num: 1
+  })
+  Loading.hide()
+}
+
+
+const updateProductsById = async (idx) => {
+  Loading.show()
+  let res = await apis.get_product_info({
+    productId: tagclick.value.data.products[idx].id,
+  });
+
+  // let tempData = JSON.parse(JSON.stringify(tagclick.value))
+  
+  Loading.hide()
+
+};
+
 const brandScroll = () => {
   nextTick(() => {
     let t = setTimeout(() => {
@@ -68,6 +103,7 @@ const brandScroll = () => {
           },
           slideChange() {
             current.value = this.activeIndex;
+            updateProductsById(current.value);
           },
         },
       });
@@ -76,7 +112,7 @@ const brandScroll = () => {
 };
 
 onMounted(() => {
-    brandScroll();
+  brandScroll();
 });
 </script>
 

+ 2 - 2
src/components/Tags/treasure.vue

@@ -1,6 +1,6 @@
 <template>
   <transition mode="out-in">
-    <div class="treasure" v-if="tagtype == 'treasure'">
+    <div class="treasure" v-if="tagclick.type == 'treasure'">
       <div class="treasurecon">
         <p>恭喜您,找到寶藏!</p>
         <img :src="require('@/assets/images/icon/gifts_on.png')" alt="" />
@@ -16,7 +16,7 @@ import { useApp, getApp } from "@/app";
 import { useStore } from "vuex";
 const store = useStore();
 
-const tagtype = computed(() => store.getters["tag/tagClickType"]);
+const tagclick = computed(() => store.getters["tag/tagClickType"]);
 
 const emit = defineEmits(["close"]);
 

+ 2 - 2
src/components/Tags/waterfall.vue

@@ -1,6 +1,6 @@
 <template>
   <transition mode="out-in">
-    <div class="waterfall" v-if="tagtype == 'waterfall'">
+    <div class="waterfall" v-if="tagclick.type == 'waterfall'">
       <div class="waterfallcon">
         <div class="wfheader">
           <img :src="require('@/assets/images/icon/top5.png')" alt="">
@@ -28,7 +28,7 @@ import { useApp, getApp } from "@/app";
 import { useStore } from "vuex";
 const store = useStore();
 
-const tagtype = computed(() => store.getters["tag/tagClickType"]);
+const tagclick = computed(() => store.getters["tag/tagClickType"]);
 
 const emit = defineEmits(["close"]);
 

+ 4 - 1
src/store/modules/tag.js

@@ -9,7 +9,10 @@ export default {
         return {
             tagsList: null,
             iconsList: null,
-            tagClickType:'',
+            tagClickType: {
+                type:'',
+                data:{}
+            },
             timer: null,
             hotData: null,
             isEdit: false,