Commit 7ebe70c9 authored by zhanglw's avatar zhanglw

供应商黄页浮窗

parent 059087f1
......@@ -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 },
......
<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>
......@@ -92,7 +92,7 @@ export default {
})
},
initView(id, type) {
if (type) {
if (this.typeDict[type]) {
this.title = this.typeDict[type]
} else {
this.title = '咨 询'
......
......@@ -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 {
......
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
This diff is collapsed.
......@@ -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
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment