<template>
|
<view class="container">
|
<!-- <view class="left-bottom-sign"></view>
|
<view class="right-top-sign"></view> -->
|
<view class="wrapper">
|
<view class="welcome">
|
账号登录
|
</view>
|
<view class="input-content">
|
<view class="input-item">
|
<!-- <text class="tit">机构码</text> -->
|
<image class="icon" src="/static/login/jigou.png" alt="" />
|
<input type="text" v-model="CompanyRemark" placeholder="请输入机构码" maxlength="11" />
|
</view>
|
<view class="input-item">
|
<!-- <text class="tit">用户名</text> -->
|
<image class="icon" src="/static/login/user.png" alt="" />
|
<input type="text" v-model="userName" placeholder="请输入用户名" maxlength="11" />
|
</view>
|
<view class="input-item">
|
<!-- <text class="tit">密码</text> -->
|
<image class="icon" src="/static/login/pwd.png" alt="" />
|
<input type="password" v-model="password" placeholder="请输入密码" maxlength="20" @confirm="toLogin" />
|
</view>
|
</view>
|
<view class="forget-section" @click="toForget">
|
忘记密码?
|
</view>
|
<u-button class="confirm-btn" @click="toLogin" :loading="logining" :disabled="logining">登录</u-button>
|
|
<view class="register-section">
|
还没有账号?
|
<text @click="toRegist">马上注册</text>
|
</view>
|
</view>
|
</view>
|
</template>
|
<script>
|
import { mapMutations } from 'vuex';
|
|
export default {
|
data() {
|
return {
|
CompanyRemark: 'guest',
|
userName: '',
|
password: '',
|
logining: false
|
}
|
},
|
onLoad() { },
|
methods: {
|
...mapMutations(['login']),
|
inputChange(e) {
|
const key = e.currentTarget.dataset.key;
|
this[key] = e.detail.value;
|
},
|
navBack() {
|
uni.navigateBack();
|
},
|
toRegist() {
|
uni.navigateTo({
|
url: '/pages/public/register'
|
})
|
},
|
toForget() {
|
uni.navigateTo({
|
url: '/pages/public/forget'
|
})
|
},
|
async toLogin() {
|
this.logining = true;
|
let data = {
|
CompanyRemark: this.CompanyRemark,
|
userName: this.userName,
|
password: this.$cryptoJS.MD5(this.password).toString()
|
}
|
try {
|
let res = await this.$http.post('/User/Login', data);
|
if (res.Check) {
|
uni.setStorageSync('token', res.Data);
|
|
|
await this.getUserInfo1();
|
this.$msg('登录成功');
|
// uni.showToast({
|
// title: '登录成功',
|
// duration: 1500
|
// });
|
uni.switchTab({
|
url: '/pages/index/index'
|
});
|
// 登录成功后刷新页面
|
// uni.reLaunch({
|
// url: '/pages/index/index',
|
// });
|
} else {
|
this.$msg('登录失败');
|
|
}
|
} catch (error) {
|
console.log(error);
|
this.$msg('登录失败');
|
} finally {
|
this.logining = false;
|
}
|
},
|
async getUserInfo1() {
|
try {
|
let res = await this.$http.post('/User/GetUserInfo', {
|
token: uni.getStorageSync('token'),
|
Name: 'login'
|
});
|
if (res.Check) {
|
uni.setStorageSync('userId', res.Data.user_id);
|
uni.setStorageSync('userName', res.Data.name);
|
uni.setStorageSync('avator', res.Data.avator)
|
|
let userInfoRes = await this.$http.post('/User/GetUserInfo', {
|
token: uni.getStorageSync('token'),
|
id: uni.getStorageSync('userId')
|
});
|
if (userInfoRes.Check) {
|
uni.setStorageSync('Address', userInfoRes.Data.Address);
|
uni.setStorageSync('Mobile', userInfoRes.Data.Mobile);
|
}
|
}
|
} catch (error) {
|
console.log(error);
|
}
|
}
|
}
|
}
|
</script>
|
<style lang='scss' scoped>
|
page {
|
background: #fff;
|
}
|
|
.container {
|
padding-top: 115px;
|
position: relative;
|
width: 100vw;
|
height: 100vh;
|
overflow: hidden;
|
background: #fff;
|
}
|
|
.wrapper {
|
position: relative;
|
z-index: 90;
|
background: #fff;
|
padding-bottom: 40upx;
|
padding: 0 60upx;
|
}
|
|
.left-top-sign {
|
font-size: 120upx;
|
color: $page-color-base;
|
position: relative;
|
left: -16upx;
|
}
|
|
.right-top-sign {
|
position: absolute;
|
top: 80upx;
|
right: -30upx;
|
z-index: 95;
|
|
&:before,
|
&:after {
|
display: block;
|
content: "";
|
width: 400upx;
|
height: 80upx;
|
background: #b4f3e2;
|
}
|
|
&:before {
|
transform: rotate(50deg);
|
border-radius: 0 50px 0 0;
|
}
|
|
&:after {
|
position: absolute;
|
right: -198upx;
|
top: 0;
|
transform: rotate(-50deg);
|
border-radius: 50px 0 0 0;
|
}
|
}
|
|
.left-bottom-sign {
|
position: absolute;
|
left: -270upx;
|
bottom: -320upx;
|
border: 100upx solid #d0d1fd;
|
border-radius: 50%;
|
padding: 180upx;
|
}
|
|
.welcome {
|
font-size: 46upx;
|
color: #555;
|
text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);
|
margin-bottom: 40upx;
|
}
|
|
.input-content {
|
.input-item {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 30upx;
|
background: $page-color-light;
|
margin-bottom: 50upx;
|
height: 92upx;
|
/* background: #F1F5FE; */
|
border-radius: 12upx;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
.tit {
|
width: 200upx;
|
height: 50upx;
|
line-height: 56upx;
|
font-size: $font-sm + 2upx;
|
color: $font-color-base;
|
}
|
.icon{
|
width: 40upx;
|
height: 40upx;
|
margin-right: 20upx;
|
}
|
|
input {
|
height: 60upx;
|
font-size: $font-base + 2upx;
|
color: $font-color-dark;
|
width: 100%;
|
}
|
|
button {
|
margin-left: 20upx;
|
padding: 0 20upx;
|
height: 60upx;
|
line-height: 60upx;
|
font-size: $font-sm + 2upx;
|
color: #fff;
|
background: $uni-color-primary;
|
border: none;
|
border-radius: 4px;
|
}
|
}
|
}
|
|
.confirm-btn {
|
width: 100%;
|
height: 92upx;
|
line-height: 92upx;
|
margin-top: 16upx;
|
/* background: $uni-color-primary; */
|
color: #fff;
|
font-size: $font-lg;
|
/* font-size: 32upx; */
|
background: #3D9AFF;
|
border-radius: 12upx;
|
|
&:after {
|
border-radius: 100px;
|
}
|
}
|
|
.forget-section {
|
font-size: $font-sm + 2upx;
|
color: #666666;
|
text-align: right;
|
margin-top: 80upx;
|
}
|
|
.register-section {
|
/* position: absolute;
|
left: 0;
|
bottom: 50upx; */
|
margin-top: 48upx;
|
width: 100%;
|
font-size: $font-sm + 2upx;
|
color: $font-color-base;
|
text-align: center;
|
|
text {
|
color: $font-color-spec;
|
margin-left: 10upx;
|
}
|
}
|
</style>
|
