510 lines
20 KiB
Vue
510 lines
20 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;
|
||
"
|
||
@click="forgetPwd">
|
||
忘记密码
|
||
</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="请输入手机号码"
|
||
type="number"
|
||
v-model="veriFormData.phone"
|
||
maxlength="11"></uni-easyinput>
|
||
</uni-forms-item>
|
||
<uni-forms-item
|
||
name="code"
|
||
required
|
||
label="验证码"
|
||
label-width="100">
|
||
<uni-easyinput
|
||
type="number"
|
||
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>
|
||
<u-loading-page
|
||
:loading="showDownload"
|
||
color="#000"
|
||
:loading-text="`下载中,请稍后...${percent}%`"></u-loading-page>
|
||
<view class="phoneType">
|
||
{{"客服电话：055162573713"}}
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { authPath, publicPath, systemPath } from "../../public";
|
||
import store from "../../store/user";
|
||
export default {
|
||
data() {
|
||
return {
|
||
showLoading: false,
|
||
showDownload: false,
|
||
accountFormData: {
|
||
username: "",
|
||
password: "",
|
||
},
|
||
veriFormData: {
|
||
phone: "",
|
||
code: "",
|
||
},
|
||
switchStatus: 1,
|
||
countDown: 60,
|
||
countDownStatus: 0,
|
||
sendDisabled: false,
|
||
givenCode: "",
|
||
accountRules: {
|
||
username: {
|
||
rules: [
|
||
{
|
||
required: true,
|
||
errorMessage: "请输入用户名称！",
|
||
},
|
||
],
|
||
},
|
||
password: {
|
||
rules: [
|
||
{
|
||
required: true,
|
||
errorMessage: "请输入密码！",
|
||
},
|
||
],
|
||
},
|
||
},
|
||
veriRules: {
|
||
phone: {
|
||
rules: [
|
||
{
|
||
required: true,
|
||
errorMessage: "请输入手机号码！",
|
||
},
|
||
],
|
||
},
|
||
code: {
|
||
rules: [
|
||
{
|
||
required: true,
|
||
errorMessage: "请输入验证码！",
|
||
},
|
||
],
|
||
},
|
||
},
|
||
percent: "",
|
||
};
|
||
},
|
||
methods: {
|
||
switchUpper(count) {
|
||
this.switchStatus = count;
|
||
},
|
||
forgetPwd() {
|
||
console.log("忘记密码");
|
||
},
|
||
sendVeriCode() {
|
||
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);
|
||
})
|
||
.catch((err) => {
|
||
console.log(err);
|
||
});
|
||
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);
|
||
}
|
||
},
|
||
veriSubmit() {
|
||
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: () => {
|
||
that.showLoading = false;
|
||
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("pwd", formData.password);
|
||
// uni.setStorageSync('deptId', res.data.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: "登录成功！",
|
||
success: () => {
|
||
that.showLoading = false;
|
||
},
|
||
});
|
||
|
||
setTimeout(() => {
|
||
uni.switchTab({
|
||
url: "/pages/index/index",
|
||
});
|
||
}, 500);
|
||
} else {
|
||
uni.showToast({
|
||
icon: "none",
|
||
title: res.data.msg,
|
||
success: () => {
|
||
that.showLoading = false;
|
||
},
|
||
});
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
console.log(err);
|
||
uni.showToast({
|
||
icon: "none",
|
||
title: "网络异常，请稍后再试！",
|
||
success: () => {
|
||
that.showLoading = false;
|
||
},
|
||
});
|
||
});
|
||
});
|
||
},
|
||
},
|
||
onShow() {
|
||
if (uni.getStorageSync("pwd")) {
|
||
this.accountFormData.password = uni.getStorageSync("pwd");
|
||
}
|
||
},
|
||
onLoad() {
|
||
let that = this;
|
||
let nowVer = "";
|
||
let serveVer = "";
|
||
let apkPath = "";
|
||
// 获取app版本号
|
||
plus.runtime.getProperty(plus.runtime.appid, (info) => {
|
||
nowVer = info.version.replace(/\./g, "");
|
||
});
|
||
// 获取服务端app版本号
|
||
this.$api.update
|
||
.fetchAppVer()
|
||
.then((res) => {
|
||
console.log(res);
|
||
if (res.data.code == 200) {
|
||
serveVer = res.data.data[0].versionName.replace(
|
||
/\./g,
|
||
""
|
||
);
|
||
apkPath = res.data.data[0].apkPath;
|
||
// 比较版本大小
|
||
setTimeout(() => {
|
||
console.log(nowVer, serveVer, apkPath);
|
||
if (nowVer < serveVer) {
|
||
uni.showModal({
|
||
title: "版本升级",
|
||
content: "当前版本非最新版本，请前往升级！",
|
||
showCancel: false,
|
||
confirmText: "升级",
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
that.showDownload = true;
|
||
uni.hideTabBar();
|
||
let downloadApk = uni.downloadFile({
|
||
url: apkPath,
|
||
success: (download) => {
|
||
console.log(download);
|
||
if (
|
||
download.statusCode ==
|
||
200
|
||
) {
|
||
plus.runtime.install(
|
||
download.tempFilePath,
|
||
{
|
||
force: true,
|
||
},
|
||
(install) => {
|
||
that.showDownload = false;
|
||
uni.showTabBar();
|
||
console.log(
|
||
install
|
||
);
|
||
}
|
||
);
|
||
} else {
|
||
uni.showTabBar();
|
||
that.showDownload = false;
|
||
uni.showToast({
|
||
icon: "none",
|
||
title: "下载异常，请稍后再试！",
|
||
});
|
||
}
|
||
},
|
||
});
|
||
downloadApk.onProgressUpdate(
|
||
(res) => {
|
||
that.percent = res.progress;
|
||
}
|
||
);
|
||
}
|
||
},
|
||
});
|
||
}
|
||
}, 500);
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
console.log(err);
|
||
});
|
||
},
|
||
};
|
||
</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;
|
||
}
|
||
}
|
||
.phoneType {
|
||
position: absolute;
|
||
top: 650px; /* 距离页面顶部100像素的位置 */
|
||
left: 140px;
|
||
font-weight: bold;
|
||
color:blueviolet;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.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: 10vh auto;
|
||
margin-bottom: 0;
|
||
border-radius: 50rpx;
|
||
color: #fff;
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
</style>
|