210 lines
7.4 KiB
Vue
210 lines
7.4 KiB
Vue
<template>
|
|
|
|
<Head>
|
|
<Title>{{ tdk?.tdk_title }}</Title>
|
|
<Meta :content=tdk?.tdk_keyword name="keywords" />
|
|
<Meta :content=tdk?.tdk_description name="description" />
|
|
<Meta name="baidu-site-verification" content="" />
|
|
</Head>
|
|
<Header></Header>
|
|
<Poster :type=1 :title="$t('common.poster.contact')"></Poster>
|
|
|
|
<div class="Contact-main">
|
|
<div class="--box--">
|
|
<section>
|
|
|
|
<div class="contactus">
|
|
<div class="container">
|
|
<!-- 联系方式 -->
|
|
<div class="contactus_hd">
|
|
<div class="section1_title">
|
|
<h2 class="section1_title_text">{{ $t('contact.method') }}</h2>
|
|
</div>
|
|
<h3>{{ $t('contact.desc') }}</h3>
|
|
<div class="row contactus_way">
|
|
<div class="contactus_way_li col-xs-12 col-sm-6 col-md-6 col-lg-3">
|
|
<div class="ways">
|
|
<div class="wayscon">
|
|
<i class="iconfont"></i>
|
|
<span> {{ $t('contact.card.loc') }} </span>
|
|
<p>{{ $t('contact.address') }}</p>
|
|
<!-- <p>{{ contactUsData.contact_us_address }}</p> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="contactus_way_li col-xs-12 col-sm-6 col-md-6 col-lg-3">
|
|
<div class="ways">
|
|
<div class="wayscon">
|
|
<i class="iconfont"></i>
|
|
<span>{{ $t('contact.card.tel') }}</span>
|
|
<p>{{ contactUsData.contact_us_phone }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="contactus_way_li col-xs-12 col-sm-6 col-md-6 col-lg-3">
|
|
<div class="ways">
|
|
<div class="wayscon">
|
|
<i class="iconfont"></i>
|
|
<span>{{ $t('contact.card.email') }}</span>
|
|
<p><a class="contact_us_link" href="mailto:postmaster@lbie-group.com">{{
|
|
contactUsData.contact_us_mail }}</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="contactus_way_li col-xs-12 col-sm-6 col-md-6 col-lg-3">
|
|
<div class="ways">
|
|
<div class="wayscon">
|
|
<i class="iconfont"></i>
|
|
<span>{{ $t('contact.card.whatsapp') }}</span>
|
|
<p>{{ contactUsData.contact_us_mobile_phone }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 联系方式填写表单 -->
|
|
<div class="contactus_bd">
|
|
<div class="section1_title">
|
|
<h2 class="section1_title_text"> {{ $t('contact.please') }} </h2>
|
|
</div>
|
|
<div class="contactus_table">
|
|
<div class="row">
|
|
<div role="form" class="wpcf7" id="wpcf7-f19-o2" lang="en-US" dir="ltr">
|
|
<div class="screen-reader-response">
|
|
<p role="status" aria-live="polite" aria-atomic="true"></p>
|
|
<ul></ul>
|
|
</div>
|
|
<form novalidate="novalidate">
|
|
<div class="feedbackForm">
|
|
<div class="line">
|
|
<input type="text" name="leave_message_name" v-model="formData.leave_message_name" size="40"
|
|
aria-required="true" aria-invalid="false" :placeholder="$t('common.message_us.name')">
|
|
</div>
|
|
<div class="line">
|
|
<input type="text" name="leave_message_phone" v-model="formData.leave_message_phone" size="40"
|
|
aria-required="true" aria-invalid="false" :placeholder="$t('common.message_us.tel')">
|
|
</div>
|
|
<div class="line">
|
|
<input type="email" name="leave_message_email" v-model="formData.leave_message_email"
|
|
size="40" aria-required="true" aria-invalid="false"
|
|
:placeholder="$t('common.message_us.email')">
|
|
</div>
|
|
<div class="line">
|
|
<textarea name="leave_message_info" v-model="formData.leave_message_info" cols="40" rows="10"
|
|
aria-required="true" aria-invalid="false"
|
|
:placeholder="$t('common.message_us.msg')"></textarea>
|
|
</div>
|
|
<div class="messageUsForm__error ">{{ errorMsg }}</div>
|
|
<p> <input type="submit" @click.prevent="submit" :value="$t('common.message_us.submit')"
|
|
class="btn"><br>
|
|
</p>
|
|
<div v-show="showSuccess">{{ $t('common.message_us.success') }}</div>
|
|
</div>
|
|
<div aria-hidden="true"></div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<PopupSidebar></PopupSidebar>
|
|
<PopupMessageUs></PopupMessageUs>
|
|
<Final></Final>
|
|
</template>
|
|
|
|
|
|
<!-- <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script> -->
|
|
<script setup>
|
|
|
|
/** 基础变量 **/
|
|
const { t, locale } = useI18n()
|
|
|
|
|
|
const errorMsg = ref("");
|
|
|
|
|
|
// 获取Tdk
|
|
let tdk = ref({})
|
|
useFetch('/api/tdk/getTdk', { params: { tdk_type: 5, locale: locale.value } }).then(res => {
|
|
tdk.value = JSON.parse(res.data.value).data
|
|
})
|
|
|
|
// 获取联系我们内容
|
|
let contactUsData = ref({})
|
|
useFetch('/api/contactUs/getContactUs').then(res => {
|
|
contactUsData.value = JSON.parse(res.data.value).data
|
|
})
|
|
|
|
onMounted(() => {
|
|
fontSizeReactive({
|
|
880: 1,
|
|
480: 1,
|
|
})
|
|
htmlAddAnimations({
|
|
tagDom: 'Contact-main', preload: 1.3
|
|
})
|
|
})
|
|
|
|
|
|
const initialState = {
|
|
leave_message_name: "",
|
|
leave_message_phone: "",
|
|
leave_message_email: "",
|
|
leave_message_info: ""
|
|
}
|
|
|
|
const showSuccess = ref(false)
|
|
|
|
const formData = reactive({ ...initialState })
|
|
const submit = () => {
|
|
const phoneRegex = /^[+\- ()0-9]*$/;
|
|
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
|
|
|
|
if (!formData.leave_message_name.trim()) {
|
|
errorMsg.value = t('common.message_us.name_error')
|
|
return
|
|
}
|
|
if (!formData.leave_message_phone.trim() || !phoneRegex.test(formData.leave_message_phone)) {
|
|
errorMsg.value = t('common.message_us.tel_error')
|
|
return
|
|
}
|
|
if (!formData.leave_message_email.trim() || !emailRegex.test(formData.leave_message_email)) {
|
|
errorMsg.value = t('common.message_us.email_error')
|
|
return
|
|
}
|
|
if (!formData.leave_message_info.trim()) {
|
|
errorMsg.value = t('common.message_us.msg_error')
|
|
return
|
|
}
|
|
|
|
useFetch('/api/msg/addLeaveMessage', { params: formData }).then(res => {
|
|
if (JSON.parse(res.data.value).code !== 0) {
|
|
ElMessage.error(t('home.products.detail.error'))
|
|
return
|
|
}
|
|
errorMsg.value = ""
|
|
showSuccess.value = true
|
|
setTimeout(() => {
|
|
showSuccess.value = false
|
|
}, 3000)
|
|
Object.assign(formData, initialState)
|
|
})
|
|
}
|
|
|
|
|
|
|
|
/**export**/
|
|
defineExpose({
|
|
middleware: 'auth'
|
|
})
|
|
|
|
</script>
|
|
|
|
<style scoped src="~/assets/css/business/contact/index.scss"></style>
|
|
<style scoped src="~/assets/css/business/contact/media.scss"></style> |