fission-star-applet-250304/pages_order/sharing/video.vue

<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>