1

src/layout/common/topInfo.vue

@@ -33,6 +33,7 @@ export default {
 // }
 /deep/.van-nav-bar {
   background: #2c69fe;
+  z-index: 999;
 }
 /deep/.van-nav-bar__title {
   color: #fff;

src/router/index.js

@@ -19,6 +19,19 @@ const routes = [
     meta: { title: '直播大厅', isleftarrow: true },
     component: () => import('../views/live/index.vue'),
   },
+  // 科技超市
+  {
+    path: '/market/index',
+    name: 'market_index',
+    meta: { title: '科技超市', isleftarrow: false },
+    component: () => import('../views/market/index.vue'),
+  },
+  {
+    path: '/market/productDetail',
+    name: 'market_productDetail',
+    meta: { title: '科技超市详情', isleftarrow: true },
+    component: () => import('../views/market/productDetail.vue'),
+  },
   // // 绑定
   // {
   //   path: '/bind',

src/store/index.js

@@ -3,6 +3,9 @@ import Vuex from 'vuex';
 //直播大厅
 import dock from './live/dock';
 import place from './place';
+// 科技超市
+import product from './market/product';
+import exportuser from './market/exportuser';
 // import login from '@common/store/login';
 // import marketproduct from '@common/store/market/marketproduct';
 // import expertsuser from '@common/store/market/exportuser';
@@ -34,6 +37,9 @@ export default new Vuex.Store({
   modules: {
     dock,
     place,
+    // 科技超市
+    product,
+    exportuser,
     // login,
     // market,
     // marketproduct,

src/store/market/exportuser.js

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

src/store/market/product.js

@@ -0,0 +1,70 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+Vue.use(Vuex);
+const api = {
+  newsInfo: `/api/market/product`,
+  indexqueryinfo: `/api/market/product/indexquery`,
+};
+const state = () => ({});
+const mutations = {};
+
+const actions = {
+  async query({ commit }, { skip = 0, limit, isdel = '0', ...info } = {}) {
+    const res = await this.$axios.$get(`${api.newsInfo}`, {
+      skip,
+      limit,
+      isdel,
+      ...info,
+    });
+    return res;
+  },
+  async marketquery({ commit }, { skip = 0, limit, isdel = '0', ...info } = {}) {
+    const res = await this.$axios.$get(`${api.indexqueryinfo}`, {
+      skip,
+      limit,
+      isdel,
+      ...info,
+    });
+    return res;
+  },
+  async newquery({ commit }, { skip = 0, limit, ...info } = {}) {
+    const res = await this.$axios.$get(`${api.newsInfo}/newquery`, {
+      skip,
+      limit,
+      ...info,
+    });
+    return res;
+  },
+  async newfetch({ commit }, { skip = 0, limit, ...info } = {}) {
+    const res = await this.$axios.$get(`${api.newsInfo}/newfetch`, {
+      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, ...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/live/index.vue

@@ -33,7 +33,7 @@ export default {
   components: {
     NavBar,
     footInfo,
-    liveList, //直播列表
+    // liveList, //直播列表
   },
   data: function() {
     return {

src/views/market/index.vue

@@ -6,41 +6,20 @@
           <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
         </el-col>
         <el-col :span="24" class="main">
-          <el-col :span="24" class="one">
-            <van-tabs v-model="active" animated>
-              <van-tab>
-                <template #title>
-                  <van-icon name="todo-list" />
-                  <p>技术供求</p>
-                </template>
-                <technologyList></technologyList>
-              </van-tab>
-              <van-tab>
-                <template #title>
-                  <van-icon name="cluster" />
-                  <p>产品供求</p>
-                </template>
-                <productList></productList>
-              </van-tab>
-              <van-tab>
-                <template #title>
-                  <van-icon name="label" />
-                  <p>服务供求</p>
-                </template>
-                <serviceList></serviceList>
-              </van-tab>
-              <van-tab>
-                <template #title>
-                  <van-icon name="manager" />
-                  <p>专家供求</p>
-                </template>
-                <expertList></expertList>
-              </van-tab>
-            </van-tabs>
-          </el-col>
-          <el-col :span="24" class="two">
-            <van-button type="primary" @click="$router.push({ path: '/market/detail' })" v-if="user.role == 3 || user.role == 2">发布产品</van-button>
-          </el-col>
+          <van-tabs v-model="active">
+            <van-tab title="技术成果">
+              <achieve :list="achieveList" @detailBtn="detailBtn"></achieve>
+            </van-tab>
+            <van-tab title="科技需求">
+              <technology :list="technologyList" @detailBtn="detailBtn"></technology>
+            </van-tab>
+            <van-tab title="商务服务">
+              <business :list="businessList" @detailBtn="detailBtn"></business>
+            </van-tab>
+            <van-tab title="专家智库">
+              <expert :list="expertList"></expert>
+            </van-tab>
+          </van-tabs>
         </el-col>
         <el-col :span="24" class="foot">
           <footInfo></footInfo>
@@ -51,23 +30,29 @@
 </template>
 
 <script>
-import { mapState, createNamespacedHelpers } from 'vuex';
+import achieve from './newparts/achieve.vue';
+import technology from './newparts/technology.vue';
+import business from './newparts/business.vue';
+import expert from './newparts/expert.vue';
 import NavBar from '@/layout/common/topInfo.vue';
 import footInfo from '@/layout/common/footInfo.vue';
-import technologyList from './parts/technologyList.vue';
-import productList from './parts/productList.vue';
-import serviceList from './parts/serviceList.vue';
-import expertList from './parts/expertList.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: product } = createNamespacedHelpers('product');
+const { mapActions: exportuser } = createNamespacedHelpers('exportuser');
 export default {
   name: 'index',
   props: {},
   components: {
     NavBar,
     footInfo,
-    technologyList, //技术供求
-    productList, //产品供求
-    serviceList, //服务供求
-    expertList, //专家供求
+    // 技术成果
+    achieve,
+    // 科技需求
+    technology,
+    // 商务服务
+    business,
+    // 专家智库
+    expert,
   },
   data: function() {
     return {
@@ -77,12 +62,39 @@ export default {
       isleftarrow: '',
       // 返回
       navShow: true,
-      // 标签
+      // 显示菜单
       active: '1',
+      // 技术成果
+      achieveList: [],
+      // 科技需求
+      technologyList: [],
+      // 商务服务
+      businessList: [],
+      // 专家智库
+      expertList: [],
     };
   },
-  created() {},
-  methods: {},
+  async created() {
+    await this.search();
+  },
+  methods: {
+    ...product(['query']),
+    ...exportuser({ expertquery: 'query' }),
+    async search() {
+      let res = await this.query({ skip: 0, type: '1', status: '1' });
+      if (this.$checkRes(res)) this.$set(this, `achieveList`, res.data);
+      res = await this.query({ skip: 0, type: '0', status: '1' });
+      if (this.$checkRes(res)) this.$set(this, `technologyList`, res.data);
+      res = await this.query({ skip: 0, type: '2', status: '1' });
+      if (this.$checkRes(res)) this.$set(this, `businessList`, res.data);
+      res = await this.expertquery({ skip: 0, status: '1' });
+      if (this.$checkRes(res)) this.$set(this, `expertList`, res.data);
+    },
+    // 成果详情
+    detailBtn(data) {
+      this.$router.push({ path: '/market/productDetail', query: { id: data.id, type: data.type } });
+    },
+  },
   computed: {
     ...mapState(['user']),
   },
@@ -90,6 +102,9 @@ export default {
     this.title = this.$route.meta.title;
     this.isleftarrow = this.$route.meta.isleftarrow;
   },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
 };
 </script>
 
@@ -103,37 +118,13 @@ export default {
 .top {
   height: 46px;
   overflow: hidden;
-  position: relative;
-  z-index: 999;
 }
 .main {
   min-height: 570px;
-  .two {
-    position: fixed;
-    top: 80%;
-    left: 10px;
-    z-index: 999;
-  }
-}
-/deep/.van-tab {
-  text-align: center;
-}
-/deep/.van-tabs--line .van-tabs__wrap {
-  height: 70px;
-  margin: 0 0 10px 0;
-  position: fixed;
-  width: 100%;
-  z-index: 999;
-}
-/deep/.van-tabs__content--animated {
-  position: relative;
-  top: 70px;
   margin: 0 0 50px 0;
 }
-/deep/.van-tab--active {
-  color: red;
-}
-.van-icon {
-  font-size: 20px;
+.foot {
+  position: absolute;
+  bottom: 0;
 }
 </style>

src/views/market/newparts/achieve.vue

@@ -0,0 +1,76 @@
+<template>
+  <div id="achieve">
+    <el-row>
+      <el-col :span="24" class="achieve">
+        <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.name }}
+          </el-col>
+          <el-col :span="24" class="company textOver"> 成果单位：{{ item.company || '暂无' }} </el-col>
+          <el-col :span="24" class="other">
+            <span class="textOver">领域：{{ item.field || '暂无' }}</span>
+            <span class="textOver">联系人：{{ item.contacts || '暂无' }}</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 {
+  name: 'achieve',
+  props: {
+    list: { type: Array },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {
+    detailBtn(data) {
+      this.$emit('detailBtn', data);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.achieve {
+  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/market/newparts/business.vue

@@ -0,0 +1,76 @@
+<template>
+  <div id="business">
+    <el-row>
+      <el-col :span="24" class="achieve">
+        <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.name }}
+          </el-col>
+          <el-col :span="24" class="company textOver"> 服务单位：{{ item.company || '暂无' }} </el-col>
+          <el-col :span="24" class="other">
+            <span class="textOver">信息属性：{{ item.messattribute || '暂无' }}</span>
+            <span class="textOver">联系人：{{ item.qqwx || '暂无' }}</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 {
+  name: 'business',
+  props: {
+    list: { type: Array },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {
+    detailBtn(data) {
+      this.$emit('detailBtn', data);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.achieve {
+  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/market/newparts/expert.vue

@@ -0,0 +1,75 @@
+<template>
+  <div id="expert">
+    <el-row>
+      <el-col :span="24" class="achieve">
+        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+          <el-col :span="6" class="image">
+            <el-image v-if="item.expertimage != null || undefined" :src="item.expertimage"></el-image>
+            <el-image :src="expertimage" v-else></el-image>
+          </el-col>
+          <el-col :span="18" class="name">
+            <p class="textOver">{{ item.name || '暂无' }}</p>
+            <p class="textOver">{{ item.zwzc || '暂无' }}</p>
+            <p class="textOver">{{ item.company || '暂无' }}</p>
+          </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 {
+  name: 'expert',
+  props: {
+    list: { type: Array },
+  },
+  components: {},
+  data: function() {
+    return {
+      expertimage: require('@/assets/222.png'),
+    };
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.achieve {
+  padding: 0 10px;
+  .list {
+    border-bottom: 1px dashed #ccc;
+    padding: 10px 0;
+    .image {
+      .el-image {
+        width: 100%;
+        border-radius: 90px;
+        height: 88px;
+      }
+    }
+    .name {
+      padding: 0 10px;
+      p {
+        font-size: 16px;
+        padding: 6px 0 0 0;
+      }
+      p:nth-child(1) {
+        font-size: 18px;
+        font-weight: bold;
+      }
+    }
+  }
+}
+</style>

src/views/market/newparts/productInfo.vue

@@ -0,0 +1,30 @@
+<template>
+  <div id="productInfo">
+    <p>productInfo</p>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'productInfo',
+  props: {},
+  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></style>

src/views/market/newparts/technology.vue

@@ -0,0 +1,76 @@
+<template>
+  <div id="technology">
+    <el-row>
+      <el-col :span="24" class="achieve">
+        <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.name }}
+          </el-col>
+          <el-col :span="24" class="company textOver"> 需求单位：{{ item.company || '暂无' }} </el-col>
+          <el-col :span="24" class="other">
+            <span class="textOver">所属领域：{{ item.field || '暂无' }}</span>
+            <span class="textOver">合作方式：{{ item.cooperation || '暂无' }}</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 {
+  name: 'technology',
+  props: {
+    list: { type: Array },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {
+    detailBtn(data) {
+      this.$emit('detailBtn', data);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.achieve {
+  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/market/productDetail.vue

@@ -0,0 +1,84 @@
+<template>
+  <div id="productDetail">
+    <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">
+          <productInfo :info="productInfo"></productInfo>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import productInfo from './newparts/productInfo.vue';
+import NavBar from '@/layout/common/topInfo.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: product } = createNamespacedHelpers('product');
+export default {
+  name: 'productDetail',
+  props: {},
+  components: {
+    NavBar,
+    productInfo,
+  },
+  data: function() {
+    return {
+      // 头部标题
+      title: '',
+      // meta为true
+      isleftarrow: '',
+      // 返回
+      navShow: true,
+      productInfo: {},
+    };
+  },
+  created() {
+    if (this.type === '0') this.$set(this, `title`, '科技需求');
+    else if (this.type === '1') this.$set(this, `title`, '技术成果');
+    else if (this.type === '2') this.$set(this, `title`, '商务服务');
+    if (this.id) this.search();
+  },
+  methods: {
+    ...product(['fetch']),
+    async search() {
+      let res = await this.fetch(this.id);
+      console.log(res);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    type() {
+      return this.$route.query.type;
+    },
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  mounted() {
+    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;
+}
+</style>