|
|
@@ -0,0 +1,194 @@
|
|
|
+<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()
|
|
|
+ let requestParams:any = reactive({})//active类型
|
|
|
+ let paramsData = reactive({
|
|
|
+ params:{
|
|
|
+ categoryid: 0,
|
|
|
+ pageNum:1,
|
|
|
+ pageSize:10,
|
|
|
+ order:"sortindex",
|
|
|
+ acitve:true
|
|
|
+ },
|
|
|
+ index:"",
|
|
|
+ sub:0
|
|
|
+ })
|
|
|
+ const pageStatus = ref(false)
|
|
|
+ let oldCategoryId= ref(store.state.columnTypes[0].id)
|
|
|
+
|
|
|
+
|
|
|
+ const columnActive=ref({})
|
|
|
+ var columnOne= store.state.columnTypes.filter((item:any) => {
|
|
|
+ return item.id == store.state.acitveId;
|
|
|
+ });
|
|
|
+ columnActive.value=columnOne[0]
|
|
|
+
|
|
|
+
|
|
|
+ //类型切换
|
|
|
+ function facilityClick(item:any){
|
|
|
+ columnActive.value=item
|
|
|
+ //防抖
|
|
|
+ if(item.id != oldCategoryId.value){
|
|
|
+ requestParams = item
|
|
|
+ paramsData = {
|
|
|
+ params:{
|
|
|
+ categoryid: item.id,
|
|
|
+ pageNum:1,
|
|
|
+ pageSize:10,
|
|
|
+ order:"sortindex",
|
|
|
+ acitve:true,
|
|
|
+ },
|
|
|
+ index:store.state.currentPagePath,
|
|
|
+ sub:store.state.sub
|
|
|
+ }
|
|
|
+ oldCategoryId.value = item.id
|
|
|
+ store.dispatch('getPageData',paramsData)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //详情页
|
|
|
+ function details(item:any){
|
|
|
+ let params = {
|
|
|
+ path: `/news2_Read`,
|
|
|
+ query: {
|
|
|
+ categoryid: item.categoryid,
|
|
|
+ id: item.id,
|
|
|
+ isUrlId: 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ store.commit("setRoute",params)
|
|
|
+ router.push(params)
|
|
|
+ }
|
|
|
+ //分页
|
|
|
+ function handleCurrentChange(val:number){
|
|
|
+ paramsData.params.pageNum = val
|
|
|
+ store.dispatch('getPageData',paramsData)
|
|
|
+ }
|
|
|
+ setTimeout(()=>{
|
|
|
+ pageStatus.value = true
|
|
|
+ },300)
|
|
|
+ return { store, facilityClick, handleCurrentChange, details, pageStatus,columnActive }
|
|
|
+ },
|
|
|
+ components:{
|
|
|
+ banner,
|
|
|
+ pagination
|
|
|
+ },
|
|
|
+ asyncData({ store,route } :any){
|
|
|
+ let params = reactive(route.value) //路由参数
|
|
|
+ //获取菜单列表
|
|
|
+ return store.dispatch('getMenuList',params).then(()=>{
|
|
|
+ const data = reactive(store.state.menuList)
|
|
|
+ let paramsData:any = reactive({})//页面主题内容请求参数
|
|
|
+ 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>
|
|
|
+
|
|
|
+ <section class="news-content-section pt-70" >
|
|
|
+ <div class="container">
|
|
|
+ <div style="display:flex" class="news2-box">
|
|
|
+ <div class=" news-left-list">
|
|
|
+ <div class="title">新闻动态</div>
|
|
|
+ <ul>
|
|
|
+ <li v-for="(item,index) in store.state.columnTypes" :key="index" style="display:flex">
|
|
|
+ <img src="@/assets/img/news/arrow.svg" alt="" :style="{'opacity':item.id == store.state.acitveId?'1':'0'}" style="width:12px;margin-right:5px">
|
|
|
+ <div :class="item.id == store.state.acitveId ? 'active' : ''" v-on:mouseover="facilityClick(item)">{{item.categoryName}} </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="news-right-list" >
|
|
|
+ <div class="title" v-if="columnActive.categoryName">{{columnActive.categoryName}}</div>
|
|
|
+ <ul>
|
|
|
+ <li class="" v-for="(item,index) in store.state.pageContent" :key="index" v-show="pageStatus">
|
|
|
+ <div @click="details(item)">
|
|
|
+ <a class="newsTitleLeft"><span style="width: 8px;height: 8px;background: #B7B7B7;border-radius: 50%;margin-right:10px"></span>{{item.title}}</a>
|
|
|
+ <span class="timeRight" >{{ item.createdate }}</span>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </section>
|
|
|
+ <br>
|
|
|
+ <br>
|
|
|
+ <!-- <section style=" background:#F7F7F7">
|
|
|
+ <div class="container">
|
|
|
+ <div class="row newTypeBox">
|
|
|
+ <div class="col-lg-6 col-md-6" v-for="(item,index) in store.state.columnTypes" :key="index">
|
|
|
+ <div class="titleOne" :class="item.id == store.state.acitveId ? 'active' : ''" v-on:mouseover="facilityClick(item)">{{item.categoryName}} </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section> -->
|
|
|
+ <!-- <section class="news-content-section pt-70" v-show="pageStatus">
|
|
|
+ <div class="container">
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-lg-12 col-md-12 content">
|
|
|
+ <ul>
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-md-4 newItemOne lazyContainer" v-for="(item,index) in store.state.pageContent" :key="index" >
|
|
|
+ <div class="oneInnerBox" @click="details(item)">
|
|
|
+ <div class="img" style="overflow:hidden">
|
|
|
+ <el-image :src="item.image" alt="" :data-src="item.image" fit="contain" style="display:block" />
|
|
|
+ </div>
|
|
|
+ <a class="line-two">{{item.title}}</a>
|
|
|
+ <span>{{ item.createdate }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </ul>
|
|
|
+ <pagination :data="store.state.pagination" @pagination="handleCurrentChange" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section> -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+</template>
|
|
|
+<style lang="scss" scoped>
|
|
|
+
|
|
|
+</style>
|
13127578837
