<template>
|
<div class="swiper_3d" v-if="infoData" :style="{
|
width: infoData.width,
|
height: infoData.height,
|
position: infoData.fixedPosition ? 'fixed' : 'absolute',
|
top: infoData.codeY,
|
left: infoData.codeX,
|
zIndex: infoData.z,
|
}">
|
<div ref="ul" class="box" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"
|
:style="us">
|
<div class="item" v-for="(item, $index) in infoData.banners" :key="item.id"
|
@click="clickItem(item, $index)" :style="itemStyle($index, item)"
|
v-lazy:background-image="{src: item.url}">
|
<template v-if="item.checkedData && $index == 1">
|
<div v-for="(itemPublic, i) in item.checkedData.slice(0, 2)" :key="itemPublic.publicityId"
|
class="swiper_3d_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>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
var baseUrl = process.env.VUE_APP_H5_URL
|
// let startX, startY, endX, endY, moveX, moveY
|
let startX, endX, moveX
|
export default {
|
name: 'swiper-3d',
|
props: {
|
infoData: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
},
|
scrollTop: {
|
type: Number
|
}
|
},
|
data () {
|
return {
|
moveFlag: false,
|
rotateX: 0,
|
rotateY: 0,
|
ulStyle: {
|
transform: `rotateX(${this.rotateX}deg) rotateY(${this.rotateY}deg)`
|
}
|
}
|
},
|
computed: {
|
us () {
|
return Object.assign(this.ulStyle, {
|
// "transform-origin": `50% 50% -${this.findHypotenuse(this.infoData.w)}px`,
|
})
|
},
|
itemStyle () {
|
return function ($index, item) {
|
let t
|
// 三棱柱
|
switch ($index) {
|
case 0:
|
t = {
|
transform: ` translateZ(${0}px)`
|
}
|
break
|
case 1:
|
t = {
|
transform: 'rotateY(-240deg)',
|
'transform-origin': `50% 0 -${this.findHypotenuse(this.infoData.w) + 11}px`
|
}
|
break
|
case 2:
|
t = {
|
transform: ' rotateY(240deg)',
|
'transform-origin': `50% 0 -${this.findHypotenuse(this.infoData.w) + 11}px`
|
}
|
break
|
case 3:
|
t = {
|
display: 'none'
|
}
|
break
|
}
|
return Object.assign(t, {
|
width: this.infoData.width,
|
height: this.infoData.height
|
})
|
}
|
}
|
},
|
methods: {
|
findHypotenuse (base, perpendicular) {
|
const bSquare = base ** 2
|
const hypotenuse = Math.sqrt(bSquare / 3) / 2
|
return hypotenuse
|
},
|
touchstart (e) {
|
startX = e.changedTouches[0].clientX
|
// startY = e.changedTouches[0].clientY;
|
},
|
touchmove (e) {
|
this.moveFlag = true
|
moveX = e.changedTouches[0].clientX
|
// moveY = e.changedTouches[0].clientY;
|
const x = moveX - startX
|
// const y = startY - moveY;
|
this.ulStyle = {
|
transform: ` rotateY(${this.rotateY + x}deg)`,
|
'transform-origin': `50% 50% -${this.findHypotenuse(this.infoData.w) + 10}px`
|
}
|
},
|
touchend (e) {
|
endX = e.changedTouches[0].clientX
|
const x = endX - startX
|
// if (Math.abs(x) % 90 > 45) {
|
// this.rotateY += (x > 0 ? 90 : -90)
|
// }
|
if (!this.moveFlag) {
|
return
|
}
|
this.rotateY += x > 0 ? 120 : -120
|
this.ulStyle = {
|
transform: `rotateY(${this.rotateY}deg)`,
|
'transform-origin': `50% 50% -${this.findHypotenuse(this.infoData.w) + 10}px`
|
}
|
this.moveFlag = false
|
},
|
clickItem (active, index) {
|
if (this.$route.query.isPreview) return
|
if (active.link && active.link.indexOf('https') > -1) {
|
this.openUrl(active)
|
} else {
|
// 商品详情
|
if (active.type === '2') {
|
// 1 仅图片 2 商品详情 3活动详情 4文章列表
|
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 {
|
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?promotionId=${active.promotionId}&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: { promotionId: active.promotionId, flag: true }
|
})
|
}
|
}
|
// 优惠卷
|
if (active.type === '3' && active.promotionType == '5') {
|
if (this.$root.isIos) {
|
window.webkit.messageHandlers.iosRouter.postMessage('wlyxls://couponList')
|
} else {
|
window.wlyxls.toCouponListPage('')
|
}
|
}
|
// 新闻快报
|
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 scoped lang="scss">
|
.swiper_3d {
|
perspective: 800px;
|
perspective-origin: 50% 100px;
|
overflow-y: hidden;
|
.swiper_3d_text {
|
padding: 120px 40px 0 40px;
|
box-sizing: border-box;
|
color: #000;
|
text-align: left;
|
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 5px;
|
display: inline-block;
|
margin-bottom: 10px;
|
background: #eb0f17;
|
color: #fff;
|
}
|
}
|
.two {
|
padding-top: 20px;
|
}
|
}
|
.box {
|
position: relative;
|
transition: all 0.3s;
|
transform-style: preserve-3d;
|
transform: perspective(1000);
|
.item {
|
width: 100%;
|
height: 100%;
|
text-align: center;
|
color: white;
|
position: absolute;
|
overflow: hidden;
|
background-position: center;
|
background-size: 100%;
|
background-repeat: no-repeat;
|
}
|
}
|
</style>
|
