（十二）微信小程序實現登陸頁面+登陸邏輯

微信小程序實現登陸頁面

 

實現上面兩個頁面

第一個頁面

 

 

<view>
<!-- 上側部分 -->
  <view class="top-view">
  <!-- 用戶信息開始 -->
    <view class="user">
    <!-- 頭像開始 -->
      <view class="row">
        <image class="avatar" wx:if="{{userInfo}}" src="{{userInfo.avatarUrl}}"></image>
        <image class="avatar" wx:else="{{userInfo}}" src="/static/men.jpg"></image>
      </view>
    <!-- 頭像結束 -->

    <!-- 用戶名稱開始 -->
      <view class="name" wx:if="{{userInfo}}">
        <view bindtap="onClickLogout">{{userInfo.nickName}}</view>
      </view>
      <view class="name" wx:else="{{userInfo}}">
          <navigator url="/pages/auth/auth">登錄</navigator>
          |
          <navigator url="/pages/auth/auth">注冊</navigator>
      </view>
    <!-- 用戶名稱結束 -->
    <!-- 個人主頁開始 -->
     <view class="site">查看個人主頁</view>
     <!-- 個人主頁結束 -->
    </view>
     <!-- 關注 粉絲 贊與收藏開始 -->
    <view class="numbers">
      <view class="row">
        <text>0</text>
        <text>關注</text>
      </view>
      <view class="row">
        <text>0</text>
        <text>粉絲</text>
      </view>
      <view class="row">
        <text>0</text>
        <text>贊與收藏</text>
      </view>
      <view class="row">
        <text>0</text>
        <text>好友動態</text>
      </view>
    </view>

  <!-- 關注 粉絲 贊與收藏結束 -->
  <!-- 用戶信息結束 -->
  </view>
</view> 

<!-- 待支付開始 -->
<view class="middle-view">
  <view class="item">
    <image src="/static/images/icon/transaction_order1_icon_show.png"></image>
    <text>待支付</text>
  </view>
    <view class="item">
    <image src="/static/images/icon/transaction_order2_icon_show.png"></image>
    <text>待支付</text>
  </view>
    <view class="item">
    <image src="/static/images/icon/transaction_order3_icon_show.png"></image>
    <text>待支付</text>
  </view>
    <view class="item">
    <image src="/static/images/icon/transaction_order4_icon_show.png"></image>
    <text>待支付</text>
  </view>
</view>
<!-- 待支付結束 -->

<!-- 錢包 優惠券 開始 -->
<view class="function-view">
  <view class="item">
    <view class="left">我的錢包</view> 
      <view class="right">
        <text>¥20</text>
        <image class="go-icon" src='/static/images/icon/to_icon_show_small.png'></image>
      </view>
  </view>
  <view class="item">
      <view class="left">我的優惠券</view>
      <view class="right">
        <text>暫無課用</text>
        <image class="go-icon" src='/static/images/icon/to_icon_show_small.png'></image>
      </view>
    </view>
    <view class="item">
      <view class="left">領劵中心</view>
      <view class="right">
        <text>你的福利都在這里</text>
        <image class="go-icon" src='/static/images/icon/to_icon_show_small.png'></image>
      </view>
    </view>
</view>
<!-- 錢包 優惠券 結束 -->

<!-- 官方微信客服開始 -->
  <view class="contact-view">
    <button open-type="contact">
      <image src="/static/images/icon/wechat_contact_icon_show.png"></image>
    </button>
    <button bindtap="onClickCall">
      <image src="/static/images/icon/phone_contact_icon_show.png"></image>
    </button>
  </view>
  <!-- 官方微信客服結束 -->

/* 頂部樣式 開始 */
.top-view{
  background-color: #01ccb6;
  color: white;
  padding: 40rpx;
}
.top-view .user{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.top-view .user .row{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.top-view .user .avatar{
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
}
.top-view .user .name{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 200rpx;
}
.top-view .site{
  background-color: rgba(0, 0, 0, 0.16);
  padding: 20rpx;
  border-top-left-radius: 32rpx;
  border-bottom-left-radius: 32rpx;
}
.top-view .numbers{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 28rpx;
  padding: 40rpx;
  padding-bottom: 0rpx;
}
.top-view .numbers .row{
   display: flex;
  flex-direction: column;
  align-items: center;
}
.middle-view{
  padding: 40rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 25rpx;
  border-bottom: 18rpx solid #f5f5f5;
}
/* 頂部樣式 結束 */
/* 待支付 樣式 開始*/
.middle-view{
  padding: 40rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 25rpx;
  border-bottom: 18rpx solid #f5f5f5;
}

.middle-view .item{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.middle-view .item image{
  width: 50rpx;
  height: 50rpx;
  margin-bottom: 20rpx;
}
/* 待支付 樣式 結束*/
/*  錢包 優惠券 開始  */
.function-view{
  padding: 40rpx;
  font-size: 28rpx;
}

.function-view .item{
  padding: 30rpx 0;
  border-bottom: 1px solid #efefef;
  
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.function-view .item .right{
  color: #8c8c8c;
}
.function-view .item .go-icon{
  margin: 0 20rpx;
  width: 16rpx;
  height: 16rpx;
}
/*  錢包 優惠券 結束  */
/*  官方微信客服開始  */
.contact-view{
  padding: 40rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.contact-view button {
  background-color: transparent;
  border: 0;
  padding: 0;
}
.contact-view button::after{
  border: 0;
}
.contact-view  image{
  width: 204rpx;
  height: 66rpx;
}
  /*  官方微信客服結束  */

第二個頁面

 

 

<!--pages/auth/auth.wxml-->
<view class="logo">
  <image src='/static/girl.jpg'></image>
  <text>交流交易社區</text>
</view>

<view class="form">
  <view class="row-group">
    <text>手機</text>
    <input placeholder="請填寫手機號碼" placeholder-class='txt' maxlength='11' value="{{phone}}" bindinput="bindPhoneInput" />
  </view>

   <view class="row-group">
    <text>驗證碼</text>
    <input placeholder="請填寫驗證碼" placeholder-class='txt' maxlength='4' value="{{code}}" bindinput="bindCodeInput" />
    <view class="code" bindtap="onClickCheckCode">獲取驗證碼</view>
  </view>

  <view>
    <button class="submit"  open-type="getUserInfo" bindgetuserinfo="onClickSubmit">登錄 | 注冊</button>
  </view>
</view>

/* pages/auth/auth.wxss */
.logo{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.logo image{
  margin-top: 140rpx;
  width: 216rpx;
  height: 200rpx;
}
.form{
  padding: 40rpx;
}
.form .row-group{
  padding: 20rpx 0;
  position: relative;
  border-bottom: 1rpx solid #ddd;
}

.form .row-group text{
  font-size: 28rpx;
  padding:10rpx 0;
}

.form .row-group input{
  padding: 10rpx 0;
}

.form .row-group .txt{
  color: #ccc;
}

.form .row-group .code{
  position: absolute;
  right: 0;
  bottom: 26rpx;
  z-index: 2;

  width: 206rpx;
  height: 60rpx;
  border: 2rpx solid #00c8b6;
  border-radius: 12rpx;
  font-size: 26rpx;
  font-weight: 400;
  color: #00c8b6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form .submit{
  margin-top: 80rpx;
  color: #fff;
  border: 2rpx solid #00c8b6;
  background-color: #00c8b6;
  font-size: 32rpx;
  font-weight: bold;
}

 js代碼

登陸邏輯