386 lines
9.3 KiB
Vue
386 lines
9.3 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>
|
|
</template>
|
|
|
|
<script>
|
|
import { authPath, publicPath, systemPath } from '../../public'
|
|
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(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)
|
|
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);
|
|
})
|
|
})
|
|
}
|
|
},
|
|
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;
|
|
}
|
|
}
|
|
|
|
.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>
|