<template>
|
<div class="index_page">
|
<van-pull-refresh v-model="isLoading" @refresh="onRefresh" animation-duration="500">
|
<!-- 下拉提示，通过 scale 实现一个缩放效果 -->
|
<template #pulling="props">
|
<span>下拉刷新</span>
|
</template>
|
<!-- 释放提示 -->
|
<template #loosing>
|
<span>释放刷新</span>
|
</template>
|
<!-- 加载提示 -->
|
<template #loading>
|
<span>正在刷新</span>
|
</template>
|
<div class="status_bar" :style="{
|
height: $setVw(43),
|
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="{minHeight:minHeight}">
|
<img v-lazy="item.url" alt="" v-for="item in diyInfo[0].bgImg" :key="item.id" class="bg_img"
|
ref="conf0" />
|
</div>
|
</van-pull-refresh>
|
</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'
|
import BackToTop from '@/components/backToTop/index.vue'
|
import { closeLoading } from '@/utils/loading.js'
|
export default {
|
components: {
|
VideoPlayer,
|
NewImage,
|
NewSwiper,
|
NewHeader,
|
Notice,
|
Search,
|
Swiper3D,
|
BackToTop
|
},
|
|
data () {
|
return {
|
minHeight: '',
|
isLoading: false,
|
diyInfo: [],
|
statusHeight: 0,
|
ws: null,
|
token: '',
|
showHeader: ''
|
}
|
},
|
created () {
|
this.init()
|
},
|
methods: {
|
init () {
|
if (window.plus) {
|
this.ws = window.plus.webview.currentWebview()
|
this.setRefresh(true)
|
this.statusHeight = window.plus.navigator.getStatusbarHeight()
|
}
|
this.getDiy({ status: 2, diyType: '1' })
|
},
|
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 () {
|
if (window.plus) {
|
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, diyType: '1' })
|
}
|
} else {
|
this.getDiy({ status: 2, diyType: '1' })
|
}
|
},
|
onRefresh () {
|
// this.ws.beginPullToRefresh()
|
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) {
|
const _this = this
|
try {
|
this.isLoading = false
|
const res = await getDiyInfo(params)
|
let maxHeight = 0
|
if (_this.ws) _this.ws.endPullToRefresh()
|
if (res.data && res.data.length) {
|
_this.diyInfo = JSON.parse(res.data[0].styleInfo)
|
_this.diyInfo.forEach((v, index) => {
|
if (v.w) {
|
v.w += 20
|
}
|
if (v.type == 'search') {
|
if (v.x) {
|
v.x = v.x + 15
|
}
|
if (v.w) {
|
v.w = v.w - 30
|
}
|
if (!v.fixedPosition) {
|
v.y = v.y - 10
|
}
|
}
|
if (v.y) {
|
v.y = (_this.statusHeight + 10) + Math.floor(v.y)
|
}
|
if (v.x) {
|
v.x -= 10
|
}
|
v.width = v.w ? _this.$setVw(v.w) : 0
|
if (v.x) v.codeX = _this.$setVw(v.x)
|
if (v.y) v.codeY = _this.$setVw(v.y)
|
v.height = v.h ? _this.$setVw(v.h) : 0
|
if (v.borderRadius) v.borderRadiu = _this.$setVw(v.borderRadius)
|
if (v.strokeSize) v.borderSize = _this.$setVw(v.strokeSize)
|
// 判断页面的最小高度 以防止页面背景图高度不够 导致无法滚动查看定位元素
|
if ((v.h + v.y) > maxHeight) {
|
maxHeight = v.h + v.y - 43 // 减去status_bar的高度
|
}
|
})
|
setTimeout(() => {
|
_this.isLoading = false
|
}, 500)
|
} else {
|
_this.diyInfo = []
|
}
|
this.minHeight = _this.$setVw(maxHeight)
|
console.log(_this.diyInfo)
|
closeLoading(1)
|
} catch (error) {
|
closeLoading(1)
|
_this.diyInfo = []
|
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 'backToTop':
|
val = 'BackToTop'
|
break
|
case 'slide3d':
|
val = this.$root.isIos ? 'NewSwiper' : 'Swiper3D'
|
break
|
}
|
return val
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
* {
|
-webkit-touch-callout: none;
|
}
|
.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>
|
