website-client-Nigeria/src/pages/product/rich-detail/index.vue

<script setup>
    import {
        ref,
        reactive,
        onMounted,
        onBeforeMount,
        onBeforeUnmount
    } from "vue";
    import topBar from "@/components/top/title-bar.vue";
	import footBar from "@/components/bottom/foot-bar.vue";
    // import detailParams from "./components/detail-params.vue";
    // import collapse from "@/views/product/detail/components/collapse.vue";
    import {
        GetProductDetailApi
    } from "@/service/api.js";
    import { useLanguageStore } from "@/stores/language.js";
    import {
        useI18n
    } from "vue-i18n";
    const {
        t
    } = useI18n();
    const languageStore = useLanguageStore();
    const langIs = ref(languageStore.currentLocale);
    import {
        useRoute
    } from '#imports';
    const route = useRoute();
    //监听返回顶部
    let proId = ref("");
    let proName = ref("");
    const productSpecs = reactive({
        data: [],
    });
    const htmlNodes = ref("");
	let isMaskShow = ref(true); //是否显示遮罩层

    let tabCollection = reactive([]);
    onBeforeMount(() => {
        tabCollection.push({
            name: t("detail.summary"),
            value: 0,
        });
        if (route.query.id) {
            proId.value = route.query.id;
            GetSpaceRequest(proId.value);
        }
    });

    const GetSpaceRequest = (Id) => {
        let parmas = {
            locale: langIs.value,
            product_id: Id,
        };
        GetProductDetailApi(parmas).then((res) => {
            if (res.info.children[0]) {
                let received = res.info.children[0];
                productSpecs.data = received.product_specs;
                if (productSpecs.data.length > 0) {
                    tabCollection.push({
                        name: t("detail.specs"),
                        value: 1,
                    });
                }

                document.title = received.product_name;
                proName.value = received.product_name;
                const htmlString = received.product_detail_body;
                const parser = new DOMParser(htmlString);
                const doc = parser.parseFromString(htmlString, 'text/html');
                const imgElements = doc.querySelectorAll('img');
                imgElements.forEach((img, index) => {
                    img.removeAttribute('width');
                    img.removeAttribute('height');
                    img.removeAttribute('style');
                    img.removeAttribute('class');
                    img.classList.add('rich-only-avater');
                });
                htmlNodes.value = doc.body.innerHTML;
				isMaskShow.value = false
            }
        }).catch(isMaskShow.value = false)
    };
    let tabValue = ref(0);
    let tabChange = (index) => {
        tabValue.value = index;
    };

    let scrollTop = ref(0); // 监听滚动事件得到的值
    // 监听页面滚动事件
    onMounted(() => {
        window.addEventListener('scroll', handleScroll);
    });

    onBeforeUnmount(() => {
        window.removeEventListener('scroll', handleScroll);
    });
    const handleScroll = () => {
        scrollTop.value = window.scrollY || document.documentElement.scrollTop;
    };
</script>

<template>
    <div class="page">
        <topBar></topBar>
        <div class="sticky-page-layout">
            <div class="nav-sticky" :class="{ 'nav-sticky--active': scrollTop >= 100 }">
                <div class="nav-sticky__center">
                    <h1 class="nav-sticky__center__left">{{ proName }}</h1>
                    <div class="nav-sticky__center__right">
                        <div class="nav-sticky__center__right__item" :class="{
                         'nav-sticky__center__right--Active': tabValue == item.value,
                            }" @click="tabChange(item.value)" v-for="(item, index) in tabCollection"
                            :key="'rich' + index">
                            {{ item.name }}
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="tabValue == 0">
                <div class="rich-detail-only" v-dompurify-html="htmlNodes"></div>
            </div>
            <div v-else-if="tabValue == 1">
                <!-- <detail-params :detailList="productSpecs.data"></detail-params> -->
            </div>
            <div v-else>
                <!-- <collapse></collapse> -->
            </div>
        </div>
		<foot-bar></foot-bar>
		<div class="load-mask" v-if="isMaskShow">
			<div class="spinner">
				<div class="spinner__item bounce1"></div>
				<div class="spinner__item bounce2"></div>
				<div class="spinner__item bounce3"></div>
			</div>
		</div>
    </div>
</template>

<style>
    /* 为了全局谨慎使用 */
    .rich-detail-only {
        min-height: 100vh;
        width: 100vw;
    }

    .rich-detail-only 
    .rich-only-avater {
        width: 100%;
        height: auto;
        display: block;
    }

    .rich-detail-only 
    .rich-only-avater:first-child {
        width: 100vw;
        min-height: 50vh;
    }

    @media (max-width: 1000px) {
        .rich-detail-only 
        .rich-only-avater:first-child {
            min-height: auto;
        }
    }

    @media (max-width: 850px) {
        .rich-detail-only 
        .rich-only-avater:first-child {
            padding-top: 1.7rem;
        }
    }

    @media (max-width: 650px) {
        .rich-detail-only 
        .rich-only-avater:first-child {
            padding-top: 2rem;
        }
    }
	@media (max-width: 500px) {
	    .rich-detail-only 
	    .rich-only-avater:first-child {
	        padding-top: 2.35rem;
	    }
	}

    .rich-detail-only 
    .rich-only-avater:nth-child(2) {
        margin: 2.4rem auto 0;
        padding: 0;
        width: 9.8rem;
    }

    @media (max-width: 1600px) {
        .rich-detail-only 
        .rich-only-avater:nth-child(2) {
            width: 750px;
        }
    }

    @media (max-width: 1000px) {
        .rich-detail-only 
        .rich-only-avater:nth-child(2) {
            width: 90%;
        }
    }

    @media (max-width: 1000px) {
        .rich-detail-only 
        .rich-only-avater:nth-child(2) {
            margin-top: 2.4rem;
        }
    }

    .rich-detail-only 
    .rich-only-avater:nth-child(n + 3) {
        padding-top: 1rem;
        margin: 0 auto;
        width: 9.8rem;
    }

    @media (max-width: 1600px) {
        .rich-detail-only 
        .rich-only-avater:nth-child(n + 3) {
            width: 750px;
        }
    }

    @media (max-width: 1000px) {
        .rich-detail-only 
        .rich-only-avater:nth-child(n + 3) {
            width: 90%;
        }
    }

    @media (max-width: 1000px) {
        .rich-detail-only 
        .rich-only-avater:nth-child(n + 3) {
            margin-top: 1.5rem;
        }
    }

    .rich-detail-only 
    .rich-only-avater:last-child {
        margin-bottom: 2.4rem;
    }

    @media (max-width: 1000px) {
        .rich-detail-only 
        .rich-only-avater:last-child {
            margin-bottom: 3rem;
        }
    }
</style>

<style lang="scss" scoped>
    .page {
        background-color: #000000;
    }
</style>