gypsy-crm-frontend-vu/pages/activities/components/GiftApplicationPopup.vue

<template>
  <cwg-popup v-model:visible="visible" type="center" :mask-click="false" :showFooters="true" :showClose="false"
    :title="title">
    <view class="popup-content">
      <uni-forms ref="formRef" :model="giftForm" :rules="rules" label-position="top" validate-trigger="submit"
        :labelWidth="200">
        <view class="form-row">
          <view class="form-col-full">
            <uni-forms-item :label="t('UtaskList.item18')" name="giveCode">
              <cwg-combox v-model:value="giftForm.giveCode" :clearable="false" :options="giftOptions"
                :placeholder="t('UtaskList.item19')" @change="handleGiftChange" />
            </uni-forms-item>
          </view>
        </view>
        <view class="form-row">
          <view class="form-col-full">
            <uni-forms-item :label="t('UtaskList.item20')" name="giveAddress">
              <uni-easyinput v-model="giftForm.giveAddress" :placeholder="t('UtaskList.item21')" />
            </uni-forms-item>
          </view>
        </view>
        <view class="form-row">
          <view class="form-col-full">
            <uni-forms-item :label="t('UtaskList.item24')" name="giveAcceptName">
              <uni-easyinput v-model="giftForm.giveAcceptName" :placeholder="t('UtaskList.item25')" />
            </uni-forms-item>
          </view>
        </view>
        <view class="form-row">
          <view class="form-col-full">
            <uni-forms-item :label="t('UtaskList.item22')" name="givePhone">
              <uni-easyinput v-model="giftForm.givePhone" :placeholder="t('UtaskList.item23')" />
            </uni-forms-item>
          </view>
        </view>
      </uni-forms>
    </view>
    <template #footer>
      <button hover-class="" class="btn btn-dark btn-sm waves-effect waves-light btn-outline-dark1" @click="cancel">{{
        t('Btn.Cancel') }}</button>
      <button hover-class="" class="btn btn-danger btn-sm waves-effect waves-light" @click="submit"
        :loading="submitting">{{ t('Btn.Confirm') }}</button>
    </template>
  </cwg-popup>
</template>

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

const props = defineProps({
  visible: { type: Boolean, default: false },
  title: { type: String, default: '' },
  giftList: { type: Array, default: () => [] },
  giftForm: { type: Object, default: () => ({}) }
});
const emit = defineEmits(['update:visible', 'confirm', 'cancel']);
const { t, locale } = useI18n();

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

// 表单数据
const giftForm = reactive({
  giveCode: props.giftForm.giveCode || '',
  giveAddress: props.giftForm.giveAddress || '',
  giveAcceptName: props.giftForm.giveAcceptName || '',
  givePhone: props.giftForm.givePhone || ''
});

// 表单引用
const formRef = ref(null);
// 提交状态
const submitting = ref(false);

// 礼物选项
const giftOptions = computed(() => {
  return props.giftList.map(gift => ({
    text: `${gift.giveCode} - ${gift.giveName}`,
    value: gift.giveCode
  }));
});

// 表单验证规则
const rules = computed(() => ({
  giveCode: {
    rules: [
      {
        required: true,
        errorMessage: t("UtaskList.item19")
      }
    ]
  },
  giveAddress: {
    rules: [
      {
        required: true,
        errorMessage: t("UtaskList.item21")
      }
    ]
  },
  giveAcceptName: {
    rules: [
      {
        required: true,
        errorMessage: t("UtaskList.item25")
      }
    ]
  },
  givePhone: {
    rules: [
      {
        required: true,
        errorMessage: t("UtaskList.item23")
      }
    ]
  }
}));
watch(locale, () => {
  formRef.value?.clearValidate()
})



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

const handleGiftChange = (value) => {
  giftForm.giveCode = value;
  giftForm.giveName = props.giftList.find(item => item.giveCode === value)?.giveName || '';
};

const submit = async () => {
  if (submitting.value) return;
  submitting.value = true;

  try {
    // 表单验证
    await formRef.value?.validate();

    visible.value = false;
    emit('confirm', giftForm);
  } catch (error) {
    console.log('Form validation failed:', error);
  } finally {
    submitting.value = false;
  }
};
watch(() => props.visible, (newVal) => {
  if (newVal) {
    giftForm.giveCode = ''
    giftForm.giveAddress = ''
    giftForm.giveAcceptName = ''
    giftForm.givePhone = ''
  }
})
</script>

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

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

  .form-row {
    margin-bottom: px2rpx(20);

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

  .form-col-full {
    width: 100%;
  }

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

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

        :deep(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(.cwg-combox) {
        width: 100%;

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

          :deep(.uni-select-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);
            }
          }
        }
      }
    }
  }

  .tips {
    background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
    border-radius: px2rpx(8);
    padding: px2rpx(16);
    margin-bottom: px2rpx(20);

    .title {
      font-size: px2rpx(14);
      font-weight: 600;
      color: #303133;
      margin-bottom: px2rpx(8);
    }

    view {
      font-size: px2rpx(13);
      color: #606266;
      line-height: 1.5;
      margin-bottom: px2rpx(8);

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

  button {
    width: 100%;
    height: px2rpx(44);
    border-radius: px2rpx(4);
    font-size: px2rpx(16);
    font-weight: 500;
    transition: all 0.3s;

    &.reselect {
      background-color: #409eff;
      color: #ffffff;
      border: none;

      &:hover {
        background-color: #66b1ff;
      }

      &:active {
        background-color: #3a8ee6;
      }

      &[disabled] {
        background-color: #c6e2ff;
        cursor: not-allowed;
      }
    }
  }
}

@media (max-width: 768px) {
  .popup-content {
    padding: px2rpx(16);

    .form-row {
      margin-bottom: px2rpx(16);
    }

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

        :deep(.uni-easyinput) {
          :deep(input) {
            height: px2rpx(36);
            font-size: px2rpx(13);
          }
        }

        :deep(.cwg-combox) {
          :deep(.uni-select) {
            :deep(.uni-select-input) {
              height: px2rpx(36);
              font-size: px2rpx(13);
            }
          }
        }
      }
    }

    .tips {
      padding: px2rpx(12);

      .title {
        font-size: px2rpx(13);
      }

      view {
        font-size: px2rpx(12);
      }
    }

    button {
      height: px2rpx(40);
      font-size: px2rpx(15);
    }
  }
}
</style>