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>