2024/06/06

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