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

<script lang="ts">
    import { ref, reactive, defineComponent } 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'
    export default defineComponent({
    setup(){
        const store = useStore()
        const route = useRoute()
        const recomMendationList:any = reactive(recomMendationFilter(store.state.recomMendation)) //推荐内容
        //推荐内容过滤
        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
        }
        return { store, recomMendationList }
    },
    components:{
        banner,
        recomMendation
    },
    asyncData({ store,route }:any){
        //获取菜单列表
        let params:any = reactive({}) //路由参数
        if(route.value.query?.id){
            params = route.value
        }else{
            params = store.state.route
        }
        //获取菜单列表
        return store.dispatch('getMenuList',params).then(()=>{
            const data = reactive(store.state.menuList)
            let str = ref("")
            let sub = ref()
            let paramsData = reactive({})
            if(params.path.indexOf("_")){
                str.value = params.path.split("_")[0]
            }
            for(let i=0;i<data.length;i++){
                if(params.path == data[i].path || str.value == data[i].path){
                    if(params.query?.categoryid  && !data[i].sname){
                        sub.value = i
                        if(params.query?.id  && !params.query.dup){
                            paramsData = {
                                params:{
                                    categoryid: params.query?.categoryid,
                                    pageNum:1,
                                    pageSize:1,
                                    order:"sortindex",
                                    articleid: params.query?.id,
                                    id: params.query?.id,
                                    details:true
                                },
                                index:params.path,
                                sub:sub.value
                            }
                            return store.dispatch('getPageData',paramsData)
                        }
                    }
                }
            }
           
        })
    }
})
</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-left both-border mb-60 d-flex justify-content-between">
                                <div >
                                    <span class="title-tag2">{{store.state.pageContent[0].title}}</span>
                                    <div class="new-read-title2">
                                            <span >{{ store.state.pageContent[0].createdate }}</span>
                                            <span >点击量：{{store.state.pageContent[0].hits}}</span>
                                    </div>
                                </div>
                                <a href="javascript:history.back(-1)"><img src="@/assets/img/product/close.png" alt=""></a>
                            </div>                            
                            <div v-html="store.state.pageContent[0].content" class="new-read-body"></div>
                        </div>
                        <recomMendation :data="recomMendationList"  v-if="recomMendationList.length>0"/>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>