From 529be8d99177d835f26a9c3f39c8daa39a349201 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Wed, 3 Dec 2025 16:56:34 +0800
Subject: [PATCH] =?UTF-8?q?=E7=82=B9=E8=B5=9E=E6=95=88=E6=9E=9C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../full-screen-like-effect.vue               | 426 ++++++++++++++++++
 .../components/live-content/live-content.vue  |  24 +-
 pages/plugins/live/pull/pull.nvue             |   9 +-
 pages/plugins/live/pull/pull.vue              |   6 +-
 4 files changed, 441 insertions(+), 24 deletions(-)
 create mode 100644 pages/plugins/live/pull/components/full-screen-like-effect/full-screen-like-effect.vue

diff --git a/pages/plugins/live/pull/components/full-screen-like-effect/full-screen-like-effect.vue b/pages/plugins/live/pull/components/full-screen-like-effect/full-screen-like-effect.vue
new file mode 100644
index 00000000..ca5ce111
--- /dev/null
+++ b/pages/plugins/live/pull/components/full-screen-like-effect/full-screen-like-effect.vue
@@ -0,0 +1,426 @@
+<template>
+	<view class="simple-like-container flex-row box-sizing-border-box">
+        <view class="flex-1 pr">
+            <!-- 点赞动画元素 -->
+            <view 
+            	v-for="(like, index) in like_list" 
+            	:key="like.id"
+            	class="like-item"
+            	:ref="'likeItem' + like.id"
+            	:style="{
+            		left: like.x + 'px',
+            		top: like.y + 'px',
+            		color: like.color,
+            		opacity: like.opacity
+            	}"
+            >
+            	<!-- 支持图片或自定义图标 -->
+            	<image 
+            		v-if="like.image_src" 
+            		:src="like.image_src" 
+            		class="like-image"
+            		mode="aspectFit"
+            	></image>
+            	<text v-else>{{ like.icon }}</text>
+            </view>
+            
+            <!-- 连续点赞数量提示 -->
+            <text 
+            	v-if="show_like_count && like_count >= 3" 
+            	class="like-count"
+            	ref="likeCount"
+            	:style="{
+            		left: like_count_position.x + 'px',
+            		top: like_count_position.y + 'px',
+            		color: like_count_color,
+            		opacity: like_count_opacity,
+            		transform: 'scale(' + like_count_scale + ')'
+            	}"
+            >
+            	x {{ like_count }}
+            </text>
+        </view>
+	</view>
+</template>
+
+<script>
+	// #ifdef APP-NVUE
+	const animation = uni.requireNativePlugin('animation');
+	// #endif
+	
+	const COLORS = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57', '#ff9ff3', '#ff5252', '#66bb6a'];
+	const ICONS = [];
+	
+	export default {
+		name: 'SimpleLikeEffect',
+		props: {
+			// 外部传入的自定义图标数组
+			customIcons: {
+				type: Array,
+				default: () => []
+			},
+			// 外部传入的自定义图片数组
+			customImages: {
+				type: Array,
+				default: () => []
+			}
+		},
+		data() {
+			return {
+				like_list: [],
+				// 连续点赞相关数据
+				like_count: 0,
+				show_like_count: false,
+				like_count_position: { x: 0, y: 0 },
+				like_count_color: '#ff6b6b',
+				like_count_opacity: 1,
+				like_count_scale: 1,
+				last_like_time: 0,
+				like_count_timer: null,
+				reset_timer: null, // 重置计数的定时器
+				last_click_time: 0 // 防止双击添加多个图标
+			}
+		},
+		computed: {
+			// 合并默认图标和自定义图标
+			available_icons() {
+				return [...ICONS, ...this.customIcons];
+			},
+			// 合并默认图片和自定义图片
+			available_images() {
+				return this.customImages;
+			}
+		},
+		methods: {
+			add_like(event, options = {}) {
+				// 防抖处理，防止双击添加多个图标
+				const now = Date.now();
+				if (now - this.last_click_time < 200) {
+					return;
+				}
+				this.last_click_time = now;
+				
+				// 获取点击坐标
+				let x, y;
+				// 尝试多种方式获取坐标
+				if (event.touches && event.touches.length > 0) {
+					x = event.touches[0].pageX;
+					y = event.touches[0].pageY;
+				} else if (event.changedTouches && event.changedTouches.length > 0) {
+					x = event.changedTouches[0].pageX;
+					y = event.changedTouches[0].pageY;
+				} else {
+					x = event.pageX || event.detail?.x || 0;
+					y = event.pageY || event.detail?.y || 0;
+				}
+				
+				// 添加随机偏差 (-10px 到 10px)
+				const offset_x = Math.floor(Math.random() * 41) - 10;
+				const offset_y = Math.floor(Math.random() * 41) - 10;
+				
+				// 确保图标位置不超过点击位置20px范围
+				const clamped_offset_x = Math.max(-10, Math.min(10, offset_x));
+				const clamped_offset_y = Math.max(-10, Math.min(10, offset_y));
+				
+				// 调整后的坐标
+				const adjusted_x = x + clamped_offset_x - 10;
+				const adjusted_y = y + clamped_offset_y - 10;
+				
+				// 随机选择图标、图片和颜色
+				let icon, image_src, color;
+				
+				// 检查是否提供了外部图片
+				if (this.available_images && this.available_images.length > 0) {
+					// 随机选择图片
+					image_src = this.available_images[Math.floor(Math.random() * this.available_images.length)];
+				} else if (options.image_src) {
+					// 使用传入的图片
+					image_src = options.image_src;
+				}
+				
+				// 如果没有图片，则使用图标
+				if (!image_src) {
+					if (options.icon) {
+						// 使用传入的图标
+						icon = options.icon;
+					} else {
+						// 随机选择图标
+						icon = this.available_icons[Math.floor(Math.random() * this.available_icons.length)];
+					}
+				}
+				
+				// 随机选择颜色
+				if (options.color) {
+					color = options.color;
+				} else {
+					color = COLORS[Math.floor(Math.random() * COLORS.length)];
+				}
+				
+				// 创建点赞元素
+				const new_like = {
+					id: Date.now() + Math.random(), // 使用时间戳+随机数作为ID
+					x: adjusted_x,
+					y: adjusted_y,
+					color: color,
+					icon: icon,
+					image_src: image_src,
+					opacity: 0 // 显式初始化 opacity
+				};
+				// 添加到列表
+				this.like_list.push(new_like);
+				// #ifdef APP-NVUE
+				// 执行点赞动画
+                setTimeout(() => {
+                    this.animate_like_item(new_like.id);
+                }, 0);
+				// #endif	
+				// 2秒后移除
+				setTimeout(() => {
+					this.remove_like(new_like.id);
+				}, 2000);
+				
+				// 处理连续点赞数量提示
+				this.handle_like_count(x, y, color);
+			},
+			
+			remove_like(id) {
+				this.like_list = this.like_list.filter(item => item.id !== id);
+			},
+			
+			// 处理连续点赞数量提示
+			handle_like_count(x, y, color) {
+				const current_time = Date.now();
+				
+				// 清除之前的重置定时器
+				if (this.reset_timer) {
+					clearTimeout(this.reset_timer);
+					this.reset_timer = null;
+				}
+				
+				// 清除之前的隐藏定时器
+				if (this.like_count_timer) {
+					clearTimeout(this.like_count_timer);
+					this.like_count_timer = null;
+				}
+				
+				// 如果距离上次点赞超过1秒，重置计数
+				if (current_time - this.last_like_time > 1000) {
+					this.like_count = 1;
+					this.show_like_count = false; // 重置时隐藏数量显示
+				} else {
+					// 否则增加计数
+					this.like_count++;
+				}
+				
+				// 更新最后点赞时间
+				this.last_like_time = current_time;
+				
+				// 固定位置在当前点击位置正上方40px处（避免与图标重叠）
+				this.like_count_position = { 
+					x: x,      // 水平位置与点击位置对齐
+					y: y - 40  // 垂直位置在点击位置正上方30px（增加10px避免重叠）
+				};
+				this.like_count_color = color;
+				
+				// 显示数量提示（只有当数量大于等于3时才显示）
+				if (this.like_count >= 3) {
+					this.show_like_count = true;
+					this.like_count_opacity = 1;
+					this.like_count_scale = 1;
+					
+					// 执行动画
+					setTimeout(() => {
+						this.animate_like_count();
+					}, 0)
+				}
+				
+				// 设置隐藏定时器（200ms后隐藏，但不重置计数）
+				if (this.like_count >= 3) {
+					this.like_count_timer = setTimeout(() => {
+						this.hide_like_count();
+					}, 200);
+				}
+				
+				// 设置重置计数的定时器（在隐藏后1秒重置）
+				this.reset_timer = setTimeout(() => {
+					this.like_count = 0;
+					this.show_like_count = false;
+				}, 1200);
+			},
+			
+			// 隐藏数量提示
+			hide_like_count() {
+				// #ifdef APP-NVUE
+				const ref = this.$refs['likeCount'];
+				if (ref) {
+					const el = this.is_array(ref) ? ref[0] : ref;
+					if (el) {
+						animation.transition(el, {
+							styles: {
+								opacity: 0,
+								transform: 'scale(0.5) translateY(-10px)'
+							},
+							duration: 500,
+							timingFunction: 'ease-out'
+						}, () => {
+							this.show_like_count = false;
+						});
+					}
+				}
+				// #endif
+				
+				// #ifndef APP-NVUE
+				this.show_like_count = false;
+				// #endif
+			},
+			
+			// 点赞项动画
+			animate_like_item(id) {
+				// #ifdef APP-NVUE
+				const ref = this.$refs['likeItem' + id];
+				if (ref) {
+					const el = this.is_array(ref) ? ref[0] : ref;
+					if (el) {
+						// 先设置初始状态
+						this.like_list = this.like_list.map(item => {
+							if (item.id === id) {
+								item.opacity = 0;
+							}
+							return item;
+						});
+						
+						// 执行显示动画
+						animation.transition(el, {
+							styles: {
+								opacity: 1,
+								transform: 'scale(1.5) rotate(10deg)'
+							},
+							duration: 1000,
+							timingFunction: 'ease-out'
+						}, () => {
+							// 动画完成后执行淡出效果
+							animation.transition(el, {
+								styles: {
+									opacity: 0,
+									transform: 'scale(1) rotate(20deg)'
+								},
+								duration: 1000,
+								timingFunction: 'ease-out'
+							});
+						});
+					}
+				}
+				// #endif
+				
+				// #ifndef APP-NVUE
+				// 在非nvue环境中使用CSS动画
+				this.like_list = this.like_list.map(item => {
+					if (item.id === id) {
+						item.opacity = 1;
+					}
+					return item;
+				});
+				// #endif
+			},
+			
+			// 数量提示动画
+			animate_like_count() {
+				// #ifdef APP-NVUE
+				const ref = this.$refs['likeCount'];
+				if (ref) {
+					const el = this.is_array(ref) ? ref[0] : ref;
+					if (el) {
+						// 先设置初始状态
+						this.like_count_opacity = 1;
+						this.like_count_scale = 1;
+						
+						// 执行隐藏动画
+						animation.transition(el, {
+							styles: {
+								opacity: 0,
+								transform: 'scale(0.5) translateY(-10px)'
+							},
+							duration: 500,
+							timingFunction: 'ease-out'
+						});
+					}
+				}
+				// #endif
+			},
+			// 更加健壮的数组检查方法
+			is_array(data) {
+				return Array.isArray(data) || data instanceof Array || (data && typeof data === 'object' && data.length !== undefined);
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.simple-like-container {
+		position: absolute;
+		top: 0;
+		left: 0;
+        /* #ifndef APP-NVUE */
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+        /* #endif */
+		z-index: 9999;
+	}
+	
+	.like-item {
+		position: absolute;
+		font-size: 20px;
+	}
+	
+	.like-image {
+		width: 20px;
+		height: 20px;
+	}
+	
+	.like-count {
+		position: absolute;
+		font-size: 16px;
+		font-weight: bold;
+		z-index: 10000;
+		text-wrap: nowrap;
+	}
+	
+	/* #ifndef APP-NVUE */
+	.like-item {
+		opacity: 0;
+		animation: zoomInOut 2s ease-out forwards;
+	}
+	
+	.like-count {
+		opacity: 1;
+		animation: shrinkUp 1s ease-out forwards;
+	}
+	
+	@keyframes zoomInOut {
+		0% {
+			opacity: 0;
+			transform: scale(0) rotate(0deg);
+		}
+		50% {
+			opacity: 1;
+			transform: scale(1.5) rotate(10deg);
+		}
+		100% {
+			opacity: 0;
+			transform: scale(1) rotate(20deg);
+		}
+	}
+	
+	@keyframes shrinkUp {
+		0% {
+			opacity: 1;
+			transform: translateY(0) scale(1);
+		}
+		100% {
+			opacity: 0;
+			transform: translateY(-10px) scale(0.5);
+		}
+	}
+	/* #endif */
+</style>
\ No newline at end of file
diff --git a/pages/plugins/live/pull/components/live-content/live-content.vue b/pages/plugins/live/pull/components/live-content/live-content.vue
index 3d41b028..e905ca9b 100644
--- a/pages/plugins/live/pull/components/live-content/live-content.vue
+++ b/pages/plugins/live/pull/components/live-content/live-content.vue
@@ -7,14 +7,14 @@
     <!-- #endif -->
         <!-- 顶部主播信息 -->
         <view class="flex-row align-c jc-sb" :style="header_style">
-            <view class="top-header flex-row align-c pointer-events-auto" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="true">
+            <view class="top-header flex-row align-c pointer-events-auto">
                 <image :src="avatar" class="avatar" mode="aspectFill"></image>
                 <view class="ml-10 flex-col">
                     <text class="nickname text-line-1">{{ live_data && live_data.title ? live_data.title : '直播' }}</text>
                     <text class="level">{{ like_count }}本场点赞</text>
                 </view>
             </view>
-            <view class="flex-row align-c pointer-events-auto" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="true">
+            <view class="flex-row align-c pointer-events-auto">
                 <view class="flex-row align-c pr" style="direction: rtl;">
                     <view v-for="(item, index) in viewers" :key="index" class="viewer-wrapper" :style="'z-index:' + (index + 1) + ';' + (index == 0 ? 'margin-right: 0;' : '')">
                         <image :src="item.avatar" class="viewer-avatar"  mode="aspectFill"></image>
@@ -28,7 +28,7 @@
         <view class="flex-1 bottom-line-exclude-bottom flex-row">
             <view class="flex-1 flex-col jc-e">
                 <view class="pr">
-                    <view class="bulletin-area pr pointer-events-auto" :style="'width:' + (windowWidth - 150) + 'px;'" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="true">
+                    <view class="bulletin-area pr pointer-events-auto" :style="'width:' + (windowWidth - 150) + 'px;'">
                         <!-- #ifdef APP-NVUE -->
                         <!-- nvue 使用 list进行列表渲染 -->
                         <list class="bulletin-area" :style="'width:' + (windowWidth - 150) + 'px;'" :show-scrollbar="false" loadmoreoffset="30" @scroll="scroll_event" @loadmore="scroll_to_lower_event">
@@ -99,7 +99,7 @@
                             <text class="cr-10 cr-red">{{ message_num }}条新消息</text>
                         </view>
                     </view>
-                    <view v-if="!isEmpty(explain_goods)" class="explain-goods" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="true">
+                    <view v-if="!isEmpty(explain_goods)" class="explain-goods">
                         <image :src="explain_goods.goods_avatar" class="explain-goods-image" style="width: 198rpx;height: 198rpx;"  mode="aspectFill"></image>
                         <view class="explain-goods-content mt-10" style="padding: 8rpx;box-sizing: border-box;">
                             <text class="explain-goods-name text-line-2 size-12">{{ explain_goods.goods_name }}</text>
@@ -108,14 +108,14 @@
                     </view>
                 </view>
                 <!-- 底部谁来了的提示-->
-                <view v-if="is_user_comes" class="flex-row mt-3 pointer-events-auto" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="true" :style="'max-width:' + (windowWidth - 100) + 'px;'">
+                <view v-if="is_user_comes" class="flex-row mt-3 pointer-events-auto" :style="'max-width:' + (windowWidth - 100) + 'px;'">
                     <view class="user-comes flex-row">
                         <text class="user-name cr-blue">{{ commons_name }}</text>
                         <text class="user-name cr-d">来了</text>
                     </view>
                 </view>
                 <!-- 底部交互区域 -->
-                <view class="flex-row align-c mt-5 pointer-events-auto" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="true">
+                <view class="flex-row align-c mt-5 pointer-events-auto">
                     <view class="flex-1 bottom-actions-input">
                         <input :value="comment_value" type="text" confirm-type="done" :adjust-position="false" placeholder="说点什么" @focus="add_comment" @input="(e) => comment_value = e.detail.value" @confirm="comment_input_confirm"  />
                     </view>
@@ -134,7 +134,7 @@
             </view>
         </view>
         <!-- 添加评论 -->
-        <view v-if="is_add_comment" class="keyboard-input pointer-events-auto" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="true" :style="'width:' + windowWidth + 'px;bottom:' + listener_height + 'px;'">
+        <view v-if="is_add_comment" class="keyboard-input pointer-events-auto" :style="'width:' + windowWidth + 'px;bottom:' + listener_height + 'px;'">
             <view class="input">
                 <input :value="comment_value" :focus="is_add_comment" type="text" confirm-type="done" :adjust-position="false" :auto-blur="true" placeholder="说点什么" @input="(e) => comment_value = e.detail.value" @blur="() => is_add_comment = false" @confirm="comment_input_confirm" />
             </view>
@@ -589,16 +589,6 @@
             // 点赞计数
             like_button_click(e) {
                 this.like_count++;
-            },
-            handle_touch_end(event) {
-                //#ifdef APP-NVUE
-                this.$emit("handleTouchEnd", event);
-                //#endif
-            },
-            handle_double_click(event) {
-                //#ifdef APP-NVUE
-                this.$emit("handleDoubleClick", event);
-                //#endif
             }
         }
     }
diff --git a/pages/plugins/live/pull/pull.nvue b/pages/plugins/live/pull/pull.nvue
index fa72b9d9..3c25df2b 100644
--- a/pages/plugins/live/pull/pull.nvue
+++ b/pages/plugins/live/pull/pull.nvue
@@ -1,13 +1,14 @@
 <template>
     <view :class="theme_view + ' flex-row pr'" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'">
-        <view class="flex-1 pr">
+        <view class="flex-1 pr" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="false">
             <live-video ref="live-video" :src="live_config.pull_flv_url || 'http://live-pull-all.shopxo.vip/68f764013572f9240ca7ce6c/shopxo122.m3u8'" @ended="ended"></live-video>
+
+            <!-- 简化版点赞效果组件 -->
+            <full-screen-like-effect ref="fullScreenLikeEffect" :custom-images="like_show_imgs" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'"></full-screen-like-effect>
         </view>
-        <view v-if="!is_loading" class="live-content" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="false">
+        <view v-if="!is_loading" class="live-content" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'">
             <template v-if="!is_live_ended"> 
                 <live-content ref="liveContent" :live-config="live_config" :live-show-imgs="like_show_imgs"  @live-back="live_back" @handleDoubleClick="handle_double_click" @handleTouchEnd="handle_touch_end"></live-content>
-                <!-- 简化版点赞效果组件 -->
-                <full-screen-like-effect ref="fullScreenLikeEffect" :custom-images="like_show_imgs" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'"></full-screen-like-effect>
             </template>
             <template v-else> 
                 <view class="live-ended flex-row align-c jc-c" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="true">
diff --git a/pages/plugins/live/pull/pull.vue b/pages/plugins/live/pull/pull.vue
index b8ee7a23..6000bd6e 100644
--- a/pages/plugins/live/pull/pull.vue
+++ b/pages/plugins/live/pull/pull.vue
@@ -1,13 +1,13 @@
 <template>
     <view :class="theme_view + ' live-bg'">
-        <view class="w h" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="false">
+        <view class="w h pr" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="false">
             <live-video ref="liveVideo" :src="live_config.pull_flv_url || 'http://live-pull-all.shopxo.vip/68f764013572f9240ca7ce6c/shopxo122.m3u8'" @ended="ended" @mutedAutoPlaySuccess="muted_auto_play_success"></live-video>
             <!-- 简化版点赞效果组件 -->
             <full-screen-like-effect ref="fullScreenLikeEffect" :custom-images="like_show_imgs"></full-screen-like-effect>
         </view>
-        <view v-if="!is_loading" class="live-content pointer-events-none">
+        <view v-if="!is_loading" :class="'live-content ' + (!is_live_ended ? 'pointer-events-none' : '')">
             <template v-if="!is_live_ended"> 
-                <live-content ref="liveContent" :live-config="live_config" :live-show-imgs="like_show_imgs" @live-back="live_back" @handleDoubleClick="handle_double_click" @handleTouchEnd="handle_touch_end"></live-content>
+                <live-content ref="liveContent" :live-config="live_config" :live-show-imgs="like_show_imgs" @live-back="live_back"></live-content>
             </template>
             <template v-else> 
                 <view class="live-ended flex-row align-c jc-c">