admin/qingcheng-xiaochengxu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成了登录模块

Browse Source
This commit is contained in:
chen-xin-zhi
2025-05-17 23:17:14 +08:00
parent c10a348001
commit e5e3f5b38d
33 changed files with 2860 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
pages/loginModule/register/register.js Normal file
View File

@ -0,0 +1,194 @@
import { url } from "../../../request";
import { requestAsync } from "../../../utils/request";
import { validate } from "../../../utils/validate";
// pages/loginModule/register/register.js
Page({
/**
* 页面的初始数据
*/
data: {
nickname: 'cxz',
phone: '13888610253',
captcha: '111111',
inviteCode: '123456',
password: '123456',
agree: false,
sending: false,
count: 60,
},
sendSmsCode() {
const { phone } = this.data;
if (!/^1\d{10}$/.test(phone)) {
wx.showToast({ title: '请输入有效的手机号', icon: 'none' });
return;
}
wx.request({
url: url + '/userInfo/code',
method: 'POST',
header: { 'content-type': 'application/json' },
data: {
templateString: phone
},
success: res => {
// 假设后端返回 { success: true, ... }
if (res.data.code === 1) {
wx.showToast({ title: '验证码已发送' });
this.startCountdown();
} else {
wx.showToast({
title: res.data.message || '发送失败',
icon: 'none'
});
}
}
});
},
startCountdown() {
this.setData({ sending: true, count: 60 });
const timer = setInterval(() => {
let { count } = this.data;
if (count <= 1) {
clearInterval(timer);
this.setData({ sending: false });
} else {
this.setData({ count: count - 1 });
}
}, 1000);
},
// 通用输入事件处理函数
onInput(e) {
const field = e.currentTarget.dataset.field; // 获取字段名
const value = e.detail.value; // 获取输入内容
this.setData({
[field]: value // 动态更新对应字段
});
},
// 复选框事件处理（如果使用 checkbox-group 推荐用 change）
onCheckboxChange(e) {
this.setData({
agree: e.detail.value.length > 0
});
},
// 注册按钮点击
async onRegister() {
if (!this.data.agree) {
wx.showToast({
title: '请先勾选同意协议',
icon: 'none'
});
return;
}
// 调用通用校验，失败时已提示并 return
if (!validate(this.data, {
agree: '请先勾选同意协议',
nickname: '请输入昵称',
phone: '请输入手机号',
captcha: '请输入验证码',
inviteCode: '请输入邀请码',
password: '请输入密码'
})) {
return;
}
const { nickname, phone, captcha, inviteCode, password } = this.data;
const res = await requestAsync({
url: url + '/userInfo/register',
method: 'POST',
header: { 'content-type': 'application/json' },
data: {
nickName: nickname,
phoneNumber: phone,
verificationCode: captcha,
invitationCode: inviteCode,
userPassword: password
}
});
if (res.data.code === 1) {
wx.showToast({
title: '注册成功',
icon: 'success',
duration: 1000
});
setTimeout(() => {
wx.navigateTo({
url: '/pages/loginModule/pwdLogin/pwdLogin',
success: () => {
this.setData({ nickname:'', phone:'', captcha:'', inviteCode:'', password:'', agree:false });
}
});
}, 1000);
} else {
wx.showToast({
title: res.data.message || '注册失败',
icon: 'none'
});
}
},
gotoLogin() {
wx.navigateTo({
url: '/pages/loginModule/pwdLogin/pwdLogin',
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})

3
pages/loginModule/register/register.json Normal file
View File

@ -0,0 +1,3 @@
{
"usingComponents": {}
}

74
pages/loginModule/register/register.wxml Normal file
View File

@ -0,0 +1,74 @@
<view class="flex-col page">
<image
class="self-center image"
src="https://ide.code.fun/api/image?token=68274ca04ae84d00122fcf90&name=f8bf0cb3ec8201f89a31727a655c0709.png"
/>
<text class="self-center text">欢迎登陆—青橙校园</text>
<view class="flex-col self-stretch group">
<view class="flex-col register">
<text class="self-start font text_2">账号注册</text>
<view class="flex-col self-stretch group_6 mt-20">
<view class="flex-col">
<view class="flex-col justify-start relative section">
<input class="flex-col justify-start items-start text-wrapper_5 view input"
placeholder="请输入昵称"
bindinput="onInput" data-field="nickname" value="{{nickname}}"
/>
</view>
<view class="flex-col justify-start section_1 mt-22">
<input
class="flex-col justify-start items-start text-wrapper_5 text-wrapper_1 input_1"
placeholder="请输入手机号"
maxlength="11"
bindinput="onInput" data-field="phone" value="{{phone}}"
/>
</view>
</view>
<view class="flex-row items-center relative section_3 mt-22">
<input
class="flex-col justify-start items-start text-wrapper_2 view_6 input_2"
placeholder="请输入验证码"
maxlength="6"
bindinput="onInput" data-field="captcha" value="{{captcha}}"
/>
<view bindtap="{{sending ? '' : 'sendSmsCode'}}" class="flex-col justify-start items-center shrink-0 text-wrapper_3 ml-18">
<text class="text_7">{{ sending ? count + 's后重发' : '发送验证码' }}</text>
</view>
</view>
<view class="flex-col mt-22">
<view class="flex-col justify-start relative section_2">
<input
class="flex-col justify-start items-start text-wrapper_5 view_1 input_3"
placeholder="请输入邀请码"
maxlength="6"
bindinput="onInput" data-field="inviteCode" value="{{inviteCode}}"
/>
</view>
<view class="flex-col justify-start section_2 mt-22">
<input class="flex-col justify-start items-start text-wrapper_5 view_3 input_4"
placeholder="请输入密码"
bindinput="onInput" data-field="password" value="{{password}}"
/>
</view>
</view>
</view>
</view>
<view class="flex-row items-center group_1 mt-26">
<!-- 复选框 -->
<checkbox-group bindchange="onCheckboxChange">
<checkbox value="agree" checked="{{agree}}" color="#FF8D1A" />
</checkbox-group>
<view class="group_2 ml-13">
<text class="font_2 text_10">我已阅读并同意</text>
<text class="font_2">《用户协议》</text>
<text class="text_11">&</text>
<text class="font_2">《隐私协议》</text>
</view>
</view>
<view bindtap="onRegister" class="flex-col justify-start items-center text-wrapper_6 mt-26"><text class="font text_12">注册</text></view>
</view>
<view class="self-center group_3">
<text class="font_2 text_13">已有账号？</text>
<text bindtap="gotoLogin" class="font_2 text_14" >立即登录→</text>
</view>
</view>

172
pages/loginModule/register/register.wxss Normal file
View File

@ -0,0 +1,172 @@
.ml-13 {
margin-left: 24.38rpx;
}
.page {
padding: 0rpx 49.74rpx 79.82rpx 49.74rpx;
background-color: #ffffff;
width: 100%;
overflow: hidden;
height: 100%;
}
.register {
margin-top: -30rpx;
}
.image {
width: 232.5rpx;
height: 232.5rpx;
}
.text {
margin-top: 37.8rpx;
color: #1c2023;
font-size: 37.5rpx;
font-family: SourceHanSansCN;
line-height: 35.18rpx;
}
.group {
margin-top: 86.36rpx;
}
.font {
font-size: 30rpx;
font-family: SourceHanSansCN;
line-height: 27.79rpx;
color: #b3b3b3;
}
.text_2 {
color: #1c2023;
line-height: 28.2rpx;
}
.group_6 {
padding-left: 2.76rpx;
}
.section {
padding: 20.63rpx 0 18.75rpx;
background-color: #ffffff;
border-radius: 9.38rpx;
box-shadow: 0rpx 3.75rpx 11.25rpx #00000040;
}
.text-wrapper_5 {
margin-left: 16.88rpx;
margin-right: 16.88rpx;
}
.view {
padding: 15.92rpx 0 12.62rpx;
background-color: #ffffff00;
}
.section_1 {
padding: 20.16rpx 0 19.22rpx;
background-color: #ffffff;
border-radius: 9.38rpx;
box-shadow: 0rpx 3.75rpx 7.5rpx #00000040;
}
.text-wrapper_1 {
padding: 12.64rpx 0 15.92rpx;
background-color: #ffffff00;
}
.section_3 {
padding: 25.63rpx 16.88rpx 28.75rpx;
background-color: #ffffff;
border-radius: 9.38rpx;
box-shadow: 0rpx 3.75rpx 7.5rpx #00000040;
}
.text-wrapper_2 {
flex: 1 1 0;
}
.view_6 {
padding: 16.73rpx 0 11.74rpx;
background-color: #ffffff00;
height: 66.25rpx;
}
.text-wrapper_3 {
margin-right: 15rpx;
padding: 13.16rpx 0 10.93rpx;
background-color: #ff8d1a;
border-radius: 9.38rpx;
width: 157.5rpx;
height: 45rpx;
}
.text_7 {
color: #ffffff;
font-size: 22.5rpx;
font-family: AlibabaPuHuiTi;
line-height: 20.91rpx;
}
.section_2 {
padding: 20.63rpx 0 18.75rpx;
background-color: #ffffff;
border-radius: 9.38rpx;
box-shadow: 0rpx 3.75rpx 7.5rpx #00000040;
}
.view_1 {
padding: 11.7rpx 0 16.89rpx;
background-color: #ffffff00;
}
.view_3 {
padding: 11.96rpx 0 16.29rpx;
background-color: #ffffff00;
}
.group_1 {
padding: 0 2.76rpx;
}
.group_2 {
line-height: 24.56rpx;
height: 24.56rpx;
}
.font_2 {
font-size: 26.25rpx;
font-family: SourceHanSansCN;
line-height: 24.49rpx;
color: #ff5e00;
}
.text_10 {
color: #1c2023;
line-height: 24.56rpx;
}
.text_11 {
color: #1c2023;
font-size: 26.25rpx;
font-family: SourceHanSansCN;
line-height: 19.93rpx;
}
.text-wrapper_6 {
margin-left: 2.76rpx;
padding: 37.63rpx 0 32.27rpx;
background-color: #ff8d1a;
border-radius: 9.38rpx;
}
.text_12 {
color: #ffffff;
line-height: 27.6rpx;
}
.group_3 {
margin-top: 37rpx;
line-height: 24.36rpx;
}
.text_13 {
color: #383838;
line-height: 24.28rpx;
}
.text_14 {
line-height: 24.36rpx;
}
.input {
padding: 13.13rpx 16.26rpx 15rpx 16.26rpx;
}
.input_1 {
padding: 13.13rpx 16.26rpx 15rpx 16.26rpx;
}
.input_2 {
padding: 13.13rpx 16.26rpx 15rpx 16.26rpx;
}
.input_3 {
padding: 13.13rpx 16.26rpx 15rpx 16.26rpx;
}
.input_4 {
padding: 13.13rpx 16.26rpx 15rpx 16.26rpx;
}
.checkbox {
flex-shrink: 0;
}
.checkbox .wx-checkbox-input {
width: 37.5rpx;
height: 37.5rpx;
}