usky-web-portal/src/views/cases/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 = ref(recomMendationFilter(store.state.recomMendation)) //推荐内容
            const pageStatus = ref(false)
            store.state.footerStatus = false
            //推荐内容过滤
            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
            }
            store.state.pageContent = []
            store.state.footerStatus = false
            pageStatus.value = true
            return { store, recomMendationList, pageStatus }
        },
        components:{
            banner,
            recomMendation
        },
        asyncData({ store, route } :any){
            //获取菜单列表
            let params:any = reactive({}) //路由参数
            if(route.value.query?.categoryid){
                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("_")>-1){
                    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
                        }
                    }
                }
                setTimeout(()=>{
                    params.query = route.value.query
                    if(params.query?.categoryid  && !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)
                    }
                },1)
                
            })
        }

    })
</script>
<template>
    <div class="pageContain">
        <section class="common-bradcrumb-section" >
            <banner />
        </section>
        <section class="product-content-section pt-60" v-if="pageStatus">
            <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>
<style>
.text-left>p{
    text-indent: 2em !important;
}
.text-left>p>span{
    display: block;
}
</style>