|
@@ -1,44 +1,44 @@
|
|
|
<template>
|
|
|
- <div class="qrcode" :style="{backgroundImage:`url(${require(`@/assets/images/proj2022/mobile/tab_shu@2x.png`)})`}">
|
|
|
+ <div class="qrcode" :class="{ heping: g_isLandscape }" :style="{ backgroundImage: `url(${require(`@/assets/images/proj2022/mobile/tab_shu@2x.png`)})` }">
|
|
|
<div class="downloadQrcon">
|
|
|
- <qrcodetl v-if="tmpPano.id" :id="'qrpg_'+tmpPano.id" :data="tmpPano"/>
|
|
|
- <qrcodetl v-if="currentItem.id" :id="'qrpgc_'+currentItem.id" :data="currentItem"/>
|
|
|
+ <qrcodetl v-if="tmpPano.panoId" :id="'qrpg_' + tmpPano.panoId" :data="tmpPano" />
|
|
|
+ <qrcodetl v-if="currentItem.id" :id="'qrpgc_' + currentItem.id" :data="currentItem" />
|
|
|
</div>
|
|
|
-
|
|
|
|
|
|
<div class="qrcodecon">
|
|
|
<h3>分享</h3>
|
|
|
+ <div class="h3line"></div>
|
|
|
<div class="ctitle">
|
|
|
<span>邀请好友一起观展吧!</span>
|
|
|
<span>请长按下方图片下载二维码分享给好友</span>
|
|
|
</div>
|
|
|
<div class="ul">
|
|
|
<div class="li" v-if="tmpPano.name">
|
|
|
- <template v-if="tmpPano.name">
|
|
|
+ <div class="liimg">
|
|
|
+ <img class="real" v-if="tmpImg" :src="tmpImg" alt="" />
|
|
|
+ <img class="qrc" v-if="tmpPano.panoId" :src="require(`@/assets/images/project/qrcode/${tmpPano.panoId}.jpg`)" alt="" />
|
|
|
+ </div>
|
|
|
+ <template v-if="tmpPano.name">
|
|
|
<p v-if="!currentPanoArr" v-html="tmpPano.name || ''"></p>
|
|
|
<div v-else class="xiala">
|
|
|
- <span @click="isShowUl=!isShowUl">
|
|
|
- {{tmpPano.name}}
|
|
|
- <img :src="require(`@/assets/images/project/icon/jiantour.png`)" alt="">
|
|
|
+ <span @click="isShowUl = !isShowUl">
|
|
|
+ {{ tmpPano.name }}
|
|
|
+ <img :src="require(`@/assets/images/project/icon/jiantour.png`)" alt="" />
|
|
|
</span>
|
|
|
<ul class="brightness" v-if="isShowUl">
|
|
|
- <li v-html="item.name" @click="isShowUl=false,tmpPano=item" v-for="(item,i) in currentPanoArr" :key="i"></li>
|
|
|
+ <li v-html="item.name" @click="(isShowUl = false), (tmpPano = item)" v-for="(item, i) in currentPanoArr" :key="i"></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</template>
|
|
|
<p v-else></p>
|
|
|
- <div class="liimg">
|
|
|
- <img class="real" v-if="tmpImg" :src="tmpImg" alt="">
|
|
|
- <img class="qrc" v-if="tmpPano.id" :src="require(`@/assets/images/project/qrcode/11.jpg`)" alt="" />
|
|
|
- </div>
|
|
|
</div>
|
|
|
|
|
|
<div class="li">
|
|
|
- <p v-html="currentItem.name"></p>
|
|
|
<div class="liimg">
|
|
|
- <img class="real" v-if="tmpcImg" :src="tmpcImg" alt="">
|
|
|
- <img class="qrc" :src="require(`@/assets/images/project/qrcode/11.jpg`)" alt="" />
|
|
|
+ <img class="real" v-if="tmpcImg" :src="tmpcImg" alt="" />
|
|
|
+ <img class="qrc" :src="require(`@/assets/images/project/qrcode/${currentItem.id}.jpg`)" alt="" />
|
|
|
</div>
|
|
|
+ <p v-html="currentItem.name"></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -46,82 +46,93 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import {Booth} from "@/data/raw.js";
|
|
|
import domtoimage from "dom-to-image";
|
|
|
import qrcodetl from "@/components/qrcodetl/index.vue";
|
|
|
+import { Booth } from "@/data/booth.js";
|
|
|
+
|
|
|
+let all_booth = [];
|
|
|
+Booth.forEach((item) => {
|
|
|
+ all_booth = all_booth.concat(item.company);
|
|
|
+});
|
|
|
|
|
|
export default {
|
|
|
- props:['currentPano','currentItem'],
|
|
|
- data(){
|
|
|
+ props: ["currentPano", "currentItem"],
|
|
|
+ data() {
|
|
|
return {
|
|
|
- isShowUl:false,
|
|
|
- tmpPano:this.currentPano,
|
|
|
- tmpImg:'',
|
|
|
- tmpcImg:'',
|
|
|
- }
|
|
|
+ isShowUl: false,
|
|
|
+ tmpPano: this.currentPano,
|
|
|
+ tmpImg: "",
|
|
|
+ tmpcImg: "",
|
|
|
+ };
|
|
|
},
|
|
|
- components:{qrcodetl},
|
|
|
- computed:{
|
|
|
- currentPanoArr:function(){
|
|
|
- let tmp = Booth.filter(item=>item.panoId == this.currentPano.panoId)
|
|
|
- return tmp&&tmp.length>1 ? tmp : ''
|
|
|
- }
|
|
|
+ components: { qrcodetl },
|
|
|
+ computed: {
|
|
|
+ currentPanoArr: function() {
|
|
|
+ let tmp1 = all_booth.filter((item) => item.panoId == this.currentPano.panoId);
|
|
|
+ let tmp = tmp1.map((item, idx) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ panoId: idx > 0 ? `${item.panoId}_${idx}` : item.panoId,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ return tmp && tmp.length > 1 ? tmp : "";
|
|
|
+ },
|
|
|
},
|
|
|
- watch:{
|
|
|
- tmpPano(newVal){
|
|
|
- console.log(newVal,88888888);
|
|
|
+ watch: {
|
|
|
+ tmpPano(newVal) {
|
|
|
+ console.log(newVal, 88888888);
|
|
|
setTimeout(() => {
|
|
|
- this.download(newVal.id,'qrpg_','tmpImg')
|
|
|
+ this.download(newVal.id, "qrpg_", "tmpImg");
|
|
|
}, 100);
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
- mounted(){
|
|
|
- this.$nextTick(()=>{
|
|
|
+ mounted() {
|
|
|
+ this.$nextTick(() => {
|
|
|
setTimeout(() => {
|
|
|
- this.download(this.tmpPano.id,'qrpg_','tmpImg')
|
|
|
- this.download(this.currentItem.id,'qrpgc_','tmpcImg')
|
|
|
+ this.download(this.tmpPano.panoId, "qrpg_", "tmpImg");
|
|
|
+ this.download(this.currentItem.id, "qrpgc_", "tmpcImg");
|
|
|
}, 100);
|
|
|
setTimeout(() => {
|
|
|
- this.download(this.tmpPano.id,'qrpg_','tmpImg')
|
|
|
- this.download(this.currentItem.id,'qrpgc_','tmpcImg')
|
|
|
+ this.download(this.tmpPano.panoId, "qrpg_", "tmpImg");
|
|
|
+ this.download(this.currentItem.id, "qrpgc_", "tmpcImg");
|
|
|
}, 400);
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
- methods:{
|
|
|
- download(id=null,type='',imgstr='') {
|
|
|
+ methods: {
|
|
|
+ download(id = null, type = "", imgstr = "") {
|
|
|
if (!id) {
|
|
|
- return
|
|
|
+ return;
|
|
|
}
|
|
|
- let node = document.getElementById(type+id);
|
|
|
-
|
|
|
+ let node = document.getElementById(type + id);
|
|
|
+
|
|
|
domtoimage
|
|
|
.toPng(node)
|
|
|
- .then((dataUrl) =>{
|
|
|
- this[imgstr] = dataUrl
|
|
|
+ .then((dataUrl) => {
|
|
|
+ this[imgstr] = dataUrl;
|
|
|
})
|
|
|
- .catch((error)=> {
|
|
|
+ .catch((error) => {
|
|
|
console.error("oops, something went wrong!", error);
|
|
|
});
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-@w:100%;
|
|
|
-@fixw:8px;
|
|
|
-.qrcode{
|
|
|
+@w: 100%;
|
|
|
+@fixw: 8px;
|
|
|
+.qrcode {
|
|
|
width: @w;
|
|
|
height: 100%;
|
|
|
position: relative;
|
|
|
background-size: 100% auto;
|
|
|
|
|
|
- .downloadQrcon{
|
|
|
+ .downloadQrcon {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: -1500px;
|
|
|
}
|
|
|
- .qrcodebg{
|
|
|
+ .qrcodebg {
|
|
|
width: @w;
|
|
|
position: absolute;
|
|
|
z-index: 999;
|
|
@@ -129,13 +140,13 @@ export default {
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
}
|
|
|
- .qrcodecon{
|
|
|
+ .qrcodecon {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
text-align: center;
|
|
|
padding: 40px 0 0;
|
|
|
position: relative;
|
|
|
- >h3{
|
|
|
+ > h3 {
|
|
|
font-family: "pangmen";
|
|
|
font-weight: normal;
|
|
|
font-size: 24px;
|
|
@@ -143,43 +154,43 @@ export default {
|
|
|
top: 30px;
|
|
|
left: 20px;
|
|
|
}
|
|
|
- .ctitle{
|
|
|
- margin-top: 40px;
|
|
|
- text-align: center;
|
|
|
- >span{
|
|
|
- display: block;
|
|
|
- &:first-of-type{
|
|
|
- font-size: 18px;
|
|
|
- font-weight: bold;
|
|
|
- margin-bottom: 2px;
|
|
|
- }
|
|
|
- &:last-of-type{
|
|
|
- font-size: 12px;
|
|
|
- color: rgba(255, 255, 255, 0.7);
|
|
|
- }
|
|
|
- }
|
|
|
+ .h3line{
|
|
|
+ width: 94%;
|
|
|
+ height: 1px;
|
|
|
+ background-color: rgba(255, 255, 255, 0.5);
|
|
|
+ margin: 30px auto 0;
|
|
|
+ }
|
|
|
+ .ctitle {
|
|
|
+ margin-top: 40px;
|
|
|
+ text-align: center;
|
|
|
+ > span {
|
|
|
+ display: block;
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
}
|
|
|
- >.ul{
|
|
|
+ }
|
|
|
+ > .ul {
|
|
|
width: 100%;
|
|
|
height: calc(100% - 100px);
|
|
|
overflow-y: auto;
|
|
|
padding: 10px;
|
|
|
- >.li{
|
|
|
+ > .li {
|
|
|
text-align: center;
|
|
|
width: 100%;
|
|
|
margin-top: 10px;
|
|
|
- >p,.xiala{
|
|
|
+ > p,
|
|
|
+ .xiala {
|
|
|
font-size: 14px;
|
|
|
line-height: 1.5;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
- .xiala{
|
|
|
+ .xiala {
|
|
|
width: 50%;
|
|
|
margin: 0 auto 10px;
|
|
|
position: relative;
|
|
|
- >span{
|
|
|
+ > span {
|
|
|
border: 1px solid #fff;
|
|
|
display: inline-block;
|
|
|
border-radius: 4px;
|
|
@@ -188,9 +199,9 @@ export default {
|
|
|
position: relative;
|
|
|
cursor: pointer;
|
|
|
overflow: hidden;
|
|
|
- text-overflow:ellipsis;
|
|
|
+ text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
|
- >img{
|
|
|
+ > img {
|
|
|
position: absolute;
|
|
|
right: 12px;
|
|
|
transform: rotate(90deg);
|
|
@@ -198,55 +209,97 @@ export default {
|
|
|
width: 8px;
|
|
|
}
|
|
|
}
|
|
|
- >ul{
|
|
|
+ > ul {
|
|
|
position: absolute;
|
|
|
top: 110%;
|
|
|
padding: 0 10px;
|
|
|
width: 100%;
|
|
|
z-index: 99;
|
|
|
- clip-path:none!important;
|
|
|
+ clip-path: none !important;
|
|
|
border-radius: 4px;
|
|
|
overflow: hidden;
|
|
|
height: auto;
|
|
|
- >li{
|
|
|
+ > li {
|
|
|
text-align: left;
|
|
|
line-height: 1.5;
|
|
|
border-bottom: dashed 1px #fff;
|
|
|
padding: 10px 0;
|
|
|
cursor: pointer;
|
|
|
font-size: 16px;
|
|
|
- &:last-of-type{
|
|
|
+ &:last-of-type {
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .liimg{
|
|
|
- max-width: 150px;
|
|
|
+ .liimg {
|
|
|
+ max-width: 250px;
|
|
|
width: 50%;
|
|
|
margin: 10px auto;
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
font-size: 0;
|
|
|
|
|
|
- .qrc{
|
|
|
+ .qrc {
|
|
|
width: 100%;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
- .real{
|
|
|
+ .real {
|
|
|
z-index: 1;
|
|
|
left: 50%;
|
|
|
top: 50%;
|
|
|
width: 100%;
|
|
|
- transform: translate(-50%,-50%);
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
position: absolute;
|
|
|
opacity: 0;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
+.heping {
|
|
|
+ .qrcodecon {
|
|
|
+ .h3line {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ h3 {
|
|
|
+ left: 60px;
|
|
|
+ }
|
|
|
+ .ctitle {
|
|
|
+ position: absolute;
|
|
|
+ writing-mode: vertical-lr;
|
|
|
+ top: 30px;
|
|
|
+ left: 60px;
|
|
|
+ font-size: 18px;
|
|
|
+ text-align: left;
|
|
|
+ > span {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ul {
|
|
|
+ height: 100%;
|
|
|
+ width: 80%;
|
|
|
+ justify-content: center;
|
|
|
+ display: flex;
|
|
|
+ margin: 0 auto;
|
|
|
+ .li{
|
|
|
+ width: 50%;
|
|
|
+ display: flex;
|
|
|
+ margin: 0 auto;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ >p{
|
|
|
+ writing-mode: vertical-lr;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ .liimg{
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|