pan-mini/pages/detail/detail.vue

<template>
  <view>
    <video
      :src="url" 
      class="video-detail"
      :controls="false"
      :show-center-play-btn="false"
      :autoplay="true"
      :loop="true"
      :muted="true"
    ></video>
    <!-- <ad-rewarded-video ref="adRewardedVideo" adpid="1507000689" :loadnext="true" v-slot:default="{loading, error}" @load="onadload" @close="onadclose" @error="onaderror">
      <button :disabled="loading" :loading="loading">显示广告</button>
    </ad-rewarded-video> -->
    <!-- <uni-fab ref="fab" :pattern="pattern" :horizontal="'right'" :vertical="'bottom'" :popMenu="false" @fabClick="downloadAction" /> -->
    <uni-fab 
    ref="fab" 
    :pattern="pattern" 
    :content="content" 
    :horizontal="'right'" 
    :vertical="'bottom'"
    :popMenu="true"
     @trigger="trigger" 
     @fabClick="fabClick" />

  </view> 
</template>

<script>
  import { downloadAndSaveVideo } from '@/utils/media';
  export default {
    data() {
      return {
        url:"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4",
        id:0,
        pattern:{
          color: '#19c324',
          backgroundColor: '#fff',
          selectedColor: '#19c324',
          buttonColor: '#19c324',
          iconColor: '#fff'
        },
        isDownload:false,
        content: [
          {
        		iconPath: '/static/vip_download.png',
            selectedIconPath: '/static/vip_download_active.png',
        		text: '会员下载',
        		active: false
        	},
        	{
        		iconPath: '/static/download.png',
        		selectedIconPath: '/static/download_ok.png',
        		text: '看视频免费下载',
        		active: false
        	}
        ]
      }
    },
    onLoad(options) {      
      if (options.id) {
        this.id = options.id;
        // 这里可以根据id发起请求获取详情数据等操作        
        this.$http.get('/resource/'+this.id).then((resp)=>{
          this.url = resp.url
        }).catch((err)=>{
          console.log('请求异常')
        })
      } else {
        console.log('获取id异常')
      }
      
      // 加载广告
      // this.$refs.adRewardedVideo.load();
    },
    methods: {
      trigger(e) {
      	console.log(e)
      	this.content[e.index].active = !e.item.active
      	uni.showModal({
      		title: '提示',
      		content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
      		success: function(res) {
      			if (res.confirm) {
      				console.log('用户点击确定')
      			} else if (res.cancel) {
      				console.log('用户点击取消')
      			}
      		}
      	})
      },
      fabClick() {
      	uni.showToast({
      		title: '点击了悬浮按钮',
      		icon: 'none'
      	})
      },
      switchBtn(hor, ver) {
      	if (hor === 0) {
      		this.direction = this.direction === 'horizontal' ? 'vertical' : 'horizontal'
      		this.directionStr = this.direction === 'horizontal' ? '垂直' : '水平'
      	} else {
      		this.horizontal = hor
      		this.vertical = ver
      	}
      	this.$forceUpdate()
      },
      switchColor() {
      	this.is_color_type = !this.is_color_type
      	if (this.is_color_type) {
      		this.pattern.iconColor = '#aaa'
      		this.pattern.buttonColor = '#fff'
      	} else {
      		this.pattern.iconColor = '#fff'
      		this.pattern.buttonColor = '#007AFF'
      	}
      },
      async downloadAction() {
        // 判断用户是否为会员
        let userInfo = null
        uni.getStorage({
          key:'user-info',
          success:function (res) {
            userInfo = res
          },
          fail: (err) => {
            // 获取用户信息异常
            this.$refs.adRewardedVideo.show();
          }
        })
        
        if (userInfo != null && userInfo.is_vip) {
          try {
            const url = "/resource/"+this.id
            const result = await downloadAndSaveVideo(url);
            if (result) {
              // 下载成功记录
              this.isDownload = true
              this.pattern.iconColor = this.isDownload? '#19c324':'#fff'
              this.$http.post('/resource/'+this.id+'/download');
            }
          } catch (error) {
            console.error('下载失败:', error);
          }
        }
      },
      onadload(e) {
        console.log('广告数据加载成功');
      },
      onadclose(e) {
        const detail = e.detail
        // 用户点击了【关闭广告】按钮
        if (detail && detail.isEnded) {
          // 正常播放结束
          console.log("onadclose " + detail.isEnded);
        } else {
          // 播放中途退出
          console.log("onadclose " + detail.isEnded);
        }
      },
      onaderror(e) {
        // 广告加载失败
        console.log("onaderror: ", e.detail);
      }
    }
  }
</script>

<style>

.video-detail {
  width: 100%;
  height: 100vh;
  /* 16:9 宽高比 */
  aspect-ratio: 16/9;
  background-color: #000;
}


</style>