|
@@ -1,97 +1,121 @@
|
|
|
<template>
|
|
|
- <popup>
|
|
|
- <div class="ui-message ui-message-confirm message-material">
|
|
|
- <div class="ui-message-header header-material">
|
|
|
- <div>{{$i18n.t(`material.components.pano_setting`)}}</div>
|
|
|
- <div @click="$emit('close')">
|
|
|
- <i class="iconfont icon_close"></i>
|
|
|
- </div>
|
|
|
+ <popup>
|
|
|
+ <div class="ui-message ui-message-confirm message-material">
|
|
|
+ <div class="ui-message-header header-material">
|
|
|
+ <div>{{ $i18n.t(`material.components.pano_setting`) }}</div>
|
|
|
+ <div @click="$emit('close')">
|
|
|
+ <i class="iconfont icon_close"></i>
|
|
|
</div>
|
|
|
- <div class="ui-message-main re-name">
|
|
|
+ </div>
|
|
|
+ <div class="ui-message-main re-name">
|
|
|
+ <div>
|
|
|
+ <iframe
|
|
|
+ id="ifrcover"
|
|
|
+ :src="
|
|
|
+ './vr.html?hideScale=1&vr=' + item.sceneCode + '&lang=' + $lang
|
|
|
+ "
|
|
|
+ frameborder="0"
|
|
|
+ ></iframe>
|
|
|
<div>
|
|
|
- <iframe id="ifrcover" :src="'./vr.html?hideScale=1&vr='+item.sceneCode+'&lang='+$lang" frameborder="0"></iframe>
|
|
|
- <div>
|
|
|
- <span class="remark">{{$i18n.t(`material.components.drag_to_cut`)}}</span>
|
|
|
- <div @click="onClick" :class="canPrintScreen ? 'print-screen-btn' : 'print-screen-btn--disabled'" >
|
|
|
- <i class="iconfont icon-pop-ups_crop"></i>
|
|
|
- {{$i18n.t(`material.components.cutting`)}}
|
|
|
- </div>
|
|
|
+ <span class="remark">{{
|
|
|
+ $i18n.t(`material.components.drag_to_cut`)
|
|
|
+ }}</span>
|
|
|
+ <div
|
|
|
+ @click="onClick"
|
|
|
+ :class="
|
|
|
+ canPrintScreen
|
|
|
+ ? 'print-screen-btn'
|
|
|
+ : 'print-screen-btn--disabled'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <i class="iconfont icon-pop-ups_crop"></i>
|
|
|
+ {{ $i18n.t(`material.components.cutting`) }}
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <!-- {{ $thumb }} -->
|
|
|
+ <img :src="img || $thumb" alt="" />
|
|
|
<div>
|
|
|
- <img :src="img||$thumb" alt="" />
|
|
|
- <div>
|
|
|
- <div class="remark">{{$i18n.t(`material.components.preview_cover`)}}</div>
|
|
|
+ <div class="remark">
|
|
|
+ {{ $i18n.t(`material.components.preview_cover`) }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="ui-message-footer">
|
|
|
- <div class="btn">
|
|
|
- <button @click="$emit('close')" class="ui-button ui-button-rect cancel" >
|
|
|
- {{$i18n.t(`gather.cancel`)}}
|
|
|
- </button>
|
|
|
- <button @click="save" class="ui-button ui-button-rect submit" >
|
|
|
- {{$i18n.t(`gather.comfirm`)}}
|
|
|
- </button>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="ui-message-footer">
|
|
|
+ <div class="btn">
|
|
|
+ <button
|
|
|
+ @click="$emit('close')"
|
|
|
+ class="ui-button ui-button-rect cancel"
|
|
|
+ >
|
|
|
+ {{ $i18n.t(`gather.cancel`) }}
|
|
|
+ </button>
|
|
|
+ <button @click="save" class="ui-button ui-button-rect submit">
|
|
|
+ {{ $i18n.t(`gather.comfirm`) }}
|
|
|
+ </button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </popup>
|
|
|
+ </div>
|
|
|
+ </popup>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import Popup from "@/components/shared/popup";
|
|
|
|
|
|
export default {
|
|
|
- props:['item'],
|
|
|
- components:{
|
|
|
- Popup
|
|
|
+ props: ["item"],
|
|
|
+ components: {
|
|
|
+ Popup,
|
|
|
},
|
|
|
- data(){
|
|
|
+ data() {
|
|
|
return {
|
|
|
- img: this.item.icon || '',
|
|
|
+ img: this.item.icon || "",
|
|
|
canPrintScreen: false,
|
|
|
- }
|
|
|
+ };
|
|
|
},
|
|
|
- watch:{
|
|
|
- item:{
|
|
|
- deep:true,
|
|
|
- handler:function (newVal) {
|
|
|
- this.img = newVal.icon
|
|
|
- }
|
|
|
- }
|
|
|
+ watch: {
|
|
|
+ item: {
|
|
|
+ deep: true,
|
|
|
+ immediate: true,
|
|
|
+ handler: function (newVal) {
|
|
|
+ console.log("封面预览::-->", newVal.icon);
|
|
|
+ this.img = newVal.icon;
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
- methods:{
|
|
|
+ methods: {
|
|
|
onClick() {
|
|
|
- let ifr = document.getElementById('ifrcover')
|
|
|
- let data = ifr.contentWindow.screenshot()
|
|
|
- data && data.then((cvs)=> {
|
|
|
- var imgURL = cvs.toDataURL('image/png');
|
|
|
- this.img = imgURL
|
|
|
- });
|
|
|
+ let ifr = document.getElementById("ifrcover");
|
|
|
+ let data = ifr.contentWindow.screenshot();
|
|
|
+ data &&
|
|
|
+ data.then((cvs) => {
|
|
|
+ var imgURL = cvs.toDataURL("image/png");
|
|
|
+ this.img = imgURL;
|
|
|
+ });
|
|
|
},
|
|
|
- save(){
|
|
|
+ save() {
|
|
|
if (!this.img) {
|
|
|
return this.$alert({ content: "请点击“截图”按钮截取封面" });
|
|
|
}
|
|
|
- this.$emit('panocover',this.img)
|
|
|
- }
|
|
|
+ this.$emit("panocover", this.img);
|
|
|
+ },
|
|
|
},
|
|
|
mounted() {
|
|
|
setTimeout(() => {
|
|
|
- this.canPrintScreen = true
|
|
|
+ this.canPrintScreen = true;
|
|
|
}, 2500);
|
|
|
- }
|
|
|
-}
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-.ui-message-confirm{
|
|
|
+.ui-message-confirm {
|
|
|
width: 472px;
|
|
|
height: 421px;
|
|
|
overflow: visible;
|
|
|
-
|
|
|
- .icon_close{
|
|
|
+
|
|
|
+ .icon_close {
|
|
|
color: #909090;
|
|
|
}
|
|
|
|
|
@@ -99,8 +123,9 @@ export default {
|
|
|
display: flex;
|
|
|
margin: 40px 0;
|
|
|
justify-content: space-between;
|
|
|
- > div{
|
|
|
- > iframe,> img {
|
|
|
+ > div {
|
|
|
+ > iframe,
|
|
|
+ > img {
|
|
|
margin-bottom: 10px;
|
|
|
width: 200px;
|
|
|
height: 200px;
|
|
@@ -116,7 +141,7 @@ export default {
|
|
|
}
|
|
|
.print-screen-btn {
|
|
|
font-size: 14px;
|
|
|
- color: #0076F6;
|
|
|
+ color: #0076f6;
|
|
|
cursor: pointer;
|
|
|
.iconfont {
|
|
|
font-size: 12px;
|
|
@@ -133,20 +158,19 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .ui-message-footer{
|
|
|
+ .ui-message-footer {
|
|
|
width: 100%;
|
|
|
- .btn{
|
|
|
+ .btn {
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
- .ui-button{
|
|
|
+ .ui-button {
|
|
|
max-width: 104px;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-@import '../style.less';
|
|
|
-</style>
|
|
|
+@import "../style.less";
|
|
|
+</style>
|