ohplay_h5/src/pages/content/index.vue

<template>
  <view class='app-container' :style="{ background: `url(${form.backgroundImage}) no-repeat 100% / cover` }">
    <view class="content" :style="{ 'padding-bottom': form.buttonFixType === 0 ? '94px' : 0 }">
      <!-- 标题 -->
      <view class="title">{{ form.title }}</view>
      <!-- 页面布局 -->
      <view v-if="form.contentShareLayoutList">
        <view class="item" v-for="item in form.contentShareLayoutList" :key="item.id">
          <!-- 图片 -->
          <img v-if="item.layoutType === 0" mode="aspectFit" :src="item.contentPic" />
          <!-- 音频 -->
          <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" @click="getOpen(item)" />
        </view>
      </view>
    </view>
    <!-- 按钮 -->
    <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(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 {
      // 表单
      form: {},
      // 是否显示底部按钮
      isShow: false,
      // 跳转地址
      audioOption: {
        8: '/mobile/playAlbumPage',
        10: '/mobile/playSongsPage',
        15: '/mobile/playSongsPage'
      },
      activeAudio: {}
    }
  },
  onLoad(e) {
    if (e.articleId) {
      this.getDetail(e.articleId)
    }
  },
  methods: {
    getDetail(articleId) {
      detail({
        articleId: articleId
      }).then(res => {
        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
        }
      })
    },

    // 获取播放状态
    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
      }
    },

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

    // 底部按钮
    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%;

  .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>