linjw/Market_Uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

静态页面

Browse Source
This commit is contained in:
小林
2025-08-06 14:15:21 +08:00
parent d9dffb2537
commit adb9d11757
11 changed files with 398 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
src/pages/register/register.vue
View File

@@ -1,6 +1,6 @@
<template>
<view class="register-container">
<!-- 语言选择文字按钮（点击文字即可弹出窗口） -->
<!-- 语言选择文字按钮 -->
<view class="language-text-btn" @click="showLanguageModal = true">
<text class="lang-text">{{ $t('login.changelanguage') }}</text>
<i class="iconfont icon-arrow-down"></i>
@@ -22,11 +22,11 @@
</view>
<view
class="lang-item"
@click="changeLanguage('cn')"
:class="{ 'active': currentLang === 'cn' }"
@click="changeLanguage('zh')"
:class="{ 'active': currentLang === 'zh' }"
>
<text>中文</text>
<i class="iconfont icon-check" v-if="currentLang === 'cn'"></i>
<text>Chinese</text>
<i class="iconfont icon-check" v-if="currentLang === 'zh'"></i>
</view>
</view>
<button class="modal-close" @click="showLanguageModal = false">
@@ -54,12 +54,12 @@
:placeholder="$t('register.idCardPlaceholder')"
class="input-field"
maxlength="6"
@input="validateIdCard"
@input="handleIdCardInput"
/>
</view>
</view>
<!-- 密码输入（带显示/隐藏切换） -->
<!-- 密码输入 -->
<view class="form-group">
<text class="input-label">{{ $t('register.passwordLabel') }}</text>
<view class="input-wrapper">
@@ -71,13 +71,14 @@
class="input-field"
@input="validatePassword"
/>
<button
class="toggle-btn"
@click.stop="togglePasswordVisibility"
:class="{ active: showPassword }"
>
<i class="iconfont" :class="showPassword ? 'icon-eye' : 'icon-eye-close'"></i>
</button>
<view class="toggle-btn-wrapper">
<view
class="toggle-btn"
@click.stop="togglePasswordVisibility"
>
<i class="iconfont" :class="showPassword ? 'icon-eye' : 'icon-eye-close'"></i>
</view>
</view>
</view>
<text class="password-tip" v-if="showPasswordTip">{{ $t('register.passwordTip') }}</text>
</view>
@@ -94,13 +95,14 @@
class="input-field"
@input="validateConfirmPassword"
/>
<button
class="toggle-btn"
@click.stop="toggleConfirmPasswordVisibility"
:class="{ active: showConfirmPassword }"
>
<i class="iconfont" :class="showConfirmPassword ? 'icon-eye' : 'icon-eye-close'"></i>
</button>
<view class="toggle-btn-wrapper">
<view
class="toggle-btn"
@click.stop="toggleConfirmPasswordVisibility"
>
<i class="iconfont" :class="showConfirmPassword ? 'icon-eye' : 'icon-eye-close'"></i>
</view>
</view>
</view>
</view>
@@ -154,15 +156,31 @@
</view>
<!-- 注册按钮 -->
<button
<!-- <button
class="register-btn"
@click="handleRegister"
:disabled="isLoading || !agreeTerms || formInvalid"
:disabled="isLoading || !agreeTerms || formInvalid"
>
<template v-if="isLoading">
<i class="iconfont icon-loading loading-icon"></i>
{{ $t('register.registerProcessing') }}
</template>
<template v-else>
{{ $t('register.registerButton') }}
</template>
</button> -->
<button
class="register-btn"
@click="handleRegister"
>
<template v-if="isLoading">
<i class="iconfont icon-loading loading-icon"></i>
{{ $t('register.registerProcessing') }}
</template>
<template v-else>
{{ $t('register.registerButton') }}
</template>
{{ $t('register.registerButton') }}
</button>
<!-- 登录链接 -->
@@ -193,7 +211,7 @@ export default {
showError: false,
errorMessage: '',
isLoading: false,
currentLang: 'en', // 默认英文
currentLang: 'en',
showLanguageModal: false,
showPassword: false,
showConfirmPassword: false,
@@ -206,18 +224,44 @@ export default {
this.currentLang = this.$i18n.locale
},
methods: {
// 切换密码显示状态
// 处理身份证输入（自动转换小写x为大写X）
handleIdCardInput() {
if (this.idCardLast6 && this.idCardLast6.length > 0) {
const lastChar = this.idCardLast6.slice(-1)
if (lastChar === 'x') {
this.idCardLast6 = this.idCardLast6.slice(0, -1) + 'X'
}
}
this.validateIdCard()
},
// 验证身份证后六位（最后一位支持大写X）
validateIdCard() {
if (!this.idCardLast6 || this.idCardLast6.trim() === '') {
this.setError(this.$t('register.errors.emptyIdCard'))
return false
}
const idReg = /^\d{5}[0-9X]$/
if (!idReg.test(this.idCardLast6)) {
this.setError(this.$t('register.errors.invalidIdCard'))
return false
}
this.clearError()
this.checkFormValidity()
return true
},
togglePasswordVisibility() {
this.showPassword = !this.showPassword
this.showPasswordTip = true
},
// 切换确认密码显示状态
toggleConfirmPasswordVisibility() {
this.showConfirmPassword = !this.showConfirmPassword
},
// 切换语言
changeLanguage(lang) {
this.currentLang = lang
this.$i18n.locale = lang
@@ -225,20 +269,7 @@ export default {
this.showLanguageModal = false
},
// 验证身份证后六位
validateIdCard() {
const idReg = /^\d{6}$/
if (this.idCardLast6 && !idReg.test(this.idCardLast6)) {
this.setError(this.$t('register.errors.invalidIdCard'))
return false
}
this.checkFormValidity()
return true
},
// 验证密码
validatePassword() {
// 密码规则：至少8位，包含数字和字母
const pwdReg = /^(?=.*[A-Za-z])(?=.*\d).{8,}$/
if (this.password && !pwdReg.test(this.password)) {
this.setError(this.$t('register.errors.invalidPassword'))
@@ -249,7 +280,6 @@ export default {
return true
},
// 验证确认密码
validateConfirmPassword() {
if (this.confirmPassword && this.confirmPassword !== this.password) {
this.setError(this.$t('register.errors.passwordMismatch'))
@@ -259,7 +289,6 @@ export default {
return true
},
// 验证邮箱
validateEmail() {
const emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
if (this.email && !emailReg.test(this.email)) {
@@ -270,59 +299,49 @@ export default {
return true
},
// 检查表单有效性
checkFormValidity() {
const idReg = /^\d{6}$/
const idReg = /^\d{5}[0-9X]$/
const pwdReg = /^(?=.*[A-Za-z])(?=.*\d).{8,}$/
const emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
const isIdValid = idReg.test(this.idCardLast6)
const isPwdValid = pwdReg.test(this.password)
const isConfirmValid = this.confirmPassword === this.password
const isEmailValid = emailReg.test(this.email)
const isIdValid = this.idCardLast6 && idReg.test(this.idCardLast6)
const isPwdValid = this.password && pwdReg.test(this.password)
const isConfirmValid = this.confirmPassword && this.confirmPassword === this.password
const isEmailValid = this.email && emailReg.test(this.email)
this.formInvalid = !(isIdValid && isPwdValid && isConfirmValid && isEmailValid)
},
// 设置错误信息
setError(message) {
this.showError = true
this.errorMessage = message
},
// 处理注册
clearError() {
this.showError = false
this.errorMessage = ''
},
handleRegister() {
// 再次验证表单
if (!this.validateIdCard() || !this.validatePassword() || !this.validateEmail()) {
return
}
// 验证协议同意
if (!this.agreeTerms) {
this.setError(this.$t('register.errors.agreeTermsFirst'))
return
}
// if (!this.agreeTerms) {
// this.setError(this.$t('register.errors.agreeTermsFirst'))
// return
// }
// 模拟注册
this.isLoading = true
this.showError = false
setTimeout(() => {
console.log('注册信息:', {
idCardLast6: this.idCardLast6,
password: this.password,
inviteCode: this.inviteCode,
email: this.email
})
// 注册成功提示
uni.showToast({
title: this.$t('register.registerSuccess'),
icon: 'success',
duration: 2000
})
// 跳转登录页面
setTimeout(() => {
uni.navigateTo({ url: '/pages/login/login' })
}, 2000)
@@ -331,12 +350,10 @@ export default {
}, 2000)
},
// 跳转到登录页面
navigateToLogin() {
uni.navigateTo({ url: '/pages/login/login' })
},
// 打开协议详情
openAgreement(type) {
const title = type === 'terms'
? this.$t('register.userAgreement')
@@ -523,6 +540,24 @@ export default {
line-height: 1.4;
}
.toggle-btn {
width: 50rpx;
height: 50rpx;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
padding: 0;
margin: 0;
border: none;
}
.toggle-btn .iconfont {
margin: 0;
color: #999;
font-size: 34rpx;
}
/* 邀请码提示 */
.invite-tip {
display: block;
@@ -568,6 +603,7 @@ export default {
.register-btn {
width: 100%;
height: 90rpx;
z-index: 100;
line-height: 90rpx;
border-radius: 80rpx;
background-color: #007aff !important;
@@ -612,6 +648,4 @@ export default {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
</style>