<template>
<view class="content" style="width: 100%; height: 100%;">
<view style="text-align: center;">
</view>
<text class="title" style="text-align: center; font-size: 40rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: bolder;">Ming-Afresh</text>
<text class="title" style="text-align: center; font-size: 30rpx; font-family: PingFangSC-Medium, PingFang SC; margin-top: 100rpx;">账号密码登录</text>
<view style="padding: 60rpx; position: absolute; top: 350rpx;">
<view>
<input class="input1" placeholder-style='color:#AAAAAA;' v-model='username' placeholder="请输入账户名" />
</view>
<view>
<input class="input1" type='password' placeholder-style='color:#AAAAAA' v-model='password' placeholder="请输入密码" />
</view>
<view style="height: 25rpx; color: #FF5C50; font-size: 26rpx; margin-top: 20rpx;">
<span v-show='error'>用户不存在/密码错误</span>
// v-show判断隐藏条件
</view>
<button style="margin-top: 60rpx; background-color: #6CCACF; border-radius: 45rpx; color: #FFFFFF; width: 200rpx;" @click="userLogin">登录</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
error: false,
username: '',
password: '',
}
},
onLoad() {
let isLogin = uni.getStorageSync('isLogin')
if (isLogin) {
uni.redirectTo({
url: '../home/home'
// 从本地缓存中同步获取指定 key:('isLogin') 对应的内容
// 并进行页面之间传参
})
}
},
methods: {
userLogin(e) {
var that = this;
uni.request({
url: 'https://kz.ababjs.com/epkg/testhistorytest/login',
// 后端接口地址 post方法
method: 'POST',
data: {
username: that.username,
password: that.password,
rememberMe: false
// 拿值
},
header: {
'content-type': 'application/json'
},
success(res) {
if (res.data.code == 0) {
that.error = false
uni.setStorageSync('isLogin', true)
uni.setStorageSync('username', that.username)
uni.redirectTo({
url: '../home/home'
// 触发点击事件成功后页面路由跳转
})
} else {
that.error = true
that.password = ''
}
},
fail(err) {
}
});
},
}
}
</script>
<style>
page {
background-image:linear-gradient(to bottom right,#6CCACF,#FBFCFB);
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.text-login {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 20rpx;
background: #ffffff;
margin-top: 80rpx;
width: 660rpx;
height: 1050rpx;
}
.title {
color: black;
position: absolute;
top: 200rpx;
}
.input1 {
height: 80rpx;
width: 500rpx;
padding: 10rpx;
margin: 30rpx;
background-color: #FBFBFB;
border-radius: 45rpx;
}
</style>
二、uni-app登录功能页面跳转
猜你喜欢
转载自blog.csdn.net/Start_Simple/article/details/125735956
今日推荐
周排行