新增主题教育模板

src/App.vue

@@ -1,9 +1,12 @@
 <template>
   <div ref="app" id="app">
-    <heads class="heads"></heads>
-    <router-view :key="$route.fullPath" />
-    <foot></foot>
-    <upwindow></upwindow>
+    <div v-if="!$route.fullPath.includes('templates')">
+      <heads class="heads"></heads>
+      <router-view :key="$route.fullPath" />
+      <foot></foot>
+      <upwindow></upwindow>
+    </div>
+    <router-view v-else :key="$route.fullPath" />
   </div>
 </template>
 

src/components/heads/nav/index.vue

@@ -75,7 +75,14 @@ export default {
       // 类型为0（链接）跳转链接
       if (env.type == '0') window.open(env.url);
       // 类型为1（栏目）进入列表页
-      if (env.type == '1') this.$router.push(`/list/${this.activeIndex}?parentCode=${parentCode}`);
+      if (env.type == '1') {
+        if (!env.template || env.template == '') {
+          this.$router.push(`/list/${this.activeIndex}?parentCode=${parentCode}`);
+          return;
+        }
+        const routeUrl = this.$router.resolve(`/templates/${env.template}/${this.activeIndex}`);
+        window.open(routeUrl.href, '_blank');
+      }
       // 类型为2（单页）进入单页页面
       if (env.type == '2') this.$router.push(`/pages/${env.code}?parentCode=${parentCode}`);
     },

src/router/index.js

@@ -43,6 +43,25 @@ const routes = [
     path: '/searchList/:search',
     name: 'searchList',
     component: () => import('../views/searchList.vue')
+  },
+  // 主题教育模板
+  // 模板首页
+  {
+    path: '/templates/ztjy/:code',
+    name: 'ztjy',
+    component: () => import('../views/templates/ztjy/index.vue')
+  },
+  // 模板列表页
+  {
+    path: '/templates/ztjy/list/:code',
+    name: 'ztjy',
+    component: () => import('../views/templates/ztjy/list.vue')
+  },
+  // 模板详情页
+  {
+    path: '/templates/ztjy/details/:id',
+    name: 'ztjy',
+    component: () => import('../views/templates/ztjy/details.vue')
   }
 ];
 

src/views/Home.vue

@@ -2,7 +2,7 @@
   <div class="home">
     <el-carousel height="100px" class="hfbox" direction="vertical" autoplay :interval="3000">
       <el-carousel-item>
-        <a class="hf" @click="imgClick('ztjy', 'zt')">
+        <a class="hf" @click="imgClick('ztjy1', '02')">
           <img src="../assets/hf1.jpg" class="hfimg">
         </a>
       </el-carousel-item>
@@ -12,7 +12,7 @@
         </a>
       </el-carousel-item>
       <el-carousel-item>
-        <a class="hf" @click="imgClick('ztjy', 'zt')">
+        <a class="hf" @click="imgClick('ztjy1', '02')">
           <img src="../assets/hf1.jpg" class="hfimg">
         </a>
       </el-carousel-item>

src/views/templates/ztjy/details.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="details">
+    <img src="../../../assets/ztjytop.jpg" class="topimg" />
+    <div class="listBox">
+      <div class="listtitle">{{ menu.name }}</div>
+      <div class="title">{{ contentsItem.title }}</div>
+      <div class="timeBox">
+        <div class="time">时间：{{ contentsItem.createAt | dates }}</div>
+        <div class="time2">来源：{{ contentsItem.source }}</div>
+        <div class="time">作者：{{ contentsItem.author }}</div>
+      </div>
+      <div class="bodyHtml" v-html="contentsItem.content"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment';
+import { mapState, mapActions } from 'vuex';
+export default {
+  name: 'detailsHome',
+  components: {},
+  computed: {
+    ...mapState(['contentsItem', 'dict', 'menusall'])
+  },
+  data() {
+    return {
+      id: '',
+      menu: {}
+    };
+  },
+  async created () {
+    await this.sourceQuery();
+    // 所有菜单
+    await this.menusQueryAll();
+    // 获取一例菜单
+    this.menu = this.menusall.find(e => e.parentCode == this.$route.query.code);
+    console.log(this.menu, this.menu);
+  },
+  async mounted() {
+    this.id = this.$route.params.id;
+    await this.contentsFetch({ id: this.id });
+  },
+  methods: {
+    ...mapActions(['contentsFetch', 'imgNewsFetch', 'sourceQuery', 'menusQueryAll'])
+  },
+  filters: {
+    dates(e) {
+      return moment(e).format('YYYY-MM-DD');
+    },
+    setbr(val) {
+      return val.replace(/\n/g, '<br>');
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.topimg {
+  width: 100%;
+}
+.title {
+  width: 95%;
+  height: auto;
+  overflow: hidden;
+  color: #30323f;
+  font-size: 1.875em;
+  font-weight: bold;
+  margin: 0 auto;
+  margin-bottom: 1%;
+}
+.listBox {
+  width: 75%;
+  height: auto;
+  overflow: hidden;
+  margin: 5vh auto;
+  border: #e4e4e4 1px solid;
+}
+.ListHedir {
+  display: flex;
+  width: 100%;
+  height: auto;
+  overflow: hidden;
+  padding: 1% 2%;
+  // background-color: #ededed;
+  font-size: 1.125em;
+  color: #bb0f0f;
+  font-weight: bold;
+}
+.listtitle {
+  width: 95%;
+  height: auto;
+  overflow: hidden;
+  font-size: 1.875em;
+  font-weight: bold;
+  color: #ba0612;
+  margin: 3% auto;
+}
+.timeBox {
+  display: flex;
+  width: 95%;
+  margin: 0 auto;
+  height: auto;
+  overflow: hidden;
+  padding-bottom: 1%;
+  margin-bottom: 3%;
+  border-bottom: #cdd1e5 1px solid;
+  font-size: 0.875em;
+  color: #727586;
+}
+.time2 {
+  margin: 0 15px;
+}
+.bodyHtml {
+  width: 95%;
+  margin: 0 auto;
+  height: auto;
+  overflow: hidden;
+  color: #363636;
+  line-height: 210%;
+}
+</style>

src/views/templates/ztjy/index.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="list">
+    <img src="../../../assets/ztjytop.jpg" class="topimg">
+    <div class="title">习近平：在学习贯彻习近平新时代中国特色社会主义思想主题教育工作会议上的讲话</div>
+    <div class="listBox" v-for="item in menu" :key="item.code">
+      <div class="ListHedir">
+        <div class="listtitle">{{ item.name }}</div>
+        <div class="listMore" @click="more(item.code)">更多</div>
+      </div>
+      <ul class="listBody">
+        <li class="listItem" v-for="i in list[item.code]" :key="i._id" @click="detailsClick(i)">
+          <div class="listname">{{ i.title }}</div>
+          <div class="listtime">{{ i.createAt | dates }}</div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+import moment from 'moment';
+import { mapState, mapActions } from 'vuex';
+export default {
+  name: 'listHome',
+  components: {},
+  computed: {
+    ...mapState(['contentList', 'listTotal', 'menusall'])
+  },
+  data() {
+    return {
+      pageSize: 10,
+      menu: {},
+      code: '',
+      list: {}
+    };
+  },
+  async mounted() {
+    // 所有菜单
+    await this.menusQueryAll();
+    // 当前菜单
+    this.code = this.$route.params.code;
+    // 获取一例菜单
+    this.menu = this.menusall.filter(e => e.parentCode == this.$route.params.code);
+    this.menu.map(async e => {
+      const data = await this.filterQuery(e.code);
+      this.$set(this.list, e.code, data);
+    });
+  },
+  methods: {
+    ...mapActions(['contentsList', 'menusQueryAll']),
+    // 查询函数
+    async filterQuery (bind) {
+      const res = await this.contentsList({ filter: { bind }, paging: { page: 0, size: 10 } });
+      return res?.data;
+    },
+    // 列表点击
+    detailsClick(e) {
+      const routeUrl = this.$router.resolve(`/templates/ztjy/details/${e._id}?code=${this.code}`);
+      window.open(routeUrl.href, '_blank');
+    },
+    // 点击更过
+    more(code) {
+      const routeUrl = this.$router.resolve(`/templates/ztjy/list/${code}`);
+      window.open(routeUrl.href, '_blank');
+    }
+  },
+  filters: {
+    dates(e) {
+      return moment(e).format('YYYY-MM-DD');
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.topimg {
+  width: 100%;
+}
+.title {
+  width: 75%;
+  margin: 0 auto;
+  height: auto;
+  overflow: hidden;
+  padding: 2% 0;
+  color: #ba0612;
+  font-size: 3em;
+  font-weight: bold;
+  text-align: center;
+}
+.listBox {
+  width: 75%;
+  height: auto;
+  overflow: hidden;
+  margin: 5vh auto;
+  border: #e4e4e4 1px solid;
+}
+.ListHedir {
+  display: flex;
+  width: 100%;
+  height: auto;
+  overflow: hidden;
+  padding: 1% 2%;
+  background-color: #ededed;
+  font-size: 1.125em;
+  color: #bb0f0f;
+  font-weight: bold;
+}
+.listtitle {
+  width: 90%;
+  text-align: left;
+}
+.listMore {
+  width: 10%;
+  text-align: right;
+  font-weight: normal;
+  color: #7d7d7d;
+  font-size: 0.8888em;
+  cursor: pointer;
+}
+.listBody {
+  overflow: hidden;
+  padding: 0;
+  width: 90%;
+  margin: 0 auto;
+  padding-bottom: 5vh;
+}
+.listItem {
+  line-height: 3em;
+  width: 100%;
+  background: url('../../../assets/an.png') left center no-repeat;
+  padding-left: 3%;
+  border-bottom: #CCC 1px dashed;
+  margin-right: 3%;
+  cursor: pointer;
+}
+.listname {
+  width: 90%;
+  text-align: left;
+  float: left;
+}
+.listtime {
+  width: 10%;
+  text-align: right;
+  float: right;
+}
+</style>

src/views/templates/ztjy/list.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="list">
+    <img src="../../../assets/ztjytop.jpg" class="topimg">
+    <div class="listBox">
+      <div class="listtitle">{{ menu.name }}</div>
+      <ul class="listBody">
+        <li class="listItem" v-for="i in contentList" :key="i._id" @click="detailsClick(i)">
+          <div class="listname">{{ i.title }}</div>
+          <div class="listtime">{{ i.createAt | dates }}</div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment';
+import { mapState, mapActions } from 'vuex';
+export default {
+  name: 'listHome',
+  components: {},
+  computed: {
+    ...mapState(['contentList', 'listTotal', 'menusall'])
+  },
+  data() {
+    return {
+      pageSize: 10,
+      menu: {},
+      code: ''
+    };
+  },
+  async mounted() {
+    // 所有菜单
+    await this.menusQueryAll();
+    this.menu = this.menusall.find(e => e.code == this.$route.params.code);
+    await this.filterQuery();
+  },
+  methods: {
+    ...mapActions(['contentsList', 'menusQueryAll']),
+    // 查询函数
+    async filterQuery ({ filter = {}, paging = { page: 0, size: 10 } } = {}) {
+      filter.bind = this.$route.params.code;
+      await this.contentsList({ filter, paging });
+    },
+    // 列表点击
+    detailsClick(e) {
+      const routeUrl = this.$router.resolve(`/templates/ztjy/details/${e._id}?code=${this.code}`);
+      window.open(routeUrl.href, '_blank');
+    }
+  },
+  filters: {
+    dates(e) {
+      return moment(e).format('YYYY-MM-DD');
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.topimg {
+  width: 100%;
+}
+.title {
+  width: 75%;
+  margin: 0 auto;
+  height: auto;
+  overflow: hidden;
+  padding: 2% 0;
+  color: #ba0612;
+  font-size: 3em;
+  font-weight: bold;
+  text-align: center;
+}
+.listBox {
+  width: 75%;
+  height: auto;
+  overflow: hidden;
+  margin: 5vh auto;
+  border: #e4e4e4 1px solid;
+}
+.ListHedir {
+  display: flex;
+  width: 100%;
+  height: auto;
+  overflow: hidden;
+  padding: 1% 2%;
+  // background-color: #ededed;
+  font-size: 1.125em;
+  color: #bb0f0f;
+  font-weight: bold;
+}
+.listtitle {
+  width: 95%;
+  height: auto;
+  overflow: hidden;
+  font-size: 1.875em;
+  font-weight: bold;
+  color: #ba0612;
+  margin: 3% auto;
+}
+.listBody {
+  overflow: hidden;
+  padding: 0;
+  width: 95%;
+  margin: 0 auto;
+  padding-bottom: 5vh;
+}
+.listItem {
+  line-height: 3em;
+  width: 100%;
+  background: url('../../../assets/an.png') left center no-repeat;
+  padding-left: 3%;
+  border-bottom: #CCC 1px dashed;
+  margin-right: 3%;
+  cursor: pointer;
+}
+.listname {
+  width: 90%;
+  text-align: left;
+  float: left;
+}
+.listtime {
+  width: 10%;
+  text-align: right;
+  float: right;
+}
+</style>