audioComment.vue 1.9 KB

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