ohplay_h5/src/pages/lottery/detail.vue

<template>
  <view class="app-container">
    <view class="nav" :style="{'padding-top': statusBarHeight + 'px'}">
      <uni-icons type="back" style="font-size: 48rpx" @click="getBack" />
      <text class="title">积分抽奖</text>
    </view>
    <view class="form">
      <view class="tips">请检查您的信息填写正确，确认后无法更改噢</view>
      <view class="form-item">
        <view>收货人</view>
        <input type="text" v-model="form.receiveName" placeholder="请输入收货人姓名" />
      </view>
      <view class="form-item">
        <view>手机号</view>
        <input type="number" v-model="form.receivePhone" placeholder="请输入手机号" />
      </view>
      <view class="form-item">
        <view>收货地址</view>
        <textarea v-model="form.receiveAddress" placeholder="请输入收货地址" />
      </view>
      <button @click="getSubmit" :disabled="disabled">确认</button>
    </view>
  </view>
</template>

<script>
import { receive } from '@/api/lottery.js'
export default {
  data() {
    return {
      // 状态栏
      statusBarHeight: getApp().globalData.statusBarHeight,
      // 表单
      form: {},
      // 防重复点击
      disabled: false
    }
  },
  onLoad(e) {
    this.form = {
      prizeId: e.prizeId,
      lotteryCode: decodeURIComponent(e.lotteryCode)
    }
  },
  methods: {
    // 返回
    getBack() {
      uni.redirectTo({
        url: `/pages/lottery/index`
      })
    },

    // 确定
    getSubmit() {
      if (!this.form.receiveName) {
        uni.showToast({
          icon: 'none',
          title: '请输入收货人姓名'
        })
      } else if (!this.form.receivePhone) {
        uni.showToast({
          icon: 'none',
          title: '请输入手机号'
        })
      } else if (!this.form.receiveAddress) {
        uni.showToast({
          icon: 'none',
          title: '请输入收货地址'
        })
      } else {
        this.disabled = true
        receive(getApp().globalData.userInfo, this.form).then(res => {
          if (res.data.code === 0) {
            uni.showToast({
              title: '提交成功！',
              duration: 3000
            })
            setTimeout(() => {
              this.getBack()
            }, 3000)
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  position: relative;
  background: url('@/static/lottery/bg-1.png');
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  color: #000;
  padding: 0 32rpx 32rpx;

  .nav {
    height: 88rpx;
    display: flex;
    align-items: center;
    color: #333333;
    font-weight: bold;
    font-size: 36rpx;
    position: relative;
    box-sizing: content-box;

    .title {
      position: absolute;
      left: 50%;
      transform: translate(-50%);
    }
  }

  .form {
    margin-top: 32rpx;
    height: 1122rpx;
    background: #fff;
    border-radius: 32rpx;
    padding: 32rpx;

    .tips {
      color: #999;
      font-size: 24rpx;
      text-align: center;
    }

    .form-item {
      margin: 32rpx 0 0 0;
    }

    button {
      background: linear-gradient(180deg, #72cdae 0%, #599f82 100%);
      color: #fff;
      width: 480rpx;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 50rpx;
      font-size: 32rpx;
      margin-top: 66rpx;
    }
  }
}
</style>