yueyixin
/
foreign-admin-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改接口

This commit is contained in:
杨 2026-05-09 15:45:19 +08:00
parent 07a1214127
commit 28c86ad0c4
4 changed files with 101 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/api/types/profile.d.ts vendored
View File

@ -16,6 +16,7 @@ export interface EditForm {
label: string
value: string
code: string
countryCode?: string
}
// 密码表单类型
@ -35,6 +36,7 @@ export interface EditLangTypeParams {
export interface BindMobileParams {
mobile: string
code: string
mobile_area?: string
}
// 绑定邮箱参数类型
@ -53,6 +55,7 @@ export interface UpdatePwdByCaptchaParams {
reg_type: number
email?: string
mobile?: string
mobile_area?: string
code: string
login_password1: string
login_password2: string

1
src/i18n/locales/en-US/index.ts
View File

@ -39,6 +39,7 @@ export default {
bound: 'Bound',
goToBind: 'Go to bind',
bind: 'Bind',
rebind: 'Rebind',
modify: 'Modify',
bindEmail: 'Bind Email',
bindMobile: 'Bind Mobile',

1
src/i18n/locales/zh-CN/index.ts
View File

@ -39,6 +39,7 @@ export default {
bound: '已绑定',
goToBind: '去绑定',
bind: '绑定',
rebind: '重新绑定',
modify: '修改',
bindEmail: '绑定邮箱',
bindMobile: '绑定手机号',

117
src/views/profile/personalCenter/index.vue
View File

@ -29,8 +29,9 @@
<div class="info-item">
<span class="label">{{ t('personalCenter.email') }}</span>
<span class="value">{{ userInfo.email || t('personalCenter.notSet') }}</span>
<template v-if="!userInfo.email">
<el-button link type="primary" @click="showEditDialog('email')">{{ t('personalCenter.goToBind') }}</el-button>
<template v-if="canBindEmail">
<el-button v-if="!userInfo.email" link type="primary" @click="showEditDialog('email')">{{ t('personalCenter.goToBind') }}</el-button>
<el-button v-else link type="primary" @click="showEditDialog('email')">{{ t('personalCenter.rebind') }}</el-button>
</template>
<template v-else>
<el-tag type="success" size="small">{{ t('personalCenter.bound') }}</el-tag>
@ -40,9 +41,10 @@
<div class="info-item">
<span class="label">{{ t('personalCenter.mobile') }}</span>
<span class="value">{{ userInfo.mobile || t('personalCenter.notBound') }}</span>
<el-button v-if="!userInfo.mobile" link type="primary" @click="showEditDialog('mobile')">
{{ t('personalCenter.bind') }}
</el-button>
<template v-if="canBindMobile">
<el-button v-if="!userInfo.mobile" link type="primary" @click="showEditDialog('mobile')">{{ t('personalCenter.bind') }}</el-button>
<el-button v-else link type="primary" @click="showEditDialog('mobile')">{{ t('personalCenter.rebind') }}</el-button>
</template>
<template v-else>
<el-tag type="success" size="small">{{ t('personalCenter.bound') }}</el-tag>
</template>
@ -69,8 +71,21 @@
<Dialog :visible="dialogVisible" :title="dialogTitle" width="500px" @confirm="handleEditConfirm"
@cancel="handleEditDialogReset" @close="handleEditDialogReset">
<el-form ref="editFormRef" :model="editForm" :rules="getEditRules()" label-width="80px" label-position="top">
<el-form-item :label="editForm.label" prop="value">
<el-input v-if="editField !== 'language'" v-model="editForm.value" :placeholder="`${t('common.pleaseInput')}${editForm.label}`"
<el-form-item v-if="editField === 'mobile'" :label="editForm.label" prop="value" class="phone-item">
<el-select v-model="editForm.countryCode" :teleported="false" value-key="code" placeholder="国家"
size="large">
<el-option v-for="item in countryOptions" :key="item.code" :label="item.code" :value="item.code">
<div class="country-option">
<span class="country-name">{{ item.name }}</span>
<span class="country-code">{{ item.code }}</span>
</div>
</el-option>
</el-select>
<el-input v-model="editForm.value" :placeholder="`${t('common.pleaseInput')}${editForm.label}`"
size="large" />
</el-form-item>
<el-form-item v-else-if="editField !== 'language'" :label="editForm.label" prop="value">
<el-input v-model="editForm.value" :placeholder="`${t('common.pleaseInput')}${editForm.label}`"
size="large" />
</el-form-item>
@ -134,6 +149,7 @@ import { useUserStore } from '@/stores/modules/user';
import { useLanguageStore } from '@/stores/modules/language';
import { sendCaptcha, initCaptchaState, clearCaptchaTimer } from '@/utils/sendCaptcha';
import { codeRules } from '@/views/user/config/rules';
import { countryOptions } from '@/views/user/config/mock';
const { t, locale } = useI18n()
// 类型定义
@ -175,7 +191,7 @@ const passwordFormRef = ref<FormInstance>();
const editField = ref<string>('');
const dialogTitle = ref('');
const editForm = reactive<EditForm>({ label: '', value: '', code: '' });
const editForm = reactive<EditForm>({ label: '', value: '', code: '', countryCode: '+86' });
// 密码表单
const passwordForm = reactive<PasswordForm>({
@ -199,6 +215,18 @@ const pwdEmailCaptchaState = initCaptchaState('email');
const userStore = useUserStore();
const languageStore = useLanguageStore();
// 判断是否可以绑定/重新绑定邮箱
const canBindEmail = computed(() => {
return false
// return userStore.userInfo?.reg_type === 2; // 手机注册用户可以绑定/重新绑定邮箱
});
// 判断是否可以绑定/重新绑定手机号
const canBindMobile = computed(() => {
return false
// return userStore.userInfo?.reg_type === 1; // 邮箱注册用户可以绑定/重新绑定手机号
});
// 校验规则
const getEditRules = (): FormRules => {
const rules: FormRules = {};
@ -272,6 +300,7 @@ const fetchUserProfile = async () => {
const showEditDialog = (field: 'email' | 'mobile' | 'username') => {
editField.value = field;
editForm.code = '';
editForm.countryCode = '+86';
switch (field) {
case 'email':
editForm.label = t('personalCenter.email');
@ -280,7 +309,7 @@ const showEditDialog = (field: 'email' | 'mobile' | 'username') => {
break;
case 'mobile':
editForm.label = t('personalCenter.mobile');
editForm.value = userInfo.mobile;
editForm.value = '';
dialogTitle.value = userInfo.mobile ? t('personalCenter.rebindMobile') : t('personalCenter.bindMobile');
break;
case 'username':
@ -296,18 +325,28 @@ const showEditDialog = (field: 'email' | 'mobile' | 'username') => {
// 发送绑定验证码
const handleSendCaptcha = async () => {
const type = editField.value === 'email' ? 'email' : 'phone';
const receiver = editForm.value?.trim();
let receiver = editForm.value?.trim();
if (!receiver) {
ElMessage.warning(t('personalCenter.pleaseInputReceiverAccount'));
return;
}
// 如果是手机号，需要组合区号
if (type === 'phone') {
receiver = editForm.countryCode + receiver;
}
const currentState = type === 'email' ? emailCaptchaState : phoneCaptchaState;
await sendCaptcha(type, receiver, currentState, () => {
return userStore.sendCode({
const params: any = {
reg_type: userStore.userInfo!.reg_type,
[type === 'email' ? 'email' : 'mobile']: receiver,
type: type === 'email' ? 'transfer_code' : 'bindMobile_code'
});
};
if (type === 'email') {
params.email = receiver;
} else {
params.mobile = receiver;
params.mobile_area = editForm.countryCode;
}
return userStore.sendCode(params);
});
updateSendState();
};
@ -340,9 +379,10 @@ const handleEditConfirm = async () => {
userInfo.username = editForm.value;
}
if (editField.value === 'mobile') {
const params: BindMobileParams = { mobile: editForm.value, code: editForm.code };
const mobile = editForm.countryCode + editForm.value;
const params: BindMobileParams = { mobile, code: editForm.code, mobile_area: editForm.countryCode };
await bindMobileApi(params);
userInfo.mobile = editForm.value;
userInfo.mobile = mobile;
}
if (editField.value === 'email') {
const params: BindEmailParams = { email: editForm.value, code: editForm.code };
@ -389,7 +429,7 @@ const onVerifyTypeChange = () => {
// 发送修改密码验证码
const handleSendPwdCaptcha = async () => {
const type = passwordForm.verifyType === 'email' ? 'email' : 'phone';
const receiver = passwordForm.verifyType === 'email' ? userInfo.email : userInfo.mobile;
let receiver = passwordForm.verifyType === 'email' ? userInfo.email : userInfo.mobile;
if (!receiver) {
ElMessage.warning(t('personalCenter.pleaseInputVerifyAccount'));
return;
@ -397,11 +437,19 @@ const handleSendPwdCaptcha = async () => {
const currentState = passwordForm.verifyType === 'email' ? pwdEmailCaptchaState : pwdMobileCaptchaState;
await sendCaptcha(type, receiver, currentState, () => {
return userStore.sendCode({
reg_type: userStore.userInfo!.reg_type,
[passwordForm.verifyType]: receiver,
const params: any = {
reg_type: userStore.userInfo!.reg_type,
type: 'resetPass_code'
});
};
if (type === 'email') {
params.email = receiver;
} else {
params.mobile = receiver;
// 从手机号中提取区号（假设手机号格式为 +8613800138000）
const match = receiver.match(/^\+(\d{1,4})/);
params.mobile_area = match ? '+' + match[1] : '+86';
}
return userStore.sendCode(params);
});
updatePwdSendState();
};
@ -418,7 +466,7 @@ const handlePasswordConfirm = async () => {
await passwordFormRef.value.validate();
const params: UpdatePwdByCaptchaParams = {
reg_type: userStore.userInfo!.reg_type,
reg_type: userStore.userInfo!.reg_type,
email: passwordForm.verifyType === 'email' ? userInfo.email : undefined,
mobile: passwordForm.verifyType === 'mobile' ? userInfo.mobile : undefined,
code: passwordForm.code,
@ -426,6 +474,12 @@ const handlePasswordConfirm = async () => {
login_password2: passwordForm.login_password2
};
// 如果是手机验证，添加 mobile_area 参数
if (passwordForm.verifyType === 'mobile' && userInfo.mobile) {
const match = userInfo.mobile.match(/^\+(\d{1,4})/);
params.mobile_area = match ? '+' + match[1] : '+86';
}
await updatePwdByCaptchaApi(params);
passwordDialogVisible.value = false;
passwordFormRef.value.resetFields();
@ -581,4 +635,25 @@ onUnmounted(() => {
}
}
}
.phone-item {
:deep(.el-form-item__content) {
flex-wrap: nowrap;
}
.el-select {
width: 120px;
margin-right: 10px;
.country-option {
width: 120px;
display: flex;
justify-content: space-between;
}
:deep(.el-select-dropdown__item) {
padding: 0 16px 0 16px;
}
}
}
</style>