<!--
|
* @Author: 张嘉彬
|
* @Date: 2021-10-12 11:01:37
|
* @Description: 拼团模块
|
-->
|
<template>
|
<div class="collage-box">
|
<p>以下小伙伴正在发起拼团，你可以直接参加</p>
|
<div class="collage-user">
|
<swiper :options="swiperOptions" ref='goodsSwiper' class="swiper-box"
|
:class="{'swier-one':list.length===1}">
|
<swiper-slide v-for="(item,index) in list" :key="index" class="swiper-slide">
|
<div class="user-content">
|
<div class="user-msg">
|
<img v-if='item.memberPic' :src='item.memberPic | ossProcess' alt="">
|
<img v-else src='../../assets/images/goodsDetail/userM.png' alt="">
|
<p>{{item.memberNickName}}</p>
|
</div>
|
<div class="collage-time">
|
<p class="num">差{{item.lackNum}}人可拼成</p>
|
<p>剩余{{item.endCountDownSecStr}}</p>
|
</div>
|
<div @click="$emit('openGuide')" class="btn-box">
|
<span>去凑团</span>
|
</div>
|
</div>
|
</swiper-slide>
|
</swiper>
|
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data () {
|
return {
|
swiperOptions: {
|
direction: 'vertical', // 竖直方向
|
autoplay: {
|
delay: 3000,
|
disableOnInteraction: false
|
},
|
loop: false, // 循环切换
|
slidesPerView: 1, // 可视个数
|
loopedSlides: 6
|
},
|
list: [],
|
timer: null
|
}
|
},
|
props: {
|
collageUserList: {
|
type: Array,
|
default: () => []
|
}
|
},
|
created () {
|
this.list = [...this.collageUserList]
|
this.swiperOptions.slidesPerView = this.list && this.list.length > 1 ? 2 : 1
|
this.timer = setInterval(() => {
|
this.list.forEach((val, index) => {
|
val.endCountDownSec -= 1
|
// 拼团有效期结束 删除
|
if (val.endCountDownSec <= 0) {
|
this.list.splice(index, 1)
|
return
|
}
|
this.$set(val, 'endCountDownSecStr', this.countTime(val.endCountDownSec))
|
})
|
}, 1000)
|
},
|
beforeDestroy () {
|
clearInterval(this.timer)
|
},
|
methods: {
|
countTime (val) {
|
let day = parseInt(val / 60 / 60 / 24)
|
let hr = parseInt(val / 60 / 60 % 24)
|
let min = parseInt(val / 60 % 60)
|
let sec = parseInt(val % 60)
|
day = day > 9 ? day : day === 0 ? '' : `0${day}天 `
|
hr = hr > 9 ? hr : '0' + hr
|
min = min > 9 ? min : '0' + min
|
sec = sec > 9 ? sec : '0' + sec
|
return `${day}${hr}:${min}:${sec}`
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.collage-box {
|
border-radius: 8px;
|
background-color: #f6f6f6;
|
padding-top: 20px;
|
> p {
|
color: #666666;
|
font-size: 24px;
|
padding: 0 20px 10px 20px;
|
border-bottom: 2px solid #e6e6e6;
|
}
|
}
|
.swiper-box {
|
height: 200px;
|
.swiper-slide {
|
display: flex;
|
align-items: center;
|
}
|
}
|
.swier-one {
|
height: auto;
|
}
|
.collage-user {
|
padding: 20px;
|
color: #333333;
|
.user-content {
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.user-msg {
|
display: flex;
|
align-items: center;
|
img {
|
width: 60px;
|
height: 60px;
|
border-radius: 50%;
|
margin-right: 10px;
|
}
|
p {
|
width: 160px;
|
font-size: 24px;
|
}
|
}
|
.collage-time {
|
font-size: 24px;
|
.num {
|
color: var(--color-red);
|
margin-bottom: 7px;
|
}
|
}
|
.btn-box {
|
span {
|
display: inline-block;
|
width: 140px;
|
height: 60px;
|
line-height: 60px;
|
text-align: center;
|
color: var(--color-red);
|
border: 2px solid var(--color-red);
|
border-radius: 32px;
|
}
|
}
|
}
|
}
|
</style>
|
