新增短信验证码登录

pages.json

@@ -123,10 +123,18 @@
             {
                 "navigationBarTitleText": "",
                 "enablePullDownRefresh": false,
-								"navigationStyle": "custom"
+				"navigationStyle": "custom"
             }
 						
             
+        },
+        {
+        	"path" : "pages/login/loginsms",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "",
+        		"enablePullDownRefresh" : false
+        	}
         }
     ],
   "globalStyle": {

pages/home.vue

@@ -199,10 +199,14 @@
 					this.isLogin = true
 				}else{
 					this.isLogin= false
-					showError("请登录后再操作")
+					setTimeout("",1200)
+					showError("请登录后再操作",this.gotologin())
 				}
 	
 			},
+			gotologin(){
+				this.$navTo("pages/login/index")
+			},
 			// 退出登录
 			handleLogout() {
 				const app = this

pages/login/index.vue

@@ -31,7 +31,7 @@
 	  </view>
 	  
 	  <!-- 验证码登录 -->
-	  <view class="vfcode">验证码登录</view>
+	  <view class="vfcode" @tap="go">验证码登录</view>
 	  
 	  <!-- logo -->
 	  <view class="vbottom">
@@ -166,23 +166,21 @@
       height: 100%;
     }
 	
+	// 国家代码选择
 	.gjcode{
-		font-size: 36rpx;
+		width: 66rpx;
-		width: 46rpx;
 		height: 100%;
+		
+		select{
+			font-size: 32rpx;
+			border: none;
+			padding: 6rpx;
+			margin-right: 22rpx;
+			height: 100%;
+			background-color: #F8F8F8;
+		}
 	}
-
+	// end
-    // 图形验证码
-    .captcha {
-      height: 100%;
-
-      .image {
-        display: block;
-        width: 192rpx;
-        height: 100%;
-		line-height: 100%;
-      }
-    }
   }
   
   // 登录按钮

pages/login/loginsms.vue

@@ -0,0 +1,239 @@
+<template>
+  <view class="login">
+	  <view class="titzone">
+		 <view class="title">你好，欢迎使用</view>
+		 <view class="subtitle">国家文化专网网络注册登录系统</view> 
+	  </view>
+	  
+	  <!-- 表单 -->
+	  <view class="login-form">
+		  <!-- 手机号 -->
+		  <view class="form-item">
+			  <view class="form-item--parts">
+			    <view class="gjcode">
+				  <select>
+					  <option class="">+86</option>
+				  </select>
+			    </view>
+			  </view>
+		    <input class="form-item--input" type="number" v-model="mobile" maxlength="11" placeholder="请输入手机号码" />
+		  </view>
+		  <view class="tips">未注册的手机号验证后自动创建账户</view>
+
+		  <!-- 登录按钮 -->
+		  <view class="login-button" @click="handleLogin">
+		    <text>登录</text>
+		  </view>
+	  </view>
+	  <view class="tips">
+		登录即表明同意《用户协议》和《隐私政策》
+	  </view>
+	  
+	  <!-- 密码登录 -->
+	  <view class="vfcode">密码登录</view>
+	  
+	  <!-- logo -->
+	  <view class="vbottom">
+		  <view class="imagezone">
+			  <image mode="heightFix" style="height: 72rpx;" src="../../static/wjslogo.png"/>X
+			  <image mode="heightFix" style="height: 72rpx;" src="../../static/ccde.png"/>
+		  </view>
+		  <view class="txtzone">
+			  数据集成系统服务商：百链数据科技（深圳）有限公司
+		  </view>
+
+	  </view>
+  </view>
+</template>
+
+<script>
+
+
+  export default {
+    components: {
+		// nothing
+    },
+
+    data() {
+      return {
+        // 数据加载完成 [防止在微信小程序端onLoad和view渲染同步进行]
+        isLoad: false,
+		// 手机号
+		mobile: '',
+		// 密码
+		vpass:"",
+      }
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    async onLoad(options) {
+      console.log('login onLoad')
+      // 设置当前是否显示微信小程序授权登录
+      // await this.setShowUserInfo()
+      // 数据加载完成
+      this.isLoad = true
+      console.log('isLoad', true)
+    },
+
+    methods: {
+		
+		// 点击登录
+		handleLogin() {
+		  const app = this
+		  if (!app.isLoading && app.formValidation(SUBMIT_LOGIN)) {
+		    app.submitLogin()
+		  }
+		},
+
+      /**
+       * 设置当前是否显示微信小程序授权登录
+       *  - 条件1: 只有微信小程序才显示获取用户信息按钮
+       *  - 条件2: 后台设置是否已开启该选项 [后台-客户端-注册设置]
+       */
+      async setShowUserInfo() {
+        console.log('setShowUserInfo start')
+        const app = this
+        // 判断当前客户端是微信小程序, 并且支持getUserProfile接口
+        const isMpWeixin = app.platform === 'MP-WEIXIN' && wx.canIUse('getUserProfile')
+
+        // 获取后台设置
+        await SettingModel.item(SettingKeyEnum.REGISTER.value, false)
+          .then(setting => {
+            app.isMpWeixinAuth = isMpWeixin && setting.isOauthMpweixin
+            console.log('setShowUserInfo complete')
+          })
+      },
+
+      // 获取到用户信息的回调函数
+      onGetUserInfoSuccess({ oauth, code, userInfo }) {
+        // 记录第三方用户信息数据
+        this.partyData = { oauth, code, userInfo }
+        // 显示注册页面
+        this.onShowRegister()
+      },
+
+      // 显示注册页面
+      onShowRegister() {
+        // 是否显示微信小程序授权登录
+        this.isMpWeixinAuth = false
+        // 已获取到了第三方用户信息
+        this.isParty = true
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+	.login{
+		position: relative;
+		min-height: 100vh;
+	}
+	.titzone{
+		padding: 3.2rem;
+		font-size: 32rpx;
+		
+		.title{
+			display: flex;
+			font-size: 40rpx;
+			font-weight: 600;
+			line-height: 1.4;
+		}
+		.subtitle{
+			line-height: 1.6;
+		}
+	}
+  // 输入框元素
+  .form-item {
+    display: flex;
+    padding: 18rpx;
+    border-bottom: 1rpx solid #f3f1f2;
+    margin-bottom: 30rpx;
+    height: 126rpx;
+
+    &--input {
+      font-size: 28rpx;
+      letter-spacing: 1rpx;
+      flex: 1;
+	  padding-left: 12rpx;
+      height: 100%;
+	  background-color: #F8F8F8;
+    }
+
+    &--parts {
+      min-width: 100rpx;
+      height: 100%;
+    }
+	// 国家代码选择
+	.gjcode{
+		width: 66rpx;
+		height: 100%;
+		
+		select{
+			font-size: 32rpx;
+			border: none;
+			padding: 6rpx;
+			margin-right: 22rpx;
+			height: 100%;
+			background-color: #F8F8F8;
+		}
+	}
+
+  }
+  
+  // 登录按钮
+  .login-button {
+    width: 90%;
+	
+	margin-left: auto;
+	margin-right: auto;
+    height: 86rpx;
+    margin-top: 80rpx;
+    background: linear-gradient(to right, #034373, #034373); 
+    color: #fff;
+    
+    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
+    letter-spacing: 5rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  //
+  .tips{
+	  padding:12rpx;
+	  color:#999;
+	  margin-left: 26rpx;
+  }
+  //vfcode
+  .vfcode{
+	  margin-left: 32rpx;
+  }
+  .vbottom{
+	  position: absolute;
+	  width: 100%;
+	  height: 72rpx;
+	  // margin-top: 272rpx;
+	  left: 12rpx;
+	  bottom: 12%;
+	  left: 2%;
+	
+	  .imagezone{
+		  display: flex;
+		  line-height: 72rpx;
+		  padding: 10rpx;
+		  
+		  img{
+			  margin-left: 32rpx;
+		  }
+	  }
+	  
+	  .txtzone{
+		  margin-top: 12rpx;
+		  font-size: 26rpx;
+		  color: #999;
+		  padding-left: 32rpx;
+	  }
+
+  }
+</style>