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