549 lines
12 KiB
Vue
549 lines
12 KiB
Vue
|
<script setup>
|
|||
|
|
/**
|
|||
|
|
* 首页视频组件
|
|||
|
|
* @property {Object} item 视频数据对象
|
|||
|
|
* @property {Number} index 当前视频列表索引
|
|||
|
|
* @property {Number} current 当前预览索引
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
import {
|
|||
|
|
onMounted,
|
|||
|
|
ref,
|
|||
|
|
reactive,
|
|||
|
|
getCurrentInstance,
|
|||
|
|
watch,
|
|||
|
|
defineEmits,
|
|||
|
|
computed,
|
|||
|
|
nextTick
|
|||
|
|
} from 'vue';
|
|||
|
|
const {
|
|||
|
|
proxy
|
|||
|
|
} = getCurrentInstance()
|
|||
|
|
// 顶部状态栏
|
|||
|
|
import statusBar from '@/components/header/statusBar.vue'
|
|||
|
|
// 工具库
|
|||
|
|
import util from '@/common/js/util';
|
|||
|
|
//
|
|||
|
|
import api from '@/api/index.js';
|
|||
|
|
|
|||
|
|
// #ifdef APP-NVUE
|
|||
|
|
const dom = uni.requireNativePlugin('dom')
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
const props = defineProps({
|
|||
|
|
// 当前视频对象
|
|||
|
|
item: {
|
|||
|
|
type: Object,
|
|||
|
|
},
|
|||
|
|
// 列表中的视频下标
|
|||
|
|
index: {
|
|||
|
|
type: Number,
|
|||
|
|
},
|
|||
|
|
// 当前列表的index
|
|||
|
|
current: {
|
|||
|
|
type: Number,
|
|||
|
|
},
|
|||
|
|
// 当前tab的index
|
|||
|
|
tabIndex: {
|
|||
|
|
type: Number,
|
|||
|
|
},
|
|||
|
|
// 模式 list列表 detail详情
|
|||
|
|
mode: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'list'
|
|||
|
|
},
|
|||
|
|
// 是否我自己 0不是 1是
|
|||
|
|
isMine: {
|
|||
|
|
type: [String, Number],
|
|||
|
|
default: 0,
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
//
|
|||
|
|
const emit = defineEmits(['showTime', 'showComment', 'showCollect', 'showShareFirend', 'onPlay', 'onPause', 'like', 'detailMenu', 'onEnd', 'longtap', 'update:item'])
|
|||
|
|
|
|||
|
|
// 视频上下文对象
|
|||
|
|
const videoCtx = ref(null)
|
|||
|
|
// 是否播放
|
|||
|
|
const playState = ref(true)
|
|||
|
|
// 是否显示快速收藏列表
|
|||
|
|
const collectFirst = ref(false)
|
|||
|
|
// 视频时间
|
|||
|
|
const videoTime = reactive({
|
|||
|
|
// 总长
|
|||
|
|
duration: 0,
|
|||
|
|
// 当前时间
|
|||
|
|
currentTime: 0,
|
|||
|
|
})
|
|||
|
|
// 视频当前时间
|
|||
|
|
let videoCurrentTime = ref(0)
|
|||
|
|
// 设置时间
|
|||
|
|
const alarmTime = computed(() => {
|
|||
|
|
let result = uni.$store.state.alarmTime
|
|||
|
|
return result
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 挂载后调用
|
|||
|
|
onMounted(() => {
|
|||
|
|
// 视频上下文对象
|
|||
|
|
videoCtx.value = uni.createVideoContext(`video${props.tabIndex}${props.index}`)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// watch(playState, (nV) => {
|
|||
|
|
// if (nV) play()
|
|||
|
|
// else pause()
|
|||
|
|
// })
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 点击视频
|
|||
|
|
*/
|
|||
|
|
function handleVideo() {
|
|||
|
|
// 根据播放状态切换播放暂停
|
|||
|
|
if (playState.value) pause()
|
|||
|
|
else play()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 视频播放
|
|||
|
|
function play() {
|
|||
|
|
let pages = getCurrentPages();
|
|||
|
|
let page = pages[pages.length - 1];
|
|||
|
|
if (props.index != props.current || !['pages/index/index', 'pages/index/videoDetail'].includes(page.route)) return
|
|||
|
|
videoCtx.value.play()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 视频暂停
|
|||
|
|
function pause() {
|
|||
|
|
videoCtx.value.pause()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 视频播放回调
|
|||
|
|
function onVideoPlay() {
|
|||
|
|
playState.value = true
|
|||
|
|
emit('onPlay')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 视频暂停回调
|
|||
|
|
function onVideoPause() {
|
|||
|
|
playState.value = false
|
|||
|
|
emit('onPause')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 打开评论
|
|||
|
|
function handleComment() {
|
|||
|
|
emit('showComment', props.item)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 打开计时闹钟
|
|||
|
|
function handleTime() {
|
|||
|
|
emit('showTime')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 打开收藏弹窗
|
|||
|
|
function showCollect() {
|
|||
|
|
util.isLogin().then(rs => {
|
|||
|
|
emit('showCollect', props.item)
|
|||
|
|
}).catch(() => {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/login/loginPhone'
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 切换快速收藏
|
|||
|
|
function handleCollectFirst() {
|
|||
|
|
return
|
|||
|
|
collectFirst.value = !collectFirst.value
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 分享到好友
|
|||
|
|
function handleShareFirend() {
|
|||
|
|
util.isLogin().then(rs => {
|
|||
|
|
emit('showShareFirend', props.item)
|
|||
|
|
}).catch(() => {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/login/loginPhone'
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 点赞
|
|||
|
|
* @param {Number} index 操作的视频下标
|
|||
|
|
* @param {Number|String} isLike 点赞操作
|
|||
|
|
*/
|
|||
|
|
function handleLike(index, isLike) {
|
|||
|
|
console.log('index', index)
|
|||
|
|
util.isLogin().then(rs => {
|
|||
|
|
emit('like', {
|
|||
|
|
index,
|
|||
|
|
isLike,
|
|||
|
|
})
|
|||
|
|
}).catch(() => {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/login/loginPhone'
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 私密赞
|
|||
|
|
* @param {Object} index
|
|||
|
|
*/
|
|||
|
|
function handlePrivateLike(index) {
|
|||
|
|
util.isLogin().then(rs => {
|
|||
|
|
util.alert({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '请确认，是否为隐私赞(隐私赞仅自己和作者可见)?',
|
|||
|
|
confirmText: '隐私赞',
|
|||
|
|
cancelText: '公开赞',
|
|||
|
|
}).then(rs => {
|
|||
|
|
if (rs.confirm) emit('like', {
|
|||
|
|
index,
|
|||
|
|
isLike: 3,
|
|||
|
|
})
|
|||
|
|
else emit('like', {
|
|||
|
|
index,
|
|||
|
|
isLike: 0
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}).catch(() => {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/login/loginPhone'
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 详情菜单
|
|||
|
|
* @param {Object} item
|
|||
|
|
*/
|
|||
|
|
function handleDetailMenu(item) {
|
|||
|
|
emit('detailMenu')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 播放变化
|
|||
|
|
function handleTimeupdate(ev) {
|
|||
|
|
Object.assign(videoTime, ev.detail)
|
|||
|
|
|
|||
|
|
// 视频播放时长
|
|||
|
|
if (videoTime.duration != 0) videoCurrentTime.value = videoTime.currentTime / videoTime.duration * 750
|
|||
|
|
// console.log('update:item', {
|
|||
|
|
// ...props.item,
|
|||
|
|
// videoTime: videoTime,
|
|||
|
|
// videoCurrentTime: videoCurrentTime.value,
|
|||
|
|
// })
|
|||
|
|
//
|
|||
|
|
emit('update:item', {
|
|||
|
|
...props.item,
|
|||
|
|
videoTime: videoTime,
|
|||
|
|
videoCurrentTime: videoCurrentTime.value,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 视频播放结束
|
|||
|
|
function handleEnded() {
|
|||
|
|
videoCurrentTime.value = 750
|
|||
|
|
videoCtx.value.stop()
|
|||
|
|
setTimeout(() => {
|
|||
|
|
if (props.index == props.current) play()
|
|||
|
|
else pause()
|
|||
|
|
}, 750)
|
|||
|
|
// console.log('handleEnded', props.index, props.current)
|
|||
|
|
// play()
|
|||
|
|
emit('onEnd')
|
|||
|
|
}
|
|||
|
|
/**
|
|||
|
|
* 查看用户主页
|
|||
|
|
* @param {Object} item
|
|||
|
|
*/
|
|||
|
|
function handleUser(item) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: util.setUrl('/pages/index/videoHome', {
|
|||
|
|
userId: item.userId
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 视频出现缓冲
|
|||
|
|
function handleWaiting(ev) {
|
|||
|
|
if (props.index == props.current) play()
|
|||
|
|
else pause()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 长按
|
|||
|
|
function longtap(ev) {
|
|||
|
|
emit('longtap')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//
|
|||
|
|
defineExpose({
|
|||
|
|
play,
|
|||
|
|
pause,
|
|||
|
|
videoTime,
|
|||
|
|
item: props.item,
|
|||
|
|
playState,
|
|||
|
|
videoCtx: () => videoCtx.value,
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<view class="f1 pr" ref="videoBoxRef">
|
|||
|
|
<!-- 视频层 -->
|
|||
|
|
<view class="videoBox pfull" @longpress="longtap" @touchmove.stop="">
|
|||
|
|
<statusBar />
|
|||
|
|
|
|||
|
|
<video class="video f1" :id="'video' + tabIndex + index" :src="item.format_videoUrl" :show-fullscreen-btn="false" :enable-progress-gesture="false" controls="false" @click="handleVideo" @play="onVideoPlay" @pause="onVideoPause" :show-center-play-btn="false" @timeupdate="handleTimeupdate" @ended="handleEnded" @waiting="handleWaiting" :play-strategy="2" />
|
|||
|
|
|
|||
|
|
<!-- 视频进度条 -->
|
|||
|
|
<!-- <videoProgress v-model:progress="videoCurrentTime" /> -->
|
|||
|
|
|
|||
|
|
<!-- 视频时长 -->
|
|||
|
|
<!-- <view class="duration">
|
|||
|
|
<view class="line" :style="{ width: videoCurrentTime + 'rpx' }"></view>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 暂停蒙版 -->
|
|||
|
|
<view class="pausePanel pfull fmid" v-if="!playState">
|
|||
|
|
<!-- 暂停按钮 -->
|
|||
|
|
<image class="pauseImg" src="@/static/pause.png" mode="aspectFit" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 右侧操作区 -->
|
|||
|
|
<view class="panelRight pa t0 b0 r0">
|
|||
|
|
<statusBar />
|
|||
|
|
<view class="head"></view>
|
|||
|
|
<view class="f1 jcr pl5 pt40 pr20">
|
|||
|
|
|
|||
|
|
<!-- 操作台 -->
|
|||
|
|
<view class="operate f1">
|
|||
|
|
<view class="item">
|
|||
|
|
<view class="col">
|
|||
|
|
<image class="wh60" src="@/static/statistics.jpg" mode="aspectFit" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 用户头像 -->
|
|||
|
|
<navigator :url="util.setUrl('/pages/index/videoHome',{userId:item.userId})" class="item pr mb10">
|
|||
|
|
<view class="col">
|
|||
|
|
<image class="wh80 cir" :src="item.format_header" mode="aspectFill" />
|
|||
|
|
<view class="focus pa" v-if="!item.isAttention">
|
|||
|
|
<image class="wh40" src="@/static/indexAtt.png" mode="aspectFit" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</navigator>
|
|||
|
|
|
|||
|
|
<!-- 点赞 -->
|
|||
|
|
<view class="item">
|
|||
|
|
<view class="col">
|
|||
|
|
<view class="pr">
|
|||
|
|
<image class="wh50" src="/static/indexLike.png" mode="aspectFit" v-if="item.isLike == 0" @click="handleLike(index, 0)" @longpress="handlePrivateLike(index)" />
|
|||
|
|
<image class="wh50" src="/static/indexLike1.png" mode="aspectFit" v-else-if="item.isLike == 1" @click="handleLike(index, 0)" />
|
|||
|
|
<!-- 私密赞的图标 -->
|
|||
|
|
<image class="wh50" src="/static/privateLike.png" mode="aspectFit" v-else-if="item.isLike == 3" @click="handleLike(index, 0)" />
|
|||
|
|
</view>
|
|||
|
|
<view class="txt mt10">
|
|||
|
|
<text class="text">{{ item.likes }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 留言 -->
|
|||
|
|
<view class="item" @click="handleComment">
|
|||
|
|
<view class="col">
|
|||
|
|
<image class="wh50" src="@/static/indexMsg.png" mode="aspectFit" />
|
|||
|
|
<view class="txt mt10">
|
|||
|
|
<text class="text">{{ item.comment }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 收藏 -->
|
|||
|
|
<view class="item df fdr">
|
|||
|
|
<view class="collectListBox" :class="{ 'active': collectFirst }">
|
|||
|
|
<scroll-view scroll-x="true" :show-scrollbar="false" class="scroll df fdr">
|
|||
|
|
<view class="list fdr plr15">
|
|||
|
|
<template v-for="(item, index) in 5" :key="index">
|
|||
|
|
<image class="li wh70 br20" src="/static/openPage.png" mode="aspectFill" />
|
|||
|
|
</template>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="col" @click="showCollect" @longpress="handleCollectFirst">
|
|||
|
|
<image class="wh50" src="@/static/indexCollect1.png" mode="aspectFit" v-if="item.isCollect" />
|
|||
|
|
<image class="wh50" src="@/static/indexCollect.png" mode="aspectFit" v-else />
|
|||
|
|
<view class="txt mt10">
|
|||
|
|
<text class="text">{{ item.collect }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 分享 -->
|
|||
|
|
<view class="item" @click="handleShareFirend">
|
|||
|
|
<view class="col">
|
|||
|
|
<image class="wh50" src="@/static/indexShare.png" mode="aspectFit" />
|
|||
|
|
<view class="txt mt10">
|
|||
|
|
<text class="text">分享</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 闹钟 -->
|
|||
|
|
<view class="item money" @click="handleTime" v-if="mode == 'list'">
|
|||
|
|
<view class="col">
|
|||
|
|
<image class="wh80" src="/static/indexMoney1.png" mode="aspectFit" v-if="alarmTime" />
|
|||
|
|
<image class="wh80" src="/static/indexMoney.png" mode="aspectFit" v-else />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 详情菜单 -->
|
|||
|
|
<view class="item money" @click="handleTime" v-if="mode == 'detail' && isMine == 1">
|
|||
|
|
<view class="col wh90 fmid tac" @click="handleDetailMenu">
|
|||
|
|
<uni-icons type="more-filled" color="#d8d8d8" size="70rpx" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 底部用户信息 -->
|
|||
|
|
<view class="panelBottom pa l0 r0 b0 pl40 pb30">
|
|||
|
|
<!-- 商品信息 -->
|
|||
|
|
<view class="goods df fdr mb20 br10" v-if="0">
|
|||
|
|
<!-- 商品图片 -->
|
|||
|
|
<image class="image wh100 mr15 br10" src="/static/openPage.png" mode="aspectFill" />
|
|||
|
|
|
|||
|
|
<view class="df fdc jcsb f1">
|
|||
|
|
<view class="">
|
|||
|
|
<text class="cfff f28">果农大王霹雳美味榴莲果子</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="info df fdr aic mr10">
|
|||
|
|
<text class="price mr10 cfff f28 b">超低价￥6.66</text>
|
|||
|
|
<text class="cfff f1 f20">已售666＋单</text>
|
|||
|
|
<uni-icons type="close" color="#fff" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 用户 -->
|
|||
|
|
<view class="user" @click="handleUser(item)">
|
|||
|
|
<text class="cfff f36">@{{ item.userName }}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 简介 -->
|
|||
|
|
<view class="desc mt5">
|
|||
|
|
<text class="t2hd cfff f28">{{ item.title }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
// 视频盒子
|
|||
|
|
.videoBox {
|
|||
|
|
background-color: #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 视频时长
|
|||
|
|
.duration {
|
|||
|
|
margin-top: 120rpx;
|
|||
|
|
width: 750rpx;
|
|||
|
|
background-color: rgba(255, 255, 255, .3);
|
|||
|
|
|
|||
|
|
// 时间时长
|
|||
|
|
.line {
|
|||
|
|
width: 0;
|
|||
|
|
height: 2rpx;
|
|||
|
|
background-color: rgba(255, 255, 255, .8);
|
|||
|
|
transition-duration: .25s;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 暂停蒙层
|
|||
|
|
.pausePanel {
|
|||
|
|
background-color: rgba(0, 0, 0, .5);
|
|||
|
|
|
|||
|
|
//
|
|||
|
|
.pauseImg {
|
|||
|
|
width: 140rpx;
|
|||
|
|
height: 140rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 右侧屏幕
|
|||
|
|
.panelRight {
|
|||
|
|
align-items: flex-end;
|
|||
|
|
|
|||
|
|
.text {
|
|||
|
|
text-align: center;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 操作台
|
|||
|
|
.operate {
|
|||
|
|
flex: 1;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
text-align: center;
|
|||
|
|
padding-bottom: 130rpx;
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
margin: 5rpx 0;
|
|||
|
|
padding: 10rpx 5rpx;
|
|||
|
|
|
|||
|
|
&.money {
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//
|
|||
|
|
.col {
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 80rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 关注的小加号
|
|||
|
|
.focus {
|
|||
|
|
align-items: center;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 底部
|
|||
|
|
.panelBottom {
|
|||
|
|
padding-right: 150rpx;
|
|||
|
|
|
|||
|
|
//
|
|||
|
|
.goods {
|
|||
|
|
padding: 10rpx;
|
|||
|
|
width: 480rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
background-color: rgba(0, 0, 0, .3);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 收藏列表盒子
|
|||
|
|
.collectListBox {
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 0;
|
|||
|
|
background-color: rgba(51, 51, 51, .5);
|
|||
|
|
border-radius: 25rpx;
|
|||
|
|
transition-property: width;
|
|||
|
|
transition-duration: .3s;
|
|||
|
|
|
|||
|
|
// 激活的
|
|||
|
|
&.active {
|
|||
|
|
width: 300rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.li+.li {
|
|||
|
|
margin-left: 15rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|