实现手机号密码登录

pages/login/modules/account.js

@@ -3,6 +3,10 @@ Component({
         language: {
             type: Object,
             value: {}
+        },
+        isphonenumber: {
+            type: Boolean,
+            value: false
         }
     },
     options: {
@@ -19,8 +23,8 @@ Component({
         attached: function () {
             /* 恢复缓存中保存的账号密码 */
             this.setData({
-                ...wx.getStorageSync('loginMsg')
-            });
+              ...wx.getStorageSync('loginMsg')
+          });
             setTimeout(() => {
                 this.allowOrNot();
             }, 100)
@@ -56,36 +60,37 @@ Component({
         },
         /* 处理登录 */
         handleLogin() {
-            getApp().globalData.http.login({
-                "accountno": this.data.accountno,
-                "password": require("../../../utils/md5").hexMD5(this.data.password),
-                "systemclient": "bgj-wechat"
-            }).then(res => {
-                getCurrentPages()[0].setData({
-                    loading: false
-                })
-                if (res.code != '1') return wx.showToast({
-                    title: res.msg,
-                    icon: "none"
-                })
-                let loginMsg = {
-                    accountno: this.data.accountno,
-                    baseUrl: getApp().globalData.http.baseUrl,
-                    password: (this.data.memory) ? this.data.password : ''
-                }
-                let list = wx.getStorageSync('logins') || [],
-                    index = list.findIndex(v => v.accountno == loginMsg.accountno && v.baseUrl == loginMsg.baseUrl);
+          getApp().globalData.http.login({
+              "accountno": this.data.accountno,
+              "password": require("../../../utils/md5").hexMD5(this.data.password),
+              "isphonenumber":this.properties.isphonenumber,
+              "systemclient": "bgj-wechat"
+          }).then(res => {
+              getCurrentPages()[0].setData({
+                  loading: false
+              })
+              if (res.code != '1') return wx.showToast({
+                  title: res.msg,
+                  icon: "none"
+              })
+              let loginMsg = {
+                  accountno: this.data.accountno,
+                  baseUrl: getApp().globalData.http.baseUrl,
+                  password: (this.data.memory) ? this.data.password : ''
+              }
+              let list = wx.getStorageSync('logins') || [],
+                  index = list.findIndex(v => v.accountno == loginMsg.accountno && v.baseUrl == loginMsg.baseUrl);
 
-                if (index != -1) {
-                    list[index] = loginMsg
-                } else {
-                    list.push(loginMsg)
-                }
-                wx.setStorageSync('logins', list)
-                wx.setStorageSync('loginMsg', loginMsg)
-                require("./login").loginMsg(res);
-                getApp().globalData.remindchangepassword = res.remindchangepassword == 1;
-            })
-        }
-    }
+              if (index != -1) {
+                  list[index] = loginMsg
+              } else {
+                  list.push(loginMsg)
+              }
+              wx.setStorageSync('logins', list)
+              wx.setStorageSync('loginMsg', loginMsg)
+              require("./login").loginMsg(res);
+              getApp().globalData.remindchangepassword = res.remindchangepassword == 1;
+          })
+      }
+  }
 })

pages/login/modules/account.wxml

@@ -1,6 +1,6 @@
 <van-cell>
-    <text slot='icon' class="iconfont icon-zhanghao" />
-    <input class="input" type="text" value='{{accountno}}' bindinput="inputChange" data-name="accountno" placeholder="请输入账户名" />
+    <text slot='icon' class="iconfont {{isphonenumber?'icon-shoujihao':'icon-zhanghao'}}" />
+    <input class="input" type="{{isphonenumber?'number':'text'}}" value='{{accountno}}' bindinput="inputChange" data-name="accountno" placeholder="{{isphonenumber?'请输入手机号':'请输入账号'}}" />
 </van-cell>
 <van-cell>
     <text slot='icon' class="iconfont icon-mima" />

pages/login/phone.js

@@ -116,19 +116,15 @@ Page({
         })
     },
     /* 切换登录方式 */
-    switchLoginType(e) {
-        // const type = e.currentTarget.dataset.type;
-        const newType = e.currentTarget.dataset.type === 'phone' ? 'account' : 'phone'
-        console.log("newType",newType,e)
-        if (newType === this.data.loginType) return;
+    switchLoginType() {
+        const newType = this.data.loginType === 'phone' ? 'account' : 'phone';
         this.setData({
             loginType: newType,
             disabled: true
         });
         // 切换后需要等组件渲染完成再检查表单状态
         setTimeout(() => {
-            const compId = newType === 'phone' ? '#phoneLogin' : '#accountLogin';
-            const comp = this.selectComponent(compId);
+            const comp = this.selectComponent('#loginForm');
             if (comp && comp.allowOrNot) {
                 comp.allowOrNot();
             }
@@ -147,8 +143,7 @@ Page({
         this.setData({
             loading: true
         })
-        const compId = this.data.loginType === 'phone' ? '#phoneLogin' : '#accountLogin';
-        this.selectComponent(compId).handleLogin();
+        this.selectComponent('#loginForm').handleLogin();
     },
     onConfirm() {
         this.setData({

pages/login/phone.json

@@ -3,7 +3,6 @@
     "usingComponents": {
         "van-divider": "@vant/weapp/divider/index",
         "account": "./modules/account",
-        "phone": "./modules/phone",
         "van-dialog": "@vant/weapp/dialog/index",
         "van-checkbox": "@vant/weapp/checkbox/index"
     }

pages/login/phone.wxml

@@ -2,10 +2,8 @@
 	<image src="/static/image/logo.png" bindtap="todev" />
 </view>
 
-<!-- 手机号登录 -->
-<phone wx:if="{{loginType === 'phone'}}" id='phoneLogin' />
-<!-- 账号登录 -->
-<account wx:if="{{loginType === 'account'}}" id='accountLogin' />
+<!-- 登录表单 -->
+<account id='loginForm' isphonenumber="{{loginType === 'phone'}}" />
 
 
 <!-- 登录按钮 -->