sileya-ai
/
vr-shopxo-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

点赞动画效果优化

master
于肖磊 2025-12-02 17:11:52 +08:00
parent 1c2ad02096
commit 6db870a52b
6 changed files with 160 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
pages/plugins/live/pull/components/like-button/like-button.vue
View File

@ -15,7 +15,7 @@
</view>
<!-- #endif -->
<view class="on-button">
<view ref="likeBtn" id="like-btn" class="el-like-btn" @click="handleClick">
<view ref="likeBtn" id="like-btn" class="el-like-btn" @tap="handleClick">
<slot></slot>
</view>
</view>
@ -33,13 +33,7 @@
showImgs: { // 显示图标路径
type: Array,
default: () => {
return [
'https://new.shopxo.vip/static/plugins/live/images/like/like1.png',
'https://new.shopxo.vip/static/plugins/live/images/like/like2.png',
'https://new.shopxo.vip/static/plugins/live/images/like/like3.png',
'https://new.shopxo.vip/static/plugins/live/images/like/like4.png',
'https://new.shopxo.vip/static/plugins/live/images/like/like5.png',
]
return []
}
},
duration: { // 动画效果时间
@ -52,7 +46,7 @@
},
high: {
type: Number,
default: 360
default: 200
},
width: { // 图标宽度
type: Number || String,
@ -77,9 +71,9 @@
site: { // x y 坐标 [x<Number>, y<Number>]
type: Array || Object,
default: () => {
return [122, 120] || {
return [122, 95] || {
x: 122,
y: 100
y: 95
}
}
},
@ -134,7 +128,6 @@
timingFunction: 'ease-out',
})
setTimeout(() => {
console.log('animation finished.')
// 完成后事件回调
this.$emit('finished')
// 逐渐消失

193
pages/plugins/live/pull/components/like-effect/like-effect.vue
View File

@ -1,9 +1,9 @@
<template>
<view class="simple-like-container flex-row box-border-box">
<view class="simple-like-container flex-row box-sizing-border-box">
<view class="flex-1 pr">
<!-- 点赞动画元素 -->
<view
v-for="(like, index) in likeList"
v-for="(like, index) in like_list"
:key="like.id"
class="like-item"
:ref="'likeItem' + like.id"
@ -14,11 +14,10 @@
opacity: like.opacity
}"
>
<!-- 支持图片或自定义图标 -->
<image
v-if="like.imageSrc"
:src="like.imageSrc"
v-if="like.image_src"
:src="like.image_src"
class="like-image"
mode="aspectFit"
></image>
@ -27,18 +26,18 @@
<!-- 连续点赞数量提示 -->
<text
v-if="showLikeCount && likeCount >= 3"
v-if="show_like_count && like_count >= 3"
class="like-count"
:ref="'likeCount'"
ref="likeCount"
:style="{
left: likeCountPosition.x + 'px',
top: likeCountPosition.y + 'px',
color: likeCountColor,
opacity: likeCountOpacity,
transform: 'scale(' + likeCountScale + ')'
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 {{ likeCount }}
x {{ like_count }}
</text>
</view>
</view>
@ -68,38 +67,38 @@
},
data() {
return {
likeList: [],
like_list: [],
// 连续点赞相关数据
likeCount: 0,
showLikeCount: false,
likeCountPosition: { x: 0, y: 0 },
likeCountColor: '#ff6b6b',
likeCountOpacity: 1,
likeCountScale: 1,
lastLikeTime: 0,
likeCountTimer: null,
resetTimer: null, // 重置计数的定时器
lastClickTime: 0 // 防止双击添加多个图标
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: {
// 合并默认图标和自定义图标
availableIcons() {
available_icons() {
return [...ICONS, ...this.customIcons];
},
// 合并默认图片和自定义图片
availableImages() {
available_images() {
return this.customImages;
}
},
methods: {
addLike(event, options = {}) {
add_like(event, options = {}) {
// 防抖处理，防止双击添加多个图标
const now = Date.now();
if (now - this.lastClickTime < 200) {
if (now - this.last_click_time < 200) {
return;
}
this.lastClickTime = now;
this.last_click_time = now;
// 获取点击坐标
let x, y;
@ -115,40 +114,38 @@
y = event.pageY || event.detail?.y || 0;
}
console.log('Click coordinates:', x, y);
// 添加随机偏差 (-10px 到 10px)
const offsetX = Math.floor(Math.random() * 41) - 10;
const offsetY = Math.floor(Math.random() * 41) - 10;
const offset_x = Math.floor(Math.random() * 41) - 10;
const offset_y = Math.floor(Math.random() * 41) - 10;
// 确保图标位置不超过点击位置20px范围
const clampedOffsetX = Math.max(-10, Math.min(10, offsetX));
const clampedOffsetY = Math.max(-10, Math.min(10, offsetY));
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 adjustedX = x + clampedOffsetX - 10;
const adjustedY = y + clampedOffsetY - 10;
const adjusted_x = x + clamped_offset_x - 10;
const adjusted_y = y + clamped_offset_y - 10;
// 随机选择图标、图片和颜色
let icon, imageSrc, color;
let icon, image_src, color;
// 检查是否提供了外部图片
if (this.availableImages && this.availableImages.length > 0) {
if (this.available_images && this.available_images.length > 0) {
// 随机选择图片
imageSrc = this.availableImages[Math.floor(Math.random() * this.availableImages.length)];
} else if (options.imageSrc) {
image_src = this.available_images[Math.floor(Math.random() * this.available_images.length)];
} else if (options.image_src) {
// 使用传入的图片
imageSrc = options.imageSrc;
image_src = options.image_src;
}
// 如果没有图片，则使用图标
if (!imageSrc) {
if (!image_src) {
if (options.icon) {
// 使用传入的图标
icon = options.icon;
} else {
// 随机选择图标
icon = this.availableIcons[Math.floor(Math.random() * this.availableIcons.length)];
icon = this.available_icons[Math.floor(Math.random() * this.available_icons.length)];
}
}
@ -160,102 +157,103 @@
}
// 创建点赞元素
const newLike = {
const new_like = {
id: Date.now() + Math.random(), // 使用时间戳+随机数作为ID
x: adjustedX,
y: adjustedY,
x: adjusted_x,
y: adjusted_y,
color: color,
icon: icon,
imageSrc: imageSrc
image_src: image_src,
opacity: 0 // 显式初始化 opacity
};
// 添加到列表
this.likeList.push(newLike);
this.like_list.push(new_like);
// #ifdef APP-NVUE
// 执行点赞动画
setTimeout(() => {
this.animateLikeItem(newLike.id);
this.animate_like_item(new_like.id);
}, 0);
//#endif
// #endif
// 2秒后移除
setTimeout(() => {
this.removeLike(newLike.id);
this.remove_like(new_like.id);
}, 2000);
// 处理连续点赞数量提示
this.handleLikeCount(x, y, color);
this.handle_like_count(x, y, color);
},
removeLike(id) {
this.likeList = this.likeList.filter(item => item.id !== id);
remove_like(id) {
this.like_list = this.like_list.filter(item => item.id !== id);
},
// 处理连续点赞数量提示
handleLikeCount(x, y, color) {
const currentTime = Date.now();
handle_like_count(x, y, color) {
const current_time = Date.now();
// 清除之前的重置定时器
if (this.resetTimer) {
clearTimeout(this.resetTimer);
this.resetTimer = null;
if (this.reset_timer) {
clearTimeout(this.reset_timer);
this.reset_timer = null;
}
// 清除之前的隐藏定时器
if (this.likeCountTimer) {
clearTimeout(this.likeCountTimer);
this.likeCountTimer = null;
if (this.like_count_timer) {
clearTimeout(this.like_count_timer);
this.like_count_timer = null;
}
// 如果距离上次点赞超过1秒，重置计数
if (currentTime - this.lastLikeTime > 1000) {
this.likeCount = 1;
this.showLikeCount = false; // 重置时隐藏数量显示
if (current_time - this.last_like_time > 1000) {
this.like_count = 1;
this.show_like_count = false; // 重置时隐藏数量显示
} else {
// 否则增加计数
this.likeCount++;
this.like_count++;
}
// 更新最后点赞时间
this.lastLikeTime = currentTime;
this.last_like_time = current_time;
// 固定位置在当前点击位置正上方25px处（避免与图标重叠）
this.likeCountPosition = {
// 固定位置在当前点击位置正上方40px处（避免与图标重叠）
this.like_count_position = {
x: x, // 水平位置与点击位置对齐
y: y - 40 // 垂直位置在点击位置正上方30px（增加10px避免重叠）
};
this.likeCountColor = color;
this.like_count_color = color;
// 显示数量提示（只有当数量大于等于3时才显示）
if (this.likeCount >= 3) {
this.showLikeCount = true;
this.likeCountOpacity = 1;
this.likeCountScale = 1;
if (this.like_count >= 3) {
this.show_like_count = true;
this.like_count_opacity = 1;
this.like_count_scale = 1;
// 执行动画
setTimeout(() => {
this.animateLikeCount();
this.animate_like_count();
}, 0)
}
// 设置隐藏定时器（200ms后隐藏，但不重置计数）
if (this.likeCount >= 3) {
this.likeCountTimer = setTimeout(() => {
this.hideLikeCount();
if (this.like_count >= 3) {
this.like_count_timer = setTimeout(() => {
this.hide_like_count();
}, 200);
}
// 设置重置计数的定时器（在隐藏后1秒重置）
this.resetTimer = setTimeout(() => {
this.likeCount = 0;
this.showLikeCount = false;
this.reset_timer = setTimeout(() => {
this.like_count = 0;
this.show_like_count = false;
}, 1200);
},
// 隐藏数量提示
hideLikeCount() {
hide_like_count() {
// #ifdef APP-NVUE
const ref = this.$refs['likeCount'];
if (ref) {
const el = ref instanceof Array ? ref[0] : ref;
const el = this.is_array(ref) ? ref[0] : ref;
if (el) {
animation.transition(el, {
styles: {
@ -265,28 +263,26 @@
duration: 500,
timingFunction: 'ease-out'
}, () => {
this.showLikeCount = false;
this.show_like_count = false;
});
}
}
// #endif
// #ifndef APP-NVUE
this.showLikeCount = false;
this.show_like_count = false;
// #endif
},
// 点赞项动画
animateLikeItem(id) {
animate_like_item(id) {
// #ifdef APP-NVUE
const ref = this.$refs['likeItem' + id];
if (ref) {
// 更加健壮的数组检查方法
const isArray = Array.isArray(ref) || ref instanceof Array || (ref && typeof ref === 'object' && ref.length !== undefined);
const el = isArray ? ref[0] : ref;
const el = this.is_array(ref) ? ref[0] : ref;
if (el) {
// 先设置初始状态
this.likeList = this.likeList.map(item => {
this.like_list = this.like_list.map(item => {
if (item.id === id) {
item.opacity = 0;
}
@ -318,7 +314,7 @@
// #ifndef APP-NVUE
// 在非nvue环境中使用CSS动画
this.likeList = this.likeList.map(item => {
this.like_list = this.like_list.map(item => {
if (item.id === id) {
item.opacity = 1;
}
@ -328,15 +324,15 @@
},
// 数量提示动画
animateLikeCount() {
animate_like_count() {
// #ifdef APP-NVUE
const ref = this.$refs['likeCount'];
if (ref) {
const el = ref instanceof Array ? ref[0] : ref;
const el = this.is_array(ref) ? ref[0] : ref;
if (el) {
// 先设置初始状态
this.likeCountOpacity = 1;
this.likeCountScale = 1;
this.like_count_opacity = 1;
this.like_count_scale = 1;
// 执行隐藏动画
animation.transition(el, {
@ -350,6 +346,10 @@
}
}
// #endif
},
// 更加健壮的数组检查方法
is_array(data) {
return Array.isArray(data) || data instanceof Array || (data && typeof data === 'object' && data.length !== undefined);
}
}
}
@ -383,6 +383,7 @@
font-size: 16px;
font-weight: bold;
z-index: 10000;
text-wrap: nowrap;
}
/* #ifndef APP-NVUE */

40
pages/plugins/live/pull/components/live-content/live-content.vue
View File

@ -7,14 +7,14 @@
<!-- #endif -->
<!-- 顶部主播信息 -->
<view class="flex-row align-c jc-sb" :style="header_style">
<view class="top-header flex-row align-c" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="true">
<view class="top-header flex-row align-c pointer-events-auto" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="true">
<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">9999本场点赞</text>
<text class="level">{{ like_count }}本场点赞</text>
</view>
</view>
<view class="flex-row align-c" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="true">
<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 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" :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;'" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="true">
<!-- #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">
@ -108,21 +108,21 @@
</view>
</view>
<!-- 底部谁来了的提示-->
<view v-if="is_user_comes" class="flex-row mt-3" @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" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="true" :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" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="true">
<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-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>
<view class="bottom-actions-icon" @tap="add_goods">
<component-icon name="shopping-cart-tall" color="#fff" size="32rpx"></component-icon>
</view>
<component-like-button>
<component-like-button ref="likeButton" :show-imgs="liveShowImgs" @handleClick="like_button_click">
<view class="bottom-actions-icon">
<component-icon name="givealike-o" color="#fff" size="32rpx"></component-icon>
</view>
@ -134,17 +134,17 @@
</view>
</view>
<!-- 添加评论 -->
<view v-if="is_add_comment" class="keyboard-input" @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" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="true" :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>
</view>
<!-- 商品弹出框 -->
<component-popup ref="popupGoodsRef" mode="bottom" title="添加商品" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="true" :closeable="true">
<component-popup ref="popupGoodsRef" mode="bottom" class="pointer-events-auto" title="添加商品" :closeable="true">
<component-goods isGoodsPopup></component-goods>
</component-popup>
<!-- 分享弹窗 -->
<component-share-popup ref="share" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="true"></component-share-popup>
<component-share-popup ref="share" class="pointer-events-auto"></component-share-popup>
</view>
</template>
@ -169,6 +169,10 @@
liveConfig: {
type: Object,
default: () => {}
},
liveShowImgs: {
type: Array,
default: () => []
}
},
data() {
@ -176,6 +180,8 @@
application_client_type: app.globalData.application_client_type(),
application_client_brand: app.globalData.application_client_brand(),
goods_popup_status: false,
// 点赞计数
like_count: 0,
// 直播间配置信息
live_data: {},
userAvatar: '/static/images/common/user.png',
@ -277,7 +283,7 @@
watch: {
liveConfig: {
handler(new_value) {
if (new_value.data != null) {
if (new_value != null) {
// 获取配置信息
this.live_data = new_value;
}
@ -576,11 +582,23 @@
});
}
},
// 点击上边的时候会触发下边的按钮点击事件
like_click(e) {
this.$refs.likeButton.handleClick(e);
},
// 点赞计数
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
}
}
}

31
pages/plugins/live/pull/mixins/mixins.js
View File

@ -47,13 +47,15 @@ export default {
methods: {
init() {
uni.showLoading({
title: '直播间数据加载中...',
title: '直播数据加载中...',
mask: true
});
uni.request({
url: app.globalData.get_request_url('index', 'room', 'live'),
url: app.globalData.get_request_url('detail', 'index', 'live'),
method: 'POST',
data: {},
data: {
live_room_id: 1
},
dataType: 'json',
success: (res) => {
// 隐藏加载提示
@ -62,9 +64,10 @@ export default {
// 显示直播内容
this.is_loading = false;
// 判断是否有数据
if(res.data.code == 0) {
if(new_data.code == 0) {
this.like_show_imgs = new_data.data.like_icon_list || [];
// 获取直播间信息
this.live_config = new_data.data || {};
this.live_config = new_data.data.room || {};
// 如果不存在拉流地址则认为直播已结束，避免因为报错导致的页面异常
// if (isEmpty(new_data.data.pull_flv_url)) {
// this.is_live_ended = true;
@ -74,6 +77,7 @@ export default {
title: new_data.msg || '获取直播间信息失败',
icon: 'none'
});
this.is_live_ended = true;
}
},
fail: (err) => {
@ -85,14 +89,13 @@ export default {
});
},
ended() {
console.log('1111');
this.is_live_ended = true;
},
live_back() {
app.globalData.page_back_prev_event();
},
// 处理鼠标双击事件
handleDoubleClick(event) {
handle_double_click(event) {
if (event.target.dataset.ignore) {
return;
}
@ -105,12 +108,16 @@ export default {
this.lastLikeTime = currentTime;
if (this.$refs.likeEffect) {
this.$refs.likeEffect.addLike(event);
this.$refs.likeEffect.add_like(event);
}
if (this.$refs.liveContent) {
this.$refs.liveContent.like_click(event);
}
},
// 处理触屏双击事件
handleTouchEnd(event) {
handle_touch_end(event) {
if (event.target.dataset.ignore) {
return;
}
@ -143,7 +150,11 @@ export default {
this.lastLikeTime = currentTime;
if (this.$refs.likeEffect) {
this.$refs.likeEffect.addLike(event);
this.$refs.likeEffect.add_like(event);
}
if (this.$refs.liveContent) {
this.$refs.liveContent.like_click(event);
}
}
this.lastTapTime = currentTime;

6
pages/plugins/live/pull/pull.nvue
View File

@ -3,14 +3,14 @@
<view class="flex-1 pr">
<live-video ref="live-video" :src="live_config.pull_flv_url || 'http://live-pull-all.shopxo.vip/68f764013572f9240ca7ce6c/shopxo122.m3u8'" @ended="ended"></live-video>
</view>
<view v-if="!is_loading" class="live-content" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'" @dblclick="handleDoubleClick" @touchend="handleTouchEnd" :data-ignore="false">
<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">
<template v-if="!is_live_ended">
<live-content :live-config="live_config" @live-back="live_back" @handleDoubleClick="handleDoubleClick" @handleTouchEnd="handleTouchEnd"></live-content>
<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>
<!-- 简化版点赞效果组件 -->
<like-effect ref="likeEffect" :custom-images="like_show_imgs" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'"></like-effect>
</template>
<template v-else>
<view class="live-ended flex-row align-c jc-c" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'" @dblclick="handleDoubleClick" @touchend="handleTouchEnd" :data-ignore="true">
<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">
<view class="flex-col align-c">
<text style="color:#fff;font-size:16px;">直播已结束</text>
<button plain size="mini" class="mt-10 live-ended-button" @click="back"><text class="cr-f pa-5" @tap="live_back">退出直播间</text></button>

10
pages/plugins/live/pull/pull.vue
View File

@ -1,13 +1,13 @@
<template>
<view :class="theme_view + ' live-bg'">
<view class="w h">
<view class="w h" @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>
<!-- 简化版点赞效果组件 -->
<like-effect ref="likeEffect" :custom-images="like_show_imgs"></like-effect>
</view>
<view v-if="!is_loading" class="live-content" @dblclick="handleDoubleClick" @touchend="handleTouchEnd">
<view v-if="!is_loading" class="live-content pointer-events-none">
<template v-if="!is_live_ended">
<live-content :live-config="live_config" :live-show-imgs="like_show_imgs" @live-back="live_back" @handleDoubleClick="handleDoubleClick" @handleTouchEnd="handleTouchEnd"></live-content>
<!-- 简化版点赞效果组件 -->
<like-effect ref="likeEffect" :custom-images="like_show_imgs"></like-effect>
<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>
</template>
<template v-else>
<view class="live-ended flex-row align-c jc-c">