gypsy-crm-frontend-vu/pages/customer/components/DepositCheckConfirmPopup.vue

<template>
  <cwg-popup v-model:visible="visible" type="center" :mask-click="false" :showFooters="true" :showClose="false"
    :title="t('Home.page_customer.item2')" @close="cancel" >
    <view class="popup-content">
      <view class="info-section">
        <cwg-label-line-value :label="t('Custom.Deposit.Title1')" :value="loginDoc" v-if="loginDoc" />
        <cwg-label-line-value :label="t('Custom.Deposit.Title2')"
          :value="locale == 'cn' ? channelData.name : channelData.enName" v-if="channelData.code" />
        <cwg-label-line-value :label="t('news_add_field.Label.Title4')" :value="selectCodes" v-if="code" />
        <cwg-label-line-value :label="t('Custom.Deposit.Title3')" :value="params.amount + ' ' + channelData.currency"
          v-if="params.amount" />
        <cwg-label-line-value :label="t('Label.Name')" :value="userName" v-if="channelData.confirmName" />
      </view>

      <view class="form-section" v-if="(channelData.confirmAreaCode || channelData.confirmPhone)">
        <uni-forms ref="formRef" :model="formData" :rules="rules" label-position="top">
          <uni-forms-item :label="t('placeholder.phone')"
            v-if="channelData.confirmAreaCode && channelData.confirmPhone">
            <view class="phone-input-group">
              <view class="area-code-input">
                <input type="text" v-model="formData.confirmAreaCode" placeholder="+86" />
              </view>
              <view class="phone-separator">-</view>
              <view class="phone-input">
                <input type="tel" v-model="formData.confirmPhone" placeholder="{{ t('placeholder.phone') }}" />
              </view>
            </view>
          </uni-forms-item>
          <uni-forms-item :label="t('placeholder.phone')" v-else-if="channelData.confirmPhone">
            <input type="tel" v-model="formData.confirmPhone" placeholder="{{ t('placeholder.phone') }}" />
          </uni-forms-item>
          <uni-forms-item :label="t('placeholder.phone')" v-else-if="channelData.confirmAreaCode">
            <input type="text" v-model="formData.confirmAreaCode" placeholder="{{ t('placeholder.phone') }}" />
          </uni-forms-item>
        </uni-forms>
      </view>

      <view class="merchant-info">
        <view v-if="locale === 'cn'">
          <view>商户：CWG Markets Ltd</view>
          <view>指定独立代表和/或分销商</view>
          <view>注册地址：瓦努阿图，波特维拉，Govant大厦，Kumul公路1276号，1楼</view>
          <view>CWG Markets Ltd 负责与本网站相关的营销、分销和客户支持服务。</view>
        </view>
        <!-- Traditional Chinese -->
        <view v-else-if="locale === 'zhHant'">
          <view>商戶：CWG Markets Ltd</view>
          <view>指定獨立代表和/或分銷商</view>
          <view>註冊地址：瓦努阿圖，波特維拉，Govant大廈，Kumul公路1276號，1樓</view>
          <view>CWG Markets Ltd 負責與本網站相關的行銷、分銷和客戶支援服務。</view>
        </view>
        <!-- English -->
        <view v-else-if="locale === 'en'">
          <view>Merchant: CWG Markets Ltd</view>
          <view>Appointed Independent Representative and/or Distributor</view>
          <view>Registered Address: 1276 Kumul Highway, Govant Building, 1st Floor, Port Vila, Vanuatu</view>
          <view>CWG Markets Ltd is responsible for marketing, distribution, and customer support services related to
            this
            website.</view>
        </view>
        <!-- Vietnamese -->
        <view v-else-if="locale === 'vn'">
          <view>Người bán: CWG Markets Ltd</view>
          <view>Đại diện độc lập được bổ nhiệm và/hoặc nhà phân phối</view>
          <view>Địa chỉ đăng ký: 1276 Kumul Highway, Tòa nhà Govant, Tầng 1, Port Vila, Vanuatu</view>
          <view>CWG Markets Ltd chịu trách nhiệm về tiếp thị, phân phối và dịch vụ hỗ trợ khách hàng liên quan đến trang
            web này.</view>
        </view>
        <!-- Thai -->
        <view v-else-if="locale === 'th'">
          <view>พาณิชย์: CWG Markets Ltd</view>
          <view>ตัวแทนอิสระและ/หรือตัวแทนจำหน่ายที่ได้รับการแต่งตั้ง</view>
          <view>ที่อยู่ที่จดทะเบียน: 1276 Kumul Highway, Govant Building, ชั้น 1, Port Vila, Vanuatu</view>
          <view>CWG Markets Ltd รับผิดชอบการตลาด การจัดจำหน่าย และบริการสนับสนุนลูกค้าที่เกี่ยวข้องกับเว็บไซต์นี้</view>
        </view>
        <!-- Arabic -->
        <view v-else-if="locale === 'ar'">
          <view>التاجر: CWG Markets Ltd</view>
          <view>الممثل المستقل المعين و/أو الموزع</view>
          <view>العنوان المسجل: 1276 كوميول هايوي، مبنى جوفانت، الطابق الأول، بورت فيلا، فانواتو</view>
          <view>تتحمل شركة CWG Markets Ltd مسؤولية التسويق والتوزيع وخدمات دعم العملاء المتعلقة بهذا الموقع.</view>
        </view>
        <!-- German -->
        <view v-else-if="locale === 'de'">
          <view>Händler: CWG Markets Ltd</view>
          <view>Bestellter unabhängiger Vertreter und/oder Distributor</view>
          <view>Registrierte Adresse: 1276 Kumul Highway, Govant Building, 1. Etage, Port Vila, Vanuatu</view>
          <view>CWG Markets Ltd ist verantwortlich für Marketing, Vertrieb und Kundenservice im Zusammenhang mit dieser
            Website.</view>
        </view>
        <!-- Spanish -->
        <view v-else-if="locale === 'es'">
          <view>Comerciante: CWG Markets Ltd</view>
          <view>Representante independiente y/o distribuidor designado</view>
          <view>Dirección registrada: 1276 Kumul Highway, Govant Building, 1er Piso, Port Vila, Vanuatu</view>
          <view>CWG Markets Ltd es responsable de marketing, distribución y servicios de atención al cliente
            relacionados
            con este sitio web.</view>
        </view>
        <!-- Indonesian -->
        <view v-else-if="locale === 'id'">
          <view>Pedagang: CWG Markets Ltd</view>
          <view>Perwakilan Independen yang Ditunjuk dan/atau Distributor</view>
          <view>Alamat Terdaftar: 1276 Kumul Highway, Gedung Govant, Lantai 1, Port Vila, Vanuatu</view>
          <view>CWG Markets Ltd bertanggung jawab atas pemasaran, distribusi, dan layanan dukungan pelanggan terkait
            dengan situs web ini.</view>
        </view>
        <!-- Malaysian -->
        <view v-else-if="locale === 'ms'">
          <view>Pedagang: CWG Markets Ltd</view>
          <view>Wakil Bebas yang Ditetapkan dan/atau Pengedar</view>
          <view>Alamat Didaftarkan: 1276 Kumul Highway, Bangunan Govant, Tingkat 1, Port Vila, Vanuatu</view>
          <view>CWG Markets Ltd bertanggungjawab ke atas pemasaran, pengedaran, dan perkhidmatan sokongan pelanggan yang
            berkaitan dengan laman web ini.</view>
        </view>
        <!-- Korean -->
        <view v-else-if="locale === 'ko'">
          <view>상인: CWG Markets Ltd</view>
          <view>지정된 독립 대표자 및/또는 유통업체</view>
          <view>등록된 주소: 1276 Kumul Highway, Govant Building, 1층, Port Vila, Vanuatu</view>
          <view>CWG Markets Ltd는 이 웹사이트와 관련된 마케팅, 배급 및 고객 지원 서비스를 담당합니다.</view>
        </view>
        <!-- Brazilian Portuguese -->
        <view v-else-if="locale === 'pt'">
          <view>Mercante: CWG Markets Ltd</view>
          <view>Representante Independente nomeado e/ou Distribuidor</view>
          <view>Endereço Registrado: 1276 Kumul Highway, Govant Building, 1º Andar, Port Vila, Vanuatu</view>
          <view>CWG Markets Ltd é responsável pelo marketing, distribuição e serviços de atendimento ao cliente
            relacionados a este site.</view>
        </view>
        <!-- Persian -->
        <view v-else-if="locale === 'fa'">
          <view>تاجر: CWG Markets Ltd</view>
          <view>نماینده مستقل و/یا توزیع‌کننده منصوب</view>
          <view>آدرس ثبت‌شده: 1276 Kumul Highway, ساختمان Govant, طبقه اول، Port Vila، وانواتو</view>
          <view>CWG Markets Ltd مسئول بازاریابی، توزیع و خدمات پشتیبانی مشتریان مرتبط با این وب‌سایت است.</view>
        </view>
        <!-- Turkish -->
        <view v-else-if="locale === 'tr'">
          <view>Tüccar: CWG Markets Ltd</view>
          <view>Atanmış Bağımsız Temsilci ve/veya Distribütör</view>
          <view>Kayıtlı Adres: 1276 Kumul Highway, Govant Building, 1. Kat, Port Vila, Vanuatu</view>
          <view>CWG Markets Ltd, bu web sitesiyle ilgili pazarlama, dağıtım ve müşteri destek hizmetlerinden sorumludur.
          </view>
        </view>
        <!-- Fallback to English -->
        <view v-else>
          <view>Merchant: CWG Markets Ltd</view>
          <view>Appointed Independent Representative and/or Distributor</view>
          <view>Registered Address: 1276 Kumul Highway, Govant Building, 1st Floor, Port Vila, Vanuatu</view>
          <view>CWG Markets Ltd is responsible for marketing, distribution, and customer support services related to
            this
            website.</view>
        </view>
      </view>
    </view>
    <template #footer>
      <button @click="cancel">{{ t('Btn.Cancel') }}</button>
      <button type="primary" @click="submit">{{ t('Btn.Confirm') }}</button>
    </template>
  </cwg-popup>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { useI18n } from 'vue-i18n';

const props = defineProps({
  visible: { type: Boolean, default: false },
  loginDoc: String,
  channelData: Object,
  code: String,
  selectCodes: String,
  params: Object,
  userName: String,
  // 其他可能需要的 props
});
const emit = defineEmits(['update:visible', 'confirm', 'cancel']);

const { t, locale } = useI18n();
const visible = computed({
  get: () => props.visible,
  set: (val) => emit('update:visible', val)
});

const formData = ref({
  confirmAreaCode: '',
  confirmPhone: ''
});

const rules = computed(() => ({
  confirmAreaCode: {
    rules: [
      {
        required: true,
        errorMessage: t('vaildate.select.empty')
      }
    ]
  },
  confirmPhone: {
    rules: [
      {
        required: true,
        errorMessage: t('vaildate.select.empty')
      },
      {
        pattern: /^1[3-9]\d{9}$/,
        errorMessage: t('vaildate.phone.format')
      }
    ]
  }
}));

const formRef = ref(null);
watch(locale, () => {
    formRef.value?.clearValidate()
})

const cancel = () => {
  visible.value = false;
  emit('cancel');
};

const submit = async () => {
  if (formRef.value) {
    try {
      await formRef.value.validate();
      visible.value = false;
      emit('confirm', formData.value);
    } catch (error) {
      console.error('Form validation failed:', error);
    }
  } else {
    visible.value = false;
    emit('confirm', formData.value);
  }
};
</script>

<style lang="scss" scoped>
@import "@/uni.scss";

.popup-content {
  .info-section {
    margin-bottom: px2rpx(24);
    padding: px2rpx(20);
    background-color: #f8f9fa;
    border-radius: px2rpx(8);
    border: 1px solid #e9ecef;

    :deep(.cwg-label-line-value) {
      margin-bottom: px2rpx(12);

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .form-section {
    margin-bottom: px2rpx(24);
    padding: px2rpx(20);
    background-color: #ffffff;
    border-radius: px2rpx(8);
    border: 1px solid #e9ecef;

    :deep(.uni-forms) {
      width: 100%;

      :deep(.uni-forms-item) {
        margin-bottom: px2rpx(16);

        :deep(.uni-forms-item__label) {
          font-size: px2rpx(14);
          color: #606266;
          margin-bottom: px2rpx(8);
        }

        :deep(.uni-forms-item__error) {
          font-size: px2rpx(12);
          color: #f56c6c;
          margin-top: px2rpx(4);
        }
      }
    }

    .phone-input-group {
      display: flex;
      align-items: center;
      gap: px2rpx(12);

      .area-code-input {
        flex: 0 0 px2rpx(100);

        input {
          width: 100%;
          height: px2rpx(40);
          padding: 0 px2rpx(12);
          border: 1px solid #dcdfe6;
          border-radius: px2rpx(4);
          font-size: px2rpx(14);
          transition: border-color 0.3s;

          &:focus {
            outline: none;
            border-color: #409eff;
            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
          }
        }
      }

      .phone-separator {
        font-size: px2rpx(16);
        color: #909399;
        user-select: none;
      }

      .phone-input {
        flex: 1;

        input {
          width: 100%;
          height: px2rpx(40);
          padding: 0 px2rpx(12);
          border: 1px solid #dcdfe6;
          border-radius: px2rpx(4);
          font-size: px2rpx(14);
          transition: border-color 0.3s;

          &:focus {
            outline: none;
            border-color: #409eff;
            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
          }
        }
      }
    }

    input {
      width: 100%;
      height: px2rpx(40);
      padding: 0 px2rpx(12);
      border: 1px solid #dcdfe6;
      border-radius: px2rpx(4);
      font-size: px2rpx(14);
      transition: border-color 0.3s;

      &:focus {
        outline: none;
        border-color: #409eff;
        box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
      }
    }
  }

  .merchant-info {
    padding: px2rpx(16);
    background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
    border-radius: px2rpx(8);
    font-size: px2rpx(13);
    line-height: 1.6;
    text-align: left;
    color: #606266;

    view {
      margin-bottom: px2rpx(8);

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

@media (max-width: 768px) {
  .popup-content {

    .info-section,
    .form-section {
      padding: px2rpx(16);
    }

    .form-section {
      .phone-input-group {
        gap: px2rpx(8);

        .area-code-input {
          flex: 0 0 px2rpx(80);
        }

        input {
          height: px2rpx(36);
          font-size: px2rpx(13);
        }
      }
    }

    .merchant-info {
      padding: px2rpx(12);
      font-size: px2rpx(12);
    }
  }
}
</style>