科技服务更新+后续加详情

src/components/service/service.vue

@@ -17,10 +17,10 @@
       <el-col :span="24" class="main">
         <div class="w_1200">
           <el-col :span="8" class="video">
-            <videoInfo :videoList="videoList"></videoInfo>
+            <videoInfo :videosList="videosList"></videoInfo>
           </el-col>
           <el-col :span="16" class="zhuanti">
-            <zhuanti :zhuantiList="zhuantiList"></zhuanti>
+            <zhuanti :ztytList="ztytList" :jswdList="jswdList" :hyyjList="hyyjList" :kjpxList="kjpxList"></zhuanti>
           </el-col>
           <el-col :span="24" class="changyong">
             <changyong :changyongList="changyongList"></changyong>
@@ -40,7 +40,7 @@
 import top from '@/layout/index/top.vue';
 import logo from '@/layout/index/logo.vue';
 import menuInfo from '@/layout/index/menuInfo.vue';
-import videoInfo from '@/layout/service/video.vue';
+import videoInfo from '@/layout/service/videos.vue';
 import zhuanti from '@/layout/service/zhuanti.vue';
 import changyong from '@/layout/service/changyong.vue';
 import foot from '@/layout/index/foot.vue';
@@ -48,8 +48,11 @@ export default {
   name: 'service',
   props: {
     info: null, //站点信息
-    videoList: null, //视频会议中心
-    zhuantiList: null, //专题研讨，技术问答，行业研究，科技培训
+    videosList: null, //视频会议中心
+    ztytList: null, //专题研讨
+    jswdList: null, //技术问答
+    hyyjList: null, //行业研究
+    kjpxList: null, //科技培训
     changyongList: null, //常用服务
   },
   components: {

src/layout/service/video.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="video">
+  <div id="videos">
     <el-row>
       <el-col :span="24" class="info">
         <el-col :span="24" class="topInfo">
@@ -7,9 +7,9 @@
         </el-col>
         <el-col :span="24" class="list">
           <ul>
-            <li v-for="(item, index) in videoList" :key="index">
+            <li v-for="(item, index) in videosList" :key="index">
               <el-link :underline="false">
-                <span class="date textOver">{{ item.date }}</span>
+                <span class="date textOver">{{ item.meta && item.meta.createdAt ? new Date(item.meta.createdAt).toLocaleDateString() : '' || '' }}</span>
                 <span class="title textOver">{{ item.title }}</span>
               </el-link>
             </li>
@@ -25,9 +25,9 @@
 
 <script>
 export default {
-  name: 'video',
+  name: 'videos',
   props: {
-    videoList: null,
+    videosList: null,
   },
   components: {},
   data: () => ({

src/layout/service/zhuanti.vue

@@ -3,16 +3,60 @@
     <el-row>
       <el-col :span="24" class="info">
         <el-tabs type="border-card">
-          <el-tab-pane v-for="(item, index) in zhuantiList" :key="index">
-            <span slot="label">{{ item.title }}</span>
+          <el-tab-pane>
+            <span slot="label">专题研讨</span>
             <el-col :span="24" class="list">
               <ul>
-                <li class="zhuantiList" v-for="(tag, index) in item.children" :key="index">
-                  <el-col :span="20" class="title textOver">{{ tag.title }}</el-col>
-                  <el-col :span="4" class="date textOver">{{ tag.date }}</el-col>
+                <li class="zhuantiList" v-for="(item, index) in ztytList" :key="index">
+                  <el-col :span="20" class="title textOver">{{ item.title }}</el-col>
+                  <el-col :span="4" class="date textOver">{{
+                    item.meta && item.meta.createdAt ? new Date(item.meta.createdAt).toLocaleDateString() : '' || ''
+                  }}</el-col>
                 </li>
               </ul>
-              <el-col class="more" :span="24"><el-link :underline="false">查看更多</el-link></el-col>
+              <!-- <el-col class="more" :span="24"><el-link :underline="false">查看更多</el-link></el-col> -->
+            </el-col>
+          </el-tab-pane>
+          <el-tab-pane>
+            <span slot="label">技术问答</span>
+            <el-col :span="24" class="list">
+              <ul>
+                <li class="zhuantiList" v-for="(item, index) in jswdList" :key="index">
+                  <el-col :span="20" class="title textOver">{{ item.title }}</el-col>
+                  <el-col :span="4" class="date textOver">{{
+                    item.meta && item.meta.createdAt ? new Date(item.meta.createdAt).toLocaleDateString() : '' || ''
+                  }}</el-col>
+                </li>
+              </ul>
+              <!-- <el-col class="more" :span="24"><el-link :underline="false">查看更多</el-link></el-col> -->
+            </el-col>
+          </el-tab-pane>
+          <el-tab-pane>
+            <span slot="label">行业研究</span>
+            <el-col :span="24" class="list">
+              <ul>
+                <li class="zhuantiList" v-for="(item, index) in hyyjList" :key="index">
+                  <el-col :span="20" class="title textOver">{{ item.title }}</el-col>
+                  <el-col :span="4" class="date textOver">{{
+                    item.meta && item.meta.createdAt ? new Date(item.meta.createdAt).toLocaleDateString() : '' || ''
+                  }}</el-col>
+                </li>
+              </ul>
+              <!-- <el-col class="more" :span="24"><el-link :underline="false">查看更多</el-link></el-col> -->
+            </el-col>
+          </el-tab-pane>
+          <el-tab-pane>
+            <span slot="label">科技培训</span>
+            <el-col :span="24" class="list">
+              <ul>
+                <li class="zhuantiList" v-for="(item, index) in kjpxList" :key="index">
+                  <el-col :span="20" class="title textOver">{{ item.title }}</el-col>
+                  <el-col :span="4" class="date textOver">{{
+                    item.meta && item.meta.createdAt ? new Date(item.meta.createdAt).toLocaleDateString() : '' || ''
+                  }}</el-col>
+                </li>
+              </ul>
+              <!-- <el-col class="more" :span="24"><el-link :underline="false">查看更多</el-link></el-col> -->
             </el-col>
           </el-tab-pane>
         </el-tabs>
@@ -25,7 +69,10 @@
 export default {
   name: 'zhuanti',
   props: {
-    zhuantiList: null,
+    ztytList: null, //专题研讨
+    jswdList: null, //技术问答
+    hyyjList: null, //行业研究
+    kjpxList: null, //科技培训
   },
   components: {},
   data: () => ({}),

src/store/index.js

@@ -8,6 +8,9 @@ import affairsColumn from './affairsColumn';
 import affairsNews from './affairsNews';
 import recordColumn from './recordColumn';
 import recordNews from './recordNews';
+import serveColumn from './serveColumn';
+import serveNews from './serveNews';
+
 Vue.use(Vuex);
 
 export default new Vuex.Store({
@@ -20,6 +23,8 @@ export default new Vuex.Store({
     affairsNews,
     recordColumn,
     recordNews,
+    serveColumn,
+    serveNews,
   },
   state: {},
   mutations: {},

src/store/serveColumn.js

@@ -0,0 +1,38 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+Vue.use(Vuex);
+const api = {
+  columnInfo: `/api/serve/column`,
+};
+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/serveNews.js

@@ -0,0 +1,38 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+Vue.use(Vuex);
+const api = {
+  newsInfo: `/api/serve/news`,
+};
+const state = () => ({});
+const mutations = {};
+
+const actions = {
+  async query({ commit }, { skip = 0, limit, column_id, ...info } = {}) {
+    const res = await this.$axios.$get(`${api.newsInfo}`, { skip, limit, column_id, ...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, ...data }) {
+    const res = await this.$axios.$post(`${api.newsInfo}/update/${id}`, data);
+    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/service/service.vue

@@ -1,11 +1,23 @@
 <template>
   <div id="service">
-    <service-detail :info="info" :videoList="videoList" :zhuantiList="zhuantiList" :changyongList="changyongList"></service-detail>
+    <service-detail
+      :info="info"
+      :videosList="sphyzxList"
+      :ztytList="ztytList"
+      :jswdList="jswdList"
+      :hyyjList="hyyjList"
+      :kjpxList="kjpxList"
+      :changyongList="changyongList"
+    ></service-detail>
   </div>
 </template>
 
 <script>
 import serviceDetail from '@/components/service/service.vue';
+import { createNamespacedHelpers, mapGetters } from 'vuex';
+const { mapActions: mapSite } = createNamespacedHelpers('site');
+const { mapActions: mapColumn } = createNamespacedHelpers('serveColumn');
+const { mapActions: mapNews } = createNamespacedHelpers('serveNews');
 export default {
   name: 'service',
   props: {},
@@ -13,80 +25,18 @@ export default {
     serviceDetail,
   },
   data: () => ({
-    info: {
-      logo: require('@/assets/logo.png'),
-      banquan: '版权所有：吉林省计算中心',
-      jishu: '技术支持：长春市福瑞科技有限公司',
-      youbian: '邮编：130000',
-      chuanzhen: '传真：239823982',
-      address: '地址：吉林省长春市朝阳区前进大街1244号',
-      phone: '电话：0431-1234567',
-      email: '邮箱：123456@163.com',
-    },
-    videoList: [
-      {
-        date: '2019-01-02',
-        title: '标题',
-      },
-      {
-        date: '2019-01-02',
-        title: '六条数据',
-      },
-    ],
-    zhuantiList: [
-      {
-        title: '专题研讨',
-        children: [
-          {
-            title: '专题研讨',
-            date: '2019-01-02',
-          },
-          {
-            title: '六条数据',
-            date: '2019-01-02',
-          },
-        ],
-      },
-      {
-        title: '技术问答',
-        children: [
-          {
-            title: '技术问答',
-            date: '2019-01-02',
-          },
-          {
-            title: '六条数据',
-            date: '2019-01-02',
-          },
-        ],
-      },
-      {
-        title: '行业研究',
-        children: [
-          {
-            title: '行业研究',
-            date: '2019-01-02',
-          },
-          {
-            title: '六条数据',
-            date: '2019-01-02',
-          },
-        ],
-      },
-      {
-        title: '科技培训',
-        children: [
-          {
-            title: '科技培训',
-            date: '2019-01-02',
-          },
-          {
-            title: '六条数据',
-            date: '2019-01-02',
-          },
-        ],
-      },
-    ],
+    info: {},
+    // 视频会议中心
+    sphyzxList: [],
+    // 专题研讨
+    ztytList: [],
+    // 技术问答
+    jswdList: [],
+    // 行业研究
+    hyyjList: [],
+    // 科技培训
+    kjpxList: [],
+    // 常用服务
     changyongList: [
       {
         url: '',
@@ -126,9 +76,44 @@ export default {
       },
     ],
   }),
-  created() {},
+  created() {
+    this.searchSite();
+    this.searchColumn();
+  },
   computed: {},
-  methods: {},
+  methods: {
+    ...mapSite(['showInfo']),
+    ...mapColumn({ columnList: 'query', columnInfo: 'fetch' }),
+    ...mapNews({ newsList: '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 searchColumn({ ...info } = {}) {
+      const res = await this.columnList({ ...info });
+      for (const val of res.data) {
+        this.tpxwSearch({ column_id: val.id, site: val.site });
+      }
+    },
+    // 查询信息列表
+    async tpxwSearch({ skip = 0, limit = 10, column_id, site } = {}) {
+      console.log(column_id, site);
+      const res = await this.newsList({ skip, limit, column_id: column_id });
+      for (const val of res.data) {
+        const result = await this.columnInfo(val.column_id);
+        val.column_name = result.data.name;
+      }
+      this.$set(this, `${site}List`, res.data);
+      console.log(res.data);
+    },
+  },
 };
 </script>