小程序简单的登录界面

造轮子系列复制粘贴，不多说

<view class="">
  <view class="logo h400 flex jc-ai-center">
    <image src="../../assets/images/yh.png"></image>
  </view>

  <view class="ipt-wrap">
    <view class="flex jc-center">
      <view class="p-lr20  _w100 {{ isIptactive == 1 ? 'iptactive' : ' ' }}" >
        <view class="ipt-item flex h70 _w100 jc-sb ai-center">
          <text class="iconfont font22 icon-geren"></text>
          <input type="text" data-ipt="1" placeholder="请输入手机号码" class="ipt flex1 {{isIptborder == 1 ? 'iptnoneborder' : 'iptborder'}}" maxlength="11" bindfocus="selectFoucs" bindinput="IptPhoneValue" bindblur="selectBlur"></input>
        </view>
      </view>
    </view>

    <view class="mt50 flex jc-center">
      <view class="p-lr20  _w100 {{ isIptactive == 3 ? 'iptactive' : ' ' }}" >
        <view class="ipt-item flex h70 _w100 jc-sb ai-center">
          <text class="iconfont font20 icon-mima"></text>
          <input type="password" data-ipt="3" placeholder="请输入密码" class="ipt flex1 {{isIptborder == 3 ? 'iptnoneborder' : 'iptborder'}}" bindfocus="selectFoucs" maxlength="16" bindinput="IptPassValue" bindblur="selectBlur"></input>
        </view>
      </view>
    </view>
  </view>

  <view class="r-wrap">
    <view class="loginbtn font16 _w100 mt20 color-fff" bindtap="loginGO">登录</view>
    <view class="mt10 flex jc-center">
      <text class="color-767676">没有账号？</text>
      <text class="color-279efd" data-url="../register/register" bindtap="goRedirect"> 快速注册 </text></view>
  </view>

  <view class="agreement flex ai-center f-column">
    <view class="mt50 color-767676">说明：注册、登录代表您阅读并已同意</view>
    <view class="mt10 color-279efd" data-url="../agreement/agreement" bindtap="goNavigate">天图极客网用户协议</view>          
  </view>
</view>

如果不知道icon.css的可以看我的“小程序造轮子”小图标篇 

@import "../../assets/iconfont/icon.wxss";

.logo>image{
  width: 250rpx;
  height: 208rpx;
}
.iptactive{
  box-shadow: 0 0rpx 10rpx #ccc;
  border-radius: 8rpx;
}
.iptnoneborder{
  border-bottom:1px solid transparent;
}
.iptborder{
  border-bottom:1px solid #e7f2ff;
}
.ipt-item{
  position: relative;
}
.ipt{
  margin-left: 20rpx;
  height: 60rpx;
  padding-top: 5rpx;
  padding-bottom: 5rpx;
  padding-left: 10rpx;
}
.loginbtn{
  text-align: center;
  height: 80rpx;
  line-height: 80rpx;
  margin: 80rpx auto 20rpx;
  border-radius: 10rpx;
  background: linear-gradient(to right, #66ded0, #229dfe);
}
.ipt-wrap, .r-wrap, .agreement{
  padding: 0 100rpx;
}

const common = require('../../utils/common');
const api = require('../../utils/api');
const app = getApp();

Page({
  data: {
    isIptactive: 0,
    isIptborder: 0,
    phoneNum:0,
    userPass:0,
    // code:''
  },
  selectFoucs: function (e) {
    let ipt = e.target.dataset.ipt;
    this.setData({ isIptactive: ipt, isIptborder: ipt });
  },
  selectBlur: function () {
    this.setData({ isIptactive: 0, isIptborder: 0 });
  },
  IptPhoneValue: function (e) {
    this.setData({ phoneNum: e.detail.value });
  },
  IptPassValue: function (e) {
    this.setData({ userPass: e.detail.value });
  },
  goNavigate: function (e) {
    common.NAVIGATE(e.target.dataset.url);
  },
  goRedirect: function (e){
    common.REDIRECT(e.target.dataset.url);
  },  
  onLoad(){
   
  },

  loginGO: function () {
  
    var that = this
    var phoneNum = that.data.phoneNum
    var userPass = that.data.userPass
    var url = api.SINGLOGIN.singLogin

    console.log("userLogin:" + url)

    if (!common.ISPHONE(phoneNum)) {
      common.SHOWTIPS('请输入11位有效手机号码', 'none'); return;
    } else if (!common.ISPASS(userPass)) {
      common.SHOWTIPS('密码必须大于6位且小于16位，由数字和字母组合构成', 'none');      
      return;
    } else {
      common.LOADTIPS('正在登录', function () {
        wx.login({
          success(res) {
            that.setData({
              code: res.code
            })
            wx.request({
              url: url,
              method: 'post',
              data: {
                code:that.data.code,
                loginName: that.data.phoneNum,
                password: that.data.userPass,
                deviceType: 0,
                userType: 0,
              },
              success(res) {
                console.log(res.data)
                wx.hideLoading();
                if (res.data.head.statusCode == "USR_003") {
                  common.MODALTIPS('该手机号码未注册', '是否前往注册', function (res) {
                    if (res.confirm) {
                      common.REDIRECT('../register/register');
                    } else if (res.cancel) {
                      return;
                    }
                  });
                } else if (res.data.head.status == 1) {
                  common.SHOWTIPS('登录成功', 'success');
                  app.globalData.loginName = res.data.data.loginName;
                  app.globalData.imageUrl = res.data.data.imageUrl;
                  app.globalData.token = res.data.data.token;
                  app.globalData.inviteCode = res.data.data.inviteCode;
                  app.globalData.phone = res.data.data.phone;
                  app.globalData.userType = res.data.data.userType;
                  app.globalData.isLogin = 1;
                  app.globalData.loginWay = 'app';
                  common.SETSTORAGE('userID', res.data.data.token);
                  setTimeout(function () {
                    common.SWITCHTAB('../personal/personal')
                  }, 1500);
                } else if (res.data.head.statusCode == "USR_005") {
                  common.SHOWTIPS(res.data.head.message, 'none');
                } else {
                  common.SHOWTIPS('未知错误，请重试', 'none');
                }
              },
            })
          }
        })
        
      })
    }
  },
  onShareAppMessage: function () {
    common.share()
  }
})