You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
191 lines
4.2 KiB
191 lines
4.2 KiB
<template>
|
|
<view class="page">
|
|
<navbar leftClick @leftClick="$utils.navigateBack" />
|
|
|
|
<view class="content">
|
|
<video class="video"
|
|
id="video"
|
|
:src="detail.vio"
|
|
autoplay
|
|
play-btn-position="center"
|
|
:controls="!timeIsUp"
|
|
:show-fullscreen-btn="false"
|
|
:show-center-play-btn="true"
|
|
@timeupdate="onTimeupdate"
|
|
></video>
|
|
<view class="info">
|
|
<view class="author">{{ detail.author || '' }}</view>
|
|
<view class="title">{{ detail.headTitle || '' }}</view>
|
|
<view class="desc">{{ detail.textDetails || '' }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<uv-overlay :show="timeIsUp" @click="onPlay" zIndex="998">
|
|
<popupUnlock ref="popupUnlock" src="../static/sharing/unlock-video.png"></popupUnlock>
|
|
<popupQrCode ref="popupQrCode" :src="detail.wxCodeImage"></popupQrCode>
|
|
<loginPopup ref="loginPopup" @login="initData"/>
|
|
</uv-overlay>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
import loginPopup from '@/components/config/loginPopup.vue'
|
|
import popupUnlock from '../components/popupUnlock.vue'
|
|
import popupQrCode from '../components/popupQrCode.vue'
|
|
|
|
export default {
|
|
components: {
|
|
popupUnlock,
|
|
popupQrCode,
|
|
loginPopup,
|
|
},
|
|
data() {
|
|
return {
|
|
id: null,
|
|
detail: {
|
|
id: null,
|
|
headTitle: null,
|
|
indexImage: null,
|
|
vio: null,
|
|
timeNum: 10,
|
|
num: 10,
|
|
wxCodeImage: null,
|
|
textDetails: null,
|
|
},
|
|
timeIsUp: false,
|
|
isLocked: true,
|
|
videoContext: null
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['userInfo']),
|
|
},
|
|
async onLoad(option) {
|
|
const { id, state, shareId } = option
|
|
|
|
if (shareId) {
|
|
uni.setStorageSync('shareId', shareId)
|
|
}
|
|
|
|
if (state) {
|
|
uni.setStorageSync('state', state)
|
|
}
|
|
|
|
if (id) {
|
|
uni.setStorageSync('id', id)
|
|
}
|
|
|
|
this.id = id
|
|
|
|
if(uni.getStorageSync('token')){
|
|
this.initData()
|
|
}else{
|
|
this.$refs.loginPopup.open()
|
|
}
|
|
|
|
},
|
|
onShareAppMessage(res) {
|
|
const {
|
|
headTitle,
|
|
indexImage,
|
|
} = this.detail
|
|
|
|
let o = {
|
|
title : headTitle,
|
|
imageUrl: indexImage,
|
|
query: `id=${this.id}&state=1&shareId=${this.userInfo.id}`,
|
|
}
|
|
|
|
// todo: get times and check is unlocked
|
|
this.refreshLockStatus()
|
|
|
|
return o
|
|
},
|
|
methods: {
|
|
async fetchDetails(id) {
|
|
try {
|
|
this.detail = await this.$fetch('getVideoShareInfo', { id })
|
|
} catch (err) {
|
|
|
|
}
|
|
},
|
|
async initData() {
|
|
await this.fetchDetails(this.id)
|
|
|
|
this.videoContext = uni.createVideoContext('video');
|
|
},
|
|
async fetchCheckShare(id) {
|
|
try {
|
|
return await this.$fetch('checkVideoShare', { id })
|
|
} catch (err) {
|
|
return {}
|
|
}
|
|
},
|
|
async refreshLockStatus() {
|
|
const result = await this.fetchCheckShare()
|
|
const { title, open } = result
|
|
|
|
if (open) {
|
|
this.isLocked = false
|
|
this.$refs.popupUnlock.close();
|
|
this.$refs.popupQrCode.open()
|
|
return
|
|
}
|
|
|
|
title && uni.showToast({
|
|
title,
|
|
icon: 'none'
|
|
})
|
|
},
|
|
async onPlay() {
|
|
if (!this.isLocked) {
|
|
this.$refs.popupQrCode.open()
|
|
return
|
|
}
|
|
|
|
const result = await this.fetchCheckShare()
|
|
const { open } = result
|
|
|
|
if (open) { // 转发已达标
|
|
this.isLocked = false
|
|
this.$refs.popupQrCode.open()
|
|
} else {
|
|
this.$refs.popupUnlock.open();
|
|
}
|
|
},
|
|
async onTimeupdate(e) {
|
|
const { currentTime } = e.target
|
|
|
|
// todo: check
|
|
if (currentTime >= this.detail.timeNum) {
|
|
this.videoContext.pause()
|
|
this.timeIsUp = true
|
|
this.onPlay()
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.video {
|
|
width: 100%;
|
|
height: calc(100vh - #{$navbar-height} - var(--status-bar-height) - 20rpx);
|
|
}
|
|
|
|
.info {
|
|
color: #FFFFFF;
|
|
font-size: 28rpx;
|
|
|
|
position: fixed;
|
|
left: 40rpx;
|
|
bottom: 100rpx;
|
|
|
|
.title {
|
|
font-size: 32rpx;
|
|
margin: 5rpx 0;
|
|
}
|
|
}
|
|
|
|
</style>
|