ohplay_h5/src/pages/imusic/index.vue

<template>
  <view class="index">
    <image mode="center" :src="form.pic" />
    <view class="buy">
      <button type="buy" circle @click="getSubmit">立即购买</button>
      <span>
        <radio-group @change="getChange">
          <radio :value="value" />
        </radio-group>
        <text>购买即视为同意</text>
        <navigator url="/pages/imusic/agreement">《场景歌单付费协议》</navigator>
        <navigator url="/pages/imusic/service">《音乐服务许可协议》</navigator>
      </span>
    </view>
  </view>
</template>

<script>
import { detail } from '@/api/imusic.js'
export default {
  data() {
    return {
      form: {},
      // 是否同意
      value: '0',
      id: ''
    }
  },
  onLoad(e) {
    if (e.id) {
      this.getDetail(e.id)
      this.id = e.id
    }
  },
  methods: {
    getDetail(e) {
      detail({ id: e }).then(res => {
        if (res.data.code === 0) {
          this.form = res.data.data
        }
      })
    },

    getChange() {
      this.value = '1'
    },

    // 立即购买
    getSubmit() {
      if (this.value === '1') {
        clickPay.postMessage(`{\"id\":\"${this.id}\", \"type\":15}`)
      } else {
        uni.showToast({
          title: '请先阅读并勾选协议',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.index {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
}

uni-image {
  width: 100%;
  height: 100%;
}

.buy {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 232rpx;
  overflow: hidden;
}

.buy::before {
  content: '';
  display: block;
  height: 232rpx;
  background: rgba(18, 18, 18, 0.4);
  backdrop-filter: blur(16rpx);
}

button {
  width: 92%;
  font-weight: bold;
  position: absolute;
  top: 24rpx;
  left: 50%;
  transform: translate(-50%);
}

navigator {
  display: inline;
  color: #FFF;
}

span {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 60rpx;
  width: 100%;
  text-align: center;
  font-size: 24rpx;
  color: #d5d5d5;
}

::v-deep uni-radio .uni-radio-input {
  width: 24rpx;
  height: 24rpx;
  background: none;
}
</style>