From 03043192ddf00f9a36b7454799a9152cd1b50a0b Mon Sep 17 00:00:00 2001
From: admin <344137771@qq.com>
Date: Tue, 06 Jan 2026 11:13:45 +0800
Subject: [PATCH] 1
---
src/views/w8ben/index.vue | 242 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 242 insertions(+), 0 deletions(-)
diff --git a/src/views/w8ben/index.vue b/src/views/w8ben/index.vue
new file mode 100644
index 0000000..49bea3e
--- /dev/null
+++ b/src/views/w8ben/index.vue
@@ -0,0 +1,242 @@
+<template>
+ <div class="w8ben-form">
+ <fx-header>
+ <template #title>
+ {{ $t('W-8BEN Form') }}
+ </template>
+ </fx-header>
+
+ <!-- 已提交提示 -->
+ <div v-if="isSubmitted" class="submitted-tip px-8 pt-8 pb-4">
+ <div class="submitted-box inputBackground rounded-lg p-6 text-center flex items-center justify-center">
+ <img src="@/assets/image/public/checked.png" class="w-8 h-8 mr-3" alt="submitted" />
+ <p class="textColor font-semibold" style="font-size: 2rem;">{{ $t('已提交') }}</p>
+ </div>
+ </div>
+
+ <div class="px-8 pt-8" :class="{ 'pt-0': isSubmitted }">
+ <!-- 个人姓名 -->
+ <div class="form-item mb-8">
+ <label class="label textColor mb-4 block">{{ $t('个人姓名') }}</label>
+ <input type="text" class="form-input inputBackground textColor" :placeholder="$t('护照上的英文名')"
+ v-model="formData.name" />
+ </div>
+
+ <!-- 个人国籍 -->
+ <div class="form-item mb-8">
+ <label class="label textColor mb-4 block">{{ $t('个人国籍') }}</label>
+ <div class="form-input inputBackground textColor flex justify-between items-center cursor-pointer"
+ @click="openNationalityList">
+ <span :class="{ 'text-gray-400': !formData.citizenshipName }">
+ {{ formData.citizenshipName || $t('护照国家') }}
+ </span>
+ <img src="@/assets/image/down-arrow.png" class="w-5 h-3" alt="arrow" />
+ </div>
+ </div>
+
+ <!-- 居住地址 -->
+ <div class="form-item mb-8">
+ <label class="label textColor mb-4 block">{{ $t('居住地址') }}</label>
+ <textarea class="form-textarea inputBackground textColor" :placeholder="$t('您的真实英文地址，不可写邮政信箱')"
+ v-model="formData.address" rows="3"></textarea>
+ </div>
+
+ <!-- 外国税号 -->
+ <div class="form-item mb-8">
+ <label class="label textColor mb-4 block">{{ $t('外国税号') }}</label>
+ <input type="text" class="form-input inputBackground textColor" :placeholder="$t('欧洲居民填当地税号')"
+ v-model="formData.foreignTIN" />
+ </div>
+
+ <!-- 美国税号 -->
+ <div class="form-item mb-8">
+ <label class="label textColor mb-4 block">{{ $t('美国税号') }}</label>
+ <input type="text" class="form-input inputBackground textColor" :placeholder="$t('非美国人留空')"
+ v-model="formData.usTIN" />
+ </div>
+
+ <!-- 我确认该受益所有人为本地居民 -->
+ <div class="form-item mb-8">
+ <label class="label textColor mb-4 block">{{ $t('我确认该受益所有人为本地居民') }}</label>
+ <input type="text" class="form-input inputBackground textColor" :placeholder="$t('国家')"
+ v-model="formData.treatyBenefits" />
+ </div>
+
+ <!-- 提交按钮 -->
+ <button class="submit-btn btnMain text-white w-full h-24 rounded mt-8" @click="onSubmit">
+ {{ $t('submit') }}
+ </button>
+ </div>
+
+ <!-- 国籍选择器 -->
+ <nationality-list ref="nationalityRef" :title="$t('selectNation')" @getName="onNationalitySelect" />
+ </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { showToast } from 'vant';
+import nationalityList from '@/views/authentication/components/nationalityList.vue';
+import countries from '@/views/authentication/components/countryList.js';
+import { _submitW8ben, _getW8ben } from '@/service/user.api.js';
+
+const router = useRouter();
+const { t, locale } = useI18n();
+
+const nationalityRef = ref(null);
+const isSubmitted = ref(false);
+
+const formData = reactive({
+ name: '',
+ citizenship: '',
+ citizenshipName: '',
+ address: '',
+ foreignTIN: '',
+ usTIN: '',
+ treatyBenefits: ''
+});
+
+const openNationalityList = () => {
+ nationalityRef.value.open();
+};
+
+const onNationalitySelect = (params) => {
+ formData.citizenship = params.code;
+ formData.citizenshipName = params.name;
+};
+
+// 根据国家代码获取国家名称
+const getCountryNameByCode = (code) => {
+ if (!code) return '';
+ const countryList = countries[locale.value] || countries['en'];
+ const country = countryList[code];
+ return country ? country.name : code;
+};
+
+// 获取表单数据回显
+const fetchFormData = () => {
+ _getW8ben().then(data => {
+ // 如果 data 不为空，表示已提交过
+ if (data) {
+ isSubmitted.value = true;
+ formData.name = data.name || '';
+ formData.citizenship = data.citizenship || '';
+ formData.citizenshipName = getCountryNameByCode(data.citizenship);
+ formData.address = data.address || '';
+ formData.foreignTIN = data.foreignTIN || '';
+ formData.usTIN = data.usTIN || '';
+ formData.treatyBenefits = data.treatyBenefits || '';
+ return;
+ }
+ }).catch(() => {
+ // 获取失败不做处理，使用空表单
+ });
+};
+
+onMounted(() => {
+ fetchFormData();
+});
+
+const onSubmit = () => {
+ // 验证必填字段
+ if (!formData.name) {
+ showToast(t('请输入姓名'));
+ return;
+ }
+ if (!formData.citizenshipName) {
+ showToast(t('请选择国籍'));
+ return;
+ }
+ if (!formData.address) {
+ showToast(t('请输入居住地址'));
+ return;
+ }
+ if (!formData.foreignTIN) {
+ showToast(t('请输入外国税号'));
+ return;
+ }
+ if (!formData.treatyBenefits) {
+ showToast(t('请输入税收协定'));
+ return;
+ }
+
+ // 提交表单
+ _submitW8ben({
+ name: formData.name,
+ citizenship: formData.citizenship,
+ address: formData.address,
+ foreignTIN: formData.foreignTIN,
+ usTIN: formData.usTIN,
+ treatyBenefits: formData.treatyBenefits
+ }).then(() => {
+ showToast(t('提交成功'));
+ router.back();
+ })
+};
+</script>
+
+<style lang="scss" scoped>
+.w8ben-form {
+ padding-bottom: 30px;
+ min-height: 100vh;
+}
+
+.form-item {
+ .label {
+ font-size: 14px;
+ font-weight: 500;
+ }
+}
+
+.form-input {
+ width: 100%;
+ height: 44px;
+ padding: 0 12px;
+ border-radius: 8px;
+ font-size: 14px;
+ border: none;
+ outline: none;
+ box-sizing: border-box;
+}
+
+.form-textarea {
+ width: 100%;
+ padding: 12px;
+ border-radius: 8px;
+ font-size: 14px;
+ border: none;
+ outline: none;
+ resize: none;
+ box-sizing: border-box;
+}
+
+.submit-btn {
+ font-size: 16px;
+ font-weight: 500;
+ border: none;
+ cursor: pointer;
+}
+
+/* 国家选择弹窗样式穿透 - 字体加大 */
+:deep(.van-action-sheet__header) {
+ font-size: 18px !important;
+}
+
+:deep(.van-search__field) {
+ font-size: 16px !important;
+}
+
+:deep(.van-field__control) {
+ font-size: 16px !important;
+}
+
+:deep(.list-view) {
+ font-size: 16px !important;
+}
+
+:deep(.van-action-sheet__content .textColor) {
+ font-size: 16px !important;
+}
+</style>
--
Gitblit v1.9.3