tangning преди 1 година
родител
ревизия
6e4bd788ed
променени са 48 файла, в които са добавени 925 реда и са изтрити 306 реда
  1. 3 2
      public/index.html
  2. 67 32
      src/app.vue
  3. 73 0
      src/assets/css/sd.scss
  4. BIN
      src/assets/images/christmas/Christmas_tree_bg@3x.png
  5. BIN
      src/assets/images/christmas/bar_bg01@3x.png
  6. BIN
      src/assets/images/christmas/bar_bg02@3x.png
  7. BIN
      src/assets/images/christmas/bg.png
  8. BIN
      src/assets/images/christmas/button@3x.png
  9. BIN
      src/assets/images/christmas/cancel@3x.png
  10. BIN
      src/assets/images/christmas/card_01@3x.png
  11. BIN
      src/assets/images/christmas/card_02@3x.png
  12. BIN
      src/assets/images/christmas/card_03@3x.png
  13. BIN
      src/assets/images/christmas/card_04@3x.png
  14. BIN
      src/assets/images/christmas/christmas_present.png
  15. BIN
      src/assets/images/christmas/icon_customer_service@3x.png
  16. BIN
      src/assets/images/christmas/icon_help@3x.png
  17. BIN
      src/assets/images/christmas/icon_other@3x.png
  18. BIN
      src/assets/images/christmas/icon_other_off@3x.png
  19. BIN
      src/assets/images/christmas/icon_other_on@3x.png
  20. BIN
      src/assets/images/christmas/icon_shopping@3x.png
  21. BIN
      src/assets/images/christmas/icon_shopping_together@3x.png
  22. BIN
      src/assets/images/christmas/liwu.png
  23. BIN
      src/assets/images/christmas/liwutext.png
  24. BIN
      src/assets/images/christmas/modal_bar_bg01@3x.png
  25. BIN
      src/assets/images/christmas/modal_bar_bg02@3x.png
  26. BIN
      src/assets/images/christmas/modal_bar_decorate@3x.png
  27. BIN
      src/assets/images/christmas/modal_bar_search_bar@3x.png
  28. BIN
      src/assets/images/christmas/santa_claus.png
  29. BIN
      src/assets/images/christmas/search_bar_bg@3x.png
  30. BIN
      src/assets/images/christmas/zhixie.png
  31. BIN
      src/assets/images/sdbg.png
  32. BIN
      src/assets/images/sdbg1.png
  33. 9 0
      src/assets/images/snow01.svg
  34. 9 0
      src/assets/images/snow02.svg
  35. 9 0
      src/assets/images/snow03.svg
  36. 1 0
      src/assets/images/xh.svg
  37. 90 0
      src/components/Controls/Christmas.vue
  38. 503 232
      src/components/Controls/Panel/Main.vue
  39. 4 4
      src/components/Information/View.Mobile.vue
  40. 137 23
      src/components/Tags/treasure.vue
  41. 2 1
      src/components/openVideo/index.vue
  42. 1 0
      src/locales/en.json
  43. 1 0
      src/locales/zh_CN.json
  44. 1 0
      src/locales/zh_HK.json
  45. 8 8
      src/main.js
  46. 2 0
      src/utils/party.min.js
  47. 4 3
      src/views/Panel.vue
  48. 1 1
      vue.config.js

+ 3 - 2
public/index.html

@@ -7,9 +7,10 @@
     <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="//at.alicdn.com/t/c/font_4368054_gietdvllfym.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.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>Duty Zero by cdf</title>
@@ -25,7 +26,7 @@
     <script src="<%= BASE_URL %><%= VUE_APP_STATIC_DIR %>/static/lib/swiper/swiper.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="https://cdn.jsdelivr.net/npm/party-js@latest/bundle/party.min.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.81"></script>

+ 67 - 32
src/app.vue

@@ -4,12 +4,17 @@
   <Guide />
 
   <div class="ui-view-layout" :class="{ show: show }" is-mobile="true">
+        
+    <!-- 雪花装饰 -->
+    <div class="personalStyle">
+        <christmas/>
+    </div>
     <div class="scene" ref="scene$"></div>
     <template v-if="dataLoaded">
-      <Information v-if="!isshoppingguide" />
+      <!-- <Information v-if="!isshoppingguide" /> -->
       <Control />
 
-      <teleport v-if="refMiniMap && player.showWidgets" :to="refMiniMap">
+      <!-- <teleport v-if="refMiniMap && player.showWidgets" :to="refMiniMap">
         <span :class="{ gudieDisabled: isshoppingguide && role != 'leader' }" class="button-switch" @click.stop="toggleMap">
           <ui-icon type="show_map_collect"></ui-icon>
         </span>
@@ -17,7 +22,7 @@
           <ui-icon type="show_3d_normal"></ui-icon>
           <span> {{ $t('mode.dollhouseModel') }}</span>
         </div>
-      </teleport>
+      </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">
@@ -51,6 +56,7 @@ import GoodsList from '@/components/Tags/goods-list.vue';
 import Treasure from '@/components/Tags/treasure.vue';
 //waterfall和exhibits公用
 import Waterfall from '@/components/Tags/waterfall.vue';
+import Christmas from '@/components/Controls/Christmas.vue';
 
 import Information from '@/components/Information';
 import Control from '@/components/Controls/Control.Mobile.vue';
@@ -75,6 +81,8 @@ const { t } = useI18n({ useScope: 'global' });
 
 const store = useStore();
 
+const isMobile = browser.isMobile();
+
 let jumpNewScene = (sceneFirstView) => {
   let url = window.location.href;
 
@@ -150,18 +158,18 @@ let VIDEOSCENELIST = [
   'KJ-eur-WR9V913f23',
   'KJ-eur-MBJF95ae80'
 ]
-console.log('result:', Cache.get('HIDENVIDEOEXPIRES'));
+console.log('result:',isMobile, Cache.get('HIDENVIDEOEXPIRES'));
 
-if (!Cache.get('HIDENVIDEOEXPIRES')) {
-  if ((VIDEOSCENELIST.includes(browser.getURLParam('m')) && (browser.getURLParam('pose') == 'pano:188,qua:0.0013,-0.6099,0.001,0.7925'))||
-  (VIDEOSCENELIST.includes(browser.getURLParam('m')) && (browser.getURLParam('pose') == 'pano:58,qua:0,-0.7979,0,0.6028'))) {
+if (!Cache.get('HIDENVIDEOEXPIRES') && isMobile) {
+  // if ((VIDEOSCENELIST.includes(browser.getURLParam('m')) && (browser.getURLParam('pose') == 'pano:188,qua:0.0013,-0.6099,0.001,0.7925'))||
+  // (VIDEOSCENELIST.includes(browser.getURLParam('m')) && (browser.getURLParam('pose') == 'pano:58,qua:0,-0.7979,0,0.6028'))) {
     // Cache.set('HIDENVIDEOEXPIRES', 'yes', 1);
     Cache.set('HIDENVIDEOEXPIRES', 'yes', 60 * 8 * 60);
     hadVideo.value = false;
   } else {
     hadVideo.value = true;
   }
-}
+// }
 
 if (browser.getURLParam('role')) {
   hadVideo.value = true;
@@ -327,10 +335,22 @@ const guideclicktag = (tag) => {
 const getCurrentHotJson = ()=>{
   let lang = browser.getURLParam('lang')
   let jsonname = lang == 'zh_CN'?'hot_eshop_cn':(lang == 'zh_HK'?'hot_eshop_zh':'hot_eshop_en')
+  if(metadata.value.cdfRegionData.region == 'AM'){
+      jsonname = 'hot'
+    }
   return `https://glp-vr.cdfmembers.com/cdf/hot/${browser.getURLParam('m')}/${jsonname}.json?rnd=${Math.random()}`
+
 }
 
 onMounted(async () => {
+  //判断皮肤
+  // let link = document.createElement("link");
+  // link.type = "text/css";
+  // link.id = "theme";
+  // link.rel = "stylesheet";
+  // link.href = "./assets/css/sd.scss";
+  // document.getElementsByTagName("head")[0].appendChild(link);
+
   apis.burying_point({ type: 0 });
 
   app = createApp({
@@ -351,6 +371,7 @@ onMounted(async () => {
   app
     .use('TagView', {
       render(data) {
+        console.log('dataTagView',data);
         if (data.type == 'waterfall' || data.type == 'exhibits') {
           return `<span class="tag-icon ${data.type == 'waterfall'?'waterfall':''} animate" style="background-image:url({{icon}})"></span>`;
         } else if (data.type == 'coupon') {
@@ -374,7 +395,8 @@ onMounted(async () => {
           let priceMax = isFinite(Math.max.apply(null, arr)) ? Math.max.apply(null, arr) : 0;
           let price = priceMin == priceMax ? priceMax : `${priceMin}-${priceMax}`;
           let range = price==0?'':`${data.products[0] ? data.products[0].symbol : 'MOP$'} ${price} |`;
-          return `<span class="tag-icon animate" style="background-image:url({{icon}})"></span>
+          return `<span class="tag-icon animate" style="background-image:url(${data.brand?.brandLogo?data.brand.brandLogo : data.icon})"></span>
+                  <span class="tag-icon animate" style="display:${data.brand?.outlineImage?'inline-block':'none'};background-image:url(${data.brand && data.brand.outlineImage});position: absolute;top: 0;left: 0;"></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'>
@@ -394,26 +416,31 @@ onMounted(async () => {
         var tag = e.data;
         // 聚焦當前點擊的熱點
         view.focus(tag.sid).then(() => {
-          if (tag.type == 'coupon') {
-            try {
-              if (isshoppingguide.value) {
-                return;
-              }
-              document.querySelector(`[data-tag-id="${tag.sid}"] .tag-icon`).style.display = 'none';
-              document.querySelector(`[data-tag-id="${tag.sid}"]`).style.pointerEvents = 'none';
-
-              let hotcontent = typeof tag.hotContent == 'string' ? JSON.parse(tag.hotContent) : tag.hotContent;
-              browser.openLink(
-                '/subPackage/pages/activity/activity?pageId=' + hotcontent.couponLink,
-                `${metadata.value?.cdfProductSource?.cdfHost}/shop/${metadata.value?.cdfProductSource?.cdfMchId}/showactivity?pageId=${hotcontent.couponLink}`,
-                `/pages/showactivity/showactivity?pageId=${hotcontent.couponLink}`,
-                `${metadata.value?.cdfProductSource?.cdfHostPc}/showactivity/${hotcontent.couponLink}`,
-              );
-
-              apis.burying_point({ type: 2 });
-            } catch (error) {
-              console.error('点击优惠券操作出错:', error);
-            }
+          if (tag.type == 'coupon') 
+          {
+            store.commit('tag/setTagClickType', {
+              type: 'treasure',
+              data: tag,
+            })
+            // try {
+            //   if (isshoppingguide.value) {
+            //     return;
+            //   }
+            //   document.querySelector(`[data-tag-id="${tag.sid}"] .tag-icon`).style.display = 'none';
+            //   document.querySelector(`[data-tag-id="${tag.sid}"]`).style.pointerEvents = 'none';
+
+            //   let hotcontent = typeof tag.hotContent == 'string' ? JSON.parse(tag.hotContent) : tag.hotContent;
+            //   browser.openLink(
+            //     '/subPackage/pages/activity/activity?pageId=' + hotcontent.couponLink,
+            //     `${metadata.value?.cdfProductSource?.cdfHost}/shop/${metadata.value?.cdfProductSource?.cdfMchId}/showactivity?pageId=${hotcontent.couponLink}`,
+            //     `/pages/showactivity/showactivity?pageId=${hotcontent.couponLink}`,
+            //     `${metadata.value?.cdfProductSource?.cdfHostPc}/showactivity/${hotcontent.couponLink}`,
+            //   );
+
+            //   apis.burying_point({ type: 2 });
+            // } catch (error) {
+            //   console.error('点击优惠券操作出错:', error);
+            // }
           }
           else if (tag.type == 'point_jump') {
             let hotcontent = typeof tag.hotContent == 'string' ? JSON.parse(tag.hotContent) : tag.hotContent;
@@ -554,9 +581,10 @@ onMounted(async () => {
   app.store.on('metadata', (metadata) => {
     store.commit('scene/load', metadata);
     console.log(metadata,'metadatametadatametadata');
-    if (!metadata.controls.showMap) {
-      app.MinMap.hide(true);
-    }
+    // if (!metadata.controls.showMap) { //
+    //   app.MinMap.hide(true);
+    // }
+    app.MinMap.hide(true);
     dataLoaded.value = true;
   });
   app.store.on('tags', (tags) => {
@@ -641,6 +669,13 @@ onMounted(async () => {
   top: 2.3rem;
   pointer-events: none;
 }
+.personalStyle{
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  z-index: 2;
+  pointer-events: none;
+}
 .tabs {
   pointer-events: auto;
   position: relative;

+ 73 - 0
src/assets/css/sd.scss

@@ -0,0 +1,73 @@
+:root {
+    --maxBntbg : url('~@/assets/images/christmas/bar_bg01@3x.png'); // 长的背景图
+    --minBntbg : url('~@/assets/images/christmas/bar_bg02@3x.png'); // 短的背景图
+    --receiveBntbg  : url('~@/assets/images/christmas/button@3x.png'); // 领取按钮
+    --searchBg : url('~@/assets/images/christmas/modal_bar_search_bar@3x.png'); // 搜索背景图
+    --topBorder  : url('~@/assets/images/christmas/modal_bar_decorate@3x.png'); // 顶部雪
+    --contentImg :url('~@/assets/images/christmas/modal_bar_bg01@3x.png'); // 背景
+    --listImg :url('~@/assets/images/christmas/modal_bar_bg02@3x.png'); // 背景
+    --topbgImg :url('~@/assets/images/sdbg.png'); // 背景
+}
+#app{
+    .ui-view-layout{
+        .christmas{
+            .topbg{
+                background-image: var(--topbgImg);
+                // background-size: 100% 100%;
+                // background-repeat: no-repeat;
+                background-color: transparent;
+                background-repeat: repeat;
+                background-size: contain;
+            }
+        }
+        .othermenu{
+            background-image: var(--minBntbg);
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+            background-color: transparent;
+            border: none;
+        }
+        .menu{
+            background-image: var(--maxBntbg);
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+            background-color: transparent;
+            border: none;
+        }
+    }
+    .shoplistDiv{
+        .shoplist{
+            background-image: var(--contentImg);
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+            background-color: transparent;
+            // position: relative;
+            &::after{
+                content: ' ';
+                height: 33px;
+                width: calc(100% - 10px);
+                background-image: var(--topBorder);
+                background-size: 100% 100%;
+                background-repeat: no-repeat;
+                background-color: transparent;
+                position: absolute;
+                top: -12px;
+                left: 5px;
+            }
+            .search{
+                padding: 10px 20px;
+                height: 50px;
+                background-image: var(--searchBg);
+                background-size: 100% 100%;
+                background-repeat: no-repeat;
+                background-color: transparent;
+            }
+            .brandList{
+                background-image: var(--listImg);
+                background-size: 100% 100%;
+                background-repeat: no-repeat;
+                background-color: transparent;
+            }
+        }
+    }
+}

BIN
src/assets/images/christmas/Christmas_tree_bg@3x.png


BIN
src/assets/images/christmas/bar_bg01@3x.png


BIN
src/assets/images/christmas/bar_bg02@3x.png


BIN
src/assets/images/christmas/bg.png


BIN
src/assets/images/christmas/button@3x.png


BIN
src/assets/images/christmas/cancel@3x.png


BIN
src/assets/images/christmas/card_01@3x.png


BIN
src/assets/images/christmas/card_02@3x.png


BIN
src/assets/images/christmas/card_03@3x.png


BIN
src/assets/images/christmas/card_04@3x.png


BIN
src/assets/images/christmas/christmas_present.png


BIN
src/assets/images/christmas/icon_customer_service@3x.png


BIN
src/assets/images/christmas/icon_help@3x.png


BIN
src/assets/images/christmas/icon_other@3x.png


BIN
src/assets/images/christmas/icon_other_off@3x.png


BIN
src/assets/images/christmas/icon_other_on@3x.png


BIN
src/assets/images/christmas/icon_shopping@3x.png


BIN
src/assets/images/christmas/icon_shopping_together@3x.png


BIN
src/assets/images/christmas/liwu.png


BIN
src/assets/images/christmas/liwutext.png


BIN
src/assets/images/christmas/modal_bar_bg01@3x.png


BIN
src/assets/images/christmas/modal_bar_bg02@3x.png


BIN
src/assets/images/christmas/modal_bar_decorate@3x.png


BIN
src/assets/images/christmas/modal_bar_search_bar@3x.png


BIN
src/assets/images/christmas/santa_claus.png


BIN
src/assets/images/christmas/search_bar_bg@3x.png


BIN
src/assets/images/christmas/zhixie.png


BIN
src/assets/images/sdbg.png


BIN
src/assets/images/sdbg1.png


Файловите разлики са ограничени, защото са твърде много
+ 9 - 0
src/assets/images/snow01.svg


Файловите разлики са ограничени, защото са твърде много
+ 9 - 0
src/assets/images/snow02.svg


Файловите разлики са ограничени, защото са твърде много
+ 9 - 0
src/assets/images/snow03.svg


Файловите разлики са ограничени, защото са твърде много
+ 1 - 0
src/assets/images/xh.svg


+ 90 - 0
src/components/Controls/Christmas.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="christmas">
+    <div class="snow">
+      <div v-for="item of startXh" :key="item" class="snowflake"></div>
+    </div>
+    <div class="topbg">
+      <!-- <img :src="require('@/assets/images/sdbg.png')" alt=""> -->
+    </div> 
+    <img class="tree" :src="require('@/assets/images/christmas/Christmas_tree_bg@3x.png')" alt="">
+  </div>
+</template>
+
+<script setup>
+import { useApp } from '@/app';
+import { useStore } from "vuex";
+import { onMounted, nextTick, reactive, ref } from "vue";
+const startXh = ref(0)
+onMounted(() => {
+  useApp().then(async (sdk) => {
+  });
+  nextTick(() => {
+    setTimeout(()=>{
+      startXh.value = 100
+    },2000)
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.christmas{
+    height: 100%;
+    width: 100%;
+    position: relative;
+    #canvas{
+        height: 100%;
+        width: 100%;
+    }
+}
+.topbg{
+  width: 100%;
+  height: 4rem;
+  // img{
+  //   width: 100%;
+  // }
+}
+.tree{
+  width: auto;
+  height: 144px;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
+.snowflake {
+  --size: 4vh;
+  width: var(--size);
+  height: var(--size);
+  background: url(~@/assets/images/snow01.svg);
+  background-size: 100%;
+  // background: #fff;
+  border-radius: 50%;
+  position: absolute;
+  top: -5vh;
+}
+
+@keyframes snowfall {
+  0% {
+    transform: translate3d(var(--left-ini), 0, 0);
+  }
+  100% {
+    transform: translate3d(var(--left-end), 100vh, 0);
+  }
+}
+
+@for $i from 1 through 100 {
+  .snowflake:nth-child(#{$i}) {
+    --size: #{random(10) * 0.2}vw;
+    --left-ini: #{random(20) - 10}vw;
+    --left-end: #{random(20) - 10}vw;
+    left: #{random(100)}vw;
+    animation: snowfall #{5 + random(10)}s linear infinite;
+    animation-delay: #{random(10)}s;
+  }
+}
+
+/* added small blur every 6 snowflakes*/
+.snowflake:nth-child(6n) {
+  filter: blur(1px);
+}
+
+</style>

Файловите разлики са ограничени, защото са твърде много
+ 503 - 232
src/components/Controls/Panel/Main.vue


+ 4 - 4
src/components/Information/View.Mobile.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="header" @touchmove.prevent>
     <div class="left" v-show="player.showWidgets" :class="{ show: showMusic }">
-      <div class="music" @click.stop="onMusicClick">
+      <!-- <div class="music" @click.stop="onMusicClick">
         <img :src="require(`@/assets/images/icon/${showMusicPlaying ? 'music_on@2x' : 'music_off@2x'}.png`)" alt="" />
-      </div>
+      </div> -->
     </div>
-    <div class="title" :class="{ up: player.showDescription, drak: mode != 'panorama', empty: !description }"
+    <!-- <div class="title" :class="{ up: player.showDescription, drak: mode != 'panorama', empty: !description }"
       @click="onShowDescription" v-show="player.showWidgets">
       <div>
         <span>
@@ -13,7 +13,7 @@
         </span>
         <i class="iconfont icon-pull-down"></i>
       </div>
-    </div>
+    </div> -->
     <div class="right" :class="{ more: player.showMore }" v-show="player.showWidgets" @click="onShowMore">
       <img :src="require(`@/assets/images/icon/${player.lang}.png`)" alt="" />
       <keep-alive>

+ 137 - 23
src/components/Tags/treasure.vue

@@ -2,40 +2,106 @@
   <transition mode="out-in">
     <div class="treasure" v-if="tagclick.type == 'treasure'">
       <div class="treasurecon">
-        <p>恭喜您,找到寶藏!</p>
-        <img :src="require('@/assets/images/icon/gift.gif')" alt="" />
-        <div @click.stop="goto_now" class="btn">立即前往</div>
+        <!-- <p>恭喜您,找到寶藏!</p> -->
+        <img
+          class="liwutext"
+          @click="confetti($event)"
+          ref="partyRef"
+          :src="require('@/assets/images/christmas/liwutext.png')"
+          alt=""
+        />
+        <div class="hezi">
+          <img
+            class="liwubg"
+            :src="require('@/assets/images/christmas/bg.png')"
+            alt=""
+          />
+          <img
+            class="liwubg1"
+            :src="require('@/assets/images/christmas/liwu.png')"
+            alt=""
+          />
+        </div>
+        <div
+          @click.stop="goto_now($event)"
+          onmousedown="party.confetti(this)"
+          class="btn"
+        >
+          点击领取
+        </div>
       </div>
+      <img class="zhixie" v-if="zhixieShow" :src="zhixie" alt="">
       <ui-icon class="close" @click.stop="emit('close')" type="close"></ui-icon>
-
     </div>
   </transition>
 </template>
 
 <script setup>
-import { onMounted, watch, defineEmits, computed, ref, nextTick, defineProps } from "vue";
+import {
+  onMounted,
+  watch,
+  defineEmits,
+  computed,
+  ref,
+  nextTick,
+  defineProps,
+  watchEffect,
+} from "vue";
 import { useApp, getApp } from "@/app";
 import { useStore } from "vuex";
 import browser from "@/utils/browser";
-
+import "@/utils/party.min.js";
+console.error(party);
 const store = useStore();
-
+const partyRef = ref(null);
 const tagclick = computed(() => store.getters["tag/tagClickType"]);
-
+const zhixie = require('@/assets/images/christmas/zhixie.png')
+const zhixieShow = ref(false)
 const emit = defineEmits(["close"]);
-
-const goto_now = () => {
-
+onMounted(() => {
+  nextTick(() => {
+    partyRef.value.addEventListener("click", function (e) {
+      party.confetti(this,{
+        count: party.variation.range(10, 60),
+        size: party.variation.range(0.5, 2),
+      });
+    });
+  });
+});
+watch(
+  () => tagclick.value.type,
+  (val) => {
+    if(val == 'treasure'){
+      nextTick(() => {
+        setTimeout(()=>{
+          zhixieShow.value = true
+          setTimeout(()=>{
+            zhixieShow.value = false
+          },1500)
+          // console.error('partyRef',partyRef.value);
+          // var e = document.createEvent('MouseEvents')
+          // console.error('partyRef',e);
+          // partyRef.value.dispatchEvent(e);
+          // partyRef.value.dispatchEvent(e);
+          // partyRef.value.dispatchEvent(e);
+        },1000)
+      })
+    }
+})
+const confetti = (e) =>{
+  party.confetti(e);
+  party.confetti(e);
+  party.confetti(e);
+}
+const goto_now = (e) => {
   let tag = {};
-
   try {
     tag = JSON.parse(tagclick.value.data.hotContent);
     browser.openLink(
       "/subPackage/pages/activity/activity?pageId=" + tag.couponLink,
       `https://m.cdfmembers.com/shop/600667208/showactivity?pageId=${tag.couponLink}`,
       `/pages/showactivity/showactivity?pageId=${tag.couponLink}`,
-      `https://m.cdfmembers.com/shop/600667208/showactivity?pageId=${tag.couponLink}`,
-
+      `https://m.cdfmembers.com/shop/600667208/showactivity?pageId=${tag.couponLink}`
     );
     emit("close");
   } catch (error) {
@@ -61,10 +127,37 @@ const goto_now = () => {
   align-items: center;
   flex-direction: column;
   justify-content: center;
+  .zhixie{
+    position: absolute;
+    top:0;
+    bottom:0;
+    left:0;
+    width: 100%;
+  }
   .treasurecon {
     text-align: center;
-    width: 90%;
-    max-width: 500px;
+    width: 10rem;
+    max-width: 13.4rem;
+    .liwutext {
+      position: absolute;
+      top: 1.5rem;
+      left: calc(50% - 3.7rem);
+      width: 7.5rem;
+    }
+    .hezi {
+      width: 10rem;
+      position: relative;
+      top: 1rem;
+      .liwubg {
+        position: absolute;
+        width: 9.6rem;
+        z-index: -1;
+        animation: 10s gift linear infinite normal;
+      }
+      .liwubg1 {
+        width: 10rem;
+      }
+    }
     p {
       height: 33px;
       font-size: 24px;
@@ -75,24 +168,35 @@ const goto_now = () => {
     }
     > img {
       width: 100%;
-      margin: 12% auto;
+      margin: 0 auto;
     }
 
     .btn {
-      max-width: 122px;
+      max-width: 4.27rem;
       margin: 0 auto;
-      height: 32px;
-      line-height: 32px;
+      height: 0.8rem;
       color: #ed5d18;
-      background: linear-gradient(180deg, #fbecc7 0%, #fff8e8 6%, #f8e0b4 15%, #f1c387 52%, #fad78c 87%, #f8e2ad 94%, #fdde8e 100%);
+      background: url("~@/assets/images/christmas/button@3x.png");
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      background-color: transparent;
+      color: #fff;
+      // background: linear-gradient(180deg, #fbecc7 0%, #fff8e8 6%, #f8e0b4 15%, #f1c387 52%, #fad78c 87%, #f8e2ad 94%, #fdde8e 100%);
       border-radius: 16px;
-      font-size: 16px;
       font-weight: bold;
       z-index: 99;
+      font-size: 0.48rem;
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 500;
+      color: #ffffff;
+      line-height: 0.8rem;
+      position: relative;
+      z-index: 2;
+      top: 100px;
     }
   }
 
-  .close{
+  .close {
     position: absolute;
     right: 30px;
     font-size: 20px;
@@ -100,4 +204,14 @@ const goto_now = () => {
     color: #fff;
   }
 }
+@keyframes gift {
+  0% {
+    transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+  }
+}
 </style>

+ 2 - 1
src/components/openVideo/index.vue

@@ -22,7 +22,7 @@ const { t } = useI18n({ useScope: 'global' })
 const openvideo$ = ref(null);
 
 const videourl = ref(null);
-const countdown = ref(5);
+const countdown = ref(6);
 
 const timer = ref(null);
 
@@ -130,6 +130,7 @@ onMounted(() => {
     vertical-align: middle;
     position: relative;
     z-index: 9;
+    object-fit: cover;
   }
   .jump {
     position: absolute;

+ 1 - 0
src/locales/en.json

@@ -22,6 +22,7 @@
     "cdfTitle": "cdf Beauty",
     "mode":"Live",
     "shopping":"Cart",
+    "other":"Other",
     "guide":"Guide",
     "guidelist":"List",
     "noResult":"No results found",

+ 1 - 0
src/locales/zh_CN.json

@@ -22,6 +22,7 @@
     "cdfTitle": "cdf Beauty",
     "mode":"一起逛",
     "shopping":"购物",
+    "other":"其他",
     "guide":"专柜导航",
     "guidelist":"专柜列表",
     "noResult":"暂无结果",

+ 1 - 0
src/locales/zh_HK.json

@@ -22,6 +22,7 @@
     "cdfTitle": "cdf Beauty",
     "mode":"一起逛",
     "shopping":"購物",
+    "other":"其他",
     "guide":"專櫃導航",
     "guidelist":"專櫃列表",
     "noResult":"暫無結果",

+ 8 - 8
src/main.js

@@ -6,15 +6,15 @@ import store from "./store";
 import App from "./app.vue";
 import browser from "@/utils/browser";
 import i18n, { getLocale, setI18nLanguage, loadLocaleMessages } from './i18n'
-
+import './assets/css/sd.scss'
 console.log('2023.10.24 10:35');
 
-if (!window.location.search) {
-  window.location.href = "/index.html?m=KJ-eur-MBJF95ae80&pose=pano:58,qua:0,-0.7979,0,0.6028&lang=zh_HK";
-} else if (!browser.hasURLParam("pose") && browser.getURLParam("m") == "KJ-eur-MBJF95ae80") {
-  let url = window.location.href + `&pose=pano:58,qua:0,-0.7979,0,0.6028&lang=zh_HK`;
-  window.location.href = url;
-} else {
+// if (!window.location.search) {
+//   window.location.href = "/index.html?m=KJ-eur-MBJF95ae80&pose=pano:58,qua:0,-0.7979,0,0.6028&lang=zh_HK";
+// } else if (!browser.hasURLParam("pose") && browser.getURLParam("m") == "KJ-eur-MBJF95ae80") {
+//   let url = window.location.href + `&pose=pano:58,qua:0,-0.7979,0,0.6028&lang=zh_HK`;
+//   window.location.href = url;
+// } else {
 
 
   const local = getLocale()
@@ -29,4 +29,4 @@ if (!window.location.search) {
   })
 
 
-}
+// }

Файловите разлики са ограничени, защото са твърде много
+ 2 - 0
src/utils/party.min.js


+ 4 - 3
src/views/Panel.vue

@@ -185,9 +185,10 @@ onMounted(() => {
 <style lang="scss" scoped>
 .panel {
   position: fixed;
-  top: calc(100% - 90px);
-  left: 0.4rem;
-  right: 0.4rem;
+  top: calc(100% - 150px);
+  width: calc(100% - 54px);
+  left: 27px;
+  right: 27px;
   z-index: 22;
 }
 </style>

+ 1 - 1
vue.config.js

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