效果
代码
<template>
<view class="content">
<view class="login-bg">
<view class="login-card">
<view class="login-head">瓦力教务登录</view>
<view class="login-input login-margin-b">
<input type="text" placeholder="账号" id="username" v-model="username" />
</view>
<view class="login-input">
<input type="password" placeholder="请输入密码(8-16位)" id="password" v-model="password" />
</view>
<view class="remember-psw">
<checkbox-group>
<label>
<checkbox value="psw" :checked='rememberPsw' @tap="rememberPsw =! rememberPsw" color="#09CC86" />记住账号密码</label>
</checkbox-group>
</view>
</view>
</view>
<view class="login-btn">
<button class="landing" type="primary" @tap="loadList">登录</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: '',
username: '',
password: '',
rememberPsw: true,
}
},
mounted() {
//页面加载完成，获取本地存储的用户名及密码
const username = uni.getStorageSync('username');
const password = uni.getStorageSync('password');
// console.log("22",username)
if (username && password) {
this.username = username;
this.password = password;
} else {
this.username = "";
this.password = "";
}
},
methods: {
loadList() {
let _this = this;
var allParams = {
url: 'http://xxx/login?username=' + this.username + '&password=' + this.password, //地址为Config.restUrl拼接地址
setUpUrl: false, //不需要拼接请设置为false
type: 'post', //请求类型
success: res => {
},
sCallback: function(data) {
},
eCallback: function() {}
};
//登录成功将用户名密码存储到用户本地
if (this.rememberPsw) { //用户勾选“记住密码”
uni.setStorageSync('username', this.username);
uni.setStorageSync('password', this.password);
} else { //用户没有勾选“记住密码”
uni.removeStorageSync('username');
uni.removeStorageSync('password');
this.username = "";
this.password = "";
}
_this.$base.request(allParams);
},
}
}
</script>
