ohplay_h5/src/components/open-app/open-app.vue

<template>
  <view>
    <view class="open_App">
      <view style="display: flex; align-items: center;">
        <img src="@/static/logo.png" />
        <text style="font-weight: 600;">OhPlay猫王妙播</text>
      </view>
      <uni-button type="submit" @click="open">打开App</uni-button>
    </view>
    <view style="height: 88rpx" v-if="isShow" />
  </view>
</template>

<script>
export default {
  props: {
    // 界面类型
    page: {
      type: Number,
      default: null
    },
    // 频道类型
    channel: {
      type: Number,
      default: null
    },
    // 音频类型
    audioType: {
      type: Number,
      default: null
    },
    // 音频Id
    audioId: {
      type: Number,
      default: null
    },
    // 是否覆盖
    isShow: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    channel(val) {
      return val
    },
    audioType(val) {
      return val
    },
    audioId(val) {
      return val
    }
  },
  methods: {
    // 打开app
    open() {
      this.openApp(this.page, this.channel, this.audioType, this.audioId)
    }
  }
}
</script>

<style lang="scss" scoped>
.open_App {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120rpx;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px);
  padding: 0 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 99;

  img {
    width: 64rpx;
    height: 64rpx;
    border-radius: 10rpx;
  }

  text {
    font-size: 32rpx;
    margin-left: 20rpx;
  }

  uni-button {
    width: 160rpx;
    height: 56rpx;
    line-height: 56rpx;
    font-size: 26rpx;
    border-radius: 50rpx;
    margin: 0;
  }
}
</style>