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-[500px]" @submit.prevent="submitForm">
|
||
<input
|
||
v-model="formData.name"
|
||
class="contactInput w-full md:w-[500px]"
|
||
type="text"
|
||
:placeholder="$t('message_b1')"
|
||
/>
|
||
<input
|
||
v-model="formData.emil"
|
||
class="contactInput mt-[15px] md:mt-[30px] w-full md:w-[500px]"
|
||
type="text"
|
||
:placeholder="$t('message_b2')"
|
||
/>
|
||
<input
|
||
v-model="formData.mobile"
|
||
class="contactInput mt-[15px] md:mt-[30px] w-full md:w-[500px]"
|
||
type="text"
|
||
:placeholder="$t('message_b3')"
|
||
/>
|
||
<input
|
||
v-model="formData.company"
|
||
class="contactInput mt-[15px] md:mt-[30px] w-full md:w-[500px]"
|
||
type="text"
|
||
:placeholder="$t('message_b4')"
|
||
/>
|
||
<input
|
||
v-model="formData.subject"
|
||
class="contactInput mt-[15px] md:mt-[30px] w-full md:w-[500px]"
|
||
type="text"
|
||
:placeholder="$t('message_b5')"
|
||
/>
|
||
<div class="relative mt-4 md:mt-8 w-full md:w-[500px]">
|
||
<textarea
|
||
v-model="formData.content"
|
||
id="myTextarea"
|
||
:placeholder="$t('message_b6')"
|
||
rows="6"
|
||
maxlength="100"
|
||
class="w-full md:w-[500px]"
|
||
></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>
|
||
|