Browse Source

fix: 🧩 优化

pull/24/head
liyongle 3 years ago
parent
commit
55736db9b4
  1. 28
      src/components/ActivityDetail/MainActivityDetail.vue

28
src/components/ActivityDetail/MainActivityDetail.vue

@ -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>

Loading…
Cancel
Save