113 lines
2.4 KiB
Vue
113 lines
2.4 KiB
Vue
<template>
|
|
<view class="trumpet">
|
|
<image src="@/static/zy/index/trumpet.png" mode="aspectFit" class="trumpet-icon"></image>
|
|
<swiper vertical="true" class="trumpet-swiper" circular autoplay disable-touch>
|
|
<swiper-item class="trumpet-swiper-item" v-for="(item,index) in boxResultList" :key="index">
|
|
<view class="trumpet-txt">{{item}}</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
boxResultApi
|
|
} from '@/API/index.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
boxResultTimer: null,
|
|
boxResultList: []
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getBoxResult()
|
|
this.boxResultTimer = setInterval(() => {
|
|
this.getBoxResult()
|
|
}, 6000)
|
|
},
|
|
methods: {
|
|
// 获取滚动公告
|
|
getBoxResult() {
|
|
|
|
boxResultApi().then(res => {
|
|
if (res.code === 200) {
|
|
let arr = []
|
|
res.data.forEach(item => {
|
|
let time = ''
|
|
const date = new Date(item.time * 1000);
|
|
const now = new Date();
|
|
const diffInSeconds = Math.floor((now - date) / 1000);
|
|
if (diffInSeconds === 0) {
|
|
time = `刚刚`
|
|
} else {
|
|
time = `${diffInSeconds}秒前`
|
|
}
|
|
arr.unshift(`${item.nickName}在${time}开启${item.boxName}得到了${item.productName}`)
|
|
})
|
|
|
|
arr.forEach(item => {
|
|
const match = this.boxResultList.find(bItem => bItem === item);
|
|
if (!match) {
|
|
this.boxResultList.unshift(item);
|
|
}
|
|
})
|
|
if (this.boxResultList.length > 20) {
|
|
this.boxResultList = this.boxResultList.slice(0, 20);
|
|
}
|
|
// console.log(this.boxResultList)
|
|
} else {
|
|
this.$api.msg(res.message)
|
|
}
|
|
})
|
|
},
|
|
},
|
|
beforeDestroy() {
|
|
clearInterval(this.boxResultTimer)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.trumpet {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 45rpx;
|
|
margin-left: 67rpx;
|
|
width: 617rpx;
|
|
height: 64rpx;
|
|
background: #F26378;
|
|
border-radius: 32rpx;
|
|
border: 0px solid #AFA08D;
|
|
padding: 0 20rpx;
|
|
|
|
.trumpet-icon {
|
|
width: 35rpx;
|
|
height: 35rpx;
|
|
}
|
|
|
|
.trumpet-swiper {
|
|
margin-left: 23rpx;
|
|
margin-top: 4rpx;
|
|
width: 503rpx;
|
|
height: 60rpx;
|
|
|
|
.trumpet-swiper-item {
|
|
width: 503rpx;
|
|
height: 60rpx;
|
|
|
|
.trumpet-txt {
|
|
width: 503rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |