替换列表+详情

src/components/detail.vue

@@ -8,7 +8,7 @@
         <banner :info="info"></banner>
       </el-col>
       <el-col :sapn="24" class="menu">
-        <menuInfo></menuInfo>
+        <menuInfo :menuList="menuList" :backColor="backColor"></menuInfo>
       </el-col>
       <el-col :sapn="24" class="main">
         <div class="w_1270">
@@ -35,6 +35,7 @@ export default {
     bordColor: null, //border颜色
     bordBottomColor: null, //border-bottom颜色
     color: null, //字体颜色
+    menuList: null, //菜单
     info: null, //站点信息
     contInfos: null, //信息详细
   },

src/components/list.vue

@@ -8,7 +8,7 @@
         <banner :info="info"></banner>
       </el-col>
       <el-col :sapn="24" class="menu">
-        <menuInfo></menuInfo>
+        <menuInfo :menuList="menuList" :backColor="backColor"></menuInfo>
       </el-col>
       <el-col :sapn="24" class="main">
         <div class="w_1270">
@@ -45,6 +45,7 @@ export default {
   props: {
     backColor: null, //背景颜色
     info: null, //站点信息
+    menuList: null, //菜单
     rightList: null, //右侧列表
   },
   components: {

src/components/newsList.vue

@@ -0,0 +1,88 @@
+<template>
+  <div id="newsList">
+    <el-row>
+      <el-col :span="24" class="top">
+        <div class="w_1200">
+          <top :info="info" :Color="Color"></top>
+        </div>
+      </el-col>
+      <el-col :span="24" class="menu">
+        <menuInfo :menuList="menuList" :backColor="backColor"></menuInfo>
+      </el-col>
+      <el-col :span="24" class="main">
+        <div class="w_1200">
+          <el-col :span="5" class="mainNav">
+            <listLeft v-if="sideMenu" :sideMenu="sideMenu" :Color="Color"></listLeft>
+          </el-col>
+          <el-col :span="listSpan" class="mainList">
+            <newsInfo :newsList="newsList" :Color="Color" :title="title" v-on="$listeners" v-bind="$attrs"></newsInfo>
+          </el-col>
+        </div>
+      </el-col>
+      <el-col :span="24" class="foot">
+        <down :info="info" :backColor="backColor"></down>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import top from '@/layout/index/top.vue';
+import menuInfo from '@/layout/index/menuInfo.vue';
+import listLeft from '@/layout/list/listLeft.vue';
+import newsInfo from '@/layout/list/newsInfo.vue';
+import down from '@/layout/index/down.vue';
+export default {
+  name: 'newsList',
+  props: {
+    info: null, //头部信息
+    Color: null, //头部电话字体颜色
+    backColor: null, //导航菜单背景颜色
+    newsList: null, //列表信息
+    menuList: null, //菜单
+    sideMenu: null, //侧菜单
+    title: null, //标题
+    listSpan: { type: Number, default: 18 }, //全屏还是左右
+  },
+  components: {
+    top, //头部
+    menuInfo, //导航
+    listLeft, //二级左侧导航
+    newsInfo, //二级右侧新聞列表（帶有圖片）
+    down, //底部信息
+  },
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.top {
+  height: 120px;
+  overflow: hidden;
+}
+.menu {
+  height: 50px;
+  overflow: hidden;
+}
+.main {
+  height: 1060px;
+  margin: 50px 0 0 0;
+  overflow: hidden;
+}
+.mainList {
+  // width: 746px;
+  margin: 0 0 0 20px;
+}
+.foot {
+  height: 133px;
+  background-color: #0457c7;
+  overflow: hidden;
+}
+</style>

src/layout/detail/contInfo.vue

@@ -4,7 +4,7 @@
       <el-col :span="24" class="contInfo">
         <el-col :span="24" class="top" :style="`border-color:${bordColor}`">
           <el-col :span="18" class="topTitle">
-            <span :style="`border-color:${bordBottomColor};color:${color}`">{{ title }}</span>
+            <span :style="`border-color:${bordBottomColor};color:${color}`">{{ contInfos.parent }}</span>
           </el-col>
           <el-col :span="6" class="topBread">
             <el-breadcrumb separator-class="el-icon-arrow-right">
@@ -22,13 +22,15 @@
             <el-col :span="12" class="fenxiang">
               <share></share>
             </el-col>
-            <el-col :span="12" class="date"> 发布时间：{{ contInfos.date }} </el-col>
+            <el-col :span="12" class="date">
+              发布时间：{{ contInfos.meta && contInfos.meta.createdAt ? new Date(contInfos.meta.createdAt).toLocaleDateString() : '' || '' }}
+            </el-col>
           </el-col>
-          <el-col :span="24" class="images">
-            <el-image style="width:800px;height:370px;" :src="contInfos.url"></el-image>
+          <el-col :span="24" class="images" v-if="contInfos.pic">
+            <el-image style="width:800px;height:370px;" :src="contInfos.pic"></el-image>
           </el-col>
           <el-col :span="24" class="content">
-            <p>{{ contInfos.content }}</p>
+            <p v-html="contInfos.content"></p>
           </el-col>
         </el-col>
       </el-col>

src/layout/index/huji.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="huji">
-    <el-row>
+    <el-row style="width:460px;height:369px;" v-loading="loading">
       <el-col :span="24" class="top">
         <el-col :span="20" class="topTit">
           <span>{{ hujiList.title || title }}</span>

src/layout/index/law.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="law">
-    <el-row>
+    <el-row style="width:460px;height:369px;" v-loading="loading">
       <el-col :span="24" class="top">
         <el-col :span="20" class="topTit">
           <span> {{ lawList.title || title }}</span>

src/layout/index/lunbo.vue

@@ -1,10 +1,10 @@
 <template>
   <div id="lunbo">
     <el-row>
-      <el-col :span="24">
+      <el-col :span="24" style="width:540;height:304px;" v-loading="loading">
         <div class="block">
           <el-carousel height="304px">
-            <el-carousel-item class="list" v-for="(item, index) in infoList" :key="index">
+            <el-carousel-item class="list" v-for="(item, index) in infoList" :key="index" @click.native="$router.push({ path: `/detail?id=${item.id}` })">
               <el-image style="width:540px;height:304px;" :src="item.pic"></el-image>
               <span class="title textOver">{{ item.title }}</span>
             </el-carousel-item>
@@ -25,6 +25,7 @@ export default {
   components: {},
   data: () => ({
     infoList: [],
+    loading: true,
   }),
   watch: {
     carouselList: {
@@ -74,4 +75,7 @@ export default {
   font-size: 16px;
   color: #fff;
 }
+.list:hover {
+  cursor: pointer;
+}
 </style>

src/layout/index/noticeNews.vue

@@ -1,11 +1,11 @@
 <template>
   <div id="noticeNews">
     <el-row>
-      <el-col :span="24">
+      <el-col :span="24" style="width:460px;height:304px;" v-loading="loading">
         <el-tabs v-model="activeName" type="card" :before-leave="handleClick">
           <el-tab-pane v-for="(item, index) in infoList" :key="index">
             <span slot="label">{{ item.title }}</span>
-            <el-col :span="24" v-for="(tag, index) in item.children" :key="index" class="list">
+            <el-col :span="24" v-for="(tag, index) in item.children" :key="index" class="list" @click.native="$router.push({ path: `/detail?id=${tag.id}` })">
               <el-col :span="18" class="title">
                 <i class="el-icon-caret-right icon"></i>
                 <p class="textOver">{{ tag.title }}</p>
@@ -30,6 +30,7 @@ export default {
   data: () => ({
     activeName: '',
     infoList: [],
+    loading: true,
   }),
   watch: {
     noticeNewsList: {

src/layout/index/recruit.vue

@@ -37,14 +37,14 @@
                     <p class="textOver">{{ item.title }}</p>
                   </el-col>
                   <el-col :span="4" class="btn">
-                    <el-button @click="$router.push({ path: '/jobinfoDetail', query: { id: item.id } })">[在线投递简历]</el-button>
+                    <el-button @click="$router.push({ path: '/jobinfoDetail', query: { id: item.id } })">[点击查看详情]</el-button>
                   </el-col>
                   <el-col :span="4" class="date">
                     {{ item.meta | getDate }}
                   </el-col>
                 </el-col>
               </el-col>
-              <el-col :span="4" class="rightList">
+              <el-col :span="4" class="rightList" style="width:247px;height:369px;" v-loading="loading">
                 <el-col :span="24" class="rightTop">
                   <el-col :span="16" class="rightTopTit">
                     <span>{{ zixunList.title || title }}</span>

src/layout/index/service.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="service">
-    <el-row>
+    <el-row style="width:540px;height:369px;" v-loading="loading">
       <el-col :span="24" class="top">
         <el-col :span="20" class="topTit">
           <span> {{ serviceList.title || title }}</span>

src/layout/index/xiazai.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="xiazai">
-    <el-row>
+    <el-row style="width:247px;height:369px;" v-loading="loading">
       <el-col :span="24" class="top">
         <el-col :span="16" class="topTit">
           <span>{{ xiazaiList.title || title }}</span>

src/layout/index/zhidao.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="zhidao">
-    <el-row>
+    <el-row style="width:540px;height:369px;" v-loading="loading">
       <el-col :span="24" class="top">
         <el-col :span="20" class="topTit">
           <span> {{ zhidaoList.title || title }}</span>

src/layout/list/listLeft.vue

@@ -0,0 +1,63 @@
+<template>
+  <div id="listLeft">
+    <el-row>
+      <el-col :span="24" class="listLeft">
+        <el-menu :default-active="path" class="el-menu-vertical-demo" :router="true">
+          <template v-for="(item, index) in sideMenu">
+            <el-menu-item v-if="item.type !== 'url' && item.type !== 'content'" :index="item.path" :key="index" :style="`color:${Color}`">
+              {{ item.title }}
+            </el-menu-item>
+            <el-menu-item v-else-if="item.type === 'content'" :index="item.path" :key="index" :style="`color:${Color}`">{{ item.title }}</el-menu-item>
+            <el-menu-item v-else :index="``" :key="index" @click="turnTo(item.url)" :style="`color:${Color}`">{{ item.title }}</el-menu-item>
+          </template>
+        </el-menu>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+export default {
+  name: 'listLeft',
+  props: {
+    sideMenu: null,
+    Color: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {
+    title() {
+      return this.$route.query.title;
+    },
+    path() {
+      let path = `${this.$route.path}`;
+      if (this.title) path = `${path}?title=${this.title}`;
+      return path;
+    },
+  },
+  methods: {
+    turnTo(url) {
+      window.open(url);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+/deep/.el-menu {
+  border-right: none;
+}
+/deep/.el-menu-item {
+  font-size: 24px;
+  height: 60px;
+  line-height: 60px;
+  border-right: 2px solid transparent;
+}
+/deep/.el-menu-item.is-active {
+  color: #415285;
+  background: #b9c1d7;
+  border-left: 5px solid;
+}
+</style>

src/layout/list/newsInfo.vue

@@ -0,0 +1,159 @@
+<template>
+  <div id="newsInfo">
+    <el-row>
+      <el-col :span="24" class="listRight" :style="`border-color:${Color}`">
+        <el-col :span="24" class="topInfo">
+          <el-col :span="12" class="top">
+            <p :style="`color:${Color}`"><i class="el-icon-document"></i>{{ title }}</p>
+          </el-col>
+          <el-col :span="12" class="bread">
+            <el-breadcrumb separator-class="el-icon-arrow-right">
+              <el-breadcrumb-item :to="{ path: '/' }">网站首页</el-breadcrumb-item>
+              <el-breadcrumb-item>信息列表</el-breadcrumb-item>
+            </el-breadcrumb>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="list">
+          <el-col :span="24" class="rightList" v-for="(item, index) in newsList" :key="index">
+            <el-col :span="5" class="image">
+              <el-image style="width:100%;height:95px;" :src="item.pic"></el-image>
+            </el-col>
+            <el-col :span="19">
+              <el-col :span="24">
+                <el-col :span="20" class="title" @click.native="turnTo(item)">
+                  <p class="textOver">{{ item.title }}</p>
+                </el-col>
+                <el-col :span="4" class="date">
+                  {{ item.meta && item.meta.createdAt ? new Date(item.meta.createdAt).toLocaleDateString() : '' || '' }}
+                </el-col>
+              </el-col>
+            </el-col>
+            <el-col :span="17" class="content" v-html="item.content"> </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+      <el-col :span="24" class="page">
+        <el-pagination @current-change="search" :current-page="currentPage" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total">
+        </el-pagination>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'newsInfo',
+  props: {
+    newsList: null,
+    Color: null,
+    title: { type: String, default: '党员之家' },
+    total: { type: Number, defaultl: 0 },
+  },
+  components: {},
+  data: () => ({
+    currentPage: 1,
+    pageSize: 8,
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    search(page) {
+      let skip = (page - 1) * this.pageSize;
+      this.$emit('search', { skip: skip, limit: this.pageSize });
+    },
+    turnTo(item) {
+      let route = this.$route.path;
+      if (route.includes('member')) this.$router.push({ path: '/memberDetail', query: { id: item.id } });
+      else this.$router.push({ path: `/detail?id=${item.id}` });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.textOver {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.listRight {
+  height: 930px;
+  border-left: 1px solid;
+}
+.topInfo {
+  height: 47px;
+  line-height: 47px;
+}
+.top {
+  padding: 0 10px;
+}
+.top p {
+  font-size: 24px;
+}
+.bread {
+  padding: 16px 0px 16px 220px;
+}
+.dian {
+  display: inline-block;
+  width: 4px;
+  height: 4px;
+  background-color: #4f4f4f;
+  border-radius: 90px;
+  margin: 5px 8px;
+}
+.list {
+  padding: 0 10px;
+  height: 883px;
+  overflow: hidden;
+}
+.rightList {
+  height: 105px;
+  margin: 0 0 6px 0;
+  border-bottom: 1px dashed #ccc;
+}
+.rightList .image {
+  width: 150px;
+  height: 100px;
+}
+.rightList .title {
+  padding: 10px;
+}
+.rightList .title p {
+  font-size: 16px;
+  color: #4f4f4f;
+}
+.rightList .date {
+  font-size: 16px;
+  color: #4f4f4f;
+  padding: 10px 0;
+}
+.rightList .content {
+  padding: 0 10px;
+  height: 40px;
+  overflow: hidden;
+}
+/deep/.rightList .content p {
+  font-size: 14px;
+  color: #4f4f4f;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  padding: 0;
+  margin: 0;
+}
+.rightList:hover .title p {
+  cursor: pointer;
+  color: #0457c7;
+}
+.page {
+  padding: 51px 0px;
+  text-align: center;
+}
+</style>

src/router/index.js

@@ -11,7 +11,12 @@ export default new Router({
       component: () => import('../views/index.vue'),
     },
     {
-      path: '/list',
+      path: '/list/:jobs/:type',
+      name: 'list',
+      component: () => import('../views/list.vue'),
+    },
+    {
+      path: '/list/:jobs',
       name: 'list',
       component: () => import('../views/list.vue'),
     },
@@ -31,7 +36,12 @@ export default new Router({
       component: () => import('../views/memberDetail.vue'),
     },
     {
-      path: '/memberList',
+      path: '/newsList/:type/:id',
+      name: 'newsList',
+      component: () => import('../views/newsList.vue'),
+    },
+    {
+      path: '/memberList/:type/:id',
       name: 'memberList',
       component: () => import('../views/memberList.vue'),
     },

src/views/detail.vue

@@ -5,15 +5,23 @@
       :bordColor="bordColor"
       :bordBottomColor="bordBottomColor"
       :color="color"
-      :info="info"
-      :contInfos="contInfos"
+      :menuList="menu"
+      :info="site"
+      :contInfos="detailInfo"
     ></info-detail>
   </div>
 </template>
 
 <script>
 import infoDetail from '@/components/detail.vue';
+import { mapActions, mapState } from 'vuex';
+import _ from 'lodash';
 export default {
+  metaInfo() {
+    return {
+      title: this.siteTitle ? this.siteTitle : '就业信息网',
+    };
+  },
   name: 'detail',
   props: {},
   components: {
@@ -37,10 +45,116 @@ export default {
       url: require('@/assets/news.jpg'),
       content: '9月16日-20日，由全国高等学校学生信息咨询与就业指导中心主办。',
     },
+    menu: [], //菜单信息
+    site: {}, //站点信息
+    sideMenu: [], //侧菜单
+    detailInfo: {}, //详情信息
   }),
-  created() {},
+  async created() {
+    await this.toGetSite(); //获取主站信息
+    await this.loadMenu(); //获取菜单信息
+    this.search();
+  },
   computed: {},
-  methods: {},
+  methods: {
+    ...mapActions(['getSite', 'getMenu', 'getColumn', 'getNews']),
+    async search() {
+      //1直接拿着参数发送请求
+      let result = await this.getNews({ type: 'fetch', data: { id: this.$route.query.id } });
+      if (`${result.errcode}` === '0') {
+        this.$set(this, `detailInfo`, result.data);
+      } else {
+        this.$message.error(result.errmsg ? result.errmsg : 'error');
+      }
+    },
+    //站点信息
+    async toGetSite() {
+      let site = sessionStorage.getItem('site');
+      if (!site) {
+        let result = await this.getSite({ type: 'search' });
+        if (result.errcode === 0) {
+          sessionStorage.setItem('site', JSON.stringify(result.data));
+          if (_.get(result.data, `custom`)) {
+            let item = result.custom;
+          }
+          this.$set(this, `site`, result.data);
+          this.$set(this, `siteTitle`, this.site.name);
+        }
+      } else {
+        this.$set(this, `site`, JSON.parse(site));
+        this.$set(this, `siteTitle`, this.site.name);
+        let arr = this.site;
+        if (arr.custom) {
+          let item = arr.custom;
+        }
+      }
+    },
+    //菜单
+    async loadMenu() {
+      let menu = sessionStorage.getItem('menu');
+      if (menu) {
+        this.$set(this, `menu`, JSON.parse(menu));
+        await this.finishedMenu();
+      } else this.toGetMenu();
+      this.getSubMenu();
+    },
+    async toGetMenu() {
+      let result = await this.getMenu({ type: `list` });
+      if (result.errcode === 0) {
+        sessionStorage.setItem('menu', JSON.stringify(result.data));
+        this.$set(this, `menu`, result.data);
+        this.finishedMenu();
+      }
+    },
+    async finishedMenu() {
+      let menus = JSON.parse(JSON.stringify(this.menu));
+      for (const item of menus) {
+        if (item.type === 'content') {
+          item.path = `/detail/${item.content_id}`;
+        } else if (item.type !== 'url') {
+          let res = await this.completeMenu(item);
+          item.children = res;
+        }
+      }
+      this.$set(this, `menu`, menus);
+    },
+    async completeMenu(item) {
+      let result = await this.getColumn({
+        type: `list`,
+        data: { parent_id: item.id },
+      });
+      if (result.errcode === 0) {
+        let columns = result.data;
+        for (const col of columns) {
+          if (col.type === 'content') {
+            col.path = `/detail/${col.content_id}`;
+          } else if (col.type !== 'url') {
+            col.path = `/newsList/menu/${col.id}?title=${col.title}`;
+            if (col.parent.includes('党员')) {
+              col.path = `/memberList/menu/${col.id}?title=${col.title}`;
+            }
+          }
+        }
+        return columns;
+      }
+    },
+    //侧菜单
+    getSubMenu() {
+      let data;
+      if (this.type === `module`) {
+        data = sessionStorage.getItem(`modules`);
+        this.$set(this, `sideMenu`, []);
+      } else {
+        let res = this.menu.filter(fil => {
+          if (fil.children) {
+            let res = fil.children.filter(filc => filc.id === this.id);
+            return res.length > 0;
+          } else return false;
+        });
+        this.$set(this, `sideMenu`, res.length > 0 ? res[0].children : []);
+      }
+    },
+  },
 };
 </script>
 

src/views/index.vue

@@ -3,6 +3,7 @@
     <index-detail
       :info="site"
       :menuList="menu"
+      :newsList="newsList"
       :carouselList="carouselList"
       :noticeNewsList="noticeList"
       :zhidaoList="zhidaoList"
@@ -46,6 +47,7 @@ export default {
     siteTitle: {}, //站点标题
     menu: [], //菜单
     modules: [], //模块
+    newsList: [],
     carouselList: [], //图片新闻
     noticeList: [], //通知公告+就业动态
     zhidaoList: [], //就业指导
@@ -180,10 +182,10 @@ export default {
         let columns = result.data;
         for (const col of columns) {
           if (col.type === `bugList`) {
-            col.path = `/list/module/${col.content_id}`;
+            col.path = `/newsList/module/${col.content_id}`;
             col.children = await this.completeColumn(col);
           } else if (col.type === `column`) {
-            col.path = `/list/module/${col.id}`;
+            col.path = `/newsList/module/${col.id}`;
             col.children = await this.completeColumn(col);
           } else if (col.type === `content`) {
             col.path = `/detail/${col.content_id}`;

src/views/list.vue

@@ -1,12 +1,20 @@
 <template>
   <div id="list">
-    <list-detail :backColor="backColor" :info="info" :rightList="rightList"></list-detail>
+    <list-detail :backColor="backColor" :menuList="menu" :sideMenu="sideMenu" :info="site" :rightList="rightList"></list-detail>
   </div>
 </template>
 
 <script>
 import listDetail from '@/components/list.vue';
+import { masterMenu } from '@/config/jobs-menu';
+import { mapActions, mapState } from 'vuex';
+import _ from 'lodash';
 export default {
+  metaInfo() {
+    return {
+      title: this.siteTitle ? this.siteTitle : '就业信息网',
+    };
+  },
   name: 'list',
   props: {},
   components: {
@@ -31,10 +39,120 @@ export default {
         date: '2019-12-11',
       },
     ],
+    menu: [],
+    sideMenu: masterMenu.children,
+    site: {},
+    siteTitle: '',
   }),
-  created() {},
-  computed: {},
-  methods: {},
+  async created() {
+    await this.toGetSite(); //获取主站信息
+    await this.loadMenu(); //获取菜单信息
+    await this.search();
+  },
+  computed: {
+    jobs() {
+      return this.$route.params.jobs;
+    },
+    type() {
+      return this.$route.params.type;
+    },
+  },
+  watch: {
+    jobs: 'search',
+    type: 'search',
+  },
+  methods: {
+    ...mapActions(['getSite', 'getMenu', 'getColumn', 'getJobfair', 'getTalk', 'getJobInfo', 'getPosts']),
+    async search({ skip = 0, limit = 8 } = {}) {
+      let result;
+      if (this.jobs === 'talk') {
+        result = await this.getTalk({ type: 'list', data: { skip: skip, limit: limit } });
+      } else if (this.jobs === 'jobfair') {
+        result = await this.getJobfair({ type: 'list', data: { skip: skip, limit: limit } });
+      } else if (this.jobs === 'jobs') {
+        result = await this.getPosts({ type: 'list', data: { skip: skip, limit: limit, is_practice: this.type === 'official' ? 0 : 1 } });
+      } else {
+        result = await this.getJobInfo({ type: 'list', data: { skip: skip, limit: limit } });
+      }
+      if (`${result.errcode}` === '0') {
+        //给this=>vue的实例下在中的list属性，赋予result。data的值
+        this.$set(this, `list`, result.data);
+        this.$set(this, `total`, result.total);
+      } else {
+        this.$message.error(result.errmsg ? result.errmsg : 'error');
+      }
+    },
+    //站点信息
+    async toGetSite() {
+      let site = sessionStorage.getItem('site');
+      if (!site) {
+        let result = await this.getSite({ type: 'search' });
+        if (result.errcode === 0) {
+          sessionStorage.setItem('site', JSON.stringify(result.data));
+          if (_.get(result.data, `custom`)) {
+            let item = result.custom;
+          }
+          this.$set(this, `site`, result.data);
+          this.$set(this, `siteTitle`, this.site.name);
+        }
+      } else {
+        this.$set(this, `site`, JSON.parse(site));
+        this.$set(this, `siteTitle`, this.site.name);
+        let arr = this.site;
+        if (arr.custom) {
+          let item = arr.custom;
+        }
+      }
+    },
+    //菜单
+    async loadMenu() {
+      let menu = sessionStorage.getItem('menu');
+      if (menu) {
+        this.$set(this, `menu`, JSON.parse(menu));
+        await this.finishedMenu();
+      } else this.toGetMenu();
+    },
+    async toGetMenu() {
+      let result = await this.getMenu({ type: `list` });
+      if (result.errcode === 0) {
+        sessionStorage.setItem('menu', JSON.stringify(result.data));
+        this.$set(this, `menu`, result.data);
+        this.finishedMenu();
+      }
+    },
+    async finishedMenu() {
+      let menus = JSON.parse(JSON.stringify(this.menu));
+      for (const item of menus) {
+        if (item.type === 'content') {
+          item.path = `/detail/${item.content_id}`;
+        } else if (item.type !== 'url') {
+          let res = await this.completeMenu(item);
+          item.children = res;
+        }
+      }
+      this.$set(this, `menu`, menus);
+    },
+    async completeMenu(item) {
+      let result = await this.getColumn({
+        type: `list`,
+        data: { parent_id: item.id },
+      });
+      if (result.errcode === 0) {
+        let columns = result.data;
+        for (const col of columns) {
+          if (col.type === 'content') {
+            col.path = `/detail/${col.content_id}`;
+          } else if (col.type !== 'url') {
+            col.path = `/newsList/menu/${col.id}?title=${col.title}`;
+            if (col.parent.includes('党员')) {
+              col.path = `/memberList/menu/${col.id}?title=${col.title}`;
+            }
+          }
+        }
+        return columns;
+      }
+    },
+  },
 };
 </script>
 

src/views/newsList.vue

@@ -0,0 +1,184 @@
+<template>
+  <div id="newsList">
+    <list-detail
+      :menuList="menu"
+      :info="site"
+      :backColor="backColor"
+      :Color="Color"
+      :newsList="newsList"
+      :sideMenu="sideMenu"
+      :title="title"
+      @search="toGetNews"
+      :total="total"
+      :listSpan="listSpan"
+    ></list-detail>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapState } from 'vuex';
+import listDetail from '@/components/newsList.vue';
+import _ from 'lodash';
+export default {
+  metaInfo() {
+    return {
+      title: this.siteTitle ? this.siteTitle : '就业信息网',
+    };
+  },
+  name: 'newsList',
+  props: {},
+  components: {
+    listDetail,
+  },
+  data: () => ({
+    info: {
+      src: require('@/assets/logo.png'),
+      phone: '0431-12345678',
+      banner: require('@/assets/banner.png'),
+      address: '办公地址：长春市经济技术开发区金川街151号吉林省高等学校毕业生就业指导中心2楼一站式办公大厅',
+      email: '邮编：130012',
+      gongjiao: '公交线路：乘坐120路、227路、20路、260路、80路、130路、281路、154路、190路、125路公交北方市场下车，北方市场南门南行200米。',
+      mobile: '业务咨询电话：0431-84657570 0431-84657571;',
+      date: '办公时间：周一至周五，法定假日不对外办公。',
+      footTitle: '吉ICP备09006292号-1 Copyright 2013 版权所有 吉林省高等学校毕业生就业指导中心 All Rights Reserved',
+    },
+    backColor: '#0457c7',
+    Color: '#0457c7',
+    newsList: [],
+    total: 0,
+    menu: [],
+    sideMenu: [],
+    site: {},
+    siteTitle: '',
+  }),
+  async created() {
+    await this.toGetSite(); //获取主站信息
+    await this.loadMenu(); //获取菜单信息
+    this.toGetNews(); //获取数据
+  },
+  computed: {
+    type() {
+      return this.$route.params.type;
+    },
+    id() {
+      return this.$route.params.id;
+    },
+    title() {
+      return this.$route.query.title;
+    },
+    listSpan() {
+      return this.type === 'menu' ? 18 : 24;
+    },
+  },
+  watch: {
+    type: 'getSubMenu',
+    id: 'toGetNews',
+    title: 'getSubMenu',
+  },
+  methods: {
+    ...mapActions(['getSite', 'getMenu', 'getColumn', 'getNews']),
+    //站点信息
+    async toGetSite() {
+      let site = sessionStorage.getItem('site');
+      if (!site) {
+        let result = await this.getSite({ type: 'search' });
+        if (result.errcode === 0) {
+          sessionStorage.setItem('site', JSON.stringify(result.data));
+          if (_.get(result.data, `custom`)) {
+            let item = result.custom;
+          }
+          this.$set(this, `site`, result.data);
+          this.$set(this, `siteTitle`, this.site.name);
+        }
+      } else {
+        this.$set(this, `site`, JSON.parse(site));
+        this.$set(this, `siteTitle`, this.site.name);
+        let arr = this.site;
+        if (arr.custom) {
+          let item = arr.custom;
+        }
+      }
+    },
+    //菜单
+    async loadMenu() {
+      let menu = sessionStorage.getItem('menu');
+      if (menu) {
+        this.$set(this, `menu`, JSON.parse(menu));
+        await this.finishedMenu();
+      } else this.toGetMenu();
+      this.getSubMenu();
+    },
+    async toGetMenu() {
+      let result = await this.getMenu({ type: `list` });
+      if (result.errcode === 0) {
+        sessionStorage.setItem('menu', JSON.stringify(result.data));
+        this.$set(this, `menu`, result.data);
+        this.finishedMenu();
+      }
+    },
+    async finishedMenu() {
+      let menus = JSON.parse(JSON.stringify(this.menu));
+      for (const item of menus) {
+        if (item.type === 'content') {
+          item.path = `/detail/${item.content_id}`;
+        } else if (item.type !== 'url') {
+          let res = await this.completeMenu(item);
+          item.children = res;
+        }
+      }
+      this.$set(this, `menu`, menus);
+    },
+    async completeMenu(item) {
+      let result = await this.getColumn({
+        type: `list`,
+        data: { parent_id: item.id },
+      });
+      if (result.errcode === 0) {
+        let columns = result.data;
+        for (const col of columns) {
+          if (col.type === 'content') {
+            col.path = `/detail/${col.content_id}`;
+          } else if (col.type !== 'url') {
+            col.path = `/newsList/menu/${col.id}?title=${col.title}`;
+            if (col.parent.includes('党员')) {
+              col.path = `/memberList/menu/${col.id}?title=${col.title}`;
+            }
+          }
+        }
+        return columns;
+      }
+    },
+    //侧菜单
+    getSubMenu() {
+      let data;
+      if (this.type === `module`) {
+        data = sessionStorage.getItem(`modules`);
+        this.$set(this, `sideMenu`, []);
+      } else {
+        let res = this.menu.filter(fil => {
+          if (fil.children) {
+            let res = fil.children.filter(filc => filc.id === this.id);
+            return res.length > 0;
+          } else return false;
+        });
+        this.$set(this, `sideMenu`, res.length > 0 ? res[0].children : []);
+      }
+    },
+    //请求数据
+    async toGetNews({ skip = 0, limit = 8 } = {}) {
+      let result = await this.getNews({ type: 'list', data: { parent_id: this.id, skip: skip, limit: limit } });
+      if (result.errcode === 0) {
+        let data = result.data;
+        for (const item of data) {
+          let info = await this.getNews({ type: 'fetch', data: { id: item.id } });
+          if (info.errcode === 0) item.content = info.data.content;
+          this.$set(this, `total`, result.total);
+        }
+        this.$set(this, `newsList`, result.data);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>