fzu102201435
/
front
1
0
Fork 4
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

add:update register page

Browse Source
master
xhhing 2 months ago
parent ec035860b7
commit 68232dfb1b
5 changed files with 216 additions and 45 deletions
Show Stats Download Patch File Download Diff File

12
manifest.json
Unescape View File

@ -102,6 +102,18 @@
"mp-toutiao" : {
"usingComponents" : true
},
// "h5": {
// "devServer": {
// "proxy": {
// "/prefix/api/user/list": {
// "target": "http://47.122.61.54:8084",
// "pathRewrite": {
// "^/prefix": ""
// }
// }
// }
// }
// },
"uniStatistics" : {
"enable" : false
},

4
pages.json
Unescape View File

@ -44,7 +44,7 @@
},*/
/*-----------------------------------------------------------------------动画过渡界面-------------------------------------------*/
/*
{
"path": "pages/login/account_login/account_login",
@ -69,7 +69,7 @@
"style": {
"navigationStyle": "custom"
}
},*/
},
/*-----------------------------------------------------------------------登录注册界面-------------------------------------------*/
/*
{

4
pages/login/change_password/change_password.vue
Unescape View File

@ -30,14 +30,14 @@
</view>
</form>
<!-- 修改成功弹窗 -->
<my-pop-up
<my_pop_up
class="change_tip"
@onClick="onOpenUpClick"
@onClose="onClosePopUPClick"
:is-opened="isOpenPopUp"
:title="title"
:content="content"
></my-pop-up>
></my_pop_up>
</view>
</template>

235
pages/login/register/register.vue
Unescape View File

@ -13,14 +13,14 @@
<!-- 手机号输入 -->
<view class="phone_number_box register_form_item">
<view class="form_input_box">
<input type="text" class="phone_number" placeholder="请输入你的电话号码"/>
<input v-model="phonenum" type="text" class="phone_number" placeholder="请输入你的电话号码"/>
</view>
<view class="error_tip" v-if="isPhoneError">*该手机号不存在</view>
</view>
<!-- 验证码输入 -->
<view class="captcha_box register_form_item">
<view class="form_input_box captcha_input_box">
<input class="captcha" name="captcha" type="text" placeholder="请输入你的验证码"/>
<input v-model="captchanum" class="captcha" name="captcha" type="text" placeholder="请输入你的验证码"/>
<button class="captcha_button" @click="sendCaptchaEvent"
:style="{color:captchaButtonColor, backgroundColor:captchaButtonBackgroundColor}">
{{captchaButtonText}}
@ -31,7 +31,7 @@
<!-- 密码输入 -->
<view class="passage_box register_form_item">
<view class="form_input_box passage_input_box">
<input type="text" class="passage" :password="isOpened_1" placeholder="请输入你的密码"/>
<input v-model="passagenum" type="text" class="passage" :password="isOpened_1" placeholder="请输入你的密码"/>
<image @click="openEyesEvent_1" class="eyes" :src="eyesStateIcon_1"></image>
</view>
<!-- <view class="error_tip" v-if="isPassageError">*密码错误</view> -->
@ -39,7 +39,7 @@
<!-- 确认密码输入 -->
<view class="passage_box register_form_item">
<view class="form_input_box passage_input_box">
<input type="text" class="passage" :password="isOpened_2" placeholder="请再次确认密码"/>
<input v-model="passagesamenum" type="text" class="passage" :password="isOpened_2" placeholder="请再次确认密码"/>
<image @click="openEyesEvent_2" class="eyes" :src="eyesStateIcon_2"></image>
</view>
<view class="error_tip" v-if="isPassageSameError">*两次密码不相同</view>
@ -50,63 +50,134 @@
</view>
</form>
<!-- 成功弹窗 -->
<my-pop-up
<my_pop_up
class="register_tip"
@onClick="onOpenUpClick"
@onClick="onOpenUpClick"
@onClose="onClosePopUPClick"
:is-opened="isOpenPopUp"
:title="title"
:isOpened="isOpenPopUp"
:title="title"
:content="content"
></my-pop-up>
></my_pop_up>
</view>
</template>
<script setup>
/*-----------------------------------------------------------外部导入-------------------------------------------*/
import { ref, computed } from 'vue';
const isCaptchaError = ref(false);
const isPhoneError = ref(false);
const isPassageSameError = ref(false);
const title = '成功'; //弹窗标题
const content = '注册成功'; //弹窗内容
const isOpenPopUp = ref(false);//是否显示弹窗
/*-----------------------------------------------------------变量----------------------------------------------*/
/*导入的全局变量*/
const app = getApp();
/*手机号框相关变量*/
const phonenum = ref(); //手机号
const isPhoneError = ref(false);//手机号是否错误
/*验证码框相关变量*/
const captchanum = ref(); //验证码
const isCaptchaError = ref(false); //验证码是否错误
const isSendCaptcha = ref(false); //是否发送了验证码的标志
var codeTime = ref(0); //验证码的倒计时
const captchaButtonBackgroundColor = computed(() => isSendCaptcha.value ? "#ABCBFF" : "#ffffff"); //验证码按钮的背景颜色
const captchaButtonColor = computed(() => isSendCaptcha.value ? "#ffffff" : "#000364");//验证码按钮的字体颜色
const captchaButtonText = computed(() => isSendCaptcha.value ? (codeTime.value+"s后重新发送"):"发送验证码");
/*密码框相关变量*/
const passagenum = ref(); //密码
const passagesamenum = ref(); //第二次输入的密码
const isPassageSameError = ref(false);//密码是否相同
const isOpened_1 = ref(true); //输入框是否密码显示的标志
const eyesStateIcon_1 = ref("../../../static/login/register/pictures/closedeyes.png");
const isOpened_2 = ref(true); //输入框是否密码显示的标志
const eyesStateIcon_2 = ref("../../../static/login/register/pictures/closedeyes.png");
//发送验证码事件
function sendCaptchaEvent(){
console.log("send captcha");
if (codeTime.value>0){ //说明在倒计时
/*注册的相关变量*/
const isRegisterSuccess = ref(false); //是否注册成功的标志
/*弹窗相关变量*/
const title = computed(()=>isRegisterSuccess.value? '成功':'错误'); //弹窗标题
const content = computed(()=>isRegisterSuccess.value? '注册成功':'注册失败'); //弹窗内容
const isOpenPopUp = ref(false);//是否显示弹窗
/*正则表达式相关变量*/
const pMatch = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
/*-----------------------------------------------------------函数----------------------------------------------*/
/*-----验证码相关函数-----*/
function checkPhone(){
var flag=true
//验证手机号
if (phonenum.value==undefined){
flag = false
uni.showToast({ //弹出提示框
title: '不能重复获取',
icon:"none"
title: '手机号不能为空',
icon:"error",
});
} else{ //说明没有发送，也没倒计时
codeTime.value = 60;
isSendCaptcha.value = true;
var timer = setInterval(()=>{
codeTime.value--;
if(codeTime.value<1){
clearInterval(timer);
isSendCaptcha.value = false;
codeTime.value = 0;
}else if (!pMatch.test(phonenum.value)){
flag = false
// isPhoneError.value = true
uni.showToast({ //弹出提示框
title: '手机号错误',
icon:"error",
});
} else {
isPhoneError.value = false
}
return flag
}
function sendCaptchaEvent(){
//TODO:发送验证码事件
console.log("点击发送验证码按钮");
//检查是否手机号正确
if (checkPhone()){
//倒计时，并防止重复点击
if (codeTime.value>0){ //说明在倒计时
uni.showToast({ //弹出提示框
title: '不能重复获取',
icon:"none"
});
} else{ //说明没有发送，也没倒计时
codeTime.value = 60;
isSendCaptcha.value = true;
var timer = setInterval(()=>{
codeTime.value--;
if(codeTime.value<1){
clearInterval(timer);
isSendCaptcha.value = false;
codeTime.value = 0;
}
},1000)
};
//发送验证码的网络请求
uni.request({
// url:app.globalData.fit_journey_login_address+'/phone_code_register/getPhoneCode',
url:'http://47.122.61.54:8084/phone_code_register/getPhoneCode',
method:'POST',
header:{
'Content-Type':'application/x-www-form-urlencoded',
},
data:{
phone:phonenum.value
},
success:(res)=>{
console.log('发送验证码请求成功：'+res.data)
},
fail:(err)=>{
console.log('发送验证码请求失败')
console.log(err)
}
},1000)
};
})
}
}
// 判断密码是否要明文显示
/*-----密码码相关函数-----*/
function openEyesEvent_1(){
//TODO: 判断第一个密码是否要明文显示
if (isOpened_1.value)
{
isOpened_1.value = false;
@ -118,8 +189,8 @@ function openEyesEvent_1(){
eyesStateIcon_1.value = "../../../static/login/register/pictures/closedeyes.png";
}
}
// 判断确认的密码是否要明文显示
function openEyesEvent_2(){
//TODO: 判断第二个密码是否要明文显示
if (isOpened_2.value)
{
isOpened_2.value = false;
@ -132,11 +203,99 @@ function openEyesEvent_2(){
}
}
//注册按钮点击事件
/*-----注册按钮相关函数-----*/
function checkSubmit(){
//TODO:检查提交是否正确
var flag = true
//验证手机号
if (phonenum.value==undefined){
flag = false
uni.showToast({ //弹出提示框
title: '手机号不能为空',
icon:"error",
});
}else if (!pMatch.test(phonenum.value)){
flag = false
// isPhoneError.value = true
uni.showToast({ //弹出提示框
title: '手机号错误',
icon:"error",
});
} else {
isPhoneError.value = false
}
//验证密码是否为空
if (passagenum.value==undefined){
flag = false
uni.showToast({ //弹出提示框
title: '密码不能为空',
icon:"error",
});
}else if (passagesamenum.value==undefined){
//验证第二次密码是否为空
flag = false
uni.showToast({ //弹出提示框
title: '请再输入密码',
icon:"error",
});
}else if (passagenum.value!=passagesamenum.value){
//验证两次密码是否相等
flag = false
// isPassageSameError.value = true
uni.showToast({ //弹出提示框
title: '两次密码不相等',
icon:"error",
});
} else{
isPassageSameError.value = false
}
//验证验证码
if (captchanum.value==undefined){
flag = false
// isCaptchaError.value = true
uni.showToast({ //弹出提示框
title: '验证码为空',
icon:"error",
});
} else{
isCaptchaError.value = false
}
return flag
}
function registerEvent(){
//
isOpenPopUp.value = true; //显示弹窗
//TODO:注册按钮点击事件
//检查提交格式是否正确
if (checkSubmit()){
//手机号注册网络请求
uni.request({
// url:app.globalData.fit_journey_login_address+'/phone_code_register/registerByPhone',
url:'http://47.122.61.54:8084/phone_code_register/registerByPhone',
method:'POST',
data:{
code:captchanum.value,
phone:phonenum.value
},
success:(res)=>{
console.log('注册成功：'+res.data)
isRegisterSuccess.value = true
isOpenPopUp.value = true //显示弹窗
},
fail:(err)=>{
console.log('注册失败'+err)
isRegisterSuccess.value = false
isOpenPopUp.value = true //显示弹窗
}
})
}
}
/*-----弹窗相关函数-----*/
function onOpenUpClick(){
//TODO:跳转到登录界面
uni.navigateTo({

6
unpackage/dist/cache/.vite/deps/_metadata.json vendored
Unescape View File

@ -1,8 +1,8 @@
{
"hash": "06ac3fce",
"configHash": "25b19c2c",
"hash": "70943268",
"configHash": "c265b382",
"lockfileHash": "e3b0c442",
"browserHash": "fd8ea9c9",
"browserHash": "d782de90",
"optimized": {},
"chunks": {}
}
Write Preview
Loading…
Cancel
Save