1

admin

2026-01-07 cc9e88924fd45b2893d2fb4213ca980e026611a4

 src/views/w8ben/index.vue

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