<template> <view class="regbox pregbox flexdc pr" v-if="loginflag" style="padding-top: 120rpx;"> <image :src="headimg" class="headimg flex0"></image> <view class="flex1" style="position: relative;"> <image :src="ldicon" class="mzimg flex0"></image> <!-- #ifdef APP-PLUS --> <!-- <view class="mb24 mt50"> <view class="f25 c16 fw5 mb30 txc">133****0756</view> <view class="rbtn">本机号码一键登录</view> </view> --> <!-- #endif --> <!-- #ifdef MP-WEIXIN --> <!-- #endif --> <view class="tab flexcc"> <block v-for="(ite,idx) in tablist" :key="idx"> <view class="tabtit" :class="tabidx==ite.val?'act':''" @click="getTab(ite.val)"> {{ite.tit}}</view> </block> </view> <!-- 手机号登录 --> <view class="login-form-content"> <block v-if="tabidx==1"> <view class="input-item"> <view class="login_tit">账号</view> <view class="login_box"> <view class="login_boxl" v-if="tabidx==2">+86</view> <input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" /> </view> </view> <view class="input-item" > <view class="flexcj"> <view class="login_tit">密码</view> <view class="login_jz" @click="jzflag=!jzflag"> <image :src="pcicon" v-if="jzflag"></image> <image :src="pnicon" v-else></image> <view>记住密码</view> </view> </view> <view class="login_box"> <input v-if="checkeye" v-model="loginForm.password" type="text" class="input" placeholder="请输入密码" maxlength="20" /> <input v-else v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" /> <view class="line flex0"></view> <view class="login_txt" @click="getForget"><text>忘记密码</text></view> </view> </view> <view class="input-item flex align-center" style="width: 60%;margin: 0px;margin-bottom: 24rpx;" v-if="captchaEnabled"> <input v-model="tucode" type="number" class="input" placeholder="请输入验证码" maxlength="4" /> <view class="login-code"> <image :src="codeUrl" @click="getCode" class="login-code-img"></image> </view > </view> <button v-if="captchaEnabled" type="primary" class=" rbtn mb24 mt50" :class="tucode&&loginForm.username&&loginForm.password?'btn2':'btn'" @click="getLogin">登录</button> <button v-else type="primary" class=" rbtn mb24 mt50" :class="loginForm.username&&loginForm.password?'btn2':'btn'" @click="getLogin">登录</button> </block> <block v-if="tabidx==2"> <view class="input-item"> <view class="login_tit">手机号码</view> <view class="login_box"> <view class="login_boxl" v-if="tabidx==2">+86</view> <input v-model="loginForm.username" class="input" type="text" placeholder="请输入手机号" maxlength="30" /> </view> </view> <view class="input-item" style="margin-bottom: 24rpx;" > <view class="login_tit">验证码</view> <view style="display: flex;align-items: center;"> <input v-model="duancode" type="code" class="input" placeholder="请输入短信验证码" maxlength="20" /> <view v-if="timefalg" class="codes">重新发送{{time}}s</view> <view v-else class="codess" @click="getsendCode">发送验证码</view> </view> </view> <button v-if="tabidx==2" type="primary" class=" rbtn mb24 mt50" :class="loginForm.username&&duancode?'btn2':'btn'" @click="getLogin">登录</button> </block> </view> <!-- 微信登录 --> <!-- <block v-if="tabidx==1"> <button type="primary" class="rbtn mb24 mt50" open-type="getUserInfo" @getuserinfo="getuserinfo" > <text class="btn-txt">快捷登录</text> </button> </block> --> <!-- 账号密码登录 --> <view class="lread" @click="checkflag=!checkflag"> <view class="lreadl"> <image :src="checkimg" v-if="checkflag"></image> <image :src="ncheckimg" v-else></image> </view> <view class="tit">登录即代表您已阅读并同意<text @click.stop="handlePrivacy">用户协议</text>及<text @click.stop="handlePrivacy">隐私政策</text></view> </view> <!-- <view class="bbcode">版本号:ZXY_YY_1.3</view> --> </view> <!-- <view class="loginb" @click="getTab(1)" v-if="tabidx==2">账号密码登录</view> <view class="loginb" @click="getTab(2)" v-if="tabidx==1">手机登录</view> --> <view class="rtxt mt26" @click="getregister">还没有账号?去注册</view> <phone-btn :type="typeflag" @getPhoneNumber='getPhoneNumber' @getClose="getClose"></phone-btn> </view> </template> <script> import * as base64 from "base-64" import {getweChatLogin,getInfo,getweChatOpenid,getCodeImg,getCode,sendSmsOnly} from "@/api/login.js" import {getUserProfile} from "@/api/system/user.js" import { getToken } from '@/utils/auth' import phoneBtn from "@/components/toptab/phonebtn.vue" export default { components:{ phoneBtn }, data(){ return{ headimg:require('@/static/logo.png'), ldicon:require('@/static/images/mine/ldicon.png'), checkimg:require('@/static/images/mine/lcicon.png'), ncheckimg:require('@/static/images/mine/lnicon.png'), rimg:require('@/static/images/mine/rimg.png'), pcicon:require('@/static/images/mine/pcicon.png'), pnicon:require('@/static/images/mine/pnicon.png'), checkflag:false, typeflag: false, loginflag:false, captchaEnabled: false, duancode:'',//短信验证码 checkeye:false, tucode:'', codeUrl:'', time:'', timefalg:'', tabidx:1, tablist:[{tit:'账号登录',val:1},{tit:'手机登录',val:2},], loginForm: { username: "", code: "", password:'', type:1,//1:账号密码 2:手机登录 }, voList:[], voindex:0, jzflag:true } }, methods:{ getTab(idx){ this.tabidx=idx; this.loginForm.type=idx; }, // 获取图形验证码 getCode() { getCodeImg().then(res => { this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled if (this.captchaEnabled) { this.codeUrl = 'data:image/gif;base64,' + res.img this.loginForm.uuid = res.uuid } }) }, getForget(){ this.$tab.navigateTo(`/pages/mine/pwd/forgetpwd`) }, getregister(){ this.$tab.navigateTo(`/pages/register`) // this.$tab.navigateTo(`/work/pages/prove/index`) // this.$tab.navigateTo(`/mine/pages/mine/auth`) }, getLogin(){ if(this.tabidx==1){ if(!this.loginForm.username||!this.loginForm.password||(!this.tucode&& this.captchaEnabled)){ return } this.loginForm.code=this.tucode; }else{ let regphone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/ // 座机号 if (this.loginForm.username && !regphone.test(this.loginForm.username)) { this.$toast("请输入正确的手机号") return } if(!this.loginForm.username||!this.duancode){ return } this.loginForm.code=this.duancode; } this.pwdLogin() // if(!this.checkflag){ // this.$toast("请同意用户协议") // return // } }, // 密码登录 async pwdLogin() { var that=this; this.$store.dispatch('Login', this.loginForm).then((res) => { // 判断是否记住密码 if(this.tabidx==1){ if(that.jzflag){ var newObj={ username:that.loginForm.username, password:base64.encode(that.loginForm.password), captchaEnabled:that.captchaEnabled, } uni.setStorageSync('account', JSON.parse(JSON.stringify(newObj))) }else{ uni.removeStorageSync('account') } } this.$modal.closeLoading() this.$toast('登录成功') setTimeout(function(){ that.loginSuccess() },1500) }).catch((error) => { setTimeout(function(){ if (that.captchaEnabled&&that.tabidx==2) { that.getCode() } },1000) }) }, // 获取短信验证码 getsendCode(){ var that=this; if (!this.loginForm.username ) { that.$toast("请输入手机号") return } let regphone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/ // 座机号 let reg1=/^(0\d{2,3})-?(\d{7,8})$/ if (this.loginForm.username && !regphone.test(this.loginForm.username)) { that.$toast("请输入正确的手机号") return } var params={ 'username':this.loginForm.username } // getSMS(); // return sendSmsOnly(params).then(res=>{ if (res.code == 200) { // 发送验证码 that.$toast("发送成功") that.time=60; that.timefalg=true; that.setTimein() } else { that.$toast(res.msg) } }) }, // 验证码倒计时 setTimein(){ var that=this; clearInterval(that.timer) that.timer=setInterval(()=>{ if(that.time<=1){ that.timefalg=false; that.time=60; clearInterval(that.timer) } that.time=that.time-1; },1000) }, handlePrivacy(){ this.$tab.navigateTo(`/pages/agreement`) }, getClose() { this.typeflag = false }, btns() { }, getPhoneNumber(data){ var that=this; var params=data that.$store.dispatch('Login', params).then(() => { that.$modal.closeLoading() that.$toast('登录成功') that.typeflag=false; that.loginSuccess(data) }).catch(() => { // if (this.captchaEnabled) { // this.getCode() // } }) }, // 登录成功后,处理函数 loginSuccess(result) { // 设置用户信息 var that=this; this.$store.dispatch('GetInfo').then(res => { this.$tab.reLaunch('/pages/index/index') // 判断有几个角色 进入选择页面 // var roles=that.$store.state.user.roles; // var userroles=that.$store.state.user.userroles; // if(roles.length>0){ // // 默认选择学校 老师 家长 // var a,b,c,type; // if(roles.includes('school')){ // type='school' // }else if(roles.includes('teacher')){ // type='teacher' // }else if(roles.includes('parents')){ // type='parents' // }else{ // that.$tab.reLaunch('/pages/index/index') // return // } // Object.keys(userroles).some((key) => { // if (userroles[key].roleKey == ('' + type)) { // that.$store.dispatch('checkRole', userroles[key]).then(() => { // that.$tab.reLaunch('/pages/index/index') // }).catch(() => { // }) // return true; // } // }) // }else{ // this.$tab.reLaunch('/pages/index/index') // } }) }, async getuserinfo(e) { // if(!this.checkflag){ // this.$toast("请同意用户协议") // return // } // 判断是不是有学校 const {iv,encryptedData} = e.detail const {nickName, avatarUrl, ...userInfo} = e.detail.userInfo // console.log(e.detail) try{ uni.login({ provider: 'weixin', success: (res) => { // 获取用户信息 if(res.code){ this.avatarUrl = avatarUrl this.nickName = nickName this.code = res.code this.userInfo =e.detail.userInfo uni.setStorageSync('userInfo', e.detail.userInfo) uni.setStorageSync('lcheckflag',true) this.typeflag=true; } } }) } catch(e){ //TODO handle the exception } }, }, onLoad: function() { this.getCode() if (getToken()) { this.$tab.reLaunch('/pages/index/index') // 判断有什么角色 } else { this.loginflag=true; // this.getCode() if(uni.getStorageSync('lcheckflag')){ this.checkflag=true }else{ this.checkflag=false } if(uni.getStorageSync('account')){ var newObj=JSON.parse(JSON.stringify(uni.getStorageSync('account'))) this.loginForm.username=newObj.username; this.loginForm.password=base64.decode(newObj.password); this.jzflag=true; } } }, } </script> <style lang="scss" scoped> .headimg{width: 154rpx;height: 160rpx;margin:0 auto 26rpx;} .mzimg{width: 100rpx;height: 44rpx;margin: 0 auto 40rpx;} .rtxt{font-size: 32rpx;font-weight: 500; color: $com-cd3;text-align: center;} .bbcode{position: absolute;width: 100%;text-align: center;left: 0;bottom: -80rpx;font-size: 24rpx;color: #666666;} .loginb{position: absolute;width: 100%;text-align: center;left: 0;bottom: 120rpx;font-size: 26rpx;color: #00A9F0;} .lread{ display: flex;align-items: flex-start;justify-content: center; .lreadl{padding-top: 4rpx; image{width: 28rpx;height: 28rpx;margin-right: 14rpx;} } .tit{font-size: 26rpx;font-weight: 500;color: #666666;line-height: 40rpx; text{color:$com-cd3;text-decoration: underline;padding: 0 6rpx;} } } .tab{ .tabtit{font-size: 32rpx;font-weight: 500;color: #666666;padding: 0 24rpx;position: relative; &.act{color: $com-cd3;font-weight: bold;} &::before{content: '';position: absolute;left: 0;top: 50%;margin-top: -10rpx;width: 2rpx;height: 20rpx;background: #DADADA;} &:first-child::before{display: none;} } } .rbtn {font-size: 30rpx; &.btn{background: #9a9c9e;color: #ffffff;} &.btn2{background: $com-cd3;color: #ffffff;} } .login-form-content { margin: 0 auto; width: 100%; .input-item { // margin-bottom:48rpx; border-bottom: 2rpx solid #CDCDCD; padding: 40rpx 0 0rpx; .icon { font-size: 40rpx; margin-left: 10px; color: #999; } .login_tit{ font-size: 30rpx; font-weight: bold; color: #343434;margin-bottom: 20rpx; } .login_box{display: flex;align-items: center; .rimgs{width: 18rpx;height: 30rpx;flex: 0 0 auto;margin-left: 20rpx;} } .input { width: 100%; font-size: 30rpx; height: 84rpx; line-height: 84rpx; } } .login-code { height: 38px; float: right; .login-code-img { height: 38px; position: absolute; margin-left: 10px; width: 200rpx; } } } // .image{width: 32rpx;height: 32rpx;margin-right: 14rpx;} .input_ye image{width: 30rpx;height: 18rpx;} .codess{font-size: 30rpx;color: $com-cd3;flex: 0 0 auto;min-width: 200rpx;text-align: center;border-left: 2rpx solid #CDCDCD;} .codes{background: none;font-size: 28rpx;flex: 0 0 auto;width: 180rpx;text-align: center;border-left: 2rpx solid #CDCDCD;} .login_box{display: flex;align-items: center;} .login_boxl{width:100rpx;font-size: 30rpx;color: #343434;border-right: 2rpx solid #CDCDCD;margin-right: 40rpx;} .login_txt{text-align: right;flex: 0 0 auto; padding:0 24rpx; text{font-size: 30rrpx;color:$com-cd3;} } .line{width: 2rpx;height: 24rpx;background: #CDCDCD;margin: 0 10rpx;} .login_jz{display: flex;align-items: center;justify-content: flex-end;flex: 0 0 auto; image{width: 30rpx;height: 30rpx;margin-right: 12rpx;} view{color: #666666;font-size: 28rpx;} } // app </style>