修改页面显示逻辑
parent
60614a7992
commit
8cdb5b8cea
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -295,6 +295,6 @@
|
|||
<style lang="scss" scoped>
|
||||
/* 动画元素固定定位样式 */
|
||||
.a-img {
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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,13 +229,25 @@ export default {
|
|||
* 处理鼠标双击事件
|
||||
* @param {Event} event 鼠标事件对象
|
||||
*/
|
||||
handle_double_click(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 < 200) {
|
||||
if (currentTime - this.lastLikeTime < 300) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -246,6 +260,7 @@ export default {
|
|||
if (this.$refs.liveContent) {
|
||||
this.$refs.liveContent.like_click(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue