audio.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. <template>
  2. <view>
  3. <view class="box-1" id="list-box">
  4. <view class="list-box-hader flex-center">
  5. <!-- 语音公告 -->
  6. <image src="https://zxzhdc.zx-xcx.com/dining/musicNote.png" mode="widthFix"></image>
  7. </view>
  8. <view class="talk-list">
  9. <scroll-view scroll-y="true" :scroll-top="scrollTop" style="max-height: 520rpx;min-height: 200rpx;">
  10. <view v-for="(item,index) in talkList" :key="index" :id="`msg-${item.id}`">
  11. <view class="item flex-y-center" :class=" item.type == 1 ? 'push':'pull' ">
  12. <image :src="item.pic" mode="aspectFill" class="pic"></image>
  13. <view class="content" @click="play" :data-index='index' :data-play='item.is_check'>
  14. <image v-if="item.is_check==1" src="/static/home/yuyin1.png" class="play"></image>
  15. <image v-if="item.is_check==2" src="https://zxzhdc.zx-xcx.com/dining/play.gif" class="play"></image>
  16. </view>
  17. </view>
  18. </view>
  19. </scroll-view>
  20. </view>
  21. </view>
  22. <view class="close">
  23. <gbClose @bindClose="bindClose"/>
  24. </view>
  25. </view>
  26. </template>
  27. <script>
  28. import gbClose from './close.vue';
  29. import {
  30. mapState,
  31. } from 'vuex'
  32. const innerAudioContext = uni.createInnerAudioContext();
  33. export default {
  34. components: {
  35. gbClose,
  36. },
  37. computed: {
  38. ...mapState(['systemInfo', 'store_id', 'userInfo', 'audioList', 'setColor']),
  39. },
  40. data() {
  41. return {
  42. talkList: [],
  43. // content: "https://empdouyinv.zx-xcx.com/uploads/admin/admin_thumb/20210414/fd1a9acc5559a9acd78b61e865505933.mp3"
  44. // content: "https://empdouyinv.zx-xcx.com//uploads/admin/admin_thumb/20210414/a7fdd9ecaf0d9c1123f776a0cd61f1d7.mp3"
  45. // content: "https://empdouyinv.zx-xcx.com/uploads/admin/admin_thumb/20210419/8ffa29ef0ade32ad1fa9f6ff5670ecf5.mp3"
  46. // content: "https://empdouyinv.zx-xcx.com/uploads/admin/admin_thumb/20210419/2da36448ea5a2c12aeabfad70e9ac7d8.mp3"
  47. Aindex: 0,
  48. url: '',
  49. scrollTop: 0,
  50. is_off: 1
  51. }
  52. },
  53. watch: {
  54. // #ifdef MP-WEIXIN
  55. audioList: {
  56. handler(val) {
  57. if (val.length > 0) {
  58. this.talkList = val;
  59. if (this.is_off == 1) {
  60. this.is_off = 2;
  61. innerAudioContext.src = this.talkList[0].content;
  62. innerAudioContext.autoplay = true;
  63. this.talkList[0].is_check = 2;
  64. }
  65. }
  66. },
  67. deep: true,
  68. },
  69. // #endif
  70. },
  71. mounted() {
  72. // #ifdef MP-ALIPAY
  73. let val = this.$store.state.audioList;
  74. if (val.length > 0) {
  75. this.talkList = val;
  76. if (this.is_off == 1) {
  77. this.is_off = 2;
  78. innerAudioContext.autoplay = true;
  79. innerAudioContext.src = this.talkList[0].content;
  80. this.talkList[0].is_check = 2;
  81. }
  82. }
  83. // #endif
  84. },
  85. created(e) {
  86. innerAudioContext.onPlay(() => {
  87. console.log('开始播放');
  88. });
  89. innerAudioContext.onError((res) => {
  90. console.log('错误事件',res);
  91. });
  92. innerAudioContext.onEnded(() => {
  93. // console.log('自然结束');
  94. this.talkList.forEach((i, v) => {
  95. i.is_check = 1
  96. })
  97. let Aindex = this.Aindex + 1;
  98. if (Aindex >= this.talkList.length) {
  99. return
  100. }
  101. this.talkList[Aindex].is_check = 2;
  102. this.scrollTop = Aindex * 60;
  103. this.url = this.talkList[Aindex].content;
  104. innerAudioContext.src = this.talkList[Aindex].content;
  105. this.Aindex = Aindex;
  106. });
  107. innerAudioContext.onStop(() => {
  108. // console.log('停止播放');
  109. });
  110. innerAudioContext.onCanplay((res) => {
  111. });
  112. innerAudioContext.onPause(() => {
  113. // console.log('暂停播放');
  114. });
  115. },
  116. methods: {
  117. // ...mapMutations(['SET_AUDIO']),
  118. bindClose() {
  119. // console.log("停止")
  120. innerAudioContext.stop();
  121. },
  122. play(e) {
  123. let isplay = e.currentTarget.dataset.play,
  124. index = e.currentTarget.dataset.index;
  125. this.talkList.forEach((i, v) => {
  126. i.is_check = 1
  127. })
  128. // 2 正在播放,1没有播放
  129. if (isplay == 2) {
  130. innerAudioContext.pause();
  131. this.talkList[index].is_check = 1;
  132. } else {
  133. innerAudioContext.src = this.talkList[index].content;
  134. innerAudioContext.play();
  135. this.talkList[index].is_check = 2;
  136. }
  137. this.Aindex = index;
  138. },
  139. }
  140. }
  141. </script>
  142. <style lang="scss">
  143. page {
  144. background-color: #F3F3F3;
  145. font-size: 28rpx;
  146. }
  147. .play {
  148. width: 50rpx;
  149. height: 50rpx;
  150. }
  151. .close {
  152. /* #ifdef MP-WEIXIN */
  153. margin-top: 30rpx;
  154. /* #endif */
  155. }
  156. .box-1 {
  157. background-color: #F3F3F3;
  158. width: 600rpx;
  159. overflow: hidden;
  160. border-radius: 10rpx;
  161. }
  162. .list-box-hader {
  163. width: 100%;
  164. color: #FFFFFF;
  165. }
  166. .list-box-hader image{
  167. width: 100%;
  168. height:100rpx;
  169. }
  170. .talk-list {
  171. /* 消息项,基础类 */
  172. .item {
  173. padding: 20rpx 20rpx 0 20rpx;
  174. align-items: flex-start;
  175. align-content: flex-start;
  176. color: #333;
  177. margin-bottom: 20rpx;
  178. .pic {
  179. width: 92rpx;
  180. height: 92rpx;
  181. border-radius: 50%;
  182. border: #fff solid 1px;
  183. }
  184. .content {
  185. padding: 20rpx;
  186. border-radius: 4px;
  187. max-width: 500rpx;
  188. word-break: break-all;
  189. position: relative;
  190. width: 300rpx;
  191. }
  192. /* 收到的消息 */
  193. &.pull {
  194. .content {
  195. margin-left: 32rpx;
  196. background-color: #6E8FFF;
  197. &::after {
  198. content: '';
  199. display: block;
  200. width: 0;
  201. height: 0;
  202. border-top: 16rpx solid transparent;
  203. border-bottom: 16rpx solid transparent;
  204. border-right: 20rpx solid #6E8FFF;
  205. position: absolute;
  206. top: 30rpx;
  207. left: -18rpx;
  208. }
  209. }
  210. }
  211. }
  212. }
  213. </style>