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

需求

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

实现效果

代码实现

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.msgif (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});},});