web/pages/contact/index.vue

<template>
  <div id="page" class="page">
    <div class="top">
      <img src="@/assets/images/contactUs/img5.png" alt="">
      <div>
        <div class="top_title">Contact Us</div>
        <div class="top_location">
          <span class="iconfont icon-weizhi"></span>
          Current Location ： Home <span class="iconfont icon-dkw_guanbi-"></span> <span>Contact Us</span>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="content_l">
        <div class="content_l_title">DRIVEINTEL Market Research</div>
        <div class="content_l_line"></div>
        <n-form require-mark-placement="left" ref="formRef" label-align="left" :model="formData" :rules="rules">
          <div class="flex">
            <n-form-item :label="t('report.demand.companyName')" label-placement="left" path="companyName">
              <n-input placeholder="" v-model:value="formData.companyName" />
            </n-form-item>
            <n-form-item :label="t('report.demand.address')" label-placement="left" path="addr">
              <n-input placeholder="" v-model:value="formData.addr" />
            </n-form-item>
          </div>
          <div class="flex">
            <n-form-item :label="t('report.demand.email')" label-placement="left" path="email">
              <n-input placeholder="" v-model:value="formData.email" />
            </n-form-item>
            <n-form-item :label="t('report.demand.phone')" label-placement="left" path="contact">
              <n-input placeholder="" v-model:value="formData.contact" />
            </n-form-item>
          </div>
          <n-form-item :label="t('report.demand.person')" label-placement="left" path="name">
            <n-input placeholder="" v-model:value="formData.name" />
          </n-form-item>
          <n-form-item class="area" :label="t('report.demand.desc')" label-placement="top" path="demand" :style="{ width: '100%' }">
            <n-input type="textarea" placeholder="" 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 class="content_r">
        <div class="content_r_list">
          <div class="content_r_item ">
            <img src="@/assets/images/contactUs/img1.png" alt="">
            <div>Ocean Tower, No.145, Hong Kong Road, Wuhan City, Hubei Province, China</div>
          </div>
          <div class="content_r_item ">
            <img src="@/assets/images/contactUs/img2.png" alt="">
            <div>market@DRIVEINTEL.com</div>
          </div>
          <div class="content_r_item ">
            <img src="@/assets/images/contactUs/img3.png" alt="">
            <div>+1-888 422 6988 (US)</div>
          </div>
          <div class="content_r_item ">
            <img src="@/assets/images/contactUs/img4.png" alt="">
            <div>+86-191 0717 4767 (Int'l)</div>
          </div>
        </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 config = useRuntimeConfig();
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 = "";
    }
  });
}
useHead({
  title: t("common.navigate.contactUs") + "-" + t("defaultSettings.title"),
  viewport: "width=device-width,initial-scale=1,maximum-scale=1 ",
  charset: "utf-8",
  link: [
    {
      rel: "alternate",
      hreflang: userStore.getLang,
      href: config.public.domainName + "/contactUs",
    },
  ],
  meta: [
    {
      hid: "keywords",
      name: "keywords",
      content: t("defaultSettings.keyword"),
    },
    {
      hid: "description",
      name: "description",
      content: t("defaultSettings.desc"),
    },
  ],
});
</script>
<style lang="scss" scoped>
@import "~/assets/css/tool.scss";
.page {
  background: #f6f7fa;
  .top {
    width: 100%;
    position: relative;
    margin-top: var(--size-130);
    img {
      width: 100%;
    }
    > div {
      width: 100%;
      padding: var(--size-60) var(--size-176) 0;
      position: absolute;
      top: 0;
      left: 0;
      .top_title {
        font-size: var(--size-48);
        font-family: Arial, Arial-Bold;
        font-weight: 700;
        text-align: left;
        color: #ffffff;
      }
      .top_location {
        font-size: var(--size-14);
        font-family: Arial, Arial-Regular;
        font-weight: 400;
        color: #ffffff;
        .icon-dkw_guanbi- {
          color: #ffffff;
          font-size: var(--size-12);
        }
        span {
          color: #72ff56;
        }
      }
    }
  }
  .content {
    display: flex;
    padding: var(--size-100) var(--size-145) 0;
    .content_l {
      width: var(--size-1055);
      padding: var(--size-30) var(--size-30) var(--size-60);
      background: #ffffff;
      .content_l_title {
        font-size: var(--size-48);
        font-family: Arial, Arial-Bold;
        font-weight: 700;
        text-align: center;
        color: #1a1a1a;
      }
      .content_l_line {
        width: var(--size-71);
        height: var(--size-4);
        background: linear-gradient(90deg, #719d59 2%, #479f82 98%);
        border-radius: var(--size-2);
        margin: 0 auto var(--size-20);
      }
      .n-form {
        .flex {
          display: flex;
          justify-content: space-between;
          :deep(.n-form-item) {
            width: 48%;
          }
        }
        :deep(.n-form-item-label) {
          font-size: var(--size-18);
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          color: #666666;
          line-height: var(--size-63);
          border-bottom: 1px solid #e6e6e6;
        }
        :deep(.n-input-wrapper) {
          font-size: var(--size-18);
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          line-height: var(--size-63);
          border-bottom: var(--size-1) solid #e6e6e6;
        }
        :deep(.n-form-item-blank--error .n-input) {
          --n-border-error: var(--size-1) solid transparent !important;
          --n-border-focus-error: var(--size-1) solid transparent !important;
          --n-border-hover-error: var(--size-1) solid transparent !important;
        }
        .area {
          :deep(.n-form-item-label),
          :deep(.n-input-wrapper) {
            border-bottom: none;
          }
          :deep(.n-input--textarea) {
            background: #fafafa;
            border: var(--size-1) solid #e6e6e6;
            border-radius: var(--size-10);
            padding: 0 var(--size-5);
          }
          :deep(
              .n-input.n-input--textarea.n-input--resizable .n-input-wrapper
            ) {
            min-height: var(--size-260);
          }
        }
      }
      .form-item-btn {
        text-align: center;
        .n-button {
          font-size: var(--size-18);
          font-family: MicrosoftYaHei;
          text-align: center;
          color: #ffffff;
          line-height: var(--size-63);
          width: var(--size-227);
          height: var(--size-63);
          background: linear-gradient(
            90deg,
            #7b9c4f 0%,
            #549f76 70%,
            #2da19d 100%
          );
          border-radius: var(--size-8);
        }
      }
    }
    .content_r {
      width: var(--size-573);
      // height: var(--size-881);
      background: linear-gradient(180deg, #709d59, #449f86);
      border-radius: 0px var(--size-10) var(--size-10) 0px;
      padding: var(--size-50) 0;
      .content_r_list {
        .content_r_item {
          text-align: center;
          img {
            width: var(--size-124);
            height: var(--size-124);
          }
          div {
            width: var(--size-290);
            font-size: var(--size-16);
            font-family: Arial, Arial-Regular;
            text-align: center;
            color: #ffffff;
            margin: 0 auto var(--size-30);
          }
        }
      }
    }
  }
}
@include responseTo("phone") {
  .page {
    .top {
      img {
        height: 100px;
        object-fit: cover;
      }
      > div {
        padding: var(--size-15);
        .top_title {
          font-size: var(--size-28);
        }
      }
    }
    .content {
      padding: 0px;
      flex-direction: column;
      .content_l {
        width: 100%;
        padding: var(--size-15);
        .content_l_title {
          font-size: var(--size-20);
        }
        .n-form {
          .flex {
            display: block;
            :deep(.n-form-item) {
              width: 100%;
            }
          }
          :deep(.n-form-item-label) {
            font-size: var(--size-14);
            line-height: var(--size-40);
          }
          :deep(.n-input-wrapper) {
            font-size: var(--size-14);
            line-height: var(--size-40);
          }
          .area {
            :deep(.n-input--textarea) {
              border-radius: var(--size-10);
              padding: 0 var(--size-5);
            }
            :deep(
                .n-input.n-input--textarea.n-input--resizable .n-input-wrapper
              ) {
              min-height: var(--size-100);
            }
          }
        }
        .form-item-btn {
          .n-button {
            font-size: var(--size-16);
            line-height: var(--size-36);
            width: var(--size-100);
            height: var(--size-40);
            border-radius: var(--size-8);
          }
        }
      }
      .content_r {
        width: 100%;
        border-radius: 0;
        height: auto;
        .content_r_list {
          .content_r_item {
            &:last-child {
              div {
                margin-bottom: 0;
              }
            }
            img {
              width: var(--size-60);
              height: var(--size-60);
            }
          }
        }
      }
    }
  }
}
</style>