123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151 |
- <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>
|