301 lines
9.0 KiB
Vue
301 lines
9.0 KiB
Vue
|
<template>
|
|||
|
|
<div class="bg-[#F2F2F2]">
|
|||
|
|
<!-- Contact section -->
|
|||
|
|
<div class="box2">
|
|||
|
|
<div class="flex flex-wrap justify-center pb-[50px] md:pb-[50px] px-4 md:px-0">
|
|||
|
|
<div class="md:w-[50%]" style="display: flex;align-items: self-start;flex-wrap: wrap;justify-content: right;height: 800px;margin-top: 119px;">
|
|||
|
|
<img :src="images_top" class="w-[585px] h-[585px]" alt="Product Image">
|
|||
|
|
<div class="flex justify-start w-[585px] ">
|
|||
|
|
<img @click="imgsChange(item)" class="w-[102px] h-[102px] pr-[10px]" :src="item" v-for="(item,index) in info.images" :key="index">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="w-full md:w-[50%] px-4 md:px-[115px] pt-6 md:pt-[115px]">
|
|||
|
|
<div class="contactTit">
|
|||
|
|
<h3 class="text-[22px] md:text-[30px] font-bold mb-[20px]" style="color: #3D3D3D;">{{locale == 'zh' ? info.title : info.en_title }}</h3>
|
|||
|
|
<div class="mb-[30px]"> {{locale == 'zh' ? info.profile : info.en_profile }}</div>
|
|||
|
|
<a href="#contactpro">
|
|||
|
|
<button
|
|||
|
|
type="submit"
|
|||
|
|
class="contactBut flex justify-center items-center bg-[#0C4DA9]"
|
|||
|
|
>
|
|||
|
|
<img src="/images/zixun.png" class="w-[32px] " >
|
|||
|
|
<span class="text-[#ffffff] text-[22px] ml-2" >{{ $t('contact_b5') }}</span>
|
|||
|
|
</button>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="contactTit">
|
|||
|
|
<h5 class="text-[22px] md:text-[24px] font-bold h5s" style="color: #0C4DA9;">{{ $t('products_details') }}</h5>
|
|||
|
|
<div class="mt-[20px]">{{locale == 'zh' ? info.content : info.en_content }}</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="contactTit" id="contactpro">
|
|||
|
|
<h5 class="text-[22px] md:text-[24px] font-bold h5s" style="color: #0C4DA9;">{{ $t('contact_b4') }}</h5>
|
|||
|
|
<form class="contactForm mt-6 md:mt-12 w-full md:w-[700px]" @submit.prevent="submitForm">
|
|||
|
|
<input
|
|||
|
|
v-model="formData.name"
|
|||
|
|
class="contactInput w-full md:w-[700px]"
|
|||
|
|
type="text"
|
|||
|
|
:placeholder="$t('message_b1')"
|
|||
|
|
/>
|
|||
|
|
<input
|
|||
|
|
v-model="formData.emil"
|
|||
|
|
class="contactInput mt-[15px] md:mt-[30px] w-full md:w-[700px]"
|
|||
|
|
type="text"
|
|||
|
|
:placeholder="$t('message_b2')"
|
|||
|
|
/>
|
|||
|
|
<input
|
|||
|
|
v-model="formData.mobile"
|
|||
|
|
class="contactInput mt-[15px] md:mt-[30px] w-full md:w-[700px]"
|
|||
|
|
type="text"
|
|||
|
|
:placeholder="$t('message_b3')"
|
|||
|
|
/>
|
|||
|
|
<input
|
|||
|
|
v-model="formData.company"
|
|||
|
|
class="contactInput mt-[15px] md:mt-[30px] w-full md:w-[700px]"
|
|||
|
|
type="text"
|
|||
|
|
:placeholder="$t('message_b4')"
|
|||
|
|
/>
|
|||
|
|
<input
|
|||
|
|
v-model="formData.subject"
|
|||
|
|
class="contactInput mt-[15px] md:mt-[30px] w-full md:w-[700px]"
|
|||
|
|
type="text"
|
|||
|
|
:placeholder="$t('message_b5')"
|
|||
|
|
/>
|
|||
|
|
<div class="relative mt-4 md:mt-8 w-full md:w-[700px]">
|
|||
|
|
<textarea
|
|||
|
|
v-model="formData.content"
|
|||
|
|
id="myTextarea"
|
|||
|
|
:placeholder="$t('message_b6')"
|
|||
|
|
rows="6"
|
|||
|
|
maxlength="100"
|
|||
|
|
class="w-full md:w-[700px]"
|
|||
|
|
></textarea>
|
|||
|
|
<div class="char-count">{{ formData.content.length }}/100</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="flex justify-start mt-4 md:mt-6">
|
|||
|
|
<button
|
|||
|
|
type="submit"
|
|||
|
|
class="contactBut"
|
|||
|
|
>
|
|||
|
|
{{ $t('contact_b5') }}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
import { ref, reactive ,onMounted} from 'vue'
|
|||
|
|
import { useI18n } from 'vue-i18n'
|
|||
|
|
const { locale,t} = useI18n()
|
|||
|
|
import { useStore } from '~/store'
|
|||
|
|
import $api from '@/service/webRequest'
|
|||
|
|
const store = useStore()
|
|||
|
|
const route = useRoute()
|
|||
|
|
const id = ref('')
|
|||
|
|
const images_top = ref('')
|
|||
|
|
const info = ref({})
|
|||
|
|
// 表单数据
|
|||
|
|
const formData = reactive({
|
|||
|
|
name: '',
|
|||
|
|
mobile: '',
|
|||
|
|
content: '',
|
|||
|
|
emil:'',
|
|||
|
|
subject:'',
|
|||
|
|
company:''
|
|||
|
|
})
|
|||
|
|
onMounted(() => {
|
|||
|
|
id.value = route.params.id;
|
|||
|
|
getInfo()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const getInfo=()=>{
|
|||
|
|
$api.get("/api/websiteproduct/details/"+id.value)
|
|||
|
|
.then((res: any) => {
|
|||
|
|
console.log(res)
|
|||
|
|
info.value = res.data.data
|
|||
|
|
images_top.value = res.data.data.image
|
|||
|
|
})
|
|||
|
|
.catch((err) => {
|
|||
|
|
console.dir(err)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
// 社交分享功能
|
|||
|
|
const shareToLink = (item) => {
|
|||
|
|
// 实现Instagram分享
|
|||
|
|
window.open(item.link, '_blank');
|
|||
|
|
}
|
|||
|
|
const imgsChange = (e) => {
|
|||
|
|
images_top.value = e;
|
|||
|
|
}
|
|||
|
|
// 表单提交方法
|
|||
|
|
const submitForm = () => {
|
|||
|
|
console.log(formData);
|
|||
|
|
|
|||
|
|
// 这里可以添加表单验证逻辑
|
|||
|
|
if (!formData.name) {
|
|||
|
|
alert(t('message_name_required'))
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!formData.mobile) {
|
|||
|
|
alert(t('message_phone_required'))
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (!formData.content) {
|
|||
|
|
alert(t('message_message_required'))
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
$api.post("/api/websiteproduct/leave_word",{
|
|||
|
|
name:formData.name,
|
|||
|
|
mobile:formData.mobile,
|
|||
|
|
content:formData.content,
|
|||
|
|
emil:formData.emil,
|
|||
|
|
subject:formData.subject,
|
|||
|
|
company:formData.company,
|
|||
|
|
product_id:id.value
|
|||
|
|
})
|
|||
|
|
.then((res: any) => {
|
|||
|
|
console.log(res)
|
|||
|
|
if(res.data.status==200){
|
|||
|
|
alert(t('contact_success'))
|
|||
|
|
}else{
|
|||
|
|
alert(t('contact_error'))
|
|||
|
|
}
|
|||
|
|
formData.name = '';
|
|||
|
|
formData.mobile = '';
|
|||
|
|
formData.content = '';
|
|||
|
|
formData.subject = '';
|
|||
|
|
formData.emil = '';
|
|||
|
|
formData.company = '';
|
|||
|
|
})
|
|||
|
|
.catch((err) => {
|
|||
|
|
console.dir(err)
|
|||
|
|
})
|
|||
|
|
// 重置表单
|
|||
|
|
// formData.name = ''
|
|||
|
|
// formData.mobile = ''
|
|||
|
|
// formData.content = ''
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
/* 可以添加一些特定的样式，但大部分已经通过Tailwind实现 */
|
|||
|
|
.animated {
|
|||
|
|
animation-duration: 1s;
|
|||
|
|
animation-fill-mode: both;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fadeInLeft {
|
|||
|
|
animation-name: fadeInLeft;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes fadeInLeft {
|
|||
|
|
from {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translate3d(-100%, 0, 0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
to {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.contactTit {
|
|||
|
|
background: #ffffff;
|
|||
|
|
margin-bottom:30px;
|
|||
|
|
padding: 30px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
.contactTit h5 span {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 22px;
|
|||
|
|
color: #1C1C1C;
|
|||
|
|
line-height: 26px;
|
|||
|
|
text-align: left;
|
|||
|
|
margin-left: 4px;
|
|||
|
|
}
|
|||
|
|
.h5s::before {
|
|||
|
|
content:'1';
|
|||
|
|
width: 3px;
|
|||
|
|
height: 26px;
|
|||
|
|
margin-right: 10px;
|
|||
|
|
background: #0C4DA9;
|
|||
|
|
}
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.contactTit h3 span {
|
|||
|
|
font-size: 16px;
|
|||
|
|
line-height: 20px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.contactInput{border-radius:6px;
|
|||
|
|
border: 1px solid #BBBBBB;font-size: 24px;color: #000;height: 50px;}
|
|||
|
|
.contactInput::placeholder {color: #999999;}
|
|||
|
|
.contactInput:focus {outline: none;}
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.contactInput {
|
|||
|
|
font-size: 18px;
|
|||
|
|
height: 40px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
#myTextarea {padding: 10px;border-radius: 6px;margin-top: 32px;border: 1px solid #BBBBBB;font-weight: 400;font-size: 24px;color: #000;line-height: 22px;resize: none; /* 禁止用户调整文本域大小 */}
|
|||
|
|
#myTextarea::placeholder {color: #999999;}
|
|||
|
|
#myTextarea:focus {outline: none;}
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
#myTextarea {
|
|||
|
|
font-size: 16px;
|
|||
|
|
line-height: 18px;
|
|||
|
|
margin-top: 16px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.char-count {position: absolute;bottom: 5px; /* 根据需要调整距离底部的位置 */right: 10px; /* 根据需要调整距离右侧的位置 */font-size: 12px; /* 根据需要调整字体大小 */color: #999999;}
|
|||
|
|
.text-area-container {position: relative;width: 100%;}
|
|||
|
|
.contactBut{ width: 232px;
|
|||
|
|
height: 54px;
|
|||
|
|
border-radius: 0px 0px 0px 0px;
|
|||
|
|
border: 1px solid #0C4DA9;
|
|||
|
|
color: #0C4DA9;
|
|||
|
|
}
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.contactBut {
|
|||
|
|
font-size: 18px;
|
|||
|
|
line-height: 22px;
|
|||
|
|
}
|
|||
|
|
.contactBut::after {
|
|||
|
|
width: 100px;
|
|||
|
|
height: 10px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.contactForm{width: 100%;}
|
|||
|
|
.contactTit h8 {
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 24px;
|
|||
|
|
color: #175FCB;
|
|||
|
|
line-height: 28px;
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.contactTit h8 {
|
|||
|
|
font-size: 20px;
|
|||
|
|
line-height: 24px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.contactdx8{
|
|||
|
|
width: 100%;
|
|||
|
|
margin-top: 5px;
|
|||
|
|
border-top: 2px solid #175FCB;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|