更新

src/router/index.js

@@ -26,6 +26,28 @@ const routes = [
     meta: { title: '科技超市', isleftarrow: true },
     component: () => import('../views/market/index.vue'),
   },
+  // 科技超市-技术-产品-服务详情
+  {
+    path: '/market/prodDetail',
+    name: 'market_prodDetail',
+    meta: { title: '产品详情', isleftarrow: true },
+    component: () => import('../views/market/prodDetail.vue'),
+  },
+  // 科技超市-专家详情
+  {
+    path: '/market/exportDetail',
+    name: 'market_exportDetail',
+    meta: { title: '专家详情', isleftarrow: true },
+    component: () => import('../views/market/exportDetail.vue'),
+  },
+
+  // 科技超市-发布产品
+  {
+    path: '/market/detail',
+    name: 'market_detail',
+    meta: { title: '发布产品', isleftarrow: true },
+    component: () => import('../views/market/detail.vue'),
+  },
   // // 个人中心
   // {
   //   path: '/user/index',

src/views/market/detail.vue

@@ -0,0 +1,70 @@
+<template>
+  <div id="detail">
+    <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">
+          <release></release>
+        </el-col>
+        <el-col :span="24" class="foot">
+          <footInfo></footInfo>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import NavBar from '@/layout/common/topInfo.vue';
+import footInfo from '@/layout/common/footInfo.vue';
+import release from '@/layout/market/release.vue';
+
+export default {
+  name: 'detail',
+  props: {},
+  components: {
+    NavBar,
+    footInfo,
+    release, //产品发布
+  },
+  data: () => ({
+    // 头部标题
+    title: '',
+    // meta为true
+    isleftarrow: '',
+    // 返回
+    navShow: true,
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+  position: relative;
+  z-index: 999;
+}
+.main {
+  min-height: 570px;
+}
+.foot {
+  position: absolute;
+  bottom: 0;
+}
+</style>

src/views/market/exportDetail.vue

@@ -0,0 +1,93 @@
+<template>
+  <div id="exportDetail">
+    <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">
+          <exportDetails :exportInfo="exportInfo"></exportDetails>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import NavBar from '@/layout/common/topInfo.vue';
+import footInfo from '@/layout/common/footInfo.vue';
+import exportDetails from '@/layout/market/exportDetails.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: expertsuser } = createNamespacedHelpers('expertsuser');
+export default {
+  name: 'exportDetail',
+  props: {},
+  components: {
+    NavBar,
+    exportDetails, //专家详情
+  },
+  data: () => ({
+    // 头部标题
+    title: '',
+    // meta为true
+    isleftarrow: '',
+    // 返回
+    navShow: true,
+    exportInfo: {},
+  }),
+  created() {
+    this.searchInfo();
+  },
+  computed: {
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  methods: {
+    ...expertsuser(['fetch']),
+    async searchInfo() {
+      if (this.id) {
+        const res = await this.fetch(this.id);
+        if (this.$checkRes(res)) {
+          res.data.phone = this.phoneNumFilter(res.data.phone);
+          res.data.cardnumber = this.cardnumberNumFilter(res.data.cardnumber);
+          this.$set(this, `exportInfo`, res.data);
+        }
+      }
+    },
+    phoneNumFilter(phone) {
+      let start = phone.slice(0, 3);
+      let end = phone.slice(-4);
+      return `${start}****${end}`;
+    },
+    cardnumberNumFilter(cardnumber) {
+      let start = cardnumber.slice(0, 4);
+      let end = cardnumber.slice(-3);
+      return `${start}****${end}`;
+    },
+  },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+  position: relative;
+  z-index: 999;
+}
+.main {
+  min-height: 600px;
+  background: #fff;
+}
+</style>

src/views/market/index.vue

@@ -6,7 +6,41 @@
           <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' })">发布产品</van-button>
+          </el-col>
         </el-col>
       </el-col>
     </el-row>
@@ -16,11 +50,19 @@
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
 import NavBar from '@/layout/common/topInfo.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';
 export default {
   name: 'index',
   props: {},
   components: {
     NavBar,
+    technologyList, //技术供求
+    productList, //产品供求
+    serviceList, //服务供求
+    expertList, //专家供求
   },
   data: function() {
     return {
@@ -30,6 +72,8 @@ export default {
       isleftarrow: '',
       // 返回
       navShow: true,
+      // 标签
+      active: '1',
     };
   },
   created() {},
@@ -59,5 +103,24 @@ export default {
 }
 .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;
+}
+/deep/.van-tab--active {
+  color: red;
+}
+.van-icon {
+  font-size: 20px;
 }
 </style>

src/views/market/parts/expertList.vue

@@ -0,0 +1,93 @@
+<template>
+  <div id="expertList">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col
+          :span="24"
+          class="list"
+          @click.native="$router.push({ path: '/market/exportDetail', query: { id: item.id } })"
+          v-for="(item, index) in list"
+          :key="index"
+        >
+          <el-col :span="4" class="left">
+            <el-image :src="item.img_path"></el-image>
+          </el-col>
+          <el-col :span="20" class="right">
+            <p>
+              <span>{{ item.name }}</span>
+            </p>
+            <p><span>从事专业：</span>{{ item.professional || '暂无' }}</p>
+            <p><span>邮箱：</span>{{ item.email }}</p>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: expertsuser } = createNamespacedHelpers('expertsuser');
+export default {
+  name: 'expertList',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      list: [],
+    };
+  },
+  created() {
+    this.searchInfo();
+  },
+  methods: {
+    ...expertsuser({ expertQuery: 'query' }),
+    async searchInfo() {
+      let res = await this.expertQuery({ skip: 0, limit: 6 });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.info {
+  border-top: 1px solid #f5f5f5;
+  .list {
+    background: #fff;
+    padding: 0 10px;
+    border-bottom: 1px solid #ccc;
+    .left {
+      padding: 12px 0;
+      .el-image {
+        width: 60px;
+        height: 60px;
+        border-radius: 90px;
+      }
+    }
+    .right {
+      padding: 0 10px;
+      p {
+        font-size: 14px;
+        color: #000;
+        padding: 5px 0;
+      }
+      p:first-child {
+        color: blue;
+        font-size: 16px;
+      }
+    }
+  }
+}
+</style>

src/views/market/parts/productList.vue

@@ -0,0 +1,94 @@
+<template>
+  <div id="productList">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="list" @click.native="$router.push({ path: '/market/prodDetail' })" v-for="(item, index) in list" :key="index">
+          <p class="textOver">{{ item.name }}</p>
+          <p>
+            <span class="ptwo"><span>产品类型:</span>{{ item.product_type_name || '暂无' }}</span>
+            <span class="ptwo"><span>研发阶段：</span>{{ item.phase == 1 ? '阶段成果' : item.phase == 2 ? '最终成果' : '暂无' }}</span>
+          </p>
+          <p class="textOver"><span>应用领域：</span>{{ item.field || '暂无' }}</p>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: product } = createNamespacedHelpers('marketproduct');
+export default {
+  name: 'productList',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      list: [
+        {
+          name: '产品产品产品产品',
+          product_type_name: '产品',
+          phase: '1',
+          field: '产品产品产品产品',
+        },
+        {
+          name: '产品产品产品产品',
+          product_type_name: '产品',
+          phase: '1',
+          field: '产品产品产品产品',
+        },
+      ],
+    };
+  },
+  created() {
+    this.searchInfo();
+  },
+  methods: {
+    ...product(['newquery']),
+    async searchInfo() {
+      // let res = await this.newquery({ skip: 0, limit: 6, totaltype: '1', status: '1' });
+      // if (this.$checkRes(res)) {
+      //   this.$set(this, `list`, res.data);
+      // }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.info {
+  border-top: 1px solid #f5f5f5;
+  .list {
+    background: #fff;
+    padding: 0 10px;
+    border-bottom: 1px solid #ccc;
+    p {
+      font-size: 14px;
+      color: #000;
+      padding: 5px 0;
+    }
+    p:first-child {
+      font-size: 16px;
+    }
+    p:nth-child(2) .ptwo {
+      display: inline-block;
+      width: 50%;
+    }
+    p:nth-child(2) .ptwo span:first-child {
+      color: #ccc;
+    }
+    p:last-child span {
+      color: #ccc;
+    }
+  }
+}
+</style>

src/views/market/parts/serviceList.vue

@@ -0,0 +1,94 @@
+<template>
+  <div id="serviceList">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="list" @click.native="$router.push({ path: '/market/prodDetail' })" v-for="(item, index) in list" :key="index">
+          <p class="textOver">{{ item.name }}</p>
+          <p>
+            <span class="ptwo"><span>产品类型:</span>{{ item.product_type_name || '暂无' }}</span>
+            <span class="ptwo"><span>研发阶段：</span>{{ item.phase == 1 ? '阶段成果' : item.phase == 2 ? '最终成果' : '暂无' }}</span>
+          </p>
+          <p class="textOver"><span>应用领域：</span>{{ item.field || '暂无' }}</p>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: product } = createNamespacedHelpers('marketproduct');
+export default {
+  name: 'technologyList',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      list: [
+        {
+          name: '服务服务服务服务',
+          product_type_name: '服务',
+          phase: '1',
+          field: '服务服务服务服务',
+        },
+        {
+          name: '服务服务服务服务',
+          product_type_name: '服务',
+          phase: '1',
+          field: '服务服务服务服务',
+        },
+      ],
+    };
+  },
+  created() {
+    this.searchInfo();
+  },
+  methods: {
+    ...product(['newquery']),
+    async searchInfo() {
+      // let res = await this.newquery({ skip: 0, limit: 6, totaltype: '2', status: '1' });
+      // if (this.$checkRes(res)) {
+      //   this.$set(this, `list`, res.data);
+      // }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.info {
+  border-top: 1px solid #f5f5f5;
+  .list {
+    background: #fff;
+    padding: 0 10px;
+    border-bottom: 1px solid #ccc;
+    p {
+      font-size: 14px;
+      color: #000;
+      padding: 5px 0;
+    }
+    p:first-child {
+      font-size: 16px;
+    }
+    p:nth-child(2) .ptwo {
+      display: inline-block;
+      width: 50%;
+    }
+    p:nth-child(2) .ptwo span:first-child {
+      color: #ccc;
+    }
+    p:last-child span {
+      color: #ccc;
+    }
+  }
+}
+</style>

src/views/market/parts/technologyList.vue

@@ -0,0 +1,94 @@
+<template>
+  <div id="technologyList">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="list" @click.native="$router.push({ path: '/market/prodDetail' })" v-for="(item, index) in list" :key="index">
+          <p class="textOver">{{ item.name }}</p>
+          <p>
+            <span class="ptwo"><span>产品类型:</span>{{ item.product_type_name || '暂无' }}</span>
+            <span class="ptwo"><span>研发阶段：</span>{{ item.phase == 1 ? '阶段成果' : item.phase == 2 ? '最终成果' : '暂无' }}</span>
+          </p>
+          <p class="textOver"><span>应用领域：</span>{{ item.field || '暂无' }}</p>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: product } = createNamespacedHelpers('marketproduct');
+export default {
+  name: 'technologyList',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      list: [
+        {
+          name: '技术技术技术技术',
+          product_type_name: '技术',
+          phase: '1',
+          field: '技术技术技术技术',
+        },
+        {
+          name: '技术技术技术技术',
+          product_type_name: '技术',
+          phase: '1',
+          field: '技术技术技术技术',
+        },
+      ],
+    };
+  },
+  created() {
+    this.searchInfo();
+  },
+  methods: {
+    ...product(['newquery']),
+    async searchInfo() {
+      // let res = await this.newquery({ skip: 0, limit: 6, totaltype: '0', status: '1' });
+      // if (this.$checkRes(res)) {
+      //   this.$set(this, `list`, res.data);
+      // }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.info {
+  border-top: 1px solid #f5f5f5;
+  .list {
+    background: #fff;
+    padding: 0 10px;
+    border-bottom: 1px solid #ccc;
+    p {
+      font-size: 14px;
+      color: #000;
+      padding: 5px 0;
+    }
+    p:first-child {
+      font-size: 16px;
+    }
+    p:nth-child(2) .ptwo {
+      display: inline-block;
+      width: 50%;
+    }
+    p:nth-child(2) .ptwo span:first-child {
+      color: #ccc;
+    }
+    p:last-child span {
+      color: #ccc;
+    }
+  }
+}
+</style>

src/views/market/prodDetail.vue

@@ -0,0 +1,80 @@
+<template>
+  <div id="">
+    <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">
+          <prodDetails :productInfo="productInfo"></prodDetails>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import NavBar from '@/layout/common/topInfo.vue';
+import prodDetails from '@/layout/market/prodDetail.vue';
+export default {
+  name: 'prodDetail',
+  props: {},
+  components: {
+    NavBar,
+    prodDetails, //详情
+  },
+  data: () => ({
+    // 头部标题
+    title: '',
+    // meta为true
+    isleftarrow: '',
+    // 返回
+    navShow: true,
+    // 产品名称
+    productInfo: {
+      image: [
+        {
+          url: require('@/assets/test.jpg'),
+        },
+      ],
+      name: '产品名称',
+      totaltype: '0',
+      product_type_name: '科研',
+      phase: '1', //研发阶段
+      business: '0', //交易方式
+      field: '应用领域',
+      scope: '服务范围',
+      price: '100', //单价
+      priceunit: '公斤', //单位
+      contact_user: '联系人',
+      contact_tel: '17319450324',
+      introduction: '产品简介',
+    },
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+  position: relative;
+  z-index: 999;
+}
+.main {
+  min-height: 570px;
+}
+</style>