微信小程序登录注册页面设计（小程序项目）

🕗 发布于 2024-11-22 08:50 小程序 微信小程序

需求

在微信小程序设计并实现登录页面，并填写相关登录注册函数

实现效果

代码实现

html代码

<view class="top" style="border-bottom-style: none;background-color:#FF8C69;">
  <!-- <view class="back" bind:tap="back">
    <van-icon name="arrow-left" size="50rpx" />
  </view> -->
  <view class="pagetitle-container">
    <view class="pagetitle">登录.注册</view>
  </view>
</view>
<view class="top-box">
  <view>Hi</view>
  <view class="next-text">欢迎使用XXXX！</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">
      <text slot="icon" class="iconfontgh icon-shoujihao" mode="aspectFit"></text>
      <input class="input" name="phone" placeholder="请输入手机号" value="{{ phone }}" bindinput="bindPhone" />
    </view>
    <view type="text" style="width: 1rpx;height: 1rpx;overflow: hidden;">
      <input></input>
    </view>
    <view class="wei-input">
      <text slot="icon" class="iconfontgh icon-mima" mode="aspectFit"></text>
      <!--index.wxml-->
      <view>
        <input class="input" style="width: 100%;" id="pwdInput" placeholder="请输入密码" password="{{pwdType=='password'}}" name="password" value="{{ password }}" bindinput="bindPwd" />
      </view>
      <view class="eye-btn">
        <block wx:if="{{!pwdView}}">
          <van-icon bindtap="togglePwdView" name="eye-o" />
        </block>
        <block wx:elif="{{pwdView}}">
          <van-icon bindtap="togglePwdView" name="closed-eye" />
        </block>
      </view>
    </view>
    <view class="checkbox-container">
      <checkbox-group bindchange="onChange">
        <checkbox value="1" checked="{{checked}}"></checkbox>
        <label class="checkbox-label" for="check">记住密码</label>
      </checkbox-group>
    </view>
  </view>
  <!-- 注册 -->
  <view class="input-box" hidden="{{current==1}}">
    <view class="wei-input">
      <text slot="icon" class="iconfontgh icon-shoujihao" mode="aspectFit"></text>
      <input class="input" name="registerPhone" placeholder="请输入您的手机号" value="{{registerPhone}}" bindinput="bindRegisterPhone" />
    </view>
    <view class="wei-input">
      <text slot="icon" class="iconfontgh icon-touxiang" mode="aspectFit"></text>
      <input class="input" name="name" placeholder="请输入您的姓名" value="{{name}}" bindinput="bindName" />
    </view>
    <view class="wei-input">
      <text slot="icon" class="iconfontgh icon-gonghao" mode="aspectFit"></text>
      <input class="input" name="oa_num" placeholder="请输入您的工号" value="{{oa_num}}" bindinput="bindOaNum" />
    </view>
    <view class="wei-input">
      <text slot="icon" class="iconfontgh icon-bumenguanli" mode="aspectFit"></text>
      <input class="input" name="department" placeholder="请输入您的部门" value="{{section}}" bindinput="bindDepartment" />
    </view>
    <view class="bottom-box">
      注册
    </view>
  </view>
  <view class="sumbit-btn">
    <button bindtap="handleButtonClick" class="button" style="background-color: #F9BB8E;font-size: 30rpx;" type="primary">立即{{current==1?'登录':'注册'}}</button>
  </view>
</view>
<!-- 重影 -->
<view class="shadow shadow-1"></view>
<view class="shadow shadow-2"></view>
<!-- 说明 -->

css代码

/*  */
page {
  height: 100%;
  background-color: white;
  margin: 0px;
  padding: 0px;
}
.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff; /* 可以根据需要设置背景色 */
  z-index: 1000; /* 确保它覆盖在其他元素之上 */
  padding: 0 20rpx; /* 添加左右内边距以便于阅读 */
  height: 180rpx; /* 设置固定高度 */
  border-bottom-width: 1rpx;
  border-bottom-style: solid;
}
.pagetitle-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  background-color: #FF8C69;
}
.pagetitle {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: -80rpx;
  
}
/* 顶部背景 */
.top-box {
  margin-top: 180rpx;
  height: 30%;
  background-image: linear-gradient(#FF8C69,#F9BB8E);
  padding: 30rpx;
  color: white;
  font-weight: bold;
}

/* index.wxss */
.eye-btn {
  right: 20rpx;
  margin-top: 10rpx;
  position: absolute;
}

.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 #F9BB8E);
  filter: drop-shadow(0 0 8rpx #FF8C69);
}

/* 导航 */
.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: #F9BB8E;
}

.select text {
  padding-bottom: 5rpx;
  border-bottom-left-radius: 10rpx;
  border-bottom-right-radius: 10rpx;
  border-bottom: 5rpx solid #F9BB8E;
}

.wei-input {
  position: relative;
  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;
}


.checkbox-container {
  font-size: 26rpx;
  color: #FF8C69;
  margin-top: 20rpx;
  text-align: right;
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}
.wx-checkbox-input {
  width: 33rpx !important;
  height: 33rpx !important;
  border: 2rpx solid #FF8C69 !important;
}
.wx-checkbox-input-checked{
  width: 33rpx !important;
  height: 33rpx !important;
  border: 2rpx solid #FF8C69 !important;
  color: #FF8C69 !important;
}

.sumbit-btn {
  margin: 6% 30rpx 30rpx 30rpx;
}

/* 重影 */
.shadow {
  box-shadow: 0rpx 0rpx 10rpx 0rpx #FF8C69;
  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 {
  bottom: 5rpx;
  width: 100%;
  font-size: 24rpx;
  color: gray;
  display: flex;
  justify-content: center;
}

/* 弹窗背景蒙层 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 弹窗内容 */
.modal {
  background-color: #FFFFFF;
  width: 80%; /* 弹窗宽度，根据实际需要调整 */
  max-width: 600px; /* 最大宽度限制 */
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
}

js代码

const util = require('../../utils/util.js'),
app = getApp();
Page({

  /**
   * 页面的初始数据
   */


  data: {
    "pwdType": 'password', // 默认为密码类型
    "pwdView": true, // 控制是否显示密码
    "current": 1,
    "codeText": '获取验证码',
    "counting": false,
    "phone": "",
    "password": "",
    checked: false,
    modalVisible: false,
    is_login: false

  },
  //注册功能
  bindName: function (e) {
    this.setData({
      name: e.detail.value
    });
  },
  bindRegisterPhone: function (e) {
    this.setData({
      registerPhone: e.detail.value
    });
  },
  bindOaNum: function (e) {
    this.setData({
      oa_num: e.detail.value
    });
  },

  bindDepartment: function (e) {
    this.setData({
      department: e.detail.value
    });
  },
  // 登陆功能
  bindPhone: function (e) {
    this.setData({
      phone: e.detail.value
    });
  },

  bindPwd: function (e) {
    this.setData({
      password: e.detail.value
    });
  },
  register: function () {
    if (!this.data.registerPhone) {
      wx.showToast({
        icon: 'none',
        title: '请填写手机',
      })
    } else if (!this.data.name) {
      wx.showToast({
        icon: 'none',
        title: '请填写名称',
      })
    } else if (!this.data.oa_num) {
      wx.showToast({
        icon: 'none',
        title: '请填写工号',
      })
    } else if (!this.data.department) {
      wx.showToast({
        icon: 'none',
        title: '请填写部门',
      })
    } else {
      wx.cloud.init()
      wx.cloud.callContainer({XXXXXXXX}).then(res => {
        console.log(res)
        if (res.data.data == 1) {
          wx.showToast({
            title: '账号申请成功！',
            icon: 'success',
            duration: 2500
          })
        } else {
          wx.showToast({
            title: res.data.msg,
            icon: 'error',
            duration: 2500
          })
        }


      })
    }

  },

  create_login(e) {
    let user = e
    // console.log(user)
    if (!user.phone) {
      wx.showToast({
        icon: 'none',
        title: '请填写手机',
      })
    } else if (!user.password) {
      wx.showToast({
        icon: 'none',
        title: '请填写密码',
      })
    } else {
      wx.cloud.init()
      wx.cloud.callContainer({XXXXX})
        .then(res => {
          console.log('获取登录结果', res.data)
          let msg = res.data.msg
          if (msg == "登录成功") {

            console.log(user.phone)
            wx.setStorage({ key: 'currentUser', data: user.phone, encrypt: true })
            var app = getApp();
            app.globalData.userforPerson = user.phone;
            

            var logs = (wx.getStorageSync('logs') || []).map(log => {
              return {
                date: util.formatTime(new Date(log)),
                timeStamp: log
              }
            })
            // console.log(logs[0])
            wx.setStorage({
              key: 'LastLoginTime',
              data: logs[0],
            });
            wx.setStorage({
              key: 'passwordIsEdit',
              data: res.data.password_is_edit,
            });
            wx.setStorage({
              key: 'currentUser',
              data: user.phone,
              encrypt: true
            });
            wx.setStorage({
              key: 'currentUserPassword',
              data: user.password,
              encrypt: true
            });
            wx.switchTab({
              url: "/pages/home/home",
              success: function (res) {
                var page = getCurrentPages().pop();
                if (page == undefined || page == null) return;
                page.onShow();
                console.log('跳转成功')// success
              },
              fail: function (res) {
                console.log('跳转失败')  // fail
              },
              complete: function (res) {
                console.log('跳转页面完成') // complete
              }
            })
          } else {
            wx.showToast({
              title: res.data.msg,
              icon: "error"
            })
          }
        })
        .catch(res => {
          console.log('获取登录结果失败', res)
        })
    }
  },
  handleButtonClick() {
    //current==1登录
    if (this.data.current == 1) {
      wx.setStorage({
        key: 'RememberPassword',
        encrypt: true,
        data: this.data.checked,
      })
      this.create_login({
        "phone": this.data.phone,
        "password": this.data.password
      })
    }
    //current==1注册
    if (this.data.current == 0) {
      this.register()
    }


  },

  ToRegister() {
    wx.navigateTo({
      url: '/pages/register/register',
    })
  },
  // 登陆注册监听
  click(e) {
    let index = e.currentTarget.dataset.code;
    this.setData({
      current: index
    })
  },
  
  togglePwdView: function () {
    this.setData({
      pwdType: this.data.pwdType === 'password' ? 'text' : 'password',
      pwdView: !this.data.pwdView,
    });
  },
  onChange(e) {
    this.setData({
      checked: e.detail.value.includes('1')
    })
  },

  CloseActivity(){
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  },

  showModal: function() {
    this.setData({
      modalVisible: true
    });
  },
  hideModal: function() {
    this.setData({
      modalVisible: false
    });
  },
    
    });

原文地址：https://blog.csdn.net/licy__/article/details/143931740

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：Mybatis入门
下一篇：《操作系统》实验内容实验二编程实现进程（线程）同步和互斥（Python 与 PyQt5 实现）

mysql中between and怎么用
mysql中between and怎么用
阅读更多2024-11-22
Javascript高级—JS Generator执行细节分析（co库底层实现原理）
Generator函数是一种特殊的函数，它允许在函数执行过程中暂停和恢复。与普通函数不同，Generator函数不会立即执行完毕，而是返回一个迭代器对象。这个迭代器对象具有一个next方法，用于恢复函
阅读更多2024-11-22
【Ubuntu】安装rpm文件
在 Ubuntu 系统上，可以通过安装 alien工具来转换并安装.rpm文件，因为 Ubuntu 默认不支持直接安装.rpm包。alien工具可以将.rpm文件转换为.deb文件，从而可以使用 Ub
阅读更多2024-11-22
Ubuntu从入门到精通（二）远程和镜像源配置齐全
文章首先概述了Ubuntu系统的常见操作，为读者打下坚实基础。随后，详细介绍了如何使用rustdesk实现远程登录，以及mobaxterm的操作方法，帮助用户轻松实现远程访问和管理。此外，文章还指导读
阅读更多2024-11-22
ubuntu+windows双系统切换后蓝牙设备无法连接
最近在安装ubuntu+Windows双系统后，电脑连接蓝牙出现了问题，每次切换系统之后都要把原来储存的蓝牙信息删除才能再次连接。这是因为蓝牙设备的配对信息存储在操作系统中。当从一个系统（如 Wind
阅读更多2024-11-22
ubuntu20.04中编译安装gcc 9.2.0
ubuntu20.04中编译安装gcc 9.2.0
阅读更多2024-11-22
机器学习之量子机器学习（Quantum Machine Learning, QML）
量子机器学习（Quantum Machine Learning, 简称 QML）是一门结合了量子计算和机器学习的前沿学科，它利用量子计算的特性（如量子叠加、量子纠缠和量子并行性）来解决机器学习中的复杂
阅读更多2024-11-22
OceanBase 中常用的查询语句
本文汇总整理了一些 OceanBase 中的常用查询语句，包括租户创建、转储与合并、表相关等场景，希望帮大家解决日常运维操作中的常见的问题。
阅读更多2024-11-22
php如何定位问题
在同个文件夹下创建login_html.php、login.php、user_html.php和user.php。我现在遇到的问题是，在login_html.php点击登录跳转不过去，会报错。为了快速
阅读更多2024-11-22
NVR管理平台EasyNVR多个NVR同时管理：全方位安防监控视频融合云平台方案
NVR管理平台EasyNVR采用先进的流媒体技术和分布式架构，支持广泛兼容、安全可靠的视频综合服务。EasyNVR是基于端-边-云一体化架构的安防监控视频融合云平台，具有简单轻量的部署方式与多样的功能
阅读更多2024-11-22

微信小程序登录注册页面设计（小程序项目）

需求

实现效果

代码实现

html代码

css代码

js代码

相关文章