const fullURL = window.location.href; const url = new URL(fullURL); const param = url.searchParams.get("param"); const langType = url.searchParams.get("langType"); const api2 = "https://www.pychr.com/pychr/pubGoodsShow/findGoodsShow"; const types = [ // "实木门", // "复合板门", // "椅子", // "组合", "床", "床垫", "客厅", "餐厅", "浴室柜", "衣柜", "现代橱柜", "古典橱柜", ]; function init() { const url = api2 + "?ID=" + param; getDate(url); } function getDate(url) { fetch(url) .then((response) => response.json()) .then((res) => { creatHtml(res.data); genSwiper(res.data.regoodsShow.otherPic); }); } function creatHtml({regoodsShow}) { const father = document.getElementById("content"); const childrens = new Array(); childrens.push( creatChildren({ title: regoodsShow.name, context: regoodsShow.briefIntroduction, }) ); childrens.push( creatChildren({ title: langType == 1 ? "类型" : "Category", context: regoodsShow.mainIntroduction, }) ); // childrens.push( // creatChildren({ // title: langType == 1?"日期":"Data", // context: dateForm(regoodsShow.CreatedAt), // }) // ); childrens.forEach((item) => { father.appendChild(item); }); creatImg(regoodsShow.goodsMainPic, "goodsMainPic"); creatImg(regoodsShow.goodsAssistantPic, "goodsAssistantPic"); // console.log("regoodsShow", regoodsShow); createChild2(regoodsShow); } function creatChildren(data) { const container = document.createElement("div"); container.className = "tf-post"; const children = document.createElement("div"); children.className = "tftitle-style4"; children.innerText = data.title; const childrenP = document.createElement("p"); childrenP.innerText = data.context; container.appendChild(children); container.appendChild(childrenP); return container; } function creatImg(url, id) { const img = document.getElementById(id); img.src = url == "" ? img.src : url; img.style.height = "800px"; img.style.width = "100%"; img.style.objectFit = "contain"; } function createChild2(data) { const titles = document.getElementsByClassName("title-section"); const uls = document.getElementsByClassName("icon-box-infor"); const showList = document.querySelectorAll("#isShow"); titles[0].children[1].innerText = data.mainIntroduction == "" ? "标题主介绍" : data.mainIntroduction; if ( data.secondIntroductionTitle != "" && data.secondIntroduction != "" && data.secondIntroduction != undefined && data.secondIntroductionTitle != undefined ) { showList[0].classList.remove("none"); showList[1].classList.remove("none"); titles[1].children[0].innerText = data.secondIntroductionTitle == "" ? "副标题" : data.secondIntroductionTitle; let str = splitString(data.secondIntroduction); str.forEach((item, index) => { uls[0].children[index].classList.remove("none"); uls[0].children[index].children[0].innerText = index + 1; uls[0].children[index].children[1].children[0].innerText = ""; uls[0].children[index].children[1].children[1].innerText = item; }); } } // 字符串分割 function splitString(str) { return str.split(",").filter((item) => { return item != ""; }); } // 时间格式化 function dateForm(date) { const inputDate = new Date(date); const year = inputDate.getFullYear(); const month = String(inputDate.getMonth() + 1).padStart(2, "0"); const day = String(inputDate.getDate()).padStart(2, "0"); const formattedDate = `${year}-${month}-${day}`; return formattedDate; } function genSwiper(otherPic) { const swiperDom = document.querySelector("#swiper"); if (otherPic === "") { swiperDom.innerHTML = ""; return; } // 生成swiper const swiperArr = otherPic.split(","); let htmlText = ""; swiperArr.forEach((item) => { if (item === "") { return; } let productModel = item.split("/").pop(); // 获取产品型号 productModel = productModel.split(".")[0]; // 去掉文件后缀 htmlText += `
`; }); const otherPicTarget = document.querySelector("#otherPicTarget"); otherPicTarget.innerHTML = htmlText; var mySwiper = new Swiper(".swiper", { // direction: "vertical", // 垂直切换选项 loop: true, // 循环模式选项 autoplay:true, centeredSlides: true, // 如果需要分页器 pagination: { el: ".swiper-pagination", }, // 如果需要前进后退按钮 navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, // 如果需要滚动条 scrollbar: { el: ".swiper-scrollbar", }, }); window.addEventListener("resize", function () { mySwiper.update(); // 更新swiper }); } init();