|
<template>
|
<div class="login-content">
|
<div class="login-body">
|
<van-form ref='form' :key="formKey">
|
<van-tabs v-model="active" @click="onClick">
|
<van-tab v-for="(item,index) in tabList" :title="item" :key="index">
|
<div v-if="index == 0">
|
<van-cell-group>
|
<div class="from-li">
|
<van-field
|
v-model="phone"
|
name="phone"
|
placeholder="用户手机号"
|
:rules="rules.phone"
|
maxlength="11"
|
oninput="value=value.replace(/[^\d]/g,'')"
|
@blur="phoneBlur()"
|
/>
|
</div>
|
<div class="from-li">
|
<van-field
|
readonly
|
clickable
|
is-link
|
v-model="comp_name"
|
name="comp_name"
|
placeholder="点击选择企业"
|
@click="showComp = true"
|
:rules="rules.comp_name"
|
/>
|
<van-popup v-model="showComp" position="bottom">
|
<van-picker
|
:defaultIndex="defaultIndex"
|
show-toolbar
|
:columns="compList"
|
value-key="compname"
|
@confirm="onConfirm"
|
@cancel="showComp = false"
|
/>
|
</van-popup>
|
</div>
|
<div class="from-li">
|
<van-field
|
v-model="code"
|
name="code"
|
center
|
clearable
|
:rules="rules.code"
|
maxlength="6"
|
placeholder="请输入验证码">
|
<div v-bind:class="{ codeBtn: smsDisabled }" slot="button" @click="getCode()" :disabled="smsDisabled">
|
{{codeBtn}}
|
</div>
|
</van-field>
|
</div>
|
</van-cell-group>
|
</div>
|
<div v-if="index == 1">
|
<van-cell-group>
|
<div class="from-li">
|
<van-field
|
v-model="phone"
|
name="phone"
|
placeholder="用户手机号"
|
:rules="rules.phone"
|
maxlength="11"
|
oninput="value=value.replace(/[^\d]/g,'')"
|
@blur="phoneBlur()"
|
/>
|
</div>
|
<div class="from-li">
|
<van-field
|
readonly
|
clickable
|
is-link
|
v-model="comp_name"
|
name="comp_name"
|
placeholder="点击选择企业"
|
@click="showComp = true"
|
:rules="rules.comp_name"
|
/>
|
<van-popup v-model="showComp" position="bottom">
|
<van-picker
|
:defaultIndex="defaultIndex"
|
show-toolbar
|
:columns="compList"
|
value-key="compname"
|
@confirm="onConfirm"
|
@cancel="showComp = false"
|
/>
|
</van-popup>
|
</div>
|
<div class="from-li">
|
<van-field
|
v-model="password"
|
name="password"
|
placeholder="密码"
|
:rules="rules.password"
|
type="password"
|
/>
|
</div>
|
</van-cell-group>
|
</div>
|
</van-tab>
|
</van-tabs>
|
<div class="form-footer">
|
<van-button type="primary" round block @click="submit">提交</van-button>
|
</div>
|
</van-form>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { mapActions, mapState } from "vuex";
|
export default {
|
data() {
|
return {
|
phone:'',
|
password:'',
|
code:'',
|
comp_id:'',
|
tabList:['验证码登录','密码登录'],
|
active:0,
|
codeBtn:"获取验证码",
|
compList:[],
|
comp_name:'',
|
defaultIndex:'',
|
showComp:false,
|
formKey:1,
|
smsTimer:false,
|
smsDisabled:false,//可以点击
|
rules:{
|
phone:[{
|
pattern:/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
|
message:'请输入正确的手机号',
|
trigger:'onBlur'
|
}],
|
comp_name:[{
|
required: true,
|
message:'请选择企业',
|
trigger:'onChange'
|
}],
|
code:[{
|
required: true,
|
message:'请输入验证码',
|
trigger:'onBlur'
|
},
|
{
|
pattern: /^\d{4}$/,
|
message:'请输入4位数字验证码',
|
trigger:'onBlur'
|
},
|
],
|
password:[{
|
required: true,
|
message:'请输入密码',
|
trigger:'onBlur'
|
}],
|
}
|
};
|
},
|
created() {
|
if(this.token){
|
window.location.href = "/list";
|
}
|
},
|
computed: {
|
...mapState({ token: "token" }),
|
},
|
methods: {
|
...mapActions({
|
sendSmsApi: "sendSms", // 发送验证码
|
codeLoginApi: "codeLogin", // 验证码登录
|
pwdLoginApi: "pwdLogin", // 账户密码登录
|
set_token: "set_token", // 设置缓存
|
set_cookie:'set_cookie', // 设置缓存
|
getCompList: "getCompList", // 获取企业列表
|
}),
|
submit(){
|
let _this = this;
|
if(_this.active == 0){
|
// 全局表单验证
|
_this.$refs.form.validate().then(() => {
|
_this.codeLoginApi({query:
|
{
|
ac_name:_this.phone,
|
code:_this.code,
|
comp_id:_this.comp_id,
|
comp_name:_this.comp_name,
|
}
|
}).then((res) =>{
|
if(res.code == 0){
|
_this.$toast.success('登录成功');
|
let obj = { token: res.result.sid };
|
_this.set_token(obj);
|
_this.set_cookie();
|
_this.$router.push({ path: "/list" });
|
}
|
}).catch(err => {
|
_this.$toast.fail(err.msg)
|
});
|
}).catch(() => {})
|
}else{
|
// 全局表单验证
|
_this.$refs.form.validate().then(() => {
|
_this.pwdLoginApi({query:
|
{
|
ac_name:_this.phone,
|
password:_this.password,
|
comp_id:_this.comp_id,
|
comp_name:_this.comp_name,
|
}
|
}).then((res) =>{
|
console.log(res,'成功')
|
if(res.code == 200){
|
_this.$toast.success('登录成功');
|
let obj = { token: res.result.sid };
|
_this.set_token(obj);
|
_this.set_cookie();
|
_this.$router.push({ path: "/list" });
|
}
|
}).catch(err => {
|
console.log(err,'失败')
|
_this.$toast.fail(err.msg)
|
});
|
}).catch(() => {})
|
}
|
},
|
getCode(){
|
console.log(1);
|
let _this = this;
|
if(_this.smsDisabled){return;}
|
_this.$refs.form.validate('phone').then(() => {
|
_this.sendSmsApi({query:
|
{
|
ac_name:_this.phone,
|
}
|
}).then((res) =>{
|
if(res.code == 0){
|
_this.$toast.success('发送成功');
|
let time = 60;
|
_this.smsDisabled = true;
|
_this.smsTimer = setInterval(function(){
|
time = time - 1;
|
if(time > 0){
|
_this.codeBtn = time + "秒后重新获取";
|
}else{
|
clearInterval(_this.smsTimer);
|
_this.codeBtn = "重新获取验证码";
|
_this.smsDisabled = false;
|
}
|
},1000)
|
}
|
}).catch(err => {
|
_this.$toast.fail(err.msg)
|
});
|
}).catch(() => {})
|
},
|
onClick(index){
|
this.active = index;
|
this.formKey++;
|
},
|
phoneBlur(){
|
let _this = this;
|
if(_this.phone){
|
_this.getCompList({query:
|
{
|
ac_name:_this.phone,
|
}
|
}).then((res) =>{
|
if(res.code == 0){
|
_this.compList = res.result;
|
}
|
}).catch(err => {
|
_this.$toast('企业信息为空，请检查账号是否正确');
|
_this.compList = [];
|
});
|
}
|
},
|
onConfirm(item){
|
if(item){
|
this.comp_name = item.compname;
|
this.comp_id = item.comp_id;
|
}
|
this.showComp = false;
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.login-content{
|
height: 100%;
|
width: 100%;
|
position: relative;
|
background: white;
|
.login-body{
|
padding: 110px 42px 0 42px;
|
/deep/ .van-tabs__line{
|
background-color: #1CA2FF;
|
}
|
/deep/ .van-tabs__wrap{
|
.van-tab{
|
font-size: 16px;
|
}
|
}
|
.from-li{
|
position: relative;
|
margin-top: 88px;
|
}
|
/deep/ .van-cell{
|
padding: 0 0;
|
align-items: center;
|
border-bottom: 1px solid #ddd;
|
position:unset;
|
}
|
/deep/ .van-field__button{
|
.codeBtn{
|
color: #999999;
|
}
|
}
|
/deep/ .van-cell__value{
|
position:unset;
|
}
|
[class*=van-hairline]::after{
|
border:none;
|
}
|
/deep/ .van-field__body{
|
height: 50px;
|
}
|
/deep/ .van-field__error-message{
|
height: 20px;
|
top:50px;
|
}
|
.van-field--error{
|
border-bottom: 1px solid #ee0a24;
|
}
|
.form-footer{
|
margin-top: 100px;
|
}
|
}
|
}
|
|
</style>
|
