|
|
@@ -53,10 +53,10 @@ async function getAreaCode() {
|
|
|
let res = await request('/country/baseCountry/getCountryCode')
|
|
|
|
|
|
console.log(res, '555')
|
|
|
- alert(res)
|
|
|
+ // alert(res)
|
|
|
if (res && res.data) {
|
|
|
// console.log(locale.value, '555')
|
|
|
- alert('获取区号成功')
|
|
|
+ // alert('获取区号成功')
|
|
|
areaCodeList.value = res.data.map((item) => {
|
|
|
return {
|
|
|
value: item.areaCode,
|
|
|
@@ -64,16 +64,16 @@ async function getAreaCode() {
|
|
|
}
|
|
|
})
|
|
|
} else {
|
|
|
- alert('获取区号失败')
|
|
|
+ // alert('获取区号失败')
|
|
|
}
|
|
|
} catch (error) {}
|
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
|
// console.log(1)
|
|
|
- nextTick(() => {
|
|
|
- getAreaCode()
|
|
|
- })
|
|
|
+ // nextTick(() => {
|
|
|
+ getAreaCode()
|
|
|
+ // })
|
|
|
// getAreaCode()
|
|
|
})
|
|
|
|
|
|
@@ -121,22 +121,27 @@ async function submitStudentSignUp() {
|
|
|
|
|
|
let body = {}
|
|
|
body = { ...studentSignUp.value }
|
|
|
+ console.log(body, 'body')
|
|
|
+
|
|
|
let item = courseTypeList.value.find((item) => item.label == studentSignUp.value.courseType)
|
|
|
let itemArea = areaCodeList.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('+', '')
|
|
|
+ console.log(body, 'body')
|
|
|
|
|
|
try {
|
|
|
let res = await request('/education/happyEntry/addHappyEntry', {
|
|
|
method: 'post',
|
|
|
- body: studentSignUp.value
|
|
|
+ body
|
|
|
})
|
|
|
|
|
|
if (res) {
|
|
|
- ElMessage.success($$t('signUpSuccess'))
|
|
|
- location.href = '/'
|
|
|
+ ElMessage.success(t('signUpSuccess'))
|
|
|
+ // location.href = '/'
|
|
|
// 显示成功提示模态框
|
|
|
// const successModal = new bootstrap.Modal(document.getElementById('successModal'))
|
|
|
// successModal.show()
|
|
|
@@ -287,345 +292,343 @@ function changeValue(name) {
|
|
|
}
|
|
|
</style>
|
|
|
<template>
|
|
|
- <ClientOnly fallback="span">
|
|
|
- <Preloader></Preloader>
|
|
|
- <FixArea></FixArea>
|
|
|
-
|
|
|
- <Header-top-section sectionClass="header-top-section-4" />
|
|
|
- <TopHeader headerClass="header-4" />
|
|
|
- <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>
|
|
|
+ <!-- <ClientOnly fallback="span"> -->
|
|
|
+ <Preloader></Preloader>
|
|
|
+ <FixArea></FixArea>
|
|
|
+
|
|
|
+ <Header-top-section sectionClass="header-top-section-4" />
|
|
|
+ <TopHeader headerClass="header-4" />
|
|
|
+ <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>
|
|
|
|
|
|
- {{ areaCodeList }}
|
|
|
- <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 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>
|
|
|
- <section 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>
|
|
|
+ <section 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>
|
|
|
+ <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 class="form-clt">
|
|
|
+ <span>
|
|
|
+ {{ $t('childAge') }}
|
|
|
+ <span style="color: red">*</span>
|
|
|
+ </span>
|
|
|
+ <div class="d-flex justify-content-between">
|
|
|
<input
|
|
|
+ style="width: 48%"
|
|
|
type="text"
|
|
|
- v-model="studentSignUp.name"
|
|
|
- name="name"
|
|
|
- id="name"
|
|
|
- :placeholder="$t('pleaseEnter')"
|
|
|
- @blur="changeValue('name')"
|
|
|
+ v-model="studentSignUp.minAge"
|
|
|
+ name="minAge"
|
|
|
+ id="age"
|
|
|
+ :placeholder="$t('pleaseEnterMin')"
|
|
|
+ @blur="changeValue('minAge')"
|
|
|
/>
|
|
|
- <p v-if="formErrors.name" class="error">
|
|
|
- {{ formErrors.name }}
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="col-lg-6 wow fadeInUp" data-wow-delay=".6s">
|
|
|
- <div class="form-clt">
|
|
|
- <span>
|
|
|
- {{ $t('childAge') }}
|
|
|
- <span style="color: red">*</span>
|
|
|
- </span>
|
|
|
- <div class="d-flex justify-content-between">
|
|
|
- <input
|
|
|
- style="width: 48%"
|
|
|
- type="text"
|
|
|
- v-model="studentSignUp.minAge"
|
|
|
- name="minAge"
|
|
|
- id="age"
|
|
|
- :placeholder="$t('pleaseEnterMin')"
|
|
|
- @blur="changeValue('minAge')"
|
|
|
- />
|
|
|
- <!-- <span>
|
|
|
+ <!-- <span>
|
|
|
{{ $t('childAge') }}
|
|
|
<span style="color: red">*</span>
|
|
|
</span> -->
|
|
|
- <input
|
|
|
- style="width: 48%"
|
|
|
- type="text"
|
|
|
- v-model="studentSignUp.maxAge"
|
|
|
- name="maxAge"
|
|
|
- id="age"
|
|
|
- :placeholder="$t('pleaseEnterMax')"
|
|
|
- @blur="changeValue('maxAge')"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <p v-if="formErrors.age" class="error">
|
|
|
- {{ formErrors.age }}
|
|
|
- </p>
|
|
|
+ <input
|
|
|
+ style="width: 48%"
|
|
|
+ type="text"
|
|
|
+ v-model="studentSignUp.maxAge"
|
|
|
+ name="maxAge"
|
|
|
+ id="age"
|
|
|
+ :placeholder="$t('pleaseEnterMax')"
|
|
|
+ @blur="changeValue('maxAge')"
|
|
|
+ />
|
|
|
</div>
|
|
|
+ <p v-if="formErrors.age" class="error">
|
|
|
+ {{ formErrors.age }}
|
|
|
+ </p>
|
|
|
</div>
|
|
|
- {{ areaCodeList }}
|
|
|
- <div class="col-lg-6 wow fadeInUp" data-wow-delay=".6s">
|
|
|
- <div 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')"
|
|
|
- @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;
|
|
|
+ </div>
|
|
|
+ <div class="col-lg-6 wow fadeInUp" data-wow-delay=".6s">
|
|
|
+ <div 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')"
|
|
|
+ @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"
|
|
|
+ ></i>
|
|
|
+
|
|
|
+ <ul v-show="showCountryId" class="submenu">
|
|
|
+ <li
|
|
|
+ v-for="(item, index) in areaCodeList"
|
|
|
+ :key="item.id"
|
|
|
+ :class="`${studentSignUp.countryId == item.label ? 'liactive' : ''}`"
|
|
|
+ @click="
|
|
|
+ ;(studentSignUp.countryId = item.label),
|
|
|
+ (showCountryId = !showCountryId)
|
|
|
"
|
|
|
- :class="`fas ${showCountryId ? 'fa-angle-up' : 'fa-angle-down'}`"
|
|
|
- @click="showCountryId = !showCountryId"
|
|
|
- ></i>
|
|
|
-
|
|
|
- <ul v-show="showCountryId" class="submenu">
|
|
|
- <li
|
|
|
- v-for="(item, index) in areaCodeList"
|
|
|
- :key="item.id"
|
|
|
- :class="`${studentSignUp.countryId == item.label ? 'liactive' : ''}`"
|
|
|
- @click="
|
|
|
- ;(studentSignUp.countryId = item.label),
|
|
|
- (showCountryId = !showCountryId)
|
|
|
- "
|
|
|
- >
|
|
|
- {{ item.label }}
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
+ >
|
|
|
+ {{ item.label }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="col-lg-6 wow fadeInUp" data-wow-delay=".7s">
|
|
|
- <div class="form-clt">
|
|
|
- <span>
|
|
|
- {{ $t('yourEmail') }}
|
|
|
- <span style="color: red">*</span>
|
|
|
- </span>
|
|
|
+ </div>
|
|
|
+ <div class="col-lg-6 wow fadeInUp" data-wow-delay=".7s">
|
|
|
+ <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-6 wow fadeInUp" data-wow-delay=".9s">
|
|
|
+ <div 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.email"
|
|
|
- name="email"
|
|
|
- id="email"
|
|
|
- :placeholder="$t('pleaseEnterEmail')"
|
|
|
- @blur="changeValue('email')"
|
|
|
+ v-model="studentSignUp.courseType"
|
|
|
+ name="courseType"
|
|
|
+ id="courseType"
|
|
|
+ readonly
|
|
|
+ :placeholder="$t('pleaseSelectCourseType')"
|
|
|
+ @blur="changeValue('courseType')"
|
|
|
/>
|
|
|
- <p v-if="formErrors.email" class="error">
|
|
|
- {{ formErrors.email }}
|
|
|
+ <p v-if="formErrors.courseType" class="error">
|
|
|
+ {{ formErrors.courseType }}
|
|
|
</p>
|
|
|
+ <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"
|
|
|
+ ></i>
|
|
|
+
|
|
|
+ <ul v-show="showCourseType" class="submenu">
|
|
|
+ <li
|
|
|
+ v-for="(item, index) in courseTypeList"
|
|
|
+ :key="item.value"
|
|
|
+ :class="`${studentSignUp.courseType == item.label ? 'liactive' : ''}`"
|
|
|
+ @click="
|
|
|
+ ;(studentSignUp.courseType = item.label),
|
|
|
+ (showCourseType = !showCourseType)
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ item.label }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="col-lg-6 wow fadeInUp" data-wow-delay=".9s">
|
|
|
- <div class="form-clt">
|
|
|
- <span>
|
|
|
- {{ $t('courseCategory') }}
|
|
|
- <span style="color: red">*</span>
|
|
|
- </span>
|
|
|
- <div class="w-100 h-100 input">
|
|
|
+ </div>
|
|
|
+ <div class="col-lg-6 wow fadeInUp" data-wow-delay=".8s">
|
|
|
+ <div class="form-clt">
|
|
|
+ <span>
|
|
|
+ {{ $t('phone') }}
|
|
|
+ <span style="color: red">*</span>
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <div
|
|
|
+ style="flex-wrap: nowrap; border: 1px solid #e5e5e5; border-radius: 5px"
|
|
|
+ class="d-flex"
|
|
|
+ >
|
|
|
+ <div style="position: relative; max-width: 150px">
|
|
|
<input
|
|
|
+ style="width: 100%; border-radius: 0; border-right: 1px solid #e5e5e5"
|
|
|
type="text"
|
|
|
- v-model="studentSignUp.courseType"
|
|
|
- name="courseType"
|
|
|
- id="courseType"
|
|
|
- readonly
|
|
|
- :placeholder="$t('pleaseSelectCourseType')"
|
|
|
- @blur="changeValue('courseType')"
|
|
|
+ v-model="studentSignUp.areaCode"
|
|
|
+ name="phone"
|
|
|
+ id="phone"
|
|
|
+ :placeholder="$t('pleaseEnter')"
|
|
|
/>
|
|
|
- <p v-if="formErrors.courseType" class="error">
|
|
|
- {{ formErrors.courseType }}
|
|
|
- </p>
|
|
|
<i
|
|
|
style="
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
- right: 5%;
|
|
|
transform: translateY(-50%);
|
|
|
+ right: 10%;
|
|
|
cursor: pointer;
|
|
|
"
|
|
|
- :class="`fas ${showCourseType ? 'fa-angle-up' : 'fa-angle-down'}`"
|
|
|
- @click="showCourseType = !showCourseType"
|
|
|
+ :class="`fas ${showAreaCode ? 'fa-angle-up' : 'fa-angle-down'}`"
|
|
|
+ @click="showAreaCode = !showAreaCode"
|
|
|
></i>
|
|
|
-
|
|
|
- <ul v-show="showCourseType" class="submenu">
|
|
|
+ <ul v-show="showAreaCode" style="position: absolute" class="submenu">
|
|
|
<li
|
|
|
- v-for="(item, index) in courseTypeList"
|
|
|
+ v-for="(item, index) in areaCodeList"
|
|
|
:key="item.value"
|
|
|
- :class="`${studentSignUp.courseType == item.label ? 'liactive' : ''}`"
|
|
|
+ :class="`${
|
|
|
+ studentSignUp.areaCode == '+' + item.value ? 'liactive' : ''
|
|
|
+ }`"
|
|
|
@click="
|
|
|
- ;(studentSignUp.courseType = item.label),
|
|
|
- (showCourseType = !showCourseType)
|
|
|
+ ;(studentSignUp.areaCode = '+' + item.value),
|
|
|
+ (showAreaCode = !showAreaCode)
|
|
|
"
|
|
|
>
|
|
|
- {{ item.label }}
|
|
|
+ {{ item.label }}({{ item.value }})
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="col-lg-6 wow fadeInUp" data-wow-delay=".8s">
|
|
|
- <div class="form-clt">
|
|
|
- <span>
|
|
|
- {{ $t('phone') }}
|
|
|
- <span style="color: red">*</span>
|
|
|
- </span>
|
|
|
-
|
|
|
- <div
|
|
|
- style="flex-wrap: nowrap; border: 1px solid #e5e5e5; border-radius: 5px"
|
|
|
- class="d-flex"
|
|
|
- >
|
|
|
- <div style="position: relative; max-width: 150px">
|
|
|
- <input
|
|
|
- style="width: 100%; border-radius: 0; border-right: 1px solid #e5e5e5"
|
|
|
- type="text"
|
|
|
- v-model="studentSignUp.areaCode"
|
|
|
- name="phone"
|
|
|
- id="phone"
|
|
|
- :placeholder="$t('pleaseEnter')"
|
|
|
- />
|
|
|
- <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"
|
|
|
- ></i>
|
|
|
- <ul v-show="showAreaCode" style="position: absolute" class="submenu">
|
|
|
- <li
|
|
|
- v-for="(item, index) in areaCodeList"
|
|
|
- :key="item.value"
|
|
|
- :class="`${
|
|
|
- studentSignUp.areaCode == '+' + item.value ? 'liactive' : ''
|
|
|
- }`"
|
|
|
- @click="
|
|
|
- ;(studentSignUp.areaCode = '+' + item.value),
|
|
|
- (showAreaCode = !showAreaCode)
|
|
|
- "
|
|
|
- >
|
|
|
- {{ item.label }}({{ item.value }})
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
|
|
|
- <input
|
|
|
- style="border: none"
|
|
|
- type="text"
|
|
|
- v-model="studentSignUp.phone"
|
|
|
- name="phone"
|
|
|
- id="phone"
|
|
|
- :placeholder="$t('pleaseEnter')"
|
|
|
- @blur="changeValue('phone')"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <p v-if="formErrors.phone" class="error">
|
|
|
- {{ formErrors.phone }}
|
|
|
- </p>
|
|
|
+ <input
|
|
|
+ style="border: none"
|
|
|
+ type="text"
|
|
|
+ v-model="studentSignUp.phone"
|
|
|
+ name="phone"
|
|
|
+ id="phone"
|
|
|
+ :placeholder="$t('pleaseEnter')"
|
|
|
+ @blur="changeValue('phone')"
|
|
|
+ />
|
|
|
</div>
|
|
|
+ <p v-if="formErrors.phone" class="error">
|
|
|
+ {{ formErrors.phone }}
|
|
|
+ </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" class="theme-btn">
|
|
|
- {{ $t('sendMessage') }}
|
|
|
- <i class="fa-solid fa-arrow-right-long"></i>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
+ <div
|
|
|
+ class="col-lg-12 wow fadeInUp d-flex justify-content-center align-items-center"
|
|
|
+ data-wow-delay=".9s"
|
|
|
+ >
|
|
|
+ <button type="submit" class="theme-btn">
|
|
|
+ {{ $t('sendMessage') }}
|
|
|
+ <i class="fa-solid fa-arrow-right-long"></i>
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- </form>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </section>
|
|
|
- <FooterSection></FooterSection>
|
|
|
- </ClientOnly>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <FooterSection></FooterSection>
|
|
|
+ <!-- </ClientOnly> -->
|
|
|
</template>
|
