小程序登陆拦截器(类似vue路由守卫)，登陆弹窗，切换密码是否可见！

点击：需要用户登陆才能进去页面，否则弹出登陆框 

利用原理：用户登陆后缓存的标识，和全局方法，引入全局组件！

登陆样式
.login_mask {
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1996;
    display: flex;
    align-items: center;
}

.login_main {
    width: 652rpx;
    height: 800rpx;
    background: #f8f8f9;
    margin: 0 auto;
    /* margin-top: 100rpx; */
    border-radius: 10rpx;
    position: relative;
    text-align: center;
}

.login_main .icon-guanbi {
    position: absolute;
    right: 40rpx;
    top: 40rpx;
    z-index: 88;
    font-size: 40rpx;
}

.login_main .logo {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    margin: 42rpx 0;
}

.login_main .title {
    font-size: 28rpx;
    color: #00274b;
}

.login_main .email {
    width: 544rpx;
    height: 88rpx;
    border: 1px solid #bbc9d6;
    margin: 0 auto;
    border-radius: 44rpx;
    text-align: left;
    padding-left: 32rpx;
    margin-top: 40rpx;
}

.login_main .password {
    width: 544rpx;
    height: 88rpx;
    border: 1px solid #bbc9d6;
    margin: 0 auto;
    border-radius: 44rpx;
    text-align: left;
    padding-left: 32rpx;
    margin-top: 40rpx;
}

.login_main .eye {
    position: absolute;
    width:100rpx;
    height: 88rpx;
    right: 50rpx;
    top: 17rpx;
    z-index: 150;
}

.forget {
    height: 80rpx;
    line-height: 80rpx;
    color: #03a9f4;
    font-size: 24rpx;
}

.termsOfService {
    font-size: 24rpx;
    color: #97a7b7;
    margin-top: 48rpx;
}

.noAccount {
    font-size: 24rpx;
    color: #97a7b7;
    margin-top: 38rpx;
}
.service,.register{
    color:#03a9f4;
}

.submit {
    width: 544rpx;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 44rpx;
    /* background: #93d6f8; */
    background:#03a9f4; 
    color: #fff;
    font-size: 34rpx;
}

 

<!--登陆模态框-->
<template name="login">
    <view class="login_mask" wx:if="{{logShow}}">
        <view class="login_main">
            <icon class="iconfont icon-guanbi close" bindtap='close'></icon>
            <image class="logo" src='../../images/icon-small.png'></image>
            <view class="title">去{{'Laicode'}}做题,先绑定Laicode账号</view>
            <view style="position:relative;">
                <label>
                    <input  class="email" type="text" placeholder='Email' bindinput='getEmail' placeholder-style="color:#bbc9d6;font-size:28rpx;">
                    </input>
                </label>
            </view>
            <view style="position:relative;">
                <label>
                    <input  name="password" class="password" placeholder="Password" password="{{showpass}}" value="{{password}}" bindinput='getPassWord' placeholder-style="color:#bbc9d6;font-size:28rpx;">
                    </input>
                </label>
                <icon bindtap='switchEye' class="iconfont eye {{eye?'icon-close-eye':'icon-ai-eye'}}"></icon>
                <!-- <icon wx:if="{{!eye}}" class="iconfont ."></icon> -->
            </view>
            <view class="forget">忘记密码</view>
            <button class="submit">绑定</button>
            <view class="termsOfService">使用laicode账号 则同意我们
                <text class="service">服务条款</text>
            </view>
            <view class="noAccount">没有laicode账号？
                <text class="register">立即注册</text>
            </view>
        </view>
    </view>
</template>

在需要用到的页面引入

<!-- 引入登陆模态框 -->
<import src="../login/login.wxml" />
<template is="login" data="{{showpass,eye,password,email,focus,logShow}}"></template>


<view bindtap='islogin'>点击打卡</view>

js

var util = require('../../utils/util.js'),
   
Page({
      
        data: {
            logShow: false
        },
//切换密码是否可见
        switchEye() {
            var that = this;
            util.switchEye(that, that.data.eye, that.data.showpass)
        },
//获取密码
        getPassWord: function(e) {
            var that = this;
            var password = e.detail.value;
            util.getPassWord(that, password)
        },
//获取邮箱
        getEmail(e) {
            var that = this;
            var email = e.detail.value;
            util.getEmail(that, email)
        },
//关闭模态框
        close() {
            var that = this;
            util.close(that)
        },
        islogin() {
         
            if (用户登陆的标识，可以在登陆后存到缓存里面，然后在缓存取) {
                this.setData({
                    logShow: true
                })
            } else {
            
               wx.navigateTo({
                   url: '跳转的页面',
               })
            }
        },
        onLoad: function(options) {
         
        },
      
    }
  
)

全局utils

//切换密码可见性
function switchEye(that, eye, showpass) {
    var showpass = !that.data.showpass;
    var eye = !that.data.eye;
        that.setData({      
            showpass: showpass,
            eye:eye
        })
}
//获取输入的邮箱
function getEmail(that, email) {
    that.setData({
        email: email
    })
}
//获取输入的密码
function getPassWord(that, password) {
    console.log(password)
    that.setData({
        password: password
    })
}
function close(that){
    that.setData({
        logShow: false
    })
}
// 把方法暴露出来供别的页面使用
module.exports = {
    switchEye: switchEye,
    getPassWord: getPassWord,
    getEmail: getEmail,
    close: close,
}

代码中引用了阿里矢量图标库 使用请注意