|
|
@@ -55,7 +55,7 @@
|
|
|
|
|
|
<view class="content" :class="{ 'horizontal-content': isFocus==1, 'trailer-content': liveItem.status==1 }">
|
|
|
<!-- 顶部信息栏 -->
|
|
|
- <view class="top-info-bar" :class="liveItem.showType == 1 ? 'horizontal-top' : ''">
|
|
|
+ <view class="top-info-bar" v-if="!isFullscreen" :class="liveItem.showType == 1 ? 'horizontal-top' : ''">
|
|
|
<view class="user-info-section">
|
|
|
<image v-if="!scene" @click="goBack" class="back-icon mr4"
|
|
|
src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/return3.png" />
|
|
|
@@ -94,15 +94,6 @@
|
|
|
<!-- 视频区域 -->
|
|
|
<view class="videolist" v-if="liveItem.status == 2">
|
|
|
<view class="video-container" :class="liveItem.showType == 1 ? 'horizontal-layout' : ''">
|
|
|
- <!-- <video v-if="liveItem.videoUrl && liveItem.liveType == 2&&!generating" :id="`myVideo_${liveId}`"
|
|
|
- :autoplay="true" class="video-player" :src="liveItem.videoUrl" object-fit="contain"
|
|
|
- :custom-cache="false" :enable-progress-gesture="false" vslide-gesture-in-fullscreen="false"
|
|
|
- :show-center-play-btn="false" :http-cache="false" loop @error="videoError"
|
|
|
- @timeupdate="onVideoTimeUpdate" @loadedmetadata="onVideoMetaLoaded" @pause="onVideoPause"
|
|
|
- @play="onVideoPlay" @waiting="onVideoWaiting" :enable-play-gesture="false"
|
|
|
- :play-strategy="1" @dblclick="preventDoubleClick" preload="auto"
|
|
|
- :enable-stash-buffer="false" :stash-initial-size="0" :stash-max-size="0" :stash-time="0"
|
|
|
- type="application/x-mpegURL" :controls="isPlayback"></video> -->
|
|
|
<video v-if="liveItem.videoUrl && liveItem.liveType == 2 && !generating"
|
|
|
:id="`myVideo_${liveId}`" :autoplay="true" class="video-player" :src="liveItem.videoUrl"
|
|
|
object-fit="contain" :custom-cache="false" :enable-progress-gesture="false"
|
|
|
@@ -111,13 +102,35 @@
|
|
|
@pause="onVideoPause" @play="onVideoPlay" @waiting="onVideoWaiting"
|
|
|
:enable-play-gesture="false" :play-strategy="1" @dblclick="preventDoubleClick"
|
|
|
preload="auto" :enable-stash-buffer="false" :stash-initial-size="0" :stash-max-size="0"
|
|
|
- :stash-time="0" type="application/x-mpegURL" :controls="false" show-fullscreen-btn
|
|
|
- show-play-btn show-mute-btn enable-play-gesture="true"></video>
|
|
|
- <view v-else class="txt">回放生成中...</view>
|
|
|
+ :stash-time="0" type="application/x-mpegURL" :controls="false" :show-fullscreen-btn="false"
|
|
|
+ show-play-btn show-mute-btn enable-play-gesture="true"
|
|
|
+ @fullscreenchange="onFullscreenChange" x5-video-player-fullscreen="true"
|
|
|
+ x5-video-player-type="h5" x5-video-orientation="landscape" :webkit-playsinline="true"
|
|
|
+ playsinline="true" :x5-playsinline="true">
|
|
|
+ </video>
|
|
|
+
|
|
|
+ <!-- 全屏返回按钮 - 只在全屏状态下显示 -->
|
|
|
+ <!-- <view v-if="isFullscreen" class="fullscreen-exit-btn" @click="exitFullscreen">
|
|
|
+ <image src="/static/images/half_screen.png" class="exit-fullscreen-icon" />
|
|
|
+ <text class="exit-text">退出全屏</text>
|
|
|
+ </view> -->
|
|
|
+ <!-- 全屏按钮 - 只在非全屏状态下显示 -->
|
|
|
+ <!-- <view v-if="showCustomControls && liveItem.showType==1 && !isFullscreen" class="custom-controls"
|
|
|
+ @click="toggleFullscreen">
|
|
|
+ <image src="/static/images/full_screen.png" class="control-icon" />
|
|
|
+ </view> -->
|
|
|
+
|
|
|
+ <!-- 投诉按钮 -->
|
|
|
+ <view v-if="liveItem.showType==2" class="complaint-box"
|
|
|
+ @click="navgetTo('/pages_shopping/live/complaintList') ">
|
|
|
+ <image class="image w32 h32 mr10" src="/static/images/complaint.png" mode="widthFix" />
|
|
|
+ <view class="fs26">投诉</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 回放标签 -->
|
|
|
<view v-if="isPlayback" class="replay-label">回放</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
<!-- 直播结束状态 -->
|
|
|
<!-- v-if="liveItem.status == 3" -->
|
|
|
<view class="videolist" v-if="liveItem.status == 3">
|
|
|
@@ -140,6 +153,25 @@
|
|
|
<view v-if="liveItem.videoUrl && liveItem.liveType == 3" class="replay-label">直播回放</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view class="slide-group">
|
|
|
+ <view class="action-button-group" v-if="!isFocus">
|
|
|
+ <view :class="[liveItem.showType === 1 ? 'horizontal' : 'vertical','icon-button','ml20']">
|
|
|
+ <button open-type="share" class="action-icon button-reset">
|
|
|
+ <image class="action-icon"
|
|
|
+ src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/weixin.png"
|
|
|
+ mode="widthFix" />
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="action-button-group" v-if="!isFocus">
|
|
|
+ <view
|
|
|
+ :class="[liveItem.showType === 1 ? 'horizontal' : 'vertical','icon-button','ml20','like-container']"
|
|
|
+ @click="onLike">
|
|
|
+ <LikeButton :initialCount="100" :heartsPerClick="5" @like="onLike" />
|
|
|
+ <view class="like-count">{{formattedLikeCount||0 }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
|
|
|
<!-- 底部聊天区域 -->
|
|
|
<view class="chat-area-container" :class="{
|
|
|
@@ -151,6 +183,12 @@
|
|
|
<u-tabs :list="listTabs" @click="clickTabs" lineColor="#02B176"
|
|
|
:activeStyle="{color: '#02B176',fontWeight: 'bold',transform: 'scale(1.05)'}">
|
|
|
</u-tabs>
|
|
|
+ <!-- 投诉 -->
|
|
|
+ <view v-if="liveItem.showType==1" class="complaint-box"
|
|
|
+ @click="navgetTo('/pages_shopping/live/complaintList') ">
|
|
|
+ <image class="image w32 h32 mr10" src="/static/images/complaint2.png" mode="widthFix" />
|
|
|
+ <view class="fs26">投诉</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
|
|
|
<view class="chat-content-wrapper" :class="{ 'chat-content-focused': isFocus }">
|
|
|
@@ -160,7 +198,12 @@
|
|
|
</view>
|
|
|
<scroll-view id="msgScroll" v-if="Array.isArray(talklist)" enable-flex scroll-y="true"
|
|
|
:enhanced="true" :bounces="false" :show-scrollbar="false" :fast-deceleration="false"
|
|
|
+<<<<<<< HEAD
|
|
|
:enable-back-to-top="false" class="message-scroll-view" :scroll-top="scrollTop"
|
|
|
+=======
|
|
|
+ :enable-back-to-top="false" class="message-scroll-view"
|
|
|
+ :class="liveItem.status == 1 ? 'message-scroll2' : ''" :scroll-top="scrollTop"
|
|
|
+>>>>>>> ec4703cedaff0cd705138bc3eab10dbc8ee4cfa6
|
|
|
:scroll-into-view="scrollIntoView" @scroll="onScroll" ref="scrollView">
|
|
|
<view class="message-list" v-for="(item, talkIndex) in (talklist || [])"
|
|
|
:key="item.uniqueId " :id="`list_${item.uniqueId }`" v-show="item.cmd != 'red' ">
|
|
|
@@ -200,7 +243,7 @@
|
|
|
<view class="action-buttons" v-if="!isFocus">
|
|
|
<view class="action-button-group" v-if="!isFocus">
|
|
|
<view
|
|
|
- :class="[liveItem.showType === 1 ? 'horizontal' : 'vertical','icon-button','ml20']"
|
|
|
+ :class="[liveItem.showType === 1 ? 'horizontal' : 'vertical','icon-button','mr40']"
|
|
|
@click="isMore=true,shopping=false">
|
|
|
<!-- <image
|
|
|
src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/more-icon.png"
|
|
|
@@ -212,29 +255,13 @@
|
|
|
class="action-icon" />
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="action-button-group" v-if="!isFocus">
|
|
|
- <view
|
|
|
- :class="[liveItem.showType === 1 ? 'horizontal' : 'vertical','icon-button','ml20']">
|
|
|
- <button open-type="share" class="action-icon button-reset">
|
|
|
- <image class="action-icon"
|
|
|
- src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/weixin.png"
|
|
|
- mode="widthFix" />
|
|
|
- </button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="icon-button " @tap="openCart()">
|
|
|
+
|
|
|
+ <view class="icon-button mr20" @tap="openCart()">
|
|
|
<image
|
|
|
src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/shopping.png"
|
|
|
class="cart-icon" />
|
|
|
</view>
|
|
|
- <view class="action-button-group" v-if="!isFocus">
|
|
|
- <view
|
|
|
- :class="[liveItem.showType === 1 ? 'horizontal' : 'vertical','icon-button','ml20','like-container']"
|
|
|
- @click="onLike">
|
|
|
- <LikeButton :initialCount="100" :heartsPerClick="5" @like="onLike" />
|
|
|
- <view class="like-count">{{formattedLikeCount||0 }}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -267,18 +294,12 @@
|
|
|
<!-- :show="userlogo" -->
|
|
|
<u-popup :show="userlogo" mode="bottom" round='12'>
|
|
|
<view class="userlogo column">
|
|
|
- <!-- <view class="mtb30 justify-start align-center ml20">
|
|
|
- <u-avatar :src="imgPath+'/app/image/logo.png'" size="50"></u-avatar>
|
|
|
- <view class="bold mlr20">{{imgname}}</view>
|
|
|
- <view>申请</view>
|
|
|
- </view> -->
|
|
|
<view class="bold fs36 ml20">授权你的昵称信息</view>
|
|
|
- <view class="mtb20 justify-between align-center plr20">
|
|
|
+ <view class=" justify-between align-center plr20">
|
|
|
<view class="button-container">
|
|
|
- <input type="nickname" class="hidden-input" @blur="onNickNameInput" placeholder="请点击授权微信昵称"
|
|
|
- @input="onNickNameInput" />
|
|
|
- <!-- <button class="custom-button"
|
|
|
- :class="nameuser==''?'subname':'subavt'">{{nameuser?"已授权":'允许授权'}}</button> -->
|
|
|
+ <input type="nickname" class="hidden-input"
|
|
|
+ placeholder-style="color:#ffffff; font-size:44rpx;" @blur="onNickNameInput"
|
|
|
+ placeholder="请点击授权微信昵称" @input="onNickNameInput" />
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="submitname" @click="confimrname">确定</view>
|
|
|
@@ -519,11 +540,11 @@
|
|
|
<!-- 更多操作弹窗 -->
|
|
|
<u-popup :show="isMore" @close="closeMore" round="20rpx" bgColor="#f3f5f9" zIndex="10076">
|
|
|
<view class="more-actions-popup">
|
|
|
- <view class="more-action-item" @click="navgetTo('/pages_shopping/live/integral'), (isMore = false)">
|
|
|
+ <!-- <view class="more-action-item" @click="navgetTo('/pages_shopping/live/integral'), (isMore = false)">
|
|
|
<image class="action-icon"
|
|
|
src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/order.png" />
|
|
|
<view class="action-label">积分</view>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
<view class="more-action-item"
|
|
|
@click="navgetTo('/pages_shopping/live/storeOrderRefundList?liveId=' + liveId), (isMore = false)">
|
|
|
<image class="action-icon"
|
|
|
@@ -686,6 +707,20 @@
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+<<<<<<< HEAD
|
|
|
+=======
|
|
|
+ isFullscreen: false,
|
|
|
+ isMuted: false,
|
|
|
+ showCustomControls: true,
|
|
|
+ videoContext: null,
|
|
|
+
|
|
|
+ isNow: false,
|
|
|
+ fakeAvatar: Array.from({
|
|
|
+ length: 11
|
|
|
+ }, (_, i) =>
|
|
|
+ `https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/avatar${i + 1}.jpg`),
|
|
|
+ virtualHuman: null,
|
|
|
+>>>>>>> ec4703cedaff0cd705138bc3eab10dbc8ee4cfa6
|
|
|
userlogo: false,
|
|
|
listTabs: [{
|
|
|
name: '讨论',
|
|
|
@@ -848,6 +883,7 @@
|
|
|
};
|
|
|
},
|
|
|
async onLoad(options) {
|
|
|
+ this.toggleFullscreen()
|
|
|
this.initTime()
|
|
|
this.getLocationByIP();
|
|
|
if (options.liveId) {
|
|
|
@@ -955,6 +991,20 @@
|
|
|
this.getliving(this.liveId);
|
|
|
},
|
|
|
mounted() {
|
|
|
+ // 获取 video 上下文
|
|
|
+ // 监听视频全屏事件
|
|
|
+ setTimeout(() => {
|
|
|
+ this.videoContext = uni.createVideoContext(`myVideo_${this.liveId}`, this);
|
|
|
+
|
|
|
+ // 添加全屏状态变化监听(更可靠的方式)
|
|
|
+ if (this.videoContext) {
|
|
|
+ // 使用 uni.onUserCaptureScreen 作为备选方案
|
|
|
+ uni.onUserCaptureScreen(() => {
|
|
|
+ console.log('用户截屏,可能是全屏状态');
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+
|
|
|
const systemInfo = uni.getSystemInfoSync();
|
|
|
this.isIOS = systemInfo.platform === 'ios';
|
|
|
},
|
|
|
@@ -1030,8 +1080,35 @@
|
|
|
this.totalTraffic = 0;
|
|
|
}
|
|
|
this.startTimer();
|
|
|
+<<<<<<< HEAD
|
|
|
+=======
|
|
|
+
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (!this.userInfo || !this.userInfo.updateTime) {
|
|
|
+ console.log('用户信息不完整,显示授权弹窗');
|
|
|
+ this.userlogo = true;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 重新计算 isNow
|
|
|
+ const isNowCalculated = dayjs(this.userInfo.updateTime).isSame(dayjs(), 'day');
|
|
|
+ console.log('重新计算 isNow:', isNowCalculated);
|
|
|
+
|
|
|
+ if (!isNowCalculated) {
|
|
|
+ console.log('不是今天更新过,显示授权弹窗');
|
|
|
+ this.userlogo = true;
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ this.videoContext = uni.createVideoContext(`myVideo_${this.liveId}`, this);
|
|
|
+ console.log('videoContext 初始化完成:', this.videoContext);
|
|
|
+ }, 1000);
|
|
|
+ });
|
|
|
+ // 初始化横屏支持
|
|
|
+ // this.initFullscreenSupport();
|
|
|
+>>>>>>> ec4703cedaff0cd705138bc3eab10dbc8ee4cfa6
|
|
|
},
|
|
|
|
|
|
+
|
|
|
//分享给好友
|
|
|
onShareAppMessage() {
|
|
|
return {
|
|
|
@@ -1045,7 +1122,9 @@
|
|
|
console.error('分享失败', err);
|
|
|
}
|
|
|
};
|
|
|
- }, // 分享到朋友圈
|
|
|
+ },
|
|
|
+
|
|
|
+ // 分享到朋友圈
|
|
|
onShareTimeline() {
|
|
|
return {
|
|
|
title: '邀请你来观看直播:' + this.liveItem.liveName,
|
|
|
@@ -1177,6 +1256,11 @@
|
|
|
// 清理大数据和状态
|
|
|
this.clearBigData();
|
|
|
this.resetAllStates();
|
|
|
+ // 清理屏幕方向锁定
|
|
|
+ this.unlockOrientation();
|
|
|
+
|
|
|
+ // 移除屏幕方向监听
|
|
|
+ this.removeOrientationChangeListener();
|
|
|
},
|
|
|
|
|
|
mounted() {
|
|
|
@@ -1223,7 +1307,218 @@
|
|
|
immediate: true
|
|
|
}
|
|
|
},
|
|
|
- methods: {
|
|
|
+ methods: { // 退出全屏
|
|
|
+ exitFullscreen() {
|
|
|
+ console.log('退出全屏按钮被点击');
|
|
|
+
|
|
|
+ if (!this.videoContext) {
|
|
|
+ console.log('创建 videoContext');
|
|
|
+ this.videoContext = uni.createVideoContext(`myVideo_${this.liveId}`, this);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!this.videoContext) {
|
|
|
+ console.error('videoContext 创建失败');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.isFullscreen) {
|
|
|
+ console.log('执行退出全屏操作');
|
|
|
+ this.videoContext.exitFullScreen();
|
|
|
+ } else {
|
|
|
+ console.log('当前不是全屏状态,无需退出');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 添加屏幕方向变化监听
|
|
|
+ addOrientationChangeListener() {
|
|
|
+ if (window.addEventListener) {
|
|
|
+ window.addEventListener('orientationchange', this.handleOrientationChange);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 移除屏幕方向变化监听
|
|
|
+ removeOrientationChangeListener() {
|
|
|
+ if (window.removeEventListener) {
|
|
|
+ window.removeEventListener('orientationchange', this.handleOrientationChange);
|
|
|
+ }
|
|
|
+ }, // 处理屏幕方向变化
|
|
|
+ handleOrientationChange() {
|
|
|
+ const orientation = window.orientation;
|
|
|
+ console.log('屏幕方向变化:', orientation);
|
|
|
+
|
|
|
+ // 0: 竖屏
|
|
|
+ // 90: 横屏(向左转)
|
|
|
+ // -90: 横屏(向右转)
|
|
|
+ // 180: 倒置(很少用)
|
|
|
+
|
|
|
+ if (this.isFullscreen && Math.abs(orientation) !== 90) {
|
|
|
+ // 全屏状态下,如果不是横屏,尝试退出全屏
|
|
|
+ console.log('全屏状态下屏幕方向不正确,尝试退出全屏');
|
|
|
+ if (this.videoContext) {
|
|
|
+ this.videoContext.exitFullScreen();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 强制横屏全屏(备用方案)
|
|
|
+ forceLandscapeFullscreen() {
|
|
|
+ // 尝试多种全屏方式
|
|
|
+ try {
|
|
|
+ // 方案1: 使用video的requestFullScreen
|
|
|
+ if (this.videoContext) {
|
|
|
+ this.videoContext.requestFullScreen({
|
|
|
+ direction: 90
|
|
|
+ });
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.log('方案1失败:', e);
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 方案2: 尝试DOM全屏API
|
|
|
+ const videoElement = document.getElementById(`myVideo_${this.liveId}`);
|
|
|
+ if (videoElement && videoElement.requestFullscreen) {
|
|
|
+ videoElement.requestFullscreen();
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.log('方案2失败:', e);
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 方案3: 使用Web API全屏
|
|
|
+ if (document.documentElement.requestFullscreen) {
|
|
|
+ document.documentElement.requestFullscreen();
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.log('方案3失败:', e);
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log('所有全屏方案都失败了');
|
|
|
+ uni.showToast({
|
|
|
+ title: '无法全屏播放,请尝试手动横屏',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+ // 初始化全屏支持
|
|
|
+ // initFullscreenSupport() {
|
|
|
+ // // 检测是否支持全屏API
|
|
|
+ // if (document.fullscreenEnabled) {
|
|
|
+ // console.log('浏览器支持全屏API');
|
|
|
+ // } else {
|
|
|
+ // console.log('浏览器不支持全屏API,使用备用方案');
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // 切换全屏
|
|
|
+ // 切换全屏
|
|
|
+ toggleFullscreen() {
|
|
|
+ console.log('全屏按钮被点击');
|
|
|
+
|
|
|
+ // 确保 videoContext 存在
|
|
|
+ if (!this.videoContext) {
|
|
|
+ console.log('创建 videoContext');
|
|
|
+ this.videoContext = uni.createVideoContext(`myVideo_${this.liveId}`, this);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!this.videoContext) {
|
|
|
+ console.error('videoContext 创建失败');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.isFullscreen) {
|
|
|
+ this.exitFullscreen();
|
|
|
+ } else {
|
|
|
+ console.log('请求全屏(横屏模式)');
|
|
|
+ this.videoContext.requestFullScreen({
|
|
|
+ direction: 90 // 90表示横屏,0是竖屏
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 全屏状态变化监听
|
|
|
+ // 加强 onFullscreenChange 方法
|
|
|
+ // onFullscreenChange(e) {
|
|
|
+ // console.log('全屏状态变化事件:', e);
|
|
|
+
|
|
|
+ // // 确保正确获取状态
|
|
|
+ // const isFullScreen = e.detail && e.detail.fullScreen;
|
|
|
+ // console.log('全屏状态:', isFullScreen);
|
|
|
+
|
|
|
+ // this.isFullscreen = isFullScreen;
|
|
|
+
|
|
|
+ // // 全屏时隐藏自定义控制条
|
|
|
+ // this.showCustomControls = !this.isFullscreen;
|
|
|
+
|
|
|
+ // // 强制更新UI
|
|
|
+ // this.$forceUpdate();
|
|
|
+
|
|
|
+ // // 调试输出
|
|
|
+ // console.log('isFullscreen:', this.isFullscreen);
|
|
|
+ // console.log('showCustomControls:', this.showCustomControls);
|
|
|
+ // },
|
|
|
+ onFullscreenChange(e) {
|
|
|
+ const videoContainer = e.target.parentNode; // 获取视频父容器
|
|
|
+ const isFullscreen = document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
|
|
|
+
|
|
|
+ if (isFullscreen) {
|
|
|
+ // 进入全屏:让图标容器也进入全屏,确保层级
|
|
|
+ if (videoContainer.requestFullscreen) {
|
|
|
+ videoContainer.requestFullscreen();
|
|
|
+ } else if (videoContainer.webkitRequestFullscreen) {
|
|
|
+ videoContainer.webkitRequestFullscreen();
|
|
|
+ } else if (videoContainer.msRequestFullscreen) {
|
|
|
+ videoContainer.msRequestFullscreen();
|
|
|
+ }
|
|
|
+ // 适配x5内核(微信等)
|
|
|
+ document.documentElement.style.webkitTouchCallout = 'none';
|
|
|
+ document.documentElement.style.webkitUserSelect = 'none';
|
|
|
+ } else {
|
|
|
+ // 退出全屏:退出容器的全屏
|
|
|
+ if (document.exitFullscreen) {
|
|
|
+ document.exitFullscreen();
|
|
|
+ } else if (document.webkitExitFullscreen) {
|
|
|
+ document.webkitExitFullscreen();
|
|
|
+ } else if (document.msExitFullscreen) {
|
|
|
+ document.msExitFullscreen();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 锁定屏幕方向为横屏
|
|
|
+ lockOrientation() {
|
|
|
+ // 设置屏幕方向为横屏
|
|
|
+ try {
|
|
|
+ // 尝试锁定横屏
|
|
|
+ plus.screen.lockOrientation('landscape-primary');
|
|
|
+ } catch (e) {
|
|
|
+ console.log('锁定屏幕方向失败:', e);
|
|
|
+ // 备用方案
|
|
|
+ try {
|
|
|
+ // 使用 Web API(如果支持)
|
|
|
+ if (screen.orientation && screen.orientation.lock) {
|
|
|
+ screen.orientation.lock('landscape');
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ console.log('备用方案也失败了:', err);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, // 解锁屏幕方向
|
|
|
+ unlockOrientation() {
|
|
|
+ try {
|
|
|
+ plus.screen.unlockOrientation();
|
|
|
+ } catch (e) {
|
|
|
+ console.log('解锁屏幕方向失败:', e);
|
|
|
+ // 备用方案
|
|
|
+ try {
|
|
|
+ if (screen.orientation && screen.orientation.unlock) {
|
|
|
+ screen.orientation.unlock();
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ console.log('备用解锁方案也失败了:', err);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
shouquan() {
|
|
|
if (this.user.nickname == '') {
|
|
|
uni.showToast({
|
|
|
@@ -4209,6 +4504,139 @@
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
+ .fullscreen-exit-btn {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 120rpx;
|
|
|
+ right: 40rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ z-index: 99999;
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
+ border-radius: 40rpx;
|
|
|
+ padding: 20rpx 24rpx;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ transform: scale(0.95);
|
|
|
+ background: rgba(0, 0, 0, 0.8);
|
|
|
+ }
|
|
|
+
|
|
|
+ .exit-fullscreen-icon {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .exit-text {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 22rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 全屏时的样式调整
|
|
|
+ .video-container.fullscreen-mode {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 999999;
|
|
|
+ background-color: #000;
|
|
|
+
|
|
|
+ .video-player {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .custom-controls {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 42rpx;
|
|
|
+ right: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ z-index: 9999;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ border-radius: 40rpx;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ // 全屏状态下的样式调整
|
|
|
+ .fullscreen-mode & {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ transform: scale(0.95);
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 全屏时其他元素隐藏
|
|
|
+ .complaint-box,
|
|
|
+ .replay-label {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .video-container {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ /* 根据需要调整 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .video-player {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .custom-controls {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 42rpx;
|
|
|
+ /* 调整位置,避免被其他元素覆盖 */
|
|
|
+ right: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ z-index: 9999;
|
|
|
+ /* 确保在最上层 */
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ border-radius: 40rpx;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 优化全屏按钮样式 */
|
|
|
+ .custom-controls:active {
|
|
|
+ transform: scale(0.95);
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .control-icon {
|
|
|
+ width: 46rpx;
|
|
|
+ height: 46rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ @media screen and (orientation: landscape) {
|
|
|
+ .video-container.horizontal-layout {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .video-player {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
// 重置按钮样式
|
|
|
.button-reset {
|
|
|
background-color: transparent !important;
|
|
|
@@ -4527,6 +4955,22 @@
|
|
|
// z-index: 99;
|
|
|
}
|
|
|
|
|
|
+ .complaint-box {
|
|
|
+ position: absolute;
|
|
|
+ top: 20%;
|
|
|
+ right: 20rpx;
|
|
|
+ width: 140rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: rgba(77, 77, 77, 0.5);
|
|
|
+ padding: 16rpx 0;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 28rpx;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+
|
|
|
.txt {
|
|
|
text-align: center;
|
|
|
font-weight: 500;
|
|
|
@@ -4537,6 +4981,8 @@
|
|
|
.video-player {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
}
|
|
|
|
|
|
.live-end-message {
|
|
|
@@ -4556,8 +5002,61 @@
|
|
|
padding: 6rpx 16rpx;
|
|
|
color: #fff;
|
|
|
border-radius: 15rpx;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 侧边
|
|
|
+ .slide-group {
|
|
|
+ position: absolute;
|
|
|
+ right: 20rpx;
|
|
|
+ top: 60%;
|
|
|
+ z-index: 9000;
|
|
|
+
|
|
|
+ .action-button-group {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 50rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .action-icon {
|
|
|
+ width: 88rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-button {
|
|
|
+ // background: var(--normal-bg);
|
|
|
+ // border-radius: 50%;
|
|
|
+ width: 88rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ transition: transform 0.2s ease;
|
|
|
+
|
|
|
+ // margin-left: 10rpx;
|
|
|
+
|
|
|
+ &.like-container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .like-count {
|
|
|
+ position: absolute;
|
|
|
+ bottom: -40rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FA341E;
|
|
|
+ padding: 6rpx 16rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 30rpx;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -4594,7 +5093,6 @@
|
|
|
position: absolute;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
&.chat-area-focused {
|
|
|
transform: translateY(calc(-1 * var(--keyboard-height, 0rpx))) translateZ(0);
|
|
|
z-index: 1000;
|
|
|
@@ -4603,11 +5101,25 @@
|
|
|
.tabs_bg {
|
|
|
background-color: #fff;
|
|
|
padding: 20rpx 40rpx 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .complaint-box {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
|
+ border: 2rpx solid #EEEEEE;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.chat-content-wrapper {
|
|
|
flex: 1;
|
|
|
- height: 368rpx;
|
|
|
+ height: 300rpx;
|
|
|
padding: 20rpx 0;
|
|
|
transform: translateZ(0);
|
|
|
will-change: height;
|
|
|
@@ -4618,6 +5130,7 @@
|
|
|
}
|
|
|
|
|
|
.notice-message {
|
|
|
+ font-size: 36rpx;
|
|
|
position: absolute;
|
|
|
bottom: 388rpx;
|
|
|
max-width: 80%;
|
|
|
@@ -4625,7 +5138,8 @@
|
|
|
background-color: var(--notice-bg);
|
|
|
margin: 0 0 20rpx 20rpx;
|
|
|
border-radius: 20rpx;
|
|
|
- color: #ffda73;
|
|
|
+ color: #0d0b05;
|
|
|
+ font-weight: 500;
|
|
|
overflow: hidden;
|
|
|
|
|
|
&.horizontal-notice {
|
|
|
@@ -4643,11 +5157,18 @@
|
|
|
flex: 1;
|
|
|
flex-direction: column;
|
|
|
-webkit-overflow-scrolling: touch;
|
|
|
+<<<<<<< HEAD
|
|
|
+=======
|
|
|
+
|
|
|
+ &.message-scroll2 {
|
|
|
+ height: 300rpx;
|
|
|
+ }
|
|
|
+>>>>>>> ec4703cedaff0cd705138bc3eab10dbc8ee4cfa6
|
|
|
}
|
|
|
|
|
|
.message-list {
|
|
|
width: 80%;
|
|
|
- margin-bottom: 4rpx;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
animation: simpleFade 0.2s;
|
|
|
|
|
|
.message-item {
|
|
|
@@ -4774,50 +5295,17 @@
|
|
|
visibility: hidden;
|
|
|
}
|
|
|
|
|
|
- .action-button-group {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
+ .action-icon {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
}
|
|
|
|
|
|
- .icon-button {
|
|
|
- background: var(--normal-bg);
|
|
|
- border-radius: 50%;
|
|
|
- width: 88rpx;
|
|
|
- height: 88rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- transition: transform 0.2s ease;
|
|
|
- margin-left: 10rpx;
|
|
|
-
|
|
|
- &.like-container {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .like-count {
|
|
|
- position: absolute;
|
|
|
- bottom: -10rpx;
|
|
|
- font-size: 14rpx;
|
|
|
- color: #FA341E;
|
|
|
- padding: 4rpx 6rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
+ .cart-icon {
|
|
|
+ width: 58rpx;
|
|
|
+ height: 58rpx;
|
|
|
+ }
|
|
|
|
|
|
- .action-icon {
|
|
|
- width: 48rpx;
|
|
|
- height: 48rpx;
|
|
|
- }
|
|
|
|
|
|
- .cart-icon {
|
|
|
- width: 58rpx;
|
|
|
- height: 58rpx;
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -4930,7 +5418,7 @@
|
|
|
}
|
|
|
|
|
|
.userlogo {
|
|
|
- padding: 40rpx 20rpx;
|
|
|
+ padding: 60rpx 20rpx 40rpx;
|
|
|
color: #181818;
|
|
|
|
|
|
.boxweixin {
|
|
|
@@ -4944,27 +5432,42 @@
|
|
|
|
|
|
.button-container {
|
|
|
position: relative;
|
|
|
- // width: 240rpx;
|
|
|
+ margin: auto;
|
|
|
|
|
|
- .subname {
|
|
|
+ .hidden-input {
|
|
|
+ text-align: center;
|
|
|
background-color: #00aa00;
|
|
|
- color: #fff;
|
|
|
+ padding: 40rpx 10rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin: 40rpx 0 20rpx;
|
|
|
+ font-size: 44rpx !important;
|
|
|
+ color: #1d1d1d !important;
|
|
|
+ /* 输入文字大小 */
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 针对 placeholder 的样式 */
|
|
|
+ .hidden-input::placeholder {
|
|
|
+ font-size: 44rpx !important;
|
|
|
+ color: #1d1d1d !important;
|
|
|
}
|
|
|
|
|
|
- .subavt {
|
|
|
- background-color: #fff;
|
|
|
- border: 2rpx #0a0 solid;
|
|
|
- color: #00aa00;
|
|
|
+ /* 兼容微信小程序的 placeholder 样式 */
|
|
|
+ .hidden-input .placeholder {
|
|
|
+ font-size: 44rpx !important;
|
|
|
+ color: #1d1d1d !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.submitname {
|
|
|
- background-color: #00aa00;
|
|
|
- color: #fff;
|
|
|
- width: 90%;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border: 3rpx solid #00aa00;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ color: #000000;
|
|
|
+ width: 70%;
|
|
|
+ font-size: 36rpx;
|
|
|
margin: 0 auto;
|
|
|
text-align: center;
|
|
|
- padding: 30rpx;
|
|
|
+ padding: 20rpx;
|
|
|
margin-top: 40rpx;
|
|
|
}
|
|
|
}
|