|
|
@ -1,7 +1,7 @@ |
|
|
<template> |
|
|
<template> |
|
|
<transition appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut"> |
|
|
<transition appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut"> |
|
|
<masker @click="close"> |
|
|
<masker @click="close"> |
|
|
<div v-if="actInfo.type === '档期活动'"> |
|
|
|
|
|
|
|
|
<div v-show="actInfo.type === '档期活动'"> |
|
|
<swiper |
|
|
<swiper |
|
|
:ref="mySwiper1" |
|
|
:ref="mySwiper1" |
|
|
class="carousel" |
|
|
class="carousel" |
|
|
@ -25,9 +25,9 @@ |
|
|
</swiper> |
|
|
</swiper> |
|
|
<img v-if="!actInfo.fileUrl_h.length" src="../../assets/images/empty_big.svg" class="banner" alt="" /> |
|
|
<img v-if="!actInfo.fileUrl_h.length" src="../../assets/images/empty_big.svg" class="banner" alt="" /> |
|
|
</div> |
|
|
</div> |
|
|
<div v-else class="shop-container"> |
|
|
|
|
|
|
|
|
<div v-show="actInfo.type !== '档期活动'" class="shop-container"> |
|
|
<swiper |
|
|
<swiper |
|
|
:ref="mySwiper1" |
|
|
|
|
|
|
|
|
:ref="mySwiper2" |
|
|
class="carousel1" |
|
|
class="carousel1" |
|
|
:slides-per-view="2" |
|
|
:slides-per-view="2" |
|
|
:autoplay="{ autoplay: actInfo.list.length > 1, disableOnInteraction: false }" |
|
|
:autoplay="{ autoplay: actInfo.list.length > 1, disableOnInteraction: false }" |
|
|
@ -35,7 +35,7 @@ |
|
|
:space-between="40" |
|
|
:space-between="40" |
|
|
:pagination="true" |
|
|
:pagination="true" |
|
|
:modules="modules1" |
|
|
:modules="modules1" |
|
|
@swiper="setControlledSwiper" |
|
|
|
|
|
|
|
|
@swiper="setControlledSwiper2" |
|
|
> |
|
|
> |
|
|
<swiper-slide v-for="item of actInfo.list" :key="item.entryCode" class="slide"> |
|
|
<swiper-slide v-for="item of actInfo.list" :key="item.entryCode" class="slide"> |
|
|
<img :src="item.content.fileUrl[0]" class="banner" /> |
|
|
<img :src="item.content.fileUrl[0]" class="banner" /> |
|
|
@ -47,10 +47,10 @@ |
|
|
<div class="label">{{ $t('activity.time') + item.content.time }}</div> |
|
|
<div class="label">{{ $t('activity.time') + item.content.time }}</div> |
|
|
<div class="label">{{ $t('activity.address') + switchLanguage(item.content, 'place') }}</div> |
|
|
<div class="label">{{ $t('activity.address') + switchLanguage(item.content, 'place') }}</div> |
|
|
</swiper-slide> |
|
|
</swiper-slide> |
|
|
<div v-if="actInfo.list.length > 1" class="swiper-prev-w" @click="pre"> |
|
|
|
|
|
|
|
|
<div v-if="actInfo.list.length > 1" class="swiper-prev-w" @click="pre2"> |
|
|
<img src="@/assets/images/activity/prev-b.png" alt="" /> |
|
|
<img src="@/assets/images/activity/prev-b.png" alt="" /> |
|
|
</div> |
|
|
</div> |
|
|
<div v-if="actInfo.list.length > 1" class="swiper-next-w" @click="next"> |
|
|
|
|
|
|
|
|
<div v-if="actInfo.list.length > 1" class="swiper-next-w" @click="next2"> |
|
|
<img src="@/assets/images/activity/next-b.png" alt="" /> |
|
|
<img src="@/assets/images/activity/next-b.png" alt="" /> |
|
|
</div> |
|
|
</div> |
|
|
</swiper> |
|
|
</swiper> |
|
|
@ -88,12 +88,18 @@ function close() { |
|
|
const { switchLanguage } = useSwitchLanguage() |
|
|
const { switchLanguage } = useSwitchLanguage() |
|
|
// 获取轮播实例 |
|
|
// 获取轮播实例 |
|
|
const mySwiper1 = shallowRef() |
|
|
const mySwiper1 = shallowRef() |
|
|
|
|
|
const mySwiper2 = shallowRef() |
|
|
|
|
|
|
|
|
// 获取swiper实例 |
|
|
// 获取swiper实例 |
|
|
function setControlledSwiper(swiper: any) { |
|
|
function setControlledSwiper(swiper: any) { |
|
|
mySwiper1.value = swiper |
|
|
mySwiper1.value = swiper |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 获取swiper实例 |
|
|
|
|
|
function setControlledSwiper2(swiper: any) { |
|
|
|
|
|
mySwiper2.value = swiper |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
// 前一个 |
|
|
// 前一个 |
|
|
function pre() { |
|
|
function pre() { |
|
|
mySwiper1.value.slidePrev() |
|
|
mySwiper1.value.slidePrev() |
|
|
@ -103,6 +109,16 @@ function pre() { |
|
|
function next() { |
|
|
function next() { |
|
|
mySwiper1.value.slideNext() |
|
|
mySwiper1.value.slideNext() |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 前一个 |
|
|
|
|
|
function pre2() { |
|
|
|
|
|
mySwiper2.value.slidePrev() |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 后一个 |
|
|
|
|
|
function next2() { |
|
|
|
|
|
mySwiper2.value.slideNext() |
|
|
|
|
|
} |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
|
|