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.

134 lines
2.5 KiB

7 months ago
<template>
<view class="content">
<view class="avatorWrapper">
<view class="avator">
<image class="img" src="../../static/yh.png" mode="widthFix"></image>
</view>
</view>
<view class="form">
<view class="inputWrapper">
<input class="input" type="text" v-model="userinfo.username" placeholder="请输入用户名"/>
</view>
<view class="inputWrapper">
<input class="input" type="password" v-model="userinfo.password" placeholder="请输入密码"/>
</view>
</view>
<button form-type="submit" @click="submit" class="loginBtn">确认登录</button>
</view>
</template>
<script>
export default {
data() {
return {
userinfo: {
username: null,
password: null
}
}
},
onLoad() {
},
methods: {
submit(){
if(this.userinfo.username==null || this.userinfo.username=='' ){
return uni.showToast({
title: '用户名不能为空!',
icon: 'error'
})
}
if(this.userinfo.password == null || this.userinfo.password==''){
return uni.showToast({
title: '密码不能为空!',
icon: 'error'
})
}
if(this.userinfo.username == 'admin' && this.userinfo.password=='admin123'){
// let user = null;
let user = {
nickName: '管理员',
phonenumber: '15706698585'
};
// 发送登录请求
uni.setStorageSync("userinfo", user)
uni.switchTab({
url: '../index/me',
})
}else{
uni.showToast({
title: '用户名或者密码不正确!',
icon: 'error'
})
}
}
}
}
</script>
<style>
.content {
background: radial-gradient(#3f3abb, #63bfe6);
width: 100vw;
height: 100vh;
}
.avatorWrapper{
height: 20vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: flex-end;
}
.avator{
width: 200upx;
height: 200upx;
overflow: hidden;
}
.avator .img{
width: 100%
}
.form{
padding: 0 100upx;
margin-top: 80px;
}
.inputWrapper{
width: 100%;
height: 80upx;
background: #ffffff;
border-radius: 20px;
box-sizing: border-box;
padding: 0 20px;
margin-top: 25px;
border: 1px solid #55aaff;
}
.inputWrapper .input{
width: 100%;
height: 100%;
text-align: center;
font-size: 15px;
}
.loginBtn{
width: 50%;
height: 80upx;
color: #fff;
background: radial-gradient(#3f3abb, #63bfe6);
border-radius: 50upx;
margin-top: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.loginBtn .btnValue{
color: white;
}
.forgotBtn{
text-align: center;
font-size: 15px;
margin-top: 20px;
}
</style>