<template>
|
<view class="login_index">
|
<view class="login_header">
|
<view class="login_header_title">
|
<!-- 登录 -->
|
</view>
|
<view class="login_header_icon">
|
<u-image src="../../static/login-icon.png" width="110px" height="110px"></u-image>
|
</view>
|
</view>
|
<view class="login_content">
|
<view class="login_content_title">
|
管片数字工厂
|
</view>
|
<view class="login_content_form">
|
<u-form
|
ref="form"
|
:model="formLogin"
|
:rules="rulesLogin">
|
<u-form-item prop="username" borderBottom>
|
<u-input
|
v-model="formLogin.username"
|
border="none"
|
placeholder="请输入手机号码"
|
clearable>
|
<template slot="prefix">
|
<u-icon name="account" label="|" labelColor="#EDEDED" labelSize="12px"></u-icon>
|
</template>
|
</u-input>
|
</u-form-item>
|
<u-form-item prop="password" borderBottom>
|
<u-input
|
v-model="formLogin.password"
|
border="none"
|
clearable
|
placeholder="请输入密码"
|
type="password">
|
<template slot="prefix">
|
<u-icon name="lock" label="|" labelColor="#EDEDED" labelSize="12px"></u-icon>
|
</template>
|
</u-input>
|
</u-form-item>
|
<view class="login_content_button">
|
<u-button
|
type="primary"
|
:color="colorStyle"
|
@click="submitForm()">登录</u-button>
|
</view>
|
</u-form>
|
<view class="login_content_info">
|
登录代表你已同意<span>《用户协议》</span>和<span>《隐私政策》</span>
|
</view>
|
</view>
|
</view>
|
<view class="login_copyright">
|
<span>版权所有©中铁十四局集团房桥有限公司</span>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { throttle } from '../../plugins/public';
|
export default {
|
data() {
|
return {
|
formLogin: {
|
username: '15010128058',
|
password: '123456'
|
},
|
rulesLogin: {
|
username: [{
|
required: true,
|
message: '请输入手机号码',
|
trigger: 'blur',
|
},
|
{
|
// 自定义验证函数，见上说明
|
validator: (rule, value, callback) => {
|
return uni.$u.test.mobile(value);
|
},
|
message: '请输入正确的手机号码',
|
trigger: 'blur',
|
}],
|
password: [{
|
required: true,
|
message: '请输入密码',
|
trigger: 'blur',
|
}]
|
},
|
colorStyle: 'linear-gradient(to right, rgb(79, 142, 244), rgb(85, 109, 254))'
|
}
|
},
|
onShow() {
|
uni.clearStorage();
|
uni.clearStorageSync();
|
},
|
onReady() {
|
this.$refs.form.setRules(this.rulesLogin);
|
},
|
methods: {
|
// 提交登录信息
|
submitForm: throttle(function() {
|
// uni.navigateTo({
|
// url: '../homeIndex/index'
|
// })
|
this.$refs.form.validate().then((valid) => {
|
if(valid) {
|
const params = Object.assign({}, this.formLogin);
|
this.$api.system.userLogin(params).then((res) => {
|
console.log(res, '----');
|
if(res.success) {
|
uni.$u.toast('登录成功!');
|
uni.setStorageSync('realName', res.data.realName);
|
uni.setStorageSync('telphone', res.data.telphone);
|
uni.setStorageSync('userToken', res.data.token);
|
uni.setStorageSync('menuData', JSON.stringify(res.data.menus));
|
uni.navigateTo({
|
url: '../homeIndex/index'
|
})
|
} else {
|
uni.$u.toast(res.statusMsg);
|
}
|
}).catch((err) => {
|
uni.$u.toast('请检查网络服务！')
|
})
|
}
|
})
|
}, 3000),
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.login_index {
|
position: relative;
|
width: 100vw;
|
height: 100vh;
|
background: #F6F6F6;
|
|
.login_header {
|
position: relative;
|
width: 100%;
|
height: 40%;
|
// background: #5B4EFE;
|
background: url('../../static/login.png') no-repeat;
|
background-size: 100% 100%;
|
border-radius: 0 0 50px 0;
|
|
.login_header_title {
|
padding: 30px 0 0;
|
color: #fff;
|
font-size: 20px;
|
text-align: center;
|
}
|
|
.login_header_icon {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translateX(-50%) translateY(-45%);
|
}
|
}
|
|
.login_content {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translateX(-50%) translateY(-30%);
|
padding: 40px 20px 30px;
|
width: calc(90% - 40px);
|
border-radius: 15px;
|
box-shadow: 0 2px 12px 0 rgba(120, 83, 251, 0.3);
|
background: #fff;
|
|
.login_content_title {
|
padding: 10px 0;
|
font-size: 24px;
|
text-align: center;
|
}
|
|
.login_content_form {
|
padding: 20px 0 0;
|
}
|
|
.login_content_button {
|
margin-top: 40px;
|
}
|
|
.login_content_info {
|
padding: 20px 0 0;
|
font-size: 12px;
|
text-align: center;
|
|
& span {
|
color: #556DFE;
|
}
|
}
|
|
}
|
|
.login_copyright {
|
position: absolute;
|
bottom: 1%;
|
left: 50%;
|
transform: translateX(-50%);
|
color: #333;
|
font-size: 12px;
|
text-align: center;
|
white-space: nowrap;
|
}
|
}
|
|
::v-deep .u-form-item__body__right__message {
|
margin-left: 0 !important;
|
}
|
::v-deep .u-form-item {
|
margin-bottom: 10px;
|
}
|
</style>
|
