web-website/src/views/service/service.vue

<template>
  <div id="service">
    <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: {},
  components: {
    serviceDetail,
  },
  data: () => ({
    info: {},
    // 视频会议中心
    sphyzxList: [],
    // 专题研讨
    ztytList: [],
    // 技术问答
    jswdList: [],
    // 行业研究
    hyyjList: [],
    // 科技培训
    kjpxList: [],
    // 常用服务
    changyongList: [
      {
        url: '',
        pic: require('@/assets/zscqfw1.png'),
      },
      {
        url: '',
        pic: require('@/assets/zscqfw2.png'),
      },
      {
        url: '',
        pic: require('@/assets/zscqfw3.png'),
      },
      {
        url: '',
        pic: require('@/assets/zscqfw4.png'),
      },
      {
        url: '',
        pic: require('@/assets/zscqfw5.png'),
      },
      {
        url: '',
        pic: require('@/assets/zscqfw6.png'),
      },
      {
        url: '',
        pic: require('@/assets/zscqfw7.png'),
      },
      {
        url: '',
        pic: require('@/assets/zscqfw8.png'),
      },
      {
        url: '',
        pic: require('@/assets/zscqfw9.png'),
      },
    ],
  }),
  created() {
    this.searchSite();
    this.searchColumn();
  },
  computed: {},
  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>

<style lang="less" scoped></style>