You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

418 lines
10 KiB

  1. <template>
  2. <view class="imt-audio" :class="[`${theme}`]" v-if="audiolist.length > 0">
  3. <template v-if="theme == 'theme4'">
  4. <view class="imt-audios">
  5. <view class="top">
  6. <view class="audio-control-wrapper">
  7. <image :src="require('./static/loading.png')" v-if="loading" class="play loading"></image>
  8. <template v-else>
  9. <image :src="require('./static/playbtn.png')" alt="" @click="operate" class="play"
  10. v-if="renderData('paused')"></image>
  11. <image :src="require('./static/pausebtn.png')" alt="" @click="operate" class="play" v-else>
  12. </image>
  13. </template>
  14. </view>
  15. </view>
  16. <view class="audio-wrapper">
  17. <view class="audio-flex">
  18. <text>
  19. {{renderData('current')}}
  20. </text>
  21. <slider class="audio-slider" :activeColor="themeColor" block-size="16"
  22. :value="renderData('current_value')" :max="renderData('duration_value')" @change="change"
  23. :disabled="!renderIsPlay"></slider>
  24. <text v-if="!duration">
  25. {{renderData('duration')}}
  26. </text>
  27. <text v-else>{{ duration }}</text>
  28. </view>
  29. </view>
  30. </view>
  31. </template>
  32. <template v-if="theme == 'theme3'">
  33. <slider class="audio-slider" :activeColor="themeColor" block-size="0" :value="renderData('current_value')"
  34. :max="renderData('duration_value')" @change="change" :disabled="!renderIsPlay"></slider>
  35. <view class="top">
  36. <view class="audio-control-wrapper">
  37. <image :src="renderData('coverImgUrl')" mode="aspectFill" class="cover"
  38. :class="{ on: !renderData('paused') }"></image>
  39. <image :src="require('./static/loading.png')" v-if="loading" class="play loading"></image>
  40. <template v-else>
  41. <image :src="require('./static/playbtn.png')" alt="" @click="operate" class="play"
  42. v-if="renderData('paused')"></image>
  43. <image :src="require('./static/pausebtn.png')" alt="" @click="operate" class="play" v-else>
  44. </image>
  45. </template>
  46. </view>
  47. </view>
  48. <view class="audio-wrapper">
  49. <view class="titlebox">
  50. <view class="title">{{ renderData('title') }}</view>
  51. <view class="singer">{{ renderData('singer') }}</view>
  52. </view>
  53. <view class="slidebox">
  54. <view>{{ renderData('current') }}/ {{ renderData('duration') }}</view>
  55. <view>
  56. <text @click="changeplay(-1)">上一首</text>
  57. <text @click="changeplay(1)">下一首</text>
  58. </view>
  59. </view>
  60. </view>
  61. </template>
  62. <template v-if="theme == 'theme2'">
  63. <view class="top">
  64. <view class="audio-control-wrapper" :style="{backgroundImage: `url(${renderData('coverImgUrl')})`}">
  65. <image :src="require('./static/loading.png')" v-if="loading" class="play loading"></image>
  66. <template v-else>
  67. <image :src="require('./static/playbtn.png')" alt="" @click="operate" class="play"
  68. v-if="renderData('paused')"></image>
  69. <image :src="require('./static/pausebtn.png')" alt="" @click="operate" class="play" v-else>
  70. </image>
  71. </template>
  72. </view>
  73. <view>
  74. <view class="title">
  75. <text>{{ renderData('title') }}</text>
  76. <view class="audio-number">{{ renderData('current') }}/{{ renderData('duration') }}</view>
  77. </view>
  78. <view class="singer">{{ renderData('singer') }}</view>
  79. </view>
  80. </view>
  81. </template>
  82. <template v-if="theme == 'theme1'">
  83. <view class="top">
  84. <view class="audio-control-wrapper">
  85. <image :src="renderData('coverImgUrl')" mode="aspectFill" class="cover"
  86. :class="{ on: !renderData('paused') }"></image>
  87. </view>
  88. <view>
  89. <view class="title">{{ renderData('title') }}</view>
  90. <view class="singer">{{ renderData('singer') }}</view>
  91. </view>
  92. </view>
  93. <view class="audio-wrapper">
  94. <view class="audio-number">{{ renderData('current') }}</view>
  95. <slider class="audio-slider" :activeColor="themeColor" block-size="16"
  96. :value="renderData('current_value')" :max="renderData('duration_value')" @change="change"
  97. :disabled="!renderIsPlay"></slider>
  98. <view class="audio-number">{{ renderData('duration') }}</view>
  99. </view>
  100. <view class="audio-button-box">
  101. <!-- 块退15s -->
  102. <image :src="require('./static/prev.png')" class="prevbtn" @click="stepPlay(-15)" mode="widthFix">
  103. </image>
  104. <!-- 上一首 -->
  105. <image :src="require('./static/go.png')" class="prevplay" @click="changeplay(-1)" mode="widthFix">
  106. </image>
  107. <div class="playbox">
  108. <image :src="require('./static/loading2.png')" v-if="loading" class="play loading"></image>
  109. <template v-else>
  110. <!-- 播放 -->
  111. <image :src="require('./static/playbtn2.png')" alt="" @click="operate" class="play"
  112. v-if="renderData('paused')"></image>
  113. <!-- 暂停 -->
  114. <image :src="require('./static/pausebtn2.png')" alt="" @click="operate" class="pause" v-else>
  115. </image>
  116. </template>
  117. </div>
  118. <!-- 下一首 -->
  119. <image :src="require('./static/go.png')" class="nextplay" @click="changeplay(1)" mode="widthFix">
  120. </image>
  121. <!-- 快进15s -->
  122. <image :src="require('./static/next.png')" class="nextbtn" @click="stepPlay(15)" mode="widthFix">
  123. </image>
  124. </view>
  125. </template>
  126. </view>
  127. </template>
  128. <script>
  129. export default {
  130. props: {
  131. theme: {
  132. type: String, // 主题 'theme1' or 'theme2'
  133. default: 'theme1'
  134. },
  135. themeColor: {
  136. type: String,
  137. default: '#42b983'
  138. },
  139. duration: {
  140. type: String,
  141. default: ""
  142. }
  143. },
  144. data() {
  145. return {
  146. playinfo: this.$zaudio.playinfo,
  147. audiolist: this.$zaudio.audiolist,
  148. paused: this.$zaudio.paused,
  149. renderIsPlay: this.$zaudio.renderIsPlay,
  150. audio: this.$zaudio.renderinfo,
  151. loading: this.$zaudio.loading,
  152. action: Symbol('zaudio')
  153. };
  154. },
  155. computed: {
  156. renderData() {
  157. return name => {
  158. if (!this.renderIsPlay) {
  159. if (name == 'paused') {
  160. return true;
  161. }
  162. return this.audio[name];
  163. } else {
  164. if (name == 'paused') {
  165. return this.paused;
  166. }
  167. return this.playinfo[name];
  168. }
  169. };
  170. }
  171. },
  172. mounted() {
  173. this.$nextTick(() => {
  174. let action = this.action;
  175. this.$zaudio.syncStateOn(action, ({
  176. audiolist,
  177. paused,
  178. playinfo,
  179. renderIsPlay,
  180. renderinfo,
  181. loading,
  182. }) => {
  183. this.audiolist = audiolist;
  184. this.paused = paused;
  185. this.playinfo = playinfo;
  186. this.renderIsPlay = renderIsPlay;
  187. this.audio = renderinfo;
  188. this.loading = loading;
  189. });
  190. this.$zaudio.syncRender()
  191. console.log(this.$zaudio)
  192. });
  193. },
  194. methods: {
  195. // 转换时间
  196. formatSeconds(seconds) {
  197. var result = typeof seconds === "string" ? parseFloat(seconds) : seconds;
  198. if (isNaN(result)) return "";
  199. let h = Math.floor(result / 3600) < 10 ?
  200. "0" + Math.floor(result / 3600) :
  201. Math.floor(result / 3600);
  202. let m = Math.floor((result / 60) % 60) < 10 ?
  203. "0" + Math.floor((result / 60) % 60) :
  204. Math.floor((result / 60) % 60) + h * 60;
  205. let s = Math.floor(result % 60) < 10 ?
  206. "0" + Math.floor(result % 60) :
  207. Math.floor(result % 60);
  208. return `${h}:${m}:${s}`;
  209. },
  210. //播放or暂停
  211. operate() {
  212. this.$zaudio.operate();
  213. },
  214. //进度拖到
  215. change(event) {
  216. if (this.renderIsPlay) {
  217. console.log('组件内', event)
  218. this.$zaudio.seek(Math.floor(event.detail.value));
  219. }
  220. },
  221. //快进
  222. stepPlay(value) {
  223. this.$zaudio.stepPlay(value);
  224. },
  225. //切歌
  226. changeplay(count) {
  227. this.$zaudio.changeplay(count);
  228. },
  229. },
  230. beforeDestroy() {
  231. this.$zaudio.playinfo.duration = '00:00:00'
  232. this.$zaudio.playinfo.duration_value = '00:00:00'
  233. //组件卸载时卸载业务逻辑
  234. let action = this.action;
  235. this.$zaudio.syncStateOff(action)
  236. this.$zaudio.stop()
  237. }
  238. };
  239. </script>
  240. <style scoped lang="scss">
  241. @import './index.scss';
  242. // #ifdef MP-WEIXIN
  243. .theme3 .audio-slider {
  244. margin-top: -8px !important;
  245. }
  246. // #endif
  247. @mixin textoverflow() {
  248. display: -webkit-box;
  249. overflow: hidden;
  250. text-overflow: ellipsis;
  251. -webkit-box-orient: vertical;
  252. -webkit-line-clamp: 1;
  253. }
  254. @keyframes rowup {
  255. 0% {
  256. -webkit-transform: translate(-50%, -50%) rotate(0deg);
  257. transform-origin: center center;
  258. }
  259. 100% {
  260. -webkit-transform: translate(-50%, -50%) rotate(360deg);
  261. transform-origin: center center;
  262. }
  263. }
  264. .imt-audios {
  265. position: relative;
  266. width: 100%;
  267. height: 81rpx;
  268. display: flex;
  269. box-sizing: border-box;
  270. background: #fff;
  271. .top {
  272. position: relative;
  273. width: 100rpx;
  274. }
  275. .audio-wrapper {
  276. position: relative;
  277. padding: 0 20rpx;
  278. display: flex;
  279. flex: 1;
  280. color: #fff;
  281. .popup {
  282. position: absolute;
  283. right: 32rpx;
  284. top: -122rpx;
  285. z-index: 100;
  286. width: 136rpx;
  287. height: 122rpx;
  288. display: flex;
  289. align-items: center;
  290. justify-content: center;
  291. flex-direction: column;
  292. background: #fff;
  293. border: 1rpx solid #E0E0E0;
  294. transition: all 0.25s linear;
  295. opacity: 0;
  296. image {
  297. width: 32rpx;
  298. height: 32rpx;
  299. }
  300. text {
  301. margin-top: 10rpx;
  302. color: #333;
  303. font-size: 24rpx;
  304. }
  305. .act-test {
  306. color: #2671E2;
  307. }
  308. }
  309. .close {
  310. opacity: 1;
  311. }
  312. }
  313. .slidebox {
  314. flex-shrink: 0;
  315. display: flex;
  316. align-items: center;
  317. .slide-img {
  318. width: 32rpx;
  319. height: 8rpx;
  320. }
  321. }
  322. /deep/ .uni-slider-tap-area {
  323. padding: 0;
  324. }
  325. /deep/ .uni-slider-wrapper {
  326. min-height: 0;
  327. }
  328. /deep/ .uni-slider-handle-wrapper {
  329. height: 6px;
  330. }
  331. .audio-slider {
  332. flex-grow: 1;
  333. }
  334. .play {
  335. width: 48rpx;
  336. height: 48rpx;
  337. z-index: 99;
  338. background: rgba(0, 0, 0, 0.4);
  339. border-radius: 50%;
  340. position: absolute;
  341. top: 50%;
  342. left: 50%;
  343. transform: translate(-50%, -50%);
  344. &.loading {
  345. width: 48rpx;
  346. height: 48rpx;
  347. animation: rotating_theme3 2s linear infinite;
  348. }
  349. }
  350. }
  351. .audio-flex {
  352. padding: 0 32rpx 0 0;
  353. flex-grow: 1;
  354. display: flex;
  355. align-items: center;
  356. text {
  357. color: #70798D;
  358. }
  359. }
  360. @keyframes rotating {
  361. 0% {
  362. transform: rotateZ(0deg)
  363. }
  364. 100% {
  365. transform: rotateZ(360deg)
  366. }
  367. }
  368. @keyframes rotating_theme3 {
  369. 0% {
  370. transform: translate(-50%, -50%) rotateZ(0deg)
  371. }
  372. 100% {
  373. transform: translate(-50%, -50%) rotateZ(360deg)
  374. }
  375. }
  376. </style>