https://www.ciwf.com.cn/static/js/common.js

1var ajax_url = "/template/ajax.php";
2var page_language = $("html").attr("lang");
3const QRCodeOpts_web = {
4	errorCorrectionLevel: 'Q',
5	type: 'image/png',
6	quality: 1,
7	margin: 1,
8	scale: 3,
9	color: {
10		dark:"#000000FF",
11		light:"#FFFFFFFF"
12	}
13}
14
15$(document).ready(function(){
16
17	ceremony(); //首页盛典
18	getTestimonial();
19
20	// 按钮：返回页面顶部
21	$(window).scroll(function() {
22		if ($(this).scrollTop() != 0) {
23			$(".gotop").fadeIn();
24		} else {
25			$(".gotop").fadeOut();
26		}
27	});
28
29	// 留言板
30	$("#guestbook").on("click",function(){
31		$('#modalGuestbook').modal('show');
32	});
33	$("#guestbook_btn_send").on("click",function(){
34		guestbookSend();
35	});
36
37	// 返回顶部
38	$(".gotop").on("click",function(){
39		$("body,html").animate({scrollTop: 0},800);
40	});
41    backtoTop();
42
43    $(window).resize(function () {
44        backtoTop();
45    }); 
46
47	const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
48	const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));
49
50	if($(".previewPicture").length>0){
51		productMod(); //产品模块
52		$('#btn_submitEnquiry').on("click",function(){
53			submitEnquiry();
54		});
55	}
56
57	if($(".btn_productsClassCollapse").length>0){
58		$('#productsSizer').on('show.bs.collapse', function(e){
59			$('.btn_productsClassCollapse').text('收起筛选');
60		})
61		$('#productsSizer').on('hide.bs.collapse', function(e){
62			$('.btn_productsClassCollapse').text('显示筛选');
63		})
64		$('.alert_productclass').on('closed.bs.alert', function () {
65		  	window.location.href="1311.html"
66		})
67	}
68
69	// 展商名录：展区选择
70	if (document.getElementById('exhibitSectionGroup')) {
71		document.getElementById('exhibitSectionGroup').addEventListener('change', function(event) {
72	    if (event.target.type === 'radio') {
73	      document.getElementById('form-exhibitor-search').submit();
74	    }
75		});
76	}
77
78	// 展商名录：行业选择
79	if (document.getElementById('tradeIdGroup')) {
80		document.getElementById('tradeIdGroup').addEventListener('change', function(event) {
81	    if (event.target.type === 'radio') {
82	      document.getElementById('form-exhibitor-search').submit();
83	    }
84		});
85	}
86
87	// 展商名录和产品：搜索
88	if (document.getElementById('btn_submit_search')) {
89		document.getElementById('btn_submit_search').addEventListener('click', function(event) {
90			let search_key = document.getElementById("search_key").value;
91			if(search_key.length<=0){
92				alert("输入"+this.dataset.caption+"关键字");
93				document.getElementById("search_key").focus();
94				return false;
95			}
96	    document.getElementById('form-exhibitor-search').submit();
97		});
98	}
99
100	// 展商名录：展商邀约二维码生成
101	if(typeof(invite_url)!="undefined"){
102		QRCode.toDataURL(invite_url, QRCodeOpts_web, function (err, url) {
103			if (err) throw err
104			document.getElementById('inviteQrcode').src = url;
105		});
106	}
107
108	const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
109	const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
110
111	// 移动端弹出底部导航菜单
112	$(".navik-menu>ul").clone().appendTo("#mobileMenu .mobileMenu-wrap");
113	$(".mobileMenu-wrap>ul").addClass("list-unstyled");
114	$(".mobileMenu-wrap>ul li:first").remove();
115	$(".mobileMenu-wrap .dropdown-plus").remove();
116	$(".mobileMenu-wrap>ul>li.dropdown_menu>a").addClass("btn btn-link my-1").attr("role","button");
117	$(".mobileMenu-wrap ul ul").addClass("list-inline");
118	$(".mobileMenu-wrap ul ul li").addClass("list-inline-item");
119	$(".mobileMenu-wrap>ul>li:not(.dropdown_menu)>a,.mobileMenu-wrap ul ul li a").addClass("btn btn-outline-dark my-1").attr("role","button");
120	$("#moreMenu,#mobileMenuClose").on("click",function(event){
121		event.preventDefault();
122        $("#mobileMenu").slideToggle();
123	});
124
125})
126
127function backtoTop() {
128    var Hwith = window.innerWidth || document.documentElement && document.documentElement.clientWidth || 0;
129    if (Hwith >= 1339) {
130        $(".fixed-right").removeClass("backfix-s").addClass("backfix");
131    } else if (Hwith < 1339) {
132        $(".fixed-right").removeClass("backfix").addClass("backfix-s");
133    }
134}
135
136function ceremony() {
137	var ceremonySlider0 = new Swiper('.ceremony-slider-0', {
138		slidesPerView: 2,
139		spaceBetween: 10,
140		roundLengths: true,
141	    observer:true,
142	    observeParents:true,
143    	breakpoints: { 
144			768: {  //当屏幕宽度大于等于320
145				slidesPerView: 3,
146				spaceBetween: 10
147			},
148			992: {  //当屏幕宽度大于等于768 
149				slidesPerView: 4,
150				spaceBetween: 20
151			},
152			1200: {  //当屏幕宽度大于等于1280
153				slidesPerView: 5,
154				spaceBetween: 30
155			}
156		},
157		pagination: {
158			el: '.swiper-ceremony-pagination-0',
159			dynamicBullets: true,
160			clickable: true
161		},
162	});
163	var ceremonySlider1 = new Swiper('.ceremony-slider-1', {
164		slidesPerView: 2,
165		spaceBetween: 10,
166		roundLengths: true,
167	    observer:true,
168	    observeParents:true,
169		breakpoints: { 
170			768: {  //当屏幕宽度大于等于320
171				slidesPerView: 3,
172				spaceBetween: 10
173			},
174			992: {  //当屏幕宽度大于等于768 
175				slidesPerView: 4,
176				spaceBetween: 20
177			},
178			1200: {  //当屏幕宽度大于等于1280
179				slidesPerView: 5,
180				spaceBetween: 30
181			}
182		},
183		pagination: {
184			el: '.swiper-ceremony-pagination-1',
185			dynamicBullets: true,
186			clickable: true
187		},
188	});
189	var ceremonySlider2 = new Swiper('.ceremony-slider-2', {
190		slidesPerView: 2,
191		spaceBetween: 10,
192		roundLengths: true,
193	    observer:true,
194	    observeParents:true,
195		breakpoints: { 
196			768: {  //当屏幕宽度大于等于320
197				slidesPerView: 3,
198				spaceBetween: 10
199			},
200			992: {  //当屏幕宽度大于等于768 
201				slidesPerView: 4,
202				spaceBetween: 20
203			},
204			1200: {  //当屏幕宽度大于等于1280
205				slidesPerView: 5,
206				spaceBetween: 30
207			}
208		},
209		pagination: {
210			el: '.swiper-ceremony-pagination-2',
211			dynamicBullets: true,
212			clickable: true
213		},
214	});
215	var ceremonySlider3 = new Swiper('.ceremony-slider-3', {
216		slidesPerView: 2,
217		spaceBetween: 10,
218		roundLengths: true,
219	    observer:true,
220	    observeParents:true,
221		breakpoints: { 
222			768: {  //当屏幕宽度大于等于320
223				slidesPerView: 3,
224				spaceBetween: 10
225			},
226			992: {  //当屏幕宽度大于等于768 
227				slidesPerView: 4,
228				spaceBetween: 20
229			},
230			1200: {  //当屏幕宽度大于等于1280
231				slidesPerView: 5,
232				spaceBetween: 30
233			}
234		},
235		pagination: {
236			el: '.swiper-ceremony-pagination-3',
237			dynamicBullets: true,
238			clickable: true
239		},
240	});
241
242}
243
244function guestbookSend(){
245	var _btnSend = $("#guestbook_btn_send");
246	var compellation = $('#guestbook_compellation').val() || '',
247		contact = $('#guestbook_contact').val() || '',
248		content = $('#guestbook_content').val() || '',
249		nameboard = $('#guestbook_nameboard').val() || '',
250		source = window.location.href;
251
252	if (compellation.length<2 || contact.length<2 || content.length<2) {
253		return false;

254	}else{
255		_btnSend.attr("disabled", "true");
256		_btnSend.html('<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span> 正在发送...');
257		$.ajax({
258			url: ajax_url,
259			type: "POST",
260			dataType: "json",
261			data: {action:"guestbook",compellation:compellation,contact:contact,content:content,nameboard:nameboard,source:source},
262			success: function (data) {
263				_btnSend.removeAttr("disabled");//启用按钮  
264				_btnSend.text("发送");  
265				$('.guestbook-input').addClass('d-none');
266				$('.guestbook-success').removeClass('d-none');
267			},
268			error: function (XMLHttpRequest, textStatus, errorThrown) {
269				_btnSend.removeAttr("disabled");//启用按钮  
270				_btnSend.text("发送");  
271				alert("程序出错guestbookSend：" + textStatus);
272			}
273		});
274	}
275
276}
277
278// canvas-->image
279function convertCanvasToImage(canvas){
280    //新Image对象,可以理解为DOM;
281    var image = new Image();
282    //canvas.toDataURL返回的是一串Base64编码的URL,当然,浏览器自己肯定支持
283    //指定格式PNG
284    image.src = canvas.toDataURL("image/png");
285    return image;
286}
287
288//  产品模块相关
289function productMod(){
290
291	// 产品：单个产品详细页中的产品图片预览
292	$(".thumbnailProducts").on("mouseenter",function(event){
293		var imgsrc=$(this).data("src");
294		var imgtype=$(this).data("type");
295		$('.thumbnailProducts').removeClass('active');
296		$(this).addClass('active');
297		$('.previewPicture video,.previewPicture img').remove();
298		switch(imgtype)
299		{
300			case "image":
301				$('.previewPicture').prepend('<img src="'+imgsrc+'" class="fit-scale-down" />');
302				$('.bigPic img').attr("src",imgsrc)
303				break;
304			case "video":
305				$('.previewPicture').prepend('<video src="'+imgsrc+'" controls="controls" class="embed-responsive-item">您的浏览器不支持 video 标签。</video>');
306				break;
307		}
308	});
309
310	var pic=$(".previewPicture");
311	var magnify=$(".m-slide .mask");
312	var bigpic=$(".m-slide .bigPic");
313	var objimg=$(".m-slide .bigPic img");
314
315	pic.mousemove(function(e){
316		if($('.previewPicture video').length>0){
317			return;
318		}
319		magnify.show();
320		bigpic.show();
321		var pagex=e.pageX;
322		var pagey=e.pageY;
323		var pictop=pic.offset().top;
324		var picleft=pic.offset().left;
325		var magnifyw=magnify.width();
326		var magnifyh=magnify.height();
327		var magnifytop=pagey-pictop-magnifyh/2;
328		var magnifyleft=pagex-picleft-magnifyw/2;
329		var picw=pic.width()-magnifyw;
330		var pich=pic.height()-magnifyh;
331		magnifytop=magnifytop<0?0:magnifytop;
332		magnifyleft=magnifyleft<0?0:magnifyleft;
333		magnifytop=magnifytop>pich?pich:magnifytop;
334		magnifyleft=magnifyleft>picw?picw:magnifyleft;
335		magnify.css({top:magnifytop,left:magnifyleft});
336		var minl=bigpic.width()-objimg.width();
337		var mint=bigpic.height()-objimg.height();
338		var objimgl=-magnifyleft*2;
339		var objimgt=-magnifytop*2;
340		objimgl=objimgl<minl?minl:objimgl;
341		objimgt=objimgt<mint?mint:objimgt;
342		objimg.css({top:objimgt,left:objimgl});
343	});
344	pic.mouseleave(function(){
345		magnify.hide();
346		bigpic.hide();
347	})
348
349	// 
350	$('#carouselProductImgAtlas').on('slide.bs.carousel', function(e){
351		$('#carouselProductImgAtlas .curPage').text(e.to+1);
352	})
353
354	// 同家其他产品swiper
355    var swiper = new Swiper('.swiper-otherProductsList', {
356      slidesPerView: 5,
357      spaceBetween: 30,
358      slidesPerGroup: 5,
359      loopFillGroupWithBlank: true,
360      pagination: {
361        el: '.swiper-pagination',
362        clickable: true,
363      },
364      navigation: {
365        nextEl: '.swiper-button-next',
366        prevEl: '.swiper-button-prev',
367      },
368      breakpoints: {
369        992: {  //当屏幕宽度小于等于
370          slidesPerView: 4,
371          spaceBetween: 30,
372      	  slidesPerGroup: 4,
373        },
374        768: {
375          slidesPerView: 3,
376          spaceBetween: 20,
377          slidesPerGroup: 3,
378        },
379        575: {
380          slidesPerView: 2,
381          spaceBetween: 10,
382          slidesPerGroup: 2,
383        },
384      },
385    });
386}
387
388// 单产品详情页：询盘表单提交
389function submitEnquiry(){
390	var p_id=$('#p_id').val();
391	var u_id=$('#u_id').val();
392	var content=$('#enquiry_content').val();
393	var compellation=$('#enquiry_compellation').val();
394	var company=$('#enquiry_company').val();
395	var tel=$('#enquiry_tel').val();
396	var email=$('#enquiry_email').val();
397	var pass=false;
398	if(content.length<=0){
399		alert('请输入询盘内容.');
400	}else if(compellation.length<=0){
401		alert('请输入您的姓名.');
402	}else if(company.length<=0){
403		alert('请输入公司名称.');
404	}else if(tel.length<=0){
405		alert('请输入联系电话.');
406	}else if(email.length<=0){
407		alert('请输入电子邮箱.');
408	}else{
409		pass=true;
410	}
411
412	// console.log($('form[name="formEnquiry"]').serialize()); //输出字符串
413	// console.log($('form[name="formEnquiry"]').serializeArray()); //输出数组
414
415	if(pass){
416		$.ajax({
417			url: ajax_url,
418			type: "POST",
419			dataType: "json",
420			data: {action:"enquiry",p_id:p_id,u_id:u_id,content:content,compellation:compellation,company:company,tel:tel,email:email},

421			success: function (data) {
422				// console.info(data);
423				if(data["errcode"]==0){
424					alert('提交成功！\n展商将通过你的电话或电子邮箱与你联系。');
425					$('#enquiryModal').modal('hide');
426					$('#enquiry_content').val('');
427				}else{
428					alert('提交失败。');
429				}
430			},
431			error: function (XMLHttpRequest, textStatus, errorThrown) {
432				alert("程序出错submitEnquiry：" + textStatus);
433			}
434		});
435	}
436}
437
438// 首页客户评价
439function getTestimonial(){
440	var result='';
441	$.getJSON("/static/js/testimonial.json", function(data){
442		$.each(data.message_list, function(i,item){
443			result+='<div class="swiper-slide px-3">';
444			result+='<div class="testimonial card rounded-lg shadow border-0">';
445			result+='<div class="testimonial-avatar"><img src="'+item.avatar+'" alt="'+item.name+'" class="img-fluid"></div>';
446			result+='<div class="text">';
447			result+='<div class="testimonial-quote"><svg class="symbol" aria-hidden="true"><use xlink:href="#quote-right"/></svg></div>';
448			result+='<div class="testimonial-content overflow-auto">';
449			result+='<p class="testimonial-text">'+item.content+'</p>';
450			result+='</div>';
451			result+='<strong>'+item.name+'</strong>';
452			result+='</div>';
453			result+='</div>';
454			result+='</div>';
455		});
456		$('.testimonials-slider .swiper-wrapper').empty().append(result);
457		var testimonialsSlider = new Swiper('.testimonials-slider', {
458			slidesPerView: 1,
459			roundLengths: true,
460			breakpoints: {
461				1200: {
462					slidesPerView: 2
463				}
464			},
465			pagination: {
466				el: '.swiper-pagination',
467				dynamicBullets: true,
468				clickable: true
469			},
470		});
471
472	});
473}
474
475//获取url中的参数
476function getUrlParam(name) {
477	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
478	var r = window.location.search.substr(1).match(reg);
479	if (r != null) return decodeURI(r[2]); return "";
480}