315 lines
7.5 KiB
Vue
315 lines
7.5 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="请输入手机号码" 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>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { authPath, publicPath, systemPath } from '../../public'
|
|
export default {
|
|
data() {
|
|
return {
|
|
showLoading: 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: '请输入验证码！'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
switchUpper (count) {
|
|
this.switchStatus = count
|
|
},
|
|
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 {
|
|
uni.request({
|
|
url: authPath + '/sendCode',
|
|
method: 'POST',
|
|
header: {
|
|
'content-type': 'application/json'
|
|
},
|
|
data: {
|
|
phone: String(that.veriFormData.phone)
|
|
},
|
|
success: (res) => {
|
|
console.log(res);
|
|
}
|
|
})
|
|
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);
|
|
uni.request({
|
|
url: authPath + '/checkCode',
|
|
method: 'POST',
|
|
header: {
|
|
'content-type': 'application/json'
|
|
},
|
|
data: formRes,
|
|
success: (res) => {
|
|
console.log(res);
|
|
if (res.data.code == 200) {
|
|
uni.setStorageSync('userInfo', res.data.data)
|
|
uni.setStorageSync('token', res.data.data.token)
|
|
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
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
})
|
|
},
|
|
accountSubmit () {
|
|
let that = this
|
|
that.$refs.accountForm.validate().then(formData => {
|
|
that.showLoading = true
|
|
console.log(formData);
|
|
uni.request({
|
|
url: authPath + '/login',
|
|
method: 'POST',
|
|
header: {
|
|
'content-type': 'application/json'
|
|
},
|
|
data: formData,
|
|
success: (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.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
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</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>
|