修改页面显示逻辑

master
于肖磊 2026-01-06 15:18:26 +08:00
parent 60614a7992
commit 8cdb5b8cea
7 changed files with 57 additions and 31 deletions

View File

@ -439,11 +439,11 @@
<style scoped>
.simple-like-container {
position: absolute;
position: fixed;
top: 0;
left: 0;
/* #ifndef APP-NVUE */
width: 100%;
width: 100vw;
height: 100%;
pointer-events: none;
/* #endif */

View File

@ -295,6 +295,6 @@
<style lang="scss" scoped>
/* 动画元素固定定位样式 */
.a-img {
position: fixed;
position: absolute;
}
</style>

View File

@ -3,7 +3,7 @@
<view class="flex-col jc-sb pr pa-10 box-border-box bottom-line-exclude-bottom" :style="'width:' + propWindowWidth + 'px;height:' + propWindowHeight + 'px;'">
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<view class="flex-col jc-sb pr pa-10 box-border-box bottom-line-exclude-bottom" style="width: 100vw;height: 100vh;">
<view class="flex-col jc-sb pr pa-10 box-border-box bottom-line-exclude-bottom" style="width: 100%;height: 100vh;">
<!-- #endif -->
<!-- 顶部主播信息 -->
<view class="flex-row align-c jc-sb" :style="header_style">
@ -123,7 +123,7 @@
</view>
</view>
<!-- 底部交互区域 -->
<view class="flex-row align-c mt-5 pointer-events-auto">
<view class="flex-row align-c mt-5 pointer-events-auto pr">
<template v-if="is_socket_success">
<view class="flex-1 bottom-actions-input">
<input :value="comment_value" type="text" confirm-type="done" :adjust-position="false" style="color: #fff;" placeholder="说点什么" @focus="add_comment" @input="(e) => comment_value = e.detail.value" @confirm="comment_input_confirm" />

View File

@ -60,7 +60,20 @@
this.windowWidth = data.windowWidth;
this.windowHeight = data.windowHeight;
},
mounted() {
window.addEventListener('click', this.click_video);
},
beforeDestroy() {
window.removeEventListener('click', this.click_video);
},
methods: {
/**
* 点击视频区域处理函数
* 点击时切换视频是否静音
*/
click_video() {
this.$emit('mutedTap');
},
reload_video() {
// #ifndef MP
//
@ -173,7 +186,7 @@
<style lang="scss" scoped>
.video-size {
width: 100vw;
width: 100%;
height: 100vh;
}
.video-bg {

View File

@ -33,6 +33,8 @@ export default {
retry_count: 0, // 重试计数器
live_room_reconnect_number: 0, // 直播间重连次数
live_room_reconnect_interval_time: 1, // 直播间重连间隔时间
live_like_count: 0, // 点赞次数
live_like_click_timer: null,
}
},
@ -58,7 +60,7 @@ export default {
app.globalData.page_share_handle();
const data = uni.getWindowInfo();
this.windowWidth = data.windowWidth;
this.windowWidth = data.windowWidth > 800 ? 800 : data.windowWidth;
this.windowHeight = data.windowHeight;
this.init();
@ -227,24 +229,37 @@ export default {
* 处理鼠标双击事件
* @param {Event} event 鼠标事件对象
*/
handle_double_click(event) {
if (event.target.dataset.ignore) {
return;
}
// 防抖处理200ms内只能触发一次
const currentTime = Date.now();
if (currentTime - this.lastLikeTime < 200) {
return;
}
this.lastLikeTime = currentTime;
if (this.$refs.fullScreenLikeEffect) {
this.$refs.fullScreenLikeEffect.add_like(event);
}
handle_click(event) {
this.live_like_count++;
if (this.live_like_count === 1) {
// 第一次点击,设置定时器
this.live_like_click_timer = setTimeout(function() {
// 单击,重置计数器
this.live_like_count = 0;
}, 300); // 300ms内的两次点击算作双击
} else if (this.live_like_count === 2) {
// 双击
clearTimeout(this.live_like_click_timer);
this.live_like_count = 0;
if (event.target.dataset.ignore) {
return;
}
// 防抖处理200ms内只能触发一次
const currentTime = Date.now();
if (currentTime - this.lastLikeTime < 300) {
return;
}
this.lastLikeTime = currentTime;
if (this.$refs.fullScreenLikeEffect) {
this.$refs.fullScreenLikeEffect.add_like(event);
}
if (this.$refs.liveContent) {
this.$refs.liveContent.like_click(event);
if (this.$refs.liveContent) {
this.$refs.liveContent.like_click(event);
}
}
},

View File

@ -1,6 +1,6 @@
<template>
<view :class="theme_view + ' flex-row pr'" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'">
<view class="flex-1 pr live-bg" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="false">
<view class="flex-1 pr live-bg" @click="handle_click" @touchend="handle_touch_end" :data-ignore="false">
<component-live-video v-if="!is_live_ended" ref="liveVideo" :propSrc="live_video_src || 'http://live-pull-all.shopxo.vip/68f764013572f9240ca7ce6c/shopxo122.m3u8'" @loadedmetadata="loadedmetadata" @ended="ended"></component-live-video>
<!-- 简化版点赞效果组件 -->
<component-full-screen-like-effect ref="fullScreenLikeEffect" :propCustomImages="like_show_imgs" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'"></component-full-screen-like-effect>

View File

@ -1,7 +1,7 @@
<template>
<view :class="theme_view + ' re'">
<view class="pr live-bg" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="false">
<component-live-video v-if="!is_live_ended" ref="liveVideo" :propSrc="live_video_src || 'http://live-pull-all.shopxo.vip/68f764013572f9240ca7ce6c/shopxo122.m3u8'" @ended="ended" @loadedmetadata="loadedmetadata" @mutedAutoPlaySuccess="muted_auto_play_success"></component-live-video>
<view :class="theme_view + ' pr'">
<view class="pr live-bg" @click="handle_click" @touchend="handle_touch_end" :data-ignore="false">
<component-live-video v-if="!is_live_ended" ref="liveVideo" :propSrc="live_video_src || 'http://live-pull-all.shopxo.vip/68f764013572f9240ca7ce6c/shopxo122.m3u8'" @ended="ended" @loadedmetadata="loadedmetadata" @mutedAutoPlaySuccess="muted_auto_play_success" @mutedTap="muted_tap"></component-live-video>
<!-- 简化版点赞效果组件 -->
<component-full-screen-like-effect ref="fullScreenLikeEffect" :propCustomImages="like_show_imgs"></component-full-screen-like-effect>
</view>
@ -76,7 +76,7 @@
<style lang="scss" scoped>
.live-bg {
background-image: linear-gradient(to bottom,#ba623c,#14766a);
width: 100vw;
width: 100%;
height: 100vh;
}
.live-content {
@ -122,8 +122,6 @@
}
}
.live-ended {
width: 100vw;
height: 100vh;
background: linear-gradient(to bottom,#AD18F9,#05DFC7);
position: absolute;
top: 0;