<!--
|
* @Author: 张嘉彬
|
* @Date: 2021-10-19 11:38:15
|
* @Description: 促销活动图片+商品轮播
|
-->
|
|
<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:$setVw(infoData.h)
|
}" @click="clickGo">
|
<img :src="(infoData.img || infoData.fileUrl) | ossProcess" alt="" :style="{
|
width: infoData.width,
|
height:infoData.height
|
}" v-if="infoData.img || infoData.fileUrl" />
|
<!-- goods-list 实际高度215px -->
|
<div v-if="infoData.isDisplayProd === '1'&&goodsList.length" class="activity-title">
|
{{infoData.content}}</div>
|
<div v-if='goodsList.length' class="goods-list">
|
<swiper :options="swiperOptions" :ref='infoData.id' class="swiper-box">
|
<swiper-slide v-for="item in goodsList" :key="item.spuId" class="swiper-slide">
|
<div @click.stop="openGoodsDetail(item)" class="goods-card">
|
<div class="img-container">
|
<img v-lazy="item.prodImgUrl?($isMp4(item.prodImgUrl)?`${item.prodImgUrl}?x-oss-process=video/snapshot,t_1000,f_jpg,w_640,h_360`:item.prodImgUrl) : require('@/assets/images/find_logo.png')"
|
alt="">
|
</div>
|
<p class="name">{{item.prodName}}</p>
|
<!-- 限时购 -->
|
<template v-if='infoData.type==="4"'>
|
<p v-if='item.priceDesc&&!item.status' class="promotion-price">{{item.priceDesc}}</p>
|
<p v-else-if='item.endTime>0' class="promotion-price">
|
¥{{item.salePrice | fillerToFixed}}</p>
|
</template>
|
<!-- 满减 满赠 -->
|
<template v-else-if='infoData.type==="1"||infoData.type==="2"'>
|
<p class="promotion-price">¥{{item.prodPrice | fillerToFixed}}</p>
|
<p class="sale-price">¥{{item.salePrice | fillerToFixed}}</p>
|
</template>
|
<!-- 拼团 限时购 -->
|
<template v-else>
|
<p class="promotion-price">¥{{item.salePrice | fillerToFixed}}</p>
|
<p class="sale-price">¥{{item.prodPrice | fillerToFixed}}</p>
|
</template>
|
</div>
|
</swiper-slide>
|
</swiper>
|
<div @click.stop="changeSwiper('slidePrev')" v-if='goodsList.length>3'
|
class="swiper-button-prev">
|
</div>
|
<div @click.stop="changeSwiper('slideNext')" v-if='goodsList.length>3'
|
class="swiper-button-next">
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getGoodsListByid, getGoodsList } from '@/api/activityArea/index'
|
import { activityList, prodListForUser } from '@/api/activityList/index'
|
var baseUrl = process.env.VUE_APP_H5_URL
|
|
export default {
|
name: 'NewImage',
|
props: {
|
infoData: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
}
|
},
|
data() {
|
return {
|
goodsList: [],
|
swiperOptions: {
|
autoplay: {
|
delay: 3000,
|
disableOnInteraction: false
|
},
|
// loop: true, // 循环切换
|
slidesPerView: 3, // 可视个数
|
loopedSlides: 6
|
}
|
}
|
},
|
filters: {
|
// 保留两位小数
|
fillerToFixed(val) {
|
return val ? Number(val).toFixed(2) : '0.00'
|
}
|
},
|
created() {
|
// 是否展示商品
|
if (this.infoData.isDisplayProd === '1') {
|
this.getGoodsListFn()
|
}
|
},
|
methods: {
|
// 打开商品详情
|
openGoodsDetail(goods) {
|
if (this.$route.query.isPreview) return
|
const data = JSON.parse(goods.extparams)
|
const params = {
|
activityType: this.infoData.type,
|
shopSpuId: data.shopSpuId,
|
spuId: goods.prodId,
|
shopSkuId: data.shopSkuId
|
}
|
if (this.$root.isIos) {
|
window.webkit.messageHandlers.iosRouter.postMessage(
|
`wlyxls://product_detail?activityType=${params.activityType}&shopSpuId=${params.shopSpuId}&spuId=${params.spuId}&shopSkuId=${params.shopSkuId}`
|
)
|
} else if (window.wlyxls) {
|
window.wlyxls.toCommodityDetailPage(JSON.stringify(params))
|
} else {
|
this.$router.push({
|
path: '/goodsDetail',
|
query: params
|
})
|
}
|
},
|
// 左右切换商品
|
changeSwiper(type) {
|
this.$refs[this.infoData.id].swiper[type]()
|
},
|
// 获取商品轮播列表
|
async getGoodsListFn() {
|
if (this.infoData.type === '1' || this.infoData.type === '2') {
|
getGoodsList({ promotionId: this.infoData.promotionId }).then(res => {
|
this.goodsList = res.data ? res.data.slice(0, 6).map(val => {
|
val.prodId = val.spuId
|
val.prodPrice = val.promotionPrice
|
val.prodName = val.spuName
|
val.prodImgUrl = val.imageUrl
|
val.extparams = JSON.stringify({
|
shopSpuId: val.shopSpuId
|
})
|
return val
|
}) : []
|
})
|
} else if (this.infoData.type === '4') {
|
const res = localStorage.getItem('access_token') ? await prodListForUser() : await activityList()
|
let arr = []
|
res.data && res.data.forEach(val => {
|
val.prodList && val.prodList.forEach(item => {
|
if (val.status === '10') {
|
item.status = true
|
}
|
item.priceDesc = val.limitTimePromotion.priceDesc
|
item.endTime = new Date(val.limitTimePromotion.promotionEndTime.replace(/-/g, '/')).getTime()
|
})
|
arr = [...arr, ...val.prodList]
|
})
|
this.goodsList = arr.slice(0, 6)
|
} else {
|
getGoodsListByid({ promotionId: this.infoData.promotionId }).then(res => {
|
this.goodsList = res.data ? res.data.slice(0, 6) : []
|
})
|
}
|
},
|
clickGo() {
|
if (this.$route.query.isPreview) return
|
const { infoData } = this
|
// 配置有跳转链接
|
if (infoData.link) {
|
this.openUrl(infoData.link)
|
}
|
// 满减满赠
|
if (infoData.type === '1' || infoData.type === '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 === '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 === '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 === '5') {
|
if (this.$root.isIos) {
|
window.webkit.messageHandlers.iosRouter.postMessage('wlyxls://couponList')
|
} else {
|
if (window.wlyxls) {
|
window.wlyxls.toCouponListPage('')
|
}
|
}
|
}
|
// 拼团活动
|
if (infoData.type === '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))
|
} else {
|
this.$router.push({
|
path: '/collageActivity',
|
query: { promotionId: infoData.promotionId, flag: true }
|
})
|
}
|
}
|
},
|
// 链接配置
|
openUrl(link) {
|
let isExit = true
|
if (link.indexOf('/blindBoxNew') !== -1 || link.indexOf('/activity') !== -1) {
|
isExit = false
|
}
|
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) {
|
const params = {
|
url: `${link}`,
|
isShowTitle: isExit // 是否显示顶部返回栏，默认显示
|
}
|
window.wlyxls.openUrlOnNewPage(JSON.stringify(params))
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang='scss' scoped>
|
.img_box {
|
overflow: hidden;
|
font-size: 0;
|
border-radius: 10px;
|
}
|
.activity-title {
|
padding: 10px 0 10px 19px;
|
font-size: 32px;
|
font-weight: 600;
|
color: #333333;
|
line-height: 50px;
|
background-color: #fff;
|
}
|
img {
|
-webkit-touch-callout: none;
|
}
|
.goods-list {
|
height: 430px;
|
box-sizing: border-box;
|
background-color: #fff;
|
padding: 27px 40px;
|
position: relative;
|
.swiper-button-prev {
|
width: 32px;
|
height: 32px;
|
position: absolute;
|
top: 50%;
|
left: 10px;
|
margin-top: -60px;
|
z-index: 9999;
|
cursor: pointer;
|
background-position: center;
|
background-repeat: no-repeat;
|
background-image: url("~@/assets/images/activityArea/prev.png");
|
background-size: inherit;
|
}
|
.swiper-button-next {
|
@extend .swiper-button-prev;
|
left: auto;
|
right: 10px;
|
background-image: url("~@/assets/images/activityArea/next.png");
|
}
|
}
|
.swiper-slide {
|
.goods-card {
|
width: 100%;
|
padding: 0 10px;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
}
|
.img-container {
|
height: 219px;
|
position: relative;
|
overflow: hidden;
|
img {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
max-width: 100%;
|
margin: auto;
|
}
|
}
|
.name {
|
font-size: 26px;
|
text-align: justify;
|
margin: 10px 0;
|
display: -webkit-box;
|
-webkit-line-clamp: 2;
|
-webkit-box-orient: vertical;
|
overflow: hidden;
|
}
|
.promotion-price {
|
width: 100%;
|
color: #ce3135;
|
font-size: 20px;
|
margin-bottom: 10px;
|
}
|
.sale-price {
|
width: 100%;
|
font-size: 16px;
|
color: #999999;
|
text-decoration: line-through;
|
}
|
}
|
</style>
|
