Skip to content

S
source-trace-manage
Commit 40a8d9a8 authored by chenqikuai's avatar chenqikuai
Browse files
Options

1

parent e7223d8e
Hide whitespace changes
Inline Side-by-side
Showing with 1003 additions and 7 deletions
package-lock.json
View file @ 40a8d9a8
......@@ -894,6 +894,11 @@
}
}
},
"dom-to-image": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/dom-to-image/-/dom-to-image-2.6.0.tgz",
"integrity": "sha512-Dt0QdaHmLpjURjU7Tnu3AgYSF2LuOmksSGsUcE6ItvJoCWTBEmiMXcqBdNSAm9+QbbwD7JMoVsuuKX6ZVQv1qA=="
},
"domelementtype": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
......
package.json
View file @ 40a8d9a8
......@@ -18,6 +18,7 @@
"axios": "^0.26.1",
"comlink": "^4.3.1",
"crypto-js": "^4.1.1",
"dom-to-image": "^2.6.0",
"element-plus": "^2.1.9",
"js-md5": "^0.7.3",
"js-sha256": "^0.9.0",
......
src/App.vue
View file @ 40a8d9a8
......@@ -24,3 +24,7 @@ onMounted(async () => {
<globalMount />
</ElConfigProvider>
</template>
<style lang="scss">
@import "./components/Form/Collect/style.scss";
</style>
src/components/Form/Collect/CollectEmail.vue 0 → 100644
View file @ 40a8d9a8
<template>
<div class="collect-form">
<div class="tip">
{{ mode === "change" ? "当前登录邮箱: " : "" }}
<span v-if="mode === 'change'" class="highlight">{{ email }}</span>
你正在{{ mode === "set" ? "绑定" : "修改" }}登录邮箱，请输入邮箱完成{{
mode === "set" ? "绑定" : "修改"
}}，完成{{ mode === "set" ? "绑定" : "修改" }}后，你可使用此邮箱进行登录
</div>
<ElForm :rules="rules" :model="formModel" ref="formRef">
<CustomizeFormItem prop="email">
<syDialogInput
style="width: 100%"
v-model:value="formModel.email"
maxLength="11"
placeholder="请输入邮箱"
></syDialogInput>
</CustomizeFormItem>
</ElForm>
</div>
</template>
<script setup lang="ts">
import { syDialogInput } from "cqk-sy-ui";
import { ref, watch } from "vue";
import { ElForm } from "element-plus";
import CustomizeFormItem from "../CustomizeFormItem.vue";
import {} from "@/views/userCenter/PersonVerify/config";
const props = defineProps<{
/**set设置，第一次设置密码。change修改，密码已设置。 */
mode: "change" | "set";
email?: string;
}>();
const formRef = ref<InstanceType<typeof ElForm>>();
const formModel = ref({
email: "",
});
const emit = defineEmits(["collect"]);
watch(
() => formModel.value.email,
() => {
formRef.value?.validate((isValid) => {
emit("collect", {
value: formModel.value.email,
isValid,
});
});
}
);
const rules = {
email: [
{
required: true,
message: "请输入邮箱号",
trigger: "blur",
},
{
// validator: ,
trigger: "blur",
},
],
};
</script>
<style></style>
src/components/Form/Collect/CollectPhone.vue 0 → 100644
View file @ 40a8d9a8
<template>
<div class="collect-form">
<div class="tip">
{{ mode === "change" ? "当前登录手机: " : "" }}
<span v-if="mode === 'change'" class="highlight">{{ phone }}</span>
你正在{{ mode === "set" ? "绑定" : "修改" }}手机号，请输入手机号完成{{
mode === "set" ? "绑定" : "修改"
}}，完成{{ mode === "set" ? "绑定" : "修改" }}后，你可使用此手机号进行登录
</div>
<ElForm :rules="rules" :model="formModel" ref="formRef">
<CustomizeFormItem prop="phone">
<syDialogInput
style="width: 100%"
:value="formModel.phone"
@update:value="formModel.phone = $event.replace(/[^0-9]+/g, '')"
maxLength="11"
placeholder="请输入手机号"
></syDialogInput>
</CustomizeFormItem>
</ElForm>
</div>
</template>
<script setup lang="ts">
import { syDialogInput } from "cqk-sy-ui";
import { ref, watch } from "vue";
import { ElForm } from "element-plus";
import CustomizeFormItem from "../CustomizeFormItem.vue";
import { checkPhone } from "@/views/userCenter/PersonVerify/config";
const props = defineProps<{
/**set设置，第一次设置密码。change修改，密码已设置。 */
mode: "change" | "set";
phone?: string;
}>();
const formRef = ref<InstanceType<typeof ElForm>>();
const formModel = ref({
phone: "",
});
const emit = defineEmits(["collect"]);
watch(
() => formModel.value.phone,
() => {
if (formModel.value.phone.length === 11) {
formRef.value?.validate((isValid) => {
emit("collect", {
value: formModel.value.phone,
isValid,
});
});
} else {
emit("collect", {
value: formModel.value.phone,
isValid: false,
});
}
}
);
const rules = {
phone: [
{
required: true,
message: "请输入手机号",
trigger: "blur",
},
{
validator: checkPhone,
trigger: "blur",
},
],
};
</script>
<style></style>
src/components/Form/Collect/CollectPwd.vue 0 → 100644
View file @ 40a8d9a8
<template>
<div class="collect-form">
<div class="tip">
密码仅可由数字、英文字母或英文符号组成，且需包含其中至少两种类型，长度不少于
6-20位数字
</div>
<ElForm :rules="rules" :model="formModel" ref="formRef">
<CustomizeFormItem prop="pwd1">
<syDialogInput
type="password"
style="width: 100%"
v-model:value="formModel.pwd1"
placeholder="请输入密码"
></syDialogInput>
</CustomizeFormItem>
<CustomizeFormItem prop="pwd2">
<syDialogInput
type="password"
style="width: 100%"
v-model:value="formModel.pwd2"
placeholder="再次输入密码"
></syDialogInput>
</CustomizeFormItem>
</ElForm>
</div>
</template>
<script setup lang="ts">
import { syDialogInput } from "cqk-sy-ui";
import { inject, ref, watch } from "vue";
import { ElForm, FormItemProp } from "element-plus";
import CustomizeFormItem from "../CustomizeFormItem.vue";
const formRef = ref<InstanceType<typeof ElForm>>();
const formModel = ref({
pwd1: "",
pwd2: "",
});
const emit = defineEmits(["collect"]);
function testPwd(str: string) {
/**密码仅可由数字、英文字母或英文符号组成，且需包含其中至少两种类型*/
const pattern =
/^[0-9a-z\~\`\!\@\#\$\%\^\&\*\(\)\-\_\+\{\}\[\]\;\'\"\:\,\.\/\<\>\?\=\|]*$/gi;
const p1 = /[0-9]+/gi;
const p2 = /[a-z]+/gi;
const p3 =
/[\~\`\!\@\#\$\%\^\&\*\(\)\-\_\+\{\}\[\]\;\'\"\:\,\.\/\<\>\?\=\|]+/gi;
return (
pattern.test(str) &&
[p1.test(str), p2.test(str), p3.test(str)].filter((i) => i).length >= 2
);
}
watch(
() => [formModel.value.pwd1, formModel.value.pwd2],
() => {
emit("collect", {
value: formModel.value.pwd2,
isValid:
formModel.value.pwd1 === formModel.value.pwd2 &&
testPwd(formModel.value.pwd1),
});
}
);
const rules = {
pwd1: [
{
required: true,
message: "请输入密码",
trigger: "blur",
},
{
min: 6,
max: 20,
message: "密码长度不少于6-20位数字",
},
{
validator: (rule: any, value: any, cb: any) => {
if (!testPwd(value)) {
cb(
"密码仅可由数字、英文字母或英文符号组成，且需包含其中至少两种类型"
);
} else if (formModel.value.pwd2 !== "") {
formRef.value?.validateField("pwd2");
}
cb();
},
trigger: "blur",
},
],
pwd2: [
{
required: true,
message: "请输入密码",
trigger: "blur",
},
{
min: 6,
max: 20,
message: "密码长度不少于6-20位数字",
},
{
validator: (rule: any, value: any, cb: any) => {
if (!testPwd(value))
cb(
"密码仅可由数字、英文字母或英文符号组成，且需包含其中至少两种类型"
);
else if (value !== formModel.value.pwd1) cb("请输入相同的密码");
else cb();
},
trigger: "blur",
},
],
};
</script>
<style></style>
src/components/Form/Collect/CollectVerificationCode.vue 0 → 100644
View file @ 40a8d9a8
<template>
<div class="collect-form">
<div class="tip">
请输入发送至
<span class="highlight">
{{ target }}
</span>
的6位验证码，有效期 10 分钟。如未收到，请尝试重新获取验证码。
</div>
<ElForm :rules="rules" :model="formModel" ref="formRef">
<CustomizeFormItem prop="verifyInput" :error="error">
<ul
class="input-show"
@click="focusInput"
:class="{ 'has-error': errorTip !== '' }"
>
<li
v-for="item in 6"
:class="{
active: Number(item) === formModel.verifyInput.length + 1,
}"
:key="item"
>
{{ formModel.verifyInput[item - 1] }}
</li>
</ul>
<input
@input="inputVerify"
ref="verifyInputRef"
type="text"
v-model="formModel.verifyInput"
class="verify-input"
maxlength="6"
/>
</CustomizeFormItem>
</ElForm>
<div class="button-container" style="color: #b6b5ba">
<div
v-if="countDown === 60"
class="cursor-pointer"
@click="handleClickSendVerifyCode"
>
获取验证码
</div>
<span v-else>{{ countDown }}后可重新获取验证码</span>
</div>
</div>
</template>
<script setup lang="ts">
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
import { ElForm } from "element-plus";
import CustomizeFormItem from "../CustomizeFormItem.vue";
const props = defineProps<{
target: string;
fnSendVerificationCode: () => Promise<any>;
}>();
const verifyInputRef = ref<HTMLInputElement>();
const formRef = ref<InstanceType<typeof ElForm>>();
const errorTip = ref("");
const countDown = ref(60);
const loading = ref(false);
const emit = defineEmits(["collect"]);
let t = NaN;
const formModel = ref({
verifyInput: "",
});
const error = ref("");
let mark_error = 1;
const setError = (str: string) => {
error.value = str + " ".repeat(mark_error);
console.log(error.value.length);
mark_error = mark_error === 1 ? 2 : 1;
};
defineExpose({
setError,
setCode: (str: string) => {
formModel.value.verifyInput = str;
},
});
const rules = {
phone: [
{
required: true,
message: "请输入验证码",
},
{
validator: (rule: any, value: any, callback: any) => {
if (value.length !== 6) {
callback("请输入6位验证码");
} else {
callback();
}
},
trigger: "blur",
},
],
};
const handleClickSendVerifyCode = async () => {
if (loading.value) return;
loading.value = true;
await props.fnSendVerificationCode();
loading.value = false;
countDown.value--;
t = window.setInterval(() => {
countDown.value--;
if (countDown.value === 0) {
window.clearInterval(t);
countDown.value = 60;
}
}, 1000);
};
const focusInput = () => {
verifyInputRef.value?.focus();
};
onMounted(() => {
handleClickSendVerifyCode();
nextTick(focusInput);
});
onBeforeUnmount(() => {
window.clearInterval(t);
});
const inputVerify = () => {
if (errorTip.value === "") return;
errorTip.value = "";
};
watch(
() => formModel.value.verifyInput,
(newV) => {
formRef.value?.clearValidate();
emit("collect", {
value: newV,
isValid: newV.length === 6,
});
}
);
</script>
<style lang="scss" scoped>
.tip {
font-size: 14px;
font-weight: 400;
color: #8e8e8e;
}
.verify-input {
position: absolute;
z-index: -999;
width: 0;
border: none;
}
.el-form-item.is-error .input-show {
li {
border-color: #ff6268;
}
}
.input-show {
display: flex;
margin-top: 20px;
margin-bottom: 11px;
li {
width: 45px;
height: 45px;
border-radius: 4px;
border: solid 1px var(--sy-gray);
margin-right: 15px;
flex-shrink: 0;
font-size: 20px;
font-weight: 500;
color: black;
line-height: 45px;
text-align: center;
&.active {
border-color: var(--sy-blue);
}
}
& > li:nth-child(3) {
margin-right: 57px;
position: relative;
overflow: visible;
&:after {
width: 8px;
border-bottom: 1px solid var(--sy-gray);
position: absolute;
right: -33px;
top: 20px;
content: " ";
}
}
}
</style>
src/components/Form/Collect/style.scss 0 → 100644
View file @ 40a8d9a8
.collect-form {
.tip {
width: 396px;
height: 56px;
font-size: 14px;
font-weight: 400;
color: #818181;
.highlight {
color: var(--sy-black);
font-weight: bold;
}
}
}
src/components/Form/CustomizeFormItem.vue
View file @ 40a8d9a8
......@@ -14,7 +14,12 @@
</slot>
</label>
</div>
<ElFormItem label="" :prop="prop" style="margin-bottom: 25px">
<ElFormItem
label=""
:prop="prop"
style="margin-bottom: 25px"
:error="error"
>
<slot></slot>
</ElFormItem>
</div>
......@@ -31,6 +36,7 @@ const props = defineProps<{
label?: string;
rules?: any;
required?: boolean;
error?: string;
}>();
const isRequried = computed(() => {
......
src/service/Api.service.ts
View file @ 40a8d9a8
......@@ -34,6 +34,8 @@ export function editPhone(info: object) {
type: "post",
url: GO_URLS.setPhone,
params: info,
}, {
doNotToastErr: true
});
}
......
src/views/userCenter/PersonVerify/config.ts
View file @ 40a8d9a8
......@@ -14,7 +14,7 @@ let checkCard = (rule: any, value: any, callback: any) => {
else callback();
};
// 校验手机号
let checkPhone = (rule: any, value: any, callback: any) => {
export let checkPhone = (rule: any, value: any, callback: any) => {
const checkReg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
if (!checkReg.test(value)) callback(new Error("手机号格式不正确！"));
else callback();
......
src/views/userCenter/components/Secutiry/ChangeEmailDialog/index.vue 0 → 100644
View file @ 40a8d9a8
<template>
<syCommonDialog
:visible="visible"
type="element"
:elementDialogProps="{
title: getTitle(),
}"
showMask
@closePopup="$emit('update:visible', false)"
>
<div v-if="visible">
<CollectPhone
v-if="currentStep === eStep.phoneInput"
:mode="mode"
:phone="globalState.userInfos.phone"
@collect="handlePhoneCollect"
></CollectPhone>
<CollectVerificationCode
v-if="currentStep === eStep.oldPhoneVerifyInput"
ref="oldCodeRef"
:target="globalState.userInfos.phone || globalState.userInfos.email"
:fn-send-verification-code="
() => {
if (globalState.userInfos.phone) {
return sendSms({
phone: globalState.userInfos.phone,
template_id: 3,
});
} else {
return sendSms({
email: globalState.userInfos.email,
template_id: 3,
});
}
}
"
@collect="oldCodeStatus = $event"
></CollectVerificationCode>
<CollectVerificationCode
v-if="currentStep === eStep.newPhoneVerifyInput"
ref="newCodeRef"
:target="phoneStatus.value"
:fn-send-verification-code="
() => {
return sendSms({
phone: phoneStatus.value,
template_id: 3,
});
}
"
@collect="newCodeStatus = $event"
></CollectVerificationCode>
<syButton
mode="elementBtn"
type="primary"
:disabled="getDisableStatus"
style="width: 100%; margin-top: 38px"
@click="handleClickConfirm"
>下一步</syButton
>
</div>
</syCommonDialog>
</template>
<script setup lang="ts">
import { syCommonDialog, syButton } from "cqk-sy-ui";
import CollectVerificationCode from "@/components/Form/Collect/CollectVerificationCode.vue";
import { computed, ref } from "vue";
import CollectPhone from "../../../../../components/Form/Collect/CollectPhone.vue";
import { globalState } from "@/store/state";
import { checkOldPhone, editPhone, sendSms } from "@/service/Api.service";
import { ElMessage } from "element-plus";
const props = defineProps<{
visible: boolean;
}>();
const emit = defineEmits(["update:visible", "update"]);
const mode = computed(() => {
if (globalState.userInfos.phone === "") {
return "set";
} else {
return "change";
}
});
enum eStep {
phoneInput,
oldPhoneVerifyInput,
newPhoneVerifyInput,
}
const oldCodeRef = ref<InstanceType<typeof CollectVerificationCode>>();
const newCodeRef = ref<InstanceType<typeof CollectVerificationCode>>();
const currentStep = ref(eStep.phoneInput);
const phoneStatus = ref({
isValid: false,
value: "",
});
const oldCodeStatus = ref({
isValid: false,
value: "",
});
const newCodeStatus = ref({
isValid: false,
value: "",
});
const random_token = ref("");
const getDisableStatus = computed(() => {
if (currentStep.value === eStep.phoneInput) {
return !phoneStatus.value.isValid;
} else if (currentStep.value === eStep.oldPhoneVerifyInput) {
return !oldCodeStatus.value.isValid;
} else if (currentStep.value === eStep.newPhoneVerifyInput) {
return !newCodeStatus.value.isValid;
}
});
const handleClickConfirm = async () => {
if (currentStep.value === eStep.phoneInput) {
currentStep.value = eStep.oldPhoneVerifyInput;
} else if (currentStep.value === eStep.oldPhoneVerifyInput) {
const res = await checkOldPhone({
code: oldCodeStatus.value.value,
code_type: 0,
phone: globalState.userInfos.phone,
});
if (res?.code === 200) {
random_token.value = res.data.random_token;
currentStep.value = eStep.newPhoneVerifyInput;
} else {
oldCodeRef.value?.setError(res?.msg!);
}
} else if (currentStep.value === eStep.newPhoneVerifyInput) {
const res = await editPhone({
code: newCodeStatus.value.value,
new_phone: phoneStatus.value.value,
random_token: random_token.value,
});
if (res?.code === 200) {
emit("update:visible", false);
emit("update");
ElMessage.success("修改成功");
} else {
newCodeRef.value?.setError(res?.msg!);
}
}
};
const getTitle = () => {
if (currentStep.value === eStep.phoneInput) {
if (mode.value === "set") {
return "绑定手机";
} else {
return "修改手机";
}
} else if (currentStep.value === eStep.oldPhoneVerifyInput) {
return "输入验证码";
} else if (currentStep.value === eStep.newPhoneVerifyInput) {
return "输入验证码";
}
};
const handlePhoneCollect = (data: { value: string; isValid: boolean }) => {
phoneStatus.value = data;
};
</script>
<style></style>
src/views/userCenter/components/Secutiry/ChangePhoneDialog/index.vue 0 → 100644
View file @ 40a8d9a8
<template>
<syCommonDialog
:visible="visible"
type="element"
:elementDialogProps="{
title: getTitle(),
}"
showMask
@closePopup="$emit('update:visible', false)"
>
<div v-if="visible">
<CollectPhone
v-if="currentStep === eStep.phoneInput"
:mode="mode"
:phone="globalState.userInfos.phone"
@collect="handlePhoneCollect"
></CollectPhone>
<CollectVerificationCode
v-if="currentStep === eStep.oldPhoneVerifyInput"
ref="oldCodeRef"
:target="globalState.userInfos.phone || globalState.userInfos.email"
:fn-send-verification-code="
() => {
if (globalState.userInfos.phone) {
return sendSms({
phone: globalState.userInfos.phone,
template_id: 3,
});
} else {
return sendSms({
email: globalState.userInfos.email,
template_id: 3,
});
}
}
"
@collect="oldCodeStatus = $event"
></CollectVerificationCode>
<CollectVerificationCode
v-if="currentStep === eStep.newPhoneVerifyInput"
ref="newCodeRef"
:target="phoneStatus.value"
:fn-send-verification-code="
() => {
return sendSms({
phone: phoneStatus.value,
template_id: 3,
});
}
"
@collect="newCodeStatus = $event"
></CollectVerificationCode>
<syButton
mode="elementBtn"
type="primary"
:disabled="getDisableStatus"
style="width: 100%; margin-top: 38px"
@click="handleClickConfirm"
>下一步</syButton
>
</div>
</syCommonDialog>
</template>
<script setup lang="ts">
import { syCommonDialog, syButton } from "cqk-sy-ui";
import CollectVerificationCode from "@/components/Form/Collect/CollectVerificationCode.vue";
import { computed, ref } from "vue";
import CollectPhone from "../../../../../components/Form/Collect/CollectPhone.vue";
import { globalState } from "@/store/state";
import { checkOldPhone, editPhone, sendSms } from "@/service/Api.service";
import { ElMessage } from "element-plus";
const props = defineProps<{
visible: boolean;
}>();
const emit = defineEmits(["update:visible", "update"]);
const mode = computed(() => {
if (globalState.userInfos.phone === "") {
return "set";
} else {
return "change";
}
});
enum eStep {
phoneInput,
oldPhoneVerifyInput,
newPhoneVerifyInput,
}
const oldCodeRef = ref<InstanceType<typeof CollectVerificationCode>>();
const newCodeRef = ref<InstanceType<typeof CollectVerificationCode>>();
const currentStep = ref(eStep.phoneInput);
const phoneStatus = ref({
isValid: false,
value: "",
});
const oldCodeStatus = ref({
isValid: false,
value: "",
});
const newCodeStatus = ref({
isValid: false,
value: "",
});
const random_token = ref("");
const getDisableStatus = computed(() => {
if (currentStep.value === eStep.phoneInput) {
return !phoneStatus.value.isValid;
} else if (currentStep.value === eStep.oldPhoneVerifyInput) {
return !oldCodeStatus.value.isValid;
} else if (currentStep.value === eStep.newPhoneVerifyInput) {
return !newCodeStatus.value.isValid;
}
});
const handleClickConfirm = async () => {
if (currentStep.value === eStep.phoneInput) {
currentStep.value = eStep.oldPhoneVerifyInput;
} else if (currentStep.value === eStep.oldPhoneVerifyInput) {
const res = await checkOldPhone({
code: oldCodeStatus.value.value,
code_type: 0,
phone: globalState.userInfos.phone,
});
if (res?.code === 200) {
random_token.value = res.data.random_token;
currentStep.value = eStep.newPhoneVerifyInput;
} else {
oldCodeRef.value?.setError(res?.msg!);
}
} else if (currentStep.value === eStep.newPhoneVerifyInput) {
const res = await editPhone({
code: newCodeStatus.value.value,
new_phone: phoneStatus.value.value,
random_token: random_token.value,
});
if (res?.code === 200) {
emit("update:visible", false);
emit("update");
ElMessage.success("修改成功");
} else {
newCodeRef.value?.setError(res?.msg!);
}
}
};
const getTitle = () => {
if (currentStep.value === eStep.phoneInput) {
if (mode.value === "set") {
return "绑定手机";
} else {
return "修改手机";
}
} else if (currentStep.value === eStep.oldPhoneVerifyInput) {
return "输入验证码";
} else if (currentStep.value === eStep.newPhoneVerifyInput) {
return "输入验证码";
}
};
const handlePhoneCollect = (data: { value: string; isValid: boolean }) => {
phoneStatus.value = data;
};
</script>
<style></style>
src/views/userCenter/components/Secutiry/ChangePwdDialog/index.vue 0 → 100644
View file @ 40a8d9a8
<template>
<syCommonDialog
:visible="visible"
type="element"
:elementDialogProps="{
title: getTitle(),
}"
showMask
@closePopup="$emit('update:visible', false)"
>
<div v-if="visible">
<CollectVerificationCode
v-if="currentStep === eStep.verifyInput"
ref="codeRef"
:target="globalState.userInfos.phone || globalState.userInfos.email"
:fn-send-verification-code="
() => {
if (globalState.userInfos.phone) {
return sendSms({
phone: globalState.userInfos.phone,
template_id: 1,
});
} else {
return sendSms({
email: globalState.userInfos.email,
template_id: 1,
});
}
}
"
@collect="codeStatus = $event"
></CollectVerificationCode>
<CollectPwd
v-if="currentStep === eStep.pwdInput"
ref="pwdRef"
@collect="PwdStatus = $event"
></CollectPwd>
<syButton
mode="elementBtn"
type="primary"
:disabled="getDisableStatus"
style="width: 100%; margin-top: 38px"
@click="handleClickConfirm"
>下一步</syButton
>
</div>
</syCommonDialog>
</template>
<script setup lang="ts">
import { syCommonDialog, syButton } from "cqk-sy-ui";
import CollectVerificationCode from "@/components/Form/Collect/CollectVerificationCode.vue";
import { computed, inject, nextTick, onUnmounted, ref, watch } from "vue";
import { globalState } from "@/store/state";
import { editPassword, sendSms } from "@/service/Api.service";
import { ElMessage } from "element-plus";
import CollectPwd from "../../../../../components/Form/Collect/CollectPwd.vue";
const passwordStatus = inject<any>("passwordStatus");
const props = defineProps<{
visible: boolean;
}>();
const emit = defineEmits(["update:visible", "update"]);
enum eStep {
verifyInput,
pwdInput,
}
const codeRef = ref<InstanceType<typeof CollectVerificationCode>>();
const currentStep = ref(eStep.verifyInput);
watch(
() => props.visible,
() => {
currentStep.value = eStep.verifyInput;
PwdStatus.value.isValid = false;
codeStatus.value.isValid = false;
}
);
const PwdStatus = ref({
isValid: false,
value: "",
});
const codeStatus = ref({
isValid: false,
value: "",
});
const getDisableStatus = computed(() => {
if (currentStep.value === eStep.verifyInput) {
return !codeStatus.value.isValid;
} else {
return !PwdStatus.value.isValid;
}
});
const handleClickConfirm = async () => {
if (currentStep.value === eStep.verifyInput) {
currentStep.value = eStep.pwdInput;
} else if (currentStep.value === eStep.pwdInput) {
const res = await editPassword({
email: globalState.userInfos.email,
phone: globalState.userInfos.phone,
pwd: PwdStatus.value.value,
code: codeStatus.value.value,
code_type: globalState.userInfos.phone !== "" ? 0 : 1,
});
if (res?.code === 200) {
ElMessage.success(`密码${passwordStatus.status ? "修改" : "设置"}成功`);
emit("update:visible", false);
emit("update");
} else {
currentStep.value = eStep.verifyInput;
nextTick(() => {
codeRef.value?.setCode(codeStatus.value.value);
codeRef.value?.setError(res?.msg!);
});
}
}
};
const getTitle = () => {
if (currentStep.value === eStep.verifyInput) {
return globalState.userInfos.phone !== "" ? "验证手机号" : "验证邮箱";
} else if (currentStep.value === eStep.pwdInput) {
return "设置密码";
}
};
</script>
<style></style>
src/views/userCenter/components/Secutiry/index.vue
View file @ 40a8d9a8
......@@ -15,7 +15,9 @@
}}
</div>
</div>
<div class="blue-button">更换</div>
<div class="blue-button" @click="changePhoneDialogVisible = true">
更换
</div>
</div>
<div class="flex items-center h-[100px]">
<div>
......@@ -30,7 +32,7 @@
{{ infos.email === "" ? "未绑定" : "已绑定，绑定邮箱" + infos.email }}
</div>
</div>
<div class="blue-button">更换</div>
<!-- <div class="blue-button">更换</div> -->
</div>
<div class="flex items-center h-[100px]">
<div>
......@@ -50,18 +52,32 @@
}}
</div>
</div>
<div class="blue-button">更换</div>
<div class="blue-button" @click="changePwdDialogVisible = true">更换</div>
</div>
<ChangePhoneDialog
v-model:visible="changePhoneDialogVisible"
@update="$emit('ToUpdate')"
></ChangePhoneDialog>
<ChangePwdDialog
v-model:visible="changePwdDialogVisible"
@update="$emit('ToUpdate')"
></ChangePwdDialog>
</div>
</template>
<script setup lang="ts">
import Icon from "@/components/Icon/index.vue";
import { inject } from "vue";
const passwordStatus = inject<any>("passwordStatus");
import { inject, ref } from "vue";
import ChangePhoneDialog from "./ChangePhoneDialog/index.vue";
import ChangePwdDialog from "./ChangePwdDialog/index.vue";
defineProps<{
infos: any;
}>();
const passwordStatus = inject<any>("passwordStatus");
const changePhoneDialogVisible = ref(false);
const changePwdDialogVisible = ref(false);
const emit = defineEmits(["ToUpdate"]);
</script>
<style lang="scss" scoped>
......
src/views/userCenter/index.vue
View file @ 40a8d9a8
......@@ -20,6 +20,7 @@
<Secutiry
v-show="activedMenu === 'security'"
:infos="userInfo"
@ToUpdate="ToUpdate"
></Secutiry>
</ModuleContainer>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment