ohplay_h5/src/pages/share/controls.vue

<template>
  <div class="app-container">
    <!-- 背景 -->
    <view class="bg" :style="{'background': `url(${form.icon})no-repeat 100% / cover`}" />
    <!-- 跳转App -->
    <open-app @open="open" />
    <!-- 播控分享 -->
    <view class="play_control">
      <img v-if="channelType !== '1'" class="cover" :src="form.icon" />
      <view v-if="channelType === '1'" class="FM">
        <img :src="form.icon" />
        <text>以上内容来自{{ form.platformId }}</text>
      </view>
      <view class="title">{{ form.title }}</view>
      <view class="name" v-if="channelType === '1'">{{ form.title }}</view>
      <view v-if="channelType !== '1'" class="platform">
        以上内容来自{{ form.platformId }}
      </view>
      <slider min="0" max="100" block-color="#78B06A" block-size="12" activeColor="#78B06A"
        backgroundColor="#727c82" disabled />
      <view class="length">
        <text>00:00:00</text>
        <text>00:00:00</text>
      </view>
      <img class="play_btn" src="@/static/share/play.png" @click="open" />
    </view>
  </div>
</template>

<script>
import { boradcastDetail, podCastProgramDetail } from '@/api/share'
export default {
  data() {
    return {
      channelType: '',
      form: {},
      platFormOptions: [{
        value: 0,
        label: '未知'
      }, {
        value: 1,
        label: '蜻蜓'
      }, {
        value: 2,
        label: '官方电台'
      }, {
        value: 3,
        label: '猫王好听'
      }, {
        value: 4,
        label: '海外电台'
      }, {
        value: 5,
        label: '音乐随身听'
      }, {
        value: 6,
        label: 'qq音乐'
      }, {
        value: 7,
        label: 'HiFIVE音乐'
      }, {
        value: 8,
        label: '看见音乐'
      }]
    }
  },
  onLoad(e) {
    if (e.audioId) {
      this.channelType = e.channelType
      if (e.channelType === '1') {
        boradcastDetail({
          audioId: e.audioId
        }).then(res => {
          if (res.data.code === 0) {
            this.form = res.data.data
            this.form.platformId = this.platFormOptions.find(i => i.value === res.data.data.platformId).label
          }
        })
      } else {
        podCastProgramDetail({
          audioId: e.audioId
        }).then(res => {
          if (res.data.code === 0) {
            this.form = res.data.data
            this.form.platformId = this.platFormOptions.find(i => i.value === res.data.data.platformId).label
            this.form.icon = res.data.data.audioPic
          }
        })
      }
    }
  },
  methods: {
    // 打开app
    open() {
      // this.openApp(3, this.form.audioId)
      this.openApp(`?page=/mobile/audioPage&audioId=${this.form.audioId}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 450rpx;
  filter: brightness(0.5) blur(16px);
  z-index: -1;
}

.play_control {
  text-align: center;
  margin-top: 32rpx;

  .cover {
    width: 100%;
    border-radius: 16rpx;
    margin-bottom: 48rpx;
  }

  .title {
    font-size: 48rpx;
    font-weight: 600;
  }

  .name {
    font-size: 28rpx;
    color: #727c82;
    margin: 20rpx 0;
  }

  .platform {
    font-size: 22rpx;
    color: #727c82;
    line-height: 64rpx;
  }

  .length {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20rpx;
    color: #727c82;
  }

  .FM {
    width: 558rpx;
    height: 606rpx;
    border-radius: 16rpx;
    padding: 32rpx 32rpx 0;
    margin: 0 auto 32rpx auto;
    background: rgba(255, 255, 255, 0.05);

    img {
      width: 494rpx;
      height: 494rpx;
      border-radius: 16rpx;
    }

    text {
      font-size: 22rpx;
      color: rgba(255, 255, 255, 0.4);
      margin-top: 20rpx;
      float: left;
    }
  }

  .play_btn {
    width: 112rpx;
    height: 112rpx;
    margin-top: 48rpx;
  }
}
</style>