563 lines
21 KiB
Vue
563 lines
21 KiB
Vue
<template>
|
|
<view>
|
|
<view class="upper-bgd">
|
|
<view class="logo">
|
|
<image src="../../static/logo.png" mode=""></image>
|
|
</view>
|
|
<view class="tit"> 智慧仓储管理平台 </view>
|
|
</view>
|
|
<view class="switch-log">
|
|
<view
|
|
:class="[{ active: switchStatus == 1 }]"
|
|
@click="switchUpper(1)">
|
|
账号登录
|
|
</view>
|
|
<view
|
|
:class="[{ active: switchStatus == 2 }]"
|
|
@click="switchUpper(2)">
|
|
手机登录
|
|
</view>
|
|
</view>
|
|
<view class="login-area">
|
|
<uni-forms
|
|
v-show="switchStatus == 1"
|
|
ref="accountForm"
|
|
:modelValue="accountFormData"
|
|
:rules="accountRules"
|
|
class="form-area"
|
|
label-position="top">
|
|
<uni-forms-item
|
|
name="username"
|
|
required
|
|
label="用户名"
|
|
label-width="100">
|
|
<uni-easyinput
|
|
placeholder="请输入用户名称"
|
|
maxlength="60"
|
|
v-model="accountFormData.username"></uni-easyinput>
|
|
</uni-forms-item>
|
|
<uni-forms-item
|
|
name="password"
|
|
required
|
|
label="密码"
|
|
label-width="100">
|
|
<uni-easyinput
|
|
type="password"
|
|
placeholder="请输入密码"
|
|
maxlength="60"
|
|
v-model="accountFormData.password"></uni-easyinput>
|
|
</uni-forms-item>
|
|
<text
|
|
style="
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
color: #3689ff;
|
|
font-size: 14px;
|
|
">
|
|
忘记密码
|
|
</text>
|
|
<button class="submit-btn" @click="accountSubmit">登录</button>
|
|
</uni-forms>
|
|
<uni-forms
|
|
v-show="switchStatus == 2"
|
|
ref="veriForm"
|
|
:modelValue="veriFormData"
|
|
:rules="veriRules"
|
|
class="form-area"
|
|
label-position="top">
|
|
<uni-forms-item
|
|
name="phone"
|
|
required
|
|
label="手机号码"
|
|
label-width="100">
|
|
<uni-easyinput
|
|
placeholder="请输入手机号码"
|
|
v-model="veriFormData.phone"
|
|
maxlength="11"></uni-easyinput>
|
|
</uni-forms-item>
|
|
<uni-forms-item
|
|
required
|
|
label="图形验证码"
|
|
label-width="100"
|
|
name="imgCode">
|
|
<view class="code-img-wrapper">
|
|
<uni-easyinput
|
|
placeholder="请输入图形验证码"
|
|
v-model="veriFormData.imgCode"></uni-easyinput>
|
|
<img
|
|
:src="phoneCodeUrlNew"
|
|
@tap="
|
|
() => {
|
|
getImgCode();
|
|
}
|
|
" />
|
|
</view>
|
|
</uni-forms-item>
|
|
<uni-forms-item
|
|
name="code"
|
|
required
|
|
label="验证码"
|
|
label-width="100">
|
|
<uni-easyinput
|
|
maxlength="6"
|
|
placeholder="请输入短信验证码"
|
|
v-model="veriFormData.code"></uni-easyinput>
|
|
<button
|
|
class="count-down"
|
|
:disabled="sendDisabled"
|
|
@click="sendVeriCode"
|
|
style="font-size: 14px">
|
|
<span v-if="countDownStatus == 0">发送验证码</span>
|
|
<span v-if="countDownStatus == 1">
|
|
{{ countDown }}s
|
|
</span>
|
|
</button>
|
|
</uni-forms-item>
|
|
<button class="submit-btn" @click="veriSubmit">登录</button>
|
|
</uni-forms>
|
|
</view>
|
|
<u-loading-page
|
|
:loading="showLoading"
|
|
color="#000"
|
|
loading-text="登录中,请稍后..."></u-loading-page>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { authPath, publicPath, systemPath } from "../../public";
|
|
import store from "../../store/user";
|
|
import { Mcaptcha } from "../../utils/mcaptcha";
|
|
export default {
|
|
data() {
|
|
return {
|
|
showLoading: false,
|
|
accountFormData: {
|
|
username: "",
|
|
password: "",
|
|
},
|
|
veriFormData: {
|
|
phone: "",
|
|
code: "",
|
|
imgCode: "",
|
|
uuid: "",
|
|
},
|
|
switchStatus: 1,
|
|
phoneCodeUrlNew: "",
|
|
countDown: 60,
|
|
countDownStatus: 0,
|
|
sendDisabled: false,
|
|
givenCode: "",
|
|
accountRules: {
|
|
username: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
errorMessage: "请输入用户名称！",
|
|
},
|
|
],
|
|
},
|
|
password: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
errorMessage: "请输入密码！",
|
|
},
|
|
],
|
|
},
|
|
},
|
|
veriRules: {
|
|
phone: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
errorMessage: "请输入手机号码！",
|
|
},
|
|
{
|
|
pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
|
|
errorMessage: "请输入正确的手机号码！",
|
|
},
|
|
],
|
|
},
|
|
code: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
errorMessage: "请输入短信验证码",
|
|
},
|
|
],
|
|
},
|
|
imgCode: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
errorMessage: "请输入图形验证码！",
|
|
},
|
|
],
|
|
},
|
|
},
|
|
mcaptcha: null,
|
|
};
|
|
},
|
|
methods: {
|
|
switchUpper(count) {
|
|
this.getImgCode();
|
|
this.switchStatus = count;
|
|
},
|
|
|
|
/** 发送短信验证码按钮 */
|
|
sendVeriCode() {
|
|
// 1. 先校验手机号是否正确 和图形验证码是否输入
|
|
this.$refs.veriForm
|
|
.validateField(["phone", "imgCode"])
|
|
.then(async () => {
|
|
// 2. 校验通过调后台接口获取图形验证码
|
|
const params = {
|
|
phone: this.veriFormData.phone,
|
|
code: this.veriFormData.imgCode,
|
|
uuid: this.veriFormData.uuid,
|
|
};
|
|
const { data: messageRes } =
|
|
await this.$api.login.getMessageCode(params);
|
|
|
|
if (messageRes.code === 200) {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "验证码已发送",
|
|
});
|
|
this.countDownStatus = 1;
|
|
this.sendDisabled = true;
|
|
let timeInterval = setInterval(() => {
|
|
this.countDown -= 1;
|
|
}, 1000);
|
|
let timeOut = setTimeout(() => {
|
|
this.countDownStatus = 0;
|
|
this.countDown = 60;
|
|
this.sendDisabled = false;
|
|
clearInterval(timeInterval);
|
|
clearTimeout(timeOut);
|
|
}, 1000 * 60);
|
|
} else {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: `${messageRes.msg}`,
|
|
});
|
|
// 接口调取失败后刷新图形验证码
|
|
this.getImgCode();
|
|
}
|
|
})
|
|
.catch((err) => {});
|
|
|
|
if (true) return;
|
|
let that = this;
|
|
let phoneReg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
|
|
if (!phoneReg.test(that.veriFormData.phone)) {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "请输入正确格式的手机号！",
|
|
});
|
|
} else {
|
|
that.$api.login
|
|
.codeLogin({
|
|
phone: String(that.veriFormData.phone),
|
|
})
|
|
.then((res) => {
|
|
console.log(res);
|
|
if (res.data.code !== 200) {
|
|
// uni.showToast({
|
|
// icon:'none',
|
|
// title:res.data.msg
|
|
// })
|
|
uni.showModal({
|
|
title: "提示", //标题
|
|
content: res.data.msg, //提示内容
|
|
showCancel: false, //不显示取消按钮
|
|
});
|
|
} else {
|
|
that.countDownStatus = 1;
|
|
that.sendDisabled = true;
|
|
let timeInterval = setInterval(() => {
|
|
that.countDown -= 1;
|
|
}, 1000);
|
|
let timeOut = setTimeout(() => {
|
|
that.countDownStatus = 0;
|
|
that.countDown = 60;
|
|
that.sendDisabled = false;
|
|
clearInterval(timeInterval);
|
|
clearTimeout(timeOut);
|
|
}, 1000 * 60);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
uni.showToast({
|
|
icon: "error",
|
|
title: "验证码获取失败",
|
|
});
|
|
});
|
|
}
|
|
},
|
|
veriSubmit() {
|
|
// 1. 先校验手机号码和短信验证码
|
|
this.$refs.veriForm
|
|
.validateField(["phone", "code"])
|
|
.then(async () => {
|
|
// 2. 校验通过调登录接口
|
|
const { code, phone } = this.veriFormData;
|
|
const { data: res } = await this.$api.login.checkCode({
|
|
code,
|
|
phone,
|
|
});
|
|
if (res.code === 200) {
|
|
uni.setStorageSync("userInfo", res.data.login_user);
|
|
uni.setStorageSync("token", res.data.access_token);
|
|
uni.setStorageSync(
|
|
"roles",
|
|
res.data.login_user.roles
|
|
);
|
|
uni.setStorageSync(
|
|
"deptId",
|
|
res.data.login_user.sysUser.dept.deptId
|
|
);
|
|
|
|
const { data: resS } =
|
|
await this.$api.index.getUserInfo();
|
|
store.commit("SET_PERMISSIONS", resS.permissions);
|
|
uni.showToast({ icon: "none", title: "登录成功" });
|
|
setTimeout(() => {
|
|
uni.switchTab({
|
|
url: "/pages/index/index",
|
|
});
|
|
}, 500);
|
|
}
|
|
});
|
|
|
|
if (true) return;
|
|
let that = this;
|
|
that.$refs.veriForm.validate().then((formRes) => {
|
|
that.showLoading = true;
|
|
console.log(formRes);
|
|
that.$api.login
|
|
.checkCode(formRes)
|
|
.then((res) => {
|
|
console.log(res);
|
|
if (res.data.code == 200) {
|
|
uni.setStorageSync(
|
|
"userInfo",
|
|
res.data.data.login_user
|
|
);
|
|
uni.setStorageSync(
|
|
"token",
|
|
res.data.data.access_token
|
|
);
|
|
uni.setStorageSync(
|
|
"roles",
|
|
res.data.data.login_user.roles
|
|
);
|
|
uni.setStorageSync(
|
|
"deptId",
|
|
res.data.data.login_user.sysUser.dept.deptId
|
|
);
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "登录成功！",
|
|
success: async () => {
|
|
that.showLoading = false;
|
|
|
|
const res =
|
|
await this.$api.index.getUserInfo();
|
|
|
|
console.log(res, "用户权限----");
|
|
// uni.switchTab({
|
|
// url: '/pages/index/index'
|
|
// })
|
|
},
|
|
});
|
|
} else {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: res.data.msg,
|
|
success: () => {
|
|
that.showLoading = false;
|
|
},
|
|
});
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
});
|
|
},
|
|
accountSubmit() {
|
|
let that = this;
|
|
that.$refs.accountForm.validate().then((formData) => {
|
|
that.showLoading = true;
|
|
console.log(formData);
|
|
that.$api.login
|
|
.log(formData)
|
|
.then(async (res) => {
|
|
console.log(res);
|
|
if (res.data.code == 200) {
|
|
uni.setStorageSync(
|
|
"userInfo",
|
|
res.data.data.login_user
|
|
);
|
|
uni.setStorageSync(
|
|
"token",
|
|
res.data.data.access_token
|
|
);
|
|
uni.setStorageSync(
|
|
"roles",
|
|
res.data.data.login_user.roles
|
|
);
|
|
uni.setStorageSync(
|
|
"deptId",
|
|
res.data.data.login_user.sysUser.dept.deptId
|
|
);
|
|
uni.setStorageSync("pwd", formData.password);
|
|
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "登录成功！",
|
|
success: async () => {
|
|
that.showLoading = false;
|
|
|
|
const { data: res } =
|
|
await this.$api.index.getUserInfo();
|
|
|
|
store.commit(
|
|
"SET_PERMISSIONS",
|
|
res.permissions
|
|
);
|
|
uni.switchTab({
|
|
url: "/pages/index/index",
|
|
});
|
|
},
|
|
});
|
|
} else {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: res.data.msg,
|
|
success: () => {
|
|
that.showLoading = false;
|
|
},
|
|
});
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
});
|
|
},
|
|
/** 获取图形验证码 */
|
|
getImgCode() {
|
|
const url =
|
|
process.env.NODE_ENV === "production"
|
|
? "测试环境或者线上ip"
|
|
: "本地调试ip";
|
|
uni.request({
|
|
url: "http://192.168.2.135:49080/code",
|
|
method: "GET",
|
|
}).then((res) => {
|
|
this.phoneCodeUrlNew =
|
|
"data:image/gif;base64," + res.data.img;
|
|
this.veriFormData.uuid = res.data.uuid;
|
|
});
|
|
},
|
|
},
|
|
onShow() {
|
|
if (uni.getStorageSync("pwd")) {
|
|
this.accountFormData.password = uni.getStorageSync("pwd");
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
body {
|
|
background: url("/static/log-bgd.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.upper-bgd {
|
|
width: 100%;
|
|
height: 25vh;
|
|
box-sizing: border-box;
|
|
padding-top: 10vh;
|
|
|
|
.logo {
|
|
width: 20%;
|
|
height: 10vh;
|
|
margin: 0 auto;
|
|
margin-bottom: 2vh;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.tit {
|
|
width: 100%;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
display: flex;
|
|
justify-content: center;
|
|
color: #3c87f3;
|
|
}
|
|
}
|
|
|
|
.switch-log {
|
|
width: 80%;
|
|
height: 100rpx;
|
|
margin: 6vh auto;
|
|
margin-bottom: 1vh;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
font-size: 26rpx;
|
|
|
|
.active {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
border-bottom: 4px solid #b4d0ff;
|
|
border-bottom-left-radius: 15rpx;
|
|
border-bottom-right-radius: 15rpx;
|
|
}
|
|
}
|
|
|
|
.login-area {
|
|
width: 80%;
|
|
box-sizing: border-box;
|
|
padding: 3vh;
|
|
margin: 0 auto;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
box-shadow: 0 3px 5px #e6eefe;
|
|
|
|
.uni-forms-item__content[data-v-61dfc0d0] {
|
|
display: flex;
|
|
}
|
|
|
|
.submit-btn {
|
|
background-color: #3888ff;
|
|
margin: 2vh auto;
|
|
margin-bottom: 0;
|
|
border-radius: 50rpx;
|
|
color: #fff;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
|
|
.code-img-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
img {
|
|
margin-left: 5rpx;
|
|
height: 80rpx;
|
|
}
|
|
}
|
|
</style>
|