|
@@ -5,20 +5,25 @@ const { $$t } = useStoreI18n()
|
|
|
|
|
|
const areaCodeList = ref([])
|
|
|
const showCourseType = ref(false)
|
|
|
+const loading = ref(false)
|
|
|
const showAreaCode = ref(false) // 区号
|
|
|
const showCountryId = ref(false) //地区
|
|
|
const courseTypeList = ref([
|
|
|
{
|
|
|
value: '1',
|
|
|
- label: $$t('level_1')
|
|
|
+ label: $$t('beginning')
|
|
|
},
|
|
|
{
|
|
|
value: '2',
|
|
|
- label: $$t('level_2')
|
|
|
+ label: $$t('growing')
|
|
|
},
|
|
|
{
|
|
|
value: '3',
|
|
|
- label: $$t('level_3')
|
|
|
+ label: $$t('breaking')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '4',
|
|
|
+ label: $$t('expanding')
|
|
|
}
|
|
|
])
|
|
|
|
|
@@ -34,6 +39,7 @@ const studentSignUp = ref({
|
|
|
areaCode: '+86'
|
|
|
})
|
|
|
|
|
|
+// 表单错误信息
|
|
|
const formErrors = ref({
|
|
|
surname: '',
|
|
|
name: '',
|
|
@@ -43,38 +49,33 @@ const formErrors = ref({
|
|
|
phone: '',
|
|
|
courseType: ''
|
|
|
})
|
|
|
-
|
|
|
// 国家获取区号接口
|
|
|
async function getAreaCode() {
|
|
|
// alert('获取区号')
|
|
|
console.log('获取区号')
|
|
|
-
|
|
|
+ loading.value = true
|
|
|
try {
|
|
|
let res = await request('/country/baseCountry/getCountryCode')
|
|
|
|
|
|
console.log(res, '555')
|
|
|
- // alert(res)
|
|
|
if (res && res.data) {
|
|
|
- // console.log(locale.value, '555')
|
|
|
- // alert('获取区号成功')
|
|
|
- areaCodeList.value = res.data.map((item) => {
|
|
|
- return {
|
|
|
- value: item.areaCode,
|
|
|
- label: item.countryNameZh
|
|
|
- }
|
|
|
- })
|
|
|
+ areaCodeList.value = res.data
|
|
|
+ loading.value = false
|
|
|
} else {
|
|
|
- // alert('获取区号失败')
|
|
|
}
|
|
|
} catch (error) {}
|
|
|
}
|
|
|
|
|
|
+const areaCodeLang = computed(() =>
|
|
|
+ areaCodeList.value.map(({ areaCode, countryNameZh, countryNameEn, id }) => ({
|
|
|
+ value: areaCode,
|
|
|
+ label: locale.value == 'zh' ? countryNameZh : countryNameEn,
|
|
|
+ id
|
|
|
+ }))
|
|
|
+)
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
- // console.log(1)
|
|
|
- // nextTick(() => {
|
|
|
getAreaCode()
|
|
|
- // })
|
|
|
- // getAreaCode()
|
|
|
})
|
|
|
|
|
|
// 学生报名
|
|
@@ -95,7 +96,7 @@ async function submitStudentSignUp() {
|
|
|
isValid = false
|
|
|
}
|
|
|
if (!studentSignUp.value.countryId) {
|
|
|
- formErrors.value.name = $$t('region')
|
|
|
+ formErrors.value.countryId = $$t('region')
|
|
|
isValid = false
|
|
|
}
|
|
|
if (!studentSignUp.value.minAge && !studentSignUp.value.maxAge) {
|
|
@@ -124,14 +125,13 @@ async function submitStudentSignUp() {
|
|
|
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)
|
|
|
+ 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('+', '')
|
|
|
- console.log(body, 'body')
|
|
|
|
|
|
try {
|
|
|
let res = await request('/education/happyEntry/addHappyEntry', {
|
|
@@ -290,345 +290,346 @@ function changeValue(name) {
|
|
|
color: red;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
+.contact-header-bg {
|
|
|
+ background-color: white;
|
|
|
+}
|
|
|
</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>
|
|
|
+ <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>
|
|
|
|
|
|
- <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 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>
|
|
|
- </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>
|
|
|
- <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.minAge"
|
|
|
- name="minAge"
|
|
|
- id="age"
|
|
|
- :placeholder="$t('pleaseEnterMin')"
|
|
|
- @blur="changeValue('minAge')"
|
|
|
- />
|
|
|
- <!-- <span>
|
|
|
- {{ $t('childAge') }}
|
|
|
+ <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> -->
|
|
|
+ </span>
|
|
|
<input
|
|
|
- style="width: 48%"
|
|
|
type="text"
|
|
|
- v-model="studentSignUp.maxAge"
|
|
|
- name="maxAge"
|
|
|
- id="age"
|
|
|
- :placeholder="$t('pleaseEnterMax')"
|
|
|
- @blur="changeValue('maxAge')"
|
|
|
+ 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>
|
|
|
- <p v-if="formErrors.age" class="error">
|
|
|
- {{ formErrors.age }}
|
|
|
- </p>
|
|
|
</div>
|
|
|
- </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">
|
|
|
+
|
|
|
+ <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.countryId"
|
|
|
- name="countryId"
|
|
|
- id="countryId"
|
|
|
- readonly
|
|
|
- :placeholder="$t('pleaseSelectRegion')"
|
|
|
- @blur="changeValue('countryId')"
|
|
|
+ v-model="studentSignUp.name"
|
|
|
+ name="name"
|
|
|
+ id="name"
|
|
|
+ :placeholder="$t('pleaseEnter')"
|
|
|
+ @blur="changeValue('name')"
|
|
|
/>
|
|
|
- <p v-if="formErrors.countryId" class="error">
|
|
|
- {{ formErrors.countryId }}
|
|
|
+ <p v-if="formErrors.name" class="error">
|
|
|
+ {{ formErrors.name }}
|
|
|
</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)
|
|
|
- "
|
|
|
- >
|
|
|
- {{ item.label }}
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
</div>
|
|
|
</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>
|
|
|
- <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') }}
|
|
|
+
|
|
|
+ <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>
|
|
|
+ {{ $t('childAge') }}
|
|
|
<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')"
|
|
|
- />
|
|
|
- <p v-if="formErrors.courseType" class="error">
|
|
|
- {{ formErrors.courseType }}
|
|
|
+ </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>
|
|
|
- <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)
|
|
|
+ </div>
|
|
|
+ </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;
|
|
|
"
|
|
|
- >
|
|
|
- {{ item.label }}
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
+ :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 areaCodeLang"
|
|
|
+ :key="item.id"
|
|
|
+ :class="`${studentSignUp.countryId == item.label ? 'liactive' : ''}`"
|
|
|
+ @click="
|
|
|
+ ;(studentSignUp.countryId = item.label),
|
|
|
+ (showCountryId = !showCountryId)
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ item.label }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</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 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 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')"
|
|
|
+ />
|
|
|
+ <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 areaCodeLang"
|
|
|
+ :key="item.value"
|
|
|
+ :class="`${
|
|
|
+ studentSignUp.areaCode == '+' + item.value ? 'liactive' : ''
|
|
|
+ }`"
|
|
|
+ @click="
|
|
|
+ ;(studentSignUp.areaCode = '+' + item.value),
|
|
|
+ (showAreaCode = !showAreaCode)
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ item.label }}({{ item.value }})
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
|
|
|
- <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"
|
|
|
+ style="margin-left: 4%"
|
|
|
type="text"
|
|
|
- v-model="studentSignUp.areaCode"
|
|
|
+ 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-6 wow fadeInUp" data-wow-delay=".8s">
|
|
|
+ <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.courseType"
|
|
|
+ name="courseType"
|
|
|
+ id="courseType"
|
|
|
+ readonly
|
|
|
+ :placeholder="$t('pleaseSelectCourseType')"
|
|
|
+ @blur="changeValue('courseType')"
|
|
|
/>
|
|
|
+ <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 ${showAreaCode ? 'fa-angle-up' : 'fa-angle-down'}`"
|
|
|
- @click="showAreaCode = !showAreaCode"
|
|
|
+ :class="`fas ${showCourseType ? 'fa-angle-up' : 'fa-angle-down'}`"
|
|
|
+ @click="showCourseType = !showCourseType"
|
|
|
></i>
|
|
|
- <ul v-show="showAreaCode" style="position: absolute" class="submenu">
|
|
|
+
|
|
|
+ <ul v-show="showCourseType" class="submenu">
|
|
|
<li
|
|
|
- v-for="(item, index) in areaCodeList"
|
|
|
+ v-for="(item, index) in courseTypeList"
|
|
|
:key="item.value"
|
|
|
- :class="`${
|
|
|
- studentSignUp.areaCode == '+' + item.value ? 'liactive' : ''
|
|
|
- }`"
|
|
|
+ :class="`${studentSignUp.courseType == item.label ? 'liactive' : ''}`"
|
|
|
@click="
|
|
|
- ;(studentSignUp.areaCode = '+' + item.value),
|
|
|
- (showAreaCode = !showAreaCode)
|
|
|
+ ;(studentSignUp.courseType = item.label),
|
|
|
+ (showCourseType = !showCourseType)
|
|
|
"
|
|
|
>
|
|
|
- {{ item.label }}({{ item.value }})
|
|
|
+ {{ item.label }}
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
-
|
|
|
+ </div>
|
|
|
+ </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
|
|
|
- style="border: none"
|
|
|
type="text"
|
|
|
- v-model="studentSignUp.phone"
|
|
|
- name="phone"
|
|
|
- id="phone"
|
|
|
- :placeholder="$t('pleaseEnter')"
|
|
|
- @blur="changeValue('phone')"
|
|
|
+ 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>
|
|
|
- <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
|
|
|
+ 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">
|
|
|
+ {{ $t('sendMessage') }}
|
|
|
+ <i class="fa-solid fa-arrow-right-long"></i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </form>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
- <FooterSection></FooterSection>
|
|
|
- <!-- </ClientOnly> -->
|
|
|
+ </section>
|
|
|
+ <FooterSection></FooterSection>
|
|
|
+ </template>
|
|
|
</template>
|