更新policy

src/components/policy/detail.vue

@@ -1,125 +0,0 @@
-<template>
-  <div id="policy">
-    <el-row>
-      <el-col :span="24" class="top">
-        <top></top>
-      </el-col>
-      <el-col :span="24" class="logo">
-        <div class="w_1200">
-          <logo :info="info"></logo>
-        </div>
-      </el-col>
-      <el-col :span="24" class="menu">
-        <div class="w_1200">
-          <menuInfo></menuInfo>
-        </div>
-      </el-col>
-      <el-col :span="24" class="main">
-        <div class="w_1200">
-          <el-col :span="5" class="fenlei">
-            <fenlei :liebiaoList="liebiaoList" v-on="$listeners"></fenlei>
-          </el-col>
-          <el-col :span="19" class="rightcont">
-            <rightcont :columnName="columnName" :contentList="contentList" :total="total"></rightcont>
-          </el-col>
-        </div>
-      </el-col>
-      <el-col :span="24" class="foot">
-        <div class="w_1200">
-          <foot :info="info"></foot>
-        </div>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import top from '@/layout/index/top.vue';
-import logo from '@/layout/index/logo.vue';
-import menuInfo from '@/layout/index/menuInfo.vue';
-import foot from '@/layout/index/foot.vue';
-import fenlei from '@/layout/policy/fenlei.vue';
-import rightcont from '@/layout/policy/rightcont.vue';
-
-export default {
-  name: 'policy',
-  props: {
-    info: null, //站点信息
-    liebiaoList: null,
-    columnName: null, //栏目标题
-    contentList: null, //内容
-    total: null,
-  },
-  components: {
-    top, //头部
-    logo, //logo
-    menuInfo, //导航
-    foot, //底部
-    fenlei, //左边分类
-    rightcont, //右边栏
-  },
-  data: () => ({}),
-  created() {},
-  computed: {},
-  methods: {
-    clickList({ id }) {
-      console.log(id);
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.w_1200 {
-  width: 1200px;
-  margin: 0 auto;
-}
-.top {
-  height: 40px;
-  overflow: hidden;
-  background-color: rgba(11, 58, 125, 0.8);
-}
-.logo {
-  height: 200px;
-  overflow: hidden;
-}
-.menu {
-  height: 70px;
-  overflow: hidden;
-}
-
-.main {
-  min-height: 600px;
-  overflow: hidden;
-  margin: 10px 0;
-}
-.main .fenlei {
-  float: left;
-  width: 240px;
-  min-height: 600px;
-  margin: 0 10px 0 0;
-  overflow: hidden;
-  background-color: #ffffff;
-}
-.main .rightcont {
-  float: left;
-  width: 950px;
-  min-height: 600px;
-  overflow: hidden;
-  background-color: #fff;
-}
-
-.main .link {
-  float: left;
-  width: 100%;
-  height: 100px;
-  overflow: hidden;
-  background-color: #fff;
-}
-.foot {
-  float: left;
-  width: 100%;
-  height: 120px;
-  overflow: hidden;
-}
-</style>

src/components/policy/policy.vue

@@ -20,7 +20,8 @@
             <fenlei :liebiaoList="liebiaoList" v-on="$listeners"></fenlei>
           </el-col>
           <el-col :span="19" class="rightcont">
-            <rightcont :columnName="columnName" :contentList="contentList" :total="total"></rightcont>
+            <rightcont v-on="$listeners" :columnName="columnName" :contentList="contentList" :total="total" v-if="display === 'list'"></rightcont>
+            <policyrightcont v-else :policyInfo="policyInfo"></policyrightcont>
           </el-col>
         </div>
       </el-col>
@@ -40,7 +41,7 @@ import menuInfo from '@/layout/index/menuInfo.vue';
 import foot from '@/layout/index/foot.vue';
 import fenlei from '@/layout/policy/fenlei.vue';
 import rightcont from '@/layout/policy/rightcont.vue';
-
+import policyrightcont from '@/layout/policy/policyrightcont.vue';
 export default {
   name: 'policy',
   props: {
@@ -49,6 +50,8 @@ export default {
     columnName: null, //栏目标题
     contentList: null, //内容
     total: null,
+    display: { type: String, default: 'list' },
+    policyInfo: null, //信息详情
   },
   components: {
     top, //头部
@@ -57,6 +60,7 @@ export default {
     foot, //底部
     fenlei, //左边分类
     rightcont, //右边栏
+    policyrightcont,
   },
   data: () => ({}),
   created() {},

src/layout/policy/policyrightcont.vue

@@ -0,0 +1,23 @@
+<template>
+  <div id="policyrightcont">
+    <el-col class="zhengce">
+      {{ policyInfo.title }}
+    </el-col>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'policyrightcont',
+  props: {
+    policyInfo: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped></style>

src/layout/policy/rightcont.vue

@@ -6,7 +6,7 @@
       </el-col>
       <el-col :span="24" class="info">
         <ul>
-          <li v-for="(item, index) in contentList" :key="index" @click="$router.push({ path: '/policy/detail', query: { id: item.id } })">
+          <li v-for="(item, index) in contentList" :key="index" @click="$emit('fetch', item.id)">
             <el-col :span="21" class="title textOver">{{ item.title }}</el-col>
             <el-col :span="3" class="date">
               {{ item.meta && item.meta.createdAt ? new Date(item.meta.createdAt).toLocaleDateString() : '' || '' }}

src/router/index.js

@@ -21,11 +21,11 @@ const routes = [
     name: 'policy',
     component: () => import('../views/policy/policy.vue'),
   },
-  {
-    path: '/policy/detail',
-    name: 'detail',
-    component: () => import('../views/policy/detail.vue'),
-  },
+  // {
+  //   path: '/policy/detail',
+  //   name: 'detail',
+  //   component: () => import('../views/policy/detail.vue'),
+  // },
   // 科技超市
   {
     path: '/supermaket/supermarket',

src/views/policy/detail.vue

@@ -1,82 +0,0 @@
-<template>
-  <div id="detail">
-    <policy-detail
-      :info="info"
-      :zongheList="zongheList"
-      :contentList="contentList"
-      :total="total"
-      :columnName="columnName"
-      :liebiaoList="liebiaoList"
-      @clickLists="submit"
-    ></policy-detail>
-  </div>
-</template>
-
-<script>
-import policyDetail from '@/components/policy/policy.vue';
-import { createNamespacedHelpers, mapGetters } from 'vuex';
-const { mapActions: mapSite } = createNamespacedHelpers('site');
-const { mapActions: mappolicyColumn } = createNamespacedHelpers('policyColumn');
-const { mapActions: mappolicyNews } = createNamespacedHelpers('policyNews');
-export default {
-  name: 'detail',
-  props: {},
-
-  components: {
-    policyDetail,
-  },
-  data: () => ({
-    liebiaoList: [],
-    info: {},
-    zongheList: {},
-    contentList: [],
-    total: 1,
-    leftId: '',
-    columnName: '',
-  }),
-  created() {
-    this.searchSite();
-    this.policyColumn();
-  },
-  computed: {},
-  methods: {
-    ...mapSite(['showInfo']),
-    ...mappolicyColumn({ policyColumns: 'query', policyfetch: 'fetch' }),
-    ...mappolicyNews({ policyNew: 'query' }),
-    // 查询站点信息
-    async searchSite() {
-      let res = await this.showInfo();
-      let object = JSON.parse(JSON.stringify(res.data));
-      if (object) {
-        this.$set(this, `info`, res.data);
-      } else {
-        this.$message.error(res.errmsg ? res.errmsg : 'error');
-      }
-    },
-    async policyColumn({ ...info } = {}) {
-      const res = await this.policyColumns({ ...info });
-      if (this.$checkRes(res)) {
-        this.$set(this, `liebiaoList`, res.data);
-      }
-    },
-    submit({ id }) {
-      this.$set(this, `leftId`, id);
-      this.searchRight();
-    },
-    async searchRight({ skip = 0, limit = 10, column_id } = {}) {
-      const res = await this.policyNew({ skip, limit, column_id: this.leftId });
-      for (const val of res.data) {
-        const result = await this.policyfetch(val.column_id);
-        val.column_name = result.data.name;
-      }
-      this.$set(this, `contentList`, res.data);
-      this.$set(this, `total`, res.data.length);
-      for (const val of res.data) {
-        this.$set(this, `columnName`, val.column_name);
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>

src/views/policy/policy.vue

@@ -2,12 +2,14 @@
   <div id="policy">
     <policy-detail
       :info="info"
-      :zongheList="zongheList"
+      :liebiaoList="liebiaoList"
+      :display="display"
+      :columnName="columnName"
       :contentList="contentList"
       :total="total"
-      :columnName="columnName"
-      :liebiaoList="liebiaoList"
+      :policyInfo="policyInfo"
       @clickLists="submit"
+      @fetch="fetchInfo"
     ></policy-detail>
   </div>
 </template>
@@ -15,6 +17,7 @@
 <script>
 import policyDetail from '@/components/policy/policy.vue';
 import { createNamespacedHelpers, mapGetters } from 'vuex';
+import _ from 'loadsh';
 const { mapActions: mapSite } = createNamespacedHelpers('site');
 const { mapActions: mappolicyColumn } = createNamespacedHelpers('policyColumn');
 const { mapActions: mappolicyNews } = createNamespacedHelpers('policyNews');
@@ -26,23 +29,25 @@ export default {
     policyDetail,
   },
   data: () => ({
-    liebiaoList: [],
     info: {},
-    zongheList: {},
+    liebiaoList: [],
+    display: 'list',
+    columnName: '',
     contentList: [],
     total: 1,
     leftId: '',
-    columnName: '',
+    policyInfo: {},
   }),
-  created() {
+  async created() {
     this.searchSite();
-    this.policyColumn();
+    await this.policyColumn();
+    await this.defaultColumn();
   },
   computed: {},
   methods: {
     ...mapSite(['showInfo']),
     ...mappolicyColumn({ policyColumns: 'query', policyfetch: 'fetch' }),
-    ...mappolicyNews({ policyNew: 'query' }),
+    ...mappolicyNews({ policyNew: 'query', newsFetch: 'fetch' }),
     // 查询站点信息
     async searchSite() {
       let res = await this.showInfo();
@@ -61,6 +66,7 @@ export default {
     },
     submit({ id }) {
       this.$set(this, `leftId`, id);
+      this.display = 'list';
       this.searchRight();
     },
     async searchRight({ skip = 0, limit = 10, column_id } = {}) {
@@ -75,6 +81,21 @@ export default {
         this.$set(this, `columnName`, val.column_name);
       }
     },
+    async defaultColumn() {
+      if (!(this.liebiaoList.length > 0)) return;
+      let id = _.get(this.liebiaoList[0], 'id', false);
+      if (!id) return;
+      this.submit({ id });
+    },
+    async fetchInfo(id) {
+      this.display = 'detail';
+      const res = await this.newsFetch(id);
+      // for (const val of res.data) {
+      // }
+      this.$set(this, `policyInfo`, res.data);
+      console.log(res.data);
+      // 查询详情，赋值
+    },
   },
 };
 </script>