660 lines
16 KiB
Vue
660 lines
16 KiB
Vue
<template>
|
|
<view class="video-contain">
|
|
<!-- 自定义头部 -->
|
|
<view class="nav-myself" :style="{'height': navigationBarHeight + 'px'}">
|
|
<view class="status-title" :style="{'height': statusBarHeight + 'px'}"></view>
|
|
<view class="title-content">
|
|
<view class="icon" @click="toPage('/pages/index/index', 0)" v-if="pagesLength === 1"><up-icon name="home" size="22" color="#333" /></view>
|
|
|
|
<view class="icon" @click="toPage('', -1)" v-if="pagesLength > 1"><up-icon name="arrow-left" size="22" color="#333" /></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="isLoading" class="loadbox">
|
|
<up-loading-icon text="加载中..." textSize="14"></up-loading-icon>
|
|
</view>
|
|
|
|
<!-- @transition="transition" -->
|
|
<swiper :vertical="true" :current="swiperCurrent" :circular="false" @animationfinish="finishSwiper">
|
|
<swiper-item v-for="(item, index) in videoList" :key="item.id" :item-id="index">
|
|
<view class="videoBox">
|
|
<view class="poster">
|
|
<image :src="item.explain_video + '?x-oss-process=video/snapshot,t_1000,m_fast'" mode="widthFix"></image>
|
|
</view>
|
|
|
|
<!-- <video v-if="index == swiperCurrent || (index + 1 == swiperCurrent) || (index - 1 == swiperCurrent)"
|
|
:src="item.explain_video_convert || item.explain_video"
|
|
:autoplay="index == swiperCurrent"
|
|
objectFit="contain"
|
|
:controls="false"
|
|
:loop="true"
|
|
:id="'myvideo' + index"
|
|
:poster="index == 0 ? item.explain_video + '?x-oss-process=video/snapshot,t_1000,m_fast' : ''"
|
|
@timeupdate="timeupdate"
|
|
@loadedmetadata="load"
|
|
@error="error"
|
|
:showCenterPlayBtn="false"
|
|
:custom-cache="false">
|
|
</video> -->
|
|
|
|
<view class="videoDom" v-if="index == swiperCurrent || (index + 1 == swiperCurrent) || (index - 1 == swiperCurrent)">
|
|
<DomVideoPlayer
|
|
:ref="el => getVideoPlayerRef(el, index)"
|
|
object-fit="contain"
|
|
:isLoading="true"
|
|
:muted="false"
|
|
:controls="false"
|
|
:autoplay="index == swiperCurrent"
|
|
@timeupdate="timeupdate"
|
|
@durationchange="onDurationChange"
|
|
@loadedmetadata="load"
|
|
:loop="true"
|
|
:poster="index == 0 ? item.explain_video + '?x-oss-process=video/snapshot,t_1000,m_fast' : ''"
|
|
:src="item.explain_video_convert || item.explain_video" />
|
|
</view>
|
|
|
|
<view class="touch-cover" @click="changeStatus"></view>
|
|
|
|
<!-- 暂停按钮 -->
|
|
<view class="play-btn" v-if="!playState && index == swiperCurrent" @click="changeStatus"><up-icon name="play-right-fill" color="#fff" size="30" /></view>
|
|
|
|
<!-- 右侧工具 -->
|
|
<view class="tools">
|
|
<view class="item" @click="handleCollection(item)">
|
|
<up-icon v-if="!item.is_collect" name="heart-fill" size="26" color="#fff" />
|
|
<up-icon v-else name="heart-fill" size="26" :color="Color" />
|
|
<view class="txt">收藏</view>
|
|
</view>
|
|
<button class="item" @click="handleShare()">
|
|
<up-icon name="share" color="#fff" size="26" />
|
|
<view class="txt">分享</view>
|
|
</button>
|
|
<view class="item" @click="showComment = true">
|
|
<up-icon name="chat" color="#fff" size="26" />
|
|
<view class="txt">评价</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商品信息 -->
|
|
<view class="vanBox">
|
|
<view class="descBox">
|
|
<!-- 跟团记录 -->
|
|
<view class="record" v-if="record.length && index == swiperCurrent" :style="{opacity: opacity}">
|
|
<view :class="{ top: animate == true }">
|
|
<view class="row" v-for="(it, index) in record" :key="index">
|
|
<view class="box">
|
|
<image v-if="it.user" :src="it.user.avatar"></image>
|
|
<text>{{it.time}}跟团下单</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商品描述 -->
|
|
<view class="desc">
|
|
<expandable-text :longText="item.description" :line="2" :collapsev="item.collapse" :lineHeight="40" expandText="展开" foldText="收起"/>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="goodBox" @click="showGoods = true">
|
|
<image class="img" :src="item.face_img" mode="aspectFill"></image>
|
|
<view class="box">
|
|
<view class="tit">{{item.title}}</view>
|
|
<view class="text">{{item.visitor}}人看过 | {{item.order_count}}人跟团</view>
|
|
<view class="flex">
|
|
<view class="price" v-if="item.min_price == item.max_price">￥{{item.min_price}}</view>
|
|
<view class="price" v-else>￥{{item.min_price}}-{{item.max_price}}</view>
|
|
<button class="buy">立即跟团</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="bar" v-if="index == swiperCurrent">
|
|
<view class="on" :style="{'width': schedule + '%'}"></view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
<!-- 本团评价 -->
|
|
<comment :id="orign_id" :show="showComment" @close="showComment = false" />
|
|
|
|
<!-- 跟团商品 -->
|
|
<goods :id="orign_id" :show="showGoods" @close="showGoods = false" :sales="total" />
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, reactive, toRefs, nextTick } from 'vue'
|
|
import { get, post } from '@/api/request.js'
|
|
import { Style } from '@/utils/list.js'
|
|
import { showToast, formatDate, uniShare, whetherLogin } from '@/components/common.js'
|
|
import comment from '@/components/ktt/comment.vue'
|
|
import goods from '@/components/ktt/goods.vue'
|
|
import expandableText from '@/components/ktt/expandable-text.vue'
|
|
import DomVideoPlayer from '@/components/DomVideoPlayer/index.vue'
|
|
|
|
export default {
|
|
components: { comment, goods, expandableText, DomVideoPlayer },
|
|
setup() {
|
|
const data = reactive({
|
|
orign_id: 0,
|
|
videoUrl: '',
|
|
goodsInfo: {},
|
|
isLoading: true,
|
|
playState: true,
|
|
navigationBarHeight: 0,
|
|
statusBarHeight: 0,
|
|
Color: '',
|
|
priceColor: '',
|
|
pagesLength: 0,
|
|
poster: '',
|
|
showComment: false,
|
|
animate: false,
|
|
timer: null,
|
|
record: [],
|
|
opacity: 1,
|
|
showGoods: false,
|
|
shareUrl: '',
|
|
schedule: 0,
|
|
startY: 0,
|
|
moveY: 0,
|
|
last_id: 0,
|
|
has_more: true,
|
|
videoList: [],
|
|
lastIndex: 0,
|
|
duration: 0,
|
|
total: 0
|
|
})
|
|
|
|
const swiperCurrent = ref(0)
|
|
|
|
let pages = getCurrentPages()
|
|
data.pagesLength = pages.length
|
|
|
|
async function getVideo() {
|
|
await get(`/api/app/goods/videos/${data.orign_id}`).then((ress) => {
|
|
data.videoUrl = ress.data.explain_video_convert || ress.data.explain_video
|
|
data.videoList.push(ress.data)
|
|
})
|
|
}
|
|
|
|
async function getDetail() {
|
|
await get(`/api/v1/goods/group/detail/${data.orign_id}`).then((res) => {
|
|
data.isLoading = false
|
|
data.goodsInfo = res.data
|
|
data.videoList[swiperCurrent.value].is_collect = res.data.is_collect
|
|
}).catch(() => {
|
|
data.isLoading = false
|
|
})
|
|
}
|
|
|
|
function getList() {
|
|
get(`/api/app/goods/videos`, {last_id: data.last_id, pageSize: 10}).then((res) => {
|
|
res.data.forEach((it) => {
|
|
it.collapse = false
|
|
})
|
|
data.videoList = data.videoList.concat(res.data)
|
|
data.last_id = res.last_id
|
|
data.has_more = res.has_more
|
|
})
|
|
}
|
|
|
|
function load(e) {
|
|
const that = this
|
|
nextTick(() => {
|
|
console.log('视频load')
|
|
// let videoObj = uni.createVideoContext('myvideo' + swiperCurrent.value, that)
|
|
let videoObj = videoPlayerRefList.value[swiperCurrent.value]
|
|
videoObj.play()
|
|
data.playState = true
|
|
})
|
|
}
|
|
|
|
function error(e) {
|
|
console.log('视频出错', e)
|
|
}
|
|
|
|
function transition(e) {
|
|
console.log('滑动开始', e)
|
|
}
|
|
|
|
function finishSwiper(e) {
|
|
// console.log('滑动完成', e)
|
|
const that = this
|
|
if(swiperCurrent.value != e.detail.current) {
|
|
data.playState = true
|
|
data.lastIndex = swiperCurrent.value
|
|
swiperCurrent.value = e.detail.current
|
|
console.log(data.lastIndex)
|
|
// let videoObj = uni.createVideoContext('myvideo' + data.lastIndex, that)
|
|
// let videoObj = videoPlayerRefList.value[data.lastIndex]
|
|
videoPlayerRefList.value.forEach((itm) => {
|
|
itm.pause()
|
|
})
|
|
console.log('swiperCurrent.value', swiperCurrent.value)
|
|
data.schedule = 0
|
|
handleFn()
|
|
if(data.videoList.length - 2 == swiperCurrent.value && data.has_more) {
|
|
console.log('加载下一页')
|
|
getList()
|
|
}
|
|
}
|
|
}
|
|
|
|
async function handleFn() {
|
|
data.orign_id = data.videoList[swiperCurrent.value].id
|
|
console.log('orign_id', data.orign_id)
|
|
await getDetail()
|
|
clearInterval(data.timer)
|
|
data.timer = null
|
|
getRecord()
|
|
getShareUrl()
|
|
}
|
|
|
|
// 点击暂停
|
|
function changeStatus(e) {
|
|
if(e.type == 'tap' || e.type == 'click' || e.type == 'onClick') {
|
|
data.playState = !data.playState
|
|
if (data.playState) {
|
|
nextTick(() => {
|
|
// let videoObj = uni.createVideoContext('myvideo' + swiperCurrent.value, this)
|
|
let videoObj = videoPlayerRefList.value[swiperCurrent.value]
|
|
videoObj.play()
|
|
})
|
|
} else {
|
|
nextTick(() => {
|
|
// let videoObj = uni.createVideoContext('myvideo' + swiperCurrent.value, this)
|
|
let videoObj = videoPlayerRefList.value[swiperCurrent.value]
|
|
videoObj.pause()
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
function toPage(url, type) {
|
|
if (type == 1) {
|
|
uni.navigateTo({ url })
|
|
} else if(type == 0) {
|
|
uni.switchTab({ url })
|
|
} else {
|
|
uni.navigateBack({ delta: 1 })
|
|
}
|
|
}
|
|
|
|
// 收藏
|
|
const handleCollection = (item) => {
|
|
if(whetherLogin()) {
|
|
if(item.is_collect) {
|
|
// 取消收藏
|
|
post('/api/v1/users/collect/cancel', { type: 1, extend_id: data.orign_id }).then((res) => {
|
|
item.is_collect = false
|
|
showToast('已取消收藏')
|
|
})
|
|
} else {
|
|
post('/api/v1/users/collect', { type: 1, extend_id: data.orign_id }).then((res) => {
|
|
item.is_collect = true
|
|
showToast('收藏成功')
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
function getRecord() {
|
|
get(`/api/app/goods/record/${data.orign_id}`, { page: 1, pageSize: 30 }).then((res) => {
|
|
res.data.forEach((item) => {
|
|
item.time = formatDate(Date.parse(item.created_at.replace(/-/g, '/')))
|
|
})
|
|
data.record = res.data
|
|
data.total = res.meta.total
|
|
if(data.record.length > 1) {
|
|
startAnimate()
|
|
}
|
|
})
|
|
}
|
|
|
|
function startAnimate() {
|
|
data.timer = setInterval(() => {
|
|
data.animate = true
|
|
setTimeout(() => {
|
|
data.record.push(data.record[0])
|
|
data.record.shift()
|
|
data.animate = false
|
|
}, 1000)
|
|
}, 2000)
|
|
}
|
|
|
|
function timeupdate(event) {
|
|
data.schedule = ((event / data.duration) * 100).toFixed(2)
|
|
}
|
|
|
|
const onDurationChange = (e) => {
|
|
data.duration = e
|
|
}
|
|
|
|
const getShareUrl = () => {
|
|
post('/api/app/user/share', {
|
|
page: 'pages/groups/video',
|
|
query: `id=${data.orign_id}`
|
|
}).then((res) => {
|
|
data.shareUrl = res.data.path
|
|
})
|
|
}
|
|
|
|
const videoPlayerRefList = ref([])
|
|
const getVideoPlayerRef = (el, index) => {
|
|
if (el) {
|
|
videoPlayerRefList.value[index] = el
|
|
if(index !== swiperCurrent.value) {
|
|
el.pause()
|
|
}
|
|
}
|
|
}
|
|
|
|
const handleShare = () => {
|
|
let title = data.goodsInfo.description
|
|
let imageUrl = data.goodsInfo.face_img
|
|
let path = data.shareUrl
|
|
uniShare(title, imageUrl, path)
|
|
}
|
|
|
|
return {
|
|
uniShare,
|
|
whetherLogin,
|
|
videoPlayerRefList,
|
|
...toRefs(data),
|
|
getVideo,
|
|
getDetail,
|
|
changeStatus,
|
|
toPage,
|
|
handleCollection,
|
|
getRecord,
|
|
startAnimate,
|
|
getShareUrl,
|
|
onDurationChange,
|
|
timeupdate,
|
|
load,
|
|
getList,
|
|
finishSwiper,
|
|
transition,
|
|
error,
|
|
swiperCurrent,
|
|
getVideoPlayerRef,
|
|
handleShare
|
|
}
|
|
},
|
|
async onLoad(options) {
|
|
const _this = this
|
|
this.orign_id = options.id * 1
|
|
// await this.$onLaunched
|
|
uni.getSystemInfo({
|
|
success: res => {
|
|
_this.navigationBarHeight = res.statusBarHeight + 44
|
|
_this.statusBarHeight = res.statusBarHeight
|
|
}
|
|
})
|
|
this.Color = uni.getStorageSync('theme_color')
|
|
this.priceColor = Style[uni.getStorageSync('theme_index') * 1].priceColor
|
|
this.last_id = options.id * 1
|
|
await this.getVideo()
|
|
await this.getDetail()
|
|
this.getList()
|
|
this.getRecord()
|
|
this.getShareUrl()
|
|
},
|
|
onUnload() {
|
|
clearInterval(this.timer)
|
|
this.timer = null
|
|
},
|
|
onHide() {
|
|
clearInterval(this.timer)
|
|
this.timer = null
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.video-contain{
|
|
width: 100%;
|
|
height: 100%;
|
|
swiper{
|
|
height: 100vh;
|
|
width: 100%;
|
|
}
|
|
.videoBox{
|
|
height: 100vh;
|
|
width: 100%;
|
|
position: relative;
|
|
.poster{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
background-color: #000;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
image{
|
|
width: 100%;
|
|
}
|
|
}
|
|
.videoDom{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
.bar{
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
position: fixed;
|
|
height: 2px;
|
|
bottom: 16rpx;
|
|
left: 24rpx;
|
|
width: calc(100vw - 48rpx);
|
|
z-index: 10;
|
|
.on{
|
|
height: 100%;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.nav-myself{
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
z-index: 999;
|
|
}
|
|
.title-content{
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
padding-left: 20rpx;
|
|
.icon{
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
background-color: rgba(255, 255, 255, 0.7);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.tools{
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 400rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 130rpx;
|
|
z-index: 10;
|
|
.item{
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
background-color: transparent;
|
|
color: #fff;
|
|
line-height: 50rpx;
|
|
font-size: 28rpx;
|
|
margin-bottom: 30rpx;
|
|
.txt{
|
|
line-height: 50rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.touch-cover{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
z-index: 2;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
background-size:100% 100%;
|
|
}
|
|
|
|
.play-btn{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
height: 128rpx;
|
|
width: 128rpx;
|
|
z-index: 200;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
}
|
|
.record{
|
|
margin-bottom: 10rpx;
|
|
height: 62rpx;
|
|
overflow: hidden;
|
|
image{
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
border-radius: 50%;
|
|
margin-right: 6rpx;
|
|
}
|
|
.row{
|
|
padding: 6rpx 0;
|
|
height: 62rpx;
|
|
box-sizing: border-box;
|
|
.box{
|
|
background-color: #333;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
border-radius: 50rpx;
|
|
width: fit-content;
|
|
padding: 0 12rpx 0 7rpx;
|
|
}
|
|
}
|
|
.top{
|
|
transition: all 1s;
|
|
margin-top: -62rpx;
|
|
}
|
|
}
|
|
.descBox{
|
|
width: calc(100% - 140rpx);
|
|
.desc{
|
|
font-size: 26rpx;
|
|
line-height: 40rpx;
|
|
color: #fff;
|
|
&.hide{
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
white-space: break-spaces;
|
|
}
|
|
}
|
|
}
|
|
.vanBox{
|
|
position: absolute;
|
|
left: 24rpx;
|
|
width: calc(100vw - 48rpx);
|
|
bottom: 40rpx;
|
|
z-index: 20;
|
|
.goodBox{
|
|
margin-top: 20rpx;
|
|
padding: 16rpx;
|
|
background-color: #fff;
|
|
border-radius: 10rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.img{
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
object-fit: cover;
|
|
}
|
|
.box{
|
|
width: calc(100% - 160rpx);
|
|
.tit{
|
|
font-size: 28rpx;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.text{
|
|
font-size: 24rpx;
|
|
margin: 6rpx 0 10rpx;
|
|
color: #999;
|
|
}
|
|
.flex{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.price{
|
|
color: v-bind('priceColor');
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
}
|
|
.buy{
|
|
color: #fff;
|
|
font-size: 26rpx;
|
|
width: 150rpx;
|
|
height: 54rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: v-bind('Color');
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.loadbox{
|
|
padding: 200rpx 0;
|
|
text-align: center;
|
|
color: #666;
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
</style>
|