guide.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. <template>
  2. <div class="bg2C2C2D">
  3. <video v-for="item in topADList" id="ad" :key="item.id" class="w345h120" :poster="item.imgUrls[0]" :src="item.videoUrl" @click="playAd()" />
  4. <div v-for="item in videoList" :key="item.plateId">
  5. <div class="fs16">{{item.plateName}}</div>
  6. <div :class="item.displayMode === 1 ? 'jjjc-list' : 'jcjc-list'">
  7. <video v-for="ele in item.videoCourseList" :id="'el-video-' + ele.id" :key="ele.id" class="w165h148" preload="auto" :poster="'http://110.53.221.195:8210/document/newFile/download/0/e858720c23ke455aa60e?fileKey=' + ele.coverImageKey" :src="'http://110.53.221.195:8210/document/newFile/download/0/e858720c23ke455aa60e?fileKey=' + ele.videoKey" @click="play(item, ele)" />
  8. </div>
  9. </div>
  10. <div class="return out"><div class="in"><img src="~/assets/image/activity/invite-user/guide/left.png" /></div></div>
  11. </div>
  12. </template>
  13. <script>
  14. export default {
  15. name: 'Guide',
  16. auth: false,
  17. data() {
  18. return {
  19. videoList: [],
  20. topADList: [],
  21. token: ''
  22. }
  23. },
  24. fetch() {
  25. this.token = this.$route.query.token;
  26. },
  27. created() {
  28. this.getActiveInfo()
  29. this.getAdInfoByAdPlace()
  30. },
  31. methods: {
  32. async getActiveInfo() {
  33. const res = await this.$axios.$get('http://192.168.31.198:8112/videoCourse/client/list');
  34. this.videoList = res.data;
  35. },
  36. async getAdInfoByAdPlace() {
  37. const data = {
  38. id: 1,
  39. adPlace: 511,
  40. os: 1
  41. }
  42. const res = await this.$axios.$post('/v5/advertising/getAdInfoByAdPlace', data);
  43. this.topADList = res.data;
  44. },
  45. play(item, ele) {
  46. const elVideo = document.getElementById('el-video-' + ele.id)
  47. if (elVideo.requestFullscreen) {
  48. elVideo.requestFullscreen()
  49. elVideo.play()
  50. } else if (elVideo.mozRequestFullscreen) {
  51. elVideo.mozRequestFullscreen()
  52. elVideo.play()
  53. } else if (elVideo.webkitRequestFullscreen) {
  54. elVideo.webkitRequestFullscreen()
  55. elVideo.play()
  56. }
  57. this.submit(item, ele, 1)
  58. },
  59. playAd(item, ele) {
  60. const elVideo = document.getElementById('ad')
  61. if (elVideo.requestFullscreen) {
  62. elVideo.requestFullscreen()
  63. elVideo.play()
  64. } else if (elVideo.mozRequestFullscreen) {
  65. elVideo.mozRequestFullscreen()
  66. elVideo.play()
  67. } else if (elVideo.webkitRequestFullscreen) {
  68. elVideo.webkitRequestFullscreen()
  69. elVideo.play()
  70. }
  71. this.submit(item, ele, 2)
  72. },
  73. submit(item, ele, flag) {
  74. const data = flag === 1 ? { id: ele.id, plateId: item.plateId, type: flag, videoId: ele.id } : { type: 2 }
  75. this.$axios.$post('/videoCourse/statistics/save', data, {headers: {Authorization: this.token}});
  76. }
  77. }
  78. }
  79. </script>
  80. <style lang="scss" scoped>
  81. .bg2C2C2D {
  82. background-color: #1C1C1E;
  83. min-height: 100vh;
  84. overflow: hidden;
  85. }
  86. .w345h120 {
  87. width: 345px;
  88. height: 120px;
  89. margin: 15px;
  90. }
  91. .fs16 {
  92. font-weight: 500;
  93. color: #ffffff;
  94. font-size: 16px;
  95. margin-left: 15px;
  96. display: flex;
  97. align-items: center;
  98. }
  99. .jcjc-list {
  100. padding: 0 15px;
  101. overflow-x: scroll;
  102. display: flex;
  103. margin: 15px 0;
  104. .w165h148 {
  105. margin-right: 10px;
  106. &:last-child {
  107. margin-right: 0;
  108. }
  109. }
  110. }
  111. .fs16::before {
  112. content: '';
  113. display: inline-block;
  114. width: 6px;
  115. height: 14px;
  116. background: #3b7fff;
  117. border-radius: 3px 3px 3px 3px;
  118. opacity: 1;
  119. margin-right: 6px;
  120. }
  121. .w144h140 {
  122. width: 144px;
  123. height: 140px;
  124. margin-right: 10px;
  125. }
  126. .w144h140:last-child {
  127. margin-right: 0;
  128. }
  129. .jjjc-list {
  130. display: flex;
  131. flex-flow: wrap;
  132. justify-content: space-between;
  133. padding: 15px;
  134. }
  135. .w165h148 {
  136. width: 165px;
  137. height: 148px;
  138. object-fit: contain;
  139. margin-bottom: 15px;
  140. }
  141. .return {
  142. width: 42px;
  143. height: 42px;
  144. margin-left: 20px;
  145. margin-bottom: 40px;
  146. &.out {
  147. border-radius: 50%;
  148. padding: 1px;
  149. background: linear-gradient(46deg, rgba(48, 49, 53, 1), rgba(113, 116, 127, 1));
  150. box-shadow: 0px 9px 17px 0px rgba(0,0,0,0.5);
  151. }
  152. .in {
  153. width: 40px;
  154. height: 40px;
  155. border-radius: 50%;
  156. background: linear-gradient(180deg, #232427 0%, #4B4C52 100%);
  157. opacity: 1;
  158. text-align: center;
  159. line-height: 40px;
  160. }
  161. img {
  162. width: 16px;
  163. height: 16px;
  164. }
  165. }
  166. </style>