You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
159 lines
4.3 KiB
159 lines
4.3 KiB
<template> |
|
<view class="page" style="background: #2D8CF0 url(../../static/image/loginBg.png) center top no-repeat;background-size: 750rpx 482rpx;"> |
|
<view class="login_form_warp"> |
|
<view class="login_title">登录</view> |
|
<view class="login_form_item"> |
|
<uni-easyinput placeholderStyle="color:#c8c8c8;font-size:24rpx;" prefixIcon="person" v-model="form.username" placeholder="请输入账号" maxlength="20"></uni-easyinput> |
|
</view> |
|
<view class="login_form_item"> |
|
<uni-easyinput placeholderStyle="color:#c8c8c8;font-size:24rpx;" prefixIcon="locked" type="password" v-model="form.form.password" placeholder="请输入密码" maxlength="20"></uni-easyinput> |
|
</view> |
|
<view class="login_form_item" style="background-color: #f6f6f6;border-radius: 10rpx;padding:0 10rpx;"> |
|
<view class="vercode_label">验证码:</view> |
|
<uni-easyinput placeholderStyle="color:#c8c8c8;font-size:24rpx;" v-model="form.verCode" placeholder="请输入图形验证码" maxlength="20"></uni-easyinput> |
|
<image :src="codeImg" @click="getVerCode" style="width: 180rpx; height:59rpx;"></image> |
|
</view> |
|
<button type="primary" class="page-body-button" @click="doLogin">登录</button> |
|
</view> |
|
</view> |
|
</template> |
|
<script> |
|
export default { |
|
data() { |
|
return { |
|
form: { |
|
username: '', |
|
password: '', |
|
verCode: '', |
|
vercodeType: 5 |
|
}, //登录form |
|
codeImg: '', //图形验证码 |
|
} |
|
}, |
|
onLoad() { |
|
this.getVerCode(); |
|
}, |
|
methods: { |
|
//获取图形验证码 |
|
getVerCode() { |
|
this.$request1(getApp().globalData.baseUrl + '/api/common/captchaBase64?type=5&_t=' + Date.parse(new Date()), {}, 'GET').then(res => { |
|
if(res.code == 200) { |
|
this.codeImg = res.data.img; |
|
} |
|
}).catch(() => { |
|
console.log('vercode err') |
|
}) |
|
}, |
|
//登录 |
|
doLogin() { |
|
if(this.form.username == '' || this.form.password == '') { |
|
uni.showToast({ |
|
title: '用户名密码不能为空', |
|
icon: 'none' |
|
}) |
|
return; |
|
} else if(this.form.verCode == '') { |
|
uni.showToast({ |
|
title: '验证码不能为空', |
|
icon: 'none' |
|
}) |
|
return; |
|
} |
|
uni.showLoading({ |
|
title: '登录中...', |
|
mask: true |
|
}) |
|
this.$request1(getApp().globalData.baseUrl + '/api/login/auth', this.form, 'POST').then(res => { |
|
uni.hideLoading(); |
|
if(res.code == 200) { |
|
uni.setStorageSync('satoken', res.data.satoken); |
|
this.getRouters(); |
|
} |
|
}).catch(() => { |
|
uni.hideLoading(); |
|
}) |
|
}, |
|
//拉取权限路由 |
|
getRouters() { |
|
this.$request(getApp().globalData.baseUrl + '/api/login/getRouters', {}, 'GET').then(res => { |
|
if(res.code == 200 && res.data.length == 1) { |
|
uni.navigateTo({ |
|
url: '/pages/home/index?routers=' + JSON.stringify(res.data[0]) |
|
}) |
|
} |
|
}).catch(() => { |
|
}) |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.page{ |
|
position: relative; |
|
height: 100vh; |
|
overflow: hidden; |
|
} |
|
.login_form_warp{ |
|
position: absolute; |
|
left: 0; |
|
right:0; |
|
bottom:0; |
|
background-color: #fff; |
|
box-shadow: 0rpx -25rpx 46rpx 1rpx rgba(0,0,0,0.13); |
|
border-radius: 40rpx 40rpx 0rpx 0rpx; |
|
padding: 50rpx; |
|
.login_title{ |
|
color: #333; |
|
line-height: 59rpx; |
|
font-size: 42rpx; |
|
font-family: PingFang SC-Bold, PingFang SC; |
|
font-weight: bold; |
|
margin-bottom: 60rpx; |
|
} |
|
.sub_title{ |
|
color: #666; |
|
line-height: 33rpx; |
|
font-size: 24rpx; |
|
font-family: PingFang SC-Regular, PingFang SC; |
|
font-weight: 400; |
|
margin: 10rpx 0 60rpx; |
|
} |
|
.login_form_item { |
|
display: flex; |
|
align-items: center; |
|
background: #F6F6F6; |
|
margin-bottom: 50rpx; |
|
.vercode_label{ |
|
width: 96rpx; |
|
color: #333; |
|
line-height: 59rpx; |
|
font-size: 24rpx; |
|
font-family: PingFang SC-Regular, PingFang SC; |
|
font-weight: 400; |
|
} |
|
::v-deep .content-clear-icon{ |
|
padding:0 10rpx; |
|
} |
|
::v-deep .is-input-border{ |
|
border: 0 !important; |
|
background-color: #f6f6f6 !important; |
|
border-radius: 10rpx !important; |
|
} |
|
::v-deep .uni-easyinput__content-input{ |
|
height: 90rpx !important; |
|
border: 0; |
|
background-color: #f6f6f6 !important; |
|
} |
|
} |
|
} |
|
button { |
|
background-color: #2D8CF0; |
|
color: #ffffff; |
|
font-size: 28rpx; |
|
line-height: 90rpx; |
|
font-family: PingFang SC-Regular, PingFang SC; |
|
border-radius: 100rpx; |
|
margin: 70rpx auto 107rpx; |
|
} |
|
</style> |