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.
142 lines
3.4 KiB
142 lines
3.4 KiB
<template>
|
|
<view class="page">
|
|
<navbar leftClick @leftClick="$utils.navigateBack" />
|
|
|
|
<view class="content">
|
|
<video class="video"
|
|
id="video"
|
|
:src="detail.videoUrl"
|
|
autoplay
|
|
:show-fullscreen-btn="false"
|
|
@timeupdate="onTimeupdate"
|
|
></video>
|
|
<view class="info">
|
|
<view class="author">{{ detail.author }}</view>
|
|
<view class="title">{{ detail.title }}</view>
|
|
<view class="desc">{{ detail.description }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<popupUnlock ref="popupUnlock" src="../static/sharing/unlock-video.png"></popupUnlock>
|
|
|
|
<popupQrCode ref="popupQrCode" :src="detail.qrCode"></popupQrCode>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import popupUnlock from '../components/popupUnlock.vue'
|
|
import popupQrCode from '../components/popupQrCode.vue'
|
|
|
|
export default {
|
|
components: {
|
|
popupUnlock,
|
|
popupQrCode,
|
|
},
|
|
data() {
|
|
return {
|
|
detail: {
|
|
id: null,
|
|
title: null,
|
|
videoUrl: null,
|
|
times: 10,
|
|
qrCode: null,
|
|
description: null,
|
|
},
|
|
isLocked: true,
|
|
videoContext: null
|
|
}
|
|
},
|
|
async onLoad(option) {
|
|
console.log('--option', option)
|
|
const { id } = option
|
|
|
|
await this.fetchSharingDetail(id)
|
|
|
|
this.videoContext = uni.createVideoContext('video');
|
|
|
|
console.log('--videoContext', this.videoContext)
|
|
|
|
// this.videoContext.requestFullScreen()
|
|
|
|
},
|
|
onShareAppMessage(res) {
|
|
const {
|
|
title,
|
|
coverImageUrl,
|
|
} = this.detail
|
|
|
|
// todo: check
|
|
let o = {
|
|
title : title,
|
|
imageUrl: coverImageUrl,
|
|
query: `id=${this.detail.id}`,
|
|
}
|
|
|
|
// todo: check callback? settimeout?
|
|
|
|
// todo: get times and check is unlocked
|
|
|
|
this.isLocked = false
|
|
|
|
this.$refs.popupQrCode.open()
|
|
|
|
return o
|
|
},
|
|
methods: {
|
|
async fetchSharingDetail(id) {
|
|
// todo: init data by id
|
|
|
|
this.detail = {
|
|
id: '001',
|
|
author: '@裂变星',
|
|
coverImageUrl: 'http://gips3.baidu.com/it/u=70459541,3412285454&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280',
|
|
videoUrl: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
|
|
mins: 10,
|
|
times: 10,
|
|
qrCode: '../static/temp-qrcode.png',
|
|
title: '20秒学会日赚1000+，全自动获客',
|
|
description: '裂变获客，轻松引流！',
|
|
auditStatus: 2,
|
|
createTime: '2025年2月1日',
|
|
state: 1,
|
|
}
|
|
},
|
|
onTimeupdate(e) {
|
|
const { currentTime } = e.target
|
|
|
|
if (currentTime >= this.detail.mins) {
|
|
this.videoContext.pause()
|
|
|
|
if (this.isLocked) {
|
|
this.$refs.popupUnlock.open();
|
|
} else {
|
|
this.$refs.popupQrCode.open()
|
|
}
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</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>
|