開場視頻功能

src/apis/index.js

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

src/app.vue

@@ -1,5 +1,6 @@
 <template>
-  <LoadingLogo :thumb="true" />
+  <LoadingLogo v-if="hadVideo" :thumb="true" />
+  <OpenVideo v-else @close="hadVideo = true" />
 
   <div class="ui-view-layout" :class="{ show: show }" is-mobile="true">
     <div class="scene" ref="scene$"></div>
@@ -51,16 +52,19 @@ 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 { 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", "");
 };
@@ -78,6 +82,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 show = ref(false);
 const dataLoaded = ref(false);
 const refMiniMap = ref(null);
@@ -92,6 +97,14 @@ const resize = () => {
     });
   }
 };
+
+watch(()=>hadVideo.value,
+(val,old)=>{
+  if (val) {
+    app.Scene.unlock()
+  }
+});
+
 watch(
   () => player.value.showMap,
   (val, old) => {
@@ -157,7 +170,7 @@ const onClickTagInfo = (el) => {
 };
 
 onMounted(() => {
-  const app = createApp({
+  app = createApp({
     num: browser.getURLParam("m"),
     dom: scene$.value,
     mobile: true,
@@ -233,6 +246,7 @@ onMounted(() => {
     });
 
   app.use("TourPlayer");
+  app.Scene.lock()
   app.Scene.on("ready", () => {
     show.value = true;
   });
@@ -259,10 +273,6 @@ onMounted(() => {
     dataLoaded.value = true;
   });
   app.store.on("tags", async (tags) => {
-    // let res = await apis.get_tags_list({
-    //   num: browser.getURLParam("m"),
-    // });
-    // console.log(res, "============tags");
     store.commit("tag/load", tags);
   });
   app.Camera.on("mode.beforeChange", ({ fromMode, toMode, floorIndex }) => {

src/components/openVideo/index.vue

@@ -0,0 +1,67 @@
+<template>
+    <transition appear name="custom-classes-transition" leave-active-class="animated fadeOut faster">
+        <div class="open-video">
+            <video ref="openvideo$" controls autoplay :src="videourl"></video>
+            <div @click.stop="emit('close')" class="jump">跳過</div>
+        </div>
+    </transition>
+</template>
+<script setup>
+import { ref, watch, defineEmits, computed, onMounted,nextTick, defineProps } from 'vue'
+import * as apis from "@/apis/index.js";
+
+const openvideo$ = ref(null);
+const videourl = ref(null);
+
+
+const emit = defineEmits(["close"]);
+
+onMounted(()=>{
+
+    nextTick(async ()=>{
+        let res = await apis.get_video()
+        videourl.value = res.data.videoUrl
+        openvideo$.value.addEventListener('ended',()=>{
+            emit('close')
+        })
+
+    })
+})
+
+</script>
+<style lang="scss" scoped>
+.open-video{
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: table;
+    table-layout: fixed;
+    background: rgba(255, 255, 255, 1);
+    >video{
+        width: 100%;
+        height: 100%;
+        display: table-cell;
+        text-align: center;
+        vertical-align: middle;
+    }
+    .jump{
+        position: absolute;
+        right: 15px;
+        top: 20px;
+        width: 56px;
+        height: 28px;
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 16px;
+        text-align: center;
+        line-height: 28px;
+        z-index: 999;
+    }
+}
+
+
+
+</style>