修改接口

src/api/types/profile.d.ts

@@ -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

src/i18n/locales/en-US/index.ts

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

src/i18n/locales/zh-CN/index.ts

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

src/views/profile/personalCenter/index.vue

@@ -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">
+            <template v-if="canBindEmail">
-              <el-button link type="primary" @click="showEditDialog('email')">{{ t('personalCenter.goToBind') }}</el-button>
+              <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')">
+            <template v-if="canBindMobile">
-              {{ t('personalCenter.bind') }}
+              <el-button v-if="!userInfo.mobile" link type="primary" @click="showEditDialog('mobile')">{{ t('personalCenter.bind') }}</el-button>
-            </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-form-item v-if="editField === 'mobile'" :label="editForm.label" prop="value" class="phone-item">
-          <el-input v-if="editField !== 'language'" v-model="editForm.value" :placeholder="`${t('common.pleaseInput')}${editForm.label}`"
+          <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({
+    const params: any = {
-      reg_type:  userStore.userInfo!.reg_type,
+      reg_type: userStore.userInfo!.reg_type,
-      [passwordForm.verifyType]: receiver,
       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>