forked from TALL/check-work
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
230 lines
8.2 KiB
230 lines
8.2 KiB
5 years ago
|
<template>
|
||
|
|
<div class="login d-flex justify-center">
|
||
|
|
<div class="d-flex flex-column box">
|
||
|
|
<!-- 切换登录方式 -->
|
||
|
|
<div class="d-flex justify-center my-4">
|
||
|
|
<a-button :class="type === 1 ? 'baseColor ' : 'textColor'" @click="type = 1" class="d-flex flex-column" type="link">
|
||
|
|
<span>免密登录</span>
|
||
|
|
<div class="head-top mt-1" v-if="type === 1"></div>
|
||
|
|
</a-button>
|
||
|
|
<a-button :class="type === 3 ? 'baseColor ' : 'textColor'" @click="type = 3" class="d-flex flex-column" type="link">
|
||
|
|
<span>账号登录</span>
|
||
|
|
<div class="head-top mt-1" v-if="type === 3"></div>
|
||
|
|
</a-button>
|
||
|
|
</div>
|
||
|
|
<!-- 免密登录 -->
|
||
|
|
<a-row class="d-flex flex-nowrap mt-4" type="flex" v-if="type === 1">
|
||
|
|
<a-col :span="8" class="explain" flex="auto">
|
||
|
|
<!-- <a-form :form="form" v-model="valid"> -->
|
||
|
|
<a-form :form="form" @submit="handleSignIn">
|
||
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="手机号">
|
||
|
|
<a-input @change="changePhone" placeholder="请输入手机号" type="tel" v-decorator="['identifier', { rules: phoneRules }]" />
|
||
|
|
</a-form-item>
|
||
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="图片验证码" required>
|
||
|
|
<div class="d-flex flex-nowrap">
|
||
|
|
<a-input placeholder="图片验证码" type="number" v-model="codeNum" />
|
||
|
|
<img :src="picCode.imageBase64" @click="changePicCode" class="code_img ml-2" v-if="picCode && picCode.imageBase64" />
|
||
|
|
<a-button @click="changePicCode" class="code_img ml-2" size="small" v-else>获取验证码</a-button>
|
||
|
|
<!-- <a-input v-decorator="['account', { rules: rules.account }]" /> -->
|
||
|
|
</div>
|
||
|
|
</a-form-item>
|
||
|
|
|
||
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="短信验证码">
|
||
|
|
<div class="d-flex flex-nowrap">
|
||
|
|
<a-input placeholder="请输入验证码" type="number" v-decorator="['credential', { rules: codeRules }]" />
|
||
|
|
<a-button class="ml-2" disabled type="primary" v-if="showInterval">重新发送 {{ interval }}</a-button>
|
||
|
|
<a-button :disabled="identifier && identifier.length !== 11" @click="getCode" class="ml-2" type="primary" v-else>
|
||
|
|
获取验证码
|
||
|
|
</a-button>
|
||
|
|
</div>
|
||
|
|
</a-form-item>
|
||
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="来源">
|
||
|
|
<a-select placeholder="请选择来源" v-decorator="['source']">
|
||
|
|
<a-select-option value="1">绿谷</a-select-option>
|
||
|
|
</a-select>
|
||
|
|
</a-form-item>
|
||
|
|
|
||
|
|
<div class="d-flex flex-row-reverse">
|
||
|
|
<a-button block class="my-5" html-type="submit" style="width: 75%" type="primary">现在登录</a-button>
|
||
|
|
</div>
|
||
|
|
</a-form>
|
||
|
|
<div class="d-flex flex-row-reverse mt-1">
|
||
|
|
<div class="d-flex flex-wrap" style="width: 75%">
|
||
|
|
<router-link tag="span" to="/register">
|
||
|
|
<span class="baseColor">新用户注册</span>
|
||
|
|
</router-link>
|
||
|
|
<div class="flex-1"></div>
|
||
|
|
<router-link tag="span" to="/forget-password">
|
||
|
|
<span class="textColor">忘记密码</span>
|
||
|
|
</router-link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="4" flex="150px">
|
||
|
|
<div class="d-flex flex-column">
|
||
|
|
<div>说明</div>
|
||
|
|
<div>1.登录账号XXX</div>
|
||
|
|
</div>
|
||
|
|
</a-col>
|
||
|
|
</a-row>
|
||
|
|
<!-- 账号登录 -->
|
||
|
|
<a-row class="d-flex flex-nowrap mt-4" type="flex" v-if="type === 3">
|
||
|
|
<a-col :span="8" class="explain" flex="auto">
|
||
|
|
<a-form :form="form" @submit="handleSignIn">
|
||
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="账号">
|
||
|
|
<a-input
|
||
|
|
placeholder="请输入用户名/手机号"
|
||
|
|
v-decorator="['identifier', { rules: [{ required: true, message: '请输入用户名/手机号' }] }]"
|
||
|
|
/>
|
||
|
|
</a-form-item>
|
||
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="密码">
|
||
|
|
<a-input-password placeholder="请输入6-16位数字和字母密码" v-decorator="['credential', { rules: passwordRules }]" />
|
||
|
|
</a-form-item>
|
||
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="来源">
|
||
|
|
<a-select placeholder="请选择来源" v-decorator="['source']">
|
||
|
|
<a-select-option value="1">绿谷</a-select-option>
|
||
|
|
</a-select>
|
||
|
|
</a-form-item>
|
||
|
|
<div class="d-flex flex-row-reverse">
|
||
|
|
<a-button block class="my-5" html-type="submit" style="width: 75%" type="primary">现在登录</a-button>
|
||
|
|
</div>
|
||
|
|
</a-form>
|
||
|
|
<div class="d-flex flex-row-reverse mt-1">
|
||
|
|
<div class="d-flex flex-wrap" style="width: 75%">
|
||
|
|
<router-link tag="span" to="/register">
|
||
|
|
<span class="baseColor">新用户注册</span>
|
||
|
|
</router-link>
|
||
|
|
<div class="flex-1"></div>
|
||
|
|
<router-link tag="span" to="/forget-password">
|
||
|
|
<span class="textColor">忘记密码</span>
|
||
|
|
</router-link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="4" flex="150px">
|
||
|
|
<div class="d-flex flex-column">
|
||
|
|
<div>说明</div>
|
||
|
|
<div>1.登录账号XXX</div>
|
||
|
|
</div>
|
||
|
|
</a-col>
|
||
|
|
</a-row>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { mapActions, mapState } from 'vuex';
|
||
|
|
import { SIGN_IN_CLIENTS } from '@/config/user';
|
||
|
|
import mixin from './mixin';
|
||
|
|
|
||
|
|
const formItemLayout = {
|
||
|
|
labelCol: { span: 6 },
|
||
|
|
wrapperCol: { span: 18 },
|
||
|
|
};
|
||
|
|
const formTailLayout = {
|
||
|
|
labelCol: { span: 6 },
|
||
|
|
wrapperCol: { span: 18, offset: 6 },
|
||
|
|
};
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'Login',
|
||
|
|
mixins: [mixin],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
formItemLayout,
|
||
|
|
formTailLayout,
|
||
|
|
form: this.$form.createForm(this, { name: 'login' }),
|
||
|
|
type: 1,
|
||
|
|
identifier: '',
|
||
|
|
codeNum: '',
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
computed: mapState(['picCode']),
|
||
|
|
|
||
|
|
created() {
|
||
|
|
this.sendPicCode();
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
...mapActions(['signIn', 'sendCode', 'sendPicCode']),
|
||
|
|
changePhone(e) {
|
||
|
|
this.identifier = e.target.value;
|
||
|
|
},
|
||
|
|
|
||
|
|
// 刷新验证码
|
||
|
|
changePicCode() {
|
||
|
|
this.sendPicCode();
|
||
|
|
},
|
||
|
|
|
||
|
|
// 获取验证码
|
||
|
|
async getCode() {
|
||
|
|
try {
|
||
|
|
const params = {
|
||
|
|
phone: this.identifier,
|
||
|
|
verificationCodeId: this.picCode.verificationCodeId,
|
||
|
|
verificationCodeValue: this.codeNum,
|
||
|
|
};
|
||
|
|
await this.sendCode(params);
|
||
|
|
this.getCodeInterval();
|
||
|
|
} catch (error) {
|
||
|
|
throw new Error(`SignIn.vue method getCode: ${error}`);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// 登录
|
||
|
|
async handleSignIn(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
this.form.validateFields(async (err, values) => {
|
||
|
|
if (!err) {
|
||
|
|
console.log('Received values of form: ', values);
|
||
|
|
try {
|
||
|
|
const { identifier, credential, source } = values;
|
||
|
|
const { type } = this;
|
||
|
|
const params = { data: { identifier, credential, source }, type, client: SIGN_IN_CLIENTS.h5 };
|
||
|
|
await this.signIn(params);
|
||
|
|
// 没有特殊情况就跳转到首页
|
||
|
|
const { query } = this.$route;
|
||
|
|
this.$router.replace({ path: '/', query });
|
||
|
|
} catch (error) {
|
||
|
|
console.log(`Login.vue methods handleSignIn: ${error}`);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="stylus" scoped>
|
||
|
|
.login {
|
||
|
|
min-height: 500px;
|
||
|
|
max-width: 1260px;
|
||
|
|
margin: 24px auto 40px;
|
||
|
|
background: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.head-top {
|
||
|
|
width: 58px;
|
||
|
|
height: 2px;
|
||
|
|
background: #13acc4;
|
||
|
|
}
|
||
|
|
|
||
|
|
.box {
|
||
|
|
max-width: 700px;
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.explain {
|
||
|
|
padding-right: 28px;
|
||
|
|
margin-right: 28px;
|
||
|
|
border-right: 1px solid #EEEEEE;
|
||
|
|
}
|
||
|
|
|
||
|
|
.code_img {
|
||
|
|
width: 102px !important;
|
||
|
|
height: 32px !important;
|
||
|
|
}
|
||
|
|
</style>
|