活动页面

src/pages/activity/index.vue

@@ -0,0 +1,149 @@
+<template>
+  <view class='app-container'>
+    <img :src="pic" />
+    <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 @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
+      },
+      // 弹窗内容
+      content: '',
+      // 兑换成功
+      isShow: false
+    }
+  },
+  onLoad(e) {
+    this.form.activityId = e.activityId
+    this.getDetail()
+  },
+  methods: {
+    getDetail() {
+      uni.showLoading({
+        title: '加载中...',
+        mask: true
+      })
+      detail({
+        activityId: this.form.activityId
+      }).then(res => {
+        if (res.data.code === 0) {
+          uni.hideLoading()
+          this.pic = res.data.data.pic
+        } else {
+          uni.showToast({
+            title: res.data.message,
+            icon: 'error',
+            duration: 2000
+          })
+        }
+      })
+    },
+
+    // 立即领取
+    getSubmit() {
+      this.$refs.popup.open()
+      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
+        }
+      })
+    },
+
+    // 关闭弹窗
+    getClose() {
+      this.$refs.popup.close()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 0;
+}
+
+img {
+  width: 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: 48rpx;
+  }
+
+  span {
+    font-size: 24rpx;
+  }
+}
+</style>