微信小程式實現登入註冊介面

Page({

  /**
   * 頁面的初始資料
   */
  data: {
    current:1,
    codeText:'獲取驗證碼',
    counting:false,
  },
  // 登陸註冊監聽
  click(e){
    let index = e.currentTarget.dataset.code;
    this.setData({
      current:index
    })
  },
  //獲取驗證碼 
  getCode(){
    var that = this;
    if (!that.data.counting) {
      wx.showToast({
        title: '驗證碼已傳送',
      })
      //開始倒計時60秒
      that.countDown(that, 60);
    } 
  },
  //倒計時60秒
  countDown(that,count){
    if (count == 0) {
      that.setData({
        codeText: '獲取驗證碼',
        counting:false
      })
      return;
    }
    that.setData({
      counting:true,
      codeText: count + '秒後重新獲取',
    })
    setTimeout(function(){
      count--;
      that.countDown(that, count);
    }, 1000);
  },
  /**
   * 生命週期函數--監聽頁面載入
   */
  onLoad(options) {

  },

  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow() {

  },

  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide() {

  },

  /**
   * 生命週期函數--監聽頁面解除安裝
   */
  onUnload() {

  },

  /**
   * 頁面相關事件處理常式--監聽使用者下拉動作
   */
  onPullDownRefresh() {

  },

  /**
   * 頁面上拉觸底事件的處理常式
   */
  onReachBottom() {

  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage() {

  }
})

<view class="top-box">
  <view>Hi</view>
  <view class="next-text">歡迎使用！</view>
</view>
<!-- 登入、註冊 -->
<view class="center-box">
  <view class="nav">
    <view class="left {{current==1?'select':''}}" bindtap="click" data-code="1">
      <text>登入</text>
    </view>
    <view class="right {{current==0?'select':''}}" bindtap="click" data-code="0">
      <text>註冊</text>
    </view>
  </view>
  <!-- 登入 -->
  <view class="input-box" hidden="{{current==0}}">
    <view class="wei-input">
      <icon type="waiting" color="#44ADFB" size="16"></icon>
      <input class="input" auto-focus placeholder="請輸入手機號/登入名"/>
    </view>
    <view class="wei-input">
      <icon type="success" color="#44ADFB" size="16"></icon>
      <input class="input" auto-focus placeholder="請輸入登入密碼"/>
    </view>
    <view class="forget">
      <text>忘記密碼?</text>
    </view>
  </view>
  <!-- 註冊 -->
  <view class="input-box" hidden="{{current==1}}">
    <view class="wei-input">
      <icon type="waiting" color="#44ADFB" size="16"></icon>
      <input class="input" auto-focus placeholder="請輸入手機號"/>
    </view>
    <view class="wei-input">
      <icon type="waiting" color="#44ADFB" size="16"></icon>
      <input class="input" auto-focus placeholder="請輸入6位驗證碼"/>
      <text class="input-code" bindtap="getCode">{{codeText}}</text>
    </view>
    <view class="wei-input">
      <icon type="success" color="#44ADFB" size="16"></icon>
      <input class="input" auto-focus placeholder="請輸入密碼"/>
    </view>
    <view class="wei-input">
      <icon type="success" color="#44ADFB" size="16"></icon>
      <input class="input" auto-focus placeholder="請確認密碼"/>
    </view>
  </view>
  <view class="sumbit-btn">
    <button class="button" 
    style="background-color: #33ccff;font-size: 30rpx;" 
    type="primary">立即{{current==1?'登入':'註冊'}}</button>
  </view>
</view>
<!-- 重影 -->
<view class="shadow shadow-1"></view><view class="shadow shadow-2"></view>
<!-- 說明 -->
<view class="bottom-box">
  demo·開源·點贊·收藏·打賞·Jeffery~
</view>

page{
  height: 100%;
  background-color: white;
  margin: 0px;
  padding: 0px;
}
/* 頂部背景 */
.top-box{
  height: 30%;
  background-image: linear-gradient( #44ADFB,#5ed6fd);
  padding: 30rpx;
  color: white;
  font-weight: bold;
}
.next-text{
  margin-top: 15rpx;
}
/* 內容 */
.center-box{
  background-color: white;
  margin: -20% 20rpx 0rpx 20rpx;
  padding: 25rpx;
  border-radius: 15rpx;
  -webkit-filter: drop-shadow(0 0 8rpx #44ADFB);
  filter: drop-shadow(0 0 8rpx #44ADFB);
}
/* 導航 */
.nav{
  display: flex;
  text-align: center;
  font-size: 32rpx;
  margin-bottom: 8%;
}
.left{
  flex: 1;
  font-weight: bold;
}
.right{
  flex: 1;
  font-weight: bold;
}
.select{
  font-weight: bold;
  color: #33ccff;
}
.select text{
  padding-bottom: 5rpx;
  border-bottom-left-radius: 10rpx;
  border-bottom-right-radius: 10rpx;
  border-bottom: 5rpx solid #33ccff;
}
.wei-input{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 40rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f1f1f1;
}
.input-box{
  margin: 20rpx;
}
.input{
  padding-left: 20rpx;
  font-size: 30rpx;
}
.input-code{
  position: absolute;
  right: 40rpx;
  font-size: 26rpx;
  padding: 10rpx 15rpx;
  color: white;
  background-color: #FF8C69;
  border-radius: 10rpx;
}
.forget{
  font-size: 26rpx;
  color: #33ccff;
  margin-top: 20rpx;
  text-align: right;
}
.sumbit-btn{
  margin: 6% 30rpx 30rpx 30rpx;
}
/* 重影 */
.shadow{
  box-shadow: 0rpx 0rpx 10rpx 0rpx #44ADFB;
  border-radius: 25rpx;
  background-color: white;
}
.shadow-1{
  height: 40rpx;
  margin: -20rpx 50rpx 0 50rpx;
}
.shadow-2{
  position: relative;
  z-index: -888;
  height: 50rpx;
  margin: -30rpx 80rpx 0 80rpx;
}
/* 最底部 */
.bottom-box{
  position:fixed; 
  bottom: 10rpx;
  width:100%;
  font-size: 24rpx;
  color: gray;
  display: flex;
  justify-content: center;
}