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

修改页面显示逻辑

master
于肖磊 2025-12-10 17:42:47 +08:00
parent 60b40209da
commit bb35671cb3
5 changed files with 86 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<template>
<!-- #ifdef APP-NVUE -->
<view class="flex-col jc-sb pr pa-10 box-border-box bottom-line-exclude-bottom" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'">
<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;">
@ -31,15 +31,15 @@
<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;'">
<view class="bulletin-area pr pointer-events-auto" :style="'width:' + (propWindowWidth - 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">
<list class="bulletin-area" :style="'width:' + (propWindowWidth - 150) + 'px;'" :show-scrollbar="false" loadmoreoffset="30" @scroll="scroll_event" @loadmore="scroll_to_lower_event">
<cell v-for="(item, index) in bulletins" :key="item.id" ref="bulletin_index">
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<!-- scroll-view 只有非nvue的页面使用 -->
<scroll-view scroll-y class="bulletin-area" :style="'width:' + (windowWidth - 150) + 'px;'" :show-scrollbar="false" lower-threshold="30" :scroll-with-animation="true" :scroll-top="scroll_top" @scroll="scroll_event" @scroll_to_lower_event="scroll_to_lower_event">
<scroll-view scroll-y class="bulletin-area" :style="'width:' + (propWindowWidth - 150) + 'px;'" :show-scrollbar="false" lower-threshold="30" :scroll-with-animation="true" :scroll-top="scroll_top" @scroll="scroll_event" @scroll_to_lower_event="scroll_to_lower_event">
<view v-for="(item, index) in bulletins" :key="item.id">
<!-- #endif -->
<!-- 中间弹幕区域 -->
@ -116,7 +116,7 @@
</view>
</view>
<!-- 底部谁来了的提示-->
<!-- <view v-if="is_user_comes" class="flex-row mt-3 pointer-events-auto" :style="'max-width:' + (windowWidth - 100) + 'px;'">
<!-- <view v-if="is_user_comes" class="flex-row mt-3 pointer-events-auto" :style="'max-width:' + (propWindowWidth - 100) + 'px;'">
<view class="user-comes flex-row">
<text class="user-name cr-blue">{{ commons_name }}</text>
<text class="user-name cr-d">来了</text>
@ -149,7 +149,7 @@
</view>
</view>
<!-- 添加评论 -->
<view v-if="is_add_comment" class="keyboard-input pointer-events-auto" :style="'width:' + windowWidth + 'px;bottom:' + listener_height + 'px;'">
<view v-if="is_add_comment" class="keyboard-input pointer-events-auto" :style="'width:' + propWindowWidth + 'px;bottom:' + listener_height + 'px;'">
<view class="keyboard-input-border" style="padding: 16rpx 22rpx;border: 2rpx solid #ddd;border-radius: 50rpx;">
<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>
@ -197,7 +197,15 @@
propLiveShowImgs: {
type: Array,
default: () => []
}
},
propWindowWidth: {
type: Number,
default: 0
},
propWindowHeight: {
type: Number,
default: 0
},
},
data() {
return {
@ -226,8 +234,6 @@
goods_price: '99.00'
},
//#region 头部样式和页面宽度处理
windowWidth: 0,
windowHeight: 0,
header_style: '',
//#endregion
@ -324,8 +330,6 @@
* 组件挂载后执行初始化操作
*/
mounted() {
console.log('1111');
// 初始化窗口信息和滚动条高度
this.init_window_info();
// 滚动到评论区底部
@ -339,8 +343,6 @@
* 组件销毁前清理资源
*/
beforeDestroy() {
console.log('222');
// 清理socket连接
this.clear_interval_task();
this.unbind_keyboard_listener();
@ -359,10 +361,6 @@
* 获取屏幕宽高，并根据不同平台设置头部样式
*/
init_window_info() {
const data = uni.getWindowInfo();
this.windowWidth = data.windowWidth;
this.windowHeight = data.windowHeight;
// 菜单按钮位置信息, uniappx中没有这个方法，但是能使用
this.header_style = 'padding-top: 20rpx;';
// 设置有胶囊的时候头部显示的位置
@ -602,7 +600,6 @@
break;
// 消息
case 'message':
console.log(data, 'message');
// 如果最后前一条是进入直播间的提示，则删除
if (this.bulletins.length > 0 && this.bulletins[this.bulletins.length - 1].type == 'go') {
this.bulletins.splice(this.bulletins.length - 1, 1);
@ -615,13 +612,11 @@
user_name: data.data.user.nickname,
text: data.content,
});
console.log(this.bulletins);
// 添加内容之后，需要滚动到最后
this.scroll_to_lower();
});
break;
case 'live-status':
console.log(data.content, 'live-status');
this.$emit('liveStatus', data.content);
break;
}

2
pages/plugins/live/pull/components/video/video.vue
View File

@ -1,6 +1,6 @@
<template>
<!-- #ifdef H5 -->
<h5-hls-video :propSrc="propSrc" propAutoplay :propMuted="muted" class="video-size" @hlsError="error" @ended="ended" @autoPlaySuccess="auto_play_success" @autoPlayError="auto_play_error"></h5-hls-video>
<h5-hls-video :propSrc="propSrc" propAutoplay :propMuted="muted" poster="https://new.shopxo.vip/static/upload/images/common/2019/01/14/1547448705165706.png" class="video-size" @hlsError="error" @ended="ended" @autoPlaySuccess="auto_play_success" @autoPlayError="auto_play_error"></h5-hls-video>
<!-- #endif -->
<!-- #ifdef MP -->
<live-player :src="propSrc" autoplay :muted="muted" class="video-size" @statechange="statechange" @error="error" />

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

@ -26,7 +26,7 @@ export default {
lastTapPosition: { x: 0, y: 0 }, // 记录上次点击位置
lastLikeTime: 0, // 记录上次点赞时间，用于防抖
live_status: 'start',
live_end_msg: '直播已结束',
live_be_right_back: false,
}
},
@ -51,11 +51,10 @@ export default {
// 分享菜单处理
app.globalData.page_share_handle();
// #ifdef APP-NVUE
const data = uni.getWindowInfo();
this.windowWidth = data.windowWidth;
this.windowHeight = data.windowHeight;
// #endif
this.init();
// 页面显示时，连接直播间socket, 避免用户切换到其他页面，再切换回来时，socket连接断开
if (this.$refs.liveContent) {
@ -122,19 +121,14 @@ export default {
/**
* 标记直播结束或者直播暂停
*/
ended() {
// 如果已经暂停了就不需要处理了
ended(flag) {
if (!this.is_live_ended) {
this.is_live_ended = true;
if (this.live_status == 'stop') {
this.live_end_msg = '直播已结束';
} else if (['pause', 'resume'].includes(this.live_status)) {
this.live_end_msg = '主播暂时离开，请稍等...';
// 直播状态为resume时，如果结束了，就需要重新请求直播间状态
console.log(this.live_status);
if (this.live_status == 'resume') {
this.socket_live_status('resume');
}
if (!['pause', 'resume'].includes(this.live_status)) {
this.is_live_ended = true;
} else {
// 暂停直播了或者继续直播了，则提示用户当前主播暂时离开
this.live_be_right_back = true;
this.socket_live_status(this.live_status);
}
}
},
@ -220,14 +214,11 @@ export default {
this.lastTapPosition = { x, y };
},
socket_live_status(status) {
console.log(status, '直播间状态');
this.live_status = status;
// 如果是开始直播了或者继续直播了，则取消直播结束标记
console.log(this.is_live_ended);
if (['start', 'resume'].includes(status) && this.is_live_ended) {
// 如果是暂停直播了或者继续直播了，则提示用户当前主播暂时离开
if (['pause', 'resume'].includes(status) && !this.is_live_ended && this.live_be_right_back) {
setTimeout(() => {
console.log('继续直播标记');
this.is_live_ended = false;
this.live_be_right_back = false;
}, 5000);
}
}

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

@ -1,23 +1,26 @@
<template>
<view :class="theme_view + ' flex-row pr'" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'">
<view v-if="!is_live_ended" class="flex-1 pr" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="false">
<live-video ref="live-video" :propSrc="live_config.pull_flv_url || 'http://live-pull-all.shopxo.vip/68f764013572f9240ca7ce6c/shopxo122.m3u8'" @ended="ended"></live-video>
<view class="flex-1 pr live-bg" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="false">
<live-video v-if="!is_live_ended" ref="live-video" :propSrc="live_config.pull_flv_url || 'http://live-pull-all.shopxo.vip/68f764013572f9240ca7ce6c/shopxo122.m3u8'" @ended="ended"></live-video>
<!-- 简化版点赞效果组件 -->
<full-screen-like-effect ref="fullScreenLikeEffect" :propCustomImages="like_show_imgs" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'"></full-screen-like-effect>
</view>
<template v-if="!is_loading">
<view class="live-content" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'">
<live-content ref="liveContent" :propLiveConfig="live_config" :propLiveShowImgs="like_show_imgs" @liveBack="live_back" @handleDoubleClick="handle_double_click" @handleTouchEnd="handle_touch_end" @liveStatus="socket_live_status"></live-content>
<live-content ref="liveContent" :propWindowWidth="windowWidth" :propWindowHeight="windowHeight" :propLiveConfig="live_config" :propLiveShowImgs="like_show_imgs" @liveBack="live_back" @handleDoubleClick="handle_double_click" @handleTouchEnd="handle_touch_end" @liveStatus="socket_live_status"></live-content>
</view>
<view v-if="is_live_ended" class="live-ended flex-row align-c jc-c" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'">
<view class="flex-col align-c">
<text class="live-ended-text">{{live_end_msg}}</text>
<text class="live-ended-text">直播已结束</text>
<button plain size="mini" class="mt-10 live-ended-button" @tap="live_back">
<text class="cr-f pa-5">退出直播间</text>
</button>
</view>
</view>
<!-- 主播暂时离开的提示信息-->
<view v-if="live_be_right_back" class="live-pause flex-row align-c jc-c pointer-events-none" :style="'width:' + windowWidth + 'px;'">
<view class="live-pause-tips pointer-events-auto">直播连接失败，正在尝试重新连接...</view>
</view>
</template>
</view>
</template>
@ -44,6 +47,24 @@
}
</script>
<style lang="scss" scoped>
.live-bg {
background-image: linear-gradient(to bottom,#ba623c,#14766a);
}
.live-pause {
position: absolute;
top: 0;
left: 0;
z-index: 9;
height: 600rpx;
background: transparent;
.live-pause-tips {
background: rgba(0, 0, 0, 0.5);
border-radius: 20rpx;
padding: 15rpx 20rpx;
font-size: 32rpx;
color: #fff;
}
}
.live-content {
position: absolute;
top: 0;

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

@ -1,17 +1,17 @@
<template>
<view :class="theme_view + ' live-bg'">
<view v-if="!is_live_ended" class="w h pr" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="false">
<live-video ref="liveVideo" :propSrc="live_config.pull_flv_url || 'http://live-pull-all.shopxo.vip/68f764013572f9240ca7ce6c/shopxo122.m3u8'" @ended="ended" @mutedAutoPlaySuccess="muted_auto_play_success"></live-video>
<view :class="theme_view + ' re'">
<view class="pr live-bg" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="false">
<live-video v-if="!is_live_ended && !live_be_right_back" ref="liveVideo" :propSrc="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" :propCustomImages="like_show_imgs"></full-screen-like-effect>
</view>
<template v-if="!is_loading">
<view class="live-content pointer-events-none">
<live-content ref="liveContent" :propLiveConfig="live_config" :propLiveShowImgs="like_show_imgs" @liveBack="live_back" @liveStatus="socket_live_status"></live-content>
<live-content ref="liveContent" :propWindowWidth="windowWidth" :propLiveConfig="live_config" :propLiveShowImgs="like_show_imgs" @liveBack="live_back" @liveStatus="socket_live_status"></live-content>
</view>
<view v-if="is_live_ended" class="live-ended flex-row align-c jc-c">
<view class="flex-col align-c">
<text class="live-ended-text">{{live_end_msg}}</text>
<text class="live-ended-text">直播已结束</text>
<button plain size="mini" class="mt-10 live-ended-button" @tap.stop="live_back">
<text class="cr-f pa-5">退出直播间</text>
</button>
@ -23,6 +23,10 @@
因浏览器限制静音，<text class="ml-5 cr-f live-muted-text" @tap="muted_tap">请点击打开声音</text>
</view>
</view>
<!-- 主播暂时离开的提示信息-->
<view v-if="live_be_right_back" class="live-pause flex-row align-c jc-c pointer-events-none">
<view class="live-pause-tips pointer-events-auto">直播连接失败，正在尝试重新连接中...</view>
</view>
</template>
</view>
</template>
@ -53,7 +57,9 @@
},
// 静音提示点击
muted_tap() {
this.$refs.liveVideo.muted_tap();
if (this.$refs.liveVideo) {
this.$refs.liveVideo.muted_tap();
}
// 关闭静音提示
this.is_muted_auto_play_success = false;
}
@ -63,15 +69,34 @@
<style lang="scss" scoped>
.live-bg {
background-image: linear-gradient(to bottom,#ba623c,#14766a);
width: 100vw;
height: 100vh;
}
.live-content {
position: absolute;
top: 0;
left: 0;
z-index: 9;
z-index: 8;
width: 100%;
height: 100%;
}
.live-pause {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 9;
width: 100%;
height: 600rpx;
background: transparent;
.live-pause-tips {
background: rgba(0, 0, 0, 0.5);
border-radius: 20rpx;
padding: 15rpx 20rpx;
font-size: 28rpx;
color: #fff;
}
}
.live-muted {
position: absolute;
top: 50%;