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