This commit is contained in:
BAKEYi
parent
e94a376395
commit
8d885c3ec5
|
|
@ -1,822 +1,88 @@
|
|||
<template>
|
||||
<view style="z-index: 100;">
|
||||
<!-- 视频滑动主容器 -->
|
||||
<view class="view-box" :style="viewTopLength">
|
||||
<!-- 复用的5个视频容器 - 核心复用节点，不可删减 -->
|
||||
<view class="video-box" :style="itemViewTopLength0">
|
||||
<video :src="videoInfo_0.src" :style="fillScreen" :autoplay="videoInfo_0.autoplay"
|
||||
:loop="videoInfo_0.loop" :controls="videoInfo_0.controls"
|
||||
:enable-play-gesture="videoInfo_0.enablePlayGesture" :objectFit="videoInfo_0.objectFit || objectFit"
|
||||
:show-fullscreen-btn="videoInfo_0.showFullscreenBtn"
|
||||
:enable-progress-gesture="videoInfo_0.enableProgressGesture" @timeupdate="timeupdate(0,$event)"
|
||||
@ended='ended' :show-play-btn="videoInfo_0.showPlayBtn" :show-progress="videoInfo_0.showProgress"
|
||||
initial-time="0" id='video_id_0' @play="playing(0)" :muted="videoInfo_0.isMuted"
|
||||
webkit-playsinline="true" playsinline="true">
|
||||
</video>
|
||||
<cover-view v-if="!videoInfo_0.flag" :style="stopIcon" class="cover-view-stop" />
|
||||
<cover-view v-if="cover && videoInfo_0.coverStatus" :style="fillScreen2" class="video-image">
|
||||
<image :mode="videoInfo_0.mode || mode" :src="videoInfo_0.coverUrl" :style="fillScreen"></image>
|
||||
</cover-view>
|
||||
<view class="video-action" @touchstart.stop='videotouchstart' @touchmove.stop="videotochmove"
|
||||
@touchend.stop='videotouchend' @click.stop="videoClick"></view>
|
||||
<!-- 视频文本区域 - 每个视频都有 -->
|
||||
<view class="video-texts">
|
||||
<view class="flex-row-center" style="flex: 1;">
|
||||
<text class="video-title">{{ videoInfo_0.src }}</text>
|
||||
<text class="video-score">评分 4.8</text>
|
||||
</view>
|
||||
<view class="flex-row-center-between" style="flex: 1;">
|
||||
<text class="video-text">{{videoInfo_0.name}}</text>
|
||||
<!-- 声音图标 - 绑定0号视频的状态，点击切换静音 -->
|
||||
<image class="video-sound"
|
||||
:src="videoInfo_0.isMuted ? '/static/images/icons/sound_no.png' : '/static/images/icons/sound_yes.png'"
|
||||
@click.stop="toggleMute(0)"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="video-box" :style="itemViewTopLength1">
|
||||
<video :src="videoInfo_1.src" :style="fillScreen" :autoplay="videoInfo_1.autoplay"
|
||||
:loop="videoInfo_1.loop" :controls="videoInfo_1.controls"
|
||||
:enable-play-gesture="videoInfo_1.enablePlayGesture" :objectFit="videoInfo_1.objectFit || objectFit"
|
||||
:show-fullscreen-btn="videoInfo_1.showFullscreenBtn"
|
||||
:enable-progress-gesture="videoInfo_1.enableProgressGesture" @timeupdate="timeupdate(1,$event)"
|
||||
@ended='ended' :show-play-btn="videoInfo_1.showPlayBtn" :show-progress="videoInfo_1.showProgress"
|
||||
initial-time="0" id='video_id_1' @play="playing(1)" :muted="videoInfo_1.isMuted"
|
||||
webkit-playsinline="true" playsinline="true">
|
||||
</video>
|
||||
<cover-view v-if="!videoInfo_1.flag" :style="stopIcon" class="cover-view-stop" />
|
||||
<cover-view v-if="cover && videoInfo_1.coverStatus" :style="fillScreen2" class="video-image">
|
||||
<image :mode="videoInfo_1.mode || mode" :src="videoInfo_1.coverUrl" :style="fillScreen"></image>
|
||||
</cover-view>
|
||||
<view class="video-action" @touchstart='videotouchstart' @touchmove="videotochmove"
|
||||
@touchend='videotouchend' @click="videoClick"></view>
|
||||
<!-- 视频文本区域 - 1号视频 -->
|
||||
<view class="video-texts">
|
||||
<view class="flex-row-center" style="flex: 1;">
|
||||
<text class="video-title">珍草品汇理疗馆珍馆服务流程11订单</text>
|
||||
<text class="video-score">评分 4.8</text>
|
||||
</view>
|
||||
<view class="flex-row-center-between" style="flex: 1;">
|
||||
<text class="video-text">{{videoInfo_1.name}}</text>
|
||||
<!-- 声音图标 - 绑定1号视频的状态 -->
|
||||
<image class="video-sound"
|
||||
:src="videoInfo_1.isMuted ? '/static/images/icons/sound_no.png' : '/static/images/icons/sound_yes.png'"
|
||||
@click.stop="toggleMute(1)"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="video-box" :style="itemViewTopLength2">
|
||||
<video :src="videoInfo_2.src" :style="fillScreen" :autoplay="videoInfo_2.autoplay"
|
||||
:loop="videoInfo_2.loop" :controls="videoInfo_2.controls"
|
||||
:enable-play-gesture="videoInfo_2.enablePlayGesture" :objectFit="videoInfo_2.objectFit || objectFit"
|
||||
:show-fullscreen-btn="videoInfo_2.showFullscreenBtn"
|
||||
:enable-progress-gesture="videoInfo_2.enableProgressGesture" @timeupdate="timeupdate(2,$event)"
|
||||
@ended='ended' :show-play-btn="videoInfo_2.showPlayBtn" :show-progress="videoInfo_2.showProgress"
|
||||
initial-time="0" id='video_id_2' @play="playing(2)" :muted="videoInfo_2.isMuted"
|
||||
webkit-playsinline="true" playsinline="true">
|
||||
</video>
|
||||
<cover-view v-if="!videoInfo_2.flag" :style="stopIcon" class="cover-view-stop" />
|
||||
<cover-view v-if="cover && videoInfo_2.coverStatus" :style="fillScreen2" class="video-image">
|
||||
<image :mode="videoInfo_2.mode || mode" :src="videoInfo_2.coverUrl" :style="fillScreen"></image>
|
||||
</cover-view>
|
||||
<view class="video-action" @touchstart='videotouchstart' @touchmove="videotochmove"
|
||||
@touchend='videotouchend' @click="videoClick"></view>
|
||||
<!-- 视频文本区域 - 2号视频 -->
|
||||
<view class="video-texts">
|
||||
<view class="flex-row-center" style="flex: 1;">
|
||||
<text class="video-title">珍草品汇理疗馆珍馆服务流程11订单</text>
|
||||
<text class="video-score">评分 4.8</text>
|
||||
</view>
|
||||
<view class="flex-row-center-between" style="flex: 1;">
|
||||
<text class="video-text">{{videoInfo_2.name}}</text>
|
||||
<!-- 声音图标 - 绑定2号视频的状态 -->
|
||||
<image class="video-sound"
|
||||
:src="videoInfo_2.isMuted ? '/static/images/icons/sound_no.png' : '/static/images/icons/sound_yes.png'"
|
||||
@click.stop="toggleMute(2)"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="video-box" :style="itemViewTopLength3">
|
||||
<video :src="videoInfo_3.src" :style="fillScreen" :autoplay="videoInfo_3.autoplay"
|
||||
:loop="videoInfo_3.loop" :controls="videoInfo_3.controls"
|
||||
:enable-play-gesture="videoInfo_3.enablePlayGesture" :objectFit="videoInfo_3.objectFit || objectFit"
|
||||
:show-fullscreen-btn="videoInfo_3.showFullscreenBtn"
|
||||
:enable-progress-gesture="videoInfo_3.enableProgressGesture" @timeupdate="timeupdate(3,$event)"
|
||||
@ended='ended' :show-play-btn="videoInfo_3.showPlayBtn" :show-progress="videoInfo_3.showProgress"
|
||||
initial-time="0" id='video_id_3' @play="playing(3)" :muted="videoInfo_3.isMuted"
|
||||
webkit-playsinline="true" playsinline="true">
|
||||
</video>
|
||||
<cover-view v-if="!videoInfo_3.flag" :style="stopIcon" class="cover-view-stop" />
|
||||
<cover-view v-if="cover && videoInfo_3.coverStatus" :style="fillScreen2" class="video-image">
|
||||
<image :mode="videoInfo_3.mode || mode" :src="videoInfo_3.coverUrl" :style="fillScreen"></image>
|
||||
</cover-view>
|
||||
<view class="video-action" @touchstart='videotouchstart' @touchmove="videotochmove"
|
||||
@touchend='videotouchend' @click="videoClick"></view>
|
||||
<!-- 视频文本区域 - 3号视频 -->
|
||||
<view class="video-texts">
|
||||
<view class="flex-row-center" style="flex: 1;">
|
||||
<text class="video-title">珍草品汇理疗馆珍馆服务流程11订单</text>
|
||||
<text class="video-score">评分 4.8</text>
|
||||
</view>
|
||||
<view class="flex-row-center-between" style="flex: 1;">
|
||||
<text class="video-text">{{videoInfo_3.name}}</text>
|
||||
<!-- 声音图标 - 绑定3号视频的状态 -->
|
||||
<image class="video-sound"
|
||||
:src="videoInfo_3.isMuted ? '/static/images/icons/sound_no.png' : '/static/images/icons/sound_yes.png'"
|
||||
@click.stop="toggleMute(3)"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="video-box" :style="itemViewTopLength4">
|
||||
<video :src="videoInfo_4.src" :style="fillScreen" :autoplay="videoInfo_4.autoplay"
|
||||
:loop="videoInfo_4.loop" :controls="videoInfo_4.controls"
|
||||
:enable-play-gesture="videoInfo_4.enablePlayGesture" :objectFit="videoInfo_4.objectFit || objectFit"
|
||||
:show-fullscreen-btn="videoInfo_4.showFullscreenBtn"
|
||||
:enable-progress-gesture="videoInfo_4.enableProgressGesture" @timeupdate="timeupdate(4,$event)"
|
||||
@ended='ended' :show-play-btn="videoInfo_4.showPlayBtn" :show-progress="videoInfo_4.showProgress"
|
||||
initial-time="0" id='video_id_4' @play="playing(4)" :muted="videoInfo_4.isMuted"
|
||||
webkit-playsinline="true" playsinline="true">
|
||||
</video>
|
||||
<cover-view v-if="!videoInfo_4.flag" :style="stopIcon" class="cover-view-stop" />
|
||||
<cover-view v-if="cover && videoInfo_4.coverStatus" :style="fillScreen2" class="video-image">
|
||||
<image :mode="videoInfo_4.mode || mode" :src="videoInfo_4.coverUrl" :style="fillScreen"></image>
|
||||
</cover-view>
|
||||
<view class="video-action" @touchstart='videotouchstart' @touchmove="videotochmove"
|
||||
@touchend='videotouchend' @click="videoClick"></view>
|
||||
<!-- 视频文本区域 - 4号视频 -->
|
||||
<view class="video-texts">
|
||||
<view class="flex-row-center" style="flex: 1;">
|
||||
<text class="video-title">珍草品汇理疗馆珍馆服务流程11订单</text>
|
||||
<text class="video-score">评分 4.8</text>
|
||||
</view>
|
||||
<view class="flex-row-center-between" style="flex: 1;">
|
||||
<text class="video-text">{{videoInfo_4.name}}</text>
|
||||
<!-- 声音图标 - 绑定4号视频的状态 -->
|
||||
<image class="video-sound"
|
||||
:src="videoInfo_4.isMuted ? '/static/images/icons/sound_no.png' : '/static/images/icons/sound_yes.png'"
|
||||
@click.stop="toggleMute(4)"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view @touchend='progressTouchend' class="progress-view">
|
||||
<uv-slider v-if="showSlider" v-model="progressValue" activeColor="#D8D8D8" block-size="6"
|
||||
backgroundColor="#494949;" class="progress-slider"></uv-slider>
|
||||
</view>
|
||||
|
||||
<!-- 修改：Dot指示器 - 最多显示5个 -->
|
||||
<view class="dots" :style="{top:`${0.5*winHeight}px`}" v-if="videoListLength > 1">
|
||||
<view class="dots-container">
|
||||
<view class="dot-item" v-for="(dotIndex, idx) in visibleDots" :key="idx"
|
||||
:class="{ active: dotIndex === videoIndex }" @click="jumpToVideo(dotIndex)"></view>
|
||||
</view>
|
||||
<text class="pageNumber">
|
||||
{{ videoIndex+1 }}/{{ videoListLength }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="video-page">
|
||||
<!-- 原生视频组件：全端兼容 -->
|
||||
<video id="fullVideo" class="video-box" :src="videoUrl" controls show-fullscreen-btn enable-progress-gesture
|
||||
:autoplay="false" :loop="false" :muted="false" @play="onPlay" @pause="onPause"
|
||||
@fullscreenchange="handleFullScreenChange" @ended="onVideoEnd"></video>
|
||||
|
||||
<!-- 自定义操作按钮 -->
|
||||
<view class="btn-wrap">
|
||||
<button type="primary" size="default" @click="openFullScreen">
|
||||
手动横屏全屏播放
|
||||
</button>
|
||||
<button type="warn" size="default" @click="closeFullScreen">
|
||||
退出全屏
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let VIDEO_LIST = []
|
||||
let initVideoInfo = {
|
||||
src: "",
|
||||
coverStatus: true,
|
||||
coverUrl: "",
|
||||
flag: false,
|
||||
objectFit: "",
|
||||
mode: "",
|
||||
isMuted: false, // 默认不静音
|
||||
autoplay: false,
|
||||
loop: true,
|
||||
controls: false,
|
||||
enablePlayGesture: true,
|
||||
showFullscreenBtn: false,
|
||||
enableProgressGesture: false,
|
||||
showPlayBtn: false,
|
||||
showProgress: false
|
||||
}
|
||||
export default {
|
||||
props: {
|
||||
popVideoList: {
|
||||
type: Array,
|
||||
default: [] // 默认值设为空数组JSON，避免parse报错
|
||||
},
|
||||
marginTop: {
|
||||
type: String,
|
||||
default: "88" // 默认值设为空数组JSON，避免parse报错
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
playSetTime:null,
|
||||
showSlider: true,
|
||||
progressTime: 0,
|
||||
progressValue: 0,
|
||||
boxHeight: 0,
|
||||
objectFit: "fill",
|
||||
mode: "scaleToFill",
|
||||
winWidth: 1,
|
||||
winHeight: 1,
|
||||
videoIndex: 0,
|
||||
viewTop: 0,
|
||||
viewTopPostion: 0,
|
||||
videoList: [],
|
||||
videoListLength: 0,
|
||||
itemViewTop0: 0,
|
||||
itemViewTop1: 0,
|
||||
itemViewTop2: 0,
|
||||
itemViewTop3: 0,
|
||||
itemViewTop4: 0,
|
||||
videoInfo_0: initVideoInfo,
|
||||
videoInfo_1: initVideoInfo,
|
||||
videoInfo_2: initVideoInfo,
|
||||
videoInfo_3: initVideoInfo,
|
||||
videoInfo_4: initVideoInfo,
|
||||
stopIcon: '',
|
||||
videotouchstartTimestamp: 0,
|
||||
videotouchendTimestamp: 0,
|
||||
moveView: true,
|
||||
cover: true,
|
||||
slidingStatus: false,
|
||||
videoPlayingStatus: false,
|
||||
preloadedIndex: [],
|
||||
startPageY: 0,
|
||||
endPageY: 0,
|
||||
// 新增：控制可视dot的数组
|
||||
visibleDots: [],
|
||||
// 测试视频地址，替换自己的
|
||||
videoUrl: "https://www.w3school.com.cn/i/movie.mp4",
|
||||
videoContext: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// videoList: {
|
||||
// handler(newVal, oldVal) {
|
||||
|
||||
|
||||
// },
|
||||
// immediate: true, // 可选：组件初始化时立即执行一次（即使值未变化）
|
||||
// deep: false // 普通类型无需深度监听，默认false
|
||||
// }
|
||||
},
|
||||
created(options) {
|
||||
//#ifdef APP-PLUS
|
||||
plus.screen.lockOrientation("portrait-primary")
|
||||
//#endif
|
||||
if (this.popVideoList.length) {
|
||||
try {
|
||||
VIDEO_LIST = []
|
||||
this.popVideoList.forEach((item, index) => {
|
||||
let obj = {
|
||||
"src": "",
|
||||
"coverStatus": true,
|
||||
"coverUrl": "",
|
||||
"flag": false,
|
||||
"objectFit": "contain",
|
||||
"mode": "aspectFit",
|
||||
"isMuted": false, // 默认不静音
|
||||
"autoplay": false,
|
||||
"loop": true,
|
||||
"controls": false,
|
||||
"enablePlayGesture": true,
|
||||
"showFullscreenBtn": false,
|
||||
"enableProgressGesture": false,
|
||||
"showPlayBtn": false,
|
||||
"showProgress": false,
|
||||
"name": ""
|
||||
}
|
||||
obj.name = item.name
|
||||
obj.src = item.url
|
||||
obj.coverUrl = item.url +
|
||||
`?x-oss-process=video/snapshot,t_1000,m_fast,f_jpg,w_600,ar_auto`
|
||||
VIDEO_LIST.push(obj)
|
||||
if (index == 0) {
|
||||
initVideoInfo = obj
|
||||
}
|
||||
})
|
||||
} catch (e) {}
|
||||
this.getSystemInfo();
|
||||
this.videoList = VIDEO_LIST;
|
||||
this.videoListLength = this.videoList.length;
|
||||
this.boxHeight = this.videoListLength * this.winHeight;
|
||||
for (let i = 0; i < 5; i++) {
|
||||
if (this.videoList[i]) {
|
||||
this['videoInfo_' + i] = this.videoList[i]
|
||||
}
|
||||
}
|
||||
// 初始化可视dot范围
|
||||
this.updateVisibleDots();
|
||||
// setTimeout(() => {
|
||||
// this.playVideo(0)
|
||||
// }, 500)
|
||||
}
|
||||
},
|
||||
onUnload() {
|
||||
for (let i = 0; i < 5; i++) {
|
||||
this.unloadVideo(i)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getVideoTop() {
|
||||
return uni.upx2px(this.marginTop)
|
||||
},
|
||||
viewTopLength() {
|
||||
return `height:${this.boxHeight}px;top:${this.viewTop}px;`
|
||||
},
|
||||
fillScreen() {
|
||||
let style = `height:${this.winHeight}px;width:${this.winWidth}px;`
|
||||
return style
|
||||
},
|
||||
fillScreen2() {
|
||||
let style = `height:auto;width:${this.winWidth}px;`
|
||||
return style
|
||||
},
|
||||
itemViewTopLength0() {
|
||||
return `height:${this.winHeight}px;top:${this.itemViewTop0}px;`
|
||||
},
|
||||
itemViewTopLength1() {
|
||||
return `height:${this.winHeight}px;top:${this.itemViewTop1}px;`
|
||||
},
|
||||
itemViewTopLength2() {
|
||||
return `height:${this.winHeight}px;top:${this.itemViewTop2}px;`
|
||||
},
|
||||
itemViewTopLength3() {
|
||||
return `height:${this.winHeight}px;top:${this.itemViewTop3}px;`
|
||||
},
|
||||
itemViewTopLength4() {
|
||||
return `height:${this.winHeight}px;top:${this.itemViewTop4}px;`
|
||||
}
|
||||
onReady() {
|
||||
// 初始化视频实例
|
||||
this.videoContext = uni.createVideoContext("fullVideo", this);
|
||||
},
|
||||
methods: {
|
||||
// 新增：切换视频静音状态
|
||||
toggleMute(videoNum) {
|
||||
// 1. 切换数据层状态
|
||||
this['videoInfo_' + videoNum].isMuted = !this['videoInfo_' + videoNum].isMuted;
|
||||
// 2. 同步视频实例静音状态（恢复并完善原有注释代码，加容错）
|
||||
const videoCtx = uni.createVideoContext("video_id_" + videoNum, this);
|
||||
if (videoCtx) {
|
||||
videoCtx.mute(this['videoInfo_' + videoNum].isMuted);
|
||||
}
|
||||
// 进入横屏全屏
|
||||
openFullScreen() {
|
||||
// direction 90：横屏；-90反向横屏；0自适应
|
||||
this.videoContext.requestFullScreen({
|
||||
direction: 90
|
||||
});
|
||||
},
|
||||
// 修改：点击dot跳转 - 传真实的视频索引
|
||||
jumpToVideo(targetIndex) {
|
||||
if (targetIndex === this.videoIndex || this.slidingStatus) return;
|
||||
this.stopVideo(this.videoIndex % 5, true);
|
||||
const diff = targetIndex - this.videoIndex;
|
||||
this.videoIndex = targetIndex;
|
||||
this.viewTopPostion = -this.videoIndex * this.winHeight;
|
||||
this.viewTop = this.viewTopPostion;
|
||||
if (this.videoListLength > 5) {
|
||||
this.sortItemView(diff > 0 ? -1 : 1);
|
||||
}
|
||||
// 更新可视dot范围
|
||||
this.updateVisibleDots();
|
||||
setTimeout(() => {
|
||||
this.playVideo(this.videoIndex % 5);
|
||||
}, 400);
|
||||
// 退出全屏
|
||||
closeFullScreen() {
|
||||
this.videoContext.exitFullScreen();
|
||||
},
|
||||
// 核心：更新可视dot范围 - 最多显示5个
|
||||
updateVisibleDots() {
|
||||
const maxShow = 5;
|
||||
const total = this.videoListLength;
|
||||
// 视频总数 ≤ 5，显示全部
|
||||
if (total <= maxShow) {
|
||||
this.visibleDots = Array.from({
|
||||
length: total
|
||||
}, (_, i) => i);
|
||||
return;
|
||||
}
|
||||
// 视频总数 > 5，显示包含当前索引的5个dot
|
||||
// 计算起始索引，避免越界
|
||||
let start = Math.max(0, Math.min(this.videoIndex - 2, total - maxShow));
|
||||
// 生成5个连续的索引
|
||||
this.visibleDots = Array.from({
|
||||
length: maxShow
|
||||
}, (_, i) => start + i);
|
||||
// 播放监听
|
||||
onPlay() {
|
||||
console.log("视频开始播放");
|
||||
},
|
||||
progressTouchend() {
|
||||
let s = Math.round(this.progressValue / 100 * this.time)
|
||||
let i = this.videoIndex % 5
|
||||
uni.createVideoContext("video_id_" + i, this).seek(s)
|
||||
uni.createVideoContext("video_id_" + i, this).play()
|
||||
// 暂停监听
|
||||
onPause() {
|
||||
console.log("视频暂停");
|
||||
},
|
||||
sliderchanging(e) {
|
||||
console.log(3333, e)
|
||||
},
|
||||
getSystemInfo() {
|
||||
var _this = this;
|
||||
uni.getSystemInfo({
|
||||
success: function(res) {
|
||||
_this.winWidth = res.windowWidth;
|
||||
_this.winHeight = res.windowHeight;
|
||||
let p = uni.upx2px(150)
|
||||
_this.stopIcon = `left:${(res.windowWidth - p)/2}px;top:${(res.windowHeight - p)/2}px;`
|
||||
_this.itemViewTop1 = res.windowHeight
|
||||
_this.itemViewTop2 = res.windowHeight * 2
|
||||
_this.itemViewTop3 = res.windowHeight * 3
|
||||
_this.itemViewTop4 = res.windowHeight * 4
|
||||
},
|
||||
})
|
||||
},
|
||||
unloadVideo(index) {
|
||||
if (index < 0 || index >= this.videoListLength) return;
|
||||
const nodeNum = index % 5;
|
||||
const videoCtx = uni.createVideoContext("video_id_" + nodeNum, this);
|
||||
videoCtx.stop();
|
||||
this.preloadedIndex = this.preloadedIndex.filter(item => item !== index);
|
||||
},
|
||||
playVideo(num) {
|
||||
clearTimeout(this.playSetTime)
|
||||
uni.$uv.debounce(() => {
|
||||
this.videoPlayingStatus = true
|
||||
this["videoInfo_" + num].flag = true
|
||||
let VideoContext = uni.createVideoContext("video_id_" + num, this)
|
||||
this.playSetTime = setTimeout(() => {
|
||||
VideoContext.play()
|
||||
}, 400)
|
||||
}, 30)
|
||||
},
|
||||
stopVideo(num, control = false) {
|
||||
const videoCtx = uni.createVideoContext("video_id_" + num, this);
|
||||
if (!control) {
|
||||
this['videoInfo_' + num].coverStatus = true;
|
||||
videoCtx.stop()
|
||||
// 全屏状态切换监听
|
||||
handleFullScreenChange(e) {
|
||||
if (e.detail.fullScreen) {
|
||||
uni.setNavigationBarHidden(true); // 全屏隐藏顶部导航
|
||||
} else {
|
||||
videoCtx.pause()
|
||||
uni.setNavigationBarHidden(false); // 退出恢复导航
|
||||
}
|
||||
this["videoInfo_" + num].flag = false
|
||||
console.log("当前全屏状态：", e.detail.fullScreen);
|
||||
},
|
||||
nowPlayVideo() {
|
||||
clearTimeout(this.playSetTime)
|
||||
uni.$uv.debounce(() => {
|
||||
this.videoPlayingStatus = true
|
||||
this["videoInfo_" + this.videoIndex].flag = true
|
||||
let VideoContext = uni.createVideoContext("video_id_" + this.videoIndex, this)
|
||||
this.playSetTime = setTimeout(() => {
|
||||
VideoContext.play()
|
||||
}, 400)
|
||||
}, 30)
|
||||
},
|
||||
nowStopVideo() {
|
||||
const videoCtx = uni.createVideoContext("video_id_" + this.videoIndex, this);
|
||||
videoCtx.pause()
|
||||
this["videoInfo_" + this.videoIndex].flag = false
|
||||
},
|
||||
videoClick() {
|
||||
let num = this.videoIndex % 5
|
||||
if (this["videoInfo_" + num].flag) {
|
||||
this.stopVideo(num, true)
|
||||
} else {
|
||||
this.playVideo(num, true)
|
||||
}
|
||||
},
|
||||
videotouchstart(e) {
|
||||
this.videotouchendTimestamp = this.videotouchstartTimestamp
|
||||
this.videotouchstartTimestamp = e.timestamp
|
||||
if ((this.videotouchstartTimestamp - this.videotouchendTimestamp) < 500) return
|
||||
if (this.slidingStatus) return
|
||||
this.startPageY = e.changedTouches[0].screenY;
|
||||
},
|
||||
videotochmove(e) {
|
||||
if ((this.videotouchstartTimestamp - this.videotouchendTimestamp) < 500) return
|
||||
if (this.slidingStatus) return
|
||||
this.endPageY = e.changedTouches[0].screenY;
|
||||
let sliding = this.endPageY - this.startPageY
|
||||
if (sliding > 20 || sliding < -20) {
|
||||
this.moveView = false
|
||||
} else {
|
||||
this.moveView = true
|
||||
}
|
||||
if (this.videoIndex == 0 && sliding > 50) {
|
||||
this.viewTop = 50
|
||||
} else if (this.videoIndex == this.videoListLength - 1 && sliding < 0) {
|
||||
this.viewTop = this.viewTopPostion
|
||||
} else {
|
||||
this.viewTop = this.viewTopPostion + sliding
|
||||
}
|
||||
},
|
||||
videotouchend(e) {
|
||||
if ((this.videotouchstartTimestamp - this.videotouchendTimestamp) < 500) return
|
||||
if (this.slidingStatus) return
|
||||
this.moveView = true
|
||||
this.endPageY = e.changedTouches[0].screenY;
|
||||
let sliding = this.endPageY - this.startPageY
|
||||
if ((sliding >= -40 && sliding < 0) || (sliding <= 40 && sliding > 0)) {
|
||||
this.slidingStatus = true
|
||||
this.videoSlidingReset(sliding)
|
||||
return
|
||||
}
|
||||
if (sliding < -30) {
|
||||
this.slidingStatus = true
|
||||
if (this.videoIndex == this.videoListLength - 1) {
|
||||
this.videoSlidingReset(sliding)
|
||||
uni.showToast({
|
||||
title: "已经到底了",
|
||||
icon: "none"
|
||||
})
|
||||
return
|
||||
}
|
||||
this.moveView = false
|
||||
this.videoSlidingToTop(sliding)
|
||||
return
|
||||
}
|
||||
if (sliding > 30) {
|
||||
this.slidingStatus = true
|
||||
if (this.videoIndex == 0) {
|
||||
this.videoSlidingReset(sliding)
|
||||
return
|
||||
}
|
||||
this.moveView = false
|
||||
this.videoSlidingToBottom(sliding)
|
||||
}
|
||||
},
|
||||
videoSlidingReset(sliding) {
|
||||
this.viewTop = this.viewTopPostion
|
||||
this.slidingStatus = false
|
||||
},
|
||||
videoSlidingToTop(sliding) {
|
||||
this.stopVideo(this.videoIndex % 5, true)
|
||||
this.videoIndex++
|
||||
if (this.videoListLength > 5) {
|
||||
this.sortItemView(sliding)
|
||||
}
|
||||
this.viewTopPostion = this.viewTopPostion - this.winHeight
|
||||
setTimeout(() => {
|
||||
this.playVideo(this.videoIndex % 5)
|
||||
}, 5)
|
||||
let timer = setInterval(() => {
|
||||
this.viewTop = this.viewTop - 35
|
||||
if (this.viewTop < (this.viewTopPostion + 10)) {
|
||||
this.viewTop = this.viewTopPostion
|
||||
clearInterval(timer)
|
||||
this.slidingStatus = false
|
||||
this.slidingCallback()
|
||||
}
|
||||
}, 3)
|
||||
},
|
||||
videoSlidingToBottom(sliding) {
|
||||
this.stopVideo(this.videoIndex % 5, true)
|
||||
this.videoIndex--
|
||||
if (this.videoListLength > 5) {
|
||||
this.sortItemView(sliding)
|
||||
}
|
||||
this.viewTopPostion = this.viewTopPostion + this.winHeight
|
||||
setTimeout(() => {
|
||||
this.playVideo(this.videoIndex % 5)
|
||||
}, 5)
|
||||
let timer = setInterval(() => {
|
||||
this.viewTop = this.viewTop + 35
|
||||
if (this.viewTop > (this.viewTopPostion - 10)) {
|
||||
this.viewTop = this.viewTopPostion
|
||||
clearInterval(timer)
|
||||
this.slidingStatus = false
|
||||
this.slidingCallback()
|
||||
}
|
||||
}, 3)
|
||||
},
|
||||
// 修改：滑动结束后更新可视dot
|
||||
slidingCallback() {
|
||||
this.progressValue = 0
|
||||
this.updateVisibleDots();
|
||||
},
|
||||
//滑动组件排序
|
||||
sortItemView(silding) {
|
||||
// 向上滑动
|
||||
if (silding < 0) {
|
||||
if (this.videoIndex > 2 && this.videoIndex < this.videoListLength - 2) {
|
||||
let i = (this.videoIndex - 3) % 5
|
||||
this["itemViewTop" + i] = this["itemViewTop" + i] + this.winHeight * 5
|
||||
this['videoInfo_' + i] = this.videoList[this.videoIndex + 2]
|
||||
}
|
||||
return
|
||||
}
|
||||
// 向下滑动
|
||||
if (silding > 0) {
|
||||
if (this.videoIndex > 1 && this.videoIndex < this.videoListLength - 3) {
|
||||
let i = (this.videoIndex + 3) % 5
|
||||
this["itemViewTop" + i] = this["itemViewTop" + i] - this.winHeight * 5
|
||||
this['videoInfo_' + i] = this.videoList[this.videoIndex - 2]
|
||||
}
|
||||
}
|
||||
},
|
||||
playing(i) {
|
||||
setTimeout(() => {
|
||||
this['videoInfo_' + i].coverStatus = false
|
||||
this.moveView = true
|
||||
this.slidingStatus = false
|
||||
}, 600)
|
||||
},
|
||||
timeupdate(i, e) {
|
||||
if (this.videoPlayingStatus) {
|
||||
this.slidingStatus = false
|
||||
this.videoPlayingStatus = false
|
||||
setTimeout(() => {
|
||||
this['videoInfo_' + i].coverStatus = false
|
||||
this.moveView = true
|
||||
}, 200)
|
||||
}
|
||||
this["videoInfo_" + i].flag = true
|
||||
if (e.detail.duration >= this.progressTime) {
|
||||
if (this.videoIndex%5 == i) {
|
||||
this.time = e.detail.duration
|
||||
this.progress = e.detail.currentTime
|
||||
this.progressValue = (e.detail.currentTime / e.detail.duration) * 100
|
||||
}
|
||||
|
||||
this.showProgress = true
|
||||
} else {
|
||||
this.showProgress = false
|
||||
}
|
||||
},
|
||||
ended() {
|
||||
let num = this.videoIndex % 5
|
||||
this["videoInfo_" + num].flag = false
|
||||
this.progressValue = 0
|
||||
// 视频播放结束
|
||||
onVideoEnd() {
|
||||
// 播放完毕自动退出全屏
|
||||
this.videoContext.exitFullScreen();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.view-box {
|
||||
// position: fixed;
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
background-color: #000;
|
||||
// z-index: 900;
|
||||
<style scoped>
|
||||
.video-page {
|
||||
padding: 15rpx;
|
||||
}
|
||||
|
||||
.video-box {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2000;
|
||||
width: 100%;
|
||||
height: 420rpx;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.video-image {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 2001;
|
||||
}
|
||||
|
||||
.video-action {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 2008;
|
||||
}
|
||||
|
||||
.video-texts {
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
right: 30rpx;
|
||||
bottom: 120rpx;
|
||||
z-index: 2009; // 确保在视频上方显示
|
||||
|
||||
.video-title {
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
lines: 1;
|
||||
max-width: 240rpx;
|
||||
}
|
||||
|
||||
.video-score {
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.video-text {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.video-sound {
|
||||
width: 44rpx;
|
||||
height: 42rpx;
|
||||
cursor: pointer; // 点击指针，提示可点击
|
||||
}
|
||||
}
|
||||
|
||||
.cover-view-stop {
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
width: 150rpx;
|
||||
height: 200rpx;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.progress-view {
|
||||
z-index: 9999;
|
||||
position: fixed;
|
||||
left: 30rpx;
|
||||
right: 30rpx;
|
||||
bottom: 80rpx;
|
||||
|
||||
.progress-slider {}
|
||||
}
|
||||
|
||||
// 修改：Dot指示器样式 - 最多显示5个 + 过渡动画
|
||||
.dots {
|
||||
position: fixed;
|
||||
left: 20rpx;
|
||||
top: 0;
|
||||
transform: translateY(-50%);
|
||||
z-index: 9999;
|
||||
flex-direction: row;
|
||||
|
||||
.dots-container {
|
||||
// 限制最多显示5个，超出隐藏
|
||||
width: fit-content;
|
||||
overflow: hidden;
|
||||
margin: auto 0;
|
||||
|
||||
.dot-item {
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 50%;
|
||||
// 核心：过渡动画，切换更丝滑
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
&.active {
|
||||
width: 10rpx;
|
||||
height: 30rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 5rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pageNumber {
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 36rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-row-center-between {
|
||||
.btn-wrap {
|
||||
margin-top: 30rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex-row-start-between {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex-row-center-center {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex-row-center {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-row-start {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.flex-row-end-between {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 20rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<template>
|
||||
<view class="video-page">
|
||||
<!-- 原生视频组件：全端兼容 -->
|
||||
<video id="fullVideo" class="video-box" :src="videoUrl" controls show-fullscreen-btn enable-progress-gesture
|
||||
:autoplay="true" :loop="false" :muted="false" @play="onPlay" @pause="onPause" object-fit="cover" :direction="90"
|
||||
@fullscreenchange="handleFullScreenChange" @ended="onVideoEnd" @fullscreenclick="tapback"></video>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
videoUrl: "",
|
||||
videoContext: null
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
console.log(options, '页面参数');
|
||||
// 接收视频地址
|
||||
if (options.url) {
|
||||
this.videoUrl = options.url;
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
// #ifdef APP-PLUS
|
||||
//plus.screen.unlockOrientation(); //解除屏幕方向的锁定，但是不一定是竖屏；
|
||||
|
||||
// #endif
|
||||
// 初始化视频实例（唯一正确位置）
|
||||
this.videoContext = uni.createVideoContext("fullVideo", this);
|
||||
// 页面渲染完成后 安全触发自动全屏
|
||||
//this.autoFullScreen();
|
||||
},
|
||||
methods: {
|
||||
tapback(e) {
|
||||
console.log('点击全屏按钮');
|
||||
// if (e.target.fullScreen) {
|
||||
// plus.screen.lockOrientation('landscape'); //锁死屏幕方向为竖屏
|
||||
// }else{
|
||||
// plus.screen.lockOrientation('portrait'); //锁死屏幕方向为竖屏
|
||||
// }
|
||||
},
|
||||
// 自动全屏（核心：修复iOS方向错乱）
|
||||
autoFullScreen() {
|
||||
if (!this.videoContext) return;
|
||||
|
||||
// 区分平台设置方向：iOS用0自适应，安卓用90横屏
|
||||
const direction = uni.getSystemInfoSync().platform === 'ios' ? 0 : 90;
|
||||
|
||||
// 延迟执行，避免视频未加载完成导致全屏失败
|
||||
setTimeout(() => {
|
||||
this.videoContext.requestFullScreen({
|
||||
direction: direction
|
||||
});
|
||||
}, 300)
|
||||
},
|
||||
// 手动横屏全屏
|
||||
openFullScreen() {
|
||||
if (!this.videoContext) return;
|
||||
const direction = uni.getSystemInfoSync().platform === 'ios' ? 0 : 90;
|
||||
this.videoContext.requestFullScreen({
|
||||
direction
|
||||
});
|
||||
},
|
||||
// 退出全屏
|
||||
closeFullScreen() {
|
||||
if (!this.videoContext) return;
|
||||
this.videoContext.exitFullScreen();
|
||||
},
|
||||
// 播放监听
|
||||
onPlay() {
|
||||
console.log("视频开始播放");
|
||||
},
|
||||
// 暂停监听
|
||||
onPause() {
|
||||
console.log("视频暂停");
|
||||
},
|
||||
// 全屏状态切换
|
||||
handleFullScreenChange(e) {
|
||||
// 全屏隐藏导航栏，退出显示
|
||||
// uni.setNavigationBarHidden(!!e.detail.fullScreen);
|
||||
console.log("全屏状态：", e.detail.fullScreen);
|
||||
},
|
||||
// 视频播放完毕
|
||||
onVideoEnd() {
|
||||
this.closeFullScreen();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.video-page {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.video-box {
|
||||
width: 100%;
|
||||
/* 自适应高度，避免拉伸 */
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,52 +1,59 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<view class="positonFixed">
|
||||
<view class="header-top flex-row-center" :class="{videoTop:current==0}"
|
||||
:style="{ height: `${88+statusBarHeight}rpx`,paddingTop: `${statusBarHeight}rpx`}">
|
||||
<view class="header-top flex-row-center" :style="{ height: `${100}rpx`,paddingTop:`${statusBarHeight}rpx`}">
|
||||
<view class="left-area" @click="goBack">
|
||||
<image src="/static/images/whiteBack.png" mode="aspectFit" class="back-icon"></image>
|
||||
<image src="/static/images/back.png" mode="aspectFit" class="back-icon"></image>
|
||||
</view>
|
||||
<view class="flex-row-center-center" style="flex: 1;margin-right: 18rpx;height:66rpx;">
|
||||
<uv-tabs :list="list" @click="tabsClick" itemStyle="height:66rpx;" :activeStyle="activeStyle"
|
||||
:inactiveStyle="inactiveStyle" :current="current" :lineColor="`rgba(232, 16, 30, 1)`"></uv-tabs>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<scroll-view scroll-x style="height: 100rpx;" v-if="current==1">
|
||||
<scroll-view scroll-x style="height: 100rpx;background-color: #fff;" v-if="current==1">
|
||||
<view class="container-tabs flex-row-center">
|
||||
<view class="container-tab flex-row-center-center" @click="clickTab(item)"
|
||||
:class="{active:cardListIndex==item.id}" v-for="(item,index) in cardList[1]" :key="index">
|
||||
:class="{active:cardListIndex==item.id}" v-for="(item,index) in cardList[user_type]"
|
||||
:key="index">
|
||||
<text class="container-tab-text">{{ item.title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
|
||||
<view :style="swiperStyle3"></view>
|
||||
<view class="container-content" :style="swiperStyle2">
|
||||
<swiper class="swiper" circular :style="swiperStyle" :current="current" @change="swiperChange" :disable-touch="current==0">
|
||||
<swiper class="swiper" circular :style="swiperStyle" :current="current" @change="swiperChange"
|
||||
:disable-touch="current==0">
|
||||
<swiper-item>
|
||||
<videoSlide ref="ideoSlideRrf" :popVideoList="videoList" :marginTop="`${88 + this.statusBarHeight}`" v-show="current==0" v-if="videoList.length"></videoSlide>
|
||||
<scroll-view scroll-y :style="{height:`${viewportHeight-100-this.statusBarHeight}rpx`}">
|
||||
<view class="swiper-items3">
|
||||
<view class="swiper-item3" :class="{item2Left:index%2 == 0}"
|
||||
v-for="(item,index) in videoList" :key="index" @click="tovideo(item)">
|
||||
<image class="swiper-item3-video" mode="aspectFill" :src="item.img"></image>
|
||||
<image
|
||||
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/c6c039fc-99fd-492e-ae9a-ed43260c94ef.png"
|
||||
mode="widthFix"
|
||||
style="width: 80rpx;position: absolute;top: 50%;left: 50%;transform: translate3d(-50%, -50%, 0);">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<scroll-view scroll-y :style="{height:`${viewportHeight-88-this.statusBarHeight-100}rpx`}">
|
||||
<scroll-view scroll-y :style="{height:`${viewportHeight-100-this.statusBarHeight-100}rpx`}">
|
||||
<view class="swiper-items2">
|
||||
<view class="swiper-item2" :class="{item2Left:index%2 == 0}"
|
||||
v-for="(item,index) in imagObj[cardListIndex]" :key="index">
|
||||
v-for="(item,index) in imagObj[cardListIndex]" :key="index" @click="toimg(item)">
|
||||
<image class="swiper-item2-img" mode="aspectFill" :src="item.url"></image>
|
||||
<view class="swiper-item2-title">
|
||||
<text class="swiper-item2-title-text">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -68,6 +75,23 @@
|
|||
title: "主图",
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
title: "作品",
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
title: "其他",
|
||||
id: 4
|
||||
}
|
||||
],
|
||||
2: [{
|
||||
title: "全部",
|
||||
id: 0
|
||||
},
|
||||
{
|
||||
title: "主图",
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
title: "环境",
|
||||
id: 2
|
||||
|
|
@ -94,7 +118,7 @@
|
|||
inactiveStyle: {
|
||||
fontWeight: 500,
|
||||
fontSize: "32rpx",
|
||||
color: "#666666",
|
||||
color: "#333333",
|
||||
},
|
||||
current: 1,
|
||||
statusBarHeight: 0,
|
||||
|
|
@ -108,6 +132,7 @@
|
|||
};
|
||||
},
|
||||
async onLoad(options) {
|
||||
|
||||
// 获取状态栏高度
|
||||
const systemInfo = await uni.getSystemInfoSync()
|
||||
this.systemInfo = systemInfo
|
||||
|
|
@ -120,6 +145,12 @@
|
|||
this.getVideoList()
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
// // #ifdef APP-PLUS
|
||||
// plus.screen.unlockOrientation(); //解除屏幕方向的锁定，但是不一定是竖屏；
|
||||
// plus.screen.lockOrientation('portrait'); //锁死屏幕方向为竖屏
|
||||
// // #endif
|
||||
},
|
||||
computed: {
|
||||
// 计算swiper的样式
|
||||
swiperStyle() {
|
||||
|
|
@ -128,8 +159,8 @@
|
|||
// 注意：100vh 是视口高度，需要先转数值计算，再拼接单位
|
||||
|
||||
let viewportHeight = this.pxToRpx(this.systemInfo.windowHeight || window?.innerHeight || document
|
||||
?.documentElement?.clientHeight|| 0, screenWidth ) ;
|
||||
let height = viewportHeight - 88 - this.statusBarHeight;
|
||||
?.documentElement?.clientHeight || 0, screenWidth);
|
||||
let height = viewportHeight - 100 - this.statusBarHeight;
|
||||
return {
|
||||
height: `${height}rpx`
|
||||
};
|
||||
|
|
@ -141,55 +172,69 @@
|
|||
swiperStyle2() {
|
||||
if (this.current == 1) {
|
||||
return {
|
||||
marginTop: `${88 + this.statusBarHeight + 100}rpx`,
|
||||
height: `${this.viewportHeight-88-this.statusBarHeight-100}rpx`
|
||||
height: `${this.viewportHeight-100-this.statusBarHeight-100}rpx`
|
||||
};
|
||||
}
|
||||
return {
|
||||
height: `${this.viewportHeight}rpx`
|
||||
};
|
||||
},
|
||||
swiperStyle3() {
|
||||
if (this.current == 1) {
|
||||
return {
|
||||
width: `750rpx`,
|
||||
height: `${200 + this.statusBarHeight}rpx`,
|
||||
};
|
||||
}
|
||||
return {
|
||||
width: `750rpx`,
|
||||
height: `${100 + this.statusBarHeight}rpx`,
|
||||
};
|
||||
},
|
||||
viewportHeight() {
|
||||
let screenWidth = this.systemInfo.screenWidth;
|
||||
// 注意：100vh 是视口高度，需要先转数值计算，再拼接单位
|
||||
let viewportHeight = this.pxToRpx(this.systemInfo.windowHeight || window?.innerHeight || document
|
||||
?.documentElement?.clientHeight|| 0, screenWidth) ;
|
||||
?.documentElement?.clientHeight || 0, screenWidth);
|
||||
return viewportHeight
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
uni.navigateBack(-1)
|
||||
},
|
||||
toimg(item) {
|
||||
console.log(item, 'item');
|
||||
uni.previewImage({
|
||||
urls: [item.url], // 外面加 [] 变成数组
|
||||
current: 0 // 可选，默认第一张
|
||||
})
|
||||
},
|
||||
tovideo(item) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/album/components/videoplayer?url=' + item.url
|
||||
})
|
||||
},
|
||||
clickTab(item) {
|
||||
this.cardListIndex = item.id
|
||||
},
|
||||
tabsClick(e) {
|
||||
this.$nextTick(() => {
|
||||
|
||||
this.current = e.index
|
||||
if(this.current==1){
|
||||
this.activeStyle.color = "#333333"
|
||||
this.inactiveStyle.color = "#666666"
|
||||
this.$refs.ideoSlideRrf.nowStopVideo()
|
||||
}
|
||||
if(this.current==0){
|
||||
this.activeStyle.color = "#fff"
|
||||
this.inactiveStyle.color = "#ccc"
|
||||
this.$refs.ideoSlideRrf.nowPlayVideo()
|
||||
}
|
||||
})
|
||||
console.log('12312312312');
|
||||
|
||||
this.current = e.index
|
||||
this.activeStyle.color = "#333333"
|
||||
this.inactiveStyle.color = "#666666"
|
||||
},
|
||||
swiperChange(e) {
|
||||
this.$nextTick(() => {
|
||||
this.current = e.detail.current
|
||||
if(this.current==1){
|
||||
if (this.current == 1) {
|
||||
this.activeStyle.color = "#333333"
|
||||
this.inactiveStyle.color = "#666666"
|
||||
this.$refs.ideoSlideRrf.nowStopVideo()
|
||||
}
|
||||
if(this.current==0){
|
||||
this.activeStyle.color = "#fff"
|
||||
this.inactiveStyle.color = "#ccc"
|
||||
this.$refs.ideoSlideRrf.nowPlayVideo()
|
||||
if (this.current == 0) {
|
||||
this.activeStyle.color = "#333333"
|
||||
this.inactiveStyle.color = "#666666"
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -208,12 +253,17 @@
|
|||
type: 1
|
||||
}).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.imagObj = res.data.list[1]
|
||||
let all = []
|
||||
for (let key in res.data.list[1]) {
|
||||
all = [...all, ...res.data.list[1][key]]
|
||||
if (res.data.list.length != 0) {
|
||||
this.imagObj = res.data.list[1]
|
||||
let all = []
|
||||
for (let key in res.data.list[1]) {
|
||||
all = [...all, ...res.data.list[1][key]]
|
||||
}
|
||||
this.imagObj[0] = all
|
||||
} else {
|
||||
this.imagObj[0] = []
|
||||
}
|
||||
this.imagObj[0] = all
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -224,8 +274,17 @@
|
|||
type: 2
|
||||
}).then(res => {
|
||||
if (res.code == 200) {
|
||||
for (let key in res.data.list[2]) {
|
||||
this.videoList = [...this.videoList, ...res.data.list[2][key]]
|
||||
if (res.data.list.length != 0) {
|
||||
console.log(res.data, 'res.data');
|
||||
for (let key in res.data.list[2]) {
|
||||
this.videoList = [...this.videoList, ...res.data.list[2][key]]
|
||||
this.videoList.forEach((item) => {
|
||||
item.img = item.url +
|
||||
'?x-oss-process=video/snapshot,t_1000,m_fast,f_jpg,w_600,ar_auto'
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.videoList = []
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -266,10 +325,12 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.videoTop{
|
||||
|
||||
.videoTop {
|
||||
background: transparent;
|
||||
::v-deep .uv-tabs__wrapper__nav__line{
|
||||
background: #fff!important;
|
||||
|
||||
::v-deep .uv-tabs__wrapper__nav__line {
|
||||
background: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -306,6 +367,7 @@
|
|||
|
||||
.container-content {
|
||||
z-index: 1000;
|
||||
|
||||
.swiper {
|
||||
background: #fff;
|
||||
|
||||
|
|
@ -349,6 +411,47 @@
|
|||
}
|
||||
}
|
||||
|
||||
.swiper-items3 {
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
.swiper-item3 {
|
||||
width: 370rpx;
|
||||
height: 370rpx;
|
||||
margin-top: 10rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.swiper-item3-video {
|
||||
width: 370rpx;
|
||||
height: 370rpx;
|
||||
}
|
||||
|
||||
.swiper-item3-title {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 33rpx;
|
||||
padding: 0 8rpx;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 0rpx 0rpx 10rpx 0rpx;
|
||||
width: fit-content;
|
||||
|
||||
.swiper-item3-title-text {
|
||||
font-weight: 400;
|
||||
font-size: 18rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 33rpx;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item2Left {
|
||||
margin-right: 9rpx;
|
||||
}
|
||||
|
|
@ -398,6 +501,4 @@
|
|||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue