my-audio.vue 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <template>
  2. <!-- 播放器 -->
  3. <view class="audio" :style="{ 'background': (bg ? `url(${bg}) no-repeat 100% / 100%` : '#EEE') }">
  4. <image class="pic" :src="pic" />
  5. <view class="info">
  6. <view class="song">{{ name }}</view>
  7. <view class="singer">{{ singer ? singer : '暂无歌手名' }}</view>
  8. </view>
  9. <image v-if="newStatus !== 1" class="btn" src="../../static/play.png" @click="getPlay" />
  10. <image v-else class="btn" src="../../static/stop.png" @click="getPlay" />
  11. </view>
  12. </template>
  13. <script>
  14. export default {
  15. props: {
  16. bg: String,
  17. pic: String,
  18. name: String,
  19. status: Number,
  20. singer: String
  21. },
  22. data() {
  23. return {
  24. newStatus: this.status
  25. }
  26. },
  27. watch: {
  28. status(val) {
  29. this.newStatus = val
  30. }
  31. },
  32. methods: {
  33. getPlay() {
  34. this.$emit('click')
  35. }
  36. }
  37. }
  38. </script>
  39. <style lang="scss" scoped>
  40. .audio {
  41. width: 100%;
  42. height: 104px;
  43. padding: 8px 16px 8px 8px;
  44. border-radius: 8px;
  45. display: flex;
  46. align-items: center;
  47. font-weight: bold;
  48. .pic {
  49. width: 88px;
  50. height: 88px;
  51. border-radius: 8px;
  52. margin-right: 16px;
  53. }
  54. .info {
  55. width: calc(100% - 144px);
  56. color: #000;
  57. .song {
  58. font-size: 16px;
  59. margin-bottom: 16px;
  60. overflow: hidden;
  61. white-space: nowrap;
  62. text-overflow: ellipsis;
  63. }
  64. .singer {
  65. font-size: 12px;
  66. opacity: 0.6;
  67. overflow: hidden;
  68. white-space: nowrap;
  69. text-overflow: ellipsis;
  70. }
  71. }
  72. .btn {
  73. width: 40px;
  74. height: 40px;
  75. }
  76. }
  77. </style>