在template中加载组件
1.通过定义用户名和密码
<view class="content start-bg">
<image class="bg-image"></image>
<view class="uni-padding-wrap uni-common-mt login-area">
<view class="uni-flex uni-row login-row">
<view class="text" style="-webkit-flex: 1;flex: 1;">
<input class="uni-input" placeholder-class="uni-input-placeholder" type="text"
placeholder="请输入用户名" v-model="username">
</view>
</view>
<view class="uni-flex uni-row login-row">
<view class="text" style="-webkit-flex: 1;flex: 1;">
<input class="uni-input" placeholder-class="uni-input-placeholder" type="password"
placeholder="请输入密码" v-model="password"
password="true">
</view>
</view>
</view>
<view class="btn-area">
<button class="btn-login" href="javascript:;" @click="login">登录</button>
</view>
</view>
在script中定义
username: '',
password: '',
cid: ''
2.在调用接口的时候,通过token判断,若浏览器中返回token值就跳转到首页,否则跳转到登录页
login() {
var _self = this;
uni.request({
url: getApp().globalData.server_ip + '/api/login', //登录(key-value)。
data: {
account: _self.username,
password: _self.password,
deviceToken: "121"
},
method: "POST",
header: {
'content-type': 'application/x-www-form-urlencoded', // 对应后台key-value传值
},
success: (res) => {
if (res.data.code == 20000) {
// 成功后,将用户信息存储到本地
uni.setStorage({
key: 'user_info',
data: res.data,
success: function() {
uni.redirectTo({
url: 'shouye',
})
}
});
} else {
uni.showToast({
title: res.data.message,
position: 'bottom'
});
}
},
});
},
}
其中style的样式
template {
height: 100%;
width: 100%;
}
.start-bg {
background-color: #FFFFFF;
width: 100%;
height: 100%;
}
.bg-image {
width: 100%;
height: 509rpx;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
}
.login-area {
width: 80%;
margin-left: 10%;
}
.login-label-text {
font-family: AdobeHeitiStd-Regular;
font-size: 25rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #a1a1a1;
text-align: center;
}
.login-label-icon {
text-align: center;
}
.login-input {
float: left;
vertical-align: bottom;
width: 100%;
}
.uni-input-placeholder {
font-size: 25rpx;
color: #c2bebe;
}
.btn-area {
margin-top: 100rpx;
display: flex;
justify-content: center;
}
.btn-login{
background-color: #4da2ff;
border-radius: 49px;
color: #FFFFFF;
width: 616rpx;
height: 100rpx;
line-height: 100rpx;
text-align: center;
vertical-align: middle;
}
</style>