11

src/layout/common/footInfo.vue

@@ -12,6 +12,9 @@
           <van-tabbar-item to="/market/index">
             <p class="text">科技超市</p>
           </van-tabbar-item>
+          <van-tabbar-item to="/journ/index">
+            <p class="text">新闻资讯</p>
+          </van-tabbar-item>
           <van-tabbar-item to="/service/index">
             <p class="text">创新服务</p>
           </van-tabbar-item>

src/router/index.js

@@ -64,6 +64,19 @@ const routes = [
     meta: { title: '创新服务', isleftarrow: true },
     component: () => import('../views/service/detail.vue'),
   },
+  //新闻资讯
+  {
+    path: '/journ/index',
+    name: 'journ',
+    meta: { title: '新闻资讯', isleftarrow: true },
+    component: () => import('../views/journ/index.vue'),
+  },
+  {
+    path: '/journ/detail',
+    name: 'detail',
+    meta: { title: '新闻资讯', isleftarrow: true },
+    component: () => import('../views/journ/detail.vue'),
+  },
   // 个人中心
   {
     path: '/user/index',

src/store/index.js

@@ -7,7 +7,9 @@ import apply from './live/apply';
 // 项目路演
 import newsroadshow from './live/newsroadshow';
 import newsguidance from './live/newsguidance';
-
+// 11-3新闻资讯
+import journcolumn from './market/journcolumn';
+import journnews from './market/journnews';
 // 科技超市
 import product from './market/product';
 import exportuser from './market/exportuser';
@@ -62,5 +64,8 @@ export default new Vuex.Store({
     authUser,
     //嘉宾访谈
     newsguidance,
+    // 11-3新闻资讯
+    journcolumn,
+    journnews,
   },
 });

src/store/market/journcolumn.js

@@ -0,0 +1,42 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+Vue.use(Vuex);
+const api = {
+  columnInfo: `/api/market/journcolumn`,
+};
+const state = () => ({});
+const mutations = {};
+
+const actions = {
+  async query({ commit }, { skip = 0, limit, ...info } = {}) {
+    const res = await this.$axios.$get(`${api.columnInfo}`, {
+      skip,
+      limit,
+      ...info,
+    });
+    return res;
+  },
+  async create({ commit }, payload) {
+    const res = await this.$axios.$post(`${api.columnInfo}`, payload);
+    return res;
+  },
+  async fetch({ commit }, payload) {
+    const res = await this.$axios.$get(`${api.columnInfo}/${payload}`);
+    return res;
+  },
+  async update({ commit }, { id, ...data }) {
+    const res = await this.$axios.$post(`${api.columnInfo}/update/${id}`, data);
+    return res;
+  },
+  async delete({ commit }, payload) {
+    const res = await this.$axios.$delete(`${api.columnInfo}/${payload}`);
+    return res;
+  },
+};
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/store/market/journnews.js

@@ -0,0 +1,39 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+Vue.use(Vuex);
+const api = {
+  newsInfo: `/api/market/journnews`,
+};
+const state = () => ({});
+const mutations = {};
+
+const actions = {
+  async query({ commit }, { skip = 0, limit = undefined, ...info } = {}) {
+    const res = await this.$axios.$get(api.newsInfo, { skip, limit, ...info });
+    return res;
+  },
+  async create({ commit }, payload) {
+    const res = await this.$axios.$post(`${api.newsInfo}`, payload);
+    return res;
+  },
+  async fetch({ commit }, payload) {
+    const res = await this.$axios.$get(`${api.newsInfo}/${payload}`);
+    return res;
+  },
+  async update({ commit }, { id, ...info } = {}) {
+    const res = await this.$axios.$post(`${api.newsInfo}/update/${id}`, { ...info });
+    return res;
+  },
+  async delete({ commit }, payload) {
+    const res = await this.$axios.$delete(`${api.newsInfo}/${payload}`);
+    return res;
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/views/journ/detail.vue

@@ -0,0 +1,144 @@
+<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"> </NavBar>
+        </el-col>
+        <el-col :span="24" class="main">
+          <el-col :span="24" class="title">{{ info.title }}</el-col>
+          <el-col :span="24" class="other">
+            <span class="textOver">信息来源：{{ info.orgin || '暂无' }}</span>
+            <span class="textOver">发布时间：{{ info.publish_time || '暂无' }}</span>
+          </el-col>
+          <el-col :span="24" v-if="info.picture != null || undefined" class="img">
+            <van-image :src="info.picture"></van-image>
+          </el-col>
+          <el-col :span="24" class="con" v-html="info.content"> </el-col>
+          <el-col :span="24" class="four" v-if="info.filepath">
+            <h4>附件：</h4>
+            <el-link :href="info.filepath" :underline="false">{{ info.filepathname || '附件下载' }}</el-link>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+import NavBar from '@/layout/common/topInfo.vue';
+const { mapActions: journnews } = createNamespacedHelpers('journnews');
+
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'detail',
+  props: {},
+  components: {
+    NavBar,
+  },
+  data: function() {
+    return {
+      // 头部标题
+      title: '',
+      // meta为true
+      isleftarrow: '',
+      // 返回
+      navShow: true,
+      //详情
+      info: {},
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    ...journnews({ newsquery: 'query', newsfetch: 'fetch' }),
+    //查询详情
+    async search() {
+      const res = await this.newsfetch(this.id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `info`, res.data);
+        console.log(this.info);
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.detail {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+}
+.main {
+  // min-height: 570px;
+  // margin: 0 0 50px 0;
+  padding: 10px;
+  .title {
+    text-align: center;
+    color: #044b79;
+    font-size: 18px;
+    font-weight: bolder;
+  }
+  .other {
+    font-size: 16px;
+    color: #666;
+    padding: 10px 0 10px 0;
+    border-bottom: 1px dashed #ccc;
+    span {
+      display: inline-block;
+      width: 50%;
+    }
+  }
+  .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/journ/index.vue

@@ -0,0 +1,169 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
+        </el-col>
+        <el-col :span="24" class="main">
+          <van-tabs v-model="active">
+            <van-tab title="科技资讯">
+              <kjzxList :list="kjzxLists" @detailBtn="detailBtn"></kjzxList>
+            </van-tab>
+            <!-- <van-tab title="工作动态">
+              <gzdtList :list="gzdtLists" @detailBtn="detailBtn"></gzdtList>
+            </van-tab>
+            <van-tab title="通知通告">
+              <tztg-list :list="tztgLists" @detailBtn="detailBtn"></tztg-list>
+            </van-tab>
+            <van-tab title="技术前沿">
+              <jsqy-list :list="jsqyLists" @detailBtn="detailBtn"></jsqy-list>
+            </van-tab> -->
+            <van-tab title="工作动态">
+              <kjzxList :list="gzdtLists" @detailBtn="detailBtn"></kjzxList>
+            </van-tab>
+            <van-tab title="通知通告">
+              <kjzxList :list="tztgLists" @detailBtn="detailBtn"></kjzxList>
+            </van-tab>
+            <van-tab title="技术前沿">
+              <kjzxList :list="jsqyLists" @detailBtn="detailBtn"></kjzxList>
+            </van-tab>
+          </van-tabs>
+        </el-col>
+        <el-col :span="24" class="foot">
+          <footInfo></footInfo>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: journcolumn } = createNamespacedHelpers('journcolumn');
+const { mapActions: journnews } = createNamespacedHelpers('journnews');
+import NavBar from '@/layout/common/topInfo.vue';
+import footInfo from '@/layout/common/footInfo.vue';
+import kjzxList from './parts/kjzxList.vue';
+// import gzdtList from './parts/gzdtList.vue';
+// import tztgList from './parts/tztgList.vue';
+// import jsqyList from './parts/jsqyList.vue';
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'index',
+  props: {},
+  components: {
+    NavBar,
+    footInfo,
+    kjzxList,
+    // gzdtList,
+    // tztgList,
+    // jsqyList,
+  },
+  data: function() {
+    return {
+      // 头部标题
+      title: '',
+      // meta为true
+      isleftarrow: '',
+      // 返回
+      navShow: true,
+      //菜单显示
+      active: '1',
+      //科技资讯
+      kjzxLists: [],
+      //科技动态
+      gzdtLists: [],
+      //通知通告
+      tztgLists: [],
+      //技术前沿
+      jsqyLists: [],
+      //栏目
+      column: [],
+    };
+  },
+  async created() {
+    await this.searchColumn();
+    await this.searchList();
+  },
+  methods: {
+    ...journcolumn({ columnquery: 'query' }),
+    ...journnews({ newsquery: 'query' }),
+    async searchColumn() {
+      const res = await this.columnquery();
+      if (this.$checkRes(res)) {
+        this.$set(this, `column`, res.data);
+      }
+    },
+    async searchList() {
+      let col = this.column.find(i => i.site == 'kjzx');
+      if (col) {
+        const res = await this.newsquery({ column_id: col.id });
+        if (this.$checkRes(res)) {
+          this.$set(this, `kjzxLists`, res.data);
+        }
+      }
+      let col2 = this.column.find(i => i.site == 'gzdt');
+      if (col2) {
+        const res = await this.newsquery({ column_id: col2.id });
+        if (this.$checkRes(res)) {
+          this.$set(this, `gzdtLists`, res.data);
+        }
+      }
+      let col3 = this.column.find(i => i.site == 'tztg');
+      if (col3) {
+        const res = await this.newsquery({ column_id: col3.id });
+        if (this.$checkRes(res)) {
+          this.$set(this, `tztgLists`, res.data);
+        }
+      }
+      let col4 = this.column.find(i => i.site == 'jsqy');
+      if (col4) {
+        const res = await this.newsquery({ column_id: col4.id });
+        if (this.$checkRes(res)) {
+          this.$set(this, `jsqyLists`, res.data);
+        }
+      }
+    },
+    detailBtn(data) {
+      this.$router.push({ path: '/journ/detail', query: { id: data.id } });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+}
+.main {
+  min-height: 570px;
+  margin: 0 0 50px 0;
+}
+.foot {
+  position: absolute;
+  bottom: 0;
+}
+/deep/.van-tabs__line {
+  width: 60px;
+}
+</style>

src/views/journ/parts/gzdtList.vue

@@ -0,0 +1,68 @@
+<template>
+  <div id="kjzxList">
+    <el-row>
+      <el-col :span="24" class="kjzx">
+        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="detailBtn(item)">
+          <el-col :span="24" class="name textOver">
+            {{ item.title }}
+          </el-col>
+          <el-col :span="24" class="other">
+            <span class="textOver">信息来源：{{ item.orgin || '暂无' }}</span>
+            <span class="textOver">发布时间：{{ item.publish_time || '暂无' }}</span>
+          </el-col>
+        </el-col>
+      </el-col>
+      <el-backtop :bottom="50" :right="10"> </el-backtop>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'kjzxList',
+  props: {
+    list: { type: Array },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.kjzx {
+  padding: 0 10px;
+  .list {
+    border-bottom: 1px dashed #ccc;
+    padding: 10px 0;
+    .name {
+      font-size: 18px;
+      font-weight: bold;
+    }
+    .company {
+      font-size: 16px;
+      color: #666;
+      padding: 5px 0 0 0;
+    }
+    .other {
+      font-size: 16px;
+      color: #666;
+      padding: 5px 0 0 0;
+      span {
+        display: inline-block;
+        width: 50%;
+      }
+    }
+  }
+}
+</style>

src/views/journ/parts/jsqyList.vue

@@ -0,0 +1,68 @@
+<template>
+  <div id="kjzxList">
+    <el-row>
+      <el-col :span="24" class="kjzx">
+        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="detailBtn(item)">
+          <el-col :span="24" class="name textOver">
+            {{ item.title }}
+          </el-col>
+          <el-col :span="24" class="other">
+            <span class="textOver">信息来源：{{ item.orgin || '暂无' }}</span>
+            <span class="textOver">发布时间：{{ item.publish_time || '暂无' }}</span>
+          </el-col>
+        </el-col>
+      </el-col>
+      <el-backtop :bottom="50" :right="10"> </el-backtop>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'kjzxList',
+  props: {
+    list: { type: Array },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.kjzx {
+  padding: 0 10px;
+  .list {
+    border-bottom: 1px dashed #ccc;
+    padding: 10px 0;
+    .name {
+      font-size: 18px;
+      font-weight: bold;
+    }
+    .company {
+      font-size: 16px;
+      color: #666;
+      padding: 5px 0 0 0;
+    }
+    .other {
+      font-size: 16px;
+      color: #666;
+      padding: 5px 0 0 0;
+      span {
+        display: inline-block;
+        width: 50%;
+      }
+    }
+  }
+}
+</style>

src/views/journ/parts/kjzxList.vue

@@ -0,0 +1,72 @@
+<template>
+  <div id="kjzxList">
+    <el-row>
+      <el-col :span="24" class="kjzx">
+        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="detailBtn(item)">
+          <el-col :span="24" class="name textOver">
+            {{ item.title }}
+          </el-col>
+          <el-col :span="24" class="other">
+            <span class="textOver">信息来源：{{ item.orgin || '暂无' }}</span>
+            <span class="textOver">发布时间：{{ item.publish_time || '暂无' }}</span>
+          </el-col>
+        </el-col>
+      </el-col>
+      <el-backtop :bottom="50" :right="10"> </el-backtop>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'kjzxList',
+  props: {
+    list: { type: Array },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {
+    detailBtn(data) {
+      this.$emit('detailBtn', data);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.kjzx {
+  padding: 0 10px;
+  .list {
+    border-bottom: 1px dashed #ccc;
+    padding: 10px 0;
+    .name {
+      font-size: 18px;
+      font-weight: bold;
+    }
+    .company {
+      font-size: 16px;
+      color: #666;
+      padding: 5px 0 0 0;
+    }
+    .other {
+      font-size: 16px;
+      color: #666;
+      padding: 5px 0 0 0;
+      span {
+        display: inline-block;
+        width: 50%;
+      }
+    }
+  }
+}
+</style>

src/views/journ/parts/tztgList.vue

@@ -0,0 +1,68 @@
+<template>
+  <div id="kjzxList">
+    <el-row>
+      <el-col :span="24" class="kjzx">
+        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="detailBtn(item)">
+          <el-col :span="24" class="name textOver">
+            {{ item.title }}
+          </el-col>
+          <el-col :span="24" class="other">
+            <span class="textOver">信息来源：{{ item.orgin || '暂无' }}</span>
+            <span class="textOver">发布时间：{{ item.publish_time || '暂无' }}</span>
+          </el-col>
+        </el-col>
+      </el-col>
+      <el-backtop :bottom="50" :right="10"> </el-backtop>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'kjzxList',
+  props: {
+    list: { type: Array },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.kjzx {
+  padding: 0 10px;
+  .list {
+    border-bottom: 1px dashed #ccc;
+    padding: 10px 0;
+    .name {
+      font-size: 18px;
+      font-weight: bold;
+    }
+    .company {
+      font-size: 16px;
+      color: #666;
+      padding: 5px 0 0 0;
+    }
+    .other {
+      font-size: 16px;
+      color: #666;
+      padding: 5px 0 0 0;
+      span {
+        display: inline-block;
+        width: 50%;
+      }
+    }
+  }
+}
+</style>