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.vio" 
        autoplay
        play-btn-position="center"
        :controls="!timeIsUp"
        :show-fullscreen-btn="false"
        :show-center-play-btn="true"
        @timeupdate="onTimeupdate"
        @ended="onTimeEnd"
      ></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>
    </uv-overlay>

    <popupQrCode ref="popupQrCode" :src="detail.wxCodeImage"></popupQrCode>
  </view>
</template>

<script>
  import { mapState } from 'vuex'
  import popupUnlock from '../components/popupUnlock.vue'
  import popupQrCode from '../components/popupQrCode.vue'

	export default {
    components: {
      popupUnlock,
      popupQrCode,
    },
		data() {
			return {
        id: null,
        detail: {
          id: null,
          headTitle: null,
          indexImage: null,
          vio: null,
          timeNum: 0,
          num: 0,
          wxCodeImage: null,
          textDetails: null,
        },
        timeIsUp: false,
        isLocked: true,
        videoContext: null,
      }
    },
		computed: {
			...mapState(['userInfo']),
		},
    onShow() {
      if (this.id && uni.getStorageSync('token')) {
        this.initData()
      }
    },
    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{
        uni.navigateTo({
          url: '/pages_order/auth/wxLogin'
        })
      }
      
    },
    onShareAppMessage(res) {
      const {
        headTitle,
        indexImage,
      } = this.detail

      let o = {
        title : headTitle,
        imageUrl: indexImage,
        query: `id=${this.id}&state=1&shareId=${this.userInfo.id}`,
      }

      this.refreshLockStatus()

      return o
    },
    methods: {
      async fetchDetails(id) {
        try {
          this.detail = await this.$fetch('getVideoShareInfo', { id })
        } catch (err) {
          
        }
      },
      async initData() {
        this.fetchCheckShare().then(result => {
          const { open } = result

          this.isLocked = !open
        })
        await this.fetchDetails(this.id)

        this.videoContext = uni.createVideoContext('video');
      },
      async fetchCheckShare() {
        try {
          return await this.$fetch('checkVideoShare', { id: this.id })
        } catch (err) {
          return {}
        }
      },
      async refreshLockStatus() {

        const result = await this.fetchCheckShare()
        const { title, open } = result

        console.log('--open', open)

        this.$refs.popupUnlock.close();

        if (open) {
          this.isLocked = false
          this.timeIsUp = false
          this.videoContext.play()
          return
        }

        title && uni.showToast({
          title,
          icon: 'none'
        })

      },
      async onPlay() {
        if (!this.isLocked) {
          return
        }
        
        const result = await this.fetchCheckShare()
        const { open, need_num, num } = result

        console.log('--open', open)

        if (open) { // 转发已达标
          this.isLocked = false
          this.timeIsUp = false
          this.videoContext.play()
        } else {
          this.videoContext.pause()
          this.timeIsUp = true
          uni.showToast({
            title: `还需转发${need_num - num}次`,
            icon: 'none',
          })
          this.$refs.popupUnlock.open();
        }
      },
      async onTimeupdate(e) {
        const { currentTime } = e.target

        if (currentTime >= this.detail.timeNum && this.isLocked) {
          this.videoContext.pause()
          this.timeIsUp = true
          this.onPlay()
        }
      },
      onTimeEnd() {
        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>