1. 程式人生 > >微信小程式之———登入註冊!

微信小程式之———登入註冊!

// pages/register/index.js
Page({

  /**
   * 頁面的初始資料
   */
  data: {
	mailCode: "傳送驗證碼",
	boolean: true,
	isChecked: false,
	phone: '',
	phoneTip:'',
	keyCode: '',
	keyCodeTip:'',
	userName: '',
	userNameTip: '',
	userPassword: '',
	userPasswordTip: '',
	next: '',
	code: '',
	info: ''
  },
  //手機號
  phoneInput: function (e) {
	  let mobile = e.detail.value;
	  let myreg = /^13[\d]{9}$|^14[5,7]{1}\d{8}$|^15[^4]{1}\d{8}$|^17[0,3,6,7,8]{1}\d{8}$|^18[\d]{9}$/;
	  if (mobile.length == 0){
		  this.setData({
			  phoneTip: '手機號不能為空'
		  })
	  } else if (!myreg.test(mobile)){
		  this.setData({
			  phoneTip: '請檢查您的手機號是否有誤'
		  })
	  }else{
		  this.setData({
			  phoneTip: '',
			  phone: mobile,
			  boolean: false
		  })
	  }	  
  },
  //驗證碼
  keyCodeInput: function (e) {
	  let keyCode = e.detail.value;
	  if (keyCode.length == 0) {
		  this.setData({
			  keyCodeTip: '驗證碼不能為空'
		  })
	  } else {
		  this.setData({
			  keyCodeTip: '',
			  keyCode: keyCode,
		  })
	  }	  
  },
  //使用者名稱
  userNameInput: function (e) {
	  let userName = e.detail.value;
	  if (userName.length == 0) {
		  this.setData({
			  userNameTip: '暱稱不能為空'
		  })
	  } else {
		  this.setData({
			  userNameTip: '',
			  userName: userName,
		  })
	  }
  },
  //使用者密碼
  userPasswordInput: function (e) {
	  let password = e.detail.value;
	  if (password.length < 6 || password.length>16) {
		  this.setData({
			  userPasswordTip: '密碼長度為6-16位'
		  })
	  }else {
		  this.setData({
			  userPasswordTip: '',
			  userPassword: password
		  })
	  }	  
  }, 
  //下一步
  next: function (options) {
	  let prefix = this.data;
	  if (prefix.keyCodeTip == '' && prefix.phoneTip == '' && prefix.phone != '' && prefix.keyCode != ''){
		  this.setData({
			  next: true
		  })
	  }	  
  },
  //返回
  back: function (options) {
	  this.setData({
		  next: false,

	  })
  },
  //登入
  oLogin: function () {	  
	  let that = this;
	  var pre = that.data;
	  let avatarUrl = wx.getStorageSync('avatarUrl');
	  wx.request({
		  url: 'https://www.muwai.com/index.php/Xcx/Login/wx_login',
		  data: { code: pre.code, username: pre.userName, phone: pre.phone, password: pre.userPassword, phone_code: pre.keyCode, head_photo: avatarUrl},
		  success: res => {
			  //成功的話直接跳轉到首頁
			  let oStatus = res.data.status;
			  if (oStatus == 100) {
				  let session_id = res.data.session_id;
				  wx.setStorageSync('session_id', session_id);
				  wx.switchTab({
					  url: '../index/index?session_id=' + session_id
				  })
			  }else{
				  that.setData({
					  info: res.data.info
				  })
			  }
			  
		  }
	  })	  
  },
 
  //傳送驗證碼
  codeBtn: function () {
	  console.log(6)
	  var pre = this.data;
	  wx.request({
		  url: 'https://www.muwai.com/index.php/Xcx/User/send_code',
		  data: { phone: pre.phone, type: "1", btype: "1"},
		  success: res => {
			  //成功的話直接跳轉到首頁
			  let oStatus = res.data.status;
			  let phoneTip = res.data.info;
			  if (oStatus == 100){
				//倒計時
				  let time = null;
				  let that = this;
				  let pre = this.data;
				  let num = 60;
				  time = setInterval(function () {
					  if (num > 1) {
						  num--;
						  that.setData({
							  mailCode: num + 's',
							  isChecked: true,
							  boolean: true
						  })
					  } else {
						  that.setData({
							  mailCode: '重新發送',
							  isChecked: false,
							  boolean: false
						  });
						  clearInterval(time);
					  }
				  }, 1000)
			  } else{
				  this.setData({
					  phoneTip: phoneTip
				  })
			  }	 	  
		  }
	  })
  },	
  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
	  let that = this;
	  this.setData({
		  //把讀取出來的資料儲存到頁面的資料data中
		  code: options.code
	  })
  },

  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {
  
  },

  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function () {
  
  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function () {
  
  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function () {
  
  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {
  
  }
})
效果圖: