a1300399510@qq.com 提交于 2023/03/31 -15:40:01

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,9 +567,8 @@ export default {
             position: absolute;
             bottom: 1.2rem;
             background-color: transparent;
-        }
 
-        .praise_bubble .bubble {
+            .bubble {
                 position: absolute;
                 width: 40px;
                 height: 40px;
@@ -521,5 +580,249 @@ export default {
             }
         }
 
+    }
+
+}
+
+.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>