<template>
|
<div class="wrapper" :style="{
|
width: infoData.width,
|
height: infoData.height,
|
position: infoData.fixedPosition ? 'fixed' : 'absolute',
|
top: infoData.codeY,
|
left: infoData.codeX,
|
zIndex: infoData.z,
|
}" :class="showSwiper ? '' : 'fade_out'">
|
<i v-if="infoData.closeBtn" class="iconfont icon-del del_icon" :style="{
|
position: 'absolute',
|
top: $setVw(5),
|
right: $setVw(5),
|
zIndex: infoData.z,
|
zIndex: 9999,
|
fontSize: $setVw(20),
|
}" @click="clickDel"></i>
|
<swiper :options="swiperOption" ref="mySwiper" v-if="infoData.banners.length != 0"
|
style="height:100%;">
|
<swiper-slide v-for="(item, index) in infoData.banners" :key="index" style="height:100%;">
|
<img :data-src="item.url" :src="item.url" alt="" :style="{
|
width: infoData.width,
|
}" style="height:100%;opacity:1" class="swiper-img"
|
@click="swiperClickFn(index, item)" />
|
<template v-if="item.checkedData && index == 1">
|
<div v-for="(itemPublic, i) in item.checkedData.slice(0, 2)" :key="itemPublic.publicityId"
|
@click="swiperClickFn(index, item)" class="swiper_text" :class="i ? 'two' : ''">
|
<div class="common-txt-color publicityName font26">
|
{{ itemPublic.publicityName }}
|
</div>
|
<p class="itemArticle text99" :class="i == 0 && iArticle == 0 ? 'b' : ''"
|
v-for="(itemArticle, iArticle) in itemPublic.articleArray.slice(0, 4)"
|
:key="itemArticle.articleId">
|
{{ itemArticle.articleName }}
|
</p>
|
</div>
|
</template>
|
<!-- height: infoData.height, -->
|
</swiper-slide>
|
<div class="swiper-pagination" slot="pagination"></div>
|
</swiper>
|
</div>
|
</template>
|
|
<script>
|
var baseUrl = process.env.VUE_APP_H5_URL
|
export default {
|
name: 'NewSwiper',
|
props: {
|
infoData: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
}
|
},
|
data () {
|
return {
|
showSwiper: true,
|
activeIndex: 0,
|
swiperOption: {
|
// loop: true, // 开启循环模式
|
pagination: {
|
el: this.infoData.indicatorPoint ? '.swiper-pagination' : '',
|
clickable: true,
|
renderBullet (index, className) {
|
return `<span class="${className} swiper-pagination-bullet-custom "></span>`
|
}
|
},
|
autoplay: this.infoData.switch ? {
|
disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay
|
delay: this.infoData.switchTime // 自动切换的时间间隔
|
} : false
|
}
|
}
|
},
|
watch: {
|
infoData (newValue, oldValue) {
|
console.log(111, this.infoData.switchTime)
|
}
|
},
|
computed: {
|
swiper () {
|
return this.$refs.mySwiper.$swiper
|
}
|
},
|
methods: {
|
clickDel () {
|
this.showSwiper = false
|
},
|
swiperClickFn (index, active) {
|
if (this.$route.query.isPreview) return
|
if (active.link && active.link.indexOf('https') > -1) {
|
this.openUrl(active)
|
} else {
|
// 商品详情
|
if (active.type === '2') {
|
const _obj = {
|
shopSpuId: active.shopSpuId
|
}
|
const params = active.shopSkuId ? { ..._obj, ...{ shopSkuId: active.shopSkuId } } : _obj
|
console.log(params, '====商品详情传参')
|
if (this.$root.isIos) {
|
const _strP = `?shopSpuId=${params.shopSpuId}`
|
window.webkit.messageHandlers.iosRouter.postMessage(
|
`wlyxls://product_detail${params.shopSkuId ? `${_strP}&shopSkuId=${params.shopSkuId}` : _strP}`
|
)
|
} else {
|
if (window.wlyxls) {
|
window.wlyxls.toCommodityDetailPage(JSON.stringify(params))
|
}
|
}
|
}
|
if (active.type === '1' && active.link) {
|
this.openUrl(active)
|
}
|
// 满减满赠
|
if ((active.type === '3' && active.promotionType == '1') || active.promotionType == '2') {
|
// jumpLink = `/pages/activity/actiiveCuostom?promotionId=${active.promotionId}`;
|
const params = {
|
promotionId: active.promotionId || ''
|
}
|
if (this.$root.isIos) {
|
window.webkit.messageHandlers.iosRouter.postMessage(
|
`wlyxls://category_search_result?promotionId=${params.promotionId}`
|
)
|
} else {
|
window.wlyxls.toActivityCommodityListPage(JSON.stringify(params))
|
}
|
}
|
// 盲盒
|
if (active.type === '3' && active.promotionType == '3') {
|
const _url = `${baseUrl}/blindBoxNew?promotionId=${active.promotionId}&flag=true`
|
console.log(encodeURIComponent(_url), '=====')
|
// 打开新的页面
|
if (window.wlyxls) {
|
const params = {
|
url: _url,
|
isShowTitle: false // 是否显示顶部返回栏，默认显示
|
}
|
window.wlyxls.openUrlOnNewPage(JSON.stringify(params))
|
} else if (window.webkit) {
|
console.log(`wlyxls://browser?url=${encodeURIComponent(_url)}&isShowTitle=false`)
|
window.webkit.messageHandlers.iosRouter.postMessage(
|
`wlyxls://browser?url=${encodeURIComponent(_url)}&isShowTitle=false`
|
)
|
} else {
|
this.$router.push({
|
path: '/blindBoxNew',
|
query: { promotionId: active.promotionId, flag: true }
|
})
|
}
|
}
|
// 限时抢购
|
if (active.type === '3' && active.promotionType == '4') {
|
const _url = `${baseUrl}/activity?flag=true`
|
// 打开新的页面
|
if (window.wlyxls) {
|
const params = {
|
url: _url,
|
isShowTitle: false // 是否显示顶部返回栏，默认显示
|
}
|
window.wlyxls.openUrlOnNewPage(JSON.stringify(params))
|
} else if (window.webkit) {
|
console.log(`wlyxls://browser?url=${encodeURIComponent(_url)}&isShowTitle=false`)
|
window.webkit.messageHandlers.iosRouter.postMessage(
|
`wlyxls://browser?url=${encodeURIComponent(_url)}&isShowTitle=false`
|
)
|
} else {
|
this.$router.push({
|
path: '/activity',
|
query: { flag: true }
|
})
|
}
|
}
|
// 优惠卷
|
if (active.type === '3' && active.promotionType == '5') {
|
if (this.$root.isIos) {
|
window.webkit.messageHandlers.iosRouter.postMessage('wlyxls://couponList')
|
} else {
|
if (window.wlyxls) {
|
window.wlyxls.toCouponListPage('')
|
}
|
}
|
}
|
// 拼团活动
|
if (active.type === '3' && active.promotionType === '6') {
|
const _url = `${baseUrl}/collageActivity?promotionId=${active.promotionId}&flag=true`
|
if (this.$root.isIos) {
|
window.webkit.messageHandlers.iosRouter.postMessage(`wlyxls://browser?url=${encodeURIComponent(_url)}`)
|
} else {
|
if (window.wlyxls) {
|
const params = {
|
url: _url,
|
isShowTitle: false // 是否显示顶部返回栏，默认显示
|
}
|
// 打开新的页面
|
window.wlyxls.openUrlOnNewPage(JSON.stringify(params))
|
}
|
}
|
}
|
// 活动中心
|
if (active.type === '3' && active.promotionType === '7') {
|
const _url = `${baseUrl}/activityArea?flag=true`
|
if (this.$root.isIos) {
|
window.webkit.messageHandlers.iosRouter.postMessage(`wlyxls://browser?url=${encodeURIComponent(_url)}`)
|
} else {
|
if (window.wlyxls) {
|
const params = {
|
url: _url,
|
isShowTitle: false // 是否显示顶部返回栏，默认显示
|
}
|
// 打开新的页面
|
window.wlyxls.openUrlOnNewPage(JSON.stringify(params))
|
}
|
}
|
}
|
// 新闻快报
|
if (active.type === '4') {
|
const params = {
|
position: index, // 0-品牌文化 1-新闻快报
|
publicityData: JSON.stringify(active)
|
}
|
if (this.$root.isIos) {
|
window.webkit.messageHandlers.toPublicityPage.postMessage(
|
JSON.stringify(params)
|
)
|
} else {
|
if (window.wlyxls) {
|
window.wlyxls.toPublicityPage(JSON.stringify(params))
|
}
|
}
|
}
|
if (active.type === '1' && !active.link) {
|
this.$toast('正在研发中，敬请期待')
|
}
|
}
|
},
|
// 链接配置
|
openUrl (active) {
|
let isExit = true
|
if (
|
active.link.indexOf('/blindBoxNew') != -1 ||
|
active.link.indexOf('/activity') != -1
|
) {
|
isExit = false
|
}
|
const params = {
|
url: `${active.link}`,
|
isShowTitle: isExit // 是否显示顶部返回栏，默认显示
|
}
|
if (this.$root.isIos) {
|
console.log(`wlyxls://browser?url=${encodeURIComponent(active.link)}&isShowTitle=${isExit}`)
|
window.webkit.messageHandlers.iosRouter.postMessage(
|
`wlyxls://browser?url=${encodeURIComponent(active.link)}&isShowTitle=${isExit}`
|
)
|
} else {
|
if (window.wlyxls) {
|
window.wlyxls.openUrlOnNewPage(JSON.stringify(params))
|
}
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="stylus">
|
.fade_in {
|
opacity: 1;
|
}
|
|
.swiper-img {
|
-webkit-touch-callout: none;
|
}
|
|
.swiper-point {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
width: 100%;
|
}
|
|
.fade_out {
|
-webkit-transition: all 1.5s;
|
-moz-transition: all 1.5s;
|
-ms-transition: all 1.5s;
|
-o-transition: all 1.5s;
|
transition: all 1.5s;
|
opacity: 0;
|
}
|
|
.del_icon {
|
color: rgba(187, 173, 173, 0.5);
|
}
|
|
.swiper_text {
|
position: absolute;
|
top: 0;
|
left: 0;
|
padding: 120px 40px 0 40px;
|
color: #000;
|
text-align: left;
|
width: 100%;
|
box-sizing: border-box;
|
|
p {
|
font-size: 22px;
|
transform-origin: 0 0;
|
line-height: 42px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
.b {
|
color: #666;
|
font-size: 26px;
|
}
|
|
.publicityName {
|
padding: 0 10px;
|
display: inline-block;
|
margin-bottom: 10px;
|
background: #EB0F17;
|
color: #fff;
|
}
|
}
|
|
.two {
|
padding-top: 356px;
|
}
|
</style>
|
