From bd22acebd4e821fdda60e005b6a9a78669885bd2 Mon Sep 17 00:00:00 2001
From: liutong <836164388@qq.com>
Date: Fri, 30 May 2025 16:40:40 +0800
Subject: [PATCH] =?UTF-8?q?feat(student):=20=E5=AD=A6=E5=91=98=E5=BF=98?=
 =?UTF-8?q?=E8=AE=B0=E5=AF=86=E7=A0=81=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增忘记密码页面，包含验证手机号码和设置新密码两个步骤
- 添加用户类型选择功能，支持学员和员工两种类型
- 实现短信验证码发送和验证功能
- 增加表单验证逻辑，确保用户输入的密码一致且符合要求- 添加重置密码接口调用，完成密码重置流程
---
 api/apiRoute.js                |   7 +
 pages/student/login/forgot.vue | 232 +++++++++++++++++++++++++++------
 2 files changed, 200 insertions(+), 39 deletions(-)

diff --git a/api/apiRoute.js b/api/apiRoute.js
index 8fd04e3..db7a892 100644
--- a/api/apiRoute.js
+++ b/api/apiRoute.js
@@ -88,6 +88,13 @@ export default {
             return res;
         })
     },
+    //公共端-忘记密码-通过短信验证码进行密码重置(学生/员工通用)
+    common_forgetPassword(data = {}) {
+        let url = '/common/forgetPassword'
+        return http.post(url, data).then(res => {
+            return res;
+        })
+    },
 
 
 
diff --git a/pages/student/login/forgot.vue b/pages/student/login/forgot.vue
index d91ac04..f26877b 100644
--- a/pages/student/login/forgot.vue
+++ b/pages/student/login/forgot.vue
@@ -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>