供应商黄页浮窗

src/router/routers.js

@@ -60,6 +60,14 @@ export const constantRouterMap = [
     },
     hidden: true
   },
+  {
+    path: '/supplier/details/:id',
+    meta: { title: '供应商黄页', noCache: true },
+    component: (resolve) => {
+      return require(['@/views/homepage/supplier/details'], resolve)
+    },
+    hidden: true
+  },
   {
     path: '/project',
     meta: { title: '解决方案与服务', noCache: true },

src/views/homepage/components/floatInquiryView.vue

+<template>
+  <div ref="dragArea" class="fixed-View" :class="isMousedown?'grabbing':'grab'">
+    <div class="fixed-View-title">{{ title }}</div>
+    <div class="fixed-View-location">
+      <img src="@/assets/home_images/locate.png">
+      <div>{{ location }}</div>
+    </div>
+    <div style="width: 100%;border-bottom: 1px solid rgba(0,0,0,0.12);" />
+    <div class="fixed-View-subTitle">{{ subTitle }}</div>
+    <el-input v-model="formData.name" size="medium" placeholder="联系人" class="cell-input" />
+    <el-input v-model="formData.phone" size="medium" placeholder="联系电话" class="cell-input" />
+    <el-input v-model="formData.content" size="medium" type="textarea" placeholder="需求简述（300字以内）" maxlength="300" :autosize="{ minRows: 7, maxRows: 7}" show-word-limit resize="none" class="cell-input" />
+    <div class="fixed-View-btn">
+      <div class="btn touch" @click="submitForm()">提交</div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      isMousedown: false,
+      title: '佛山英沃传感科技有限公司',
+      location: '上海',
+      subTitle: '我要咨询',
+      formData: {
+        name: '',
+        phone: '',
+        content: '',
+        id: null
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      // 获取DOM元素
+      const dragArea = this.$refs.dragArea
+      // 缓存 clientX clientY 的对象: 用于判断是点击事件还是移动事件
+      const clientOffset = {}
+      dragArea.addEventListener('mousedown', (event) => {
+        this.isMousedown = true
+        // const offsetX = dragArea.getBoundingClientRect().left // 获取当前的x轴距离
+        const offsetY = dragArea.getBoundingClientRect().top // 获取当前的y轴距离
+        // const innerX = event.clientX - offsetX // 获取鼠标在方块内的x轴距
+        const innerY = event.clientY - offsetY // 获取鼠标在方块内的y轴距
+        // 缓存 clientX clientY
+        clientOffset.clientX = event.clientX
+        clientOffset.clientY = event.clientY
+        document.onmousemove = (event) => {
+          // dragArea.style.left = event.clientX - innerX + 'px'
+          dragArea.style.top = event.clientY - innerY + 'px'
+          const dragAreaTop = window.innerHeight - dragArea.getBoundingClientRect().height
+          // const dragAreaLeft = window.innerWidth - dragArea.getBoundingClientRect().width - 160
+          // if (dragArea.getBoundingClientRect().left <= 0) {
+          //   dragArea.style.left = '0px'
+          // }
+          // if (dragArea.getBoundingClientRect().left >= dragAreaLeft) {
+          //   dragArea.style.left = dragAreaLeft + 'px'
+          // }
+          if (dragArea.getBoundingClientRect().top <= 100) {
+            dragArea.style.top = '100px'
+          }
+          if (dragArea.getBoundingClientRect().top >= dragAreaTop) {
+            dragArea.style.top = dragAreaTop + 'px'
+          }
+        }
+        document.onmouseup = () => {
+          document.onmousemove = null
+          document.onmouseup = null
+          this.isMousedown = false
+        }
+      }, false)
+      // 绑定鼠标松开事件
+      dragArea.addEventListener('mouseup', (event) => {
+        const clientX = event.clientX
+        const clientY = event.clientY
+        if (clientX === clientOffset.clientX && clientY === clientOffset.clientY) {
+          console.log('click 事件')
+        } else {
+          console.log('drag 事件')
+        }
+      })
+    })
+  },
+  methods: {
+    submitForm() {
+      console.log('提交')
+    },
+    callback() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.touch {
+  cursor:pointer;
+}
+.grab {
+  cursor: grab;
+}
+.grabbing {
+  cursor: grabbing;
+}
+.fixed-View {
+  position: fixed;
+  margin-left: 0;
+  padding: 20px;
+  width: 348px;
+  height: 442px;
+  right: 6vw;
+  bottom: 230px;
+  background: #FFFFFF;
+  border: 1px solid rgba(0,0,0,0.12);
+  box-shadow: 1px 2px 8px 0 rgba(0,0,0,0.12);
+  border-radius: 10px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  user-select: none;
+  z-index: 99;
+  .cell-input {
+    margin: 5px 0;
+  }
+  .fixed-View-subTitle {
+    color: #333;
+    font-size: 18px;
+    padding-top: 10px;
+    padding-bottom: 5px;
+  }
+  .fixed-View-btn {
+    padding: 10px;
+    width: 100%;
+    text-align: center;
+    .btn {
+      margin: auto;
+      width: 140px;
+      padding: 6px;
+      background: #0156E5;
+      border: 1px solid rgba(0,0,0,0.12);
+      border-radius: 5px;
+      color: white;
+      font-size: 16px;
+      opacity: 0.8;
+    }
+    .btn:hover {
+      opacity: 1;
+    }
+  }
+  .fixed-View-title {
+    text-align: center;
+    color: #0342AB;
+    font-size: 20px;
+  }
+  .fixed-View-location {
+    height: 38px;
+    position: relative;
+    color: #666;
+    font-size: 16px;
+    img {
+      position: absolute;
+      top: 9px;
+      left: 236px;
+    }
+    div {
+      position: absolute;
+      top: 12px;
+      left: 260px;
+    }
+  }
+}
+</style>

src/views/homepage/components/inquiryView.vue

@@ -92,7 +92,7 @@ export default {
       })
     },
     initView(id, type) {
-      if (type) {
+      if (this.typeDict[type]) {
         this.title = this.typeDict[type]
       } else {
         this.title = '咨 询'

src/views/homepage/index.vue

@@ -78,7 +78,7 @@
             </el-image>
             <el-row>
               <el-col :span="21">
-                <div class="title touch" :title="item.title" @click="goToDetails(item, 'supplier')">{{ item.title }}</div>
+                <div class="title touch" :title="item.title" @click="goToDetails(item, '/supplier/details')">{{ item.title }}</div>
               </el-col>
               <el-col :span="3">
                 <img v-if="item.isStore" class="touch" src="@/assets/home_images/to_like_h.png" title="点击取消收藏" @click="storeShowcase(item, 'supplier')">
@@ -443,7 +443,6 @@ export default {
     },
     // 跳转到详情
     goToDetails(item, path) {
-      console.log(item, path)
       if (item) {
         this.$router.push({ path: `${path}/${item.id || 123}` })
       } else {

src/views/homepage/information/details.vue

@@ -14,7 +14,7 @@
         <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: '/information' }">行业资讯</el-breadcrumb-item>
+            <el-breadcrumb-item :to="{ path: this.$store.state.app.currentMenu.url }">{{ this.$store.state.app.currentMenu.name||'' }}</el-breadcrumb-item>
             <el-breadcrumb-item>资讯详情</el-breadcrumb-item>
           </el-breadcrumb>
         </div>

src/views/homepage/publish/buyInfo.vue

@@ -14,7 +14,7 @@
         <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 :to="{ path: this.$store.state.app.currentMenu.url }">{{ this.$store.state.app.currentMenu.name||'' }}</el-breadcrumb-item>
             <el-breadcrumb-item>我要求购{{ title }}产品</el-breadcrumb-item>
           </el-breadcrumb>
         </div>

src/views/homepage/publish/supplyInfo.vue

@@ -14,7 +14,7 @@
         <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 :to="{ path: this.$store.state.app.currentMenu.url }">{{ this.$store.state.app.currentMenu.name||'' }}</el-breadcrumb-item>
             <el-breadcrumb-item>我要供应{{ title }}产品</el-breadcrumb-item>
           </el-breadcrumb>
         </div>

src/views/homepage/supplier/index.vue

@@ -64,9 +64,9 @@
         <!--供应商展柜-->
         <div v-for="(item,index) in supplierList" :key="'s_'+index" class="showcase-line">
           <div class="supplier_card" style="position: relative;">
-            <div class="sup_btn touch" style="position: absolute;top: 15px;right: 30px" @click="goToDetails(item, 'supplier')">查看产品</div>
-            <div class="sup_btn touch" style="position: absolute;top: 60px;right: 30px;background: transparent;color: #FB7B09" @click="inquiry(item, null)">留言咨询</div>
-            <div class="sup_title touch">
+            <div class="sup_btn touch" style="position: absolute;top: 15px;right: 30px" @click="goToDetails(item, '/supplier/details')">查看产品</div>
+            <div class="sup_btn touch" style="position: absolute;top: 60px;right: 30px;background: transparent;color: #FB7B09" @click="inquiry(item, 'supplier')">留言咨询</div>
+            <div class="sup_title touch" @click="goToDetails(item, '/supplier/details')">
               {{ item.name }}
               <img v-if="item.isGood" src="@/assets/home_images/diamond.png" title="推荐" style="position:relative;top:4px;">
             </div>
@@ -220,8 +220,12 @@ export default {
       this.$refs.inquiryView.initView(item.id, type)
     },
     // 跳转到详情
-    goToDetails(item, type) {
-      console.log(item, type)
+    goToDetails(item, path) {
+      if (item) {
+        this.$router.push({ path: `${path}/${item.id || 123}` })
+      } else {
+        this.$router.push({ path: `${path}` })
+      }
     },
     pageChange(e) {
       this.page = e