audioComment.vue 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <template name="audioComment">
  2. <view>
  3. <view class="banner">
  4. <dever-audio
  5. :src="item.audio"
  6. :pic="item.pic"
  7. :control="true"
  8. :loop="true"
  9. :load.sync="load"
  10. @play="play"
  11. ref="audio"
  12. >
  13. </dever-audio>
  14. </view>
  15. <block v-if="item.type == 2">
  16. <dever-comment ref="comment" :item="item" :type="`content/video_comment`" :type_id="item.id"></dever-comment>
  17. </block>
  18. <block v-if="item.type == 1">
  19. <dever-seat ref="seat" :item="item" :type="`content/video_comment`" :type_id="item.id" @start="start" @stop="stop"></dever-seat>
  20. </block>
  21. </view>
  22. </template>
  23. <script>
  24. import deverAudio from '@/lib/dever/components/audio.nvue';
  25. import deverComment from "@/lib/dever/components/comment.vue";
  26. import deverSeat from '@/lib/dever/components/seat.vue';
  27. export default {
  28. name: "audioComment",
  29. props: {
  30. control : {
  31. type : Object,
  32. value : null
  33. },
  34. item : {
  35. type : Object,
  36. value : null
  37. },
  38. index : 0
  39. },
  40. data() {
  41. return {
  42. load : false,
  43. }
  44. },
  45. mounted() {
  46. this.control[this.index] = this;
  47. },
  48. methods:{
  49. start : function() {
  50. this.$refs.audio.start();
  51. },
  52. stop : function() {
  53. this.$refs.audio.stop();
  54. },
  55. play : function(state, time) {
  56. if (this.item.type == 1) {
  57. var method = 'seat';
  58. } else {
  59. var method = 'comment';
  60. }
  61. if (state == 'start') {
  62. this.$refs[method].start();
  63. } else if (state == 'stop') {
  64. this.$refs[method].stop();
  65. } else if (state == 'time' && time) {
  66. this.$refs[method].time(time);
  67. }
  68. },
  69. },
  70. components:{
  71. deverAudio,deverComment,deverSeat
  72. }
  73. }
  74. </script>
  75. <style>
  76. .banner{
  77. position: relative;
  78. width: 750rpx;
  79. height: 422rpx;
  80. display: block;
  81. }
  82. </style>