uniapp手机号认证注册的一个页面

今天主要在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>