176 lines
3.8 KiB
Python
176 lines
3.8 KiB
Python
<template>
|
||
<view class="wrap">
|
||
<view class="top"></view>
|
||
<u-image :src="imageURL" mode="widthFix"></u-image>
|
||
<view class="content">
|
||
<!-- <view style="text-align: center;font-weight: 500;font-size: 40rpx;">国检集团</view>
|
||
<view class="title">能力共享和质量监督平台</view> -->
|
||
<u-form :model="loginForm" :rules="rules" ref="uForm" :errorType="errorType">
|
||
<u-form-item label="账户" prop="username" label-width="150">
|
||
<u-input placeholder="请输入账户" v-model="loginForm.username" type="text"></u-input>
|
||
</u-form-item>
|
||
<u-form-item label="密码" prop="password" label-width="150">
|
||
<u-input placeholder="请输入密码" v-model="loginForm.password" type="password"></u-input>
|
||
</u-form-item>
|
||
</u-form>
|
||
<view style="margin-top: 16rpx;">
|
||
<u-button @click="submit" type="warning" >登录</u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
imageURL: '/static/banner3.jpg',
|
||
loginForm:{
|
||
username:"",
|
||
password:""
|
||
},
|
||
rules:{
|
||
username:[
|
||
{
|
||
required: true,
|
||
message: '请输入账户',
|
||
trigger: ['change','blur'],
|
||
},
|
||
// {
|
||
// // 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
|
||
// validator: (rule, value, callback) => {
|
||
// // 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
|
||
// return this.$u.test.idCard(value);
|
||
// },
|
||
// message: '格式有误',
|
||
// // 触发器可以同时用blur和change，二者之间用英文逗号隔开
|
||
// trigger: ['change','blur'],
|
||
// }
|
||
],
|
||
password:[
|
||
{
|
||
required: true,
|
||
message: '请输入密码',
|
||
trigger: ['change','blur'],
|
||
},
|
||
]
|
||
},
|
||
errorType: ['message'],
|
||
}
|
||
},
|
||
onReady() {
|
||
this.$refs.uForm.setRules(this.rules);
|
||
uni.hideHomeButton()
|
||
},
|
||
computed: {
|
||
inputStyle() {
|
||
let style = {};
|
||
if(this.loginForm.username && this.loginForm.password) {
|
||
style.color = "#fff";
|
||
style.backgroundColor = this.$u.color['warning'];
|
||
}
|
||
return style;
|
||
}
|
||
},
|
||
methods: {
|
||
submit() {
|
||
this.$refs.uForm.validate(valid => {
|
||
if (valid) {
|
||
this.$u.api.login(this.loginForm).then(
|
||
res=>{
|
||
this.$u.vuex('vuex_token', res.data.access)
|
||
this.$u.api.getUserInfo().then(res=>{
|
||
this.$u.vuex('vuex_user', res.data)
|
||
// 修改资源请求地址
|
||
this.$u.vuex('vuex_user.avatar', res.data.avatar +
|
||
'?token=' + this.vuex_token)
|
||
})
|
||
uni.reLaunch({
|
||
url:'/pages/home/home'
|
||
})
|
||
}
|
||
).catch(e=>{
|
||
uni.showToast({
|
||
title:'账户密码错误',
|
||
icon:'none'
|
||
})
|
||
})
|
||
} else {
|
||
console.log('验证失败');
|
||
}
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
|
||
.wrap {
|
||
font-size: 28rpx;
|
||
.content {
|
||
width: 90%;
|
||
margin: 80rpx auto 0;
|
||
|
||
.title {
|
||
text-align: center;
|
||
font-size: 40rpx;
|
||
font-weight: 500;
|
||
margin-bottom: 100rpx;
|
||
}
|
||
input {
|
||
text-align: left;
|
||
margin-bottom: 10rpx;
|
||
padding-bottom: 6rpx;
|
||
}
|
||
.tips {
|
||
color: $u-type-info;
|
||
margin-bottom: 60rpx;
|
||
margin-top: 8rpx;
|
||
}
|
||
.getCaptcha {
|
||
background-color: rgb(253, 243, 208);
|
||
color: $u-tips-color;
|
||
border: none;
|
||
font-size: 30rpx;
|
||
padding: 12rpx 0;
|
||
|
||
&::after {
|
||
border: none;
|
||
}
|
||
}
|
||
.alternative {
|
||
color: $u-tips-color;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 30rpx;
|
||
}
|
||
}
|
||
.buttom {
|
||
.loginType {
|
||
display: flex;
|
||
padding: 350rpx 150rpx 150rpx 150rpx;
|
||
justify-content:space-between;
|
||
|
||
.item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
color: $u-content-color;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
.hint {
|
||
padding: 20rpx 40rpx;
|
||
font-size: 20rpx;
|
||
color: $u-tips-color;
|
||
|
||
.link {
|
||
color: $u-type-warning;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|