happychin-web/pages/contact/index.vue

<script setup>
import { fa } from 'element-plus/es/locale/index.mjs'

const { t, locale } = useI18n()
const { $$t } = useStoreI18n()

const areaCodeList = ref([])
const showCourseType = ref(false)
const showAge = ref(false)
const ageIndex = ref(null)
const loading = ref(false)
const showAreaCode = ref(false) // 区号
const showCountryId = ref(false) //地区
const courseTypeList = ref([
  {
    value: '1',
    label: $$t('beginning')
  },
  {
    value: '2',
    label: $$t('growing')
  },
  {
    value: '3',
    label: $$t('breaking')
  },
  {
    value: '4',
    label: $$t('expanding')
  }
])

const ageList = ref([
  {
    id: 'old',
    label: $$t('ageBracket', ['6-9']),
    minAge: 6,
    maxAge: 9
  },
  {
    id: 'old',
    label: $$t('ageBracket', ['6-12']),
    minAge: 6,
    maxAge: 12
  },
  {
    id: 'old',
    label: $$t('ageBracket', ['9-15']),
    minAge: 9,
    maxAge: 15
  },
  {
    id: 'old',
    label: $$t('ageBracket', ['12-18']),
    minAge: 12,
    maxAge: 18
  }
])

const studentSignUp = ref({
  surname: '',
  name: '',
  minAge: '',
  maxAge: '',
  countryId: '',
  email: '',
  phone: '',
  courseType: '',
  areaCode: '+86'
})

// 表单错误信息
const formErrors = ref({
  surname: '',
  name: '',
  age: '',
  email: '',
  countryId: '',
  phone: '',
  courseType: '',
  areaCode: ''
})
// 国家获取区号接口
async function getAreaCode() {
  // alert('获取区号')
  console.log('获取区号')
  loading.value = true
  try {
    let res = await request('/country/baseCountry/getCountryCode')

    console.log(res, '555')
    if (res && res.data) {
      areaCodeList.value = res.data
      loading.value = false
    } else {
    }
  } catch (error) {}
}

const areaCodeLang = computed(() =>
  areaCodeList.value.map(({ areaCode, countryNameZh, countryNameEn, id }) => ({
    value: areaCode,
    label: locale.value == 'zh' ? countryNameZh : countryNameEn,
    id
  }))
)

const rootContainer = ref(null)

onMounted(() => {
  getAreaCode()

  // 监听页面关闭 非 i 标签的事件操作
  if (rootContainer.value) {
    document.body.addEventListener('click', (event) => {
      if (event.target.tagName.toLowerCase() != 'i') {
        showCourseType.value = false
        showAge.value = false
        showAreaCode.value = false // 区号
        showCountryId.value = false //地区
        // alert('feii')
        return
      }

      // alert('i')
    })
  }
})
const btnLoading = ref(false)
// 用于存储定时器 ID
const timerId = ref(null)
// 学生报名
async function submitStudentSignUp() {
  // 清空错误信息
  Object.keys(studentSignUp.value).forEach((key) => {
    formErrors.value[key] = ''
  })

  // 校验表单
  let isValid = true
  if (!studentSignUp.value.surname) {
    formErrors.value.surname = $$t('pleaseEnterSurname')
    isValid = false
  }
  if (!studentSignUp.value.name) {
    formErrors.value.name = $$t('pleaseEnterName')
    isValid = false
  }
  if (!studentSignUp.value.countryId) {
    formErrors.value.countryId = $$t('pleaseSelectRegion')
    isValid = false
  }
  if (!studentSignUp.value.minAge && !studentSignUp.value.maxAge) {
    formErrors.value.age = $$t('pleaseEnterAgeRange')
    isValid = false
  }
  if (!studentSignUp.value.email) {
    formErrors.value.email = $$t('pleaseEnterEmail')
    isValid = false
  }
  if (!studentSignUp.value.phone) {
    formErrors.value.phone = $$t('pleaseEnterPhone')
    isValid = false
  }
  if (!studentSignUp.value.areaCode) {
    formErrors.value.areaCode = $$t('pleaseSelect')
    isValid = false
  }
  if (!studentSignUp.value.courseType) {
    formErrors.value.courseType = $$t('pleaseSelectCourseType')
    isValid = false
  }

  if (!isValid) {
    return
  }

  let body = {}
  body = { ...studentSignUp.value }
  console.log(body, 'body')

  let item = courseTypeList.value.find((item) => item.label == studentSignUp.value.courseType)
  let itemArea = areaCodeLang.value.find((item) => item.label == studentSignUp.value.countryId)
  console.log(item, 'item')

  body.courseType = item.value
  body.countryId = itemArea.id

  body.areaCode = body.areaCode.replace('+', '')

  try {
    btnLoading.value = true
    let res = await request('/education/happyEntry/addHappyEntry', {
      method: 'post',
      body
    })

    if (res) {
      ElMessage.success(t('signUpSuccess'))

      timerId.value = setTimeout(() => {
        btnLoading.value = false
        location.href = '/'
      }, 3000)
    }
  } catch (error) {}
}

function changeValue(name) {
  console.log(name, 'changeValue  ')

  if (studentSignUp.value[name]) {
    formErrors.value[name] = ''
    if (name == 'maxAge') {
      formErrors.value.age = ''
    }
  } else {
    if (!studentSignUp.value.surname) {
      formErrors.value.surname = $$t('pleaseEnterSurname')
      return
    }
    if (!studentSignUp.value.name) {
      formErrors.value.name = $$t('pleaseEnterName')
      return
    }
    if (!studentSignUp.value.countryId) {
      formErrors.value.countryId = $$t('pleaseSelectRegion')
      return
    }
    if (!studentSignUp.value.minAge || !studentSignUp.value.maxAge) {
      formErrors.value.age = $$t('pleaseEnterAgeRange')
      return
    }
    if (!studentSignUp.value.email) {
      formErrors.value.email = $$t('pleaseEnterEmail')
      return
    }
    if (!studentSignUp.value.phone) {
      formErrors.value.phone = $$t('pleaseEnterPhone')
      return
    }
    if (!studentSignUp.value.areaCode) {
      formErrors.value.areaCode = $$t('pleaseSelect')
      return
    }
    if (!studentSignUp.value.courseType) {
      formErrors.value.courseType = $$t('pleaseSelectCourseType')
      showCourseType.value = false
      return
    }
  }
}

// 清除定时器
onUnmounted(() => {
  if (timerId.value) {
    clearTimeout(timerId.value)
  }
})
</script>

<style lang="css" scoped>
.multi-line {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.clamp-1 {
  -webkit-line-clamp: 1;
}
.clamp-2 {
  -webkit-line-clamp: 2;
}
.clamp-3 {
  -webkit-line-clamp: 3;
}

.shrink-0 {
  flex-shrink: 0;
}

::v-deep .form-clt select {
  display: block !important;
  color: #5c707e !important;
}
::v-deep .form-clt select option {
  color: white;
  background: var(--theme);
}
::v-deep .form-clt select option:active {
  color: white;
  background: var(--theme);
}

.input {
  position: relative;
  width: 100%;
}

.submenu {
  position: absolute;
  top: 100%;
  z-index: 20;
  width: 100%;
  background: var(--white);
  position: absolute;
  color: var(--header);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  inset-inline-start: 0;
  transform-origin: top center;
  transform: translateY(10px);
  transition: all 0.4sease-in-out;
}

.submenu {
  position: absolute;
  top: 100%;
  z-index: 11;
  width: 100%;
  background: var(--white);
  position: absolute;
  color: var(--header);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  inset-inline-start: 0;
  transform-origin: top center;
  transform: translateY(10px);
  transition: all 0.4sease-in-out;
}

.submenu li {
  width: 100%;

  box-sizing: border-box;
}

.submenu li {
  font-size: 16px;
  font-weight: 600;
  color: var(--header);
  padding: 6px 25px;
  width: 100%;
  border-bottom: 1px solid #eeeeee;
}

.submenu li:hover {
  background: var(--theme);
  color: var(--white) !important;
}

.liactive {
  background: var(--theme);
  color: var(--white) !important;
}
.error {
  color: red;
  font-size: 14px;
}
.contact-header-bg {
  background-color: white;
}

.iclass {
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
  cursor: pointer;
}
</style>
<template>
  <Preloader v-if="loading" />

  <template v-else>
    <FixArea></FixArea>

    <Header-top-section sectionClass="header-top-section-4" />
    <TopHeader headerClass="header-1 contact-header-bg" />
    <div class="search-wrap">
      <div class="search-inner">
        <i class="fas fa-times search-close" id="search-close"></i>
        <div class="search-cell">
          <form method="get">
            <div class="search-field-holder">
              <input type="search" class="main-search-input" :placeholder="$t('search')" />
            </div>
          </form>
        </div>
      </div>
    </div>

    <div class="breadcrumb-wrapper bg-cover" style="background-image: url('/image/breadcrumb.svg')">
      <div class="line-shape">
        <img src="/picture/line1.png" alt="shape-img" />
      </div>
      <div class="plane-shape float-bob-y">
        <img src="/picture/plane2.png" alt="shape-img" />
      </div>
      <div class="doll-shape float-bob-x">
        <img src="/picture/doll.png" alt="shape-img" />
      </div>
      <div class="parasuit-shape float-bob-y">
        <img src="/picture/parasuit1.png" alt="shape-img" />
      </div>
      <div class="frame-shape">
        <img src="/picture/frame3.png" alt="shape-img" />
      </div>
      <div class="bee-shape float-bob-x">
        <img src="/picture/bee1.png" alt="shape-img" />
      </div>
      <div class="container">
        <div class="page-heading">
          <h1 class="wow fadeInUp" data-wow-delay=".3s">{{ $t('contactUs') }}</h1>
          <ul class="breadcrumb-items wow fadeInUp" data-wow-delay=".5s">
            <li>
              <NuxtLink to="/">{{ $t('home') }}</NuxtLink>
            </li>
            <li>
              <i class="fas fa-chevron-right"></i>
            </li>
            <li>{{ $t('contactUs') }}</li>
          </ul>
        </div>
      </div>
    </div>
    <section ref="rootContainer" class="contact-section fix section-padding">
      <div class="container">
        <div class="contact-wrapper-2">
          <div class="row g-4 align-items-center">
            <div class="col-lg-24">
              <div class="contact-content">
                <h2>{{ $t('readyToGetStarted') }}</h2>
                <p>{{ $t('description') }}</p>
                <form
                  action="contact.php"
                  @submit.prevent="submitStudentSignUp"
                  id="contact-form"
                  class="contact-form-items"
                >
                  <div class="row g-4">
                    <div class="col-lg-6 wow fadeInUp" data-wow-delay=".3s">
                      <div class="form-clt">
                        <span>
                          {{ $t('lastName') }}
                          <span style="color: red">*</span>
                        </span>
                        <input
                          type="text"
                          v-model="studentSignUp.surname"
                          name="surname"
                          id="surname"
                          :placeholder="$t('pleaseEnter')"
                          @blur="changeValue('surname')"
                        />
                        <p v-if="formErrors.surname" class="error">
                          {{ formErrors.surname }}
                        </p>
                      </div>
                    </div>

                    <div class="col-lg-6 wow fadeInUp" data-wow-delay=".5s">
                      <div class="form-clt">
                        <span>
                          {{ $t('firstName') }}
                          <span style="color: red">*</span>
                        </span>
                        <input
                          type="text"
                          v-model="studentSignUp.name"
                          name="name"
                          id="name"
                          :placeholder="$t('pleaseEnter')"
                          @blur="changeValue('name')"
                        />
                        <p v-if="formErrors.name" class="error">
                          {{ formErrors.name }}
                        </p>
                      </div>
                    </div>

                    <div class="col-lg-6 wow fadeInUp" data-wow-delay=".6s">
                      <div @click.stop="showAge = !showAge" class="form-clt">
                        <span>
                          {{ $t('childAge') }}
                          <span style="color: red">*</span>
                        </span>
                        <div
                          style="border: 1px solid #e3e3e3; border-radius: 5px; position: relative"
                          class="d-flex justify-content-between align-items-center"
                        >
                          <input
                            style="width: 48%; border: none"
                            type="text"
                            v-model="studentSignUp.minAge"
                            name="minAge"
                            id="minAge"
                            readonly
                            :placeholder="$t('pleaseSelect')"
                          />
                          <span>--</span>
                          <input
                            style="width: 48%; border: none"
                            type="text"
                            v-model="studentSignUp.maxAge"
                            name="maxAge"
                            id="maxAge"
                            readonly
                            :placeholder="$t('pleaseSelect')"
                          />
                          <i :class="`fas iclass ${showAge ? 'fa-angle-up' : 'fa-angle-down'}`"></i>
                          <ul v-show="showAge" class="submenu">
                            <li
                              v-for="(item, index) in ageList"
                              :key="item.id + index"
                              :class="`${ageIndex == index ? 'liactive' : ''}`"
                              @click.stop="
                                ;(ageIndex = index),
                                  (studentSignUp.maxAge = item.maxAge),
                                  (studentSignUp.minAge = item.minAge),
                                  (showAge = !showAge),
                                  changeValue('maxAge')
                              "
                            >
                              {{ item.label }}
                            </li>
                          </ul>
                        </div>
                      </div>
                      <p v-if="formErrors.age" class="error">
                        {{ formErrors.age }}
                      </p>
                    </div>
                    <div class="col-lg-6 wow fadeInUp" data-wow-delay=".6s">
                      <div @click.stop="showCountryId = !showCountryId" class="form-clt">
                        <span>
                          {{ $t('region') }}
                          <span style="color: red">*</span>
                        </span>
                        <div class="w-100 h-100 input">
                          <input
                            type="text"
                            v-model="studentSignUp.countryId"
                            name="countryId"
                            id="countryId"
                            readonly
                            :placeholder="$t('pleaseSelectRegion')"
                          />
                          <i
                            :class="`fas iclass ${showCountryId ? 'fa-angle-up' : 'fa-angle-down'}`"
                          ></i>

                          <ul v-show="showCountryId" class="submenu">
                            <li
                              v-for="(item, index) in areaCodeLang"
                              :key="item.id"
                              :class="`${studentSignUp.countryId == item.label ? 'liactive' : ''}`"
                              @click.stop="
                                ;(studentSignUp.countryId = item.label),
                                  (showCountryId = !showCountryId),
                                  changeValue('countryId')
                              "
                            >
                              {{ item.label }}
                            </li>
                          </ul>
                        </div>
                      </div>
                      <p v-if="formErrors.countryId" class="error">
                        {{ formErrors.countryId }}
                      </p>
                    </div>
                    <div class="col-lg-6 wow fadeInUp" data-wow-delay=".7s">
                      <div class="form-clt">
                        <span>
                          {{ $t('phone') }}
                          <span style="color: red">*</span>
                        </span>

                        <div style="flex-wrap: nowrap" class="d-flex">
                          <div
                            @click.stop="showAreaCode = !showAreaCode"
                            style="box-sizing: border-box; position: relative; max-width: 150px"
                          >
                            <input
                              style="width: 100%"
                              type="text"
                              v-model="studentSignUp.areaCode"
                              name="areaCode"
                              id="areaCode"
                              readonly
                              :placeholder="$t('pleaseSelect')"
                            />
                            <i
                              :class="`fas iclass ${
                                showAreaCode ? 'fa-angle-up' : 'fa-angle-down'
                              }`"
                              style="right: 10%"
                            ></i>
                            <ul v-show="showAreaCode" style="position: absolute" class="submenu">
                              <li
                                v-for="(item, index) in areaCodeLang"
                                :key="item.value"
                                :class="`${
                                  studentSignUp.areaCode == '+' + item.value ? 'liactive' : ''
                                }`"
                                @click.stop="
                                  ;(studentSignUp.areaCode = '+' + item.value),
                                    (showAreaCode = !showAreaCode)
                                "
                              >
                                {{ item.label }}({{ item.value }})
                              </li>
                            </ul>
                          </div>

                          <input
                            style="margin-left: 4%"
                            type="text"
                            v-model="studentSignUp.phone"
                            name="phone"
                            id="phone"
                            :placeholder="$t('pleaseEnter')"
                            @blur="changeValue('phone')"
                          />
                        </div>
                        <p v-if="formErrors.phone || formErrors.areaCode" class="error">
                          <span style="color: red; font-size: 14px; margin-right: 15%">
                            {{ formErrors.areaCode }}
                          </span>
                          {{ formErrors.phone }}
                        </p>
                      </div>
                    </div>
                    <div class="col-lg-6 wow fadeInUp" data-wow-delay=".8s">
                      <div @click.stop="showCourseType = !showCourseType" class="form-clt">
                        <span>
                          {{ $t('courseCategory') }}
                          <span style="color: red">*</span>
                        </span>
                        <div class="w-100 h-100 input">
                          <input
                            type="text"
                            v-model="studentSignUp.courseType"
                            name="courseType"
                            id="courseType"
                            readonly
                            :placeholder="$t('pleaseSelectCourseType')"
                          />
                          <!--  @blur="changeValue('courseType')" -->

                          <i
                            :class="`fas iclass ${
                              showCourseType ? 'fa-angle-up' : 'fa-angle-down'
                            }`"
                          ></i>

                          <ul v-show="showCourseType" class="submenu">
                            <li
                              v-for="(item, index) in courseTypeList"
                              :key="item.value"
                              :class="`${studentSignUp.courseType == item.label ? 'liactive' : ''}`"
                              @click.stop="
                                ;(studentSignUp.courseType = item.label),
                                  (showCourseType = !showCourseType),
                                  changeValue('courseType')
                              "
                            >
                              {{ item.label }}
                            </li>
                          </ul>
                        </div>
                      </div>
                      <p v-if="formErrors.courseType" class="error">
                        {{ formErrors.courseType }}
                      </p>
                    </div>
                    <div class="col-lg-12 wow fadeInUp" data-wow-delay=".9s">
                      <div class="form-clt">
                        <span>
                          {{ $t('yourEmail') }}
                          <span style="color: red">*</span>
                        </span>
                        <input
                          type="text"
                          v-model="studentSignUp.email"
                          name="email"
                          id="email"
                          :placeholder="$t('pleaseEnterEmail')"
                          @blur="changeValue('email')"
                        />
                        <p v-if="formErrors.email" class="error">
                          {{ formErrors.email }}
                        </p>
                      </div>
                    </div>

                    <div
                      class="col-lg-12 wow fadeInUp d-flex justify-content-center align-items-center"
                      data-wow-delay=".9s"
                    >
                      <button
                        type="submit"
                        :disabled="btnLoading"
                        class="theme-btn"
                        style="border-radius: 5px"
                      >
                        {{ $t('sendMessage') }}
                        <i class="fa-solid fa-arrow-right-long"></i>
                      </button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <FooterSection></FooterSection>
  </template>
</template>