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>
    <uni-forms class="form" ref="form" :modelValue="form" :rules="rules" label-width="100px"
      label-position="top" validateTrigger="bind">
      <view class="tips">请检查您的信息填写正确，确认后无法更改哦</view>
      <uni-forms-item label="收货人：" name="receiveName" required>
        <input type="text" v-model="form.receiveName" placeholder="请输入收货人姓名" />
      </uni-forms-item>
      <uni-forms-item label="手机号：" name="receivePhone" required>
        <input type="number" v-model="form.receivePhone" placeholder="请输入手机号" />
      </uni-forms-item>
      <uni-forms-item label="收货地址：" name="receiveAddress" required>
        <textarea v-model="form.receiveAddress" placeholder="请输入收货地址" />
      </uni-forms-item>
      <button @click="getSubmit" :disabled="disabled">确认</button>
    </uni-forms>
  </view>
</template>

<script>
import { receive } from '@/api/lottery.js'
export default {
  data() {
    return {
      // 状态栏
      statusBarHeight: getApp().globalData.statusBarHeight,
      // 表单
      form: {},
      // 防重复点击
      disabled: false,
      // 校验
      rules: {
        receiveName: {
          rules: [{
            required: true, errorMessage: '请输入收货人姓名'
          }]
        },
        receivePhone: {
          rules: [{
            required: true, errorMessage: '请输入手机号'
          }, {
            pattern: /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/, errorMessage: '请输入正确的手机号'
          }]
        },
        receiveAddress: {
          rules: [{
            required: true, errorMessage: '请输入收货地址'
          }]
        }
      }
    }
  },
  onLoad(e) {
    this.form = {
      prizeId: e.prizeId,
      lotteryCode: decodeURIComponent(e.lotteryCode)
    }
  },
  methods: {
    // 返回
    getBack() {
      uni.redirectTo({
        url: `/pages/lottery/index`
      })
    },

    // 确定
    getSubmit() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          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)
            } else {
              uni.showToast({
                icon: 'error',
                title: res.data.message,
              })
              this.disabled = false
            }
          })
        }
      })
    }
  }
}
</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: 600;
    font-size: 36rpx;
    position: relative;
    box-sizing: content-box;

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

  .tips {
    color: #999;
    font-size: 24rpx;
    margin-bottom: 32rpx;
  }

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

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

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

    ::v-deep .uni-forms-item__label {
      font-size: 32rpx;
      font-weight: bold;
      padding: 0;
    }

    input {
      border-radius: 16rpx;
      height: 88rpx;
      line-height: 88rpx;
      color: #333333;
      margin: 0;
    }

    uni-textarea {
      border-radius: 16rpx;
      margin: 0;
    }

    ::v-deep .input-placeholder, .textarea-placeholder{
      opacity: 0.6;
    }

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