爱听支付

src/pages/imusic/index.vue

@@ -0,0 +1,111 @@
+<template>
+  <view class="index">
+    <image mode="center" :src="form.pic" />
+    <view class="buy">
+      <button type="buy" circle @click="getSubmit">立即购买</button>
+      <span>
+        <radio :checked="checked" />
+        <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: {},
+      // 是否同意
+      checked: false
+    }
+  },
+  mounted(e) {
+    this.getDetail(e.id)
+  },
+  methods: {
+    getDetail(e) {
+      detail({ id: e }).then(res => {
+        if (res.data.code === 0) {
+          this.form = res.data.data
+        }
+      })
+    },
+
+    // 立即购买
+    getSubmit() {
+      if (this.checked) {
+
+      } else {
+        uni.showToast({
+          title: ''
+        })
+      }
+    }
+  }
+}
+</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: #bdbcbb;
+}
+
+::v-deep uni-radio .uni-radio-input {
+  width: 24rpx;
+  height: 24rpx;
+  background: none;
+}
+</style>