fashion-ssr-vue3/pages/contact/index.vue

<script lang='ts' setup>
import type { FormInstance, FormRules } from 'element-plus'
import { getContactUsApi, getDictListApi } from '~/api/model/common'
import { ConstKeys } from '~/enums/const-enums'

useHead({
  title: 'Contact Us | EJET Selection',
  meta: [
    {
      name: 'description',
      content:
         `Reach out to EJET Selection for inquiries, support, or partnership opportunities. We're here to assist you with all your wholesale and retail needs.`,
    },
    {
      property: 'og:title',
      content: 'Contact Us | EJET Selection',
    },
    {
      property: 'og:description',
      content:
      `Reach out to EJET Selection for inquiries, support, or partnership opportunities. We're here to assist you with all your wholesale and retail needs.`,
    },
    {
      property: 'og:type',
      content: 'website',
    },
    {
      property: 'twitter:title',
      content: 'Contact Us | EJET Selection',
    },
    {
      property: 'twitter:description',
      content:
      `Reach out to EJET Selection for inquiries, support, or partnership opportunities. We're here to assist you with all your wholesale and retail needs.`,
    },
    {
      property: 'twitter:card',
      content: 'summary_large_image',
    },
  ],
  link: [
    {
      rel: 'canonical',
      href: `${ConstKeys.DOMAINPRO}/contact`,
    },
  ],
})

const ruleFormRef = ref<FormInstance>()
const mobileAreaCodeList = ref()
const params = ref<any>({
  name: '',
  mail: '',
  mobileAreaCode: '+86',
  mobile: '',
  message: '',
})
async function getMobileAreaCodeList() {
  const list = await getDictListApi('A064')
  mobileAreaCodeList.value = list
}
async function submitForm() {
  try {
    await getContactUsApi(params.value)
    ElMessage.success('Submit Success')
  }
  catch (error) {
    console.log('error', error)
  }
}
getMobileAreaCodeList()
</script>

<template>
  <div class="w-1400px mx-auto">
    <div class="flex items-center pb-160px px-150px pt-140px">
      <div class="w-50%">
        <h1 class="text-48px fw-600 text-#333 custom-title-font">
          Get In Touch
        </h1>
        <div class="my-30px h-1px w-100px bg-#999" />
        <h2 class="text-24px text-#333 !mb-60px">
          CUSTOMER SUPPORT
        </h2>
        <div class="flex items-center mb-40px">
          <img
            src="~/assets/images/contact_addr.png"
            alt=""
            class="w-36px h-36px mr-20px"
            srcset=""
          >
          <div class="text-24px text-#666 lh-30px">
            7th Floor, Tianbo International Building,<br> 55 Jiangdong Middle Road,<br> Yiwu, Zhejiang, China
          </div>
        </div>
        <div class="flex items-center mb-40px">
          <img
            src="~/assets/images/contact_email.png"
            alt=""
            class="w-36px h-36px mr-20px"
            srcset=""
          >
          <div class="text-24px text-#666 lh-30px">
            selection@ejet.comejet.com
          </div>
        </div>
        <div class="flex items-center mb-40px">
          <img
            src="~/assets/images/contact_phone.png"
            alt=""
            class="w-36px h-36px mr-20px"
            srcset=""
          >
          <div class="text-24px text-#666 lh-30px">
            +86 150 8821 0909
          </div>
        </div>
      </div>
      <div class="w-50%">
        <el-form
          ref="ruleFormRef"
          :model="params"
          label-width="auto"
          size="default"
          status-icon
        >
          <el-form-item label="Name" class="custom-form-item">
            <el-input
              v-model="params.name"
              placeholder="Enter your name"
              class="h-50px"
            />
          </el-form-item>
          <el-form-item label="Email Address" class="custom-form-item">
            <el-input
              v-model="params.mail"
              placeholder="Enter your email"
              class="h-50px"
            />
          </el-form-item>
          <div class="flex">
            <el-form-item
              label="Mobile Number"
              class="custom-form-item"
              prop="mobile"
            >
              <el-input v-model="params.mobile" placeholder="Mobile Number" class="h-50px">
                <template #prepend>
                  <el-select v-model="params.mobileAreaCode" class="!h-50px" placeholder="Select" style="width: 120px">
                    <el-option
                      v-for="(item, index) in mobileAreaCodeList"
                      :key="index"
                      :value="item.value"
                      :label="`${item.value} ${item.label}`"
                    >
                      {{ item.value }} {{ item.label }}
                    </el-option>
                  </el-select>
                </template>
              </el-input>
            </el-form-item>
          </div>
          <el-form-item label="Message" class="custom-form-item !mb-60px">
            <el-input
              v-model="params.message"
              type="textarea"
              placeholder="Enter your message"
              class="h-120px textarea-custom"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              class="!bg-#C58C64 !text-#fff !w-full !h-50px !text-16px !fw-500 !b-rd-6px"
              @click="submitForm()"
            >
              Send Message
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <AppFooter />
  </div>
</template>

<style lang="less" scoped>
:deep(.custom-form-item) {
  width: 100%;
  margin-bottom: 22px;
  display: block !important;
  .el-select__wrapper {
    height: 50px !important;
  }
  .el-form-item__label-wrap {
    margin-left: unset !important;
    .el-form-item__label {
      margin-bottom: 5px;
      font-size: 16px !important;
      color: #5b463e !important;
    }
  }

  .el-checkbox {
    .el-checkbox__input {
      &.is-checked {
        .el-checkbox__inner {
          color: #cc9879 !important;
          background-color: #cc9879 !important;
          border: 1px solid #cc9879 !important;
        }
      }

      .el-checkbox__inner {
        &:hover {
          border-color: #cc9879 !important;
        }
      }
    }

    &.is-checked {
      .el-checkbox__label {
        color: #cc9879 !important;
      }
    }
  }
  .textarea-custom {
    .el-textarea__inner {
      height: 100%;
    }
  }
}
::v-deep(.form-footer) {
  .el-form-item__content {
    display: flex;
    justify-content: space-between;
  }
}
</style>