微信小程序开发仿律师帮帮会员登录页面设计与制作教程

今天给大家带来仿律师帮帮会员登录页面设计与制作教程，制作好以后效果如下：

一、wxml页面代码如下：

<!--头部 logo部分  -->
<view class="login-center">
   <view class="login-logo">
      <view class="login-box">
        <image src="/images/logo-login.png"></image>
        <view class="login-text">现有<text>1233</text>个问题被专业律师解答</view>
      </view>
   </view>
   <!--表单验证部分  -->
<form bindsubmit="formSubmit"  class="form-cen">
    <view class="from-list">
      <view class="section">
        <input type="number"  name='tel'  placeholder="请输入您的手机号码"  disabled = "{{btndisabled}}" placeholder-class='placeholders' 
         value="{{phone}}"   />
      </view>
      <view class="section">
        <input password type="text" name='pasd'   placeholder="请输入您的密码"  disabled = "{{btndisabled}}" value = "{{pasd}}" placeholder-class='placeholders' />
      </view>
      <view class="section section-flex">
            <view class="checkbox  text ">
              <checkbox-group   bindchange="checkboxChange"  name ='checkboxval'    >
                        <label class="checkbox" >
                            <checkbox color='red'  value="{{checkboxVal}}"  checked="{{bool}}"/>记住密码
                        </label>
            </checkbox-group>
          </view>
          <view class="forgot-pasd text">
                <navigator url="/pages/forgot_password/forgot_password" >忘记密码</navigator >
          </view>
      </view>
      <view class="section">
        <button size ="default"   class="submit-btn"  formType = 'submit' style="background-color:{{loginBtnBgBgColor}}"  loading ="{{btnLoading}}" disabled =  "{{ btndisabled}}">
          {{loginBtnTxt}}
        </button>
      </view>
    </view>
  </form>
<!-- 点击微信手机号码授权 -->
<view class="authorization">
    <button disabled="{{ztBool}}" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
        一键微信登陆
     </button>
</view>
<!--底部的跳转  -->
<view class="footer-nav">
    <view class="footer-btn">
        <navigator url="/pages/forgot_password/forgot_password">用户注册</navigator>
    </view>
</view>
</view>

二、wxss样式文件代码如下：

/*
  登陆页面的样式文件
    --217-8-3
*/
.login-center {
  padding: 40rpx;

}
.login-logo {
  display: flex;
  justify-content:center;
  align-items:center;
  height:150px;
}
.login-logo image {
  height:140rpx;
  width:426rpx;
  display: block;
  margin: 0 auto;
}
.login-logo .login-text {
  font-size: 32rpx;
  color: #6d6d6d;
  padding-top: 20rpx;
  
}
.login-logo .login-text text {
  color: #d92a2a;
}
.form-cen {
    height: 100%;
    width: 100%;
    display: block;
}
.from-list {
  display: flex;
  flex-direction: column;
}
.from-list .section {
  flex: 1;
  margin-bottom: 35rpx;
}
.from-list .section  input{
  border:1px solid #afafaf;
  border-radius:15rpx;
  height:80rpx;
  line-height:80rpx;
  font-size: 32rpx;
  padding-left: 15rpx;
}
.from-list .section.section-flex {
  display: flex;
  justify-content:space-between;
}
.from-list .section.section-flex  .text {
  font-size: 30rpx;
  color: #6d6d6d ;
}
.from-list .section .submit-btn {
  background-color: rgba(217, 42, 42, 1);
  color: #fff;
}
.footer-nav {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 100rpx;
    background: #f7f7f8;
    border-top: 1px solid #b2b2b2;
}
.footer-btn {
    display: flex;
}
.footer-btn  navigator {
    height: 100rpx;
    flex:1;
    display: flex;
    justify-content:center;
     align-items:center ;
     color: #d92a2a ;
     font-size: 32rpx;
}
.footer-btn  navigator:first-child {
    border-right: 1px solid #b2b2b2;
}
.authorization button{
    background: #1AAD16;
    color: #fff;
}

三、js代码文件如下：

// 走起 我的函数库~
var Utils = require("../../utils/util.js");
var loginArr = {        // 本地存储的手机号、密码
    phone:"18164081140",
    pasd:"12345678"
};
var loginJson = {       // 存储登陆返回的信息
    image: "",
    nickname: "",
    sdk: "",
    status: "",
    telphone: "",
    types: "",
    uid:"",
}
// 默认数据
var defaultData = {
    loginBtnTxt:"登陆",           
    btndisabled:false,
    btnLoading: false,
    loginBtnBgBgColor:"#e64444",
    checkboxVal:"0" ,
    pasd:"123456",    // 密码
    phone:"18164081140", // 手机号码
    bool:true,
    ztBool:false,   // 点击一键微信登陆按钮的点击状态
    code:""     // 获取login的code 
    // userphone:""    // 获取到微信权限的手机号                   
}
Page({                                                  // page项
data: defaultData,
formSubmit:function(e){
var formVal = e.detail.value;
this.mysubmit(formVal);
},
onLoad: function (options) {
    //   页面加载的时候判断 记住手机号密码是否勾选
    var doBool = this.data.bool;
    var loginValue = wx.getStorageSync("success");
    
    this.loginFn(); // 加载登陆信息的接口
    if (doBool){
            this.setData({
                    phone: loginValue.phone,
                    pasd: loginValue.pasd
            })
    }else{
            Utils.removeStorage('success');
    }

},
loginFn:function(){     // 判断是否是登陆的状态
    var _this = this;
    wx.login({
        success: function (res) {
            if (res.code) {
                _this.setData({
                    code: res.code
                })
            }else{
                Utils.showModal("获取用户登录态失败！");
            }
        }
    });
},
hrefFn:function(){  // 点击页面记录跳转
    var Reset = wx.getStorageSync("Reset");
    if (Reset) {
        wx.redirectTo({               // 跳转别的页面，关闭当前页面
            url: Reset
        })
    } else {
        wx.redirectTo({               // 跳转别的页面，关闭当前页面
            url: "/pages/Consultation/Consultation"
        })
    }
},
mysubmit:function(param){                   // 提交
    var _this = this;
    var flag = this.checkPhone(param) && this.checkPassword(param);
    loginArr = {        // 本地存储的手机号、密码
        phone: param.tel,
        pasd: param.pasd
    }
    if ( !!flag ) {
    var checkVal = param.checkboxval.join("");
    if (!checkVal.length) {
         Utils.removeStorage('success');
    }
    Utils.requestFn({
        url: '/index.php/Login/index?server=1',
        method:"POST",
        data: {         // 传递的参数
            userphone: param.tel,           
            passwd: param.pasd
        },
        success: function (res) {           // 成功、返回的数据
            if (res.data.status){             // 登陆成功
                Utils.setStorage('success', loginArr);
                _this.hrefFn();
                loginJson = {                // 存储登陆状态      
                        image: res.data.data.image,
                        nickname: res.data.data.nickname,
                        sdk: res.data.data.sdk,
                        status: res.data.data.status,
                        telphone: res.data.data.telphone,
                        types: res.data.data.type,
                        uid: res.data.data.uid
                }
                Utils.setStorage("login", loginJson);     // 存储到本地缓存
            }else{
                Utils.showModal(res.data.message);
                return false;
            }
        },
        fail:function(){                      // 失败、调取状态 
            console.log("请求失败")
            _this.failFn();
        }
    })
    }
},
SuccessFn:function(){                 // 验证成功的状态
    this.setData({
        loginBtnTxt:"登陆中",
        btndisabled: true,
        btnLoading: true,
        loginBtnBgBgColor: "#666"
    })
},
failFn:function(){                        // 验证失败的状态、回复到默认状态
    this.setData({
        loginBtnTxt: "登陆",
        btndisabled: false,
        btnLoading: false,
        loginBtnBgBgColor: "#e64444",
        checkboxVal: 0   
    })
    Utils.showModal("账号密码错误");
    return false;
},
checkPhone: function (val) {            // 验证手机号
    var checkVal = Utils.Verification.phone;
    var thisVal = val.tel;
    if (!checkVal.test(thisVal ) ){
        Utils.showModal("请输入正确的手机号码");
        return false;
    }
    return true;
},
checkPassword:function(val){          // 验证密码
    var thisVal = val.pasd.trim();
    if ( thisVal.length < 6 ) {
        Utils.showModal("请输入至少6位的密码");
        return false;
    }
        return true;
},
checkboxChange: function (e){            // 记住密码
    var val = e.detail.value;
    Utils.removeStorage('success');
},
getPhoneNumber:function(e){     // 取得授权的手机号码
    this.loginFn();     // 每次点击的获取最新的code
    
    this.setData({      // 点击的时候过程中不让点击
        ztBool:true
    })
    var iv = e.detail.iv;       // 获取权限的加密iv信息
    var encryptedData = e.detail.encryptedData;  // 获取权限的加密用户信息
    var code = this.data.code;  // 获取login的登陆返回的code
    console.log(encryptedData)
    console.log()
    if (typeof encryptedData == "undefined" && typeof iv == "undefined"){
        Utils.showModal("授权失败");
        this.setData({      // 点击的时候过程中不让点击
            ztBool: false
        })
    }else{
        this.getPhoneRequest(iv, encryptedData, code);  // 执行
    }
   
},
getPhoneRequest: function (iv, encryptedData, code){    // 请求接口解密用户信息
    var _this = this;
    Utils.requestFn({
        url: '/index.php/wxencrypt?server=1', 
        data: {
            content: encryptedData,
            iv: iv,
            code:code
        },
        success: function (res) {
            console.log(res)
            if (res.data.status){
                var userphone = res.data.data.phoneNumber;
                _this.getPhoneLoginFn(userphone);   // 穿参请求登录接口
            }else{
                Utils.showModal(res.data.message);
            }
            _this.setData({      // 点击的时候过程中不让点击
                ztBool: false
            })
        }
    })
   
},
getPhoneLoginFn:function(mun){     // 获取登陆手机完成登陆
    var _this = this;
    Utils.requestFn({
        url: '/index.php/phonelogin?server=1',
        method:"POST",
        data: {
            userphone: mun
        },
        success: function (res) {
          
           if (res.data.status){
               _this.hrefFn();
               loginJson = {                // 存储登陆状态      
                   image: res.data.data.image,
                   nickname: res.data.data.nickname,
                   sdk: res.data.data.sdk,
                   status: res.data.data.status,
                   telphone: res.data.data.telphone,
                   types: res.data.data.type,
                   uid: res.data.data.uid
               }
               Utils.setStorage("login", loginJson);     // 存储到本地缓存
           }else{
               Utils.showModal(res.data.message);
           }
        }
    })
}
})

以上就是微信小程序开发仿律师帮帮会员登录页面设计与制作教程的文章教程，希望对大家有帮助！

模板简介：该模板名称为【微信小程序开发仿律师帮帮会员登录页面设计与制作教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。