首页 > 其他分享 >2024/06/06

2024/06/06

时间:2024-06-06 22:56:14浏览次数:20  
标签:flex 06 center countdown color 2024 background border

今日学习时长: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

相关文章

  • 高校运维赛 2024 pyssrf
    没有环境,简单过一遍思路吧考点:pickle反序列化+urllib库注入redis缓存fromflaskimportFlask,requestfromredisimportRedisimporthashlibimportpickleimportbase64importurllibapp=Flask(__name__)redis=Redis(host='127.0.0.1',port=6379)defg......
  • 2024-05-29_二进制文件和文本文件作业
    1.关于文本文件和二进制文件描述错误的是?()A.文本文件是可以读懂的,二进制文件没办法直接读懂B.数据在内存中以二进制的形式存储,如果不加转换的输出到外存,就是二进制文件C.将内存中的数据转化成ASCII码值的形式,并以ASCII码值的形式存储的文件就是文本文件。D.文本文件和二......
  • 2024-05-27_枚举作业
    1.以下关于枚举的说法,哪个是正确的?()A.枚举类型可以具有浮点数作为枚举值。B.枚举类型在内存中存储为整数。C.枚举类型可以包含字符串作为枚举值。D.枚举类型不能作为函数的参数传递。解析:选择B项,枚举类型在内存中存储为整数,其他选项都是不正确的。2.下面代码的结果是:(......
  • 2024.6 做题记录
    2024.6做题记录[JSOI2009]球队收益/球队预算考虑到要求最小总支出,想到最小费用流。首先容易发现,每场比赛都只有两种可能,即甲输乙赢或甲赢乙输。但是这样我们在跑费用流的时候显然需要考虑对于两个因素同时的影响,显然这样不好做。我们不妨假设剩下的比赛所有人都输,那么我们......
  • 整理好了!2024年最常见 20 道 Kafka面试题(九)
    上一篇地址:整理好了!2024年最常见20道Kafka面试题(八)-CSDN博客十七、Kafka的消费者如何进行故障恢复?Kafka的消费者故障恢复主要涉及以下几个方面:消费者组(ConsumerGroup):Kafka通过消费者组来实现故障恢复。当消费者组中的一个消费者发生故障时,其他消费者可以继续读取消息,从......
  • 整理好了!2024年最常见 20 道 Kafka面试题(八)
    上一篇地址:整理好了!2024年最常见20道Kafka面试题(七)-CSDN博客十五、Kafka与传统MQ消息系统之间有什么区别?Kafka与传统的消息队列(MQ)系统有多个显著的区别,这些区别主要体现在以下几个方面:数据模型:Kafka:Kafka是一个分布式流处理平台,它使用发布-订阅模式来处理数据流。它......
  • 整理好了!2024年最常见 20 道 Kafka面试题(七)
    上一篇地址:整理好了!2024年最常见20道Kafka面试题(六)-CSDN博客十三、Kafka中数据传输的事务定义有哪几种?Kafka中数据传输的事务定义有三种:最多一次:在这种模式下,消息最多只会被传输一次,但也存在消息不被传输的可能性。这种情况通常发生在网络不稳定或系统崩溃等异常情况下......
  • 整理好了!2024年最常见 20 道 Kafka面试题(六)
    上一篇地址:整理好了!2024年最常见20道Kafka面试题(五)-CSDN博客十一、Kafka中的ISR(In-SyncReplicas)是什么?在ApacheKafka中,ISR是"In-SyncReplicas"的缩写,它代表与领导者(Leader)保持同步的追随者(Follower)集合。ISR是Kafka保证数据一致性和高可用性的关键概念之一。以......
  • 整理好了!2024年最常见 20 道 Kafka面试题(五)
    上一篇地址:整理好了!2024年最常见20道Kafka面试题(四)-CSDN博客九、Kafka是如何维护消费状态跟踪的?ApacheKafka是一个分布式流处理平台,它能够高效率地处理和存储大量的数据流。在Kafka中,消费状态跟踪是确保消息被正确处理且不被重复处理的关键机制。以下是Kafka维护消......
  • 【2024最新】Python 学习路线分享
    学习资料已打包,需要的小伙伴可以戳这里学习资料整理了一份Python学习路线。内容依然是从入门到进阶,既有教程,也有经典书籍推荐,还有实战开源项目。Python的发展方向还是挺多的,比如服务端开发,爬虫,数据分析,机器学习等,本文推荐的内容全部是服务端开发,Web开发方向。主......