generated from nuxt/nuxt_site
102 lines
3.5 KiB
Vue
102 lines
3.5 KiB
Vue
<!-- TODO i18n -->
|
|
<template>
|
|
<div @click="slideUp" ref="messageUs" :class="{ messageUs: true, show: show }" style="height: 40px;">
|
|
<h3 class="messageUsHeader eMailIco">{{ $t('common.message_us.please') }}</h3>
|
|
<span @click.stop="slideOut" :class="{ closeBtn: true, show: show }"></span>
|
|
<div>
|
|
<form>
|
|
<div class="messageUsForm">
|
|
<div class="line">
|
|
<input type="text" name="leave_message_name" v-model="formData.leave_message_name" size="40"
|
|
: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"
|
|
: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"
|
|
:placeholder="$t('common.message_us.email')">
|
|
</div>
|
|
<div class="line">
|
|
<textarea name="leave_message_info" cols="40" rows="10"
|
|
:placeholder="$t('common.message_us.msg')" v-model="formData.leave_message_info"></textarea>
|
|
</div>
|
|
<p>
|
|
<div class="messageUsForm__error ">{{ errorMsg }}</div>
|
|
<div v-show="showSuccess">{{ $t('common.message_us.success') }}</div>
|
|
<input @click.prevent="submit" class="btn" type="submit" :value="$t('common.message_us.submit')">
|
|
</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { t, locale } = useI18n();
|
|
|
|
const messageUs = ref(null);
|
|
|
|
const show = ref(false);
|
|
|
|
const slideOut = () => {
|
|
show.value = false;
|
|
}
|
|
|
|
const slideUp = () => {
|
|
show.value = true;
|
|
}
|
|
|
|
const initialState = {
|
|
leave_message_name: "",
|
|
leave_message_phone: "",
|
|
leave_message_email: "",
|
|
leave_message_info: ""
|
|
}
|
|
const showSuccess = ref(false)
|
|
|
|
const formData = reactive({ ...initialState })
|
|
|
|
const errorMsg = ref("");
|
|
|
|
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 = ""
|
|
Object.assign(formData, initialState)
|
|
showSuccess.value = true
|
|
setTimeout(() => {
|
|
showSuccess.value = false
|
|
slideOut()
|
|
}, 1000)
|
|
})
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped src="~/assets/css/Popup/message-us.scss" lang="scss"></style> |