点击：需要用户登陆才能进去页面，否则弹出登陆框
利用原理：用户登陆后缓存的标识，和全局方法，引入全局组件！
登陆样式.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}}"/templateview bindtap='islogin'点击打卡/viewjs
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,}代码中引用了阿里矢量图标库 使用请注意
