25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

417 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. });
  192. },
  193. methods: {
  194. // 转换时间
  195. formatSeconds(seconds) {
  196. var result = typeof seconds === "string" ? parseFloat(seconds) : seconds;
  197. if (isNaN(result)) return "";
  198. let h = Math.floor(result / 3600) < 10 ?
  199. "0" + Math.floor(result / 3600) :
  200. Math.floor(result / 3600);
  201. let m = Math.floor((result / 60) % 60) < 10 ?
  202. "0" + Math.floor((result / 60) % 60) :
  203. Math.floor((result / 60) % 60) + h * 60;
  204. let s = Math.floor(result % 60) < 10 ?
  205. "0" + Math.floor(result % 60) :
  206. Math.floor(result % 60);
  207. return `${h}:${m}:${s}`;
  208. },
  209. //播放or暂停
  210. operate() {
  211. this.$zaudio.operate();
  212. },
  213. //进度拖到
  214. change(event) {
  215. if (this.renderIsPlay) {
  216. console.log('组件内', event)
  217. this.$zaudio.seek(Math.floor(event.detail.value));
  218. }
  219. },
  220. //快进
  221. stepPlay(value) {
  222. this.$zaudio.stepPlay(value);
  223. },
  224. //切歌
  225. changeplay(count) {
  226. this.$zaudio.changeplay(count);
  227. },
  228. },
  229. beforeDestroy() {
  230. this.$zaudio.playinfo.duration = '00:00:00'
  231. this.$zaudio.playinfo.duration_value = '00:00:00'
  232. //组件卸载时卸载业务逻辑
  233. let action = this.action;
  234. this.$zaudio.syncStateOff(action)
  235. this.$zaudio.stop()
  236. }
  237. };
  238. </script>
  239. <style scoped lang="scss">
  240. @import './index.scss';
  241. // #ifdef MP-WEIXIN
  242. .theme3 .audio-slider {
  243. margin-top: -8px !important;
  244. }
  245. // #endif
  246. @mixin textoverflow() {
  247. display: -webkit-box;
  248. overflow: hidden;
  249. text-overflow: ellipsis;
  250. -webkit-box-orient: vertical;
  251. -webkit-line-clamp: 1;
  252. }
  253. @keyframes rowup {
  254. 0% {
  255. -webkit-transform: translate(-50%, -50%) rotate(0deg);
  256. transform-origin: center center;
  257. }
  258. 100% {
  259. -webkit-transform: translate(-50%, -50%) rotate(360deg);
  260. transform-origin: center center;
  261. }
  262. }
  263. .imt-audios {
  264. position: relative;
  265. width: 100%;
  266. height: 81rpx;
  267. display: flex;
  268. box-sizing: border-box;
  269. background: #fff;
  270. .top {
  271. position: relative;
  272. width: 100rpx;
  273. }
  274. .audio-wrapper {
  275. position: relative;
  276. padding: 0 20rpx;
  277. display: flex;
  278. flex: 1;
  279. color: #fff;
  280. .popup {
  281. position: absolute;
  282. right: 32rpx;
  283. top: -122rpx;
  284. z-index: 100;
  285. width: 136rpx;
  286. height: 122rpx;
  287. display: flex;
  288. align-items: center;
  289. justify-content: center;
  290. flex-direction: column;
  291. background: #fff;
  292. border: 1rpx solid #E0E0E0;
  293. transition: all 0.25s linear;
  294. opacity: 0;
  295. image {
  296. width: 32rpx;
  297. height: 32rpx;
  298. }
  299. text {
  300. margin-top: 10rpx;
  301. color: #333;
  302. font-size: 24rpx;
  303. }
  304. .act-test {
  305. color: #2671E2;
  306. }
  307. }
  308. .close {
  309. opacity: 1;
  310. }
  311. }
  312. .slidebox {
  313. flex-shrink: 0;
  314. display: flex;
  315. align-items: center;
  316. .slide-img {
  317. width: 32rpx;
  318. height: 8rpx;
  319. }
  320. }
  321. /deep/ .uni-slider-tap-area {
  322. padding: 0;
  323. }
  324. /deep/ .uni-slider-wrapper {
  325. min-height: 0;
  326. }
  327. /deep/ .uni-slider-handle-wrapper {
  328. height: 6px;
  329. }
  330. .audio-slider {
  331. flex-grow: 1;
  332. }
  333. .play {
  334. width: 48rpx;
  335. height: 48rpx;
  336. z-index: 99;
  337. background: rgba(0, 0, 0, 0.4);
  338. border-radius: 50%;
  339. position: absolute;
  340. top: 50%;
  341. left: 50%;
  342. transform: translate(-50%, -50%);
  343. &.loading {
  344. width: 48rpx;
  345. height: 48rpx;
  346. animation: rotating_theme3 2s linear infinite;
  347. }
  348. }
  349. }
  350. .audio-flex {
  351. padding: 0 32rpx 0 0;
  352. flex-grow: 1;
  353. display: flex;
  354. align-items: center;
  355. text {
  356. color: #70798D;
  357. }
  358. }
  359. @keyframes rotating {
  360. 0% {
  361. transform: rotateZ(0deg)
  362. }
  363. 100% {
  364. transform: rotateZ(360deg)
  365. }
  366. }
  367. @keyframes rotating_theme3 {
  368. 0% {
  369. transform: translate(-50%, -50%) rotateZ(0deg)
  370. }
  371. 100% {
  372. transform: translate(-50%, -50%) rotateZ(360deg)
  373. }
  374. }
  375. </style>