|
@@ -1,245 +1,301 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="panocon">
|
|
<div class="panocon">
|
|
|
- <div id="pano"> </div>
|
|
|
|
|
|
|
+ <template v-if="showInfo">
|
|
|
|
|
+ <div id="pano"></div>
|
|
|
|
|
+ <div class="pano-logo" v-if="showInfo.logo && showInfo.isLogo">
|
|
|
|
|
+ <img :src="showInfo.logo" alt="" />
|
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
- <div class="pano-logo" v-if="showInfo.logo&&showInfo.isLogo">
|
|
|
|
|
- <img :src="showInfo.logo" alt="">
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <div
|
|
|
|
|
+ class="oper-tips"
|
|
|
|
|
+ :class="{ hidetips: !showTips }"
|
|
|
|
|
+ v-if="showInfo.isRemind && showInfo.remindTime && !localRemind"
|
|
|
|
|
+ >
|
|
|
|
|
+ <img
|
|
|
|
|
+ :src="
|
|
|
|
|
+ showInfo.pcIcon ||
|
|
|
|
|
+ require('@/assets/images/default/show/img_tipspc_default.png')
|
|
|
|
|
+ "
|
|
|
|
|
+ alt=""
|
|
|
|
|
+ />
|
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
- <div class="oper-tips" :class="{hidetips:!showTips}" v-if="showInfo.isRemind&&showInfo.remindTime">
|
|
|
|
|
- <img :src="showInfo.pcIcon||require('@/assets/images/default/show/img_tipspc_default.png')" alt="">
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <list v-if="canLoad" @select="handleSelect" :select="activeItem"></list>
|
|
|
|
|
+ <password
|
|
|
|
|
+ :bg="showInfo.icon"
|
|
|
|
|
+ :show="showPassword"
|
|
|
|
|
+ @submit="handlePassword"
|
|
|
|
|
+ @close="showPassword = false"
|
|
|
|
|
+ />
|
|
|
|
|
+ <popup :title="'简介'" :show="showIntro" @close="showIntro = false">
|
|
|
|
|
+ <div slot="content" class="introcon">
|
|
|
|
|
+ {{ showInfo.description || "暂无简介" }}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </popup>
|
|
|
|
|
|
|
|
- <list v-if="canLoad" @select="handleSelect" :select="activeItem"></list>
|
|
|
|
|
- <password :bg="showInfo.icon" :show='showPassword' @submit="handlePassword" @close="showPassword=false" />
|
|
|
|
|
- <popup :title="'简介'" :show='showIntro' @close="showIntro=false" >
|
|
|
|
|
- <div slot="content" class="introcon">
|
|
|
|
|
- {{showInfo.description||'暂无简介'}}
|
|
|
|
|
- </div>
|
|
|
|
|
- </popup>
|
|
|
|
|
|
|
+ <preview
|
|
|
|
|
+ :item="currentHotspot"
|
|
|
|
|
+ :show="showPreview"
|
|
|
|
|
+ @close="showPreview = false"
|
|
|
|
|
+ />
|
|
|
|
|
|
|
|
- <preview
|
|
|
|
|
- :item="currentHotspot"
|
|
|
|
|
- :show="showPreview"
|
|
|
|
|
- @close="showPreview = false"
|
|
|
|
|
- />
|
|
|
|
|
-
|
|
|
|
|
- <ul class="aside">
|
|
|
|
|
- <li v-for="(item,i) in aside" :key="i">
|
|
|
|
|
- <span @click="handleItem(item)">
|
|
|
|
|
- <i class="iconfont" :class="item.icon"></i>
|
|
|
|
|
- </span>
|
|
|
|
|
- </li>
|
|
|
|
|
- </ul>
|
|
|
|
|
|
|
+ <ul class="aside">
|
|
|
|
|
+ <li v-for="(item, i) in aside" :key="i">
|
|
|
|
|
+ <span @click="handleItem(item)">
|
|
|
|
|
+ <i class="iconfont" :class="item.icon"></i>
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <div class="hasDel" v-else>
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <img :src="$noresult" alt="">
|
|
|
|
|
+ <p>作品已被删除</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
import * as krfn from "@/core/index.js";
|
|
import * as krfn from "@/core/index.js";
|
|
|
import { getWebWorksInfo, checkPassword } from "@/api";
|
|
import { getWebWorksInfo, checkPassword } from "@/api";
|
|
|
-import password from './popup/password'
|
|
|
|
|
-import preview from './popup/preview'
|
|
|
|
|
|
|
+import password from "./popup/password";
|
|
|
|
|
+import preview from "./popup/preview";
|
|
|
|
|
|
|
|
-import popup from './popup/'
|
|
|
|
|
|
|
+import popup from "./popup/";
|
|
|
import { mapGetters } from "vuex";
|
|
import { mapGetters } from "vuex";
|
|
|
|
|
|
|
|
-
|
|
|
|
|
import list from "./list";
|
|
import list from "./list";
|
|
|
|
|
|
|
|
let __krfn = krfn.default;
|
|
let __krfn = krfn.default;
|
|
|
|
|
|
|
|
export default {
|
|
export default {
|
|
|
- components:{
|
|
|
|
|
- list,
|
|
|
|
|
- password,
|
|
|
|
|
- popup,
|
|
|
|
|
- preview
|
|
|
|
|
|
|
+ components: {
|
|
|
|
|
+ list,
|
|
|
|
|
+ password,
|
|
|
|
|
+ popup,
|
|
|
|
|
+ preview,
|
|
|
},
|
|
},
|
|
|
computed: {
|
|
computed: {
|
|
|
...mapGetters({
|
|
...mapGetters({
|
|
|
- showInfo:'showInfo',
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ showInfo: "showInfo",
|
|
|
|
|
+ }),
|
|
|
},
|
|
},
|
|
|
- data(){
|
|
|
|
|
|
|
+ data() {
|
|
|
return {
|
|
return {
|
|
|
- showPreview:false,
|
|
|
|
|
- showTips:true,
|
|
|
|
|
- canLoad:false,
|
|
|
|
|
- showPassword:false,
|
|
|
|
|
- showIntro:false,
|
|
|
|
|
- password:'',
|
|
|
|
|
- activeItem:'',
|
|
|
|
|
- someData:'',
|
|
|
|
|
- currentHotspot:'',
|
|
|
|
|
- list:[],
|
|
|
|
|
- aside:[{
|
|
|
|
|
- id:'about',
|
|
|
|
|
- icon:'icontool_about'
|
|
|
|
|
- },{
|
|
|
|
|
- id:'vr',
|
|
|
|
|
- icon:'icontool_vr'
|
|
|
|
|
- },{
|
|
|
|
|
- id:'full',
|
|
|
|
|
- icon:'icontool_full',
|
|
|
|
|
- }]
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ showPreview: false,
|
|
|
|
|
+ showTips: true,
|
|
|
|
|
+ canLoad: false,
|
|
|
|
|
+ showPassword: false,
|
|
|
|
|
+ showIntro: false,
|
|
|
|
|
+ localRemind: false,
|
|
|
|
|
+ password: "",
|
|
|
|
|
+ activeItem: "",
|
|
|
|
|
+ someData: "",
|
|
|
|
|
+ currentHotspot: "",
|
|
|
|
|
+ list: [],
|
|
|
|
|
+ aside: [
|
|
|
|
|
+ {
|
|
|
|
|
+ id: "about",
|
|
|
|
|
+ icon: "icontool_about",
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ id: "vr",
|
|
|
|
|
+ icon: "icontool_vr",
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ id: "full",
|
|
|
|
|
+ icon: "icontool_full",
|
|
|
|
|
+ },
|
|
|
|
|
+ ],
|
|
|
|
|
+ };
|
|
|
},
|
|
},
|
|
|
- methods:{
|
|
|
|
|
- handleItem(data){
|
|
|
|
|
- if (data.id=='about') {
|
|
|
|
|
- this.showIntro = true
|
|
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ handleItem(data) {
|
|
|
|
|
+ if (data.id == "about") {
|
|
|
|
|
+ this.showIntro = true;
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
- handlePassword(data){
|
|
|
|
|
- checkPassword({
|
|
|
|
|
- password:data
|
|
|
|
|
- },res=>{
|
|
|
|
|
- if (res.code == 0) {
|
|
|
|
|
- this.showPassword = false
|
|
|
|
|
- this.canLoad = true
|
|
|
|
|
- }
|
|
|
|
|
- else{
|
|
|
|
|
- return this.$alert({ content: '密码错误' })
|
|
|
|
|
|
|
+ handlePassword(data) {
|
|
|
|
|
+ checkPassword(
|
|
|
|
|
+ {
|
|
|
|
|
+ password: data,
|
|
|
|
|
+ },
|
|
|
|
|
+ (res) => {
|
|
|
|
|
+ if (res.code == 0) {
|
|
|
|
|
+ this.showPassword = false;
|
|
|
|
|
+ this.canLoad = true;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ return this.$alert({ content: "密码错误" });
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
- })
|
|
|
|
|
|
|
+ );
|
|
|
},
|
|
},
|
|
|
- startLoad(){
|
|
|
|
|
- this.canLoad = true
|
|
|
|
|
|
|
+ startLoad() {
|
|
|
|
|
+ this.canLoad = true;
|
|
|
},
|
|
},
|
|
|
- handleSelect(data){
|
|
|
|
|
- this.activeItem = data
|
|
|
|
|
|
|
+ handleSelect(data) {
|
|
|
|
|
+ this.activeItem = data;
|
|
|
},
|
|
},
|
|
|
-
|
|
|
|
|
- getSceneInfo(){
|
|
|
|
|
- getWebWorksInfo({},data=>{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ getSceneInfo() {
|
|
|
|
|
+ getWebWorksInfo({}, (data) => {
|
|
|
this.$store.commit("SetShowInfo", data.data);
|
|
this.$store.commit("SetShowInfo", data.data);
|
|
|
- })
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
},
|
|
},
|
|
|
- watch:{
|
|
|
|
|
- currentHotspot:{
|
|
|
|
|
- deep:true,
|
|
|
|
|
- handler:function (newVal) {
|
|
|
|
|
|
|
+ watch: {
|
|
|
|
|
+ currentHotspot: {
|
|
|
|
|
+ deep: true,
|
|
|
|
|
+ handler: function (newVal) {
|
|
|
if (newVal) {
|
|
if (newVal) {
|
|
|
- if (newVal.hotspotType=="link") {
|
|
|
|
|
- window.open(newVal.hyperlink,'_blank')
|
|
|
|
|
- return
|
|
|
|
|
|
|
+ if (newVal.hotspotType == "link") {
|
|
|
|
|
+ window.open(newVal.hyperlink, "_blank");
|
|
|
|
|
+ return;
|
|
|
}
|
|
}
|
|
|
- if (newVal.hotspotType=="scene") {
|
|
|
|
|
- this.activeItem = newVal.secne
|
|
|
|
|
- return
|
|
|
|
|
|
|
+ if (newVal.hotspotType == "scene") {
|
|
|
|
|
+ this.activeItem = newVal.secne;
|
|
|
|
|
+ return;
|
|
|
}
|
|
}
|
|
|
- this.showPreview = true
|
|
|
|
|
|
|
+ this.showPreview = true;
|
|
|
}
|
|
}
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+ canLoad(newVal) {
|
|
|
|
|
+ if (newVal) {
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ this.showTips = false;
|
|
|
|
|
+ }, this.showInfo.remindTime * 1000);
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
- showInfo:{
|
|
|
|
|
- deep:true,
|
|
|
|
|
- immediate:true,
|
|
|
|
|
- handler:function (newVal) {
|
|
|
|
|
|
|
+ showInfo: {
|
|
|
|
|
+ deep: true,
|
|
|
|
|
+ immediate: true,
|
|
|
|
|
+ handler: function (newVal) {
|
|
|
if (newVal) {
|
|
if (newVal) {
|
|
|
- setTimeout(() => {
|
|
|
|
|
- this.showTips = false
|
|
|
|
|
- }, this.showInfo.remindTime*1000);
|
|
|
|
|
- newVal.isPassword?(this.showPassword = true):(this.startLoad())
|
|
|
|
|
|
|
+ if (localStorage.getItem("localRemind") == 1) {
|
|
|
|
|
+ this.localRemind = true;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ if (newVal.isRemind) {
|
|
|
|
|
+ localStorage.setItem("localRemind", newVal.isRemind);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ newVal.isPassword ? (this.showPassword = true) : this.startLoad();
|
|
|
|
|
+ } else {
|
|
|
|
|
+ console.log();
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
|
|
+ },
|
|
|
},
|
|
},
|
|
|
- activeItem:{
|
|
|
|
|
|
|
+ activeItem: {
|
|
|
handler(newVal) {
|
|
handler(newVal) {
|
|
|
- $('#pano').empty();
|
|
|
|
|
- window.vrInitFn = ()=>{
|
|
|
|
|
- var krpano = document.getElementById('krpanoSWFObject');
|
|
|
|
|
- __krfn.utils.initHotspot(krpano,newVal&&newVal.someData,false);
|
|
|
|
|
- }
|
|
|
|
|
- window.vrViewFn = ()=>{
|
|
|
|
|
|
|
+ $("#pano").empty();
|
|
|
|
|
+ window.vrInitFn = () => {
|
|
|
|
|
+ var krpano = document.getElementById("krpanoSWFObject");
|
|
|
|
|
+ __krfn.utils.initHotspot(krpano, newVal && newVal.someData, false);
|
|
|
|
|
+ };
|
|
|
|
|
+ window.vrViewFn = () => {
|
|
|
try {
|
|
try {
|
|
|
- let tmp = JSON.parse(newVal.initVisual)
|
|
|
|
|
- var krpano = document.getElementById('krpanoSWFObject');
|
|
|
|
|
- krpano.set('view.vlookat',tmp.vlookat);
|
|
|
|
|
- krpano.set('view.hlookat',tmp.hlookat);
|
|
|
|
|
- } catch (error) {
|
|
|
|
|
- error
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ let tmp = JSON.parse(newVal.initVisual);
|
|
|
|
|
+ var krpano = document.getElementById("krpanoSWFObject");
|
|
|
|
|
+ krpano.set("view.vlookat", tmp.vlookat);
|
|
|
|
|
+ krpano.set("view.hlookat", tmp.hlookat);
|
|
|
|
|
+ krpano.set("autorotate.enabled", Boolean(this.showInfo.isAuto));
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ error;
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
var settings = {
|
|
var settings = {
|
|
|
- 'events[skin_events].onxmlcomplete':'js(window.vrViewFn());',
|
|
|
|
|
- 'events[skin_events].onloadcomplete': 'js(window.vrInitFn());'
|
|
|
|
|
|
|
+ "events[skin_events].onxmlcomplete": "js(window.vrViewFn());",
|
|
|
|
|
+ "events[skin_events].onloadcomplete": "js(window.vrInitFn());",
|
|
|
};
|
|
};
|
|
|
if (newVal) {
|
|
if (newVal) {
|
|
|
- removepano('#pano')
|
|
|
|
|
- embedpano({
|
|
|
|
|
- // xml: "%HTMLPATH%/static/template/tour.xml",
|
|
|
|
|
- xml: `${this.$cdn}/720yun_fd_manage/${newVal.sceneCode}/vtour/tour.xml`,
|
|
|
|
|
- swf: "%HTMLPATH%/static/template/tour.swf",
|
|
|
|
|
- target: "pano",
|
|
|
|
|
- html5: "auto",
|
|
|
|
|
- mobilescale: 0.7,
|
|
|
|
|
- vars:settings,
|
|
|
|
|
- passQueryParameters: true,
|
|
|
|
|
- });
|
|
|
|
|
-
|
|
|
|
|
|
|
+ removepano("#pano");
|
|
|
|
|
+ embedpano({
|
|
|
|
|
+ // xml: "%HTMLPATH%/static/template/tour.xml",
|
|
|
|
|
+ xml: `${this.$cdn}/720yun_fd_manage/${newVal.sceneCode}/vtour/tour.xml`,
|
|
|
|
|
+ swf: "%HTMLPATH%/static/template/tour.swf",
|
|
|
|
|
+ target: "pano",
|
|
|
|
|
+ html5: "auto",
|
|
|
|
|
+ mobilescale: 0.7,
|
|
|
|
|
+ vars: settings,
|
|
|
|
|
+ passQueryParameters: true,
|
|
|
|
|
+ });
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
},
|
|
},
|
|
|
- mounted(){
|
|
|
|
|
|
|
+ mounted() {
|
|
|
window.__krfn = __krfn;
|
|
window.__krfn = __krfn;
|
|
|
|
|
|
|
|
this.$bus.on("clickHotspot", (data) => {
|
|
this.$bus.on("clickHotspot", (data) => {
|
|
|
- let someData = JSON.parse(this.activeItem.someData)
|
|
|
|
|
|
|
+ let someData = JSON.parse(this.activeItem.someData);
|
|
|
let idx = someData.hotspots.findIndex((item) => item.name == data);
|
|
let idx = someData.hotspots.findIndex((item) => item.name == data);
|
|
|
this.currentHotspot = someData.hotspots[idx];
|
|
this.currentHotspot = someData.hotspots[idx];
|
|
|
});
|
|
});
|
|
|
- this.getSceneInfo()
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ this.getSceneInfo();
|
|
|
|
|
+ },
|
|
|
|
|
+};
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|
|
|
-.panocon{
|
|
|
|
|
|
|
+.panocon {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
height: 100%;
|
|
height: 100%;
|
|
|
- #pano{
|
|
|
|
|
|
|
+ .hasDel{
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ >div{
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 50%;
|
|
|
|
|
+ left: 50%;
|
|
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
|
|
+ color: #909090;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ font-size: 18px;
|
|
|
|
|
+ >p{
|
|
|
|
|
+ margin-top: 20px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ #pano {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
height: 100%;
|
|
height: 100%;
|
|
|
}
|
|
}
|
|
|
- .pano-logo{
|
|
|
|
|
|
|
+ .pano-logo {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
top: 20px;
|
|
top: 20px;
|
|
|
left: 20px;
|
|
left: 20px;
|
|
|
- >img{
|
|
|
|
|
|
|
+ > img {
|
|
|
max-width: 120px;
|
|
max-width: 120px;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .oper-tips{
|
|
|
|
|
|
|
+ .oper-tips {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
top: 50%;
|
|
top: 50%;
|
|
|
left: 50%;
|
|
left: 50%;
|
|
|
- transform: translate(-50%,-50%);
|
|
|
|
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
transition: all 0.3s ease;
|
|
transition: all 0.3s ease;
|
|
|
- >img{
|
|
|
|
|
|
|
+ > img {
|
|
|
max-width: 300px;
|
|
max-width: 300px;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .hidetips{
|
|
|
|
|
|
|
+ .hidetips {
|
|
|
display: none;
|
|
display: none;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .aside{
|
|
|
|
|
|
|
+ .aside {
|
|
|
position: fixed;
|
|
position: fixed;
|
|
|
z-index: 999;
|
|
z-index: 999;
|
|
|
right: 10px;
|
|
right: 10px;
|
|
|
top: 50%;
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
transform: translateY(-50%);
|
|
|
- >li{
|
|
|
|
|
|
|
+ > li {
|
|
|
margin: 5px 0;
|
|
margin: 5px 0;
|
|
|
- >span{
|
|
|
|
|
|
|
+ > span {
|
|
|
width: 36px;
|
|
width: 36px;
|
|
|
height: 36px;
|
|
height: 36px;
|
|
|
display: inline-block;
|
|
display: inline-block;
|
|
@@ -249,16 +305,16 @@ export default {
|
|
|
border-radius: 18px;
|
|
border-radius: 18px;
|
|
|
position: relative;
|
|
position: relative;
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
- >i{
|
|
|
|
|
|
|
+ > i {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
top: 50%;
|
|
top: 50%;
|
|
|
left: 50%;
|
|
left: 50%;
|
|
|
- transform: translate(-50%,-50%);
|
|
|
|
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- .introcon{
|
|
|
|
|
|
|
+ .introcon {
|
|
|
line-height: 20px;
|
|
line-height: 20px;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|