<template>
|
<div class="diy-page" id="diy-page"
|
@mousedown.stop="onmousedown($event)"
|
@mouseup.stop="onmouseup($event)"
|
@contextmenu.prevent.stop="del">
|
<div class="title"
|
:style="{backgroundColor: basicSet.titleColor}">
|
<img
|
v-if="basicSet.titleImg" :src="basicSet.titleImg" alt="">
|
</div>
|
<div class="container">
|
<img :id="item.id" :src="item.url" alt="" v-for="item in basicSet.bgImg" :key="item.id">
|
</div>
|
<hotspot :attr="{
|
x: item.x,
|
y: item.y,
|
w: item.w,
|
h: item.h,
|
type: item.type,
|
z: item.z,
|
img:getFileUrl(item),
|
fixedPosition: item.fixedPosition,
|
isShow:item.isDisplayProd !== '1'
|
}" v-for="(item) in hotList" :key="item.id"
|
:id="item.id"
|
>
|
</hotspot>
|
</div>
|
</template>
|
<script>
|
import hotspot from './components/hotspot.vue'
|
import create from './components/event/create'
|
import { mapMutations, mapState } from 'vuex'
|
export default {
|
name: 'diy-page',
|
components: {
|
hotspot
|
},
|
data() {
|
return {
|
createFlag: false
|
}
|
},
|
computed: {
|
...mapState(['diyList', 'mousedown']),
|
basicSet() {
|
return this.diyList.filter((v) => {
|
return v.type === 'basicSet'
|
})[0]
|
},
|
hotList() {
|
return this.diyList.filter((v) => {
|
return v.type !== 'basicSet'
|
})
|
}
|
},
|
methods: {
|
...mapMutations(['updateMousedown', 'delPopDiyList']),
|
/**
|
* 获取热区上传的图片地址
|
*/
|
getFileUrl(item) {
|
let fileUrl = null
|
if (item.fileUrl) {
|
fileUrl = item.fileUrl
|
} else if (item.img) {
|
fileUrl = item.img
|
} else if (item.banners && item.banners.length) {
|
fileUrl = item.banners[0].url
|
}
|
return fileUrl
|
},
|
onmousedown($event) {
|
if ($event.which !== 1) {
|
return
|
}
|
this.updateMousedown({ startTime: new Date() })
|
},
|
onmouseup($event) {
|
const time = new Date() - this.mousedown.startTime
|
document.getElementById('diy-aside').style.overflowY = 'auto'
|
document.getElementById('main-container').style.overflowY = 'auto'
|
document.onmousemove = null
|
if (time > 200) {
|
this.createFlag = false
|
return false
|
}
|
if ($event.which === 1) {
|
if (this.createFlag) {
|
this.createFlag = false
|
document.onmousemove = null
|
} else {
|
this.createFlag = true
|
create($event)
|
}
|
}
|
},
|
del() {
|
if (!this.createFlag) {
|
return false
|
}
|
this.delPopDiyList()
|
this.updateMousedown({ activeId: this.diyList[this.diyList.length - 1].id, zIndex: this.mousedown.zIndex - 1 })
|
this.createFlag = false
|
}
|
}
|
}
|
</script>
|
<style scoped lang="scss">
|
.diy-page {
|
width: 375px;
|
min-height: 667px;
|
-webkit-touch-callout:none;
|
-webkit-user-select:none;
|
-khtml-user-select:none;
|
-moz-user-select:none;
|
-ms-user-select:none;
|
user-select:none;
|
position: relative;
|
.title {
|
height: 44px;
|
display: flex;
|
align-items: center;
|
// justify-content: center;
|
position: fixed;
|
width: 375px;
|
z-index: 1000;
|
img {
|
max-height: 100%;
|
max-width: 100%;
|
margin-left: 20px;
|
}
|
}
|
.container {
|
position: relative;
|
top: 44px;
|
z-index: 1;
|
img {
|
width: 100%;
|
display: block;
|
}
|
}
|
}
|
</style>
|
