CommunityApp/pages/register/register.vue

<template>
<view class="container edit_wrap">
<view class="flex justify-between " style="padding: 40rpx 30rpx;;box-sizing: border-box;">
	<view class="" style="font-size: 38rpx;">
		<text class="text-bold text-black">注册认证</text>
	</view>
	<view class="text-red"  style="padding-top: 12rpx;">
		<text style="font-size: 38rpx;">1</text>
		<text class="text-df">/3</text>
	</view>
</view>
 <form>
    <view class="form_group">
      <text class="red">*</text>
      <text class="sex">姓名：</text>
      <input placeholder="请与物业登记处保持一致" placeholder-class="placeholder_style" type="text" class="placeholder_style" @input="nameInput">
      </input>
    </view>
    <view class="form_group">
      <text class="red">*</text>
      <text class="sex">手机：</text>
      <input placeholder="请与物业登记处保持一致" v-model="tel" placeholder-class="placeholder_style" type="number" maxlength="11" class="placeholder_style" >
      </input>
    </view>
    <view class="form_group">
      <text class="red">*</text>
      <text class="sex">验证码：</text>
      <input type="text" class="sendmsg_input" @input="verifyCodeInput"></input>
      <button class="right code_btn" @tap="sendMsgButton" :disabled="disabled" :style="'background-color:' + color">{{text}}</button>
    </view>
    <view style="display:flex;margin:20rpx 20rpx">
	  <u-checkbox v-model="isCheck" active-color="blue">
		  <navigator url="/pages/webview/webview?url=https://openapi.lezhuapp.com/help/app.html"><text style="color:#5db5fe">请阅读并同意用户协议</text></navigator>
	  </u-checkbox>
    </view>
	<view class="tips">
	  <text style="padding-left: 40rpx;">认证后用户可享受更多权益，随时获取到您所在小区的动态</text>
	</view>
	
	<view @click="showDialogBtn" class=" footer-fixed" >
		<view class="cu-btn  flex  text-lg bg-red-btn" style="padding: 46rpx 0;">
			确认
		</view>
	</view>
  </form>
</view>
</template>

<script>
//获取app实例
var app = getApp();

export default {
  data() {
    return {
      text: '获取验证码',
      //按钮文字
      currentTime: 61,
      //倒计时
      disabled: false,
      //按钮是否禁用
      name: null,
      //姓名
      tel: null,
      //获取到的手机栏中的值
      verify_code: null,
      //验证码
      isCheck: true,
      color: ""
    };
  },
  onLoad() {
	this.tel=this.$auth.getMineBase().user.mobile || ''
  },
  methods: {
    //获取姓名栏input中的值
    nameInput: function (e) {
      this.setData({
        name: e.detail.value
      });
    },
    //获取验证码栏input中的值
    verifyCodeInput: function (e) {
      this.setData({
        verify_code: e.detail.value
      });
    },
    //获取验证码按钮
    sendMsgButton: function () {
      let that = this;
      that.setData({
        disabled: true,
        //只要点击了按钮就让按钮禁用 （避免正常情况下多次触发定时器事件）
        color: '#ccc'
      });
      let name = that.name;
      let tel = that.tel; //把手机号跟倒计时值变例成js值

      let currentTime = that.currentTime; //warn为当手机号为空或格式不正确时提示用户的文字，默认为空

      let warn = null;

      if (name == null) {
        warn = "姓名不能为空";
      } else if (tel == null) {
        warn = "手机号码不能为空";
      } else if (tel.trim().length != 11 || !/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[189])\d{8}$/.test(tel)) {
        warn = "手机号格式不正确";
      } else {
        //发送短信
        that.sendMessage(); //设置一分钟的倒计时

        let interval = setInterval(function () {
          currentTime--; //每执行一次让倒计时秒数减一

          that.setData({
            text: currentTime + 's' //按钮文字变成倒计时对应秒数

          }); //如果当秒数小于等于0时 停止计时器 且按钮文字变成重新发送 且按钮变成可用状态 倒计时的秒数也要恢复成默认秒数 即让获取验证码的按钮恢复到初始化状态只改变按钮文字

          if (currentTime <= 0) {
            clearInterval(interval);
            that.setData({
              text: '重新发送',
              currentTime: 61,
              disabled: false,
              color: '#59a5f0'
            });
          }
        }, 1000);
      }; //判断 当提示错误信息文字不为空 即手机号输入有问题时提示用户错误信息 并且提示完之后一定要让按钮为可用状态 因为点击按钮时设置了只要点击了按钮就让按钮禁用的情况

      if (warn != null) {
        //自动关闭提示弹窗
        app.globalData.autoFailHint(warn);
        that.setData({
          disabled: false,
          color: '#59a5f0'
        });
        return;
      }

      ;
    },
    //确认
    showDialogBtn: function () {
	  app.globalData.totalStep=3
      let that = this;
      let name = that.name;
      if (name == null) {
        //自动关闭提示弹窗
        app.globalData.autoFailHint("请填写姓名");
        return;
      }
      let tel = that.tel;
	  if (tel == null) {
	    //自动关闭提示弹窗
	    app.globalData.autoFailHint("请输入手机号");
	    return;
	  }
      if (tel.trim().length != 11 || !/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/.test(tel)) {
        //自动关闭提示弹窗
        app.globalData.autoFailHint("请填写正确的手机号码");
        return;
      }
      let verify_code = that.verify_code;

      if (verify_code == null) {
        //自动关闭提示弹窗
        app.globalData.autoFailHint("请填写验证码");
        return;
      }

      if (!that.isCheck) {
        app.globalData.autoFailHint("请同意用户协议");
        return;
      } //注册
      //构建参数
      let params = {};
      params['name'] = name;
      params['tel'] = tel;
      params['verify_code'] = verify_code; 

      params['create_type'] = 0;
      params['openid'] = uni.getStorageSync("openid");
      let operation = 'miniprogram/memberRegister';
      app.globalData.postRequest(params, operation, function (res) {
        //注册成功
        if (res.data.result_code == 1) {
          app.globalData.oneFailHint(res.data.result_msg, function () {
            //注册成功之后重新拉取一次会员信息
            let params = {};
            params['openid'] = uni.getStorageSync("openid");
            let operation = 'miniprogram/getMemberByOpenid';
            app.globalData.postRequest(params, operation, function (res) {
              console.info("getMemberByOpenid==" + res.data.result_msg); //获取成功

              if (res.data.result_code == 1) {
                let member = res.data.member;
                app.globalData.member = member; //未认证状态--提示去认证
                if (member.state == 0) {
					uni.redirectTo({
						url:"../auth/auth"
					})
                } else {
                  uni.reLaunch({
                    url: '/pages/index/index'
                  });
                }
              } else {
                app.globalData.oneFailHint(res.data.result_msg);
              }
            });
          });
        } else {
          app.globalData.oneFailHint(res.data.result_msg);
        }
      });
    },
    //申请短信验证码
    sendMessage: function () {
      //构建参数
      let params = {};
      params['tel'] = this.tel;
	  params['play_type'] = 2;
      let operation = 'member/getSmsCode';
      app.globalData.postRequest(params, operation, function (res) {
        //短信发送成功
        if (res.data.result_code == 1) {
          app.globalData.autoFailHint(res.data.result_msg);
        } else {
          app.globalData.oneFailHint(res.data.result_msg);
        }
      });
    }
  }
};
</script>
<style lang="scss">
page {
  background: #fff;
}


.edit_wrap {
  font-size: 30rpx;
  padding: 0rpx 20rpx 20rpx;
  color: #333;
}

.form_group {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 20rpx 20rpx;
  line-height: 100rpx;
  position: relative;
  font-size: 26rpx;
  border-bottom: 2rpx solid #ddd;
  
}

.form_group .item {
  text-align: right;
  line-height: 80rpx;
}

.form_group .red {
  color: red;
  position: absolute;
  left: 0;
}

.form_group text.sex {
  margin-left: 15px;
  text-align: right;
}

.form_group .radio-group {
  text-align: left;
}

.form_group input, .form_group picker {
  width: 500rpx;
  border-radius: 8rpx;
 height: 100rpx;
  line-height: 100rpx;
  padding: 0rpx 20rpx;
  color: #333;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.form_group button {
  font-size: 24rpx;
  background: $base-btn-color;
  margin:10rpx 0 0 10rpx;
  color: #fff;
}

.form_group .sendmsg_input {
  width: 340rpx;
  margin-left: 36rpx;
}

.tips {
  padding: 0 10rpx;
  text-align: center;
  font-size: 24rpx;
  color: #999;
  margin-top: 20rpx;
}

.placeholder_style {
  font-family: '微软雅黑';
  color: #adadad;
  font-size: 26rpx;
}

.save_btn {
  width: 600rpx;
  background: #d24a58;
  font-size: 32rpx;
  color: #fff;
  border-radius: 0rpx;
  margin: 40rpx 0rpx 10rpx;
}

.code_btn {
  width: 150rpx;
  background: $base-btn-color;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  border-radius: 10rpx;
  color: #fff;
  font-size: 33rpx;
  padding: 0 10rpx;
}

.password_contet image {
  width: 48rpx;
  height: 48rpx;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.password_contet {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
  width: 80rpx;
  height: 80rpx;
  z-index: 999;
}
checkbox .wx-checkbox-input {
  width: 34rpx;
  height: 34rpx;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  color: $base-btn-color;
}
</style>