ソースを参照

feat[litemall-wx]: 独立账号登录页面。
从原来的登录页面分离出账号登录页面,这样开发者可以方便取消账号登录,仅仅支持微信登陆。

Junling Bu 7 年 前
コミット
d265da9f8d

+ 1 - 0
litemall-wx/app.json

@@ -13,6 +13,7 @@
     "pages/ucenter/coupon/coupon",
     "pages/ucenter/collect/collect",
     "pages/auth/login/login",
+    "pages/auth/accountLogin/accountLogin",    
     "pages/auth/register/register",
     "pages/auth/reset/reset",
     "pages/payResult/payResult",

+ 118 - 0
litemall-wx/pages/auth/accountLogin/accountLogin.js

@@ -0,0 +1,118 @@
+var api = require('../../../config/api.js');
+var util = require('../../../utils/util.js');
+var user = require('../../../utils/user.js');
+
+var app = getApp();
+Page({
+  data: {
+    username: '',
+    password: '',
+    code: '',
+    loginErrorCount: 0
+  },
+  onLoad: function (options) {
+    // 页面初始化 options为页面跳转所带来的参数
+    // 页面渲染完成
+
+  },
+  onReady: function () {
+
+  },
+  onShow: function () {
+    // 页面显示
+  },
+  onHide: function () {
+    // 页面隐藏
+
+  },
+  onUnload: function () {
+    // 页面关闭
+
+  },
+  accountLogin: function () {
+    var that = this;
+
+    if (this.data.password.length < 1 || this.data.username.length < 1) {
+      wx.showModal({
+        title: '错误信息',
+        content: '请输入用户名和密码',
+        showCancel: false
+      });
+      return false;
+    }
+
+    wx.request({
+      url: api.AuthLoginByAccount,
+      data: {
+        username: that.data.username,
+        password: that.data.password
+      },
+      method: 'POST',
+      header: {
+        'content-type': 'application/json'
+      },
+      success: function (res) {
+        if (res.data.errno == 0){
+          that.setData({
+            loginErrorCount: 0
+          });
+          app.globalData.hasLogin = true;
+          wx.setStorageSync('userInfo', res.data.data.userInfo);
+          wx.setStorage({
+            key:"token",
+            data: res.data.data.token,
+            success: function(){
+              wx.switchTab({
+                url: '/pages/ucenter/index/index'
+              });
+            }
+          });
+        }
+        else{
+          that.setData({
+            loginErrorCount: that.data.loginErrorCount + 1
+          });
+          app.globalData.hasLogin = false;
+          util.showErrorToast('账户登录失败');
+        }
+      }
+    });
+  },
+  bindUsernameInput: function (e) {
+
+    this.setData({
+      username: e.detail.value
+    });
+  },
+  bindPasswordInput: function (e) {
+
+    this.setData({
+      password: e.detail.value
+    });
+  },
+  bindCodeInput: function (e) {
+
+    this.setData({
+      code: e.detail.value
+    });
+  },
+  clearInput: function (e) {
+    switch (e.currentTarget.id) {
+      case 'clear-username':
+        this.setData({
+          username: ''
+        });
+        break;
+      case 'clear-password':
+        this.setData({
+          password: ''
+        });
+        break;
+      case 'clear-code':
+        this.setData({
+          code: ''
+        });
+        break;
+    }
+  }
+})

+ 3 - 0
litemall-wx/pages/auth/accountLogin/accountLogin.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "账号登录"
+}

+ 29 - 0
litemall-wx/pages/auth/accountLogin/accountLogin.wxml

@@ -0,0 +1,29 @@
+<view class="container">
+    <view class="form-box">
+
+    	<view class="form-item">
+    		<input class="username" value="{{username}}" bindinput="bindUsernameInput" placeholder="账号"/>
+    		<image wx:if="{{ username.length > 0 }}" id="clear-username" class="clear" src="/static/images/clear_input.png" catchtap="clearInput"></image>
+    	</view>
+
+    	<view class="form-item">
+    		<input class="password" value="{{password}}" password bindinput="bindPasswordInput" placeholder="密码"/>
+    		<image class="clear" id="clear-password" wx:if="{{ password.length > 0 }}" src="/static/images/clear_input.png" catchtap="clearInput"></image>
+    	</view>
+
+		 <!-- <view class="form-item-code" wx-if="{{loginErrorCount >= 3}}">
+			<view class="form-item code-item">
+				<input class="code" value="{{code}}" bindinput="bindCodeInput" placeholder="验证码"/>
+				<image class="clear" id="clear-code" wx:if="{{ code.length > 0 }}" src="/static/images/clear_input.png" catchtap="clearInput"></image>
+			</view>
+			<image class="code-img" src="https://dl.reg.163.com/cp?pd=yanxuan_web&pkid=SkeBZeG&random=1489903563234"></image>
+		</view>  -->
+
+    <button type="primary" class="login-btn" bindtap="accountLogin">账号登录</button>
+
+     <view class="form-item-text">
+      <navigator url="/pages/auth/register/register" class="register">注册账号</navigator>
+			<navigator url="/pages/auth/reset/reset" class="reset">忘记密码</navigator>
+    </view> 
+    </view>
+</view>

+ 86 - 0
litemall-wx/pages/auth/accountLogin/accountLogin.wxss

@@ -0,0 +1,86 @@
+.form-box{
+    width: 100%;
+    height: auto;
+    overflow: hidden;
+    padding: 0 40rpx;
+    margin-top: 200rpx;
+    background: #fff;
+}
+
+.form-item{
+    position: relative;
+    background: #fff;
+    height: 96rpx;
+    border-bottom: 1px solid #d9d9d9;
+}
+
+.form-item .username, .form-item .password, .form-item .code{
+    position: absolute;
+    top: 26rpx;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 44rpx;
+    background: #fff;
+    color: #333;
+    font-size: 30rpx;
+}
+
+.form-item-code{
+    margin-top:32rpx;
+    height: auto;
+    overflow: hidden;
+    width: 100%;
+}
+
+.form-item-code .form-item{
+    float: left;
+    width: 350rpx;
+}
+
+.form-item-code .code-img{
+    float: right;
+    margin-top: 4rpx;
+    height: 88rpx;
+    width: 236rpx;
+}
+
+.form-item .clear{
+    position: absolute;
+    top: 26rpx;
+    right: 18rpx;
+    z-index: 2;
+    display: block;
+    background: #fff;
+    height: 44rpx;
+    width: 44rpx;
+}
+
+.login-btn{
+    margin: 60rpx 0 40rpx 0;
+    height: 96rpx;
+    line-height: 96rpx;
+    font-size: 30rpx;
+    width: 100%;
+    background: #b4282d;
+    border-radius: 6rpx;
+}
+
+.form-item-text{
+    height: 35rpx;
+    width: 100%;
+}
+
+.form-item-text .register{
+    display: block;
+    height: 34rpx;
+    float: left;
+    font-size: 28rpx;
+}
+
+.form-item-text .reset{
+    display: block;
+    height: 34rpx;
+    float: right;
+    font-size: 28rpx;
+}

+ 1 - 90
litemall-wx/pages/auth/login/login.js

@@ -4,12 +4,6 @@ var user = require('../../../utils/user.js');
 
 var app = getApp();
 Page({
-  data: {
-    username: '',
-    password: '',
-    code: '',
-    loginErrorCount: 0
-  },
   onLoad: function (options) {
     // 页面初始化 options为页面跳转所带来的参数
     // 页面渲染完成
@@ -52,89 +46,6 @@ Page({
     });
   },
   accountLogin: function () {
-    var that = this;
-
-    if (this.data.password.length < 1 || this.data.username.length < 1) {
-      wx.showModal({
-        title: '错误信息',
-        content: '请输入用户名和密码',
-        showCancel: false
-      });
-      return false;
-    }
-
-    wx.request({
-      url: api.AuthLoginByAccount,
-      data: {
-        username: that.data.username,
-        password: that.data.password
-      },
-      method: 'POST',
-      header: {
-        'content-type': 'application/json'
-      },
-      success: function (res) {
-        if (res.data.errno == 0){
-          that.setData({
-            loginErrorCount: 0
-          });
-          app.globalData.hasLogin = true;
-          wx.setStorageSync('userInfo', res.data.data.userInfo);
-          wx.setStorage({
-            key:"token",
-            data: res.data.data.token,
-            success: function(){
-              wx.switchTab({
-                url: '/pages/ucenter/index/index'
-              });
-            }
-          });
-        }
-        else{
-          that.setData({
-            loginErrorCount: that.data.loginErrorCount + 1
-          });
-          app.globalData.hasLogin = false;
-          util.showErrorToast('账户登录失败');
-        }
-      }
-    });
-  },
-  bindUsernameInput: function (e) {
-
-    this.setData({
-      username: e.detail.value
-    });
-  },
-  bindPasswordInput: function (e) {
-
-    this.setData({
-      password: e.detail.value
-    });
-  },
-  bindCodeInput: function (e) {
-
-    this.setData({
-      code: e.detail.value
-    });
-  },
-  clearInput: function (e) {
-    switch (e.currentTarget.id) {
-      case 'clear-username':
-        this.setData({
-          username: ''
-        });
-        break;
-      case 'clear-password':
-        this.setData({
-          password: ''
-        });
-        break;
-      case 'clear-code':
-        this.setData({
-          code: ''
-        });
-        break;
-    }
+    wx.navigateTo({ url: "/pages/auth/accountLogin/accountLogin" });
   }
 })

+ 3 - 29
litemall-wx/pages/auth/login/login.wxml

@@ -1,32 +1,6 @@
 <view class="container">
-    <view class="form-box">
-
-    	<view class="form-item">
-    		<input class="username" value="{{username}}" bindinput="bindUsernameInput" placeholder="账号"/>
-    		<image wx:if="{{ username.length > 0 }}" id="clear-username" class="clear" src="/static/images/clear_input.png" catchtap="clearInput"></image>
-    	</view>
-
-    	<view class="form-item">
-    		<input class="password" value="{{password}}" password bindinput="bindPasswordInput" placeholder="密码"/>
-    		<image class="clear" id="clear-password" wx:if="{{ password.length > 0 }}" src="/static/images/clear_input.png" catchtap="clearInput"></image>
-    	</view>
-
-		 <!-- <view class="form-item-code" wx-if="{{loginErrorCount >= 3}}">
-			<view class="form-item code-item">
-				<input class="code" value="{{code}}" bindinput="bindCodeInput" placeholder="验证码"/>
-				<image class="clear" id="clear-code" wx:if="{{ code.length > 0 }}" src="/static/images/clear_input.png" catchtap="clearInput"></image>
-			</view>
-			<image class="code-img" src="https://dl.reg.163.com/cp?pd=yanxuan_web&pkid=SkeBZeG&random=1489903563234"></image>
-		</view>  -->
-
-    <button type="default" class="login-btn" bindtap="accountLogin">账号登录</button>
-
-     <view class="form-item-text">
-      <navigator url="/pages/auth/register/register" class="register">注册账号</navigator>
-			<navigator url="/pages/auth/reset/reset" class="reset">忘记密码</navigator>
-    </view> 
-
-    <button type="primary" open-type="getUserInfo" class="login-btn" bindgetuserinfo="wxLogin">微信直接登录</button>
-
+    <view class="login-box">
+    <button type="primary" open-type="getUserInfo" class="wx-login-btn" bindgetuserinfo="wxLogin">微信直接登录</button>
+    <button type="primary" class="account-login-btn" bindtap="accountLogin">账号登录</button>
     </view>
 </view>

+ 7 - 70
litemall-wx/pages/auth/login/login.wxss

@@ -1,89 +1,26 @@
-.form-box{
+.login-box{
     width: 100%;
     height: auto;
     overflow: hidden;
     padding: 0 40rpx;
-    margin-top: 96rpx;
+    margin-top: 200rpx;
     background: #fff;
 }
 
-.form-item{
-    position: relative;
-    background: #fff;
+.wx-login-btn{
+    margin: 60rpx 0 40rpx 0;
     height: 96rpx;
-    border-bottom: 1px solid #d9d9d9;
-}
-
-.form-item .username, .form-item .password, .form-item .code{
-    position: absolute;
-    top: 26rpx;
-    left: 0;
-    display: block;
-    width: 100%;
-    height: 44rpx;
-    background: #fff;
-    color: #333;
+    line-height: 96rpx;
     font-size: 30rpx;
-}
-
-.form-item-code{
-    margin-top:32rpx;
-    height: auto;
-    overflow: hidden;
     width: 100%;
+    border-radius: 6rpx;
 }
 
-.form-item-code .form-item{
-    float: left;
-    width: 350rpx;
-}
-
-.form-item-code .code-img{
-    float: right;
-    margin-top: 4rpx;
-    height: 88rpx;
-    width: 236rpx;
-}
-
-.form-item .clear{
-    position: absolute;
-    top: 26rpx;
-    right: 18rpx;
-    z-index: 2;
-    display: block;
-    background: #fff;
-    height: 44rpx;
-    width: 44rpx;
-}
-
-.login-btn{
+.account-login-btn{
     margin: 60rpx 0 40rpx 0;
     height: 96rpx;
     line-height: 96rpx;
-    color: #fff;
     font-size: 30rpx;
     width: 100%;
-    background: #b4282d;
     border-radius: 6rpx;
-}
-
-.form-item-text{
-    height: 35rpx;
-    width: 100%;
-}
-
-.form-item-text .register{
-    display: block;
-    height: 34rpx;
-    float: left;
-    font-size: 28rpx;
-    color: #999;
-}
-
-.form-item-text .reset{
-    display: block;
-    height: 34rpx;
-    float: right;
-    font-size: 28rpx;
-    color: #999;
 }

+ 7 - 1
litemall-wx/project.config.json

@@ -28,7 +28,7 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 0,
+			"current": 32,
 			"list": [
 				{
 					"id": -1,
@@ -210,6 +210,12 @@
 					"pathName": "pages/auth/login/login",
 					"query": ""
 				},
+        {
+          "id": -1,
+          "name": "账号登录",
+          "pathName": "pages/auth/accountLogin/accountLogin",
+          "query": ""
+        },
 				{
 					"id": -1,
 					"name": "注册",