PYCHR/web/foreground/static/js/details.js

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 += `
    <div class="swiper-slide swiper-slide-silf">
          <img
            src="${item}"
            alt="images"
          />
          <!-- 显示产品型号 -->
          <div class="product-model">${productModel}</div>
    </div>
    `;
    });
    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();