<template>
|
<div class="img_box" :style="{
|
position: infoData.fixedPosition ? 'fixed' : 'absolute',
|
top: infoData.codeY,
|
left: infoData.codeX,
|
zIndex: infoData.fixedPosition ? 99999 + infoData.z : infoData.z,
|
width: infoData.width,
|
height: showImg ? infoData.height : 0,
|
}" :class="showImg ? '' : 'fade_out'" @click="clickGo">
|
<img v-lazy="(infoData.img || infoData.fileUrl)" alt="" :style="{
|
width: infoData.width,
|
height: showImg ? infoData.height : 0,
|
}" v-if="infoData.img || infoData.fileUrl" />
|
<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.stop="clickDel"></i>
|
</div>
|
</template>
|
|
<script>
|
var baseUrl = process.env.VUE_APP_H5_URL
|
export default {
|
name: 'NewImage',
|
props: {
|
infoData: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
}
|
},
|
data () {
|
return {
|
showImg: true
|
}
|
},
|
computed: {},
|
methods: {
|
clickDel () {
|
this.showImg = false
|
},
|
clickGo () {
|
if (this.$route.query.isPreview) return
|
const { infoData } = this
|
if (infoData.link) {
|
this.openUrl(infoData.link)
|
}
|
// 商品分类
|
if (infoData.catId && infoData.type === 'proCategory') {
|
const params = {
|
catId: infoData.catId
|
}
|
if (this.$root.isIos) {
|
window.webkit.messageHandlers.iosRouter.postMessage(
|
`wlyxls://category_search_result?catId=${params.catId}`
|
)
|
} else {
|
window.wlyxls.toCommodityListPage(JSON.stringify(params))
|
}
|
}
|
// 商品详情
|
if (infoData.spuId && infoData.type === 'proDetails') {
|
const _obj = {
|
shopSpuId: infoData.shopSpuId
|
}
|
const params = infoData.shopSkuId ? { ..._obj, ...{ shopSkuId: infoData.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))
|
}
|
}
|
}
|
// 1:满减2：满赠3:盲盒抽奖4:限时抢购5:优惠券,6:拼团活动,7:活动中心
|
// 满减满赠
|
if ((infoData.type === 'actDetails' && infoData.promotionType === '1') || infoData.promotionType === '2') {
|
const params = {
|
promotionId: infoData.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 (infoData.type === 'actDetails' && infoData.promotionType === '3') {
|
const _url = `${baseUrl}/blindBoxNew?promotionId=${infoData.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: '/blindBoxNew',
|
query: { promotionId: infoData.promotionId, flag: true }
|
})
|
}
|
}
|
// 限时抢购
|
if (infoData.type === 'actDetails' && infoData.promotionType === '4') {
|
const _url = `${baseUrl}/activity?promotionId=${infoData.promotionId}&flag=true`
|
if (window.wlyxls) {
|
const params = {
|
url: _url,
|
isShowTitle: false // 是否显示顶部返回栏，默认显示
|
}
|
// 打开新的页面
|
window.wlyxls.openUrlOnNewPage(JSON.stringify(params))
|
} else if (window.webkit) {
|
window.webkit.messageHandlers.iosRouter.postMessage(`wlyxls://browser?url=${encodeURIComponent(_url)}`)
|
} else {
|
this.$router.push({
|
path: '/activity',
|
query: { promotionId: infoData.promotionId, flag: true }
|
})
|
}
|
}
|
// 优惠卷
|
if (infoData.type === 'actDetails' && infoData.promotionType === '5') {
|
if (this.$root.isIos) {
|
window.webkit.messageHandlers.iosRouter.postMessage('wlyxls://couponList')
|
} else {
|
if (window.wlyxls) {
|
window.wlyxls.toCouponListPage('')
|
}
|
}
|
}
|
// 拼团活动
|
if (infoData.type === 'actDetails' && infoData.promotionType === '6') {
|
const _url = `${baseUrl}/collageActivity?promotionId=${infoData.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 (infoData.type === 'actDetails' && infoData.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))
|
}
|
}
|
}
|
},
|
// 链接配置
|
openUrl (link) {
|
let isExit = true
|
if (link.indexOf('/blindBoxNew') != -1 || link.indexOf('/activity') != -1) {
|
isExit = false
|
}
|
const params = {
|
url: `${link}`,
|
isShowTitle: isExit // 是否显示顶部返回栏，默认显示
|
}
|
if (this.$root.isIos) {
|
console.log(`wlyxls://browser?url=${encodeURIComponent(link)}&isShowTitle=${isExit}`)
|
window.webkit.messageHandlers.iosRouter.postMessage(`wlyxls://browser?url=${encodeURIComponent(link)}&isShowTitle=${isExit}`)
|
} else {
|
if (window.wlyxls) {
|
window.wlyxls.openUrlOnNewPage(JSON.stringify(params))
|
}
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.fade_in {
|
opacity: 1;
|
}
|
img {
|
-webkit-touch-callout: none;
|
}
|
.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;
|
height: 0;
|
}
|
.del_icon {
|
color: rgba(187, 173, 173, 0.5);
|
}
|
</style>
|
