登录页第二版

common/styles/global/pages.scss

@@ -8,10 +8,11 @@
 		display: flex;flex-direction: column;display: flex;box-sizing: border-box;
 		position: absolute;top:690rpx;left: 50%;transform: translateX(-50%);
 	}
-	.login-title-img{
+	.index-title-img{
 		width: 411rpx;height: 73rpx;@include ezy-no-repeat-cover;margin-right: auto;
 		background-image: url("@/static/images/login/login-tel.png");
 	}
+	/***** 输入手机号页面*****/
 	.phone-input-box{
 		width: 644rpx;height: 144rpx;box-sizing: border-box;padding-bottom: 20rpx;
 		display: flex;align-items: center;margin-top: 50rpx;
@@ -22,7 +23,7 @@
 		}
 		.phone-prefix::after{content: '';width: 1rpx;height: 40rpx;display: inline-block;background-color: #ffffffd9;}
 		.phone-input {font-size: 38rpx;padding: 0 22rpx;box-sizing: border-box;color: #fff;flex: 1;}
-		.uni-input-placeholder {font-size: 30rpx;color: #ffffffd9;
+		.uni-input-placeholder {font-size: 34rpx;color: #ffffffd9;
 		}
 		.close-btn{width: 42rpx;height: 42rpx;margin-right: 30rpx;@include ezy-no-repeat-cover;
 		background-image: url("@/static/images/login/login-close-icon.png");flex-shrink: 0;}
@@ -43,18 +44,28 @@
 		  	.agreement-text{color: #e3f524;display: contents;}
 		  }
 	}
-		 
-	.yzm-btn-disabled{
-		width: 644rpx;height: 106rpx;margin-top: 84rpx;
-		background-color: red;
-		@include ezy-no-repeat-cover;
-	}
+	
+	.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;
 	}
+	
+	/***** 输入验证码页面*****/
+	.login-title-img{
+		width: 317rpx;height: 77rpx;@include ezy-no-repeat-cover;margin-right: auto;
+		background-image: url("@/static/images/login/login-yzm.png");
+	}
+	.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");}
+	.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: 700px) {
 	  .phone-input-box{margin-top: 24rpx;}
@@ -68,10 +79,12 @@
 	}
 }
 
-	
+
+
+	// height:$titleBar-tabBar-page;
 .lli-develop-expect-page{
 	display: flex;flex-direction: column;justify-content: space-between;align-items: center;
-	background-color: blue;position: relative;height:$titleBar-tabBar-page;
+	background-color: blue;position: relative;
 		.page-content{
 			background-color: #9ed5cf;width: 100%;text-align: center;display: block;
 			margin-top: 44px;flex: 1;

pages/login/index.vue

@@ -3,7 +3,7 @@
 	  <view class="ezy-login-wrap" >
 			<!-- 手机号 -->
 				<view class="login-body-box">
-					<view class="login-title-img"></view>
+					<view class="index-title-img"></view>
 				    <view class="phone-input-box">
 						<view class="phone-prefix">+86</view>
 						<input class="phone-input" type="text" v-model="data.phoneNumber" placeholder="请输入手机号" 
@@ -16,7 +16,7 @@
 						  我已阅读并同意<view class="agreement-text">《用户协议》</view>和<view class="agreement-text">《隐私政策》</view>
 						</checkbox>
 					</view>
-					<view class="yzm-btn-disabled" @click="getYzmBtn" :class="data.telStatus"></view>
+					<view class="login-btn yzm-btn-disabled" @click="getYzmBtn" :class="data.telStatus"></view>
 				</view>
 				<view class="wx-btn-img"></view>
 		</view>
@@ -38,7 +38,6 @@
 	})
 	
 	const getYzmBtn = () => {
-		console.log('123');
 		uni.navigateTo({
 			url: `/pages/login/login?telNum=${data.phoneNumber}`
 		})
@@ -66,6 +65,7 @@
 			
 	const clearTel = () => {
 		data.phoneNumber = '';
+		data.telStatus = 'yzm-btn-disabled';
 		data.clearTelIcon = false;
 	}
 	

pages/login/login.vue

@@ -3,13 +3,17 @@
 	  <view class="ezy-login-wrap" >
 			<view class="login-body-box">
 				<view class="login-title-img"></view>
-				<view class="phone-prefix">验证码已发送至：{{data.phoneNumber}}</view>
+				<view class="yzm-show">验证码已发送至：{{data.phoneNumber}}</view>
 				<view class="phone-input-box">
 					<input class="phone-input" type="text" v-model="data.yzmNumber" placeholder="请输入验证码" 
 					maxlength="6" @input="clearYzmInput" />
 					<view class="close-btn" v-if="data.clearYzmIcon" @click="clearYzm"></view>
 				</view>
-				<view class="yzm-btn-disabled" @click="loginBtn" :class="data.yzmStatus"></view>
+				<view class="login-btn login-btn-disabled" @click="loginBtn" :class="data.yzmStatus"></view>
+				<text class="cxfs-btn" @click="startCountdown"
+				:class="{ 'cxfs-btn-disabled': data.isDisabled}">{{data.buttonText}}</text>
+				<text class="login-text">无法收到验证码</text>
+				<text class="login-text">客服电话:400-052-2130</text>
 			</view>
 		</view>
 		  
@@ -21,22 +25,44 @@
 		ref,
 		reactive
 	} from "vue"
+	import { onLoad,onReady } from '@dcloudio/uni-app';
+	import request from "@/utils/request.js"
 	
 	const data = reactive({
 		phoneNumber: null,
 		yzmNumber: null,
 		clearYzmIcon: false,
 		yzmStatus:'',
+		timeLeft: 60, // 初始倒计时时间（秒）
+		intervalId: null, // 定时器ID
+		isDisabled: false, // 按钮是否禁用
+		buttonText: '重新发送' // 按钮文本
 	})
-	
+
+	onLoad((options) => {
+			startCountdown();
+			// getYzmBtn();
+	})
+		
 	/********* 验证码 *********/
+	const getYzmBtn = () => {
+		return request({
+			url: "/common/app/send/code",
+			method: "POST",
+			data: {
+				phone: 18842603074,
+				sign: ''
+			}
+		})
+	}
+	
 	const loginBtn = () => {
 		uni.switchTab({
 			url: '/pages/study/index'
 		});
-		/* uni.navigateTo({
+		uni.navigateTo({
 			url: `/pages/study/index?gradeId=${options.grade}&termId=${options.term}&text=${text1}${text2}`
-		}) */
+		})
 	}
 	
 	const clearYzmInput = (event) => {
@@ -52,5 +78,28 @@
 		data.clearYzmIcon = false;
 	}
 	
+	const startCountdown= () => {
+	     data.isDisabled = true;
+	      data.buttonText = `重新发送（${data.timeLeft}S）`;
+	      
+	      // 清除之前的定时器（如果有）
+	      if (data.intervalId) {
+	        clearInterval(data.intervalId);
+	      }
+	      
+	      // 设置新的定时器
+	      data.intervalId = setInterval(() => {
+	        data.timeLeft--;
+	        if (data.timeLeft <= 0) {
+	          clearInterval(data.intervalId);
+	          data.timeLeft = 60; // 重置倒计时
+	          data.isDisabled = false;
+	          data.buttonText = '重新发送';
+	        } else {
+	          data.buttonText = `重新发送（${data.timeLeft}S）`;
+	        }
+	      }, 1000);
+	    }
+	
 	
 </script>

pages/study/index.vue

@@ -9,7 +9,7 @@
 			<navigator :url="`/pages/study/catalogue?gradeId=1&termId=1&text=一年级上册`" hover-class="navigator-hover">
 				<button type="default">学习计划</button>
 			</navigator>
-			<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
+			<navigator url="/pages/selectGradesTerms/index" hover-class="navigator-hover">
 				<button type="default">成长</button>
 			</navigator>
 			<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">