Jelajahi Sumber

修改更换手机号功能

hurx 1 hari lalu
induk
melakukan
a9c0c53527

+ 11 - 0
src/api/pc/enterprise/index.ts

@@ -57,6 +57,17 @@ export function changePhonenumber(data: any) {
   });
 }
 
+/**
+ * 获取验证码
+ */
+export function validateCode(data: any) {
+  return request({
+    url: '/customer/pcCustomer/validateCode', //更换手机号
+    method: 'put',
+    data: data
+  });
+}
+
 // ==================== 收货地址管理 ====================
 
 /**

+ 98 - 20
src/views/enterprise/securitySetting/changePhone.vue

@@ -56,9 +56,9 @@
               {{ countdown > 0 ? `${countdown}s后重发` : '发送验证码' }}
             </el-button>
           </el-form-item>
-          <el-form-item class="verify-checkbox">
+          <!-- <el-form-item class="verify-checkbox">
             <el-checkbox v-model="step1Form.verified">点击验证</el-checkbox>
-          </el-form-item>
+          </el-form-item> -->
         </el-form>
 
         <div class="step-actions">
@@ -109,10 +109,13 @@
 
 <script setup lang="ts">
 import { ref, reactive } from 'vue';
+import { useUserStore } from '@/store/modules/user';
+import { onPath } from '@/utils/siteConfig';
 import { Check, CircleCheckFilled, Phone } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
 import { useRoute } from 'vue-router';
-import { changePhonenumber } from '@/api/pc/enterprise/index';
+import { smsCode } from '@/api/breg/index';
+import { changePhonenumber, validateCode } from '@/api/pc/enterprise/index';
 const currentStep = ref(1);
 const route = useRoute();
 // 步骤1表单
@@ -123,7 +126,9 @@ const step1Form = reactive({
   verified: false
 });
 
-const countdown = ref(0);
+const codeText = ref<string>('发送验证码');
+const countdown = ref<number>(0);
+const timer = ref<any>(null);
 
 const step1Rules = {
   code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
@@ -137,6 +142,8 @@ const step2Form = reactive({
 });
 
 const newCountdown = ref(0);
+const newCodeText = ref<string>('发送验证码');
+const newTimer = ref<any>(null);
 
 const step2Rules = {
   newPhone: [
@@ -146,45 +153,108 @@ const step2Rules = {
   newCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
 };
 
-// 发送验证码(旧手机)
+// 发送验证码
 const handleSendCode = () => {
+  if (countdown.value > 0) return;
+  if (step1Form.phone) {
+    smsCode({ phonenumber: step1Form.phone }).then((res: any) => {
+      if (res.code == 200) {
+        ElMessage({
+          message: '验证码已发送',
+          type: 'success'
+        });
+        startCountdown();
+      }
+    });
+  } else {
+    ElMessage({
+      message: '请输入正确的手机号码',
+      type: 'warning'
+    });
+    return;
+  }
+};
+
+// 启动倒计时
+const startCountdown = () => {
   countdown.value = 60;
-  const timer = setInterval(() => {
+  codeText.value = `${countdown.value}s 后重新发送`;
+  timer.value = setInterval(() => {
     countdown.value--;
-    if (countdown.value <= 0) {
-      clearInterval(timer);
+    if (countdown.value > 0) {
+      codeText.value = `${countdown.value}s 后重新发送`;
+    } else {
+      clearInterval(timer.value);
+      timer.value = null;
+      codeText.value = '发送验证码';
     }
   }, 1000);
-  ElMessage.success('验证码已发送');
 };
 
-// 发送验证码(新手机)
+// 发送验证码
 const handleSendNewCode = () => {
-  if (!step2Form.newPhone) {
-    ElMessage.warning('请先输入新手机号码');
+  if (newCountdown.value > 0) return;
+  if (step2Form.newPhone) {
+    smsCode({ phonenumber: step2Form.newPhone }).then((res: any) => {
+      if (res.code == 200) {
+        ElMessage({
+          message: '验证码已发送',
+          type: 'success'
+        });
+        startCountdownNew();
+      }
+    });
+  } else {
+    ElMessage({
+      message: '请输入正确的手机号码',
+      type: 'warning'
+    });
     return;
   }
+};
+
+// 启动倒计时
+const startCountdownNew = () => {
   newCountdown.value = 60;
-  const timer = setInterval(() => {
+  newCodeText.value = `${newCountdown.value}s 后重新发送`;
+  newTimer.value = setInterval(() => {
     newCountdown.value--;
-    if (newCountdown.value <= 0) {
-      clearInterval(timer);
+    if (newCountdown.value > 0) {
+      newCodeText.value = `${newCountdown.value}s 后重新发送`;
+    } else {
+      clearInterval(newTimer.value);
+      newTimer.value = null;
+      newCodeText.value = '发送验证码';
     }
   }, 1000);
-  ElMessage.success('验证码已发送');
 };
 
 // 下一步
 const handleNextStep = async () => {
   const valid = await step1FormRef.value?.validate().catch(() => false);
   if (!valid) return;
+  try {
+    const submitData = {
+      purchasePhone: step1Form.phone,
+      code: step1Form.code
+    };
 
-  if (!step1Form.verified) {
-    ElMessage.warning('请先点击验证');
+    const res: any = await validateCode(submitData);
+    if (res.code === 200) {
+      currentStep.value = 2;
+    } else {
+      ElMessage.error(res.msg || '验证码验证失败');
+      return;
+    }
+  } catch (error) {
+    console.error('验证码验证失败:', error);
     return;
   }
 
-  currentStep.value = 2;
+  // if (!step1Form.verified) {
+  //   ElMessage.warning('请先点击验证');
+  //   return;
+  // }
 };
 
 // 提交
@@ -209,6 +279,14 @@ const handleSubmit = async () => {
     console.error('手机号修改失败:', error);
   }
 };
+
+const onlogout = () => {
+  useUserStore()
+    .logout()
+    .then(() => {
+      onPath('/login');
+    });
+};
 </script>
 
 <style scoped lang="scss">
@@ -216,6 +294,7 @@ const handleSubmit = async () => {
   background: #f5f5f5;
   min-height: 100%;
   padding: 0;
+  width: 100%;
 }
 
 // 面包屑
@@ -247,7 +326,6 @@ const handleSubmit = async () => {
 
 // 主体内容
 .change-content {
-  max-width: 800px;
   margin: 30px auto;
   padding: 30px 40px;
   background: #fff;

+ 11 - 0
src/views/enterprise/securitySetting/index.vue

@@ -120,11 +120,13 @@
 
 <script setup lang="ts">
 import { ref, reactive } from 'vue';
+import { useUserStore } from '@/store/modules/user';
 import { useRouter } from 'vue-router';
 import { ArrowLeft, OfficeBuilding, Grid } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
 import { changePwd, normalChangePwd } from '@/api/pc/enterprise/index';
 import { getCurrentUserInfo, updateComStaff } from '@/api/pc/organization/index';
+import { onPath } from '@/utils/siteConfig';
 
 const router = useRouter();
 
@@ -222,6 +224,7 @@ const handleSaveNormalPassword = async () => {
     const res: any = await normalChangePwd(submitData);
     if (res.code === 200) {
       ElMessage.success('密码修改成功');
+      onlogout();
     }
   } catch (error) {
     // console.error('修改密码失败:', error);
@@ -271,6 +274,14 @@ const handleSavePhone = async () => {
   ElMessage.success('手机号修改成功');
   phoneDialogVisible.value = false;
 };
+
+const onlogout = () => {
+  useUserStore()
+    .logout()
+    .then(() => {
+      onPath('/login');
+    });
+};
 onMounted(() => {
   getCurrentUser();
 });

+ 11 - 0
src/views/enterprise/securitySetting/resetPassword.vue

@@ -97,6 +97,8 @@ import { ElMessage } from 'element-plus';
 import { useRoute } from 'vue-router';
 import { changePwd } from '@/api/pc/enterprise/index';
 import { smsCode } from '@/api/breg/index';
+import { useUserStore } from '@/store/modules/user';
+import { onPath } from '@/utils/siteConfig';
 const currentStep = ref(1);
 const route = useRoute();
 
@@ -212,6 +214,7 @@ const handleSubmit = async () => {
     if (res.code === 200) {
       ElMessage.success('密码重置成功');
       currentStep.value = 3;
+      onlogout();
     } else {
       ElMessage.error(res.msg || '密码修改失败');
     }
@@ -219,6 +222,14 @@ const handleSubmit = async () => {
     console.error('修改密码失败:', error);
   }
 };
+
+const onlogout = () => {
+  useUserStore()
+    .logout()
+    .then(() => {
+      onPath('/login');
+    });
+};
 </script>
 
 <style scoped lang="scss">