255 lines
8.6 KiB
Vue
255 lines
8.6 KiB
Vue
<template>
|
||
<view>
|
||
<view style="overflow: hidden;position: relative;" :style="{height: windowHeight + 'px'}">
|
||
<image class="login-img" src="/static/public/icon-login.png" mode="widthFix"></image>
|
||
<view class="login-box fon28">
|
||
<!-- 手机号 -->
|
||
<view class="login-input-box">
|
||
<view style="width: 30rpx;">
|
||
<image style="width: 30rpx;height: 28rpx;" src="/static/public/icon-people.png" mode=""></image>
|
||
</view>
|
||
<input class="width100" type="number" @blur="inputBlurEv(0)" @focus="inputFocusEv(0)" @input="inputFocusEv(0)" v-model="login_phone" maxlength="11" placeholder="请输入手机号" placeholder-class="col9" />
|
||
<!-- 清除按钮 -->
|
||
<view class="clear-box" v-show="ifPhone" @tap="clearInput(0)" style="right: 20rpx;"><view class="clear-close"><span></span><span></span></view></view>
|
||
</view>
|
||
<!-- 验证码 -->
|
||
<view class="login-input-box" v-show="login_type=='mobile'">
|
||
<view style="width: 30rpx;">
|
||
<image style="width: 22rpx;height: 26rpx;" src="/static/public/icon-password.png" mode=""></image>
|
||
</view>
|
||
<input class="width100" type="number" v-model="login_code" maxlength="6" @blur="inputBlurEv(1)" @focus="inputFocusEv(1)" @input="inputFocusEv(1)" placeholder="请输入验证码" placeholder-class="col9" />
|
||
<view class="login-code-btn" @tap="getCode">{{codeText}}</view>
|
||
<!-- 清除按钮 -->
|
||
<view class="clear-box" v-show="ifCode" @tap="clearInput(1)" style="right: 260rpx;"><view class="clear-close"><span></span><span></span></view></view>
|
||
</view>
|
||
<!-- 密码登录 -->
|
||
<view class="login-input-box" v-show="login_type!='mobile'">
|
||
<view style="width: 30rpx;">
|
||
<image style="width: 22rpx;height: 26rpx;" src="/static/public/icon-password.png" mode=""></image>
|
||
</view>
|
||
<input class="width100" type="text" password v-model="login_password" @blur="inputBlurEv(3)" @focus="inputFocusEv(3)" @input="inputFocusEv(3)" placeholder="请输入密码" placeholder-class="col9" />
|
||
<view class="clear-box" v-show="ifPassword" @tap="clearInput(3)" style="right: 20rpx;"><view class="clear-close"><span></span><span></span></view></view>
|
||
</view>
|
||
<!-- 单位名称 -->
|
||
<view class="login-input-box">
|
||
<view style="width: 30rpx;">
|
||
<image style="width: 26rpx;height: 26rpx;" src="/static/public/icon-unit.png" mode=""></image>
|
||
</view>
|
||
<input class="width100" type="text" v-model="login_unitName" @blur="inputBlurEv(2)" @focus="inputFocusEv(2)" @input="inputFocusEv(2)" placeholder="请输入单位名称" placeholder-class="col9" />
|
||
<!-- 清除按钮 -->
|
||
<view class="clear-box" v-show="ifunitName" @tap="clearInput(2)" style="right: 20rpx;"><view class="clear-close"><span></span><span></span></view></view>
|
||
</view>
|
||
<!-- 登入 -->
|
||
<view class="login-btn fon32" @tap="submitEv">登录</view>
|
||
<!-- 使用账号密码登录、忘记密码 -->
|
||
<view class="fon24 disjbac mar-s20">
|
||
<view @tap="switchType">使用{{login_type_text}}登录</view>
|
||
<view class="col9" @tap="goForget">忘记密码?</view>
|
||
</view>
|
||
<!-- 注册工程师 -->
|
||
<view @tap="goRegister" class="login-btn fon24 mar-s70" style="background-color: #f0f0f0;color: #333333;">注册工程师</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
|
||
export default {
|
||
components:{
|
||
containerSubgroupTwo
|
||
},
|
||
data() {
|
||
return {
|
||
windowHeight: uni.getSystemInfoSync().windowHeight,
|
||
ifPhone:false,
|
||
login_phone:'',//登录手机号
|
||
ifCode:false,
|
||
login_code:'',//登录验证码
|
||
ifunitName:false,
|
||
login_unitName:'',//登录单位名称
|
||
ifPassword:false,
|
||
login_password:'',//登录密码
|
||
codeText:'获取验证码' ,// 获取验证码按钮文字
|
||
flagCode:true ,// 允许点击获取验证码
|
||
countDown:null,
|
||
login_type:'mobile',// 登录方式默认手机验证码登录 account：账号密码登陆
|
||
login_type_text:'账号密码'
|
||
};
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
methods: {
|
||
// 提交事件
|
||
submitEv(){
|
||
if(this.checkEmpty()){
|
||
let params = {
|
||
login_type: this.login_type, // 登陆手机类型： mobile：手机登陆、account：账号密码登陆
|
||
phone: this.login_type == 'mobile' ? this.login_phone : '', // 手机号码，login_type 为 mobile 时必填
|
||
password: this.login_password, // 密码，login_type 为 account 时必填
|
||
sms_code: this.login_code, // 短信验证码，login_type 为 mobile 时必填
|
||
username: this.login_type == 'account' ? this.login_phone : '', //账号，login_type 为 account 时必填
|
||
affiliation: this.login_unitName // 单位名称
|
||
}
|
||
this.$requst.post('/universal/api.login/login',params).then(res=>{
|
||
if(res.code==1) {
|
||
this.$toolAll.tools.showToast('登录成功');
|
||
// 缓存token和角色类型
|
||
uni.setStorageSync('token',res.data.token);
|
||
// 角色(1：业务员、2：客户、3：客服、4：工程师)
|
||
uni.setStorageSync('type_id',res.data.type_id);
|
||
setTimeout(()=>{
|
||
uni.reLaunch({
|
||
url:'/pages/tabbar/pagehome/pagehome'
|
||
})
|
||
},2000)
|
||
} else {
|
||
this.$toolAll.tools.showToast(res.msg);
|
||
}
|
||
})
|
||
}
|
||
},
|
||
// 获取验证码
|
||
getCode(){
|
||
if(this.$toolAll.tools.isPhone(this.login_phone)) {
|
||
this.$toolAll.tools.showToast('请输入正确的手机号');
|
||
} else {
|
||
if(this.flagCode) {
|
||
this.flagCode = false;
|
||
let count = 60;
|
||
this.codeText = `${count}S重新获取`
|
||
this.countDown = setInterval(()=>{
|
||
count--;
|
||
count < 10 ? this.codeText = `0${count}S重新获取` : this.codeText = `${count}S重新获取`;
|
||
if(count==0) {
|
||
this.codeText = `重新获取`;
|
||
clearInterval(this.countDown);
|
||
this.flagCode = true;
|
||
}
|
||
},1000)
|
||
// 调用获取短信事件
|
||
this.getMessage(this.login_phone);
|
||
}
|
||
}
|
||
},
|
||
// 获取短信事件
|
||
getMessage(phone){
|
||
this.$requst.post('/universal/api.login/send_sms',{phone}).then(res=>{
|
||
this.$toolAll.tools.showToast(res.msg);
|
||
if(res.code==0) {
|
||
this.codeText = '获取验证码';
|
||
clearInterval(this.countDown);
|
||
}
|
||
})
|
||
},
|
||
// 检测是否某个输入框为空
|
||
checkEmpty(){
|
||
let ifEmpty = true;
|
||
if(this.$toolAll.tools.isPhone(this.login_phone)) {
|
||
this.$toolAll.tools.showToast('手机号格式不正确');
|
||
ifEmpty = false;
|
||
return;
|
||
}
|
||
if(this.login_type_text=='账号密码') {
|
||
if(!this.login_code) {
|
||
this.$toolAll.tools.showToast('请输入验证码');
|
||
ifEmpty = false;
|
||
return;
|
||
}
|
||
} else {
|
||
if(!this.login_password) {
|
||
this.$toolAll.tools.showToast('请输入密码');
|
||
ifEmpty = false;
|
||
return;
|
||
}
|
||
}
|
||
|
||
if(!this.login_unitName) {
|
||
this.$toolAll.tools.showToast('请输入单位名称');
|
||
ifEmpty = false;
|
||
return;
|
||
}
|
||
return ifEmpty;
|
||
},
|
||
// 输入框获取焦点
|
||
inputFocusEv(index){
|
||
switch (index){
|
||
case 0:
|
||
this.login_phone ? this.ifPhone = true : this.ifPhone = false;
|
||
break;
|
||
case 1:
|
||
this.login_code ? this.ifCode = true : this.ifCode = false;
|
||
break;
|
||
case 2:
|
||
this.login_unitName ? this.ifunitName = true : this.ifunitName = false;
|
||
break;
|
||
case 3:
|
||
this.login_password ? this.ifPassword = true : this.ifPassword = false;
|
||
break;
|
||
}
|
||
},
|
||
// 输入框失去焦点
|
||
inputBlurEv(index){
|
||
switch (index){
|
||
case 0:
|
||
setTimeout(()=>{this.ifPhone = false;},100)
|
||
break;
|
||
case 1:
|
||
setTimeout(()=>{this.ifCode = false;},100)
|
||
break;
|
||
case 2:
|
||
setTimeout(()=>{this.ifunitName = false;},100)
|
||
break;
|
||
case 3:
|
||
setTimeout(()=>{this.ifPassword = false;},100)
|
||
break;
|
||
}
|
||
},
|
||
// 清除手机号
|
||
clearInput(index){
|
||
switch (index){
|
||
case 0:
|
||
this.login_phone = '';
|
||
break;
|
||
case 1:
|
||
this.login_code = '';
|
||
break;
|
||
case 2:
|
||
this.login_unitName = '';
|
||
break;
|
||
case 3:
|
||
this.login_password = '';
|
||
break;
|
||
}
|
||
},
|
||
// 切换登录方式
|
||
switchType(){
|
||
if(this.login_type_text=="账号密码") {
|
||
this.login_type = 'account';
|
||
this.login_type_text = '验证码';
|
||
this.login_code = '';
|
||
} else {
|
||
this.login_type = 'mobile';
|
||
this.login_type_text = '账号密码';
|
||
this.login_password = '';
|
||
}
|
||
},
|
||
// 前往注册页面
|
||
goRegister(){
|
||
uni.navigateTo({
|
||
url:'/pages/register/register'
|
||
})
|
||
},
|
||
// 前往找回密码页面
|
||
goForget(){
|
||
uni.navigateTo({
|
||
url:'/pages/forget/forget'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
page{background-color: #FFFFFF;}
|
||
</style>
|