hanye-website/pages/contact.vue

<template>
  <div>
    <div class="w-full h-[55px] sm:h-[72px]"></div>
    <ErrorBoundary :error="error">
      <div v-if="isLoading" class="flex justify-center py-12">
        <div
          class="animate-spin h-8 w-8 border-4 border-blue-500 rounded-full border-t-transparent"
        ></div>
      </div>

      <div v-else>
        <div class="max-w-full xl:px-2 lg:px-2 md:px-4 px-4 mt-6 mb-20">
          <div class="max-w-screen-2xl mx-auto">
            <nuxt-link
              to="/"
              class="justify-start text-white/60 text-base font-normal"
              >{{ $t("common.home") }}</nuxt-link
            >
            <span class="text-white/60 text-base font-normal px-2"> / </span>
            <nuxt-link to="/contact" class="text-white text-base font-normal">{{
              $t("contact.title")
            }}</nuxt-link>
          </div>
        </div>
        <div
          class="max-w-full mb-12 md:mb-20 lg:mb-32 xl:px-2 lg:px-2 md:px-4 px-4"
        >
          <div class="max-w-screen-2xl mx-auto">
            <div class="w-full grid grid-cols-1 md:grid-cols-2 gap-8">
              <!-- 联系表单 -->
              <div
                class="bg-zinc-900 rounded-lg p-8 transition-all duration-300 hover:bg-zinc-800 hover:shadow-lg"
              >
                <div class="text-white text-3xl font-medium mb-6">
                  {{ $t("contact.title") }}
                </div>
                <form
                  @submit.prevent="handleSubmit"
                  class="flex flex-col gap-6"
                >
                  <div class="relative">
                    <input
                      v-model="form.name"
                      type="text"
                      id="name"
                      class="peer block w-full appearance-none bg-transparent border-0 border-b-2 px-1 pt-5 pb-2 text-base text-gray-100 focus:outline-none focus:ring-0 placeholder-transparent transition-colors duration-300 focus:border-b-[3px] border-gray-600 focus:border-blue-500"
                      :placeholder="$t('contact.name')"
                      required
                    />
                    <label
                      for="name"
                      class="absolute left-1 top-5 origin-[0] -translate-y-4 scale-75 transform text-sm duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:font-medium text-gray-400 peer-focus:text-blue-400"
                    >
                      {{ $t("contact.name") }}
                    </label>
                  </div>

                  <div class="relative">
                    <input
                      v-model="form.email"
                      type="email"
                      id="email"
                      class="peer block w-full appearance-none bg-transparent border-0 border-b-2 px-1 pt-5 pb-2 text-base text-gray-100 focus:outline-none focus:ring-0 placeholder-transparent transition-colors duration-300 focus:border-b-[3px] border-gray-600 focus:border-blue-500"
                      :placeholder="$t('contact.email')"
                      required
                    />
                    <label
                      for="email"
                      class="absolute left-1 top-5 origin-[0] -translate-y-4 scale-75 transform text-sm duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:font-medium text-gray-400 peer-focus:text-blue-400"
                    >
                      {{ $t("contact.email") }}
                    </label>
                  </div>

                  <div class="relative">
                    <textarea
                      v-model="form.message"
                      id="message"
                      class="peer block w-full appearance-none bg-transparent border-0 border-b-2 px-1 pt-5 pb-2 text-base text-gray-100 focus:outline-none focus:ring-0 placeholder-transparent h-36 resize-none transition-colors duration-300 focus:border-b-[3px] border-gray-600 focus:border-blue-500"
                      :placeholder="$t('contact.message')"
                      required
                    ></textarea>
                    <label
                      for="message"
                      class="absolute left-1 top-5 origin-[0] -translate-y-4 scale-75 transform text-sm duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:font-medium text-gray-400 peer-focus:text-blue-400"
                    >
                      {{ $t("contact.message") }}
                    </label>
                  </div>

                  <!-- 验证码部分 -->
                  <div class="relative pt-2">
                    <div class="flex items-center space-x-3">
                      <div class="flex-grow relative">
                        <input
                          type="text"
                          id="captcha"
                          v-model="captcha.userInput.value"
                          class="peer block w-full appearance-none bg-transparent border-0 border-b-2 px-1 pt-5 pb-2 text-base text-gray-100 focus:outline-none focus:ring-0 placeholder-transparent transition-colors duration-300 focus:border-b-[3px]"
                          :class="[
                            captcha.error.value
                              ? 'border-red-500 focus:border-red-500'
                              : 'border-gray-600 focus:border-blue-500',
                          ]"
                          :placeholder="$t('contact.captcha')"
                          required
                          autocomplete="off"
                          aria-describedby="captcha-error"
                          :aria-invalid="captcha.error.value ? 'true' : 'false'"
                        />
                        <label
                          for="captcha"
                          class="absolute left-1 top-5 origin-[0] -translate-y-4 scale-75 transform text-sm duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:font-medium"
                          :class="[
                            captcha.error.value
                              ? 'text-red-400 peer-focus:text-red-400'
                              : 'text-gray-400 peer-focus:text-blue-400',
                          ]"
                        >
                          {{ $t("contact.captcha") }}
                        </label>
                      </div>
                      <div
                        class="flex-shrink-0 cursor-pointer select-none rounded-md overflow-hidden transition-all duration-200 ease-in-out hover:shadow-md active:scale-100"
                        v-html="captcha.captchaSvg.value"
                        @click="captcha.generateCaptcha()"
                        :title="$t('contact.refreshCaptcha')"
                        style="line-height: 0"
                      ></div>
                      <button
                        type="button"
                        @click="captcha.generateCaptcha()"
                        class="flex-shrink-0 p-2 text-gray-500 hover:text-blue-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-800 rounded-full hover:bg-gray-700/50 transition-all duration-200 ease-in-out"
                        :aria-label="$t('contact.refreshCaptcha')"
                        :title="$t('contact.refreshCaptcha')"
                      >
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          class="h-5 w-5"
                          fill="none"
                          viewBox="0 0 24 24"
                          stroke="currentColor"
                          stroke-width="2"
                        >
                          <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
                          />
                        </svg>
                      </button>
                    </div>
                    <p
                      v-if="captcha.error.value"
                      id="captcha-error"
                      class="mt-1.5 text-xs text-red-400 sm:text-sm"
                    >
                      {{ captcha.error.value }}
                    </p>
                  </div>

                  <button
                    type="submit"
                    class="bg-gradient-to-r from-blue-700 to-blue-400 text-white text-base font-normal py-4 px-8 rounded-lg transition-all duration-300 hover:scale-105 hover:shadow-lg"
                    :disabled="isSubmitting"
                  >
                    {{
                      isSubmitting
                        ? $t("contact.submitting")
                        : $t("contact.submit")
                    }}
                  </button>
                </form>
              </div>

              <!-- 公司信息和营业时间 -->
              <div class="flex flex-col gap-8">
                <div
                  class="bg-zinc-900 rounded-lg p-8 transition-all duration-300 hover:bg-zinc-800 hover:shadow-lg"
                >
                  <div class="text-white text-3xl font-medium mb-6">
                    {{ $t("about.companyInfo.name") }}
                  </div>
                  <div class="flex flex-col gap-4">
                    <div class="flex items-center gap-4">
                      <div class="text-white/60 text-base font-normal">
                        {{ $t("about.overview.companyName") }}
                      </div>
                      <div class="text-white text-base font-normal">
                        {{ $t("about.companyInfo.companyName") }}
                      </div>
                    </div>
                    <div class="flex items-center gap-4">
                      <div class="text-white/60 text-base font-normal">
                        {{ $t("about.overview.location") }}
                      </div>
                      <div class="text-white text-base font-normal">
                        {{ $t("about.companyInfo.location") }}
                      </div>
                    </div>
                    <div class="flex items-center gap-4">
                      <div class="text-white/60 text-base font-normal">
                        {{ $t("about.overview.tel") }}
                      </div>
                      <div class="text-white text-base font-normal">
                        86)024-8399-0696
                      </div>
                    </div>
                    <div class="flex items-center gap-4">
                      <div class="text-white/60 text-base font-normal">
                        {{ $t("about.overview.email") }}
                      </div>
                      <div class="text-white text-base font-normal">
                        hanye@hanye.cn
                      </div>
                    </div>
                  </div>
                </div>

                <div
                  class="bg-zinc-900 rounded-lg p-8 transition-all duration-300 hover:bg-zinc-800 hover:shadow-lg"
                >
                  <div class="text-white text-3xl font-medium mb-6">
                    {{ $t("about.overview.businessHours") }}
                  </div>
                  <div class="text-white text-base font-normal">
                    {{ $t("about.companyInfo.businessHours") }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ErrorBoundary>
  </div>
</template>

<script setup lang="ts">
/**
 * 联系页面
 * 展示公司信息和联系表单
 */
import { useErrorHandler } from "~/composables/useErrorHandler";
import { useCaptcha } from "~/composables/useCaptcha";
const { t, locale } = useI18n();

const { error, isLoading, wrapAsync } = useErrorHandler();
const captcha = useCaptcha();
const isSubmitting = ref(false);
const submitSuccess = ref(false);

const form = ref({
  name: "",
  email: "",
  message: "",
});

/**
 * 处理表单提交
 */
async function handleSubmit() {
  isSubmitting.value = true;
  submitSuccess.value = false;
  try {
    await wrapAsync(async () => {
      // 验证验证码
      if (!captcha.validateCaptcha()) {
        return;
      }

      // TODO: 实现表单提交逻辑
      await new Promise((resolve) => setTimeout(resolve, 1000));
      form.value = {
        name: "",
        email: "",
        message: "",
      };
      captcha.generateCaptcha(); // 成功后刷新验证码
      submitSuccess.value = true;
      return { success: true };
    });
  } finally {
    isSubmitting.value = false;
  }
}

// SEO优化
useHead({
  title: t("contact.title") + " - Hanye",
  meta: [
    {
      name: "description",
      content: t("contact.description"),
    },
    {
      name: "keywords",
      content: t("contact.keywords"),
    },
  ],
});
</script>