小程序实现登录、注册、忘记密码功能

业务逻辑：

1、实现登录、注册、忘记密码功能

2、请求后台时，传递的参数加密

3、手机号、密码发给后端时，加密处理

 代码较多，贴一个登录页面的

<template>
	<view>
      <!-- 1 logo -->
		  <view class="logo">
		    <image src="../../static/image/wx.png"></image>
		  </view>
		  <!-- 2 登录信息 -->
		  <form @submit="doLogin">
		    <view class="login-info">
		      <view class="item">
		        <image src="../../static/image/login_tel.png"></image>
		        <input name="mobile" type="number" placeholder="请输入手机号" maxlength="11"></input>
		      </view>
		      <view class="item">
		        <image src="../../static/image/login_pwd.png"></image>
		        <input name="password" password placeholder="请输入密码(6~15位)" maxlength="15"></input>
		      </view>
		      <view class="item">
		        <text class="font-gray">登录代表您已同意</text>
		        <navigator class="color-green" url="/pages/agreement/agreement">《用户服务协议》</navigator>
		      </view>
		    </view>
		    <!-- 3 登录按钮 -->
		    <button formType="submit" class="big-btn" lang="zh_CN">登录</button>
		  </form>
		
		  <!-- 4 辅助操作 -->
		  <view class="login-opts font-gray">
		    <navigator url="/pages/register/register?type=0">快速注册</navigator>
		    <navigator url="/pages/register/register?type=1">忘记密码？</navigator>
		  </view>
	</view>
</template>

<script>
	import sha from '../../common/sha256.js';
	export default {
		data() {
			return {
				mobile: '',
				password: '',
				navUrl:''
			}
		},
		onLoad:function(options){
		    let navUrl = options.navUrl;
		    if (navUrl != null && navUrl != undefined && navUrl != '') {//其他界面传递过来url
          this.navUrl=navUrl
		    }else{
          this.navUrl=''
		    }
		},
		methods: {
		   //  登录验证
		   doLogin: function(e) {
		     let param = e.detail.value //提交时得到用户名、密码
		     this._mysubmit(param)
		   },
		   //  验证我的提交信息{mobile: "", password: ""}
		   _mysubmit: function(param) { 
		     let mobile = param.mobile.trim()
		     let password = param.password.trim()
		     let flag = this._checkMobile(mobile) && this._checkPassword(password)//校验
		     if (flag) {
		       this._checkUserInfo(param);
		     }
		   },
		   //  校验用户名
		   _checkMobile: function (param) {
		     let regFlag = this.$util.checkMobile(param)
		     let telLens = param.length
		     if (telLens === 0) {
		       this.$request.setErrorMessage('手机号不能为空')
		     } else if (telLens < 11) {
		       this.$request.setErrorMessage('手机号长度错误')
		     } else if (!regFlag) {
		       this.$request.setErrorMessage('手机号格式错误')
		     } else {
		       return true
		     }
		   },
		   //  校验密码
		   _checkPassword: function (param) {
		     let pwdLens = param.length;
		     if (pwdLens === 0) {
		       this.$request.setErrorMessage('密码不能为空')
		     } else if (pwdLens < 6) {
		       this.$request.setErrorMessage('密码长度不能小于6位')
		     }else{
		       return true
		     }
		   },
		   // 检查用户信息 param={mobile: "", password: ""}
		   _checkUserInfo: function(param) {
		     let password = sha.sha256(param.password.trim())
		     param.password = password
         this.gotoLogin(param);
		   },
       gotoLogin(param){
         this.$request.setRequest('/login', param)
           .then(res => {
             if (res.data.status == 1) {//成功
               let userInfo = res.data.data
               this.$common.setGlobalUserInfo(userInfo)//goto应该是后端返回的用户信息{}
               // 记录登录成功时间戳
               let timestamp = new Date().getTime();
               this.$common.setLogintimeInfo(timestamp);
               this.$request.setErrorMessage(res.data.msg)
               // 跳转到登录界面
               let navUrl = this.navUrl;
               if (navUrl != null && navUrl != undefined && navUrl != '') {//其他界面传递过来url
                 uni.switchTab({
                   url: '/pages/' + navUrl,
                 })
               } else {
                 uni.switchTab({
                   url: '/pages/mine/mine' //参数只能是字符串形式，不能为json对象
                 })
               }
             } else if (res.data.status <1){
               this.$request.setErrorMessage(res.data.msg)
             }else{
               this.$request.setErrorMessage()
             }
         })
       },
		}
	}
</script>

<style>
  @import 'login.css';
</style>