nuxt_site/pages/contact.vue
2024-05-02 21:28:18 +08:00

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>