文章页面

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`)
       }
     }
   }