气泡弹弹弹
<template>
<view>
<view :class="dataList?.length == 1 ? 'bubble_flex_only_one':'bubble_flex'">
<view class="buble" v-for="(item, index) in dataList" :key="index" :data-speed="item.speed"
:style="{'margin-top': dataList.length == 1 ? '-10px':index % 2 === 0 ? '40px' : '-10px'}"
@click="bubleClick(index)" :class="{ 'hidden': !item.isShow }">
<image class="star_left_top" :src="
item.isTomorrow
? $dataUrl.imgUrl+'bubble/img/star_left_top_to.png'
: $dataUrl.imgUrl+'bubble/img/star_left_top.png'
" />
<view class="flex-col" :class="
item.isTomorrow ? 'text_wrapper_num_tomorrow' : 'text_wrapper_num'
" :style="`background-image: url(${$dataUrl.imgUrl}bubble/img/${item.isTomorrow ? 'bubble_bg_blue' : 'bubble_bg_yellow'}.png);`">
<text class="text_num">{{ item.num }}</text>
</view>
<view class="box_text flex-col">
<view class="flex-col" :class="item.isTomorrow ? 'block_text_tomorrow' : 'block_text'">
<view class="flex-col" :class="item.isTomorrow ? 'bubble_text_tomorrow' : 'bubble_text'"
:style="`background-image: url(${$dataUrl.imgUrl}bubble/img/${item.isTomorrow ? 'bubble_txt_bg' : 'bubble_txt_bg_yellow'}.png);`">
<text class="text_76">{{ item.name }}</text>
</view>
<image class="star_right_bottom" :src="
item.isTomorrow
? $dataUrl.imgUrl+'bubble/img/star_to.png'
: $dataUrl.imgUrl+'bubble/img/star.png'
" />
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "yqc-bubble",
emits: ["getBubbleItem", "clickIndex"],
props: {
dataList: {
type: Array,
default: () => [{
num: 50,
name: "每日领取",
speed: "fast",
isTomorrow: false,
isShow: true
},
{
num: 1000,
name: "黄金VIP",
speed: "slow",
isTomorrow: false,
isShow: true
},
{
num: 2000,
name: "数据金卡",
speed: "default",
isTomorrow: false,
isShow: true
},
{
num: 3000,
name: "明日领取",
speed: "slow",
isTomorrow: true,
isShow: true
},
],
},
},
data() {
return {
clickIndex: -1,
$dataUrl: this.$dataUrl,
};
},
mounted() {},
methods: {
bubleClick(index) {
this.clickIndex = index;
this.$emit('clickIndex', index)
this.$emit('getBubbleItem', this.dataList[index])
if (this.dataList[index].isTomorrow) {
//如果是明日 不需要处理
return
}
// console.log("点击了",this.dataList[index].name);
//点击哪个 就隐藏哪个
this.dataList[index].isShow = false;
}
}
};
</script>
<style lang="scss" scoped>
.box_text {
height: 20px;
width: 84px;
}
.block_text {
border-radius: 19px;
width: 80px;
position: relative;
top: -10px;
padding: 5px;
}
.block_text_tomorrow {
border-radius: 19px;
width: 80px;
position: relative;
top: -10px;
padding: 5px;
}
.bubble_text {
position: absolute;
background-size: 100%;
background-repeat: no-repeat;
left: 0px;
text-align: center;
width: 80px;
height: 23px;
line-height: 23px;
font-size: 11px;
}
.bubble_text_tomorrow {
position: absolute;
background-size: 100%;
background-repeat: no-repeat;
left: 0px;
text-align: center;
width: 80px;
height: 23px;
line-height: 23px;
font-size: 11px;
}
.text_76 {
color: rgba(64, 40, 22, 1);
font-size: 11px;
font-weight: normal;
text-align: center;
font-weight: bold;
white-space: nowrap;
}
// 右边星星
.star_right_bottom {
position: absolute;
left: 72px;
top: 0px;
width: 20rpx;
height: 20rpx;
}
.star_left_top {
position: absolute;
left: 3px;
top: -2px;
width: 16px;
height: 16px;
}
.text_wrapper_num {
width: 55px;
height: 39px;
text-align: center;
background-repeat: no-repeat;
background-size: 100%;
padding: 11px 6px 13px 8px;
}
.text_wrapper_num_tomorrow {
width: 55px;
height: 39px;
text-align: center;
background-size: 100%;
padding: 11px 6px 13px 8px;
}
.text_num {
overflow-wrap: break-word;
color: rgba(64, 40, 22, 1);
font-size: 15px;
font-weight: bold;
text-align: center;
white-space: nowrap;
}
.bubble_flex {
margin-top: -32px;
display: flex;
justify-content: space-around;
height: 200rpx;
}
.bubble_flex_only_one {
margin-top: -32px;
display: flex;
justify-content: flex-end;
height: 200rpx;
}
.buble {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 84px;
height: 60px;
border-radius: 25px;
animation: pulse var(--animation-duration, 1.5s) infinite;
-webkit-animation: pulse var(--animation-duration, 1.5s) infinite;
}
.hidden {
opacity: 0;
pointer-events: none;
}
/* 通过data属性匹配不同时长 */
.buble[data-speed="fast"] {
--animation-duration: 1s;
}
.buble[data-speed="slow"] {
--animation-duration: 2s;
}
.buble[data-speed="default"] {
--animation-duration: 1.5s;
}
/* 默认值（可选） */
.buble {
--animation-duration: 1.5s;
}
@keyframes pulse {
0% {
transform: translate(0px, 0px);
}
50% {
transform: translate(0px, -10px);
}
100% {
transform: translate(0px, 0px);
}
}
/*Safari 和 Chrome:*/
@-webkit-keyframes mymove {
0% {
transform: translate(0px, 0px);
}
50% {
transform: translate(0px, -10px);
}
100% {
transform: translate(0px, 0px);
}
}
</style>
<yqc-bubble style="margin-top: 0px;" :dataList="bubbleList" @getBubbleItem="clickBubbleItem"
@clickIndex="bubbleClickIndex"></yqc-bubble>
data() {
return {
bubbleList: [{
num: 500,
name: "每日领取",
speed: "fast",
isTomorrow: false,
isShow: true
},
{
num: 1000,
name: "签到",
speed: "slow",
isTomorrow: false,
isShow: true
},
{
num: 2000,
name: "看视频",
speed: "default",
isTomorrow: false,
isShow: true
},
{
num: 1000,
name: "明日再来",
speed: "slow",
isTomorrow: true,
isShow: true
}
],
clickedIndex: 0,
};
},
methods: {
enjoyPopClick() {
this.enjoyPopShow = true;
},
clickBubbleItem(item) {
// console.log("点击了==",item.name);
},
bubbleClickIndex(index) {
this.bubbleTempList.splice(index, 1)
// console.log("点击了索引==",index);
if (this.bubbleTempList?.length == 1) {
this.isOnekeyGet = this.bubbleTempList[0].isTomorrow
}
},
onekeyGet() {
//一键领取 清空数组 调用接口
this.bubbleList = [{
num: 1000,
name: "明日再来",
speed: "slow",
isTomorrow: true,
isShow: true
}];
this.onekeyGetText = "明日再来"
this.isOnekeyGet = true;
},
},