usky-web-portal/src/views/services/read.vue

<script setup lang="ts">
    import { ref, watch } 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:any = ref([]) //推荐内容
    //推荐内容过滤
    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.value == data.value[i].path){
                if(route.query?.categoryid  && !data.value[i].sname){
                    sub.value = i
                    console.log(1111,sub.value)
                }
            }
        }
        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.value
            }
        }
        store.dispatch('getPageData',paramsData.value)
    }
    watch(() => store.state.menuList || route.path,
        () => {
            init()
        }
    )
    watch(
        () => store.state.recomMendation,
        () => {
            recomMendationList.value = recomMendationFilter(store.state.recomMendation)
        },
        { deep:true  }
    );
    </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">
                                        <span class="title-tag2" >{{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-5 col-md-6 ">
                                            <img :src="store.state.pageContent[0].image" alt="" style="width:90%">
                                        </div>
                                        <div class=" col-lg-7 col-md-6 " >
                                            <div  v-html="store.state.pageContent[0].content"></div>
                                        </div>
                                    </div>
                                </div>
                                <recomMendation :data="recomMendationList"  v-if="recomMendationList.length>0"/>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
</template>