slibra-official-web/components/BaseDialog.vue

<script setup lang="ts">
import { useMessage } from 'naive-ui';

const { apiBase: baseURL } = useRuntimeConfig().public;

const message = useMessage();
const { t } = useI18n();

const params = ref({
  name: '',
  source: '官网',
  phoneNumber: '',
  remark: ''
})

const modelValue = defineModel<boolean>();

const onClose = () => {
  modelValue.value = false;
  params.value = {
    name: '',
    source: '官网',
    phoneNumber: '',
    remark: ''
  }
}

const onSubmit = async () => {
  const { name, phoneNumber, remark } = params.value;

  if ( !name ) {
    return message.error(t('dialog.verifyEmptyName'));
  }
  
  if ( name.length > 10 ) {
    return message.error(t('dialog.verifyLengthName'));
  }
  
  if ( !phoneNumber ) {
    return message.error(t('dialog.verifyEmptyPhone'));
  }
  
  if (!/^(13[0-9]|14[01456789]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(phoneNumber)) {
    return message.error(t('dialog.verifyPhone'));
  }

  if ( remark.length > 200 ) {
    return message.error(t('dialog.verifyLengthTextarea'));
  }

  const response = await $fetch(baseURL + '/business/cooperation', {
    method: 'POST',
    body: JSON.stringify(params.value),
    headers: {
      'Content-Type': 'application/json',
    },
  });
  
  message.success('提交成功');

  onClose();
}
</script>

<template>
  <NModal v-model:show="modelValue" :close-on-esc="false" :mask-closable="false" style="max-width: 1440px">
    <div class="w-full h-full flex items-center justify-center">
      <div class="contact-modal_inner w-full h-[650px] md:w-[1440px] md:h-[810px] md:px-[60px] md:py-[56px]">
        <div class="header py-[30px] md:py-[0px]">
          <BaseIcon class="icon cursor-pointer" name="close-small" width="32" height="32" @click="onClose" />
        </div>
        <div class="main flex-col items-center px-[10px] py-[0px] md:flex-row md:items-start md:pt-[64px]">
          <div class="left w-full md:w-[380px] text-[#161616] mb-[20px] md:mt-[0px]">
            <p class="text-[30px] py-[20px] md:py-[44px] md:text-[56px] md:leading-[84px] font-bold">{{ $t('dialog.title') }}</p>
            <p class="text-[#565E66] leading-[24px]">{{ $t('dialog.content') }}</p>
          </div>
          <div class="right w-full md:w-[620px]">
            <ul class="inp-wrap flex flex-wrap md:flex-nowrap md:space-x-[8px]">
              <li class="w-[100%] mb-[10px] md:w-[50%]">
                <input type="text" :placeholder="$t('dialog.namePlaceholder')" v-model.trim="params.name">
              </li>
              <li class="w-[100%] md:w-[50%]">
                <input type="text" :placeholder="$t('dialog.phonePlaceholder')" v-model.trim="params.phoneNumber">
              </li>
            </ul>
            <div>
              <textarea cols="30" rows="10" class="w-full h-[150px] md:h-[300px] mt-[16px]" style="padding-top: 10px;"
                :placeholder="$t('dialog.textareaPlaceholder')" v-model="params.remark"></textarea>
            </div>
            <button class="sub-btn" @click="onSubmit">{{ $t('dialog.btnText') }}</button>
          </div>
        </div>
      </div>
    </div>
  </NModal>
</template>

<style lang="scss" scoped>
.contact-modal_inner {
  max-width: 1440px;

  background: #fff;

  .header {
    display: flex;
    justify-content: flex-end;
  }

  .main {
    display: flex;
    justify-content: space-between;

    .left {
      // width: 340px;
      border-top: 1px solid #000000;
    }

    .right {
      

      .inp-wrap {
        // height: 49px;

        input {
          width: 100%;
          height: 50px;
        }
      }

      .sub-btn {
        width: 144px;
        height: 48px;
        margin-top: 30px;
        border-radius: 8px;
        background: linear-gradient(87.67deg, #2A67F8 4.95%, #4892FF 93.07%);
        font-size: 18px;
        color: #fff;
      }

      input,
      textarea {
        outline: none;
        padding: 0 20px;
        border: 1px solid #EBEBEB;
        background: #FBFBFB;
        resize: none;
      }
    }
  }
}
</style>