|
@@ -1,10 +1,13 @@
|
|
|
<script setup>
|
|
|
-// import { ElButton, ElSelect, ElOption } from 'element-plus'
|
|
|
+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) //地区
|
|
@@ -27,6 +30,33 @@ const courseTypeList = ref([
|
|
|
}
|
|
|
])
|
|
|
|
|
|
+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: '',
|
|
@@ -47,7 +77,8 @@ const formErrors = ref({
|
|
|
email: '',
|
|
|
countryId: '',
|
|
|
phone: '',
|
|
|
- courseType: ''
|
|
|
+ courseType: '',
|
|
|
+ areaCode: ''
|
|
|
})
|
|
|
// 国家获取区号接口
|
|
|
async function getAreaCode() {
|
|
@@ -74,10 +105,30 @@ const areaCodeLang = computed(() =>
|
|
|
}))
|
|
|
)
|
|
|
|
|
|
+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() {
|
|
|
// 清空错误信息
|
|
@@ -96,7 +147,7 @@ async function submitStudentSignUp() {
|
|
|
isValid = false
|
|
|
}
|
|
|
if (!studentSignUp.value.countryId) {
|
|
|
- formErrors.value.countryId = $$t('region')
|
|
|
+ formErrors.value.countryId = $$t('pleaseSelectRegion')
|
|
|
isValid = false
|
|
|
}
|
|
|
if (!studentSignUp.value.minAge && !studentSignUp.value.maxAge) {
|
|
@@ -111,6 +162,10 @@ async function submitStudentSignUp() {
|
|
|
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
|
|
@@ -134,6 +189,7 @@ async function submitStudentSignUp() {
|
|
|
body.areaCode = body.areaCode.replace('+', '')
|
|
|
|
|
|
try {
|
|
|
+ btnLoading.value = true
|
|
|
let res = await request('/education/happyEntry/addHappyEntry', {
|
|
|
method: 'post',
|
|
|
body
|
|
@@ -141,21 +197,23 @@ async function submitStudentSignUp() {
|
|
|
|
|
|
if (res) {
|
|
|
ElMessage.success(t('signUpSuccess'))
|
|
|
- // location.href = '/'
|
|
|
- // 显示成功提示模态框
|
|
|
- // const successModal = new bootstrap.Modal(document.getElementById('successModal'))
|
|
|
- // successModal.show()
|
|
|
- } else {
|
|
|
- // 显示错误提示模态框
|
|
|
- // const errorModal = new bootstrap.Modal(document.getElementById('errorModal'))
|
|
|
- // errorModal.show()
|
|
|
+
|
|
|
+ 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')
|
|
@@ -166,10 +224,10 @@ function changeValue(name) {
|
|
|
return
|
|
|
}
|
|
|
if (!studentSignUp.value.countryId) {
|
|
|
- formErrors.value.countryId = $$t('region')
|
|
|
+ formErrors.value.countryId = $$t('pleaseSelectRegion')
|
|
|
return
|
|
|
}
|
|
|
- if (!studentSignUp.value.minAge && !studentSignUp.value.maxAge) {
|
|
|
+ if (!studentSignUp.value.minAge || !studentSignUp.value.maxAge) {
|
|
|
formErrors.value.age = $$t('pleaseEnterAgeRange')
|
|
|
return
|
|
|
}
|
|
@@ -181,12 +239,24 @@ function changeValue(name) {
|
|
|
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>
|
|
@@ -231,7 +301,7 @@ function changeValue(name) {
|
|
|
.submenu {
|
|
|
position: absolute;
|
|
|
top: 100%;
|
|
|
- z-index: 11;
|
|
|
+ z-index: 20;
|
|
|
width: 100%;
|
|
|
background: var(--white);
|
|
|
position: absolute;
|
|
@@ -293,6 +363,14 @@ function changeValue(name) {
|
|
|
.contact-header-bg {
|
|
|
background-color: white;
|
|
|
}
|
|
|
+
|
|
|
+.iclass {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ right: 5%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
</style>
|
|
|
<template>
|
|
|
<Preloader v-if="loading" />
|
|
@@ -349,7 +427,7 @@ function changeValue(name) {
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <section class="contact-section fix section-padding">
|
|
|
+ <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">
|
|
@@ -405,42 +483,59 @@ function changeValue(name) {
|
|
|
</div>
|
|
|
|
|
|
<div class="col-lg-6 wow fadeInUp" data-wow-delay=".6s">
|
|
|
- <div class="form-clt">
|
|
|
+ <div @click.stop="showAge = !showAge" class="form-clt">
|
|
|
<span>
|
|
|
{{ $t('childAge') }}
|
|
|
<span style="color: red">*</span>
|
|
|
</span>
|
|
|
- <div class="d-flex justify-content-between">
|
|
|
+ <div
|
|
|
+ style="border: 1px solid #e3e3e3; border-radius: 5px; position: relative"
|
|
|
+ class="d-flex justify-content-between align-items-center"
|
|
|
+ >
|
|
|
<input
|
|
|
- style="width: 48%"
|
|
|
+ style="width: 48%; border: none"
|
|
|
type="text"
|
|
|
v-model="studentSignUp.minAge"
|
|
|
name="minAge"
|
|
|
- id="age"
|
|
|
- :placeholder="$t('pleaseEnterMin')"
|
|
|
- @blur="changeValue('minAge')"
|
|
|
+ id="minAge"
|
|
|
+ readonly
|
|
|
+ :placeholder="$t('pleaseSelect')"
|
|
|
/>
|
|
|
- <!-- <span>
|
|
|
- {{ $t('childAge') }}
|
|
|
- <span style="color: red">*</span>
|
|
|
- </span> -->
|
|
|
+ <span>--</span>
|
|
|
<input
|
|
|
- style="width: 48%"
|
|
|
+ style="width: 48%; border: none"
|
|
|
type="text"
|
|
|
v-model="studentSignUp.maxAge"
|
|
|
name="maxAge"
|
|
|
- id="age"
|
|
|
- :placeholder="$t('pleaseEnterMax')"
|
|
|
- @blur="changeValue('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>
|
|
|
- <p v-if="formErrors.age" class="error">
|
|
|
- {{ formErrors.age }}
|
|
|
- </p>
|
|
|
</div>
|
|
|
+ <p v-if="formErrors.age" class="error">
|
|
|
+ {{ formErrors.age }}
|
|
|
+ </p>
|
|
|
</div>
|
|
|
<div class="col-lg-6 wow fadeInUp" data-wow-delay=".6s">
|
|
|
- <div class="form-clt">
|
|
|
+ <div @click.stop="showCountryId = !showCountryId" class="form-clt">
|
|
|
<span>
|
|
|
{{ $t('region') }}
|
|
|
<span style="color: red">*</span>
|
|
@@ -453,21 +548,9 @@ function changeValue(name) {
|
|
|
id="countryId"
|
|
|
readonly
|
|
|
:placeholder="$t('pleaseSelectRegion')"
|
|
|
- @blur="changeValue('countryId')"
|
|
|
/>
|
|
|
- <p v-if="formErrors.countryId" class="error">
|
|
|
- {{ formErrors.countryId }}
|
|
|
- </p>
|
|
|
<i
|
|
|
- style="
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- right: 5%;
|
|
|
- transform: translateY(-50%);
|
|
|
- cursor: pointer;
|
|
|
- "
|
|
|
- :class="`fas ${showCountryId ? 'fa-angle-up' : 'fa-angle-down'}`"
|
|
|
- @click="showCountryId = !showCountryId"
|
|
|
+ :class="`fas iclass ${showCountryId ? 'fa-angle-up' : 'fa-angle-down'}`"
|
|
|
></i>
|
|
|
|
|
|
<ul v-show="showCountryId" class="submenu">
|
|
@@ -475,9 +558,10 @@ function changeValue(name) {
|
|
|
v-for="(item, index) in areaCodeLang"
|
|
|
:key="item.id"
|
|
|
:class="`${studentSignUp.countryId == item.label ? 'liactive' : ''}`"
|
|
|
- @click="
|
|
|
+ @click.stop="
|
|
|
;(studentSignUp.countryId = item.label),
|
|
|
- (showCountryId = !showCountryId)
|
|
|
+ (showCountryId = !showCountryId),
|
|
|
+ changeValue('countryId')
|
|
|
"
|
|
|
>
|
|
|
{{ item.label }}
|
|
@@ -485,6 +569,9 @@ function changeValue(name) {
|
|
|
</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">
|
|
@@ -494,25 +581,24 @@ function changeValue(name) {
|
|
|
</span>
|
|
|
|
|
|
<div style="flex-wrap: nowrap" class="d-flex">
|
|
|
- <div style="box-sizing: border-box; position: relative; max-width: 150px">
|
|
|
+ <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="phone"
|
|
|
- id="phone"
|
|
|
- :placeholder="$t('pleaseEnter')"
|
|
|
+ name="areaCode"
|
|
|
+ id="areaCode"
|
|
|
+ readonly
|
|
|
+ :placeholder="$t('pleaseSelect')"
|
|
|
/>
|
|
|
<i
|
|
|
- style="
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- right: 10%;
|
|
|
- cursor: pointer;
|
|
|
- "
|
|
|
- :class="`fas ${showAreaCode ? 'fa-angle-up' : 'fa-angle-down'}`"
|
|
|
- @click="showAreaCode = !showAreaCode"
|
|
|
+ :class="`fas iclass ${
|
|
|
+ showAreaCode ? 'fa-angle-up' : 'fa-angle-down'
|
|
|
+ }`"
|
|
|
+ style="right: 10%"
|
|
|
></i>
|
|
|
<ul v-show="showAreaCode" style="position: absolute" class="submenu">
|
|
|
<li
|
|
@@ -521,7 +607,7 @@ function changeValue(name) {
|
|
|
:class="`${
|
|
|
studentSignUp.areaCode == '+' + item.value ? 'liactive' : ''
|
|
|
}`"
|
|
|
- @click="
|
|
|
+ @click.stop="
|
|
|
;(studentSignUp.areaCode = '+' + item.value),
|
|
|
(showAreaCode = !showAreaCode)
|
|
|
"
|
|
@@ -541,13 +627,16 @@ function changeValue(name) {
|
|
|
@blur="changeValue('phone')"
|
|
|
/>
|
|
|
</div>
|
|
|
- <p v-if="formErrors.phone" class="error">
|
|
|
+ <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 class="form-clt">
|
|
|
+ <div @click.stop="showCourseType = !showCourseType" class="form-clt">
|
|
|
<span>
|
|
|
{{ $t('courseCategory') }}
|
|
|
<span style="color: red">*</span>
|
|
@@ -560,21 +649,13 @@ function changeValue(name) {
|
|
|
id="courseType"
|
|
|
readonly
|
|
|
:placeholder="$t('pleaseSelectCourseType')"
|
|
|
- @blur="changeValue('courseType')"
|
|
|
/>
|
|
|
- <p v-if="formErrors.courseType" class="error">
|
|
|
- {{ formErrors.courseType }}
|
|
|
- </p>
|
|
|
+ <!-- @blur="changeValue('courseType')" -->
|
|
|
+
|
|
|
<i
|
|
|
- style="
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- right: 5%;
|
|
|
- transform: translateY(-50%);
|
|
|
- cursor: pointer;
|
|
|
- "
|
|
|
- :class="`fas ${showCourseType ? 'fa-angle-up' : 'fa-angle-down'}`"
|
|
|
- @click="showCourseType = !showCourseType"
|
|
|
+ :class="`fas iclass ${
|
|
|
+ showCourseType ? 'fa-angle-up' : 'fa-angle-down'
|
|
|
+ }`"
|
|
|
></i>
|
|
|
|
|
|
<ul v-show="showCourseType" class="submenu">
|
|
@@ -582,9 +663,10 @@ function changeValue(name) {
|
|
|
v-for="(item, index) in courseTypeList"
|
|
|
:key="item.value"
|
|
|
:class="`${studentSignUp.courseType == item.label ? 'liactive' : ''}`"
|
|
|
- @click="
|
|
|
+ @click.stop="
|
|
|
;(studentSignUp.courseType = item.label),
|
|
|
- (showCourseType = !showCourseType)
|
|
|
+ (showCourseType = !showCourseType),
|
|
|
+ changeValue('courseType')
|
|
|
"
|
|
|
>
|
|
|
{{ item.label }}
|
|
@@ -592,6 +674,9 @@ function changeValue(name) {
|
|
|
</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">
|
|
@@ -617,7 +702,12 @@ function changeValue(name) {
|
|
|
class="col-lg-12 wow fadeInUp d-flex justify-content-center align-items-center"
|
|
|
data-wow-delay=".9s"
|
|
|
>
|
|
|
- <button type="submit" class="theme-btn" style="border-radius: 5px">
|
|
|
+ <button
|
|
|
+ type="submit"
|
|
|
+ :disabled="btnLoading"
|
|
|
+ class="theme-btn"
|
|
|
+ style="border-radius: 5px"
|
|
|
+ >
|
|
|
{{ $t('sendMessage') }}
|
|
|
<i class="fa-solid fa-arrow-right-long"></i>
|
|
|
</button>
|