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

Merge remote-tracking branch 'fitjourney前端代码仓库/master'

Browse Source 
# Conflicts:
#	pages.json
#	pages/login/register/register.vue
#	unpackage/dist/cache/.vite/deps/_metadata.json
master
Gary 2 months ago
parent c5230c08dc 68232dfb1b
commit b4be4577ac
3 changed files with 365 additions and 92 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/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>

435
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" v-model="phoneNumber" 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" v-model="code" 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,93 +50,134 @@
</view>
</form>
<!-- 成功弹窗 -->
<my-pop-up
<my_pop_up
class="register_tip"
@onClick="onOpenUpClick"
@onClose="onClosePopUPClick"
:is-opened="isOpenPopUp"
:isOpened="isOpenPopUp"
:title="title"
:content="content"
></my-pop-up>
></my_pop_up>
</view>
</template>
<script setup>
/*-----------------------------------------------------------外部导入-------------------------------------------*/
import { ref, computed } from 'vue';
import app from "@/App.vue";
const phoneNumber = ref("");//用来存储
const code= ref("");//用来存储验证码
const isCaptchaError = ref(false);
const isPhoneError = ref(false);
const isPassageSameError = ref(false);
const password = ref("13959885560");
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){ //说明在倒计时
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)
}
// 获取后端服务器地址
const serverAddress = app.globalData.fit_journey_login_address + '/phone_code_register/getPhoneCode';
console.log(String(phoneNumber.value));
// 发送请求到后端
uni.request({
url: serverAddress,
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded',
},
data: {
phone: phoneNumber.value
},
success: (res) => {
console.log(res.data);
},
fail: (err) => {
console.log("请求失败", err);
}
});
/*注册的相关变量*/
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:"error",
});
}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)
}
})
}
}
// 判断密码是否要明文显示
/*-----密码码相关函数-----*/
function openEyesEvent_1(){
//TODO: 判断第一个密码是否要明文显示
if (isOpened_1.value)
{
isOpened_1.value = false;
@ -148,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;
@ -162,34 +203,101 @@ 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(){
// 获取后端服务器地址
const serverAddress = app.globalData.fit_journey_login_address + '/phone_code_register/registerByPhone';
// 发送请求到后端
uni.request({
url: serverAddress,
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded',
},
data: {
phone: phoneNumber.value,
code: code.value,
password: "13959885560"
},
success: (res) => {
console.log(res.data);
//TODO:注册成功(code==200) 弹窗并跳转到登录页面
},
fail: (err) => {
console.log("请求失败", err);
}
});
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({
url: '/pages/login/account_login/account_login',
animationType: 'pop-in', //动画，但好像没作用
@ -204,5 +312,158 @@ function onClosePopUPClick(){
</script>
<style lang="scss">
@import '@/static/login/register/css/register.scss';
.register_box{
background-image: url("../../../static/login/register/pictures/background.png");
background-size: cover;
background-position: center;
height: 100vh;
width: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
object-fit: contain;
// 返回图标
.return_image{
position: absolute;
left: 16.5%;
right: 80.1%;
top: 8.62%;
bottom: 89.09%;
width: 0.8rem;
height: auto;
object-fit: contain;
}
//欢迎文字
.welcom_words{
position: absolute;
left: 12.4%;
top: 30.8%;
font-family: 'PingFang SC';
font-size: 1.4rem;
color: #000364;
}
//软件名称
.soft_name{
position: absolute;
left: 12.4%;
top: 34.5%;
font-family: 'PingFang SC';
font-size: 1rem;
color: #000364;
}
//注册表单
.register_form{
position: absolute;
width: 74.5%;
height: 33.6%;
top: 40%;
//每个表单项
.register_form_item{
height: auto;
margin-bottom: 5%;
.form_input_box{
padding-left: 3%;
padding-right: 3%;
background-color: #D5E9FF;
border-radius: 12px;
}
.error_tip{
margin-top: 0.6vh;
padding-left: 3%;
font-size: 0.8rem;
color: #FF1E1E;
}
}
//手机号盒子
.phone_number_box{
display: flex;
flex-direction: column;
.phone_number{
height: 5.5vh;
padding-left: 11%;
background-image: url("../../../static/login/register/pictures/phone_icon.png");
background-repeat: no-repeat;
background-size: 0.8rem;
background-position: 3% 50%;
background-color: #D5E9FF;
font-size: 0.8rem;
}
}
// 验证码盒子
.captcha_box{
display: flex;
flex-direction: column;
.captcha_input_box{
display: flex;
align-items: center;
padding-left: 3%;
background-color: #D5E9FF;
border-radius: 12px;
position: relative;
.captcha{
height: 5.5vh;
padding-left: 11%;
background-image: url("../../../static/login/register/pictures/captcha_icon.png");
background-repeat: no-repeat;
background-size: 0.8rem;
background-position: 4.5% 50%;
font-size: 0.8rem;
}
.captcha_button{
/* 发送验证码 */
width: 5.5rem;
height: 1.9rem;
border-radius: 15px;
font-size: 0.8rem;
color: #000364;
position: absolute;
right: 5%;
}
}
}
//密码输入盒子；确认密码盒子
.passage_box{
display: flex;
flex-direction: column;
.passage_input_box{
display: flex;
align-items: center;
background-color: #D5E9FF;
border-radius: 12px;
position: relative;
.passage{
height: 5.5vh;
padding-left: 11%;
background-image: url("../../../static/login/register/pictures/lock_icon.png");
background-repeat: no-repeat;
background-size: 0.8rem;
background-position: 4.7% 50%;
font-size: 0.8rem;
}
.eyes{
width: 1rem;
height: 1rem;
position: absolute;
right: 13%;
}
}
}
//注册按钮
.register_button{
display: flex;
align-items: center;
justify-content: center;
margin-top: 8%;
height: 5.5vh;
border-radius: 12px;
background-color: #4A69F7;
color: #FFFCFC;
text-align: center;
font-size: 1.2rem;
}
}
}
</style>

Write Preview
Loading…
Cancel
Save