ohplay_h5/src/pages/activity/index.vue

<template>
  <view class='app-container'>
    <image :src="pic" mode="aspectFill" />
    <button class="submit" type="submit" circle @click="getSubmit">立即兑换</button>

    <!-- 弹窗 -->
    <uni-popup ref="popup" type="center" :is-mask-click="false">
      <view v-if="isShow" class="popup">
        <h3>兑换成功</h3>
        <view class="center">{{ content }}</view>
        <button type="submit" circle @click="getClose">确定</button>
        <span>该套餐内容仅可在WIFI/移动数据模式下收听</span>
      </view>
      <view v-else class="popup-catch">
        <view class="center">{{ content }}</view>
        <button type="submit" circle @click="getClose">确定</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { detail, submit } from '@/api/activity.js'
export default {
  data() {
    return {
      pic: '',
      form: {
        activityId: '',
        clientType: getApp().globalData.userInfo.deviceClientType,
        deviceMac: getApp().globalData.userInfo.deviceMac,
        type: getApp().globalData.deviceInfo.deviceMode
      },
      // 弹窗内容
      content: '',
      // 兑换成功
      isShow: false
    }
  },
  onLoad(e) {
    this.form.activityId = e.activityId
    this.getDetail()
  },
  methods: {
    getDetail() {
      detail({
        activityId: this.form.activityId
      }).then(res => {
        if (res.data.code === 0) {
          this.pic = res.data.data.pic
        } else {
          uni.showToast({
            title: res.data.message,
            icon: 'error',
            duration: 2000
          })
        }
      })
    },

    // 立即领取
    getSubmit() {
      this.$refs.popup.open()
      if (getApp().globalData.deviceInfo.deviceMode == 2 && getApp().globalData.deviceInfo.deviceMode == 4) {
        submit(this.form).then(res => {
          if (res.data.code === 0) {
            this.content = res.data.data
            this.isShow = true
          } else {
            this.content = res.data.message
            this.isShow = false
          }
        })
      } else {
        this.const = '请在WIFI/4G模式下连接设备'
        this.isShow = false
      }
    },

    // 关闭弹窗
    getClose() {
      this.$refs.popup.close()
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 0;
  height: 100%;
  overflow: hidden;
}

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

.submit {
  position: absolute;
  bottom: 40rpx;
  left: 50%;
  transform: translate(-50%);
  width: calc(100% - 120rpx);
}

.popup {
  justify-content: space-between;

  button {
    position: absolute;
    bottom: 116rpx;
  }
}

.popup-catch {
  justify-content: center;
}

.popup,
.popup-catch {
  width: 576rpx;
  height: 600rpx;
  background: #fff;
  border-radius: 32rpx;
  color: #000;
  font-weight: bold;
  text-align: center;
  padding: 48rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;

  .center {
    font-size: 32rpx;
  }

  button {
    width: 320rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 32rpx;
    position: absolute;
    bottom: 88rpx;
  }

  span {
    font-size: 24rpx;
  }
}
</style>