登录页第三版

common/styles/global/pages.scss

@@ -1,7 +1,7 @@
 /***** 这里放页面样式 *****/
 // 登录页  padding-bottom: env(safe-area-inset-bottom); box-sizing: unset;
 .ezy-login-page {
-	width:100%;height:100vh; background-color: #80dfff;position: relative;overflow:hidden;
+	width:100%;height:100vh; background-color: #80dfff;position: relative;
 	.ezy-login-wrap{width:100%;height: 1623.08rpx;background-image: url("@/static/images/login/login-bj.jpg");@include ezy-no-repeat-cover(top);}
 	.login-body-box{
 		display: flex;flex-direction: column;display: flex;box-sizing: border-box;
@@ -11,6 +11,7 @@
 		width: 411rpx;height: 73rpx;@include ezy-no-repeat-cover;margin-right: auto;
 		background-image: url("@/static/images/login/login-tel.png");
 	}
+	.login-btn{width: 644rpx;height: 106rpx;margin-top: 84rpx;@include ezy-no-repeat-cover;}	
 	/***** 输入手机号页面*****/
 	.phone-input-box{
 		width: 644rpx;height: 144rpx;box-sizing: border-box;padding-bottom: 20rpx;
@@ -29,7 +30,8 @@
 	}
 		 
 	.agreement-checkbox-box {
-		  display: flex;justify-content: center;margin-top: 10rpx;;
+		  display: flex;justify-content: center;margin-top: 10rpx;
+		  uni-checkbox-group{font-size: 0;}
 		  .agreement-checkbox-input{width: 40rpx;height: 40rpx;border: 0;margin-right: 4rpx;font-size: 0;}
 		  .uni-checkbox-input{
 			  width: 40rpx;height: 40rpx;border: 0;background-color: unset;@include ezy-no-repeat-cover;
@@ -43,13 +45,15 @@
 		  }
 	}
 	
-	.login-btn{width: 644rpx;height: 106rpx;@include ezy-no-repeat-cover;}	 
-	.yzm-btn-disabled{margin-top: 84rpx;background-image: url("@/static/images/login/login-zym-bj-disabled.png");}
-	.yzm-btn-normal{background-image: url("@/static/images/login/login-zym-bj.png");}
-	.wx-btn-img{
-		width: 96rpx;height: 96rpx;position: absolute;bottom:5%;
-		left: 50%;transform:translateX(-50%) ;
-		background-image: url("@/static/images/login/login-wx-icon.png");@include ezy-no-repeat-cover;
+	.tel-btn-disabled{background-image: url("@/static/images/login/login-zym-bj-disabled.png");}
+	.tel-btn-normal{background-image: url("@/static/images/login/login-zym-bj.png");}
+	.bottom-btn-box{
+		position: absolute;bottom:5%;left: 50%;transform: translateX(-50%);display: flex;
+		.wx-btn,.yk-btn{
+			width: 125rpx;height: 144rpx;@include ezy-no-repeat-cover;margin: 0 20rpx;
+		}
+		.wx-btn{background-image: url("@/static/images/login/login-wx-btn.png");}
+		.yk-btn{background-image: url("@/static/images/login/login-yk-btn.png");}
 	}
 	
 	/***** 输入验证码页面*****/
@@ -57,26 +61,35 @@
 		width: 317rpx;height: 77rpx;@include ezy-no-repeat-cover;margin-right: auto;
 		background-image: url("@/static/images/login/login-yzm.png");
 	}
+	.yzm-btn{margin-top: 42rpx;}
 	.yzm-show{font-size: 28rpx;color: #ffffffd9;margin: 24rpx 0 0 20rpx;}
-	.login-btn-disabled{margin-top: 52rpx;background-image: url("@/static/images/login/login-btn-bj-disabled.png");}
-	.login-btn-normal{margin-top: 52rpx;background-image: url("@/static/images/login/login-btn-bj.png");}
+	.login-btn-disabled{background-image: url("@/static/images/login/login-btn-bj-disabled.png");}
+	.login-btn-normal{background-image: url("@/static/images/login/login-btn-bj.png");}
 	.cxfs-btn{font-size: 30rpx;color: #3257b9;display: inline-block;margin: 20rpx auto 60rpx;}
 	.cxfs-btn-disabled{color: #777;}
 	.login-text{font-size: 28rpx;color: #3257b9;margin: 16rpx 0 0 20rpx;}
 	
 	/* 针对小屏幕设备 */
 	@media (max-height: 800px) {
-		.wx-btn-img{bottom:2%;}
+		.login-body-box{top:660rpx;}
+		.bottom-btn-box{bottom:2%;}
+		.login-btn{margin-top: 64rpx;}
+		// 输入验证码页面
+		.yzm-btn{margin-top: 32rpx;}
+		.cxfs-btn{margin: 16rpx auto 30rpx;}
 	}
 	@media (max-height: 700px) {
+	   .login-body-box{top:640rpx;}
+	   .login-btn{margin-top: 46rpx;}
 	  .phone-input-box{margin-top: 24rpx;}
-	  .yzm-btn-img{margin-top: 52rpx;}
-	  .wx-btn-img{bottom:3%;}
+	  
+	  // 输入验证码页面
+	  .yzm-btn{margin-top: 24rpx;}
+	  .cxfs-btn{margin: 12rpx auto 20rpx;}
 	}
-	@media (max-height: 480px) {
-		overflow:auto;
-		.login-body-box{top:660rpx;}
-		.ezy-login-wrap{height: 1400rpx;position: relative;}
+	@media (max-height: 600px) {
+		.login-btn{margin-top: 36rpx;}
+		.ezy-login-wrap{height: 1360rpx;position: relative;}
 	}
 }
 
@@ -122,10 +135,16 @@
 		width: 635rpx;height: 702rpx;padding: 360rpx 36rpx 42rpx;box-sizing: border-box;text-align: center;
 		background-image: url("@/static/images/login/agree-dialog-bj.png");@include ezy-no-repeat-cover;
 	}
+	.slider-check-title{color:#666;font-size: 32rpx;font-weight: 600;}
+	.slider-check-tip{color:#777;font-size: 28rpx;margin-top: 30rpx;}
+	.slider-check-btn{color:#888;font-size: 32rpx;padding: 16rpx 0;display: inline-block;}
+	.btn-click{color:#666;}
 	#yzm-slider{
-		margin: 32rpx 0 46rpx;position: unset;
+		margin: 32rpx 0;position: unset;
 		// #nc_1_wrapper{width: 100%;}
 		}
+	.slider-tip-red{color: red;}
+	
 }
 
 // 选择年级和学期

pages/login/agreeDialog.vue

@@ -15,6 +15,7 @@
 <script setup>
 	import { ref } from 'vue';
 	const agreePopup = ref(null); // 索引
+	const $emit = defineEmits(['confirm-btn'])
 	// 打开弹窗
 	function handleShow() {
 		agreePopup.value.open();
@@ -24,7 +25,10 @@
 		agreePopup.value.close();
 	}
 	// 同意并登录按钮
-	function confirmBtn(){}
+	function confirmBtn(){
+		$emit('confirm-btn');
+		agreePopup.value.close();
+	}
 	defineExpose({
 			handleShow
 		})

pages/login/index.vue

@@ -19,12 +19,15 @@
 						  我已阅读并同意<view class="agreement-text" @click="agreeBtn">《用户协议》</view>和<view @click="agreeBtn" class="agreement-text">《隐私政策》</view>
 						</view>
 					</view>
-					<view class="login-btn yzm-btn-disabled" @click="getYzmBtn" :class="indexData.telStatus"></view>
+					<view class="login-btn" @click="getYzmBtn" :class="indexData.telStatus"></view>
+				</view>
+				<view class="bottom-btn-box">
+					<view class="wx-btn"></view>
+					<view class="yk-btn" @click="ykBtn"></view>
 				</view>
-				<view class="wx-btn-img"></view>
 		</view>
 	  <agree-content-dialog ref="agreeContentDialogRef"></agree-content-dialog>
-	  <agree-dialog ref="agreeDialogRef"></agree-dialog>
+	  <agree-dialog ref="agreeDialogRef" @confirm-btn="confirmBtn"></agree-dialog>
   </view>
 </template>
 
@@ -37,7 +40,7 @@
 	let indexData = reactive({
 		phoneNumber: null,
 		clearTelIcon: false,
-		telStatus:'',
+		telStatus:'tel-btn-disabled',
 		isAgreed: false,
 		sliderObj:{},
 	})
@@ -47,20 +50,28 @@
 	onLoad((options) => {})
 	
 	const getYzmBtn = () => {
-			// agreeDialogRef.value.handleShow();
-		uni.navigateTo({
-			url: `/pages/login/login?telNum=${indexData.phoneNumber}`
-		})
+		if(indexData.telStatus === 'tel-btn-normal'){
+			if(indexData.isAgreed === true){
+				uni.navigateTo({
+					url: `/pages/login/login?telNum=${indexData.phoneNumber}`
+				})
+			}else{
+				agreeDialogRef.value.handleShow();
+			}
+		}
+	}
+	// 用户协议同意
+	const confirmBtn = () => {
+		indexData.isAgreed = true;
+		getYzmBtn();
 	}
-	
 	// 手机号校验规则
 	const validatePhoneNumber = (value) => {
 	  const phoneRegex = /^1[3-9]\d{9}$/;
 	  if (phoneRegex.test(value)) {
-		console.log('手机号格式正确');
-		indexData.telStatus = 'yzm-btn-normal';
+		indexData.telStatus = 'tel-btn-normal';
 	  } else {
-	    console.log('手机号格式不正确');
+		indexData.telStatus = 'tel-btn-disabled';
 	  }
 	}
 	
@@ -75,7 +86,7 @@
 			
 	const clearTel = () => {
 		indexData.phoneNumber = '';
-		indexData.telStatus = 'yzm-btn-disabled';
+		indexData.telStatus = 'tel-btn-disabled';
 		indexData.clearTelIcon = false;
 	}
 	
@@ -90,4 +101,8 @@
 			indexData.isAgreed = false;
 		}
 	}
+	// 游客登录
+	const ykBtn = () => {
+		
+	}
 </script>

pages/login/login.vue

@@ -11,14 +11,14 @@
 						maxlength="6" @input="clearYzmInput" />
 					<view class="close-btn" v-if="loginData.clearYzmIcon" @click="clearYzm"></view>
 				</view>
-				<view class="login-btn login-btn-disabled" @click="loginBtn" :class="loginData.yzmStatus"></view>
+				<view class="login-btn yzm-btn" @click="loginBtn" :class="loginData.yzmStatus"></view>
 				<text class="cxfs-btn" @click="startCountdown"
 					:class="{ 'cxfs-btn-disabled': loginData.isDisabled}">{{loginData.buttonText}}</text>
 				<text class="login-text" @click="goIndex">无法收到验证码</text>
 				<text class="login-text">客服电话:400-052-2130</text>
 			</view>
 		</view>
-		<sliderDialog ref="sliderDialogRef" @emitFun="emitFun"></sliderDialog>
+		<sliderDialog ref="sliderDialogRef" @emitFun="emitFun" v-if="sliderFlag"></sliderDialog>
 	</view>
 </template>
 
@@ -39,14 +39,15 @@
 					phoneNumber: null,
 					yzmNumber: null,
 					clearYzmIcon: false,
-					yzmStatus: '',
+					yzmStatus: 'login-btn-disabled',
 					timeLeft: 60, // 初始倒计时时间（秒）
 					intervalId: null, // 定时器ID
 					isDisabled: false, // 按钮是否禁用
-					buttonText: '重新发送', // 按钮文本
+					buttonText: '', // 按钮文本
 				},
 				sliderData: {},
 				sliderDialogRef: null,
+				sliderFlag: false,
 
 			}
 		},   
@@ -55,28 +56,23 @@
         },
 		onLoad(options) {
 			this.loginInit(options);
-			this.startCountdown();
-			this.getYzmBtn();
-		},
-		onReady() {
-			// console.log(sliderDialogRef.value,'sliderDialogRef.value');
-			// this.$refs.sliderDialogRef.sliderShow();
 		},
+		onReady() {},
 		methods: {
-			emitFun(data){
-				console.log(data,'滑块成功')
+			emitFun(data){
+				this.sliderFlag =false;
+				this.startCountdown();
+				this.sliderData =data;
+				this.getYzmBtn();
 			},
-			// receiveRenderData(data) {
-			// 	console.log("获得接受")
-			// 	console.log(data)
-			// },
 			loginInit(options) {
 				this.loginData.phoneNumber = options.telNum;
+				this.sliderFlag = true;
 			},
 			getYzmBtn() {
 				let req = {
 					appkey: "FFFF0N00000000007EC0",
-					phone: "18640920672",
+					phone: this.loginData.phoneNumber,
 					scene: "nc_message_h5',",
 					sessionid: this.sliderData.sessionId,
 					sig: this.sliderData.sig,
@@ -88,8 +84,8 @@
 			},
 			loginBtn() {
 				let req = {
-					tel: "1",
-					code: '1'
+					tel: this.loginData.phoneNumber,
+					code: this.loginData.yzmNumber,
 				}
 				login(req).then(res => {
 					if (res.code == 0) {
@@ -108,24 +104,27 @@
 								url: `/pages/study/index?nianji=${res.data.nianji}&xueqi=${res.data.xueqi}`
 							})
 						}
-						
-						
-				
 					}
 				})
 			},
 			clearYzmInput(event) {
 				if (event.detail.value.length > 0) {
 					this.loginData.clearYzmIcon = true;
+					this.loginData.yzmStatus = 'login-btn-normal';
 				} else {
 					this.loginData.clearYzmIcon = false;
+					this.loginData.yzmStatus = 'login-btn-disabled';
 				}
 			},
 			clearYzm() {
 				this.loginData.yzmNumber = '';
+				this.loginData.yzmStatus = 'login-btn-disabled';
 				this.loginData.clearYzmIcon = false;
 			},
 			startCountdown() {
+				if(this.loginData.buttonText === '重新发送'){
+					this.sliderFlag = true;
+				}
 				this.loginData.isDisabled = true;
 				this.loginData.buttonText = `重新发送（${this.loginData.timeLeft}S）`;
 
@@ -133,7 +132,7 @@
 				if (this.loginData.intervalId) {
 					clearInterval(this.loginData.intervalId);
 				}
-
+				
 				// 设置新的定时器
 				this.loginData.intervalId = setInterval(() => {
 					this.loginData.timeLeft--;
@@ -147,15 +146,15 @@
 					}
 				}, 1000);
 			},
+			
 			goIndex() {
 				uni.navigateTo({
-					url: `/pages/login/index?data=` + JSON.stringify(this.sliderData)
+					url: `/pages/login/index`
 				})
 			}
 
 		},
 		mounted() {
-		//	this.$refs.sliderDialogRef.sliderShow();
 		},
 	}
 </script>

pages/login/sliderDialog.vue

@@ -1,16 +1,16 @@
 <template>
 	<view class="slider-check-dialog">
 		<view class="slider-check-content">
-			<view>请通过滑块验证</view>
+			<view class="slider-check-title" :class="{ 'slider-tip-red': isSlider}">请通过滑块验证</view>
+			<view class="slider-check-tip">请滑动下方滑块，完成验证。</view>
 			<view id="yzm-slider"></view>
-			<view @click="AWSC.emitData">关闭1111</view>
+			<text @click="AWSC.emitData" class="slider-check-btn" :class="{ 'btn-click': isSlider}">确认</text>
 		</view>
 	</view>
 </template>
 <script>
 	export default {
 		mounted() {
-
 		},
 		data() {
 			return {
@@ -18,17 +18,13 @@
 					sessionId: '',
 					sig: '',
 					token: '',
-				}
+				},
+				isSlider:false,
 			}
 		},
 		methods: {
 			receiveRenderData(data) {
-				console.log("获得接受")
-				console.log(data)
 				this.$emit('emitFun', data)
-				
-				// this.$emit('success');
-			//	this.sliderClose()
 			},
 			sliderShow() {
 				this.$refs.sliderPopup.open()
@@ -70,13 +66,7 @@
 						renderTo: "yzm-slider",
 						//前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。
 						success: function(data) {
-						
-							window.console && console.log(data.sessionId, "111")
-							window.console && console.log(data.sig, "222")
-							window.console && console.log(data.token, "3333")
-							
 							that.getData(data)
-						
 						},
 						// 滑动验证失败时触发该回调参数。
 						fail: function(failCode) {
@@ -97,15 +87,16 @@
 					AWSC.emitData;
 			},
 			emitData(e, ownerInstance) {
-				console.log(ownerInstance)
-				console.log(this.sessionId)
-				console.log(this)
+				if(this.sessionId){
+					ownerInstance.callMethod('receiveRenderData', {
+						sessionId: this.sessionId,
+						sig: this.sig,
+						token: this.token
+					})
+				}else{
+					this.isSlider = true;
+				}
 				
-				ownerInstance.callMethod('receiveRenderData', {
-					sessionId: this.sessionId,
-					sig: this.sig,
-					token: this.token
-				})
 			}
 
 		}