今日学习时长:3小时
代码行数:200行
博客数量:1篇
今天主要在uniapp设计了一个通过手机号认证注册的一个页面,但是今天只完成了前端页面的部分。并且能成功的连接上对应的后端地址。
<template> <view class="container"> <view class="logo"> <!-- 这里放置你的应用 logo --> <image src="/static/logo.png" class="logo-img" mode="aspectFit" /> </view> <view class="form-group"> <text class="label">手机号:</text> <input type="tel" v-model="phoneNumber" placeholder="请输入手机号" /> </view> <view class="form-group"> <text class="label">验证码:</text> <input type="text" v-model="verificationCode" placeholder="请输入验证码" /> <button @click="getVerificationCode" :disabled="countdown > 0||phoneNumber.length !== 11||!isPhoneNumberValid" :class="{ 'code-btn-active': countdown <= 0 }">{{ countdown > 0 ? '重新获取('+ countdown + ' s)' : '获取验证码' }}</button> </view> <button class="regis-btn" @click="regis" :disabled="phoneNumber.length !== 11 || verificationCode === ''|| !isPhoneNumberValid">注册</button> </view> </template> <script> export default { data() { return { phoneNumber: '', verificationCode: '', countdown: 0, mes:'' }; }, computed: { isPhoneNumberValid() { return /^\d{11}$/.test(this.phoneNumber); // 使用正则表达式检验电话号码是否全是数字且长度为11位 } }, methods: { regis() {//注册 }, getVerificationCode() { var self=this // 模拟发送验证码 // 模拟倒计时 this.countdown = 60; // 倒计时时间(秒) const timer = setInterval(() => { if (this.countdown > 0) { this.countdown--; } else { clearInterval(timer); this.countdown = 0; } }, 1000); uni.hideKeyboard() // setTimeout(()=> // { // uni.showToast({ // title:'验证码已发送', // icon:'success' // }); // },1000); uni.request({ url:this.$BASE_URL.BASE_URL+"/regis/getcode", data:{ phone:self.phoneNumber }, success:(res)=>{ self.mes=res.data; console.log(res.data) uni.showToast({ title:self.mes, }); } }) } } }; </script> <style> html, body { height: 100%; /* 设置页面高度为100% */ margin: 0; /* 去除页面的默认边距 */ } .container { background: linear-gradient(to bottom, #FFFFE0 0%, #87CEEB 250%); /* 使用线性渐变背景 * padding: 20px; /* 设置内边距 */ height: 100%; height: 100%; /* 让容器充满整个页面 */ padding: 20px; /* 设置内边距 */ border-radius: 10px; /* 设置圆角 */ display: flex; /* 使用 Flex 布局 */ flex-direction: column; /* 垂直布局 */ justify-content: top; /* 内容垂直居中 */ align-items: center; /* 内容水平居中 */ } .logo { margin-bottom: 30px; } .logo-img { width: 100px; height: 100px; border-radius: 50%; } .form-group { margin-bottom: 20px; display: flex; align-items: center; justify-content: center; } .label { font-weight: bold; margin-right: 10px; } input { flex: 1; padding: 10px; border-radius: 5px; font-size: 18px; background-color: rgba(255, 255, 255, 0.3); /* 设置背景为浅白色并透明 */ } .code-btn-active { display: flex; /* 使用 flex 布局 */ align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ padding: 10px 15px; background-color: #00aaff; color: #ffffff; border: none; border-radius: 5px; cursor: pointer; font-size: 14px; transition: background-color 0.3s; height: 45px ; } button{ display: flex; /* 使用 flex 布局 */ align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ padding: 10px 15px; background-color: #00aaff; color: #ffffff; border: none; border-radius: 5px; cursor: pointer; font-size: 14px; transition: background-color 0.3s; } /* 禁用状态下的样式保持不变 */ .button:hover { background-color: #0056b3; } button:disabled { background-color: #ccc; cursor: not-allowed; } .regis-btn { width: 100%; } /* .countdown { font-size: 12px; color: #888; margin-top: 10px; } */ .code-btn:hover, .regis-btn:hover { background-color: rgba(255, 255, 255, 0.8); /* 鼠标悬停时的背景色,这里使用半透明白色 */ } </style>
标签:flex,06,center,countdown,color,2024,background,border From: https://www.cnblogs.com/zhenaifen/p/18236237