php
/
ZhiHuiJiaoWu_UniApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat(student): 学员忘记密码功能 

- 新增忘记密码页面，包含验证手机号码和设置新密码两个步骤
- 添加用户类型选择功能，支持学员和员工两种类型
- 实现短信验证码发送和验证功能
- 增加表单验证逻辑，确保用户输入的密码一致且符合要求- 添加重置密码接口调用，完成密码重置流程
master
liutong 10 months ago
parent
bbb3a35580
commit
bd22acebd4
2 changed files with 200 additions and 39 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      api/apiRoute.js
  2. 232
      pages/student/login/forgot.vue

7
api/apiRoute.js
View File

@ -88,6 +88,13 @@ export default {
return res;
})
},
//公共端-忘记密码-通过短信验证码进行密码重置(学生/员工通用)
common_forgetPassword(data = {}) {
let url = '/common/forgetPassword'
return http.post(url, data).then(res => {
return res;
})
},

232
pages/student/login/forgot.vue
View File

@ -1,55 +1,99 @@
<template>
<view>
<view class="title">
<view :class="{'green-text': tset_style === 1}">1.验证手机号码</view>
<view :class="{'green-text': tset_style === 2}">2.设置新密码</view>
<view :class="{'green-text': titleIndex === 1}" @click="changeTitle(1)">1.验证手机号码</view>
<view :class="{'green-text': titleIndex === 2}" @click="changeTitle(2)">2.设置新密码</view>
</view>
<view :style="{'background-color':'#fff','width':'100%','height':'100vh' }">
<view style="width: 95%;height: 30rpx;"></view>
<view v-if="tset_style == 1">
<view style="width: 95%;margin:30rpx auto;">
<fui-input borderTop placeholder="请输入手机号" v-model="user" @input="input"
backgroundColor="#f2f2f2"></fui-input>
</view>
<view style="width: 95%;margin: auto;">
<fui-input borderTop :padding="['20rpx','32rpx']" v-model="code" placeholder="请输入短信验证码" @input="input"
backgroundColor="#f2f2f2">
<fui-countdown-verify ref="fui_cdv" @send="sendCode"></fui-countdown-verify>
</fui-input>
</view>
</view>
<view v-if="tset_style == 2">
<view style="width: 95%;margin:30rpx auto;">
<fui-input borderTop placeholder="请设置6-20位新的登录密码" v-model="user" @input="input"
backgroundColor="#f2f2f2"></fui-input>
</view>
<view style="width: 95%;margin: auto;">
<fui-input borderTop :padding="['20rpx','32rpx']" v-model="code" placeholder="请再次输入新的登录密码" @input="input"
backgroundColor="#f2f2f2">
</fui-input>
</view>
</view>
<view style="width: 95%;margin:60rpx auto;">
<fui-button background="#00be8c" radius="5rpx" @click="nextStep" v-if="tset_style == 1">下一步</fui-button>
<fui-button background="#00be8c" radius="5rpx" @click="submit" v-if="tset_style == 2">提交</fui-button>
</view>
<view style="width: 95%;height: 30rpx;"></view>
<view v-if="titleIndex == 1">
<view style="width: 95%;margin:30rpx auto;">
<fui-input borderTop placeholder="请输入手机号" v-model="formData.phone" @input="input"
backgroundColor="#f2f2f2"></fui-input>
</view>
<view style="width: 95%;margin: auto;">
<fui-input borderTop :padding="['20rpx','32rpx']" v-model="formData.code" placeholder="请输入短信验证码" @input="input"
backgroundColor="#f2f2f2">
<fui-countdown-verify ref="fui_cdv" @send="sendCode"></fui-countdown-verify>
</fui-input>
</view>
<view style="width: 95%;margin: auto; margin-top: 30rpx;" @click="openPicker()">
<fui-form-item label="" arrow highlight background="#f2f2f2">
<input class="fui-page__input" v-model="formData.user_type_name" placeholder="请选择用户类型" placeholder-style="color:#ccc;" disabled/>
</fui-form-item>
</view>
</view>
<view v-if="titleIndex == 2">
<view style="width: 95%;margin:30rpx auto;">
<fui-input borderTop placeholder="请设置6-20位新的登录密码" v-model="formData.password" @input="input"
backgroundColor="#f2f2f2"></fui-input>
</view>
<view style="width: 95%;margin: auto;">
<fui-input borderTop :padding="['20rpx','32rpx']" v-model="formData.password_2" placeholder="请再次输入新的登录密码" @input="input"
backgroundColor="#f2f2f2">
</fui-input>
</view>
</view>
<view style="width: 95%;margin:60rpx auto;">
<fui-button background="#00be8c" radius="5rpx" @click="nextStep" v-if="titleIndex == 1">下一步</fui-button>
<fui-button background="#00be8c" radius="5rpx" @click="submit" v-if="titleIndex == 2">提交</fui-button>
</view>
</view>
<!-- 选择器 -->
<fui-picker
:linkage="true"
:options="picker_options"
:layer="1"
:show="picker_show"
@change="changeCicker"
@cancel="cancelCicker">
</fui-picker>
</view>
</template>
<script>
import apiRoute from '@/api/apiRoute.js';
export default {
data() {
return {
code: '',
user: '',
tset_style: 1,
}
},
onLoad() {
//下拉选择器相关
picker_show:false,//是否展示选择器
picker_options:[
{
text:'学员',
value:'customer',
},
{
text:'员工',
value:'personnel',
}
],//下拉选择器数据
//重置密码-表单数据
formData: {
phone: '',//手机号
code: '',//短信验证码
code_type: 'editPassword',//短信验证码类型(发送/验证 短信验证码的类型)|修改密码=editPassword
password: '',//第一次密码
password_2: '',//第二次密码
user_type: '',//用户类型|customer=学生|personnel=员工(销售/教师)
user_type_name: '',//用户类型名称|customer=学生|personnel=员工(销售/教师)
},
titleIndex:1,//状态栏类型|1=验证手机号码|2=设置密码
}
},
onLoad() {},
methods: {
//发送手机验证码
sendCode() {
//延时为了效果展示
setTimeout(() => {
@ -59,9 +103,119 @@
this.$refs.fui_cdv && this.$refs.fui_cdv.success()
}, 800)
},
nextStep(){
this.tset_style = 2
}
//监听-选择器-选择项改变
changeCicker(e){
this.formData.user_type = e.value
this.formData.user_type_name = e.text
this.cancelCicker()
},
//打开选择器
openPicker(){
this.picker_show = true
},
//取消选择器
cancelCicker(){
this.picker_show = false
},
//下一步
async nextStep(){
//验证验证码和手机号是否填写
if(!this.formData.code){
uni.showToast({
title: '请输入短信验证码',
icon: 'none'
})
return
}
if(!this.formData.phone){
uni.showToast({
title: '请输入手机号',
icon: 'none'
})
return
}
if(!this.formData.user_type){
uni.showToast({
title: '请选择用户类型',
icon: 'none'
})
return
}
this.titleIndex = 2
},
//表单验证
async validateForm(formData) {
// 遍历表单对象的每个属性，检查是否有空值
if(!formData.phone){
uni.showToast({
title: `请填写手机号`,
icon: 'none'
});
this.changeTitle(1)
return false
}
if(!formData.user_type){
uni.showToast({
title: `请选择用户类型`,
icon: 'none'
});
this.changeTitle(1)
return false
}
if(!formData.code){
uni.showToast({
title: `请填写短信验证码`,
icon: 'none'
});
this.changeTitle(1)
return false
}
if(!formData.password || formData.password != formData.password_2){
uni.showToast({
title: `两次密码不一致`,
icon: 'none'
});
this.changeTitle(2)
return false
}
return true;
},
//提交
async submit(){
let params = {...this.formData}
let res_validateForm = await this.validateForm(params);//表单验证
if(!res_validateForm){
return
}
let res = await apiRoute.common_forgetPassword(params);//重置密码
if(res.code != 1){
uni.showToast({
title: res.msg,
icon: 'none'
})
return
}
uni.showToast({
title: res.msg,
icon: 'success'
})
//延迟1s执行
setTimeout(() => {
//跳转页面-登陆页
uni.navigateTo({
url: `/pages/student/login/login`
})
}, 1000)
},
//切换标题
changeTitle(index){
this.titleIndex = index
},
}
}
</script>

Write Preview
Loading…
Cancel
Save