11

src/router/index.js

@@ -63,6 +63,12 @@ const routes = [
     meta: { title: '个人中心', isleftarrow: false },
     component: () => import('../views/user/index.vue'),
   },
+  {
+    path: '/user/detail',
+    name: 'user',
+    meta: { title: '详情', isleftarrow: true },
+    component: () => import('../views/user/detail.vue'),
+  },
   // 公众号第一版结束
   // 公众号第二版开始 viewTwo
   // 在线展会

src/views/user/detail.vue

@@ -0,0 +1,121 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="detail">
+        <el-col :span="24" class="top">
+          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow" @onClickLeft="back"> </NavBar>
+        </el-col>
+        <el-col :span="24" class="main">
+          <span v-if="type == 'tztg'">
+            <tztg :tztgInfo="tztgInfo"></tztg>
+          </span>
+          <span v-else-if="type == 'xwzx'">
+            <xwzx :xwzxInfo="xwzxInfo"></xwzx>
+          </span>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+//新闻资讯
+const { mapActions: scienceNews } = createNamespacedHelpers('scienceNews');
+//通知通告
+const { mapActions: journnews } = createNamespacedHelpers('journnews');
+import NavBar from '@/layout/common/topInfo.vue';
+//通知通告
+import tztg from './detailParts/tztgDetail.vue';
+//新闻资讯
+import xwzx from './detailParts/xwzxDetail.vue';
+export default {
+  name: 'detail',
+  props: {},
+  components: {
+    NavBar,
+    //通知通告详情
+    tztg,
+    //新闻资讯详情
+    xwzx,
+  },
+  data: function() {
+    return {
+      //头部标题
+      title: '',
+      // meta为true
+      isleftarrow: '',
+      // 返回
+      navShow: true,
+      //通知通告详情
+      tztgInfo: {},
+      //新闻资讯详情
+      xwzxInfo: {},
+    };
+  },
+  async created() {
+    await this.Detail();
+    await this.setTitle();
+  },
+  methods: {
+    ...journnews(['fetch']),
+    ...scienceNews({ xwzxFetch: 'fetch' }),
+    async Detail() {
+      let res = await this.fetch(this.id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `tztgInfo`, res.data);
+      }
+      res = await this.xwzxFetch(this.id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `xwzxInfo`, res.data);
+      }
+    },
+    //设置标题
+    setTitle() {
+      let type = this.type;
+      if (type == 'tztg') {
+        this.$set(this, `title`, '通知通告详情');
+      } else if (type == 'xwzx') {
+        this.$set(this, `title`, '新闻资讯详情');
+      }
+    },
+    // 返回首页
+    back() {
+      this.$router.push({ path: '/user/index' });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+    id() {
+      return this.$route.query.id;
+    },
+    type() {
+      return this.$route.query.type;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  mounted() {
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.detail {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-color: #f9fafc;
+  .top {
+    height: 46px;
+    overflow: hidden;
+    position: relative;
+    z-index: 999;
+  }
+}
+</style>

src/views/user/detailParts/tztgDetail.vue

@@ -0,0 +1,99 @@
+<template>
+  <div id="tztgDetail">
+    <el-row>
+      <el-col :spna="24" class="tztgDetail">
+        <p class="title">{{ tztgInfo.title }}</p>
+        <el-col :span="24" class="mes">
+          <span>信息来源：{{ tztgInfo.orgin || '暂无' }}</span>
+          <span>发布时间：{{ tztgInfo.publish_time || '暂无' }}</span>
+        </el-col>
+        <el-col :span="24" v-if="tztgInfo.picture != null || undefined" class="img">
+          <van-image :src="tztgInfo.picture">
+            <div slot="error" class="image-slot">
+              <i class="el-icon-picture-outline"></i>
+            </div>
+          </van-image>
+        </el-col>
+        <el-col :span="24" class="con" v-html="tztgInfo.content"> </el-col>
+        <el-col :span="24" class="four" v-if="tztgInfo.filepath">
+          <h4>附件：</h4>
+          <el-link :href="tztgInfo.filepath" :underline="false">{{ tztgInfo.filepathname || '附件下载' }}</el-link>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'tztgDetail',
+  props: {
+    tztgInfo: { type: Object },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tztgDetail {
+  padding: 10px;
+  .title {
+    text-align: center;
+    color: #044b79;
+    font-size: 18px;
+    font-weight: bolder;
+  }
+  .mes {
+    font-size: 16px;
+    color: #666;
+    padding: 20px 0;
+    border-bottom: 1px dashed #ccc;
+    span:nth-child(1) {
+      margin-right: 10px;
+    }
+  }
+  .img {
+    text-align: center;
+    margin: 0 0 15px 0;
+    .el-image {
+      width: 60%;
+    }
+  }
+  .con {
+    margin-top: 20px;
+  }
+}
+/deep/table {
+  width: 100%;
+}
+/deep/.con p img {
+  width: 100%;
+  height: 300px;
+  margin: 5px 0px;
+  display: block;
+}
+/deep/.con div img {
+  width: 100%;
+  height: 260px;
+  display: block;
+}
+/deep/.con p {
+  font-size: 14px;
+  color: #444;
+}
+</style>

src/views/user/detailParts/xwzxDetail.vue

@@ -0,0 +1,104 @@
+<template>
+  <div id="xwzxDtail">
+    <el-row>
+      <el-col :spna="24" class="xwzxDtail">
+        <p class="title">{{ xwzxInfo.title }}</p>
+        <el-col :span="24" class="mes">
+          <span>信息来源：{{ xwzxInfo.orgin || '暂无' }}</span>
+          <span>发布时间：{{ xwzxInfo.publish_time || '暂无' }}</span>
+          <p class="textOver autro">文章作者：{{ xwzxInfo.publish || '系统管理员' }}</p>
+        </el-col>
+        <el-col :span="24" v-if="xwzxInfo.picture != null || undefined" class="img">
+          <van-image :src="xwzxInfo.picture">
+            <div slot="error" class="image-slot">
+              <i class="el-icon-picture-outline"></i>
+            </div>
+          </van-image>
+        </el-col>
+        <el-col :span="24" class="con" v-html="xwzxInfo.content"> </el-col>
+        <el-col :span="24" class="four" v-if="xwzxInfo.filepath">
+          <h4>附件：</h4>
+          <el-link :href="xwzxInfo.filepath" :underline="false">{{ xwzxInfo.filepathname || '附件下载' }}</el-link>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'xwzxDtail',
+  props: {
+    xwzxInfo: { type: Object },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.xwzxDtail {
+  padding: 10px;
+  .title {
+    text-align: center;
+    color: #044b79;
+    font-size: 18px;
+    font-weight: bolder;
+  }
+  .mes {
+    font-size: 16px;
+    color: #666;
+    padding: 20px 0;
+    border-bottom: 1px dashed #ccc;
+    span:nth-child(1) {
+      margin-right: 10px;
+    }
+    .autro {
+      text-align: center;
+      margin-top: 3px;
+    }
+  }
+  .img {
+    text-align: center;
+    margin: 0 0 15px 0;
+    .el-image {
+      width: 60%;
+    }
+  }
+  .con {
+    margin-top: 20px;
+  }
+}
+/deep/table {
+  width: 100%;
+}
+/deep/.con p img {
+  width: 100%;
+  height: 300px;
+  margin: 5px 0px;
+  display: block;
+}
+/deep/.con div img {
+  width: 100%;
+  height: 260px;
+  display: block;
+}
+/deep/.con p {
+  font-size: 14px;
+  color: #444;
+}
+</style>

src/views/user/index.vue

@@ -10,10 +10,10 @@
             <question></question>
           </span>
           <span v-else-if="active == 1">
-            <notice></notice>
+            <notice @btnClick="btnClick"></notice>
           </span>
           <span v-else-if="active == 2">
-            <news></news>
+            <news @btnClick="btnClick"></news>
           </span>
         </el-col>
         <el-col :span="24" class="foot">
@@ -58,14 +58,28 @@ export default {
       active: 0,
     };
   },
-  created() {},
+  created() {
+    this.chageAcieve(0);
+  },
   methods: {
     // 选择菜单
     chageAcieve(index) {
-      if (index == 3) {
+      if (index == 0) {
+        this.$set(this, `title`, '调查问卷');
+      } else if (index == 1) {
+        this.$set(this, `title`, '通知通告');
+      } else if (index == 2) {
+        this.$set(this, `title`, '新闻资讯');
+      } else {
         console.log('登录');
+        this.$set(this, `title`, '账号管理');
       }
     },
+    //跳转详情
+    btnClick(data) {
+      // console.log(data);
+      this.$router.push({ path: '/user/detail', query: { id: data.id, type: data.type } });
+    },
   },
   computed: {
     ...mapState(['user']),

src/views/user/index/news.vue

@@ -6,7 +6,7 @@
           <van-search v-model="value" placeholder="请输入信息标题" @search="onSearch" />
         </el-col>
         <el-col :span="24" class="mess">
-          <el-col :span="24" v-for="(item, index) in list" :key="index" class="list">
+          <el-col :span="24" v-for="(item, index) in list" :key="index" class="list" @click.native="listClick(item)">
             <p class="title textOver">{{ item.title }}</p>
             <p>
               <span class="textOver">发布时间：{{ item.publish_time }}</span>
@@ -61,6 +61,10 @@ export default {
         this.search();
       }
     },
+    listClick(item) {
+      console.log(item);
+      this.$emit('btnClick', { type: 'xwzx', id: item.id });
+    },
   },
   computed: {
     ...mapState(['user']),

src/views/user/index/notice.vue

@@ -6,7 +6,7 @@
           <van-search v-model="value" placeholder="请输入信息标题" @search="onSearch" />
         </el-col>
         <el-col :span="24" class="mess">
-          <el-col :span="24" v-for="(item, index) in list" :key="index" class="list">
+          <el-col :span="24" v-for="(item, index) in list" :key="index" class="list" @click.native="listClick(item)">
             <p class="title textOver">{{ item.title }}</p>
             <p>
               <span class="textOver">发布时间：{{ item.publish_time }}</span>
@@ -75,6 +75,9 @@ export default {
         this.searchList();
       }
     },
+    listClick(item) {
+      this.$emit('btnClick', { type: 'tztg', id: item.id });
+    },
   },
   computed: {
     ...mapState(['user']),