供应产品详情

src/router/routers.js

@@ -108,6 +108,22 @@ export const constantRouterMap = [
     },
     hidden: true
   },
+  {
+    path: '/publish/supplyInfo/:type',
+    meta: { title: '供应产品详情', noCache: true },
+    component: (resolve) => {
+      return require(['@/views/homepage/publish/supplyInfo'], resolve)
+    },
+    hidden: true
+  },
+  {
+    path: '/publish/buyInfo/:type',
+    meta: { title: '求购产品详情', noCache: true },
+    component: (resolve) => {
+      return require(['@/views/homepage/publish/buyInfo'], resolve)
+    },
+    hidden: true
+  },
   {
     path: '/backstage',
     component: Layout,

src/views/homepage/index.vue

@@ -12,7 +12,7 @@
       <search-panel ref="searchPanel" style="margin-top: 64px;" />
     </div>
     <div class="line-btn" style="padding-top: 42px;">
-      <div class="btn-o" style="padding: 10px">我要供应</div>
+      <div class="btn-o" style="padding: 10px" @click="goToDetails(null, '/publish/supplyInfo/all')">我要供应</div>
       <div class="btn-o" style="padding: 10px">我要采购</div>
     </div>
     <div class="line-btn" style="padding-top: 30px">
@@ -442,8 +442,13 @@ export default {
       console.log(item, type)
     },
     // 跳转到详情
-    goToDetails(item, type) {
-      console.log(item, type)
+    goToDetails(item, path) {
+      console.log(item, path)
+      if (item) {
+        this.$router.push({ path: `${path}/${item.id || 123}` })
+      } else {
+        this.$router.push({ path: `${path}` })
+      }
     },
     // 点击地区top
     areaTopClick(text) {

src/views/homepage/information/details.vue

@@ -21,8 +21,8 @@
         <div class="news-head">
           <h2>{{ dataObj.title }}</h2>
           <div class="news-info">
-            <span>来源：{{ dataObj.msgSrc }}</span>
-            <span>发布时间：{{ dataObj.date }}</span>
+            <div>来源：{{ dataObj.msgSrc }}</div>
+            <div>发布时间：{{ dataObj.date }}</div>
           </div>
         </div>
         <div class="news-body">
@@ -513,13 +513,15 @@ export default {
 .news-head {
   text-align: center;
   h2 {
+    margin: 20px;
     font-size: 42px;
   }
   .news-info {
-    width: 70%;
+    display: flex;
+    justify-content: space-between;
     margin: auto;
-    padding-bottom: 15px;
-    border-bottom: 2px dotted #a3a3a3;
+    padding-bottom: 6px;
+    border-bottom: 3px solid #0457C7;;
     font-size: 14px;
     color: #666;
     span {

src/views/homepage/information/index.vue

@@ -29,7 +29,7 @@
               </div>
             </el-col>
             <el-col :span="16">
-              <div class="box-title touch" @click="goToDetails(item, 'information')">{{ item.title }}</div>
+              <div class="box-title touch" @click="goToDetails(item, '/information/details')">{{ item.title }}</div>
               <div class="content ellipsis">
                 {{ item.content }}
               </div>
@@ -43,7 +43,7 @@
           <el-image :src="promotionObj.imgSrc?imgSrcStart+'/img'+promotionObj.imgSrc:defaultImgBanner" style="width:100%;height: 250px" />
         </div>
         <div v-for="(item,index) in informationList" :key="'inf_'+index" class="inline-box">
-          <div class="box-title touch" @click="goToDetails(item, 'information')">{{ item.title }}</div>
+          <div class="box-title touch" @click="goToDetails(item, '/information/details')">{{ item.title }}</div>
           <div class="content ellipsis">&#12288;&#12288;{{ item.content }}</div>
           <div class="line-btn" style="margin-top: 4px;justify-content: flex-end;">
             <div style="color:#999999;padding: 10px 40px"><i class="el-icon-time" style="padding: 0 10px" />{{ item.date }}</div>
@@ -169,12 +169,11 @@ export default {
       this.$refs.inquiryView.initView(item.id, type)
     },
     // 跳转到详情
-    goToDetails(item, type) {
-      console.log(item, type)
-      switch (type) {
-        case 'information':
-          this.$router.push({ path: `/information/details/${item.id || 123}` })
-          break
+    goToDetails(item, path) {
+      if (item) {
+        this.$router.push({ path: `${path}/${item.id || 123}` })
+      } else {
+        this.$router.push({ path: `${path}` })
       }
     },
     pageChange(e) {

src/views/homepage/publish/buyInfo.vue

+<template>
+  <div class="page-body">
+    <div class="head-box">
+      <div class="head-box-top">
+        <div class="top-call" />
+        <div class="top-call"><img src="@/assets/home_images/gemho_logo_b.png"></div>
+        <div class="top-call"><title-menus ref="titleMenus" menu-index="7" style="padding-top: 15px" /></div>
+        <div class="top-call"><user-login ref="userLogin" /></div>
+        <div class="top-call"><language-setting ref="languageSetting" /></div>
+      </div>
+    </div>
+    <div class="content-box">
+      <div style="width: 88%;padding-left: 9%;">
+        <div class="showcase">
+          <el-breadcrumb separator-class="el-icon-arrow-right">
+            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
+            <el-breadcrumb-item :to="{ path: '/publish' }">信息发布</el-breadcrumb-item>
+            <el-breadcrumb-item>我要求购{{ title }}</el-breadcrumb-item>
+          </el-breadcrumb>
+        </div>
+      </div>
+    </div>
+    <home-footer ref="homeFooter" />
+    <el-backtop />
+  </div>
+</template>
+<script>
+import titleMenus from '../components/titleMenusV2'
+import userLogin from '../components/userLoginV2'
+import languageSetting from '../components/languageSettingV2'
+import homeFooter from '../components/homeFooter'
+
+export default {
+  components: { titleMenus, userLogin, languageSetting, homeFooter },
+  dicts: [],
+  data() {
+    return {
+      imgSrcStart: process.env.VUE_APP_BASE_API,
+      title: '产品',
+      throttle: null, // 节流器
+      throttleTime: 300
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+
+    })
+  },
+  methods: {
+    onDictReady(dict) {
+
+    },
+    goTop() {
+      document.body.scrollTop = 0
+      document.documentElement.scrollTop = 0
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.touch {
+  cursor:pointer;
+}
+.clear {
+  clear: both
+}
+.inline-block {
+  display: inline-block;
+}
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  text-overflow: ellipsis;
+}
+.showcase {
+  padding: 1px 0;
+  font-size: 20px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+}
+.head-box {
+  width: 100vw;
+  top: 0;
+  position: fixed;
+  background: none repeat scroll 0 0 white;
+  z-index: 999;
+  box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
+  .head-box-top {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    .top-call {
+      height: 80px;
+      padding-top: 15px;
+    }
+  }
+}
+.content-box {
+  min-height: 70vh;
+  margin-top: 94px;
+  font-family: Source Han Sans CN;
+  user-select: none;
+}
+.line-btn {
+  display: flex;
+  justify-content: center;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  .btn-o {
+    margin: 0 25px;
+    width: 360px;
+    padding: 6px 10px;
+    background: #F7601A;
+    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
+    text-align: center;
+    border: 1px solid transparent;
+    font-size: 22px;
+    color: #FFFFFF;
+    cursor:pointer;
+    user-select: none;
+  }
+  .btn-o:hover {
+    border: 1px solid rgba(30, 144, 255, 0.8);
+    color: #1482f0;
+  }
+  .btn-l {
+    margin: 0 25px;
+    width: 360px;
+    padding: 10px;
+    background: #1961C5;
+    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
+    text-align: center;
+    border: 1px solid transparent;
+    font-size: 22px;
+    color: #FFFFFF;
+    cursor:pointer;
+    user-select: none;
+  }
+  .btn-l:hover {
+    border: 1px solid rgba(0,0,0,0.3);
+    color: #F7601A;
+  }
+  .btn-b {
+    margin: 0 10px;
+    width: 168px;
+    padding: 6px;
+    background: #EFF6FF;
+    border: 1px solid transparent;
+    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
+    text-align: center;
+    font-size: 20px;
+    color: #1961C5;
+    cursor:pointer;
+    user-select: none;
+  }
+  .btn-b:hover {
+    border: 1px solid rgba(30, 144, 255, 0.9);
+  }
+  .active {
+    color: #FFFFFF;
+    font-weight: 400;
+    background: #1961C5;
+  }
+}
+</style>

src/views/homepage/publish/index.vue

@@ -15,8 +15,36 @@
         <!--信息发布-->
         <div class="page-title">信息发布</div>
         <div class="line-btn" style="padding-top: 160px;">
-          <div class="btn-o" style="padding: 10px">我要供应</div>
-          <div class="btn-o" style="padding: 10px">我要采购</div>
+          <el-dropdown trigger="click" placement="bottom">
+            <div class="btn-o" style="padding: 10px">我要供应</div>
+            <el-dropdown-menu slot="dropdown" style="width: 360px;text-align: center;">
+              <router-link to="/publish/supplyInfo/hardware">
+                <el-dropdown-item style="font-size: 16px;padding: 5px;font-weight: bold;">
+                  硬件类产品
+                </el-dropdown-item>
+              </router-link>
+              <router-link to="/publish/supplyInfo/other">
+                <el-dropdown-item style="font-size: 16px;padding: 5px;font-weight: bold;">
+                  其他类产品
+                </el-dropdown-item>
+              </router-link>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <el-dropdown trigger="click" placement="bottom">
+            <div class="btn-o" style="padding: 10px">我要采购</div>
+            <el-dropdown-menu slot="dropdown" style="width: 360px;text-align: center;">
+              <router-link to="/publish/buyInfo/hardware">
+                <el-dropdown-item style="font-size: 16px;padding: 5px;font-weight: bold;">
+                  硬件类产品
+                </el-dropdown-item>
+              </router-link>
+              <router-link to="/publish/buyInfo/other">
+                <el-dropdown-item style="font-size: 16px;padding: 5px;font-weight: bold;">
+                  其他类产品
+                </el-dropdown-item>
+              </router-link>
+            </el-dropdown-menu>
+          </el-dropdown>
         </div>
       </div>
     </div>