<!--
|
* @Author: 张嘉彬
|
* @Date: 2021-10-12 16:11:21
|
* @Description:活动专区页面
|
-->
|
<template>
|
<div class="index_page">
|
<nav-bar :shadow="false" :autoBack="false" leftIcon="arrow-left" title="活动专区"
|
@clickLeft="clickLeft">
|
</nav-bar>
|
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
|
<h2 v-if="refreshStatusCode === '3'" class="no-active-style">专区暂无展示活动</h2>
|
<div v-if="refreshStatusCode === '2'">
|
<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>
|
<component v-for="item in diyInfo" :key="item.id" class="component-box" :ref="item.type"
|
:is="currentView(item.type)" :infoData="item"></component>
|
<div v-if="diyInfo[0] && diyInfo[0].bgImg && diyInfo[0].bgImg.length">
|
<img :src="item.url | ossProcess" alt="" v-for="item in diyInfo[0].bgImg" :key="item.id"
|
class="bg_img" />
|
</div>
|
</div>
|
</van-pull-refresh>
|
</div>
|
</template>
|
|
<script type="javascript">
|
import { getDiyInfo } from '@/api/oauth/index'
|
import NewHeader from '@/components/header/index.vue'
|
import imgGoods from './components/imgGoods.vue'
|
import { closeLoading, showLoading } from '@/utils/loading.js'
|
import NewImage from '@/components/image/index.vue'
|
|
export default {
|
components: {
|
NewHeader,
|
imgGoods,
|
NewImage
|
},
|
|
data () {
|
return {
|
isLoading: false,
|
diyInfo: [],
|
statusHeight: 0,
|
ws: null,
|
token: '',
|
showHeader: '',
|
isIos: false,
|
refreshStatusCode: '1'// 标记刷新状态
|
}
|
},
|
|
created () {
|
// Browser environment sniffing
|
var inBrowser = typeof window !== 'undefined'
|
// Weex 是使用流行的 Web 开发体验来开发高性能原生应用的框架
|
var inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform
|
// 两个不等号的含义有值取值，没值就是false 类似于 var a = 'b' || false
|
var weexPlatform = inWeex && WXEnvironment.platform.toLowerCase()
|
// 浏览器的用户代理报头：window.navigator.userAgent
|
var UA = inBrowser && window.navigator.userAgent.toLowerCase()
|
var isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || (weexPlatform === 'ios')
|
if (isIOS) {
|
this.isIos = isIOS
|
}
|
if (window.plus) {
|
this.ws = window.plus.webview.currentWebview()
|
this.setRefresh(true)
|
this.statusHeight = window.plus.navigator.getStatusbarHeight()
|
}
|
this.refreshStatusCode = '1'
|
this.getDiy({ status: 2, diyType: '2' })
|
},
|
methods: {
|
// navigateBack 返回 navigateClose关闭
|
clickLeft () {
|
if (window.wlyxls) {
|
window.wlyxls.navigateBack('')
|
} else if (window.webkit) {
|
window.webkit.messageHandlers.iosBrowserPop.postMessage('')
|
} else {
|
this.$router.go(-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: '2' })
|
}
|
} else {
|
this.getDiy({ status: 2, diyType: '2' })
|
}
|
},
|
onRefresh () {
|
this.diyInfo = []
|
this.refreshStatusCode = '1'
|
this.judgeReq()
|
},
|
async getDiy (params) {
|
const _this = this
|
try {
|
_this.diyInfo = []
|
showLoading(0)
|
const res = await getDiyInfo(params)
|
this.isLoading = false
|
closeLoading(0)
|
if (_this.ws) _this.ws.endPullToRefresh()
|
if (res.data && res.data.length) {
|
_this.diyInfo = JSON.parse(res.data[0].styleInfo)
|
_this.diyInfo.map((v) => {
|
// if (v.w) {
|
// v.w += 20
|
// }
|
// if (v.x) {
|
// v.x -= 10
|
// }
|
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)
|
// 是否展示商品轮播 goods-list高度215 标题高度35 限时购没有标题
|
if (v.h) v.height = _this.$setVw(v.isDisplayProd === '1' ? v.h - 215 - (v.type === '4' ? 0 : 35) : v.h)
|
if (v.borderRadius) v.borderRadiu = _this.$setVw(v.borderRadius)
|
if (v.strokeSize) v.borderSize = _this.$setVw(v.strokeSize)
|
})
|
} else {
|
_this.diyInfo = []
|
}
|
this.setDisplayStatus()
|
console.log(_this.diyInfo)
|
} catch (error) {
|
closeLoading(0)
|
this.setDisplayStatus()
|
if (this.ws) this.ws.endPullToRefresh()
|
}
|
},
|
// 处理页面展示状态---避免刷新页面数据还未加载的情况下展示[专区暂无展示活动]
|
setDisplayStatus () {
|
this.refreshStatusCode = this.diyInfo && this.diyInfo.length ? '2' : '3'
|
},
|
currentView (type) {
|
// 活动类型{1:满减2：满赠3:盲盒抽奖4:限时抢购5:优惠券,6:拼团活动}
|
const typeObj = {
|
basicSet: 'NewHeader',
|
1: 'imgGoods',
|
2: 'imgGoods',
|
3: 'imgGoods',
|
4: 'imgGoods',
|
5: 'imgGoods',
|
6: 'imgGoods',
|
proDetails: 'NewImage'
|
}
|
console.log(typeObj[type])
|
return typeObj[type]
|
}
|
}
|
}
|
</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;
|
}
|
.no-active-style {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 100vh;
|
font-size: 50px;
|
color: rgb(163, 170, 175);
|
}
|
</style>
|
