videoDetail.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <template>
  2. <view class="videoDetail">
  3. <uni-menubar :title="videoDetail.name" />
  4. <tm-sheet >
  5. <video id="myVideo" :src="videoDetail.path" controls show-play-btn show-center-play-btn
  6. :poster-for-crawler="videoDetail.thumb"></video>
  7. <view class="mt-20">
  8. <tm-button theme="blue" block @click="downVideo">下载视频</tm-button>
  9. </view>
  10. </tm-sheet>
  11. </view>
  12. </template>
  13. <script>
  14. export default {
  15. data() {
  16. return {
  17. videoDetail:{},
  18. card_id:""
  19. }
  20. },
  21. onLoad(option) {
  22. if(option){
  23. this.card_id = option.card_id
  24. this.$tm.vx.commit('card/cardId', option.card_id)
  25. this.videoDetail = JSON.parse(option.detail)
  26. this.$point.point(11, this.videoDetail.id, this.card_id)
  27. }
  28. },
  29. onShareAppMessage(res) {
  30. return {
  31. title: this.videoDetail.name,
  32. path: '/pages/list/videoDetail?detail='+JSON.stringify(this.videoDetail)+'&card_id='+this.card_id,
  33. success: () => {
  34. this.$point.point(12, this.videoDetail.id, this.card_id)
  35. }
  36. }
  37. },
  38. methods:{
  39. downVideo() {
  40. let that = this
  41. const downloadTask = uni.downloadFile({
  42. url: that.videoDetail.path,
  43. success: (data) => {
  44. if (data.statusCode === 200) {
  45. wx.saveVideoToPhotosAlbum({
  46. filePath: data.tempFilePath,
  47. success: (res) => {
  48. uni.showToast({
  49. icon: 'none',
  50. mask: true,
  51. title: '视频已保存!',
  52. duration: 3000,
  53. });
  54. that.$point.point(13, that.videoDetail.id, that.card_id)
  55. }
  56. })
  57. }
  58. },
  59. fail: (err) => {
  60. uni.showToast({
  61. icon: 'none',
  62. mask: true,
  63. title: '失败请重新下载',
  64. });
  65. },
  66. });
  67. downloadTask.onProgressUpdate((res) => {
  68. if (res.progress < 101) {
  69. uni.showToast({
  70. icon: 'none',
  71. mask: true,
  72. title: '正在下载视频' + res.progress + '%',
  73. });
  74. } else {
  75. downloadTask.abort() // 取消下载任务
  76. }
  77. })
  78. },
  79. }
  80. }
  81. </script>
  82. <style lang="scss" scoped>
  83. .videoDetail {}
  84. </style>