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.
437 lines
8.0 KiB
437 lines
8.0 KiB
<template>
|
|
<div>
|
|
<div class="divbox">
|
|
<div class="div-left">
|
|
<image
|
|
class="logo"
|
|
src="../../imgs/logo.png"
|
|
mode="widthFix"
|
|
></image>
|
|
</div>
|
|
<div class="div-right">
|
|
<h1 class="h1-title">内部会议系统</h1>
|
|
<u-form
|
|
:model="form"
|
|
:rules="rules"
|
|
ref="uForm"
|
|
label-position="top"
|
|
label-width="100"
|
|
class="view-form"
|
|
>
|
|
<u-form-item label="" prop="username">
|
|
<view class="form-item-box">
|
|
<u-input
|
|
autocomplete="new-password"
|
|
class="form-item-input"
|
|
v-model="form.username"
|
|
placeholder="请输入用户名"
|
|
/>
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item
|
|
label=""
|
|
prop="password"
|
|
class="form-item-pass"
|
|
style="padding-bottom: 0"
|
|
>
|
|
<view
|
|
class="form-item-box"
|
|
style="display: flex; align-items: center"
|
|
>
|
|
<u-input
|
|
:type="!passShow ? 'password' : ''"
|
|
class="form-item-input"
|
|
autocomplete="new-password"
|
|
v-model="form.password"
|
|
placeholder="请输入密码"
|
|
/>
|
|
<image
|
|
@click="passShow = !passShow"
|
|
v-if="passShow"
|
|
mode="aspectFit"
|
|
class="form-item-img"
|
|
src="../../imgs/xyj.png"
|
|
style="margin-right: 14px"
|
|
></image>
|
|
<image
|
|
@click="passShow = !passShow"
|
|
v-else
|
|
mode="aspectFit"
|
|
class="form-item-img"
|
|
src="../../imgs/xyj1.png"
|
|
style="margin-right: 14px"
|
|
></image>
|
|
</view>
|
|
</u-form-item>
|
|
|
|
<u-form-item label="" prop="code">
|
|
<view style="width: 100%; display: flex">
|
|
<view class="form-item-box" style="flex: 1">
|
|
<u-input
|
|
autocomplete="off"
|
|
class="form-item-input"
|
|
v-model="form.code"
|
|
placeholder="请输入验证码"
|
|
/>
|
|
</view>
|
|
<view
|
|
class="code-imagebox"
|
|
@click="getCaptchaImage()"
|
|
>
|
|
<image
|
|
class="code-image"
|
|
:src="codeUrl"
|
|
alt=""
|
|
></image>
|
|
</view>
|
|
</view>
|
|
</u-form-item>
|
|
<view @click="show = true" style="text-align: right">
|
|
忘记密码？</view
|
|
>
|
|
</u-form>
|
|
|
|
<view class="log-but" @click="handleLogin"> 登录 </view>
|
|
</div>
|
|
</div>
|
|
<u-modal
|
|
:show="show"
|
|
:content="configData"
|
|
@confirm="show = false"
|
|
></u-modal>
|
|
<u-toast ref="uToast"></u-toast>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { mapMutations, mapState } from 'vuex';
|
|
import { login, captchaImage, config } from '@/common/userApi';
|
|
export default {
|
|
name: 'SignIn',
|
|
components: {},
|
|
data() {
|
|
return {
|
|
show: false,
|
|
codeUrl: '', // 图片验证码
|
|
passShow: false,
|
|
form: {
|
|
username: '',
|
|
password: '',
|
|
},
|
|
configData: '',
|
|
rules: {
|
|
username: [
|
|
{
|
|
required: true,
|
|
message: '请输入用户名',
|
|
trigger: ['blur'],
|
|
},
|
|
],
|
|
password: [
|
|
{
|
|
required: true,
|
|
message: '请输入密码',
|
|
trigger: ['blur'],
|
|
},
|
|
],
|
|
code: [
|
|
{
|
|
required: true,
|
|
message: '请输入验证码',
|
|
trigger: ['blur'],
|
|
},
|
|
],
|
|
},
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState('ht', ['reportId']),
|
|
},
|
|
created() {
|
|
this.getCaptchaImage(); // 获取验证码
|
|
this.getConfig(); // 获取配置信息
|
|
this.keyEnter();
|
|
},
|
|
methods: {
|
|
...mapMutations(['setTrainPath']),
|
|
// 监听回车事件
|
|
keyEnter() {
|
|
document.onkeydown = (e) => {
|
|
if (e.keyCode == 13) {
|
|
this.handleLogin(); // 登录
|
|
}
|
|
};
|
|
},
|
|
// 获取验证码
|
|
async getConfig() {
|
|
const res = await config('sys.password.forget');
|
|
const { code, rows, msg } = res;
|
|
if (code === 200) {
|
|
this.configData = rows[0]?.configValue || '';
|
|
}
|
|
},
|
|
// 获取验证码
|
|
async getCaptchaImage() {
|
|
const res = await captchaImage();
|
|
const { code, data, msg } = res;
|
|
if (code === 200) {
|
|
this.codeUrl = 'data:image/gif;base64,' + res.img;
|
|
this.form.uuid = res.uuid;
|
|
}
|
|
},
|
|
// 登录
|
|
async handleLogin() {
|
|
this.$refs.uForm.validate().then(async (formRes) => {
|
|
const param = {
|
|
username: this.form.username,
|
|
password: this.form.password,
|
|
code: this.form.code, // 4训练师端、5居家端、6医生端
|
|
uuid: this.form.uuid,
|
|
};
|
|
const res = await login(param);
|
|
const { code, data, msg } = res;
|
|
if (code === 200) {
|
|
uni.setStorageSync('userToken', res.token);
|
|
uni.setStorageSync('userName', this.form.username);
|
|
uni.navigateTo({
|
|
url: '/pages/index/index',
|
|
});
|
|
// 全屏
|
|
var docElm = document.documentElement;
|
|
if (docElm.requestFullscreen) {
|
|
docElm.requestFullscreen();
|
|
} else if (docElm.mozRequestFullScreen) {
|
|
docElm.mozRequestFullScreen();
|
|
} else if (docElm.webkitRequestFullScreen) {
|
|
docElm.webkitRequestFullScreen();
|
|
} else if (elem.msRequestFullscreen) {
|
|
elem.msRequestFullscreen();
|
|
}
|
|
this.handleSuccess('登录成功');
|
|
} else {
|
|
this.handleError(msg || '登录失败');
|
|
}
|
|
});
|
|
},
|
|
// 错误提示信息
|
|
handleError(_tips) {
|
|
this.$refs.uToast.show({
|
|
type: 'error',
|
|
icon: false,
|
|
message: _tips,
|
|
});
|
|
},
|
|
// 正确提示信息
|
|
handleSuccess(_tips) {
|
|
this.$refs.uToast.show({
|
|
type: 'success',
|
|
icon: false,
|
|
message: _tips,
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.view-form {
|
|
width: 80%;
|
|
}
|
|
|
|
.code-imagebox {
|
|
width: 100px;
|
|
margin-left: 12px;
|
|
|
|
.code-image {
|
|
width: 100px;
|
|
height: 48px;
|
|
}
|
|
}
|
|
|
|
.log-but {
|
|
width: 400px;
|
|
line-height: 48px;
|
|
background: #3d78ff;
|
|
border-radius: 4px;
|
|
font-size: 20px;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
margin-top: 36px;
|
|
}
|
|
|
|
.checkbox-box {
|
|
display: flex;
|
|
}
|
|
|
|
.view-yd {
|
|
width: 440px;
|
|
}
|
|
|
|
::v-deep.u-checkbox__icon-wrap--square {
|
|
width: 18px !important;
|
|
height: 18px !important;
|
|
}
|
|
|
|
.pawss {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: #3d78ff;
|
|
|
|
.forget {
|
|
font-size: 14px !important;
|
|
}
|
|
}
|
|
|
|
::v-deep .u-checkbox-label--left span {
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
.form-fg {
|
|
height: 30px;
|
|
}
|
|
|
|
.form-item-img {
|
|
width: 20px;
|
|
height: 30px;
|
|
}
|
|
|
|
.ipt-box {
|
|
width: 380px;
|
|
margin: 0 100px;
|
|
}
|
|
|
|
.code-wrap {
|
|
display: flex;
|
|
|
|
.code-field {
|
|
flex: 1;
|
|
}
|
|
|
|
.code-btn {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
i {
|
|
position: absolute;
|
|
top: 30px;
|
|
right: 15px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.forgetPassword {
|
|
cursor: pointer;
|
|
color: rgba(0, 0, 0, 0.54);
|
|
}
|
|
|
|
.forgetPassword:hover {
|
|
text-decoration: underline;
|
|
color: rgba(0, 0, 0, 0.87);
|
|
}
|
|
</style>
|
|
<style scoped lang="scss">
|
|
.form-item-box {
|
|
width: 100%;
|
|
border-radius: 4px 4px 4px 4px;
|
|
border: 1px solid #dcdfe6;
|
|
height: 46px;
|
|
}
|
|
|
|
.form-item-input {
|
|
height: 46px !important;
|
|
border-radius: 23px;
|
|
padding: 0 14px !important;
|
|
color: #333333;
|
|
box-sizing: border-box;
|
|
border: none;
|
|
}
|
|
|
|
::v-deep .uni-input-input {
|
|
//font-size: 50px;
|
|
}
|
|
|
|
.form-item-input:placeholder {
|
|
font-size: 16px;
|
|
color: #000;
|
|
}
|
|
|
|
.form-item-codebut {
|
|
font-size: 12px;
|
|
color: #888888;
|
|
width: 100px;
|
|
text-align: center;
|
|
border-left: 1px solid #d8d8d8;
|
|
}
|
|
|
|
::v-deep .u-form-item__body__left__content__label {
|
|
width: 100px;
|
|
font-size: 22px;
|
|
color: #000000;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
::v-deep.u-input__content__field-wrapper__field {
|
|
height: 48px;
|
|
line-height: 48px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
::v-deep.ant-input {
|
|
font-size: 22px;
|
|
}
|
|
|
|
::v-deep.ant-input-affix-wrapper .ant-input:not(:first-child) {
|
|
padding-left: 40px;
|
|
}
|
|
|
|
.h1-title {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 36px;
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.divbox {
|
|
display: flex;
|
|
background-image: url('../../imgs/left.png');
|
|
background-position: left bottom;
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
.div-left {
|
|
position: relative;
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.equipment {
|
|
position: absolute;
|
|
bottom: 4px;
|
|
color: #6fcd9d;
|
|
}
|
|
}
|
|
}
|
|
.divbox {
|
|
width: 100%;
|
|
height: 100vh;
|
|
display: flex;
|
|
|
|
.div-left {
|
|
flex: 2;
|
|
}
|
|
|
|
.div-right {
|
|
background: rgba(255, 255, 255, 0.6);
|
|
width: 500px;
|
|
|
|
text-align: left;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-content: center;
|
|
|
|
.p-note {
|
|
color: #10b884;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|