微信小程序橙色简洁会员绑定页面制作设计模板下载

今天给大家带来橙色简洁会员绑定页面制作设计模板下载，制作好以后效果图如下：

一、wxml页面代码如下：

<view class="logs_wrap">
    <form bindsubmit="log">
        <view class="logs_user_name">
            <input name="username" placeholder-class="placeholder" placeholder="手机号/邮箱/用户名" />
        </view>
        <view class="logs_user_password">
            <input name="password" placeholder-class="placeholder" type="{{ hidden_password === true ? 'password':'text'}}" placeholder="密码:"/>
            <image bindtap="change_password" class="logs_img1" src="{{close_img === false ? 'image/yingchang.png' : 'image/xiansi_01.png'}}">
            </image>
        </view>
        <!--忘记密码-->
        <view class="logs_gorget_password">
            <!--<navigator url="../forgetPass/forgetPass">
                忘记密码?
            </navigator>-->
        </view>
        <!--登录-->
        <button formType="submit" class="logs" loading="{{loding}}" >绑定</button>
        
    </form>
</view>

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

.logs_img1{
    width: 60rpx;
    height: 40rpx;
    padding-right: 10rpx;
}
.placeholder{
    color: #b2b2b2;
}
.logs_img2{
    width: 90rpx;
    height: 90rpx;
}
.logs_user_name{
    border: 1px solid #e5e5e5;
    border-radius: 6rpx;
    width: 94%;
    margin: 0 auto;
    margin-top: 60rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
}
 input{
    padding-left: 10rpx;
    width: 80%;
}
.logs_user_password{
    margin: 0 auto;
    margin-top: 30rpx;
    border: 1px solid #e5e5e5;
    border-radius: 6rpx;
    width: 94%;
    height: 80rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logs_gorget_password{
    width: 94%;
    margin: 0 auto;
    padding-top: 30rpx;
    font-size: 13pt;
    color: #e58026;
    text-align: right;
}
.logs{
    color: #fff;
    width: 94%;
    margin-top: 30rpx;
    background-color: #e58026;
    height: 90rpx;
    line-height: 90rpx;
}
.logs_register{
    width: 94%;
    margin: 0 auto;
    padding-top: 60rpx;
    font-size: 13pt;
    color: #e58026;
    text-align: center;
}
.logs_bottom_box{
    position: absolute;
    bottom: 0;
    width: 100%;
}
.logs_bottom_box .title{
    margin: 0 auto;
    width: 94%;
    font-size: 11pt;
    color: #cccccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logs_bottom_box .title view{
    width: 25%;
    border-bottom: 1px solid #dddddd;
}
.logs_box{
    margin-top: 60rpx;
    margin-bottom: 30rpx;
    display: flex;
    justify-content: space-around;
}

三、js页面代码如下：

var app = getApp();
const url = require('../../utils/requireurl.js').url;
Page({
  data:{
    hidden_password:true,
    close_img:false,
    loding:false
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    
  },
  onReady:function(){
    // 页面渲染完成
    
  },
  onShow:function(){
    // 页面显示
    
  },
  onHide:function(){
    // 页面隐藏
    
  },
  onUnload:function(){
    // 页面关闭
    
  },
  change_password:function(){
      this.setData({
          hidden_password : !this.data.hidden_password,
          close_img : !this.data.close_img
      })
  },
  log:function(e){
      wx.showNavigationBarLoading() //顶部显示加载动画
      let username = e.detail.value.username;
      let password = e.detail.value.password;
      let user_id = wx.getStorageSync('user_id');
      // console.log( username,password )
      wx.request({
        url: url+'/weChat/wechat-applet/binding',
        header: {
           'content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          'username':username,
          'password':password,
          'user_id':user_id
        },
        method: 'POST',
        success: function(res){
          console.log( res )
          let status = res.data.status;
          let data = res.data.data;
          if( status == 1 ){  //存储登录状态
              wx.setStorage({ key:"user_id", data: data.user_id });
              wx.setStorage({ key:"user_ticket", data: data.user_ticket });
              wx.setStorage({ key:"user_name", data: data.user_name });
              wx.setStorage({ key:"is_binding", data: data.is_binding });
              wx.navigateBack({
                delta: 1
              })
              wx.hideNavigationBarLoading()
          }else{
              wx.hideNavigationBarLoading()
              let err = res.data.errMsg;
              wx.showModal({
              title: '失败',
              showCancel:false,
              content: err,
              success: function(res) {
                  }
              })
          }
        },
        fail: function() {
          console.log( "调用登录接口失败" )
        }
      })
    }
})

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