Merge branch 'develop/3.1.4' into test

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>

src/pages/content/index.vue

@@ -9,22 +9,21 @@
           <!-- 图片 -->
           <img v-if="item.layoutType === 0" mode="aspectFit" :src="item.contentPic" />
           <!-- 音频 -->
-          <!--  -->
-          <my-audio v-if="item.layoutType === 1" :bg="form.audioBackgroundImage" :pic="item.contentPic"
-            :name="item.contentName" />
-          <!-- 歌单 / 广播 -->
+          <my-audio v-if="item.layoutType === 1" :ref="`video${item.sort}`" :bg="form.audioBackgroundImage"
+            :pic="item.contentPic" :name="item.contentName" :status="item.playStatus" @click="getPlay($event, item)" />
+          <!-- 歌单 、专辑 -->
           <my-list v-if="item.layoutType === 2" :pic="item.contentPic" :name="item.contentName" :data="item.contentInfo"
-            :type="item.contentType" />
+            :type="item.contentType" @click="getOpen(item)" />
         </view>
       </view>
     </view>
     <!-- 按钮 -->
-    <view :class="['footer', form.buttonFixType === 0 ? 'fixed' : '']" v-if="form.isButton === 1">
-      <button class="left" @click="getClick('left', form.leftButtonForwardType)"
+    <view :class="['footer', form.buttonFixType === 0 ? 'fixed' : '']">
+      <button class="left" @click="getClick(form.leftButtonForwardType, form, 'leftButton')"
         :style="{ background: form.leftButtonImg ? `url(${form.leftButtonImg}) no-repeat 100% / 100%` : '' }">
         <text>{{ form.leftButtonText }}</text>
       </button>
-      <button class="right" @click="getClick('right', form.rightButtonForwardType)"
+      <button class="right" @click="getClick(form.rightButtonForwardType, form, 'rightButton')"
         :style="{ background: form.rightButtonImg ? `url(${form.rightButtonImg}) no-repeat 100% / 100%` : '' }">
         <text>{{ form.rightButtonText }}</text>
       </button>
@@ -37,38 +36,87 @@ import { detail } from '@/api/content'
 export default {
   data() {
     return {
-      form: {}
+      // 表单
+      form: {},
+      // 是否显示底部按钮
+      isShow: false,
+      // 跳转地址
+      audioOption: {
+        8: '/mobile/playAlbumPage',
+        10: '/mobile/playSongsPage',
+        15: '/mobile/playSongsPage'
+      },
+      activeAudio: {}
     }
   },
-  mounted() {
-    this.getDetail()
-    // let ua = 
-    console.log(window.navigator.userAgent.toLowerCase());
+  onLoad(e) {
+    if (e.articleId) {
+      this.getDetail(e.articleId)
+    }
   },
   methods: {
-    getDetail() {
+    getDetail(articleId) {
       detail({
-        articleId: '1711677595252297728'
+        articleId: articleId
       }).then(res => {
-        console.log(res.data.data);
         if (res.data.code === 0) {
+          // 按sort从小到大排序
+          res.data.data.contentShareLayoutList.sort(function (x, y) {
+            return x.sort > y.sort ? 1 : -1
+          })
+          // 给单音频添加播放状态
+          res.data.data.contentShareLayoutList.map(i => {
+            if ([2, 6, 11].includes(i.contentType)) {
+              i.playStatus = 2
+            }
+          })
           this.form = res.data.data
+          // 检测当前是否有正在播放的音频
+          this.getStatus()
+          // 非APP内部H5底部按钮隐藏
+          this.isShow = JSON.stringify(getApp().globalData.userInfo) == '{}' ? false : this.form.isButton === 1 ? true : false
         }
       })
     },
 
-    // 底部按钮
-    getClick(key, type){
-      if(key === 'left') {
-        if(type === 0) {
+    // 获取播放状态
+    getStatus() {
+      playStatus.postMessage(`获取当前播放状态`)
+      window['setOpenPage'] = res => {
+        let e = JSON.parse(res)
+        this.form.contentShareLayoutList.find(i => {
+          if (i.contentId == e.audioId) {
+            i.playStatus = e.status
+          }
+        })
+      }
+    },
+
+    // 单个音频
+    getPlay(e, item) {
+      let status = e === 2 ? 1 : 2
+      openPage.postMessage(`?page=/mobile/audioPage&audioId=${item.contentInfo.audioId}&audioType=${item.contentInfo.audioType}&platformId=${item.platformId}&openAudioPage=0&cmd=openPage&playStatus=${status}`)
+      window['setOpenPage'] = res => {
+        item.playStatus = JSON.parse(res).status
+      }
+    },
 
-        }else if(type === 1) {
+    // 歌单 、专辑
+    getOpen(item) {
+      openPage.postMessage(`?page=${this.audioOption[item.contentType]}&audioId=${item.contentInfo.audioId}&audioType=${item.contentInfo.audioType}&platformId=${item.platformId}&openAudioPage=1&cmd=openPage`)
+    },
 
-        }else{
-          this.openApp('page=/mobile/channelSinglePage&channel=12&channelId=1641275896369385483')
-        }
-      }else{
-        
+    // 底部按钮
+    getClick(type, form, key) {
+      if (type === 0) {
+        // H5内链
+        window.location.href = form[`${key}ForwardUrl`]
+      } else if (type === 1) {
+        // App跳转音频合集
+        openPage.postMessage(`?page=${this.audioOption[form[`${key}ContentType`]]}&audioId=${form[`${key}ContentId`]}&audioType=${form[`${key}ContentType`]}&playformId=${form[`${key}PlatformId`]}&openAudioPage=1&cmd=openPage`)
+      } else {
+        // 分享
+        openShare.postMessage(`?contentId=${form.id}&shareType=-4`)
       }
     }
   }