feat:kyc认证界面中英适配

src/locales/langs/en-us.ts

@@ -545,7 +545,7 @@ const local: any = {
       Rechargeamount:'Recharge amount',
       Customization:'Customize',
       price:'price',
-      money:' yuan',
+      money:' ¥',
       truemoney:'Please select or enter the correct recharge amount',
       falseorder:'Failed to create an order, please try again!',
       setprice:'Please enter the amount',
@@ -707,7 +707,51 @@ const local: any = {
       selectPayment:'Payment',
       alipay:'Alipay',
       wxpay:'WeChat Pay'
-    }
+    },
+    kyc:{
+      drive:'Driving license',
+      pass:'Passport',
+      idcard:'ID card/Residence permit',
+      stu:'Student ID',
+      health:'Medical insurance card',
+      birth:'Birth certificate',
+      kycerror:'Failed to obtain certification status.',
+      support:'Only JPG/PNG/PDF format files are supported!',
+      file:'The file size must not exceed 5MB!',
+      picturesuc:'Upload successful!',
+      picturefal:'Upload failed, please try again!',
+      completeinfo:'Please fill in the complete information!',
+      upload:'Please upload the required documents!',
+      kycsubmit:'KYC certification application submitted successfully!',
+      submitfalse:'Submission failed, please try again!',
+      nocertified:'Unverified',
+      certifing:'Pending',
+      certified:'Verified',
+      rejected:'Rejected',
+      unstatus:'Unknown status',
+      kyctitle:'KYC real-name verification',
+      service:'According to the requirements of relevant laws and regulations, real-name authentication is required before using the service',
+      cerstatus:'Certification status',
+      cername:'Certified Name:',
+      certime:'Certification time:',
+      cerinfo:'Certification Information',
+      cerinfoservice:'Please fill in the real personal information, all information is only used for identity verification',
+      baseinfo:'Basic Information',
+      realname:'Real name',
+      realnameple:'Please enter your real name',
+      birthdate:'Date of Birth',
+      birthdateple:'Please select your date of birth.',
+      idinfo:'Document information',
+      idtype:'Document type',
+      idtypeple:'Please select the type of document.',
+      idphoto:'Identification photo',
+      uploadidphoto:'Upload the document photo.',
+      format:'It supports JPG/PNG/PDF format and is up to 5MB in size',
+      photopic:'Facial photograph',
+      uploadphotopic:'Upload facial photo.',
+      submitcer:'Submit for certification.',
+      previewimage:'Preview image',
+    },
   },
   form: {
     required: 'Cannot be empty',

src/locales/langs/zh-cn.ts

@@ -710,9 +710,50 @@ const local:any = {
       alipay:'支付宝支付',
       wxpay:'微信支付'
     },
-    package:{
+     kyc:{
-
+       drive:'驾驶证',
-    }
+       pass:'护照',
+       idcard:'身份证/居住证',
+       stu:'学生证',
+       health:'医保卡',
+       birth:'出生证明',
+       kycerror:'获取认证状态失败',
+       support:'只支持 JPG/PNG/PDF 格式文件！',
+       file:'文件大小不能超过 5MB！',
+       picturesuc:'上传成功！',
+       picturefal:'上传失败，请重试！',
+       completeinfo:'请填写完整信息！',
+       upload:'请上传所需文件！',
+       kycsubmit:'KYC 认证申请提交成功！',
+       submitfalse:'提交失败，请重试！',
+       nocertified:'未认证',
+       certifing:'认证中',
+       certified:'已认证',
+       rejected:'已拒绝',
+       unstatus:'未知状态',
+       kyctitle:'KYC 实名认证',
+       service:'根据相关法规要求，使用服务前需要完成实名认证',
+       cerstatus:'认证状态',
+       cername:'认证姓名：',
+       certime:'认证时间：',
+       cerinfo:'认证信息',
+       cerinfoservice:'请填写真实的个人信息，所有信息仅用于身份认证',
+       baseinfo:'基本信息',
+       realname:'真实姓名',
+       realnameple:'请输入真实姓名',
+       birthdate:'出生日期',
+       birthdateple:'请选择出生日期',
+       idinfo:'证件信息',
+       idtype:'证件类型',
+       idtypeple:'请选择证件类型',
+       idphoto:'证件照片',
+       uploadidphoto:'上传证件照片',
+       format:'支持 JPG/PNG/PDF 格式，大小不超过 5MB',
+       photopic:'面部照片',
+       uploadphotopic:'上传面部照片',
+       submitcer:'提交认证',
+       previewimage:'预览图片',
+     },
   },
   form: {
     required: '不能为空',

src/views/userInfo/kyc/index.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
-// import { useI18n } from 'vue-i18n';
 import { message, Upload } from 'ant-design-vue';
 import type { UploadProps } from 'ant-design-vue';
 import { LoadingOutlined, PlusOutlined } from '@ant-design/icons-vue';
 import type { Dayjs } from 'dayjs';
 import { fetchKYCStatus, submitKYCVerification, uploadFile } from '@/service/api/auth';
 import dayjs from 'dayjs';  // 导入 dayjs
+import { useI18n } from 'vue-i18n';
 
-// const { t } = useI18n();
+const { t } = useI18n();
 
 // KYC 状态
 const kycStatus = ref<Api.KYC.KYCStatus>('UNVERIFIED');
@@ -22,12 +22,12 @@ const kycInfo = ref<Partial<Api.KYC.KYCInfo>>({
 
 // 证件类型选项
 const idTypeOptions = [
-  { value: 1, label: '驾驶证' },
+  { value: 1, label: t('page.kyc.drive') },
-  { value: 2, label: '护照' },
+  { value: 2, label: t('page.kyc.pass') },
-  { value: 3, label: '身份证/居住证' },
+  { value: 3, label: t('page.kyc.idcard') },
-  { value: 4, label: '学生证' },
+  { value: 4, label: t('page.kyc.stu') },
-  { value: 5, label: '医保卡' },
+  { value: 5, label: t('page.kyc.health') },
-  { value: 6, label: '出生证明' }
+  { value: 6, label: t('page.kyc.birth') }
 ];
 
 // 表单数据
@@ -124,7 +124,7 @@ const getKYCStatus = async () => {
     }
   } catch (error) {
     console.error('Failed to fetch KYC status:', error);
-    message.error('获取认证状态失败');
+    message.error(t('page.kyc.kycerror'));
     // 发生错误时也设置默认值
     kycStatus.value = 'UNVERIFIED';
     kycInfo.value = {
@@ -141,12 +141,12 @@ const getKYCStatus = async () => {
 const handleIdCardUpload: UploadProps['beforeUpload'] = async (file) => {
   const isValidFormat = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'application/pdf';
   if (!isValidFormat) {
-    message.error('只支持 JPG/PNG/PDF 格式文件！');
+    message.error(t('page.kyc.support'));
     return Upload.LIST_IGNORE;
   }
   const isLt5M = file.size / 1024 / 1024 < 5;
   if (!isLt5M) {
-    message.error('文件大小不能超过 5MB！');
+    message.error(t('page.kyc.file'));
     return Upload.LIST_IGNORE;
   }
 
@@ -159,11 +159,11 @@ const handleIdCardUpload: UploadProps['beforeUpload'] = async (file) => {
     if (data) {
       formData.value.idCardFile = data.url;  // 存储文件 URL
       idCardFileObj.value = file;  // 存储文件对象
-      message.success('证件照片上传成功！');
+      message.success(t('page.kyc.picturesuc'));
     }
   } catch (error) {
     console.error('Failed to upload ID card:', error);
-    message.error('证件照片上传失败，请重试！');
+    message.error(t('page.kyc.picturefal'));
   } finally {
     idCardLoading.value = false;
   }
@@ -171,14 +171,14 @@ const handleIdCardUpload: UploadProps['beforeUpload'] = async (file) => {
 };
 
 const handlePhotoUpload: UploadProps['beforeUpload'] = async (file) => {
-  const isValidFormat = file.type === 'image/jpeg' || file.type === 'image/png';
+  const isValidFormat = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'application/pdf';
   if (!isValidFormat) {
-    message.error('只支持 JPG/PNG 格式图片！');
+    message.error(t('page.kyc.support'));
     return Upload.LIST_IGNORE;
   }
-  const isLt2M = file.size / 1024 / 1024 < 2;
+  const isLt5M = file.size / 1024 / 1024 < 5;
-  if (!isLt2M) {
+  if (!isLt5M) {
-    message.error('图片大小不能超过 2MB！');
+    message.error(t('page.kyc.file'));
     return Upload.LIST_IGNORE;
   }
 
@@ -191,11 +191,11 @@ const handlePhotoUpload: UploadProps['beforeUpload'] = async (file) => {
     if (data) {
       formData.value.photoFile = data.url;  // 存储文件 URL
       photoFileObj.value = file;  // 存储文件对象
-      message.success('面部照片上传成功！');
+      message.success(t('page.kyc.picturesuc'));
     }
   } catch (error) {
     console.error('Failed to upload photo:', error);
-    message.error('面部照片上传失败，请重试！');
+    message.error(t('page.kyc.picturefal'));
   } finally {
     photoLoading.value = false;
   }
@@ -206,11 +206,11 @@ const handlePhotoUpload: UploadProps['beforeUpload'] = async (file) => {
 const submitKYC = async () => {
   try {
     if (!formData.value.fullName || !formData.value.birthDate || !formData.value.idType) {
-      message.error('请填写完整信息！');
+      message.error(t('page.kyc.completeinfo'));
       return;
     }
     if (!formData.value.idCardFile || !formData.value.photoFile) {
-      message.error('请上传所需文件！');
+      message.error(t('page.kyc.upload'));
       return;
     }
 
@@ -225,11 +225,11 @@ const submitKYC = async () => {
       kycRequestStatus: 1
     });
 
-    message.success('KYC 认证申请提交成功！');
+    message.success(t('page.kyc.kycsubmit'));
     await getKYCStatus();
   } catch (error) {
     console.error('Failed to submit KYC:', error);
-    message.error('提交失败，请重试！');
+    message.error(t('page.kyc.submitfalse'));
   }
 };
 
@@ -261,15 +261,15 @@ const getStatusText = (status: Api.KYC.KYCStatus) => {
   const normalizedStatus = status.toUpperCase();
   switch (normalizedStatus) {
     case 'UNVERIFIED':
-      return '未认证';
+      return t('page.kyc.nocertified');
     case 'PENDING':
-      return '认证中';
+      return t('page.kyc.certifing');
     case 'VERIFIED':
-      return '已认证';
+      return t('page.kyc.certified');
     case 'REJECTED':
-      return '已拒绝';
+      return t('page.kyc.rejected');
     default:
-      return '未知状态';
+      return t('page.kyc.unstatus');
   }
 };
 
@@ -282,14 +282,14 @@ onMounted(() => {
   <div class="kyc-container responsive-container">
     <!-- 标题部分 -->
     <div class="page-header">
-      <h1 class="page-title">KYC 实名认证</h1>
+      <h1 class="page-title">{{ t('page.kyc.kyctitle') }}</h1>
-      <p class="page-desc">根据相关法规要求，使用服务前需要完成实名认证</p>
+      <p class="page-desc">{{ t('page.kyc.service') }}</p>
     </div>
 
     <!-- 状态卡片 -->
     <div class="status-card">
       <div class="status-header">
-        <span class="status-title">认证状态</span>
+        <span class="status-title">{{ t('page.kyc.cerstatus') }}</span>
         <a-tag
           class="status-tag"
           :color="getStatusColor(kycStatus)"
@@ -300,11 +300,11 @@ onMounted(() => {
 
       <div v-if="kycStatus === 'VERIFIED'" class="verified-info">
         <div class="info-item">
-          <span class="label">认证姓名：</span>
+          <span class="label">{{ t('page.kyc.cername') }}</span>
           <span class="value">{{ kycInfo.fullName }}</span>
         </div>
         <div class="info-item">
-          <span class="label">认证时间：</span>
+          <span class="label">{{ t('page.kyc.certime') }}</span>
           <span class="value">{{ kycInfo.verifiedTime }}</span>
         </div>
       </div>
@@ -322,29 +322,29 @@ onMounted(() => {
     <!-- 认证表单 -->
     <div v-if="kycStatus === 'UNVERIFIED' || kycStatus === 'REJECTED'" class="form-card">
       <div class="form-header">
-        <h2 class="form-title">认证信息</h2>
+        <h2 class="form-title">{{ t('page.kyc.cerinfo') }}</h2>
-        <p class="form-desc">请填写真实的个人信息，所有信息仅用于身份认证</p>
+        <p class="form-desc">{{ t('page.kyc.cerinfoservice') }}</p>
       </div>
 
       <a-form layout="vertical" class="kyc-form">
         <!-- 基本信息部分 -->
         <div class="form-section">
-          <h3 class="section-title">基本信息</h3>
+          <h3 class="section-title">{{ t('page.kyc.baseinfo') }}</h3>
           <div class="form-grid">
-            <a-form-item label="真实姓名" required>
+            <a-form-item :label="t('page.kyc.realname')" required>
               <a-input
                 v-model:value="formData.fullName"
-                placeholder="请输入真实姓名"
+                :placeholder="t('page.kyc.realnameple')"
                 :maxLength="20"
               />
             </a-form-item>
 
-            <a-form-item label="出生日期" required>
+            <a-form-item :label="t('page.kyc.birthdate')" required>
               <a-date-picker
                 v-model:value="formData.birthDate"
                 class="date-picker"
                 :disabledDate="disabledDate"
-                placeholder="请选择出生日期"
+                :placeholder="t('page.kyc.birthdateple')"
               />
             </a-form-item>
           </div>
@@ -352,12 +352,12 @@ onMounted(() => {
 
         <!-- 证件信息部分 -->
         <div class="form-section">
-          <h3 class="section-title">证件信息</h3>
+          <h3 class="section-title">{{ t('page.kyc.idinfo') }}</h3>
           <div class="form-grid">
-            <a-form-item label="证件类型" required>
+            <a-form-item :label="t('page.kyc.idtype')" required>
               <a-select
                 v-model:value="formData.idType"
-                placeholder="请选择证件类型"
+                :placeholder="t('page.kyc.idtypeple')"
                 class="id-type-select"
                 :get-popup-container="(triggerNode) => triggerNode.parentNode"
               >
@@ -374,7 +374,7 @@ onMounted(() => {
 
           <div class="upload-section">
             <div class="upload-item">
-              <a-form-item label="证件照片" required>
+              <a-form-item :label="t('page.kyc.idphoto')" required>
                 <a-upload
                   v-model:file-list="idCardFileList"
                   list-type="picture-card"
@@ -386,15 +386,15 @@ onMounted(() => {
                   <div v-if="idCardFileList.length < 1">
                     <loading-outlined v-if="idCardLoading" />
                     <plus-outlined v-else />
-                    <div class="upload-text">上传证件照片</div>
+                    <div class="upload-text">{{ t('page.kyc.uploadidphoto') }}</div>
                   </div>
                 </a-upload>
-                <div class="upload-tip">支持 JPG/PNG/PDF 格式，大小不超过 5MB</div>
+                <div class="upload-tip">{{ t('page.kyc.format') }}</div>
               </a-form-item>
             </div>
 
             <div class="upload-item">
-              <a-form-item label="面部照片" required>
+              <a-form-item :label="t('page.kyc.photopic')" required>
                 <a-upload
                   v-model:file-list="photoFileList"
                   list-type="picture-card"
@@ -406,10 +406,10 @@ onMounted(() => {
                   <div v-if="photoFileList.length < 1">
                     <loading-outlined v-if="photoLoading" />
                     <plus-outlined v-else />
-                    <div class="upload-text">上传面部照片</div>
+                    <div class="upload-text">{{ t('page.kyc.uploadphotopic') }}</div>
                   </div>
                 </a-upload>
-                <div class="upload-tip">支持 JPG/PNG 格式，大小不超过 2MB</div>
+                <div class="upload-tip">{{ t('page.kyc.format') }}</div>
               </a-form-item>
             </div>
           </div>
@@ -423,7 +423,7 @@ onMounted(() => {
             @click="submitKYC"
             class="submit-btn"
           >
-            提交认证
+            {{ t('page.kyc.submitcer') }}
           </a-button>
         </div>
       </a-form>
@@ -436,7 +436,7 @@ onMounted(() => {
       :footer="null"
       @cancel="previewVisible = false"
     >
-      <img alt="预览图片" style="width: 100%" :src="previewImage" />
+      <img :alt="t('page.kyc.previewimage')" style="width: 100%" :src="previewImage" />
     </a-modal>
   </div>
 </template>