122 lines
2.5 KiB
Vue
122 lines
2.5 KiB
Vue
<template>
|
||
<div class="notice">
|
||
<swiper :options="swiperOption" class="notice-swiper">
|
||
<swiper-slide
|
||
class="notice-swiper-slide"
|
||
v-for="(item, index) in recordList"
|
||
:key="`notice-swiper-slide-${item.erbanNo}-${index}`"
|
||
>
|
||
<div class="notice-swiper-slide-content">
|
||
<label>{{ item.nick }}</label>
|
||
<span>{{ text }}</span>
|
||
<label>{{ item.prizeName }}×{{ item.num || 1 }}</label>
|
||
</div>
|
||
</swiper-slide>
|
||
</swiper>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters } from "vuex";
|
||
import { queryPrizeMsg } from "@/api";
|
||
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
|
||
export default {
|
||
name: "SwiperNotice",
|
||
components: {
|
||
Swiper,
|
||
SwiperSlide
|
||
},
|
||
props: {
|
||
text: {
|
||
type: String,
|
||
default: ""
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
recordList: [],
|
||
swiperOption: {
|
||
direction: "vertical",
|
||
autoplay: {
|
||
delay: 3000 // 5秒切换一次
|
||
},
|
||
// 设置轮播可循环
|
||
loop: true
|
||
},
|
||
interval: 0
|
||
};
|
||
},
|
||
computed: {
|
||
...mapGetters(["drawType"]),
|
||
actId() {
|
||
return this.$route.query.actId;
|
||
}
|
||
},
|
||
watch: {
|
||
drawType() {
|
||
clearInterval(this.interval);
|
||
this.getQueryPrizeMsg();
|
||
this.interval = setInterval(this.getQueryPrizeMsg, 120 * 1000);
|
||
}
|
||
},
|
||
created() {
|
||
this.getQueryPrizeMsg();
|
||
},
|
||
mounted() {
|
||
this.interval = setInterval(this.getQueryPrizeMsg, 120 * 1000);
|
||
},
|
||
destroyed() {
|
||
clearInterval(this.interval);
|
||
},
|
||
methods: {
|
||
getQueryPrizeMsg() {
|
||
queryPrizeMsg({ actId: this.actId, drawType: this.drawType }).then(
|
||
res => {
|
||
const { code, data, message } = res;
|
||
if (code === 200) {
|
||
this.recordList = data;
|
||
} else {
|
||
this.$toast.fail(message);
|
||
}
|
||
}
|
||
);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
@import "~swiper/css/swiper.css";
|
||
.notice {
|
||
width: 618px;
|
||
height: 64px;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
margin: 0 auto;
|
||
&-swiper {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
&-slide {
|
||
width: 100%;
|
||
height: 100%;
|
||
&-content {
|
||
margin: 0 30px;
|
||
text-align: center;
|
||
line-height: 64px;
|
||
white-space: nowrap;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
font-size: 24px;
|
||
& > label {
|
||
color: #ffe26c;
|
||
}
|
||
& > span {
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|