usky-ssr/src/views/cases/read.vue

<script setup lang="ts">
    import { ref, onMounted } from 'vue'
    import { useStore  } from 'vuex'
    import { useRoute } from "vue-router"
    import banner from '@/components/layout/banner.vue'
    import recomMendation from '@/components/layout/recomMendation.vue'
    const store = useStore()
    const route = useRoute()
    const recomMendationList = ref([]) //推荐内容
    setTimeout(()=>{
        recomMendationList.value = recomMendationFilter(store.state.recomMendation)
    },1000)
    //推荐内容过滤
    function recomMendationFilter(data:any){
        let array = []
        for(let i =0;i<data.length;i++){
            if(data[i].id != route.query?.id){
                array.push(data[i])
            }
        }
        return array
    }
    //页面内容初始化
    function init(){
        const data = ref(store.state.menuList)
        let str =ref("")
        let sub = ref()
        const paramsData = ref({})
        if(route.path.indexOf("_")){
            str.value = route.path.split("_")[0]
        }
        for(let i=0;i<data.value.length;i++){
            if( route.path == data.value[i].path || str == data.value[i].path){
                if(route.query?.categoryid  && !route.query.dup){
                    sub.value = i
                }
            }
        }
        if(route.query?.categoryid  && !route.query.dup){
            paramsData.value = {
                params:{
                    categoryid: route.query?.categoryid,
                    pageNum:1,
                    pageSize:1,
                    order:"sortindex",
                    articleid: route.query?.id,
                    id: route.query?.id,
                    details:true
                },
                index:route.path,
                sub:sub
            }
        }
        store.dispatch('getPageData',paramsData.value)
    }
    onMounted(() => {
        init()
    });
    </script>
    <template>
            <div class="pageContain">
                <section class="common-bradcrumb-section" >
                    <banner />
                </section>
                <section class="product-content-section pt-60">
                    <div class="container" v-if="store.state.pageContent.length>0">
                        <div class="row">
                            <div class="col-lg-12 col-md-12 content">
                                <div  class="read_content mb-60">
                                    <div class="section-title text-center both-border mb-60 d-flex justify-content-between">
                                        <span class="title-tag2 text-left" >{{store.state.pageContent[0].title}}</span>
                                        <a href="javascript:history.back(-1)"><img src="@/assets/img/product/close.png" alt=""></a>
                                    </div>
                                    <div class="row">
                                        <div class=" col-lg-12 col-md-12  " >
                                            <div  v-html="store.state.pageContent[0].content" class="text-left"></div>
                                        </div>
                                    </div>
                                </div>
                                <recomMendation :data="recomMendationList"  v-if="recomMendationList.length>0"/>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
</template>