公共组件

src/components/my-audio/my-audio.vue

@@ -6,7 +6,8 @@
       <view class="song">{{ name }}</view>
       <view class="singer">暂无歌手名</view>
     </view>
-    <image class="btn" src="../../static/play.png" />
+    <image v-if="newStatus === 1" class="btn" src="../../static/stop.png" @click="getPlay" />
+    <image v-else class="btn" src="../../static/play.png" @click="getPlay" />
   </view>
 </template>
 
@@ -15,15 +16,23 @@ export default {
   props: {
     bg: String,
     pic: String,
-    name: String
+    name: String,
+    status: Number
   },
   data() {
     return {
-
+      newStatus: this.status
     }
   },
-  mounted() {
-
+  watch: {
+    status(val) {
+      this.newStatus = val
+    }
+  },
+  methods: {
+    getPlay() {
+      this.$emit('click', this.newStatus)
+    }
   }
 }
 </script>

src/components/my-list/my-list.vue

@@ -2,14 +2,15 @@
   <view class="box">
     <view class="info">
       <view class="name">{{ name }}</view>
-      <button>收听{{ audioOption[type] }}</button>
+      <button @click="getPlay">收听{{ audioOption[type] }}</button>
     </view>
     <view class="list">
-      <ol>
+      <ol v-if="data.childList.length > 0">
         <li v-for="(item, index) in data.childList" :key="item.id">{{ index + 1 }}、{{ item.audioName }}</li>
       </ol>
-      <img class="pic" :src="pic" />
+      <view v-else>{{ audioOption[type] }}暂无内容</view>
     </view>
+    <img class="pic" :src="pic" />
   </view>
 </template>
 
@@ -30,11 +31,10 @@ export default {
       }
     }
   },
-  mounted() {
-    
-  },
   methods: {
-
+    getPlay() {
+      this.$emit('click')
+    }
   }
 }
 </script>
@@ -47,6 +47,7 @@ export default {
   background: #EEE;
   border-radius: 8px;
   color: #000;
+  position: relative;
 
   .info {
     display: flex;
@@ -77,11 +78,11 @@ export default {
     display: flex;
     justify-content: space-between;
     position: relative;
+    font-size: 14px;
+    font-weight: bold;
 
     ol {
       padding-inline-start: 18px;
-      font-size: 14px;
-      font-weight: bold;
       padding: 0;
 
       li {
@@ -92,15 +93,15 @@ export default {
         text-overflow: ellipsis;
       }
     }
+  }
 
-    .pic {
-      position: absolute;
-      right: 0;
-      bottom: 8px;
-      width: 100px;
-      height: 100px;
-      border-radius: 8px;
-    }
+  .pic {
+    position: absolute;
+    right: 16px;
+    bottom: 24px;
+    width: 100px;
+    height: 100px;
+    border-radius: 8px;
   }
 }
 </style>