detail.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <template>
  2. <view class="content" v-if="content">
  3. <view class="acitve-content">
  4. <video id="myvideo" autoplay direction="0" @fullscreenchange="fullscreenchange" :title="title" :src="content" controls></video>
  5. </view>
  6. <view class="titles">{{title}}</view>
  7. </view>
  8. </template>
  9. <script>
  10. import { shopBannerDetail } from '@/api/video.js'
  11. export default {
  12. data() {
  13. return {
  14. title: null,
  15. content: '',
  16. bannerSn: null
  17. }
  18. },
  19. onLoad(opts) {
  20. if(opts.form=='videoList'){
  21. this.title = opts.title
  22. this.content = opts.content
  23. this.videoFull()
  24. }else{
  25. this.bannerSn = opts.sn
  26. this.getDetail()
  27. }
  28. },
  29. methods: {
  30. fullscreenchange(e, direction){
  31. if(!e.detail.fullScreen){
  32. uni.navigateBack()
  33. }
  34. },
  35. videoFull(){
  36. const videos = uni.createVideoContext('myvideo',this)
  37. videos.requestFullScreen()
  38. },
  39. getDetail(){
  40. shopBannerDetail({bannerSn:this.bannerSn}).then(res => {
  41. this.title = res.data.bannerName
  42. this.content = res.data.content
  43. uni.setNavigationBarTitle({
  44. title: '视频内容'
  45. })
  46. this.videoFull()
  47. })
  48. }
  49. }
  50. }
  51. </script>
  52. <style lang="less">
  53. page{
  54. padding: 0;
  55. }
  56. .content{
  57. padding: 0;
  58. .titles{
  59. text-align: center;
  60. padding: 20rpx;
  61. font-weight: bold;
  62. }
  63. .acitve-content{
  64. padding: 0;
  65. video{
  66. width:100%;
  67. }
  68. }
  69. }
  70. </style>