ohplay_h5/src/pages/content/index.vue

<template>
  <view class='app-container' :style="{ backgroundImage: `url(${form.backgroundImage})` }">
    <view class="content" :style="{ 'padding-bottom': form.buttonFixType === 0 ? '94px' : 0 }">
      <!-- 打开app -->
      <open-app v-if="!inside" @open="getOpenApp" />
      <!-- 页面布局 -->
      <view v-if="form.contentShareLayoutList">
        <view class="item" v-for="item in form.contentShareLayoutList" :key="item.id">
          <!-- 图片 -->
          <img v-if="item.layoutType === 0" :src="item.contentPic" />
          <!-- 音频 -->
          <my-audio v-if="item.layoutType === 1" :ref="`video${item.sort}`" :bg="form.audioBackgroundImage"
            :pic="item.contentPic" :name="item.contentName" :singer="item.contentInfo.singerName"
            :status="item.playStatus" @click="getPlay(item)" />
          <!-- 歌单 、专辑 -->
          <my-list v-if="item.layoutType === 2" :pic="item.contentPic" :name="item.contentName" :data="item.contentInfo"
            :type="item.contentType" @click="getOpen(item)" />
        </view>
      </view>
    </view>
    <!-- 按钮 -->
    <view :class="['footer', form.buttonFixType === 0 ? 'fixed' : '']"
      v-if="inside ? form.isButton == 1 ? true : false : false">
      <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(form.rightButtonForwardType, form, 'rightButton')"
        :style="{ background: form.rightButtonImg ? `url(${form.rightButtonImg}) no-repeat 100% / 100%` : '' }">
        <text>{{ form.rightButtonText }}</text>
      </button>
    </view>
  </view>
</template>

<script>
import { detail } from '@/api/content'
export default {
  data() {
    return {
      // 判断是否为APP内部H5
      inside: getApp().globalData.inside,
      // 表单
      form: {},
      // 跳转地址
      audioOption: {
        8: '/mobile/playAlbumPage',
        10: '/mobile/playSongsPage',
        15: '/mobile/playSongsPage'
      }
    }
  },
  onLoad(e) {
    if (e.articleId) {
      this.getDetail(e.articleId)
    }
  },
  methods: {
    getDetail(articleId) {
      detail({
        articleId: articleId
      }).then(res => {
        if (res.data.code === 0) {
          if (res.data.templateType == 1) {
            // 按sort从小到大排序
            res.data.contentShareLayoutList.sort(function (x, y) {
              return x.sort > y.sort ? 1 : -1
            })
            // 给单音频添加播放状态
            res.data.contentShareLayoutList.map(i => {
              if ([2, 6, 11].includes(i.contentType)) {
                i.playStatus = 2
              }
            })
          }

          this.form = res.data

          // 检测当前是否有正在播放的音频
          if (this.inside) {
            this.getStatus()
          }
        } else {
          uni.showToast({
            icon: 'error',
            title: res.data.message
          })
        }
      })
    },

    // 获取播放状态
    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(item) {
      if (this.inside) {
        let e = item.playStatus !== 1 ? 1 : 2 
        openPage.postMessage(`?page=/mobile/audioPage&audioId=${item.contentInfo.audioId}&audioType=${item.contentInfo.audioType}&platformId=${item.platformId}&playStatus=${e}&openAudioPage=0&cmd=openPage`)
        window['setOpenPage'] = res => {
          this.form.contentShareLayoutList.map(i => i.playStatus = 2)
          item.playStatus = JSON.parse(res).status
        }
      } else {
        this.getOpenApp()
      }
    },

    // 歌单 、专辑
    getOpen(item) {
      if (this.inside) {
        openPage.postMessage(`?page=${this.audioOption[item.contentType]}&audioId=${item.contentInfo.audioId}&audioType=${item.contentInfo.audioType}&platformId=${item.platformId}&openAudioPage=1&cmd=openPage`)
      } else {
        this.getOpenApp()
      }
    },

    // 浏览器H5打开App内部H5
    getOpenApp() {
      this.openApp(`?page=/mobile/webViewPage&url=pages/content/index?articleId=${this.form.id}&cmd=openPage&isNeedLogin=1&title=${this.form.title}`)
    },

    // 底部按钮
    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`)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  display: flex;
  flex-flow: column nowrap;
  word-break: break-all;
  padding: 0;
  font-weight: 100;
  min-height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .content {
    flex: 1;
    padding: 24px 16px;

    .title {
      margin-bottom: 24px;
      color: #FFF;
      font-weight: bold;
    }

    .item {
      margin-bottom: 24px;

      img {
        width: 100%;
      }
    }
  }

  .footer {
    width: 100%;
    height: 94px;
    background: #414141;
    display: flex;
    justify-content: space-around;
    padding-top: 24px;

    button {
      background: linear-gradient(180deg, #A4D099 0%, #78B06A 100%);
      height: 46px;
      line-height: 46px;
      font-size: 16px;
      border-radius: 25px;
      color: #FFF;
      font-weight: bold;
    }

    .left {
      width: 220px;
    }

    .right {
      width: 107px;
    }
  }
}

.fixed {
  position: fixed;
  bottom: 0;
}
</style>