2024/06/11

学习时长：5小时

代码行数：230行

博客数量：1篇

今天主要完成了登录，包括短信验证登录和手机号+密码登录，密码在数据库中经过加密处理，并且完成了登录后信息的缓存。

<template>
  <view class="login-container">
      
      
    <!-- 根据登录方式显示不同的表单 -->
    <view v-if="loginMethod === 'sms'" class="getcodecontainer">
      <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="login-btn" @click="verificat":disabled="phoneNumber.length !== 11 || verificationCode === ''|| !isPhoneNumberValid">登录</button>
    </view>
  
  
  
    <view v-else class="getcodecontainer">
      <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="password" v-model="password" placeholder="请输入密码" />
      </view>
      <button class="login-btn" @click="login":disabled="phoneNumber.length !== 11 || password === ''|| !isPhoneNumberValid">登录</button>
    </view>
    <!-- 切换登录方式 -->
    <view class="switch-login-method" @click="toggleLoginMethod">
      {{ loginMethod === 'sms' ? '密码登录' : '短信验证码登录' }}
    </view>
    <!-- 注册链接 -->
    <view class="register-link" @click="goToRegisterPage">注册新账号</view>
</view>
</template>

<script>
export default {
  data() {
    return {
      phoneNumber: '',
      verificationCode: '',
      password: '',
      countdown: 0,
      loginMethod: 'sms' // 默认使用短信验证码登录
    };
  },
  computed: {
          isPhoneNumberValid() {
          return /^\d{11}$/.test(this.phoneNumber); // 使用正则表达式检验电话号码是否全是数字且长度为11位
          },
    },
  methods: {
    verificat() {//验证码验证
        uni.request({
            url:this.$BASE_URL.BASE_URL+"/verifySmsCodeLogin",
            data:{
                phone:this.phoneNumber,
                code:this.verificationCode
            },
            success: (res) => {
                console.log(res.data.data)
                if(res.data.code)
                {
                    uni.showToast({
                    title:"登录成功",
                    });
                    uni.setStorageSync('userInfo', res.data.data);
                    uni.switchTab({
                        url: "/pages/index/index"
                    });
                }
                else{
                    uni.showToast({
                    title:res.data.msg,
                    icon:"none"
                    });
                }
            }
        })
    },
    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()  
      uni.request({
          url:this.$BASE_URL.BASE_URL+"/getcode",
        data:{
            phone:self.phoneNumber
        },
        success:(res)=>{
            if(res.data.code)
            {
                console.log(res.data)
                uni.showToast({
                title:"验证码已发送",
                });
            }
            else{
                uni.showToast({
                    title:"验证码获取失败",
                    icon: 'error',
                })
            }
        },
        fail: () => {
            uni.showToast({
                title:"验证码获取失败",
                icon: 'error',
            })
        }
      })
    },
    login() {
        const requestBody = {
          phone: this.phoneNumber,
          password: this.password
        };

      uni.request({
          url:this.$BASE_URL.BASE_URL+"/login",
        method: 'POST',
        data: requestBody,
        success: (res) => {
            if(res.data.code)
            {
                console.log(res.data.data)
                uni.showToast({
                title:"登录成功",
                });
                uni.setStorageSync('userInfo', res.data.data);
                uni.switchTab({
                    url: "/pages/index/index"
                });
            }
            else{
                uni.showToast({
                    title:res.data.msg,
                    icon: 'none',
                })
            }
        }
      })
    },
    toggleLoginMethod() {
      // 切换登录方式
      this.loginMethod = this.loginMethod === 'sms' ? 'password' : 'sms';
    },
    goToRegisterPage() {
      // 跳转到注册页面的逻辑
      uni.redirectTo({
          url:"/pages/userinformation/register/register"
      })
    }
  }
};
</script>

<style scoped>
/* 样式可以根据自己的需要进行调整 */
html, body {
  height: 100%; /* 设置页面高度为100% */
  margin: 0; /* 去除页面的默认边距 */
}
.login-container {
    background: linear-gradient(to bottom, #FFFFE0 0%, #87CEEB 250%); /* 使用线性渐变背景 */
    height: 700px; /* 让容器充满整个页面 */
    padding: 20px; /* 设置内边距 */
    border-radius: 10px; /* 设置圆角 */
    display: flex; /* 使用 Flex 布局 */
    flex-direction: column; /* 垂直布局 */
    justify-content: top; /* 内容垂直居中 */
    align-items: center; /* 内容水平居中 */
}
.switch-login-method {
  margin-top: 20px;
  color: #007bff;
  cursor: pointer;
}

.register-link {
  margin-top: 20px;
  color: #007bff;
  cursor: pointer;
}
.error-msg {
    margin-top: ;
    color: red;
    font-size: 12px;
}

.getcodecontainer {
    background: linear-gradient(to bottom, #FFFFE0 0%, #87CEEB 250%); /* 使用线性渐变背景 */
    height: 45%; /* 让容器充满整个页面 */
    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;
    height: 45px ;
}
/* 禁用状态下的样式保持不变 */
.button:hover {
  background-color: #0056b3;
  height: 45px ;
}
button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  height: 45px ;
}
.login-btn {
  width: 100%;
}
/* .countdown {
  font-size: 12px;
  color: #888;
  margin-top: 10px;
} */
.code-btn:hover,
.login-btn:hover {
  background-color: rgba(255, 255, 255, 0.8); /* 鼠标悬停时的背景色，这里使用半透明白色 */
}
</style>