其它登陆方式功能完成

pages.json

@@ -1,65 +1,72 @@
 {
-	"pages": [
-		{
-			"path": "pages/login/index",
-			"style": {
-				"navigationStyle": "custom",
-				"navigationBarTitleText": "登陆首页",
-				"enablePullDownRefresh": false,
-				"app-plus": {
-					"subNVues": [
-						{
-							"id": "loginContent",
-							"path": "pages/login/model/loginContent",
-							"style": {
-								"position": "absolute",
-								"top": "0",
-								"bottom": "0",
-								"left": "0",
-								"right": "0",
-								"background": "transparent"
-							}
-						}
-					]
-				}
-			}
-		},
-		{
-			"path": "pages/text/index",
-			"style": {
-				"navigationBarTitleText": "列表演示"
-			}
-		},
-		{
-			"path": "pages/login/model/loginContent",
-			"style": {
-				"navigationBarTitleText": "",
-				"enablePullDownRefresh": false
-			}
-		},
-		{
-			"path": "pages/login/localPhoneLogin",
-			"style": {
-				"navigationBarTitleText": "",
-				"enablePullDownRefresh": false
-			}
-		}
-	],
-	"globalStyle": {
-		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "uni-app",
-		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8",
-		"navigationStyle": "custom"
-	},
-	"condition": {
-		"current": 0,
-		"list": [
-			{
-				"name": "列表调试",
-				"path": "pages/login/index",
-				"query": ""
-			}
-		]
-	}
+  "pages": [
+    {
+      "path": "pages/login/index",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "登陆首页",
+        "enablePullDownRefresh": false,
+        "app-plus": {
+          "subNVues": [
+            {
+              "id": "loginContent",
+              "path": "pages/login/model/loginContent",
+              "style": {
+                "position": "absolute",
+                "top": "0",
+                "bottom": "0",
+                "left": "0",
+                "right": "0",
+                "background": "transparent"
+              }
+            }
+          ]
+        }
+      }
+    },
+    {
+      "path": "pages/text/index",
+      "style": {
+        "navigationBarTitleText": "列表演示"
+      }
+    },
+    {
+      "path": "pages/login/model/loginContent",
+      "style": {
+        "navigationBarTitleText": "",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/login/localPhoneLogin",
+      "style": {
+        "navigationBarTitleText": "",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/login/otherPhoneLogin",
+      "style": {
+        "navigationBarTitleText": "",
+        "enablePullDownRefresh": false
+      }
+    }
+  ],
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "uni-app",
+    "navigationBarBackgroundColor": "#F8F8F8",
+    "backgroundColor": "#F8F8F8",
+    "navigationStyle": "custom"
+  },
+  "condition": {
+    "current": 0,
+    "list": [
+      {
+        "name": "列表调试",
+        "path": "pages/login/index",
+        "query": ""
+      }
+    ]
+  }
 }

pages/login/localPhoneLogin.vue

@@ -10,14 +10,12 @@
         <view class="local-txt sys-color-gray-9">本机号码登录</view>
         <view class="local-phone sys-color-black sys-weight-400">188****4188</view>
         <view class="login-but sys-color-white sys-background-black">一键登录</view>
-        <view class="other-phone sys-color-gray-6">其他手机号登录</view>
+        <view @click="goToOther" class="other-phone sys-color-gray-6">其他手机号登录</view>
       </view>
       <view class="login-bottom">
         <other-login></other-login>
         <login-agreement :type="2"></login-agreement>
       </view>
-
-
     </view>
   </view>
 </template>
@@ -38,6 +36,11 @@ export default {
     setNavHeight(navHeight){
       console.log('navHeight:'+navHeight)
       this.navHeight=navHeight
+    },
+    goToOther(){
+      uni.navigateTo({
+        'url':'/pages/login/otherPhoneLogin'
+      })
     }
   }
 }

pages/login/model/otherLogin.vue

@@ -1,9 +1,9 @@
 <template>
-  <view class="other-box">
-    <view class="other-login">
-      <view class="other-wire"></view>
-      <view class="other-text sys-color-gray-9">其他登录方式</view>
-      <view class="other-wire"></view>
+  <view class="other-fast-box">
+    <view class="other-fast-login">
+      <view class="other-fast-wire"></view>
+      <view class="other-fast-text sys-color-gray-9">其他登录方式</view>
+      <view class="other-fast-wire"></view>
     </view>
     <view class="login-icon">
       <image class="login-icon-img" src="/static/img/login/weixin.png" mode="aspectFill"></image>
@@ -29,18 +29,18 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.other-box{
-  .other-login{
+.other-fast-box{
+  .other-fast-login{
     width:calc(100vw - 160rpx);
     display: flex;
     justify-content: space-between;
-    .other-text{
+    .other-fast-text{
       font-size: 24rpx;
       margin: 0 14rpx;
       height: 45rpx;
       line-height: 45rpx;
     }
-    .other-wire{
+    .other-fast-wire{
       margin-top: 22rpx;
       width:calc((100vw - 348rpx) / 2);
       height: 1rpx;

pages/login/otherPhoneLogin.vue

@@ -0,0 +1,155 @@
+<template>
+  <view class="other-box">
+    <en-nav @navHeight="setNavHeight" ></en-nav>
+    <view class="login-box" :style="{'height':'calc(100vh - '+navHeight+'px)'}">
+      <view class="login-top">
+        <view class="login-title">
+          <text class="title-item sys-color-black sys-weight-600">验证登录</text>
+        </view>
+        <view class="login-from">
+          <view class="from-text">
+            <input type="tel" class="from-input sys-color-gray-3" v-model="phone" placeholder="请输入手机号"></input>
+          </view>
+          <view class="from-code">
+            <view class="from-text">
+              <input type="tel" class="from-input sys-color-gray-3" v-model="code" placeholder="请输入手机号"></input>
+            </view>
+            <view class="code-text">
+              <text class="sys-color-gray-3" v-if="time<=0" @click="senCode">获取验证码</text>
+              <text class="sys-color-gray-3" v-else>{{time}} s</text>
+            </view>
+          </view>
+        </view>
+        <view class="login-but sys-color-white sys-background-black" :class="{'login-but-no':!isLogin}">登录</view>
+        <view  class="local-txt sys-color-gray-9">若长时间未收到验证码，请使用以下方式快速登录</view>
+      </view>
+    </view>
+    <view class="login-bottom">
+      <other-login></other-login>
+    </view>
+  </view>
+</template>
+
+<script>
+import EnNav from "@/components/en-utils/en-nav/en-nav";
+import tools from "@/service/tools";
+import OtherLogin from "@/pages/login/model/otherLogin";
+export default {
+  name:'otherPhoneLogin',
+  components: {OtherLogin, EnNav},
+  data() {
+    return {
+      navHeight:40,
+      isLogin:false,
+      phone:'',
+      code:'',
+      time:0
+    }
+  },
+  watch:{
+    'phone':function (){
+      this.verifyIsLogin()
+    },
+    'code':function (){
+      this.verifyIsLogin()
+    },
+  },
+  methods: {
+    setNavHeight(navHeight){
+      this.navHeight=navHeight
+    },
+    verifyIsLogin(){
+      this.isLogin = this.phone.length === 11 && this.code !== '';
+    },
+    senCode(){
+      if(this.phone.length !== 11){
+        tools.error('请输入手机号码')
+        return false
+      }
+      this.time=60
+     let timeServe=setInterval(()=>{
+        --this.time
+       if(this.time<=0){
+         clearInterval(timeServe)
+       }
+      },1000)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.other-box{
+  padding: 82rpx 80rpx 0 80rpx;
+  box-sizing: border-box;
+  position: relative;
+  .login-top{
+    .login-title{
+      padding-bottom: 60rpx;
+      .title-item{
+        font-size: 48rpx;
+      }
+    }
+    .login-from{
+      .from-text{
+        width: 100%;
+        padding-bottom: 40rpx;
+        border-bottom: 1rpx solid #E0E0E0;
+        .from-input{
+            font-size: 32rpx;
+          height: 44rpx;
+          line-height: 44rpx;
+        }
+        .from-input::placeholder{
+          color: #999999;
+        }
+      }
+      .from-code{
+        margin-top: 60rpx;
+        display: flex;
+        justify-content: space-between;
+        .from-text{
+          width: 344rpx;
+        }
+        .code-text{
+          width: 180rpx;
+          height: 44rpx;
+          line-height: 44rpx;
+          text-align: center;
+          text{
+            font-size: 32rpx;
+          }
+        }
+
+      }
+
+    }
+
+    .login-but{
+      margin-top: 120rpx;
+      border-radius: 200rpx;
+      height: 88rpx;
+      line-height: 88rpx;
+      text-align: center;
+      transition: .5s ease;
+    }
+    .login-but-no{
+      opacity: 0.1;
+      transition: .5s ease;
+    }
+    .local-txt{
+      padding-top: 32rpx;
+      font-size: 24rpx;
+      text-align: center;
+    }
+  }
+  .login-bottom{
+    padding-bottom: calc(186rpx + env(safe-area-inset-bottom));
+    position: absolute;
+    bottom: 0;
+    left: 80rpx;
+    width:calc(100vw - 160rpx);
+  }
+}
+
+</style>