AI销管
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.
 
 
 
 

415 line
9.9 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/pausebtn.png')" alt="" @click="operate" class="play"
  10. v-if="renderData('paused')"></image>
  11. <image :src="require('./static/playbtn.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/pausebtn.png')" alt="" @click="operate" class="play"
  42. v-if="renderData('paused')"></image>
  43. <image :src="require('./static/playbtn.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/pausebtn.png')" alt="" @click="operate" class="play"
  68. v-if="renderData('paused')"></image>
  69. <image :src="require('./static/playbtn.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: '#2671E2'
  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. this.$zaudio.seek(event.detail.value);
  217. }
  218. },
  219. //快进
  220. stepPlay(value) {
  221. this.$zaudio.stepPlay(value);
  222. },
  223. //切歌
  224. changeplay(count) {
  225. this.$zaudio.changeplay(count);
  226. }
  227. },
  228. beforeDestroy() {
  229. this.$zaudio.playinfo.duration = '00:00:00'
  230. this.$zaudio.playinfo.duration_value = '00:00:00'
  231. //组件卸载时卸载业务逻辑
  232. let action = this.action;
  233. this.$zaudio.syncStateOff(action)
  234. this.$zaudio.stop()
  235. }
  236. };
  237. </script>
  238. <style scoped lang="scss">
  239. @import './index.scss';
  240. // #ifdef MP-WEIXIN
  241. .theme3 .audio-slider {
  242. margin-top: -8px !important;
  243. }
  244. // #endif
  245. @mixin textoverflow() {
  246. display: -webkit-box;
  247. overflow: hidden;
  248. text-overflow: ellipsis;
  249. -webkit-box-orient: vertical;
  250. -webkit-line-clamp: 1;
  251. }
  252. @keyframes rowup {
  253. 0% {
  254. -webkit-transform: translate(-50%, -50%) rotate(0deg);
  255. transform-origin: center center;
  256. }
  257. 100% {
  258. -webkit-transform: translate(-50%, -50%) rotate(360deg);
  259. transform-origin: center center;
  260. }
  261. }
  262. .imt-audios {
  263. position: relative;
  264. width: 100%;
  265. height: 81rpx;
  266. display: flex;
  267. box-sizing: border-box;
  268. background: #fff;
  269. .top {
  270. position: relative;
  271. width: 100rpx;
  272. }
  273. .audio-wrapper {
  274. position: relative;
  275. padding: 0 20rpx;
  276. display: flex;
  277. flex: 1;
  278. color: #fff;
  279. .popup {
  280. position: absolute;
  281. right: 32rpx;
  282. top: -122rpx;
  283. z-index: 100;
  284. width: 136rpx;
  285. height: 122rpx;
  286. display: flex;
  287. align-items: center;
  288. justify-content: center;
  289. flex-direction: column;
  290. background: #fff;
  291. border: 1rpx solid #E0E0E0;
  292. transition: all 0.25s linear;
  293. opacity: 0;
  294. image {
  295. width: 32rpx;
  296. height: 32rpx;
  297. }
  298. text {
  299. margin-top: 10rpx;
  300. color: #333;
  301. font-size: 24rpx;
  302. }
  303. .act-test {
  304. color: #2671E2;
  305. }
  306. }
  307. .close {
  308. opacity: 1;
  309. }
  310. }
  311. .slidebox {
  312. flex-shrink: 0;
  313. display: flex;
  314. align-items: center;
  315. .slide-img {
  316. width: 32rpx;
  317. height: 8rpx;
  318. }
  319. }
  320. /deep/ .uni-slider-tap-area {
  321. padding: 0;
  322. }
  323. /deep/ .uni-slider-wrapper {
  324. min-height: 0;
  325. }
  326. /deep/ .uni-slider-handle-wrapper {
  327. height: 6px;
  328. }
  329. .audio-slider {
  330. flex-grow: 1;
  331. }
  332. .play {
  333. width: 44rpx;
  334. height: 44rpx;
  335. z-index: 99;
  336. border-radius: 50%;
  337. position: absolute;
  338. top: 50%;
  339. left: 50%;
  340. transform: translate(-50%, -50%);
  341. &.loading {
  342. width: 48rpx;
  343. height: 48rpx;
  344. animation: rotating_theme3 2s linear infinite;
  345. }
  346. }
  347. }
  348. .audio-flex {
  349. padding: 0 32rpx 0 0;
  350. flex-grow: 1;
  351. display: flex;
  352. align-items: center;
  353. text {
  354. color: #70798D;
  355. }
  356. }
  357. @keyframes rotating {
  358. 0% {
  359. transform: rotateZ(0deg)
  360. }
  361. 100% {
  362. transform: rotateZ(360deg)
  363. }
  364. }
  365. @keyframes rotating_theme3 {
  366. 0% {
  367. transform: translate(-50%, -50%) rotateZ(0deg)
  368. }
  369. 100% {
  370. transform: translate(-50%, -50%) rotateZ(360deg)
  371. }
  372. }
  373. </style>