Skip to content

M
mayi-mp-shop
Commit 0e8b5314 by 李嘉林
Options

点赞功能

parent 04ff84cd
Showing with 145 additions and 44 deletions
src/components/livedModel/livedControls.vue
<template> <template>
<div class="livedControls"> <div class="livedControls">
<!-- 公告层 --> <!-- 公告层 -->
<livedAnnouncement></livedAnnouncement> <livedAnnouncement></livedAnnouncement>
<!-- 评论层 --> <!-- 评论层 -->
<livedIsMsg></livedIsMsg> <livedIsMsg></livedIsMsg>
<!-- 底部控制层 --> <!-- 底部控制层 -->
<div class="control flex"> <div class="control flex">
<div class="goodsImg"> <div class="goodsImg">
<img src="../../../static/images/lived/goodsImg.png" alt=""> <img src="../../../static/images/lived/goodsImg.png" alt />
<p class="goodsNum">99</p> <p class="goodsNum">99</p>
</div> </div>
<div class="iptCopy"> <div class="iptCopy">跟主播说点什么...</div>
跟主播说点什么... <div class="shareIcon">
</div> <van-icon name="share" />
<div class="shareIcon"> </div>
<van-icon name="share" /> <div class="heardIcon" @click="addLike(1)">
</div> <van-icon name="like" class="like" />
<div class="heardIcon"> <p class="heardNum">{{likeNumCopy}}</p>
<van-icon name="like" class="like"/> <div class="box">
<p class="heardNum">99.9w</p> <div class="img" v-for="(item,index) in imgList" :key="index">
<img :src="item.img" alt />
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script type="text/ecmascript-6"> <script type="text/ecmascript-6">
import livedAnnouncement from "@/components/livedModel/livedAnnouncement"; import livedAnnouncement from "@/components/livedModel/livedAnnouncement";
import livedIsMsg from "@/components/livedModel/livedIsMsg"; import livedIsMsg from "@/components/livedModel/livedIsMsg";
export default { export default {
name: "", name: "",
data() { data() {
return {} return {
likeNum: 9997, //点赞数
imgList: [],
iconList: [
"https://img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
"https://img0.imgtn.bdimg.com/it/u=216605226,3652567530&fm=11&gp=0.jpg",
"https://img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
"https://img2.imgtn.bdimg.com/it/u=1354268575,1268995723&fm=26&gp=0.jpg"
],
num: 0
};
},
components: {
livedAnnouncement,
livedIsMsg
},
computed: {
likeNumCopy() {
return this.watchMan(this.likeNum);
}
},
created() {},
mounted() {
setInterval(() => {
this.getAdd();
}, 5000);
},
methods: {
// 数量大于1w
watchMan(val) {
return val - 0 > 10000 ? Math.floor(val / 10000 * 100) / 100 + "w" : val;
}, },
components: { // 点赞
livedAnnouncement, addLike(val) {
livedIsMsg if (val == 1) {
this.likeNum++;
}
setTimeout(() => {
this.num++;
if (this.num >= 4) {
this.num = 0;
}
this.imgList.push({
img: this.iconList[this.num]
});
}, 300);
}, },
computed: {}, // 接口获取触发点赞
created() {}, getAdd() {
mounted() {}, if (this.imgList.length > 20) {
methods: {} this.imgList = [];
} }
for (let i = 0; i < this.iconList.length; i++) {
setTimeout(() => {
this.addLike(2);
}, 200 * i);
}
}
}
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.flex{ .flex {
display: flex; display: flex;
} }
.livedControls{ .livedControls {
position: absolute; position: absolute;
bottom: 10px; bottom: 10px;
left: 0; left: 0;
width: 100vw; width: 100vw;
.control{ .control {
height: 40px; height: 40px;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
padding: 0 12px; padding: 0 12px;
.goodsImg{ .goodsImg {
width: 30px; width: 30px;
height: 30px; height: 30px;
position: relative; position: relative;
img{ img {
width: 30px; width: 30px;
height: 30px; height: 30px;
position: absolute; position: absolute;
...@@ -69,17 +121,17 @@ export default { ...@@ -69,17 +121,17 @@ export default {
left: 0; left: 0;
z-index: -1; z-index: -1;
} }
.goodsNum{ .goodsNum {
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
margin-top: 10px; margin-top: 10px;
} }
} }
.iptCopy{ .iptCopy {
margin: 0 10px; margin: 0 10px;
width: 50vw; width: 50vw;
background: rgba(#000,0.4); background: rgba(#000, 0.4);
color: #999; color: #999;
font-size: 16px; font-size: 16px;
height: 38px; height: 38px;
...@@ -87,27 +139,76 @@ export default { ...@@ -87,27 +139,76 @@ export default {
line-height: 38px; line-height: 38px;
text-indent: 1em; text-indent: 1em;
} }
.shareIcon,.heardIcon{ .shareIcon,
.heardIcon {
color: #fff; color: #fff;
font-size: 30px; font-size: 30px;
position: relative; position: relative;
width: 50px; width: 50px;
height: 30px; height: 30px;
} }
.heardIcon{ .heardIcon {
.like{ .like {
position: absolute; position: absolute;
top: 0; top: 0;
left: 20%; left: 20%;
} }
.heardNum{ .heardNum {
text-align: center; text-align: center;
transform: translateY(-5px); transform: translateY(-5px);
background: rgba(#E60012,0.5); background: rgba(#e60012, 0.5);
border-radius: 4px; border-radius: 4px;
padding: 1px 2px; padding: 1px 2px;
font-size: 12px; font-size: 12px;
} }
.box {
width: 100px;
height: 260px;
position: absolute;
overflow: hidden;
bottom: 0;
right: -30px;
.img {
position: absolute;
bottom: 0;
left: 50%;
margin-left: -20px;
width: 40px;
height: 40px;
animation: moveImg 1.5s linear 0.1s;
opacity: 0;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
img {
width: 40px;
height: 40px;
}
}
@keyframes moveImg {
0% {
opacity: 1;
}
20% {
transform: translateY(-40px) translateX(-5px) scale(1);
}
40% {
transform: translateY(-80px) translateX(0) scale(1);
}
60% {
transform: translateY(-120px) translateX(0) scale(1);
}
80% {
transform: translateY(-160px) translateX(5px) scale(1);
}
100% {
opacity: 0;
transform: translateY(-200px) translateX(0) scale(1);
}
}
}
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment