Ionic login简单登录页面
1.login.html
1"登录" hide-nav-bar="true"> 2 class="bar bar-header bar-positive "> 3 class="title">登录
4 5 6 class="bar bar-subheader"> 7"x" scrollbar-x="false" overflow-scroll="true" style="overflow: hidden"> 8 class="button-bar sub_header_list"> 9 class="button button-clear {{isgeneralCss}}" ng-click="changeModel(0)">普通登录 10 class="button button-clear {{isfastCss}}" ng-click="changeModel(1)">快捷登录 11 12 13 14class="has-subheader"> 15 16 38 39 61 62
2.controller.js
1 //用户登录 2 .controller('LoginCtrl', function ($scope, $state, $ionicLoading, userFactory, Storage) { 3 4 $scope.user = { 5 username: "", 6 password: "", 7 isChecked: false, 8 phone: '', 9 vercode:'' 10 } 11 $scope.$on('$stateChangeSuccess', function () { 12 if (Storage.get("loginInfo") != null) { 13 $scope.user.username = Storage.get("loginInfo").username; 14 $scope.user.password = Storage.get("loginInfo").password; 15 $scope.user.isChecked = Storage.get("loginInfo").isChecked; 16 } 17 else { 18 $scope.user.username = ""; 19 $scope.user.password = ""; 20 $scope.user.isChecked = false; 21 } 22 }); 23 24 //登录 25 $scope.signIn = function () { 26 27 userFactory.login($scope.user.username, $scope.user.password); 28 } 29 30 $scope.$on('User.loginUpdated', function () { 31 console.log("User.loginUpdated"); 32 var userRel = userFactory.getCurrentUser(); 33 console.log(userRel); 34 if (userRel.status != "1") {//登陆失败 35 $ionicLoading.show({ 36 noBackdrop: true, 37 template: userRel.msg, 38 duration: 1500 39 }); 40 } else { 41 if ($scope.user.isChecked) { 42 Storage.set("loginInfo", $scope.user); 43 } else { 44 Storage.remove("loginInfo"); 45 } 46 $state.go('app.user'); //路由跳转 47 48 } 49 }); 50 51 //登录切换 52 $scope.isloginModel = true; 53 $scope.isgeneralCss = "sub_button_select"; 54 $scope.isfastCss = ""; 55 $scope.changeModel = function (lm) { 56 57 if (lm == 0) { 58 $scope.isgeneralCss = "sub_button_select"; 59 $scope.isloginModel = true; 60 $scope.isfastCss = ""; 61 } 62 if (lm == 1) { 63 64 $scope.isgeneralCss = ""; 65 $scope.isfastCss = "sub_button_select"; 66 $scope.isloginModel = false; 67 } 68 } 69 $scope.registerclick = function () { 70 $state.go("register"); 71 } 72 })
3.services.js
.factory('userFactory', function ($resource, $rootScope, ENV, Storage, $http, $q) {var user = {}; //返回用户对象return {//登录 login: function (username, password) {$http.get("http://192.168.0.109:8004/api/" + "/Login/Loging", { params: { UserName: username, Password: password} }).success(function (response) {console.log("Loging调用成功")var json = eval('(' + response + ")");user = json;console.log(json.userInfo);if (json.status == "1") {Storage.set("UserKey", json.userInfo);}$rootScope.$broadcast('User.loginUpdated');}).error(function (err, status) {$ionicLoading.show({noBackdrop: true,template: err,duration: 1500});});},getCurrentUser: function () {return user;}};}).factory('Storage', function ($state, ENV, $http, $rootScope) {var version = "";return {set: function (key, data) {return window.localStorage.setItem(key, window.JSON.stringify(data));},get: function (key) {return window.JSON.parse(window.localStorage.getItem(key));},remove: function (key) {return window.localStorage.removeItem(key);}};})
css：
.bar .sub_header_list .button.button-clear{
border-bottom: 1px solid #eee;
}
.sub_header_list{
width: 100%;
}
.sub_header_list .button{
width: 50%;
color:#666;
}
.bar .sub_header_list .button.sub_button_select{
border-bottom:2px solid #387ef5;
position:relative;
}
.bar-subheader{
border-bottom: none;
} 效果图：
转载于:https://www.cnblogs.com/linsu/p/5706158.html
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！