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

<template>
  <cwg-popup v-model:visible="visible" type="center" :mask-click="false" :showFooters="true" :title="title">
    <view class="popup-content">
      <uni-forms ref="formRef" :model="formData" :rules="rules" label-position="top">
        <uni-forms-item :label="t('PersonalManagement.Label.PinCode')" prop="pin" v-if="type === 3">
          <input type="password" v-model="formData.pin" placeholder="{{ t('placeholder.input') }}" />
        </uni-forms-item>
        <uni-forms-item :label="t('PersonalManagement.Label.OtpCode')" prop="otp" v-if="type === 4">
          <input type="text" v-model="formData.otp"
            :placeholder="$i18n.locale === 'es' ? 'Código de 6 dígitos' : t('placeholder.input')" />
        </uni-forms-item>
        <template v-if="type === 6">
          <uni-forms-item :label="t('ImproveImmediately.Label.CountryRegionOfResidence')" prop="country">
            <input type="text" v-model="formData.country" placeholder="{{ t('placeholder.input') }}" />
          </uni-forms-item>
          <uni-forms-item :label="t('ImproveImmediately.Label.ProvinceRegion')" prop="state">
            <input type="text" v-model="formData.state" placeholder="{{ t('placeholder.input') }}" />
          </uni-forms-item>
          <uni-forms-item :label="t('ImproveImmediately.Label.City')" prop="city">
            <input type="text" v-model="formData.city" placeholder="{{ t('placeholder.input') }}" />
          </uni-forms-item>
          <uni-forms-item :label="t('ImproveImmediately.Label.DetailedAddress')" prop="address">
            <input type="text" v-model="formData.address" placeholder="{{ t('placeholder.input') }}" />
          </uni-forms-item>
          <uni-forms-item :label="t('ImproveImmediately.Label.ZipCode')" prop="zipCode">
            <input type="text" v-model="formData.zipCode" placeholder="{{ t('placeholder.input') }}" />
          </uni-forms-item>
        </template>
        <uni-forms-item :label="t('PersonalManagement.Label.Phone')" prop="phone" v-if="type === 7">
          <input type="tel" v-model="formData.phone" placeholder="{{ t('placeholder.input') }}" />
        </uni-forms-item>
      </uni-forms>
    </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 } from 'vue';
import { useI18n } from 'vue-i18n';

const props = defineProps({
  visible: { type: Boolean, default: false },
  title: { type: String, default: '' },
  type: { type: Number, default: 0 }, // 3: pin, 4: otp, 6: address, 7: phone
  initialData: { type: Object, default: () => ({}) }
});
const emit = defineEmits(['update:visible', 'submit']);

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

const formData = ref({ ...props.initialData });
const rules = ref({}); // 按需添加
const formRef = ref(null);

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

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

.popup-content {
  padding: px2rpx(20);

  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);
    }
  }

  :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);
    }
  }
}

.title {
  font-size: px2rpx(18);
  font-weight: bold;
  margin-bottom: px2rpx(20);
  text-align: center;
}
</style>