调整输入验证码交互

components.d.ts

@@ -9,28 +9,22 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     ABadge: typeof import('ant-design-vue/es')['Badge']
-    ABreadcrumb: typeof import('ant-design-vue/es')['Breadcrumb']
     ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
-    ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
     ADrawer: typeof import('ant-design-vue/es')['Drawer']
     AImage: typeof import('ant-design-vue/es')['Image']
     AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
-    AMenu: typeof import('ant-design-vue/es')['Menu']
-    AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
     AModal: typeof import('ant-design-vue/es')['Modal']
+    APagination: typeof import('ant-design-vue/es')['Pagination']
     APopover: typeof import('ant-design-vue/es')['Popover']
     ARangePicker: typeof import('ant-design-vue/es')['RangePicker']
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASlider: typeof import('ant-design-vue/es')['Slider']
-    ASpace: typeof import('ant-design-vue/es')['Space']
     ASpin: typeof import('ant-design-vue/es')['Spin']
-    ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
     ASwitch: typeof import('ant-design-vue/es')['Switch']
     ATable: typeof import('ant-design-vue/es')['Table']
-    ATabPane: typeof import('ant-design-vue/es')['TabPane']
-    ATabs: typeof import('ant-design-vue/es')['Tabs']
     AUpload: typeof import('ant-design-vue/es')['Upload']
+    ElCascader: typeof import('element-plus/es')['ElCascader']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

src/component/LoginPage/login/personal.vue

@@ -68,6 +68,7 @@
 					<div class="codeEmail">We’ve sent an code to your email <span>{{ email }}</span></div>
 					<div class="codeEmailInput">
 						<VerificationCodeInput
+						ref="verificationCodeInputDom"
 						:ct="emailCode"
 						@sendCaptcha="submitEmailLogin($event)"
 						></VerificationCodeInput>
@@ -97,7 +98,9 @@
             <div
               class="login_submit_button"
               :state="emailStap"
+			  :class="{'active':animation}"
               @click="submitPerLogin()"
+			  @mousedown="loginBtnMousedown"
             >
               Sign in
             </div>
@@ -302,6 +305,8 @@ export default defineComponent({
       passwordType: "password",
       userId: "",
       loginTime: true,
+	  animation: false,
+	  inputCodeTime: null as any,
     };
   },
   onBeforeUnmount() {
@@ -413,6 +418,16 @@ export default defineComponent({
     submitPerLogin() {
       //输入账号密码
       if (this.emailStap >= 2) {
+		let verificationCodeInputDom:any = this.$refs.verificationCodeInputDom
+		let code =  verificationCodeInputDom.getCtData.map(item => item).join('');
+		console.log(code)
+		if(code.length !== this.emailCode.length){
+			message.info("Please enter the complete verification code.");
+		}else{
+			this.submitEmailLogin(code)
+		}
+
+		//提交验证码
         return;
       } else {
         if (!this.password) {
@@ -480,20 +495,23 @@ export default defineComponent({
 
     //邮箱登录提交
     submitEmailLogin(emailVerifyCode: any) {
-      let data = {
+		clearTimeout(this.inputCodeTime)
-        email: this.email,
+		this.inputCodeTime = setTimeout(()=>{
-        emailVerifyCode: emailVerifyCode,
+			let data = {
-        loginType: "EMAIL",
+				email: this.email,
-        userId: this.userId,
+				emailVerifyCode: emailVerifyCode,
-      };
+				loginType: "EMAIL",
-	  this.$emit('update:isMask',true)
+				userId: this.userId,
-      Https.axiosPost(Https.httpUrls.accountLogin, data)
+			};
-        .then((rv: any) => {
+			this.$emit('update:isMask',true)
-          this.setSuccessLogin(rv);
+			Https.axiosPost(Https.httpUrls.accountLogin, data)
-        })
+				.then((rv: any) => {
-        .catch((res) => {
+				this.setSuccessLogin(rv);
-			this.$emit('update:isMask',false)
+				})
-		});
+				.catch((res) => {
+					this.$emit('update:isMask',false)
+				});
+		},1000)
     },
     isCheckAgreement() {
       message.info("Agree to all terms, privacy fees and policies");
@@ -602,7 +620,15 @@ export default defineComponent({
     //         }
     //     );
     // },
-  },
+	loginBtnMousedown(){
+		this.animation = true
+		let mouseup = ()=>{
+			this.animation = false
+			document.removeEventListener('mouseup',mouseup)
+		}
+		document.addEventListener('mouseup',mouseup)
+	},
+},
   mounted() {
   },
 });
@@ -763,13 +789,12 @@ export default defineComponent({
         transition: all 0.3s;
 		margin-top: 5rem;
 		font-weight: 600;
-
+		&.active{
+			transform: scale(.9);
+		}
         &:hover {
           background: #3c3c3c;
         }
-        &[state="2"] {
-          cursor: not-allowed;
-        }
       }
 	  .NewAccount{
 		font-size: 1.6rem;
@@ -778,6 +803,8 @@ export default defineComponent({
 		margin-top: 1.2rem;
 		text-align: left;
 		cursor: pointer;
+		width: min-content;
+		white-space: nowrap;
 	  }
 	  .segmentation{
 		margin-top: 4rem;

src/component/LoginPage/login/school.vue

@@ -90,6 +90,7 @@
 					<div class="codeEmail">We’ve sent an code to your email <span>{{ email }}</span></div>
 					<div class="codeEmailInput">
 						<VerificationCodeInput
+						ref="verificationCodeInputDom"
 						:ct="emailCode"
 						@sendCaptcha="submitEmailLogin($event)"
 						></VerificationCodeInput>
@@ -121,9 +122,11 @@
 							</div>
 						</div> -->
             <div
-              class="login_submit_button marign_top40"
+			class="login_submit_button"
               :state="emailStap"
+			  :class="{'active':animation}"
               @click="submitPerLogin()"
+			  @mousedown="loginBtnMousedown"
             >
               Sign in
             </div>
@@ -302,6 +305,8 @@ export default defineComponent({
       passwordType: "password",
       userId: "",
       loginTime: true,
+	  animation: false,
+	  inputCodeTime: null as any,
     };
   },
   onBeforeUnmount() {
@@ -413,6 +418,16 @@ export default defineComponent({
     submitPerLogin() {
       //输入账号密码
       if (this.emailStap >= 2) {
+        let verificationCodeInputDom:any = this.$refs.verificationCodeInputDom
+		let code =  verificationCodeInputDom.getCtData.map(item => item).join('');
+		console.log(code)
+		if(code.length !== this.emailCode.length){
+			message.info("Please enter the complete verification code.");
+		}else{
+			this.submitEmailLogin(code)
+		}
+
+		//提交验证码
         return;
       } else {
         if (!this.password) {
@@ -481,21 +496,24 @@ export default defineComponent({
 
     //邮箱登录提交
     submitEmailLogin(emailVerifyCode: any) {
-      let data = {
+		clearTimeout(this.inputCodeTime)
-        email: this.email,
+		this.inputCodeTime = setTimeout(()=>{
-        emailVerifyCode: emailVerifyCode,
+			let data = {
-        loginType: "EMAIL",
+				email: this.email,
-        userId: this.userId,
+				emailVerifyCode: emailVerifyCode,
-        organizationName: this.selectSchool,
+				loginType: "EMAIL",
-      };
+				userId: this.userId,
-	  this.$emit('update:isMask',true)
+				organizationName: this.selectSchool,
-      Https.axiosPost(Https.httpUrls.accountLogin, data)
+			};
-        .then((rv: any) => {
+			this.$emit('update:isMask',true)
-          this.setSuccessLogin(rv);
+			Https.axiosPost(Https.httpUrls.accountLogin, data)
-        })
+				.then((rv: any) => {
-        .catch((res) => {
+				this.setSuccessLogin(rv);
-			this.$emit('update:isMask',false)
+				})
-		});
+				.catch((res) => {
+					this.$emit('update:isMask',false)
+				});
+		},1000)
     },
     isCheckAgreement() {
       message.info("Agree to all terms, privacy fees and policies");
@@ -604,6 +622,14 @@ export default defineComponent({
     //         }
     //     );
     // },
+	loginBtnMousedown(){
+		this.animation = true
+		let mouseup = ()=>{
+			this.animation = false
+			document.removeEventListener('mouseup',mouseup)
+		}
+		document.addEventListener('mouseup',mouseup)
+	},
   },
   mounted() {
   },
@@ -781,13 +807,12 @@ export default defineComponent({
         transition: all 0.3s;
 		margin-top: 5rem;
 		font-weight: 600;
-
+		&.active{
+			transform: scale(.9);
+		}
         &:hover {
           background: #3c3c3c;
         }
-        &[state="2"] {
-          cursor: not-allowed;
-        }
       }
 	  .NewAccount{
 		font-size: 1.6rem;
@@ -796,6 +821,8 @@ export default defineComponent({
 		margin-top: 1.2rem;
 		text-align: left;
 		cursor: pointer;
+		width: min-content;
+		white-space: nowrap;
 	  }
 	  .segmentation{
 		margin-top: 4rem;