diff --git a/public/img/bg1.png b/public/img/bg1.png
new file mode 100755
index 0000000..077a963
Binary files /dev/null and b/public/img/bg1.png differ
diff --git a/public/img/bg2.png b/public/img/bg2.png
new file mode 100755
index 0000000..2598026
Binary files /dev/null and b/public/img/bg2.png differ
diff --git a/public/img/bg3.png b/public/img/bg3.png
new file mode 100755
index 0000000..0113422
Binary files /dev/null and b/public/img/bg3.png differ
diff --git a/public/img/bg4.png b/public/img/bg4.png
new file mode 100755
index 0000000..5e8adfa
Binary files /dev/null and b/public/img/bg4.png differ
diff --git a/public/img/bg5.png b/public/img/bg5.png
new file mode 100755
index 0000000..e5a13d0
Binary files /dev/null and b/public/img/bg5.png differ
diff --git a/public/img/bg6.png b/public/img/bg6.png
new file mode 100755
index 0000000..191f187
Binary files /dev/null and b/public/img/bg6.png differ
diff --git a/public/img/bg7.png b/public/img/bg7.png
new file mode 100755
index 0000000..9d1810d
Binary files /dev/null and b/public/img/bg7.png differ
diff --git a/public/img/bg8.png b/public/img/bg8.png
new file mode 100755
index 0000000..34ca117
Binary files /dev/null and b/public/img/bg8.png differ
diff --git a/src/views/detail/detailIndex.vue b/src/views/detail/detailIndex.vue
index d32761b..129e40b 100755
--- a/src/views/detail/detailIndex.vue
+++ b/src/views/detail/detailIndex.vue
@@ -129,15 +129,20 @@ export default {
info: {
avatar: "https://oss.gter.net/avatar/97KwEWANd_4DHWiY6VbnSUFSCKroYWFjYQ~~/middle",
-
+ likenum: 1
},
islogin: true,
prepareLiskeState: false,
prepareLiskeAnimateState: false,
- stat: {},
+ stat: {
+ like: 0
+ },
iscollect: 0,
+ ispostOfferLike: null, // 点击点赞提交状态
+ offerLikesumTimer: 0, // offer点赞累加定时器
+ offerLikesumAnimateTimer: 0, // offer点赞动画定时器
};
},
@@ -145,7 +150,73 @@ export default {
},
methods: {
- tapLike() { },
+ // 点击点赞
+
+ // 点击点赞
+ tapLike() {
+ this.isState = true
+ this.prepareLiskeState = true
+ this.prepareLiskeAnimateState = true
+
+ clearTimeout(this.offerLikesumTimer)
+ clearTimeout(this.offerLikesumAnimateTimer)
+
+ let praiseBubble = document.getElementById("praise_bubble");
+ console.log("praiseBubble", praiseBubble);
+ let last = 0;
+ let b = Math.floor(Math.random() * 8) + 1; // 1 到 7的 图片
+ // b = 1; // 测试写固定的
+ const bl = Math.floor(Math.random() * 11) + 1; // bl1~bl11
+ let d = document.createElement("div");
+ // let urll = '//offer.gter.net/image/gter/offer/imgdetails'
+ let urll = './img'
+ d.style.backgroundImage = `url('${urll}/bg${b}.png')`
+ d.style.backgroundSize = 'contain'
+ d.className = `bubble`;
+ d.style.animation = `bubble_${bl} 1.5s linear 1 forwards, bubble_big_${Math.floor(Math.random() * 3) + 1} 0.8s linear 1 forwards, bubble_y 1.5s linear 1 forwards`
+
+ d.dataset.t = String(Date.now());
+ praiseBubble.appendChild(d);
+
+
+ this.stat.like++
+ this.prepareLiskeNum++
+ this.offerLikesumAnimateTimer = setTimeout(() => {
+ this.prepareLiskeAnimateState = false
+ }, 500)
+ this.offerLikesumTimer = setTimeout(() => {
+ this.ispostOfferLike = false
+ this.postOfferLike()
+ }, 2000)
+ },
+
+ postOfferLike() {
+ if (this.ispostOfferLike) return
+ this.ispostOfferLike = true
+
+ this.offerLikesum = 0
+
+ this.prepareLiskeState = false
+ let key = new Date().getTime() + ''
+ // let num = util.base64_encode(key + util.base64_encode(this.data.prepareLiskeNum + ''))
+
+
+
+ // util.wxpost("/miniprogramApi/offer/behaviour/like", {
+ // token: this.data.token,
+ // num,
+ // key
+ // }).then(res => {
+ // if (res.code != 200) return
+ // let data = res.data
+ // this.offerLikesum = 0
+ // }).finally(() => {
+ // this.setData({
+ // prepareLiskeState: false
+ // })
+ // })
+
+ },
// 点击转发
@@ -173,6 +244,7 @@ export default {
<style lang="scss" scoped>
.container {
margin-top: 1.3rem;
+ padding-bottom: 2.8rem;
.detail-head {
color: #7F7F7F;
@@ -380,16 +452,7 @@ export default {
.swiper {
- width: 4.6667rem;
height: 2rem;
- position: relative;
- overflow: auto;
- -ms-overflow-style: none;
- overflow: -moz-scrollbars-none;
-
- &::-webkit-scrollbar {
- width: 0 !important;
- }
}
@@ -409,7 +472,6 @@ export default {
box-sizing: border-box;
position: relative;
-
.bottom-comment-icom {
width: 0.4rem;
height: 0.4rem;
@@ -451,8 +513,6 @@ export default {
}
}
-
-
.bottom-transmit-icom {
width: 0.4rem;
height: 0.4rem;
@@ -507,19 +567,262 @@ export default {
position: absolute;
bottom: 1.2rem;
background-color: transparent;
+
+ .bubble {
+ position: absolute;
+ width: 40px;
+ height: 40px;
+ left: 0;
+ bottom: 0px;
+ background-repeat: no-repeat;
+ background-size: 100%;
+ transform-origin: bottom;
+ }
}
- .praise_bubble .bubble {
- position: absolute;
- width: 40px;
- height: 40px;
- left: 0;
- bottom: 0px;
- background-repeat: no-repeat;
- background-size: 100%;
- transform-origin: bottom;
- }
}
}
+
+.bubble {
+ position: absolute;
+ width: 40px;
+ height: 40px;
+ left: 0;
+ bottom: 0px;
+ background-repeat: no-repeat;
+ background-size: 100%;
+ transform-origin: bottom;
+}
+
+@keyframes bubble_11 {
+ 25% {
+ margin-left: -10px;
+ }
+
+ 50% {
+ margin-left: -10px;
+ }
+
+ 100% {
+ margin-left: -18px;
+ }
+}
+
+@keyframes bubble_10 {
+ 25% {
+ margin-left: -20px;
+ }
+
+ 50% {
+ margin-left: -20px;
+ }
+
+ 100% {
+ margin-left: -20px;
+ }
+}
+
+@keyframes bubble_9 {
+ 25% {
+ margin-left: 10px;
+ }
+
+ 50% {
+ margin-left: 10px;
+ }
+
+ 100% {
+ margin-left: 10px;
+ }
+}
+
+@keyframes bubble_8 {
+ 25% {
+ margin-left: 20px;
+ }
+
+ 50% {
+ margin-left: 20px;
+ }
+
+ 100% {
+ margin-left: 20px;
+ }
+}
+
+@keyframes bubble_7 {
+ 25% {
+ margin-left: 3px;
+ }
+
+ 50% {
+ margin-left: 1px;
+ }
+
+ 75% {
+ margin-left: 2px;
+ }
+
+ 100% {
+ margin-left: 3px;
+ }
+}
+
+@keyframes bubble_6 {
+ 25% {
+ margin-left: -3px;
+ }
+
+ 50% {
+ margin-left: -1px;
+ }
+
+ 75% {
+ margin-left: -2px;
+ }
+
+ 100% {
+ margin-left: -3px;
+ }
+}
+
+@keyframes bubble_5 {
+ 25% {
+ margin-left: 5px;
+ }
+
+ 50% {
+ margin-left: -5px;
+ }
+
+ 75% {
+ margin-left: -10px;
+ }
+
+ 100% {
+ margin-left: -20px;
+ }
+}
+
+@keyframes bubble_4 {
+ 25% {
+ margin-left: -5px;
+ }
+
+ 50% {
+ margin-left: -5px;
+ }
+
+ 75% {
+ margin-left: 20px;
+ }
+
+ 100% {
+ margin-left: 10px;
+ }
+}
+
+@keyframes bubble_3 {
+ 25% {
+ margin-left: -20px;
+ }
+
+ 50% {
+ margin-left: 10px;
+ }
+
+ 75% {
+ margin-left: 20px;
+ }
+
+ 100% {
+ margin-left: -10px;
+ }
+}
+
+@keyframes bubble_2 {
+ 25% {
+ margin-left: 20px;
+ }
+
+ 50% {
+ margin-left: 25px;
+ }
+
+ 75% {
+ margin-left: 10px;
+ }
+
+ 100% {
+ margin-left: 5px;
+ }
+}
+
+@keyframes bubble_1 {
+ 25% {
+ margin-left: -8px;
+ }
+
+ 50% {
+ margin-left: 8px;
+ }
+
+ 75% {
+ margin-left: -15px;
+ }
+
+ 100% {
+ margin-left: 15px;
+ }
+}
+
+@keyframes bubble_big_1 {
+ 0% {
+ transform: scale(0.3);
+ }
+
+ 100% {
+ transform: scale(1.2);
+ }
+}
+
+@keyframes bubble_big_2 {
+ 0% {
+ transform: scale(0.3);
+ }
+
+ 100% {
+ transform: scale(0.9);
+ }
+}
+
+@keyframes bubble_big_3 {
+ 0% {
+ transform: scale(0.3);
+ }
+
+ 100% {
+ transform: scale(0.6);
+ }
+}
+
+@keyframes bubble_y {
+ 0% {
+ margin-bottom: 0;
+ }
+
+ 10% {
+ margin-bottom: 0;
+ }
+
+ 75% {
+ opacity: 1;
+ }
+
+ 100% {
+ margin-bottom: 200px;
+ opacity: 0;
+ }
+}
</style>
\ No newline at end of file