APP首页添加验证码

anyangWebAPP/pages/login/css/main.css

@@ -11,8 +11,8 @@
 	height:260rpx;
 	/* box-shadow:0rpx 0rpx 60rpx 0rpx rgba(0,0,0,0.1); */
 	/* border-radius:50%; */
-	margin-top: 128rpx;
-	margin-bottom: 72rpx;
+	margin-top: 100rpx;
+	margin-bottom: 60rpx;
 	margin-left: auto;
 	margin-right: auto;
 }

anyangWebAPP/pages/login/login.vue

@@ -9,7 +9,9 @@
       <view class="main">
         <wInput v-model="phoneData" type="text" maxlength="11" placeholder="用户名" :focus="isFocus"></wInput>
         <wInput v-model="passData" type="password" maxlength="11" placeholder="密码"></wInput>
+				<wInput v-model="verificationData" type="text" maxlength="11" placeholder="验证码" :focus="isFocus"></wInput>
       </view>
+			<wButton class="wbutton" text="获取验证码" :rotate="isVerification" @click="sendVerification"></wButton>
       <wButton class="wbutton" text="登 录" :rotate="isRotate" @click="startLogin"></wButton>
 
     </view>
@@ -31,7 +33,9 @@
         logoImage: '../../static/login-icon.png',
         phoneData: '', //用户/电话
         passData: '', //密码
+				verificationData:'',	//验证码
         isRotate: false, //是否加载旋转
+				isVerification:false,
         isFocus: true // 是否聚焦
       };
     },
@@ -69,7 +73,32 @@
           // error
         }
       },
-
+			sendVerification(){
+				this.isVerification = true
+				console.log(this.passData)
+				console.log(this.encryptPassWord(this.passData).toString())
+				const params = {
+					"usercode": this.phoneData,
+					"Password": this.encryptPassWord(this.passData).toString(),
+					"LoginTime": this.$mHelper.CurentTime(),
+				}
+				this.$http.post("/Login/SendCode", params).then((response) => {
+				  if (response.state.toLowerCase() === 'success') {
+				    this.isVerification = false
+						uni.showModal({
+							content: '验证码发送成功',
+							showCancel: false
+						});
+				  }
+				}).catch((e) => {
+					uni.showModal({
+						content: e,
+						showCancel: false
+					});
+				  this.isVerification = false
+				  console.log(e)
+				})
+			},
       startLogin(e) {
         //登录
         if (this.isRotate) {
@@ -97,6 +126,7 @@
         const params = {
           "username": this.phoneData,
           "password": this.encryptPassWord(this.passData).toString(),
+					"Code":this.verificationData,
           "LoginTime": this.$mHelper.CurentTime(),
         }
 		
@@ -113,10 +143,10 @@
             });
           }
         }).catch((e) => {
-			uni.showModal({
-				content: e,
-				showCancel: false
-			});
+					uni.showModal({
+						content: e,
+						showCancel: false
+					});
           this.isRotate = false
           console.log(e)
         })
@@ -142,4 +172,10 @@
 <style>
   @import url("../../components/watch-login/css/icon.css");
   @import url("./css/main.css");
+	/deep/ .wbutton{
+		margin-top: 20px;
+	}
+	/deep/ .main-list{
+		margin: 10px 0px;
+	}
 </style>