web/pages/contact/index.vue

<template>
  <div id="page" class="page">
    <div class="top-title wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
      <div class="top-container">
        <n-icon :component="MdNavigate" size="40" style="vertical-align: middle" />
        <span>{{ t('common.navigate.contactUs') }}</span>
      </div>
    </div>

    <div class="page-nav-container wow fadeInLeft" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
      <div class="nav-txt">
        <n-breadcrumb separator=">">
          <n-breadcrumb-item>
            <n-icon :component="MdHome" /><router-link to="/home">{{ t('common.navigate.home') }}</router-link>
          </n-breadcrumb-item>
          <n-breadcrumb-item> <n-icon :component="MdNavigate" />{{ t('common.navigate.contactUs') }} </n-breadcrumb-item>
        </n-breadcrumb>
      </div>
    </div>

    <div class="contact">
      <div class="container">
        <div class="title wow fadeInLeft" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
          <h2>{{ t('contact.contact.title') }}</h2>
        </div>
        <div class="contact-desc wow fadeInLeft" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
          <div class="contact-desc-info">
            <div class="corp">{{ t('contact.contact.corpName') }}</div>

            <div class="box">
              <n-icon :component="IosCall" size="20" />
              <!-- <a href="tel:86-027-85307885">86-027-85307885</a> -->
              <a href="tel:1-8884226999">+1-888 422 6999 (US)</a>
              <span style="display: inline-block; margin: 0 5px">or</span>
              <a href="tel:86-17320528525">+86-173 2052 8525 (Int'l)</a>
            </div>
            <div class="box" v-if="formData.lang === 'zh-CN'">
              <n-icon :component="MdPhonePortrait" size="20" />
              <a href="tel:86-17320528525">86-17320528525（24h）</a>
            </div>
            <div class="box">
              <n-icon :component="MdMail" size="20" />
              <a href="mailto:sales@dirmarketresearch.com">sales@dirmarketresearch.com</a>
            </div>
            <div class="box">
              <n-icon :component="IosPin" size="20" />
              <span>{{ t('common.footer.area') }}</span>
              <span>{{ t('common.footer.street') }}</span>
            </div>
          </div>
          <div class="contact-desc-we">
            <img src="@/assets/images/we.png" />
          </div>
        </div>
      </div>
    </div>

    <div class="contact-form">
      <div class="container">
        <div class="title wow fadeInLeft" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
          {{ t('contact.form.title') }}
        </div>
        <div class="content wow fadeInLeft" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
          <n-form require-mark-placement="left" ref="formRef" :model="formData" :rules="rules" label-width="auto">
            <n-form-item :label="t('report.demand.companyName')" label-placement="left" path="companyName">
              <n-input :placeholder="t('report.demand.companyNameTip')" v-model:value="formData.companyName" />
            </n-form-item>
            <n-form-item :label="t('report.demand.address')" label-placement="left" path="addr">
              <n-input :placeholder="t('report.demand.addressTip')" v-model:value="formData.addr" />
            </n-form-item>
            <n-form-item :label="t('report.demand.email')" label-placement="left" path="email">
              <n-input :placeholder="t('report.demand.emailTip')" v-model:value="formData.email" />
            </n-form-item>
            <n-form-item :label="t('report.demand.phone')" label-placement="left" path="contact">
              <n-input :placeholder="t('report.demand.phoneTip')" v-model:value="formData.contact" />
            </n-form-item>
            <n-form-item :label="t('report.demand.person')" label-placement="left" path="name">
              <n-input :placeholder="t('report.demand.personTip')" v-model:value="formData.name" />
            </n-form-item>

            <n-form-item label="" class="empty-form-item" />
            <n-form-item :label="t('report.demand.desc')" label-placement="left" path="demand" :style="{ width: '100%' }">
              <n-input type="textarea" :placeholder="t('report.demand.descTip')" v-model:value="formData.demand" />
            </n-form-item>
            <div class="form-item-btn">
              <n-button type="primary" size="large" @click="handleSubmit">{{ t('report.demand.submit') }}</n-button>
            </div>
          </n-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  MdPhonePortrait,
  MdNavigate,
  MdHome,
  IosPin,
  MdMail,
  IosCall,
} from "@vicons/ionicons4";
import {
  // NIcon,
  // NBreadcrumb,
  // NBreadcrumbItem,
  // FormItemRule,
  // NForm,
  // NButton,
  // NFormItem,
  // NInput,
  // FormRules,
  createDiscreteApi,
  // NSpin,
} from "naive-ui";
import { onMounted, ref, reactive } from "vue";
import { useI18n } from "#imports";
import { useUserStore } from "@/store/user";
const userStore = useUserStore();
const lang = userStore.getLang;
const { t } = useI18n();
onMounted(() => {
  if (typeof window !== "undefined") {
    window.scrollTo(0, 1);
  }
});
const formRef = ref();
const formData = reactive({
  name: "", // 姓名
  contact: "", // 联系方式
  email: "", // 邮箱
  companyName: "", // 名称
  demand: "", // 需求
  reportId: "", // 报告id
  reportPrice: "", // 报告单价
  addr: "", // 联系地址
  lang: userStore.getLang, // 语言
  type: "", //类型,1.样本，2.定制
});
const rules: FormRules = {
  companyName: [
    {
      required: true,
      trigger: ["input", "blur"],
      validator(rule: FormItemRule, value: string) {
        if (!value) {
          return new Error(t("report.demand.companyNameTip"));
        }
        return true;
      },
    },
  ],
  // addr: [{
  //     required: true,
  //     trigger: ['input','blur'],
  //     validator(rule: FormItemRule, value: string){
  //         if(!value){
  //             return new Error(t('report.demand.addressTip'));
  //         }
  //         return true;
  //     }
  // }],
  email: [
    {
      required: true,
      trigger: ["blur"],
      validator(rule: FormItemRule, value: string) {
        if (!value) {
          return new Error(t("report.demand.emailTip"));
        } else if (!isEmail(value)) {
          return new Error(t("report.demand.emailFormat"));
        }
        return true;
      },
    },
  ],
  contact: [
    {
      required: true,
      trigger: ["blur"],
      validator(rule: FormItemRule, value: string) {
        if (!value) {
          return new Error(t("report.demand.phoneTip"));
        } else if (!isPhoneNumber(value)) {
          return new Error(t("report.demand.phoneFormat"));
        }
        return true;
      },
    },
  ],
  name: [
    {
      required: true,
      trigger: ["blur", "input"],
      validator(rule: FormItemRule, value: string) {
        if (!value) {
          return new Error(t("report.demand.personTip"));
        }
        return true;
      },
    },
  ],
  demand: [
    {
      required: true,
      trigger: ["input", "blur"],
      validator(rule: FormItemRule, value: string) {
        if (!value) {
          return new Error(t("report.demand.descTip"));
        }
        return true;
      },
    },
  ],
};

// 提交
const message = createDiscreteApi(["message"]);
function handleSubmit() {
  formRef.value?.validate(async (errors: any) => {
    if (!errors) {
      //formData.reportId = prop.rowId;
      //formData.reportPrice = prop.rowPrice;
      formData.lang = langOnBrowser();
      //formData.type = prop.rowType;
      await customerInfoSave(formData);
      message.message.success(t("report.demand.success"));
      formData.companyName = "";
      formData.addr = "";
      formData.email = "";
      formData.contact = "";
      formData.name = "";
      formData.demand = "";
    }
  });
}
</script>
<style lang="scss" scoped>
.contact {
  background-color: #fff;
  padding-bottom: 50px;
  .container {
    .title {
      border-bottom: 1px solid #eee;
    }
  }
  .contact-desc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .contact-desc-info {
      width: 55%;
      .corp {
        font-size: 2em;
        color: #18a058;
        padding: 1.5em 0 2.5em;
      }
      .box {
        padding: 1em 0;
        font-size: 1.2em;
        color: #666;
        border-bottom: 1px solid #eee;
        .n-icon {
          vertical-align: text-bottom;
          margin-right: 5px;
        }
      }
    }
    .contact-desc-we {
      width: 40%;
      padding-top: 30px;
      img {
        width: 100%;
      }
    }
  }
}
.contact-form {
  background-color: #fff;
  border-bottom: 1px solid #eee;
  padding-bottom: 50px;
  .container {
    background-color: #f2f2f2;
    .content {
      padding: 2em;
      .n-form {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        .n-form-item {
          width: 30%;
        }
        .form-item-btn {
          width: 100%;
          text-align: center;
        }
      }
    }
  }
}
</style>