DeepAICloud/src/components/AddressModal.vue

<template>
  <a-modal
    v-model:open="visible"
    :title="t('information.editAddressLinkText')"
    :width="600"
    :ok-text="t('common.comfirm')"
    :cancel-text="t('common.cancel')"
    @ok="handleSubmit"
  >
    <a-form
      ref="addrRef"
      :model="form"
      :label-col="{ style: { width: '120px' } }"
      :wrapper-col="{ span: 18 }"
    >
      <a-form-item :label="t('information.editAddress.country')" name="country">
        <a-select size="large" v-model:value="form.country">
          <a-select-option value="CN">{{ t('common.china') }}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        :label="t('information.editAddress.area')"
        name="area"
        :rules="[{ required: true, message: t('information.editAddress.selectAreaRequired') }]"
      >
        <a-cascader
          size="large"
          v-model:value="form.area"
          :options="regionData"
          :placeholder="t('information.editAddress.areaPlaceholder')"
          style="width:100%"
        />
      </a-form-item>

      <a-form-item
        :label="t('information.editAddress.addressDetail')"
        name="shipAddress"
        :rules="formRules.shipAddress"
      >
        <a-input
          size="large"
          v-model:value="form.shipAddress"
          show-count
          maxlength="50"
          :placeholder="t('information.editAddress.addressRequired')"
        />
      </a-form-item>

      <a-form-item
        :label="t('information.editAddress.receiver')"
        name="shipName"
        :rules="formRules.shipName"
      >
        <a-input
          size="large"
          v-model:value="form.shipName"
          show-count
          maxlength="10"
          :placeholder="t('information.editAddress.namePlaceholder')"
        />
      </a-form-item>

      <a-form-item
        :label="t('information.editAddress.receiverPhone')"
        name="shipMobile"
        :rules="formRules.shipMobile"
      >
        <a-input
          size="large"
          v-model:value="form.shipMobile"
          show-count
          maxlength="11"
          :placeholder="t('login.phonePlaceholder')"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useCartStore, useUserStore } from "@/stores";
import { regionData } from 'element-china-area-data'
import { updateAddress } from "@/api/login/index.js";

const { t } = useI18n();
const cart = useCartStore();
const receiverInfo = computed(() => cart.greceiverInfo);

const formRules = computed(() => ({
  shipAddress: [
    { required: true, message: t('information.editAddress.addressRequired'), trigger: 'blur' },
    { max: 50, message: t('information.editAddress.maxChars50'), trigger: 'blur' },
  ],
  shipName: [
    { required: true, message: t('information.editAddress.receiverRequired'), trigger: 'blur' },
    { max: 10, message: t('information.editAddress.maxChars10'), trigger: 'blur' },
  ],
  shipMobile: [
    { required: true, message: t('information.editAddress.phoneRequired'), trigger: 'blur' },
    { len: 11, message: t('information.editAddress.phoneLen11'), trigger: 'blur' },
  ],
}));

const props = defineProps({
  open: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:open', 'confirm'])

const addrRef = ref(null)

const form = ref(receiverInfo.value || {})

watch(
  () => receiverInfo.value,
  (val) => {
    form.value = { ...val, area: val?.shipAreaPath?.split(',') || [] }
    console.log('receiverInfo.value', val, receiverInfo.value);
  },
  { deep: true, immediate: true }
)

watch(
  () => props.open,
  (val) => {
    if (!val) {
      addrRef.value?.clearValidate()
    }
  }
)

const visible = computed({
  get() {
    return props.open
  },
  set(val) {
    emit('update:open', val)
  }
})

const handleSubmit = async () => {
  await addrRef.value.validate()
  await updateAddress({
    ...form.value,
    city: form.value?.area?.[1],
    province: form.value?.area?.[0],
    shipAreaPath: form.value?.area?.join(','),
  });
  console.log('form', form);
  cart.getReceiver();
  emit('confirm', { ...form.value })
}
</script>