<template>
|
<div class="index_page">
|
<div class="status_bar" :style="{
|
height: $setVw(statusHeight),
|
background: diyInfo[0].titleColor || '#f8f8f8'
|
}" v-if="diyInfo.length">
|
<div class="top_view" :style="{
|
height: $setVw(statusHeight),
|
width: '100%',
|
background: diyInfo[0].titleColor || '#f7f7f7',
|
}" />
|
</div>
|
<div v-for="item in diyInfo" :key="item.id">
|
<component :ref="item.type" :is="currentView(item.type)" :infoData="item"></component>
|
</div>
|
<div v-if="diyInfo[0] && diyInfo[0].bgImg && diyInfo[0].bgImg.length"
|
:style="{ paddingTop: $setVw(statusHeight) }">
|
<img :src="item.url | ossProcess" alt="" v-for="item in diyInfo[0].bgImg" :key="item.id" class="bg_img" />
|
</div>
|
</div>
|
</template>
|
|
<script type="javascript">
|
import { getDiyInfo } from '@/api/oauth/index'
|
import VideoPlayer from '@/components/video-player/index.vue'
|
import NewImage from '@/components/image/index.vue'
|
import NewSwiper from '@/components/swiper/index.vue'
|
import NewHeader from '@/components/header/index.vue'
|
import Notice from '@/components/notice/index.vue'
|
import Search from '@/components/search/index.vue'
|
import Swiper3D from '@/components/swiper-3d/index.vue'
|
export default {
|
components: {
|
VideoPlayer,
|
NewImage,
|
NewSwiper,
|
NewHeader,
|
Notice,
|
Search,
|
Swiper3D
|
},
|
|
data () {
|
return {
|
diyInfo: [],
|
statusHeight: 43,
|
ws: null,
|
token: '',
|
showHeader: ''
|
}
|
},
|
|
created () {
|
if (window.plus) {
|
this.plusReady()
|
} else {
|
document.addEventListener('plusready', this.plusReady, false)
|
}
|
this.getDiy({ id: '80a0d3dca4f14b1f9d9210eb02fbd877' })
|
},
|
methods: {
|
plusReady () {
|
this.ws = window.plus.webview.currentWebview()
|
this.setRefresh(true)
|
this.judgeReq()
|
this.statusHeight = window.plus.navigator.getStatusbarHeight()
|
},
|
setRefresh () {
|
this.ws.setPullToRefresh(
|
{
|
style: 'circle',
|
support: true,
|
height: '50px',
|
range: '50px',
|
offset: '50px'
|
},
|
this.onRefresh
|
)
|
},
|
judgeReq () {
|
const url = this.ws.getURL()
|
if (url.indexOf('?') > -1) {
|
const id = url.split('?')[1].split('=')[1]
|
this.getDiy({ id: id })
|
} else {
|
this.getDiy({ status: 2 })
|
}
|
},
|
onRefresh () {
|
// this.ws.beginPullToRefresh()
|
this.diyInfo = []
|
this.judgeReq()
|
if (
|
this.$refs &&
|
this.$refs.playVideo &&
|
this.$refs.playVideo.length &&
|
this.$refs.playVideo[0]
|
) {
|
if (this.$refs.playVideo[0].video) {
|
this.$refs.playVideo[0].video.close()
|
this.$refs.playVideo[0].createVideo()
|
}
|
}
|
if (
|
this.$refs &&
|
this.$refs.carousel &&
|
this.$refs.carousel.length &&
|
this.$refs.carousel[0]
|
) {
|
this.$refs.carousel[0].showSwiper = true
|
}
|
},
|
async getDiy (params) {
|
try {
|
const res = await getDiyInfo(params)
|
if (this.ws) this.ws.endPullToRefresh()
|
console.log(JSON.stringify(res.data))
|
if (res.data && res.data.length) {
|
this.diyInfo = JSON.parse(res.data[0].styleInfo)
|
this.diyInfo.map((v) => {
|
if (v.y) v.y += this.statusHeight
|
if (v.w) v.width = this.$setVw(v.w)
|
if (v.x) v.codeX = this.$setVw(v.x)
|
if (v.y) v.codeY = this.$setVw(v.y)
|
if (v.h) v.height = this.$setVw(v.h)
|
if (v.borderRadius) v.borderRadiu = this.$setVw(v.borderRadius)
|
if (v.strokeSize) v.borderSize = this.$setVw(v.strokeSize)
|
})
|
} else {
|
this.diyInfo = []
|
}
|
} catch (error) {
|
console.log(error)
|
if (this.ws) this.ws.endPullToRefresh()
|
}
|
},
|
currentView (type) {
|
let val = ''
|
switch (type) {
|
case 'basicSet':
|
val = 'NewHeader'
|
break
|
case 'customPage':
|
case 'proCategory':
|
case 'proDetails':
|
case 'actDetails':
|
case 'coupon':
|
val = 'NewImage'
|
break
|
case 'search':
|
val = 'Search'
|
break
|
case 'carousel':
|
val = 'NewSwiper'
|
break
|
case 'playVideo':
|
val = 'VideoPlayer'
|
break
|
case 'bulletinBoard':
|
val = 'Notice'
|
break
|
case 'slide3d':
|
val = 'Swiper3D'
|
break
|
}
|
return val
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
* {
|
-webkit-touch-callout: none;
|
}
|
.index_page {
|
height: 100%;
|
overflow: scroll;
|
}
|
|
.bg_img {
|
width: 100%;
|
height: auto;
|
display: block;
|
-webkit-touch-callout: none;
|
}
|
.top_view {
|
height: var(--status-bar-height);
|
width: 100%;
|
position: fixed;
|
background-color: #e0c18f;
|
top: 0;
|
z-index: 999;
|
}
|
</style>
|
