usky-ssr/src/views/services/index.vue

<script lang="ts">
import { ref, reactive, defineComponent } from 'vue'
import { useStore  } from 'vuex'
import { useRouter } from "vue-router";
import banner from '@/components/layout/banner.vue'
import pagination from '@/components/layout/pagination.vue'
export default defineComponent({
    setup(){
        const store = useStore()
        const router = useRouter()
        const requestParams = ref({})//active类型
        const pageStatus = ref(false)
        let paramsData = reactive({
            params:{
                categoryid: 0,
                pageNum:1,
                pageSize:100,
                order:"sortindex",
                active:true
            },
            index:"",
            sub:0
        })
        let oldCategoryId= ref()
        //类型切换
        function facilityClick(item:any){
            //防抖
            if(item.id != oldCategoryId.value){
                requestParams.value = item
                paramsData = {
                    params:{
                        categoryid: item.id,
                        pageNum:1,
                        pageSize:10,
                        order:"sortindex",
                        active:true
                    },
                    index:store.state.currentPagePath,
                    sub:store.state.sub
                }
                oldCategoryId.value = item.id
                store.dispatch('getPageData',paramsData)
            }
        }
        //详情页
        function details(item:any){
            let params = {
                path: `/services_Read`,
                query: {
                    categoryid: item.categoryid,
                    id: item.id,
                    isUrlId: 1
                }
            }
            store.commit("setRoute",params)
            router.push(params)
            globalThis.scrollTo(0, 0)
        }
        //分页
        function handleCurrentChange(val:number){
            paramsData.params.pageNum = val
            store.dispatch('getPageData',paramsData).then(()=>{
                // globalThis.scrollTo({
                //     top: 0,
                //     behavior: "smooth"
                // })
            })
        }
        setTimeout(()=>{
            pageStatus.value = true
        })
        return { store, facilityClick, handleCurrentChange, details, pageStatus }
    },
    components:{
        banner,
        pagination
    },
    asyncData({ store,route } :any){
        let params = reactive(route.value) //路由参数
        //获取菜单列表
        return store.dispatch('getMenuList',params).then(()=>{
            const data = store.state.menuList
            let paramsData = reactive({
                params:{
                    categoryid: 0,
                    pageNum:1,
                    pageSize:100,
                    order:"sortindex",
                },
                index:"",
                sub:0
            })//页面主题内容请求参数
            let str = ref("")
            if(params.path.indexOf("_")>-1){
                str.value = params.path.split("_")[0]
            }
            for(let i=0;i<data.length;i++){
                //主页数据初始化
                if(!data[i].sname && params.path == data[i].path || data[i].path == str.value){
                    paramsData = {
                        params:{
                            categoryid: data[i].id,
                            pageNum:1,
                            pageSize:100,
                            order:"sortindex",
                        },
                        index:params.path,
                        sub:i
                    }
                    if(!params.query?.categoryid){
                        paramsData.params.categoryid = data[i].children[0].id
                    }else{
                        paramsData.params.categoryid = params.query.categoryid
                    }
                    return store.dispatch('getPageData',paramsData).then(()=>{
                        store.commit("setColumnTypes",store.state.menuList[store.state.sub].children)
                    })
                }
            }
        })
    }
})
</script>
<template>
    <div class="pageContain">
        <section class="common-bradcrumb-section">
            <banner />
            <section class="product-grid-section " style="text-align: center;position:absolute;bottom:0"    :style="{'width': '100%'}" >
                <ul class="cannot_selected tabs_selected" >
                    <a v-for="(item,index) in store.state.columnTypes"  :class="item.id == store.state.acitveId ? 'active' : ''"
                    v-on:mouseover="facilityClick(item)" :style="{'width':(1/store.state.columnTypes.length*100)+'%' }" :key="index">{{item.categoryName}}</a>
                </ul>
            </section>
        </section>
        <section class="product-grid-section  container pt-20 pb-60 lazyContainer" v-show="pageStatus">
            <div class="row pt-80 content"  >
                <div class="col-md-4 newItemOne "  v-for="item in store.state.pageContent" :key="item.id">
                    <div class="oneInnerBox" @click="details(item)">
                            <div class="img">
                                <img v-lazy="item.image" alt="" :data-src="item.image">
                            </div>
                            <a class="line-two">{{item.title}}</a>
                            <span class="line-two">{{item.zhaiyao}}</span>
                    </div>
                </div>
            </div>
            <pagination :data="store.state.pagination" @pagination="handleCurrentChange" />
        </section>
    </div>
</template>
<style lang="scss" scoped>

</style>