yunshengtai-uniapp/pages/activity/signIn/index.vue

<template>
<!--pages/activity/signIn/index.wxml-->
<view class="signIn-page">
  <view class="title-box">
    <text>参加活动人员信息填写</text>
    <text>请仔细填写，方便后台快速审核通过</text>
  </view>
  <view class="form-box">
    <form @submit="toConfirm">
      <view class="form-item">
        <view class="form-label">昵称<text style="color:#FF3B30;">*</text></view>
        <input type="text" name="name" placeholder="请输入姓名" />
      </view>
      <view class="form-item">
        <view class="form-label">手机号<text style="color:#FF3B30;">*</text></view>
        <input type="text" placeholder="请输入手机号" name="phone" maxlength="11">
        <!-- <view class="input-box acea-row row-middle">
          <input type="text" placeholder="请输入手机号" name="phone" />
          <input type="button" value="发送验证码" bindtap="sendCode" />
        </view> -->
      </view>
      <!-- <view class="form-item">
        <view class="form-label">验证码<text style="color:#FF3B30;">*</text></view>
        <input type="text" placeholder="请输入验证码" name="code" />
      </view> -->
      <view class="form-item">
        <view class="form-label">微信号</view>
        <input type="text" placeholder="请输入微信" name="WeChat">
      </view>
      <view class="form-item">
        <view class="form-label acea-row row-between">
          <text>门票<text style="color:#FF3B30;">*</text></text> 
          <input type="number" @blur="inpChange" :value="num" style="width:30rpx" name="num">
        </view>
      </view>
      <button class="submit-btn" form-type="submit">下一步</button>
    </form>
    
  </view>
</view>
</template>

<script>
// pages/activity/signIn/index.js
const app = getApp();

export default {
  data() {
    return {
      activityId: '',
      num: '2'
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      activityId: options.id
    });
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    toConfirm(e) {
      console.log(e);
      const values = e.detail.value;
      let name = values.name,
          phone = values.phone,
          code = values.code,
          WeChat = values.WeChat,
          num = values.num;

      if (name == '' || phone == '' || code == '') {
        uni.showToast({
          title: '带*项为必填项，请检查后重新提交！',
          icon: 'none'
        });
        return;
      } else if (!/^1(3|4|5|7|8)\d{9}$/.test(phone)) {
        uni.showToast({
          title: '请填写正确手机号',
          icon: 'none'
        });
        return;
      } else if (num == '') {
        num = 1;
      }

      app.http('post', 'activity/joinActivity', {
        activiyId: this.activityId,
        name: name,
        phone: phone,
        num: num
      }).then(res => {
        console.log(res);

        if (res.data.success) {
          let payInfo = encodeURIComponent(JSON.stringify(res.data.data));
          uni.navigateTo({
            url: './confirm/index?payInfo=' + payInfo
          });
        }
      });
    },

    inpChange(e) {
      console.log(e);
      let num = e.detail.value;

      if (num <= 0) {
        num = 1;
      } else if (num > 2) {
        num = 2;
      }

      this.setData({
        num
      });
    }

  }
};
</script>
<style>
/* pages/activity/signIn/index.wxss */
.signIn-page{
  padding: 56rpx 32rpx;
}
.title-box text:nth-child(1){
  font-size: 42rpx;
  font-weight: bold;
  display: block;
  line-height: 58rpx;
  margin-bottom: 8rpx;
}
.title-box text:nth-child(2){
  font-size: 24rpx;
  display: block;
  color: #F96B1C;
}
.form-item{
  font-size: 32rpx;
  color: #333;
  margin-top: 46rpx;
}
.form-item input[type="text"]{
	display: block;
  height: 68rpx;
	line-height: 68rpx;
  border-bottom: 2px solid #F4F4F4;
  font-size: 28rpx;
}
.input-box input[type="text"]{
  width: calc(100% - 310rpx);
}

.submit-btn{
  width: 672rpx !important;
  height: 76rpx !important;
  background: #292929;
  color: #FFF;
  font-size: 32rpx;
  line-height: 76rpx !important;
  padding: 0 !important;
  text-align: center;
  border-radius: 0 !important;
	margin: 100rpx auto 0;
}
</style>