跳转到遗存场景

README.md

@@ -7,9 +7,7 @@
 appId: wx0bc995dace29b2ba
 
 ## 待办
-其他遗存 详情页
-
-加载页先不弄了
+遗存链接
 
 登录功能
 

src/components/IframeWrap.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="iframe-wrap">
+    <iframe
+      :src="props.url"
+      frameborder="0"
+      allow="fullscreen"
+    />
+    <button
+      class="back"
+      @click="emit('back')"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const emit = defineEmits(['back'])
+
+const props = defineProps({
+  url: {
+    type: String,
+    required: true,
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.iframe-wrap{
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  >iframe{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+  >button.back{
+    position: absolute;
+    left: 15px;
+    top: 20px;
+    width: 60px;
+    height: 60px;
+    background-image: url(@/assets/images/icon_back.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+}
+</style>

src/components/OtherRelicDetail.vue

@@ -18,12 +18,33 @@
       draggable="false"
     >
     <div class="btn-group">
-      <button>全景浏览</button>
-      <button>场景漫游</button>
+      <button
+        v-if="data.link.includes('4dkankan')"
+        @click="iframeUrl = props.data.link, isShowIframeWrap = true"
+      >
+        场景漫游
+      </button>
+      <button
+        v-else
+        @click="router.push({
+          name: 'IframeWrap',
+          query: {
+            url: encodeURI(data.link)
+          }
+        })"
+      >
+        全景浏览
+      </button>
     </div>
     <div class="desc">
       {{ props.data.description }}
     </div>
+
+    <IframeWrap
+      v-if="isShowIframeWrap"
+      :url="iframeUrl"
+      @back="isShowIframeWrap = false, iframeUrl = ''"
+    />
   </div>
 </template>
 
@@ -32,6 +53,7 @@ import { ref, computed, watch, onMounted, inject } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import BtnClose from '@/components/BtnClose.vue'
+import IframeWrap from '@/components/IframeWrap.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -48,6 +70,8 @@ const props = defineProps({
   }
 })
 
+const isShowIframeWrap = ref(false)
+const iframeUrl = ref('')
 </script>
 
 <style lang="less" scoped>

src/router/index.js

@@ -85,7 +85,7 @@ const routes = [
     meta: {
       tabIdx: 9
     }
-  }
+  },
 ]
 
 const router = createRouter({

src/store/index.js

@@ -8,7 +8,7 @@ const loginStatusEnum = {
 
 export default createStore({
   state: {
-    haveShownStartUp: false,
+    haveShownStartUp: true, // 暂定不使用加载页
     loginStatus: loginStatusEnum.notLogin,
     userName: '',
   },