generated from nuxt/nuxt_site
439 lines
14 KiB
Vue
439 lines
14 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>
|
||
<!-- <div class="top">
|
||
</div> -->
|
||
<Header></Header>
|
||
<!-- <Carousel></Carousel> -->
|
||
<ProductBanner :title='ProductBanner_title' :Subtitle="ProductBanner_Subtitle"></ProductBanner>
|
||
|
||
<section>
|
||
<div class="product">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="product_left col-xs-12 col-sm-12 col-md-12 col-lg-3">
|
||
<div class="product_left_menu">
|
||
<h2>{{ $t('home.products.type_title') }}</h2>
|
||
<ul id="accordion" class="accordion">
|
||
<li v-for='item in ProductTypeList_namelist'
|
||
:class="item.product_type_guid == detail_data.product_type_guid ? 'active' : ''">
|
||
<nuxt-link :to="getHerf('/product/product_list/' + item.product_type_id + '-1')" class="jump">
|
||
<div class="link">
|
||
{{ item.product_type_name }}
|
||
</div>
|
||
</nuxt-link>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="product_max col-xs-12 col-sm-12 col-md-12 col-lg-9">
|
||
<div class="row productbetween">
|
||
|
||
<div class="productzoomimg col-xs-12 col-sm-12 col-md-12 col-lg-6">
|
||
<Magnify :imgSrc='checkimg' :imgBigSrc='checkimg' :imgBigRect='imgBigRect' rate="200">
|
||
</Magnify>
|
||
<div class="exzoom">
|
||
<div class="exzoom_nav">
|
||
<p class="exzoom_nav_inner">
|
||
<span :class="count - 1 == i ? 'exzoom_span current' : 'exzoom_span'"
|
||
v-for="(item, i) in product_list_img" :key="i" @mouseenter="changetype">
|
||
<img :src="item" width="60">
|
||
</span>
|
||
</p>
|
||
</div>
|
||
<p class="exzoom_btn">
|
||
<a href="javascript:void(0);" class="exzoom_prev_btn" @click="exzoo_click(0)">
|
||
<
|
||
</a>
|
||
<a href="javascript:void(0);" class="exzoom_next_btn" @click="exzoo_click(1)">
|
||
>
|
||
</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="productnametitle col-xs-12 col-sm-12 col-md-12 col-lg-6">
|
||
<h1>{{ detail_data.product_name }}</h1>
|
||
<p></p>
|
||
<span @click="concatjump"> {{ $t('home.products.detail.contact') }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="productmorecontent">
|
||
<div class="productshow_title">
|
||
<span></span>
|
||
<h3> {{ $t('home.products.detail.description') }}</h3>
|
||
</div>
|
||
<div v-html="detail_data.product_details" class="detail_class">
|
||
|
||
</div>
|
||
|
||
|
||
<div>
|
||
<h2 class="collapse_title">{{ $t('home.products.detail.qustion') }}</h2>
|
||
<div class="collapse_detail">
|
||
<el-collapse v-model="activeNames" @change="handleChange" accordion>
|
||
<div class="detail_div" v-for='(item, i) in product_faq'>
|
||
<el-collapse-item :title="item.faq_questions" :name="i">
|
||
<div>{{ item.faq_answer }}</div>
|
||
</el-collapse-item>
|
||
</div>
|
||
</el-collapse>
|
||
|
||
</div>
|
||
</div>
|
||
<div id="procontact" class="productmorecontent">
|
||
<div class="productshow_title">
|
||
<span></span>
|
||
<h3> {{ $t('home.products.detail.contact') }}</h3>
|
||
</div>
|
||
<div role="form" lang="en-US">
|
||
<div>
|
||
|
||
<div class="feedbackForm">
|
||
<div class="line">
|
||
<input type="text" v-model="form_data.leave_message_name" size="40"
|
||
:placeholder="$t('common.message_us.name')" />
|
||
</div>
|
||
<div class="line">
|
||
<input type="text" v-model="form_data.leave_message_phone" size="40"
|
||
:placeholder="$t('common.message_us.tel')" />
|
||
</div>
|
||
<div class="line">
|
||
<input type="email" v-model="form_data.leave_message_email" size="40"
|
||
:placeholder="$t('common.message_us.email')" />
|
||
</div>
|
||
<div class="line">
|
||
<textarea v-model="form_data.leave_message_info" cols="40" rows="10"
|
||
:placeholder="$t('common.message_us.msg')"></textarea>
|
||
</div>
|
||
<div class="messageUsForm__error ">{{ errorMsg }}</div>
|
||
<input class="btn" type="submit" :value="$t('common.message_us.submit')"
|
||
@click="form_submit" /><br />
|
||
</div>
|
||
</div>
|
||
<div v-show="showSuccess">{{ $t('common.message_us.success') }}</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="productmorecontent">
|
||
<div class="productshow_title">
|
||
<span></span>
|
||
<h3> {{ $t('home.products.detail.other') }}</h3>
|
||
</div>
|
||
<div>
|
||
<ProductInfiniteRotation :slidesPerView="slidesPerView" :bannerList="bannerList"></ProductInfiniteRotation>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</section>
|
||
<Final></Final>
|
||
<PopupSidebar></PopupSidebar>
|
||
<PopupMessageUs></PopupMessageUs>
|
||
<!-- <PopupImagePreview :images="images" v-model="current"></PopupImagePreview> -->
|
||
</template>
|
||
|
||
<script setup>
|
||
let tdk = ref({})
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
// 预对接
|
||
let product_list_img = ref([])
|
||
let bannerList = ref([])
|
||
let product_faq = ref([])
|
||
const { t, locale } = useI18n()
|
||
let all_data = reactive([{
|
||
product_type_id: 0,
|
||
product_type_link: null,
|
||
product_type_name: t('home.products.all'),
|
||
}])
|
||
let ProductBanner_Subtitle = ref([t('common.header.home'), t('common.header.products')])
|
||
let ProductBanner_title = ref()
|
||
let checkimg = ref('')
|
||
let count = ref(1)
|
||
let form_data = ref({
|
||
leave_message_name: '',
|
||
leave_message_phone: '',
|
||
leave_message_email: '',
|
||
leave_message_info: '',
|
||
})
|
||
let imgRect = ref({ h: 40, w: 50, l: 0 })
|
||
let imgBigRect = ref({ h: 50, w: 50, l: 51, t: 0 })
|
||
const slidesPerView = ref(3)
|
||
/** 基础变量 **/
|
||
onMounted(() => {
|
||
createMediaList({
|
||
480(m) {
|
||
if (m.matches) {
|
||
slidesPerView.value = 1
|
||
} else {
|
||
slidesPerView.value = 3
|
||
}
|
||
}
|
||
})
|
||
// createMediaList({
|
||
// 1199(ctx) {
|
||
// if (ctx.matches) {
|
||
// imgRect.value = {w: 35, l: 0}
|
||
// console.log(ctx, 1199, true);
|
||
// imgBigRect.value = {h: 50, w: 50, l: 35, t: 0}
|
||
// } else {
|
||
// imgRect.value = {w: 45, l: 0}
|
||
// console.log(ctx, 1199, false);
|
||
// imgBigRect.value = {h: 50, w: 50, l: 45, t: 0}
|
||
// }
|
||
//
|
||
// },
|
||
//
|
||
// // 1399(ctx) {
|
||
// // if (ctx.matches) {
|
||
// // imgRect.value = {w: 45, l: 0}
|
||
// // console.log(ctx, 1399, true);
|
||
// // imgBigRect.value = {h: 50, w: 50, l: 48, t: 0}
|
||
// // }
|
||
// // },
|
||
//
|
||
// 767(ctx) {
|
||
// if (ctx.matches) {
|
||
//
|
||
// imgRect.value = {w: 57, l: 0}
|
||
// console.log(ctx, 767, true);
|
||
// } else {
|
||
// imgRect.value = {w: 75, l: 0}
|
||
// console.log(ctx, 767, false);
|
||
// imgBigRect.value = {h: 0, w: 0, l: 0, t: 0}
|
||
// }
|
||
// },
|
||
// 991(ctx) {
|
||
// if (ctx.matches) {
|
||
//
|
||
// imgRect.value = {w: 75, l: 0}
|
||
// console.log(ctx, 991, true);
|
||
// imgBigRect.value = {h: 0, w: 0, l: 0, t: 0}
|
||
// } else {
|
||
// imgRect.value = {w: 35, l: 0}
|
||
// console.log(ctx, 991, false);
|
||
// imgBigRect.value = {h: 0, w: 0, l: 0, t: 0}
|
||
// }
|
||
//
|
||
// },
|
||
// })
|
||
/**
|
||
* 字体自适应，当小于880的时候字体-=1，480的时候-=1
|
||
* */
|
||
fontSizeReactive({
|
||
880: 1,
|
||
480: 1,
|
||
})
|
||
})
|
||
const changetype = function () {
|
||
let element = document.getElementsByClassName('exzoom_span')
|
||
console.log(element, '@@@@@')
|
||
for (let i = 0; i < element.length; i++) {
|
||
element[i].addEventListener('mouseenter', function () {
|
||
for (let s = 0; s < element.length; s++) {
|
||
element[s].classList.remove('current')
|
||
|
||
}
|
||
element[i].classList.add('current')
|
||
count.value = i + 1;
|
||
checkimg.value = product_list_img.value[count.value - 1]
|
||
});
|
||
}
|
||
|
||
}
|
||
let queryParams = ({
|
||
product_id: parseInt(route.params.id),
|
||
locale: locale.value
|
||
})
|
||
let localeParams = ({
|
||
// product_type_id: 0,
|
||
|
||
locale: locale.value
|
||
|
||
})
|
||
let detail_data = ref('')
|
||
// const getProductInfo = function () {
|
||
useFetch('/api/product/getProductInfo', { params: queryParams }).then(res => {
|
||
detail_data.value = JSON.parse(res.data.value).data
|
||
product_list_img.value = detail_data.value.product_img.split(',')
|
||
checkimg.value = product_list_img.value[0]
|
||
// let name=ProductTypeList_namelist.value.filter(f=>f.product_type_guid==detail_data.value.product_type_guid)
|
||
ProductBanner_title.value = detail_data.value.product_name
|
||
})
|
||
// }
|
||
let ProductTypeList = ref([])
|
||
let ProductTypeList_namelist = ref([])
|
||
useFetch('/api/product/getProductTypeTree', { params: localeParams }).then(res => {
|
||
ProductTypeList.value = JSON.parse(res.data.value).data || []
|
||
// ProductTypeList_namelist.value = ProductTypeList.value[0].children
|
||
ProductTypeList_namelist.value = [...all_data, ...ProductTypeList.value]
|
||
// console.log(ProductTypeList_namelist.value);
|
||
// getProductInfo()
|
||
|
||
})
|
||
useFetch('/api/faq/getFaqList', { params: { locale: locale.value } }).then(res => {
|
||
product_faq.value = JSON.parse(res.data.value).data || []
|
||
})
|
||
|
||
useFetch('/api/product/getProductList', { params: { locale: locale.value, product_type_id: 0 } }).then(res => {
|
||
console.log(JSON.parse(res.data.value));
|
||
JSON.parse(res.data.value).data.forEach(element => {
|
||
element.product_img = element.product_img.split(",")[0];
|
||
bannerList.value.push({
|
||
banner_img: element.product_img,
|
||
text: element.product_name,
|
||
id: element.product_id,
|
||
src: element.product_link || '/product/details/' + element.product_id
|
||
})
|
||
});
|
||
console.log(bannerList.value, '@@@bannerList');
|
||
|
||
})
|
||
|
||
|
||
const concatjump = function () {
|
||
var specificPosition = document.getElementById('procontact').offsetTop;
|
||
// 滚动到该位置
|
||
window.scrollTo({
|
||
top: specificPosition,
|
||
behavior: 'smooth' // 平滑滚动效果
|
||
});
|
||
}
|
||
const exzoo_click = function (val) {
|
||
|
||
if (val == 1) {
|
||
|
||
if (count.value == product_list_img.value.length) {
|
||
count.value = 1
|
||
checkimg.value = product_list_img.value[count.value - 1]
|
||
} else {
|
||
// console.log(checkimg.value);
|
||
count.value++
|
||
checkimg.value = product_list_img.value[count.value - 1]
|
||
}
|
||
} else {
|
||
|
||
if (count.value <= 1) {
|
||
count.value = product_list_img.value.length
|
||
checkimg.value = product_list_img.value[count.value - 1]
|
||
} else {
|
||
count.value--
|
||
checkimg.value = product_list_img.value[count.value - 1]
|
||
}
|
||
}
|
||
console.log(checkimg.value);
|
||
}
|
||
const activeNames = ref(['1'])
|
||
const handleChange = (val) => {
|
||
console.log(val)
|
||
}
|
||
|
||
const errorMsg = ref("");
|
||
const showSuccess = ref(false)
|
||
|
||
const form_submit = function () {
|
||
const phoneRegex = /^[+\- ()0-9]*$/;
|
||
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
|
||
|
||
let { leave_message_name, leave_message_phone, leave_message_email, leave_message_info } = form_data.value
|
||
|
||
if (!leave_message_name.trim()) {
|
||
errorMsg.value = t('common.message_us.name_error')
|
||
return
|
||
}
|
||
if (!leave_message_phone.trim() || !phoneRegex.test(leave_message_phone)) {
|
||
errorMsg.value = t('common.message_us.tel_error')
|
||
return
|
||
}
|
||
if (!leave_message_email.trim() || !emailRegex.test(leave_message_email)) {
|
||
errorMsg.value = t('common.message_us.email_error')
|
||
return
|
||
}
|
||
if (!leave_message_info.trim()) {
|
||
errorMsg.value = t('common.message_us.msg_error')
|
||
return
|
||
}
|
||
|
||
useFetch('/api/msg/addLeaveMessage', { params: form_data.value }).then(res => {
|
||
|
||
console.log(JSON.parse(res.data.value));
|
||
if (JSON.parse(res.data.value).code == 0) {
|
||
errorMsg.value = ""
|
||
showSuccess.value = true
|
||
setTimeout(() => {
|
||
showSuccess.value = false
|
||
}, 3000)
|
||
form_data.value = ({
|
||
leave_message_name: '',
|
||
leave_message_phone: '',
|
||
leave_message_email: '',
|
||
leave_message_info: '',
|
||
})
|
||
} else {
|
||
ElMessage.error(t('home.products.detail.error'))
|
||
}
|
||
})
|
||
|
||
}
|
||
|
||
useFetch('/api/tdk/getTdk', { params: { tdk_type: 1, locale: locale.value } }).then(res => {
|
||
tdk.value = JSON.parse(res.data.value).data
|
||
})
|
||
|
||
</script>
|
||
|
||
<style scoped src="~/assets/css/ProductList/Detail/index.scss"></style>
|
||
<style scoped src="~/assets/css/ProductList/Detail/media.scss"></style>
|
||
<style scoped src="~/assets/css/index/font/iconfont.css"></style>
|
||
<style scoped src="~/assets/css/index/font2/iconfont.css"></style>
|
||
|
||
<style scoped>
|
||
.productmorecontent {
|
||
margin-top: 60px;
|
||
}
|
||
|
||
.productmorecontent h3 {
|
||
font-size: 36px;
|
||
color: #A72027;
|
||
font-weight: bold;
|
||
padding-left: 20px;
|
||
border-left: 4px solid #A72027;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.productmorecontent p {
|
||
font-size: 16px;
|
||
color: #000;
|
||
line-height: 30px;
|
||
}
|
||
|
||
.productmorecontent img {
|
||
width: 100%;
|
||
/* vertical-align: middle; */
|
||
display: block;
|
||
}
|
||
|
||
.productmorecontent tbody tr:nth-child(odd) {
|
||
background-color: #f2f2f2;
|
||
}
|
||
|
||
.productmorecontent tbody tr:nth-child(even) {
|
||
background-color: #ffffff;
|
||
}
|
||
</style> |