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.
386 lines
7.5 KiB
386 lines
7.5 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"> 忘记密码？</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 =>{
|
|
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",
|
|
});
|
|
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: 440px;
|
|
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;
|
|
}
|
|
|
|
/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;
|
|
}
|
|
}
|
|
|
|
/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;
|
|
}
|
|
|
|
/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;
|
|
}
|
|
|
|
/deep/ .u-form-item__body__left__content__label {
|
|
width: 100px;
|
|
font-size: 22px;
|
|
color: #000000;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
/deep/.u-input__content__field-wrapper__field {
|
|
height: 48px;
|
|
line-height: 48px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
/deep/.ant-input {
|
|
font-size: 22px;
|
|
}
|
|
|
|
/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, .6) ;
|
|
width: 500px;
|
|
|
|
|
|
text-align: left;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-content: center;
|
|
|
|
.p-note {
|
|
color: #10b884;
|
|
}
|
|
}
|
|
}
|
|
</style>
|