登录

pages/teacher/login/login.vue

@@ -1,122 +1,198 @@
 <template>
 	<view>
-		<u-navbar title="" back-icon-size="24" ></u-navbar>
+		<u-navbar title="" back-icon-size="24"></u-navbar>
 		<view class="title">
 			教师端登录
 		</view>
 		<view class="welcome">
 			欢迎来到青少年宫启航教培管家
 		</view>
+		
 		<!-- 登录框-->
 		<view class="login-box">
 			<view class="tel">
 				<view class="icon">
 					<img src="../../../assets/img/riFill-cellphone-fill@1x.png" alt="">
-				
 				</view>
-				<u-line color="red" direction="col" length="40rpx" margin="auto 0"/>
-				<view class="tips"><input type="text" placeholder="请填写手机号码"></view>
+				<u-line color="red" direction="col" length="40rpx" margin="auto 0" />
+				<view class="tips"><u-input v-model="form.telephone" type="number" placeholder="请填写手机号码" /></view>
 			</view>
 			<view class="pwd">
 				<view class="icon">
 					<img src="../../../assets/img/riFill-lock-password-fill@1x.png" alt="">
-					
-				
 				</view>
-				<u-line color="red" direction="col" length="40rpx" margin="auto 0"/>
+				<u-line color="red" direction="col" length="40rpx" margin="auto 0" />
 				<view class="tips">
-				<view class="input"><input type="text" placeholder="请输入验证码"></view>	
-				<view class="verification-code">获取验证码</view>
+					<view class="input"><u-input v-model="form.verifyCode" type="number" placeholder="请输入验证码" /></view>
+					<view class="verification-code" :style="isCodeTipsColor ? 'color: #999999;' : ''" @click="getCode">{{codeTips}}</view>
+					<u-verification-code :seconds="sendMsgSecond" ref="uCode" @change="codeChange" @end="end" @start="start" change-text="已发送(Xs)">
+					</u-verification-code>
 				</view>
-				
 			</view>
-		  
-			
 		</view>
-	
-	<!-- 按钮 -->
-	  <button class="login-btn">登  录</button>
+
+		<!-- 按钮 -->
+		<button class="login-btn">登  录</button>
 	</view>
 </template>
 
 <script>
+	import * as loginApi from '@/apis/login.js'
+	import {
+		checkPhone
+	} from '@/apis/utils'
+	
 	export default {
 		data() {
 			return {
-				
+				form: {
+					telephone: '',
+					verifyCode: '',
+				},
+				isSendMsgIng: false,
+				isCodeTipsColor: false,
+				sendMsgSecond: 60,
+				codeTips: '',
 			}
 		},
 		methods: {
+			codeChange(text) {
+				this.codeTips = text;
+			},
+			start() {
+				if (!this.isSendMsgIng) {
+					uni.showLoading({
+						title: "加载中",
+						mask: true,
+					})
+					loginApi.getVerifyCode(this.form.telephone).then((response) => {
+						uni.hideLoading();
+						this.carhelp.set("getvcodetime", new Date().getTime());
 			
+						if (!"") {
+							//倒计时
+							uni.showToast({
+								title: "发送成功"
+							})
+						} else {
+							uni.showToast({
+								title: "您的验证码已经发送[5分钟有效]，请勿重复点击"
+							})
+						}
+					}).catch(error => {
+						uni.showToast({
+							title: error,
+							icon: "none"
+						})
+					})
+				}
+			},
+			//倒计时
+			end() {
+				this.sendMsgSecond = 60;
+				this.isSendMsgIng = false;
+				this.isCodeTipsColor = false;
+			},
+			// 获取验证码
+			getCode() {
+				if (this.$refs.uCode.canGetCode) {} else {
+					uni.showToast({
+						title: '倒计时结束后再发送',
+						icon: "none"
+					})
+					return
+				}
+			
+				var checkPhoneResult = checkPhone(this.form.telephone);
+			
+				if (checkPhoneResult !== true) {
+					uni.showToast({
+						title: checkPhoneResult,
+					})
+					return;
+				}
+				this.$refs.uCode.start();
+				this.isCodeTipsColor = true;
+			},
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-	page{
+	page {
 		background-color: #fff;
 	}
-	.title{
+
+	.title {
 		margin: 48rpx 0 0 96rpx;
 		color: rgba(16, 16, 16, 1);
 		font-size: 24px;
 	}
-	.welcome{
-		margin-left:96rpx;
+
+	.welcome {
+		margin-left: 96rpx;
 		margin-top: 8rpx;
 		color: rgba(119, 119, 119, 1);
 	}
 
-   // 登录框
-   .login-box{
-	   margin-top: 160rpx;
-	   .tel,.pwd{
-	    display: flex;
-		padding-left: 20rpx;
-	    width: 74.4%;
-		height: 80rpx;
-		line-height:80rpx;
-		color: rgba(183, 172, 172, 1);
-		margin: auto;
-		margin-bottom: 36rpx;
-		border: 1px solid rgba(230, 230, 230, 1);
-		border-radius: 50px;
-		.icon{
-			width: 14%;
-			text-align: center;
-			img{
-				vertical-align: middle;
-			}
-		}
-		.tips{
-			text-indent:16rpx;
-			padding-right: 16rpx;
-			// width: 85%;
+	// 登录框
+	.login-box {
+		margin-top: 160rpx;
+
+		.tel,
+		.pwd {
 			display: flex;
-			justify-content: space-between;
-			/deep/uni-input{
-				height: 40px !important;
-				line-height: 40px !important;
+			padding-left: 20rpx;
+			width: 74.4%;
+			height: 80rpx;
+			line-height: 80rpx;
+			color: rgba(183, 172, 172, 1);
+			margin: auto;
+			margin-bottom: 36rpx;
+			border: 1px solid rgba(230, 230, 230, 1);
+			border-radius: 50px;
+
+			.icon {
+				width: 14%;
+				text-align: center;
+
+				img {
+					vertical-align: middle;
+				}
 			}
-			.input{
-				width: 55%;
+
+			.tips {
+				text-indent: 16rpx;
+				padding-right: 16rpx;
+				// width: 85%;
+				display: flex;
+				justify-content: space-between;
+
+				/deep/uni-input {
+					height: 40px !important;
+					line-height: 40px !important;
+				}
+
+				.input {
+					width: 60%;
+				}
+			}
+
+			// 验证码
+			.verification-code {
+				color: rgba(13, 186, 199, 1);
+				line-height: 40px;
 			}
 		}
-		// 验证码
-		.verification-code{
-			color: rgba(13, 186, 199, 1);
-			line-height: 40px;
-		}
-	   }
-	   
-   }
-   
-   .login-btn{
-	   width: 74.4%;
-	   background-color: rgba(13, 186, 199, 1);
-	   color: rgba(255, 255, 255, 1);
-	   font-size: 16px;
-	   border-radius: 50px;
-	   margin-top: 68rpx;
-   }
+
+	}
+
+	.login-btn {
+		width: 74.4%;
+		background-color: rgba(13, 186, 199, 1);
+		color: rgba(255, 255, 255, 1);
+		font-size: 16px;
+		border-radius: 50px;
+		margin-top: 68rpx;
+	}
 </style>