更新小程序

chenyao

2026-01-14 41d632963fd5c23266120a8bfeb188eeca8be60b

更新小程序

 uniapps/work-wx/src/pages/register/index.vue

New file
@@ -0,0 +1,265 @@
<!-- 注册 -->
<template>
    <view class="register-page">
        <view class="pageBg"></view>
        <view class="content">
           <view class="row">
             <view class="label"><span>*</span>手机号码</view>
             <view class="input">
                <u-input input-align="right" border="bottom" v-model="formParams.userName" placeholder="请输入手机号码"></u-input>
             </view>
           </view>
           <view class="row">
            <view class="label">昵称</view>
             <view class="input">
                <u-input input-align="right" border="bottom" v-model="formParams.nikeName" placeholder="昵称"></u-input>
             </view>
           </view>
           <view class="row">
            <view class="label"><span>*</span>密码</view>
             <view class="input">
                <u-input type="password" input-align="right" border="bottom" v-model="formParams.password" placeholder="请输入密码"></u-input>
             </view>
           </view>
           <view class="row">
            <view class="label"><span>*</span>确认密码</view>
             <view class="input">
                <u-input type="password" input-align="right" border="bottom" v-model="formParams.password2" placeholder="请确认密码"></u-input>
             </view>
           </view>
           <view class="row">
            <view class="label"><span>*</span>验证码</view>
             <view class="input">
                <u-input input-align="right" border="bottom" v-model="formParams.code" placeholder="请输入验证码"></u-input>
             </view>
             <u-button class="getCode" :disabled="countDown > 0" @click="sendVerificationCode" type="primary" color="#007AFF">
                {{ countDown > 0 ? `${countDown}s后重发` : '获取验证码' }}
            </u-button>
           </view>
        </view>
        <view class="register">
            <u-button type="primary" color="#007AFF" @click="register">注册</u-button>
        </view>
    </view>
</template>

<script setup>
import { sendResetCode, registerUser } from '@/api/user/index.js';
const formParams = ref({
    userName: '',
    nikeName: '',
    password: '',
    password2: '',
    code: '',

})
const countDown = ref(0);
let timer = null;
// 校验密码不能包含中文
const validatePasswordNoChinese = (password) => {
    const chineseRegex = /[\u4e00-\u9fa5]/;
    if (chineseRegex.test(password)) {

        uni.showToast({
            title: '密码不能包含中文字符',
            icon: 'none',
            duration: 2000
        });
        return false;
    }
    return true;
};
// 校验密码复杂度（长度≥6位，包含字母和数字）
const validatePasswordStrength = (password) => {
    if (password.length < 6) {

        uni.showToast({
            title: '密码长度不能少于6位',
            icon: 'none',
            duration: 2000
        });
        return false;
    }
    // const hasLetter = /[a-zA-Z]/.test(password);
    // const hasNumber = /\d/.test(password);
    // if (!hasLetter || !hasNumber) {
    //   ElMessage.error('密码需同时包含字母和数字');
    //   return false;
    // }
    return true;
};
// 校验手机号
const validatePhone = () => {
    if (!formParams.value.userName) return true
    const phoneRegex = /^1[3-9]\d{9}$/
    if (!phoneRegex.test(formParams.value.userName)) {

        uni.showToast({
            title: '请输入正确的手机号码',
            icon: 'none',
            duration: 2000
        });
        return false
    }
    return true
}
// 发送验证码
const sendVerificationCode = () => {
    if (formParams.value.userName === '') {
        uni.showToast({
            title: '请先输入手机号码',
            icon: 'none',
            duration: 2000
        });
        return;
    }

    // 这里假设账号就是手机号，实际项目中可能需要验证格式
    sendResetCode(formParams.value.userName).then(res => {
        console.log('4444',res)
        if (res.data.code === 200) {
            uni.showToast({
                title: '验证码发送成功',
                icon: 'success',
                duration: 2000
            });

            // 开始倒计时
            countDown.value = 60;
            timer = setInterval(() => {
                countDown.value--;
                if (countDown.value <= 0) {
                    clearInterval(timer);
                    timer = null;
                }
            }, 1000);
        } else {
            uni.showToast({
                title: res.data.msg || '验证码发送失败',
                icon: 'none',
                duration: 2000
            });
        }
    }).catch(err => {
        uni.showToast({
            title: '网络错误，请稍后重试',
            icon: 'none',
            duration: 2000
        });
    });
};
function register() {
    if (!formParams.value.userName) {
        uni.showToast({
            title: '请输入手机号码',
            icon: 'none',
            duration: 2000
        });
        return
    }
    if (!formParams.value.password) {
        uni.showToast({
            title: '请输入密码',
            icon: 'none',
            duration: 2000
        });
        return
    }
    if (formParams.value.password !== formParams.value.password2) {
        uni.showToast({
            title: '两次输入密码不一致',
            icon: 'none',
            duration: 2000
        });
        return
    }
    if (!formParams.value.code) {
        uni.showToast({
            title: '请输入验证码',
            icon: 'none',
            duration: 2000
        });
        return
    }
    if (!validatePhone()) return
    if (!validatePasswordNoChinese(formParams.value.password)) return
    if (!validatePasswordStrength(formParams.value.password)) return
    registerUser(formParams.value).then(res => {
        if (res.data.code === 200) {
            uni.showToast({
                title: '注册成功',
                icon: 'success',
            });
        } else {
            uni.showToast({
                title: res.data.msg || '注册失败',
                icon: 'none',
            });
        }
    }).catch(err => {
        uni.showToast({
            title: '网络错误，请稍后重试',
            icon: 'none',
        });
    });
}
</script>

<style scoped lang="scss">
.register-page {
    height: 100%;
    .pageBg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("@/static/images/user/userbg.svg")  no-repeat ;
        background-size: 100%;
    }
    .content {
        position: absolute;
        top: 192rpx;
        left: 24rpx;
        right: 24rpx;
        min-height: 326rpx;
        background: #FFFFFF;
        border-radius: 6px;
        padding: 20px;
        .row {
            display: flex;
            align-items: center;
            border-bottom: 1rpx solid #f5f5f5;
            margin: 10rpx 0;
        }
        .label {
            width: 140rpx;
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 15px;
            color: #222324;
            span {
                color: #FF4444;
            }
        }
        .input {
            flex: 1;
        }
        :deep(.u-input) {
            border-color: transparent;
        }
        :deep(.u-icon--right) {
            display: none;
        }
        .getCode {
            width: 180rpx;
        }
    }
    .register {
        position: fixed;
        left: 24rpx;
        right: 24rpx;
        bottom: 126rpx;
    }
}
</style>